طراحي فرم هاي جستجوي پاسخگو (Responsive Search Forms)

روش ها و روند هاي رايج براي طراحي سايت

تمامي طراحي سايت هاي مدرن بايد از طرح يا قالب پاسخ گو استفاده کنند. اين باعث مي شود که جست و جو در يک طراحي سايت بر روي تمامي دستگاه ها آسان‌تر شود، اما اين طراحي سايت ها کمي سخت تر از طراحي سايت هاي ديگر است. فيلد جست و جو يکي از مثال هاي بارز از عناصر طراحي سايت ها است که طراحي و استفاده از آن کمي سخت به نظر مي رسد. با افزايش استفاده از قالب هاي پاسخگو در طراحي سايت ها، طراحان وب روندها و روش‌هاي جديدي براي ايجاد فرم هاي جستجو پيدا کرده اند که قابل دسترس است و از نظر ظاهري بسيار زيبا به نظر مي رسند.

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

رايج ترين ويژگي جست و جو در طراحي سايت ، فرم جستجوي کشويي (Dropdown Form) است. اين نوار را مي‌توان از طريق قرار دادن لينک در قسمت نويگيشن بار ايجاد کرد که مي توان از طريق آن، جستجو را فعال يا غير فعال کرد. از آن جايي که بسياري از طراحي سايت ها از نويگيشن ثابت استفاده مي‌کنند، حفظ فيلد جستجو در تمامي قسمت هاي طراحي سايت کار آسان تري است.

اما حتي با وجود نويگيشن بار ثابت، مي توانيد متوجه شويد که ويژگي فرم جستجوي کشويي مانند، به شدت کاربردي است، زيرا فضاي کافي زيادي بر روي صفحات پاسخگو وجود ندارد تا بتوانيد فرم جستجو را بدون آسيب به محتواي اصلي درون طراحي سايت قرار دهيد.

سايت خبري Search Engine اين کار را به سرعت و راحتي در قسمت بالاي صفحه خود انجام داده است.

اين طراحي سايت از آيکون ذره بين مانندي کمک مي گيرد که در قسمت بالاي وب سايت قرار گرفته است و براي تمام کاربران قابل مشاهده است.

هنگامي که فيلد جستجو نمايش داده مي‌شود، ذره‌بين قرار گرفته به طور اتومات تبديل به X مي‌شود. استفاده از اين ابزار، روشي عالي براي بهبود رابط کاربري طراحي سايت است تا افراد متوجه شوند که هر زمان قصد داشته باشند مي توانند فيلد جستجو را ببندند.

بهتر است به اين نکته نيز اشاره کنيم که اين طراحي سايت خارق العاده است و به صورت بدون نقص با تمامي وب سايت ها و تمامي دستگاه ها هم خواني دارد.

Problogger يکي ديگر از مثال هاي خوب در اين زمينه است که عملکرد آن در موبايل و دسکتاپ کمي متفاوت است.

هنگامي که جستجوي خود را در صفحات کوچک تر انجام مي دهيد ذره بين موجود براي جستجو را در قسمت فيلد جستجو پيدا مي کنيد، اما کاربران دسکتاپ فضاي بيشتري در نويگيشن بار در اختيار دارند که با استفاده از آن، فيلد جستجو نهايت عملکرد خود را نشان مي‌دهد.

منبع : https://whitewolfteam.com/blog/web-design/responsive-search-forms/

دیدگاه خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *