اَشکال طراحی ریسپانسیو: روندهای جدید برای طراحی سایت

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

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

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

جستجو منوهای کشویی  در طراحی سایت

یکی از برجسته ترین اَشکال جستجو، منوهای کشویی هستند. این ها می توانند با لینکی در داخل یک نوار پیمایشی که جهت فعال نمودن جستجوها تعبیه شده اند، ثابت نگه داشت. از آنجایی که بسیاری از وب سایت ها از پیمایش های ثابت استفاده می کنند، خیلی آسان تر می توان فیلدهای جستجو را در همه مکان ها نمایش داد. اما اصلا نگران نباشید، با استفاد از نوارهای پیمایشی استاتیک، شما جستجوی منوهای کشویی را بسیار عملی تر فرا خواهید گرفت.

وب سایت معروف Search Engine Journal، این کار را با یک فیلد جستجوی سریع و آسان در گوشه سمت راست بالا انجام می دهد و د ارای یک آیتم شیشه ای بسیار کوچکی است که بایستی برای همگان در سراسر دنیا قابل دسترسی باشد. شرکت طراحی سایت

به محض این که فیلید نمایش داده شود، به طور اتوماتیک علامت این آیکون شیشه ل=ای به صورت " X" تغییر می کند. این روشی ایده آل برای اعیین تجربه کاربری است و از این رو، افراد می توانند بدانند که باید این فیلد را هر بار ببند.

لازم به ذکر است که طراحی SEJ نیز به صورا آرمانی بوده و به طور کاملبا طرح همه دستگاه ها ترکیب می گردد. Problogger نیز یکی دیگر از نمونه های مناسبی است که کمی در خصوص دسک تاپ ها و موبایل ها فرق دارد.

وقتی  در حال اجرای برنامه در صفحه نمایش های کوچک تر باشید، این فیلد شیشه ای بسیار کوچک به صورت منوی کشویی ظاهر می گردد.

اما کاربران دسک تاپ ها فضای بیشتری در نوارهای پیمایشی دارند که باعث می شود بتوانند یک جستجوی کاملا کاربردی را اِعمال نموده و این بسیار عالی است.

شما هم در صورتی که فضای خالی و کافی در اختیار دارید، می توانید این کار را امتحان نمایید .

یکی دیگر از سایت های معروف که از این تکنیک استفاده می کند، وب سایت Riding Skinny می باشد.

در نظر داشته باشید که چگونه فیلد جستجوی پیش فرض، بسیار کوچک تر از سایر لینک هایی است که در نوار پیمایشی قرار دارند. با این روش، فضای زیادی لازم نبوده و در همه جا حتی در دستگاه های کوچک قابل دیدن خواهد بود.

مودال تمام صفحه

اگر ا ز تاثیرات ویژه  منوهای کشویی خوشتان نمی آید، می توانید به جای آ؟ن از منوی پنجرههای مودال استفاده کنید.

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

شما می توانید نمونه کامل این عبار را در وب سایت  Full Home Living ببینید که مودال های جستجو، تمام صفحه را در بر گرفته اند.

این باعث جلب توجه کاربران شده  و به نظر می رسد بسیار ریسپانسیو طراحی شده است. همچنین استفاده بسیار ساده ای داغرد زیرا مودال ها می توانند  با یک اشاره هم بسته شوند!

تنها کمی پایین تر، می توانید  گزینه " کمی بیشتر" را مشاهده کنید . البته اگر دلتان نمی خواهد تنها یک پوشش صفحه نمایش ساده در مقابل چشمانتان ظاهر گردد. البته چنانچه عزم خودتان را جزم کرده اید تا محتوای بیشتری در آن بگنجانید، ما توصیه می کنیم که یک مودال جستجو  همچون Comedy Central در وب سایت خود ایجاد نمایید.

ورودی های ریسپانسیو داخلی

اَشکال پویای داخلی، ترکیبی از فیلدهای جستجوی مخفی به همراه منوهای کشویی ارائه می دهند. شما با یک شکل جستجوی داخلی، می توانید جستجوها را به سمت منوی خود هدایت نموده اما بیشتر به صورت داخلی و آنلاین نمایش دهید تا این که آن را در زیر نوار پیمایش قرار دهید. ما همین تاثیرات را در Designmodo داریم و این معروف ترین انتخاب برای بیشتر بلاگ ها می باشد.

برای نمونه، طرح Cartoon Brew به همراه فیلد جستجوی داخلی آن را در نظر بگیرید. پیمایش های آن، در نوار view مجهز به یک آیکون مشخص بوده و تا زمانی که هیچ گونه تغییری رخ ندهد، شکل آن ظاهر نخواهد شد.

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

اما شما می توانیدفیلدهای جستجوی داخلی را با مخفی نمودن آن ها در داخل نوارهای پیماشی یز محافظت کنید. DualShockers دارای منوی کشویی بسیار زیبایی است که در همه مانیتورها و دستگاه ها با هر اندازه ای قابل اجراست.

این پیمایش، همه لینک های دارای منو را با جستجوی فرم های مخصوص در قسمت بالا نگاه می دارد. دسترسی و ایجاد پبمایش بسیار آسان است. درست مانند UI برای همه دستگاه ها.

اگر به منوهای همبرگری و کشویی علاقمند هستید، این کار برایتان خیلی جالب خواهد بود.

اما برای دنبال کردن مناسب این تکنیک، بایستی منوهای همبرگری را به صورت پیش فرض در مانیتور خود نگاه دارید.

این ها مطمئنا تنها ایده نیستند بلکه همان چیزهایی هستند که به دنبالشان می باشید.

بهترین روش برای طراحی اشکال داخلی، پیروی از سبک  Cartoon Brew و یا سبکی است که ما در این جا و در مورد  Designmodo. انجام داده ایم.

فرم هایی با انعطاف پذیری های بالا

ما اغالب این طرح های جستجو را ندیده ایم اما مطمئنا این هادر صورتی که با تم شما سازگار باشند، برترین گزینه پیشنهادی خواهند بود.

با استفاده از این اشکال فشما می توانید شکل کلی متناسب با تم و صدو در صدی پهنای مانیتورتان را طراحی کنید. از همین جا می توانید فیلدهای را برای فضاهای کوچک تر و حتی منوهای بسیار پایین تر در تلفن های همراه هوشمند طراحی کنید.

با استفاده از این تکنیک، فیلد جستجو همیشه قابل مشاهده بوده و فقط به اندازه مورد نیاز کاهش می یابد. Authentic Jobs یک نمونه معتبر از این روند در راستای اجرای عملیات می باشد.

اگر وب سایتی را بازدید کرده و مرورگر خود را تغییر داده اید، خواهید دید که سایر  وب سایت ها چگونه با یکدیگر سازمان دهی شده اند. تم مورد نظر بایستی به اندازه کافی انعطاف پذیر بوده  و همه چیز در آن قابل مشاهده باشند.

فرم های جستجو یکی از مهم ترین عناصر برای بسیاری از وب سایت ها هستند که باید در طراحی سایت رعایت شوند و اگر شما هم به دنبال این روش می باشید، بهتر است از تکنیک های این مطلب بهره بگیرید.

Push Square از این روش با اشکال جستجوگر خود درست در قسمت بالای صفحه استفاده کرده است. کلیک کردن بر روی آیکون های شیشه ای شکل، و به فرض صد در صد عرض صفحه، کل مساحت مانیتور را در بر میگیرد. اگر در حال کار کرد با دسک تاپ های 1920 پیکسلی هستید، این فیلدهای جستجو به درستی بر روی صفحه نمایشان تنظیم خواهند شد.

طراحی فرم های جستجوگر شما

یهترین روش برای جستجوی های ریسپانسیو، اغلب تبعیت از پروژه هاست.این موضوع بیشتر در طراحی فروشگاه اینترنتی دیده می شود ، برخی از منوهای کشویی فقط برای زمینه های جستجوی خارجی تنظیم شده اند. اگر از نحوه پیبمایش به سمت جلو اطلاعا کافی در دست ندارید، وب سایت های دیگری را برای طراحی و مطالعه اششکال خود مد نظر بگیرید. بهتر است بهترین تمارین و پروژه ها را در نظر بگیرید وببینید کدام یک به درستی پاسخگوی UI های مورد نظرتان می باشند.