طراحي فرم هاي جستجوي ريسپانسيو ( قسمت دوم )

اگر فضاي کافي در نويگيشن بار طراحي سايت خود داريد، مي توانيد اين روش را امتحان کنيد.

يکي ديگر از طراحي سايت هايي که از تکنيک مشابه استفاده مي کند وب سايت SkinnyTies است.

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

Modal تمام صفحه

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

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

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

البته اگر نمي خواهيد تا تمام صفحه طراحي سايت شما تنها با يک فيلد جستجوي کوچک پر شود، اين مدل براي شما کارايي ندارد، اما اگر جسارت کافي براي افزودن محتواي بيشتر به صفحه داريد، مي توانيد مدال جستجوي خود را مانند طراحي سايت Comedy Central ايجاد کنيد.

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

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

ورودي هاي پاسخگوي درون خطي (Inline Responsive Inputs)

فرم هاي خطوط دروني پويا، فيلدهاي جست و جوي مخفي دوگانه اي را در کنار منوهاي کشويي طراحي سايت پيشنهاد مي کند.

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

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