طراحی ریسپانسیو فرم های جستجو در سایت

چهارشنبه 26 مهر 1396
8:17
طراحی سایت

امروزه طراحان هنگام طراحی سایت می بایست از لایه بندی و طرحی استفاده نمایند که به صورت ریسپانسیو باشد این کار باعث می شود که مرورگر هر دیوایسی مانند موبایل های هوشمند و تبلت ها بتوانند سایت را به خوبی مشاهده نمایند البته همین امر باعث پیچیدگی کار طراحی نیز می شود یکی از این المان های سایت که هنگام طراحی ریسپانسیو سایت دارای پیچیدگی می باشد فیلد جستجو سایت است چرا که باید طوری طراحی شود که در دیوایس های مختلف به خوبی پاسخگوی کاربران باشد . ما در اینجا قصد داریم چند نمونه جالب و زیبا از فیلد جستجو ریسپانسو را مشاهده کنیم که باعث این می شود که بتوان راحت تر ایده گرفت .

فیلد جستجو به وسیله Dropdown

یکی از روش های رایج فلیدهای جستجو روش Dropdown می باشد در این روش می توان با یک لینک در داخل نوار فیلد جستوی مناسب خود را ایجاد کرد . از آنجای که امروزه بسیاری از سایت ها از ناوبری و منوهای ثابت استفاده می کنند می توان فیلد جستجو را با قرار دادن در آن بخش در تمایم بخش های یک صفحه سایت به راحتی پیدا کرد و از آن بهره برد . البته این نکته ضرری است که در لایه ندی ریسپانسو جای زیادی برای فیلد جستجو وجود ندارد و زمانی که بر روی آیکون جستجو کلیک می شود بخشی از محتوای سایت را برای نشان دادن textbox خود اشغال می کند . همچنین در این قسمت می توان نوعی افکت نیز ایجاد کرد وقتی کاربر بر روی آیکون جستجو کلیک می کند و textbox جستجو نشان داده می شود آیکون جستجو که یک ذربین می باشد به آیکون ضربدر تغییر داده شود یک افکت آسان ولی جالب توجه .


Fullscreen Modal

یکی دیگر از روش های طراحی فیلد جستجو استفاده از روش Fullscreen Modal می باشد در این روش هنگامی که کاربر بر روی آیکون جستجو کلیک می نماید پنجره ای به صورت پاپ آپ یا به شکل دیگری در جلوی کاربر نمایان می شود به طوری که بخش وسیعی را در صفحه که اصولا در وسط صفحه می باشد را اشغال کرده است . این باعث می شود تمرکز کاربر بر روی فرم جستجو به خوبی انجام شود همچنین می توان هنگام کلیک بر روی آیکون جستجو و باز شدن آن در وسط صفحه بقیه صفحه به صورت تار نمایان شود تا جذابیت کار طراحی در این بخش کامل گردد .


Inline Responsive Inputs

این روش نیز امروزه در برخی از سایت ها به خوبی مورد استفاده قرار می گیرد در این روش فیلد جستجو به صورت کشویی درون سایت باز می گردد در واقع به این نوع فیلد جستجو فیلد درون خطی جستجو نیز گفته می شود با استفاده از این روش می تون فرم درون خطی جستجو را در داخل منو خود طراحی کنید اما آن را به صورت درون خطی قرار دهید نه به صورت ناوبری . در این صورت وقتی کاربر بر روی فیلد جستجو کلیک می کند textbox های آن به صورت کشویی درون سایت باز می شود همچنین می توان در این روش جستجو را براساس نیاز کاربر به بخش های مختلف درون فیلد های کشویی تقسیم نمود .



[ بازدید : 36 ] [ امتیاز : 3 ] [ نظر شما :
]
نام :
ایمیل :
آدرس وب سایت :
متن :
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) =D> :S
کد امنیتی : ریست تصویر
تمامی حقوق این وب سایت متعلق به طراحی سایت است. || طراح قالب avazak.ir
ساخت وبلاگ تالار اسپیس فریم اجاره اسپیس خرید آنتی ویروس نمای چوبی ترموود فنلاندی روف گاردن باغ تالار عروسی فلاورباکس گلچین کلاه کاسکت تجهیزات نمازخانه مجله مثبت زندگی سبد پلاستیکی خرید وسایل شهربازی تولید کننده دیگ بخار تجهیزات آشپزخانه صنعتی پارچه برزنت مجله زندگی بهتر تعمیر ماشین شارژی نوار خطر خرید نایلون حبابدار نایلون حبابدار خرید استند فلزی خرید نظم دهنده لباس خرید بک لینک خرید آنتی ویروس
بستن تبلیغات [X]