در طراحی وب یکی از ابزارهایی که بازدیدکنندگان به وفور از آن استفاده می‌کنند یعنی بخش جستجو و جعبه‌ی سرچ را می‌توان به شکل‌های مختلف در بخش‌های مختلف صفحه قرار داد. به علاوه برای هر ابزار مثل گوشی و تبلت و مانیتور بزرگ، می‌بایست به ساده بودن دسترسی و استفاده از ابزار سرچ هم توجه کرد.
در این مقاله می‌خواهیم با ۸ طرح جالب جعبه سرچ سایت‌ها آشنا شویم که همگی حالتی متحرک و خلاقانه دارند. تمام انیمیشن‌های جالب با جاوااسکریپت و CSS پیاده‌سازی می‌شود.
قبل از ادامه‌ی مطلب به این نکته توجه کنید که در نمونه‌های جالبی که در ادامه معرفی می‌کنیم، معمولاً کدهای جاوااسکریپت از نوع خالص نیستند و بلکه پروژ‌ها مبتنی بر jquery نوشته شده و لذا باید لایبرری جی‌کوئری را نیز در صفحه‌ی وب بارگذاری کنید.
تبدیل ذره‌بین سرچ به جعبه‌ی Search
یک ذره‌بین ساده با انیمیشن‌های مختلفی می‌تواند به یک کادر کوچک برای سرچ تبدیل شود. با کلیک کردن روی ذره‌بینی که در نمونه‌ی زیر مشاهده می‌کنید، دسته‌ی ذره‌بین به دکمه‌ی ضربدر تبدیل می‌شود و عدسی به مستطیل ساده‌ای که جعبه‌ی سرچ است بدل می‌شود. با کلیک مجدد، باکس Search بسته می‌شود و به آیکون ذره‌بین تبدیل می‌شود.
نکته‌ی مثبت در این طراحی جالب و پویا، سازگاری آن با وسایل مختلف و به خصوص صفحات کوچک است. ذره‌بین یک آیکون کوچک است و فضای اندکی اشغال می‌کند. بنابراین می‌توانید آن را در گوشه و کنار صفحه در هر موقعیتی قرار بدهید.
ذره‌بین Search که با مکث کردن موس به کادر سرچ تبدیل می‌شود
می‌توانید ذره‌بین سرچ را به گونه‌ای طراحی کنید که صرفاً با Hover کردن یا به زبان فارسی، مکث کردن موس روی آن، به جعبه‌ی سرچ تبدیل شود.
این روش از نظر دسترسی و فضای لازم بسیار بهینه و ساده است اما برای کاربرانی که از موبایل استفاده می‌کنند، کم و بیش مشکل‌ساز است.
جعبه سرچ چسبنده در بالای صفحه سایت
منوهای چسبنده یا Sticky یکی از ترندهای طراحی وب هستند. در مورد کادر جستجوی سایت هم می‌توانید از همین سبک استفاده کنید. این روش برای وب‌سایت‌هایی که بازدیدکنندگان به وفور به کادر سرچ نیاز پیدا می‌کنند و در واقع کادر سرچ مهم‌تر از منو یا هر آیتم دیگری در صفحه است، بسیار عالی است چرا که همیشه کادر سرچ در بالای صفحه و در اختیار کاربر خواهد بود.
توجه کنید که آیکون منوی همبرگری یا سه‌خطی، به شکلی ساده در کنار کادر سرچ قرار می‌گیرد. بنابراین دسترسی به منو هم بسیار خوب است.
طراحی جعبه سرچ تمام‌صفحه به سبک متریال دیزاین گوگل
ترند دیگری که در طراحی رابط گرافیکی سایت‌ها و اپلیکیشن‌ها متداول شده و بسیار محبوب است، طراحی ساده مبتنی بر زبان Material Design گوگل است. در زبان طراحی متریال همه چیز حالت ساده و تخت دارد و المان‌ها با فواصل نسبتاً زیاد و سایه‌های ملایم از هم جدا شده‌اند. بنابراین کاربر اپ یا بازدیدکننده‌ی سایت به راحتی آنچه می‌خواهد را پیدا کرده و استفاده می‌کند.
در مورد جعبه‌ی سرچ می‌توانید یک آیکون در نقطه‌ای از صفحه قرار بدهید که مثل اغلب سایت‌ها و اپ‌های گوگل، گرد و دارای سایه‌ی ملایم است. با تپ کردن یا کلیک کردن روی آیکون سرچ، صفحه‌ی سرچ به صورت بزرگ و تمام‌صفحه باز می‌شود.
همان‌طور که مشاهده می‌کنید نکته‌ی مثبت این طراحی، دسترسی عالی در نمایشگرهای کوچک موبایل است و حتی در مانیتورهای بزرگ هم با توجه به درشت و تمام‌صفحه بودن جعبه‌ی سرچ، تایپ کردن عبارت‌های طولانی بسیار ساده خواهد بود.
جعبه سرچ سایت با قابلیت جستجوی اعضا و مطالب و غیره
در برخی سایت‌ها، ممکن است کاربران بخواهند نام کاربران دیگر یا مطالب یا موارد خاص دیگری را جست‌وجو کنند. در این صورت می‌توانید در کادر ساده‌ی سرچ، چند آیکون برای انتخاب نوع محتوایی که سرچ می‌شود، اضافه کنید. مثل نمونه‌ی زیر که البته صرفاً طراحی ظاهری است و باید کدنویسی مربوط به عملکرد حالت‌های مختلفی نیز انجام شود.
کادر سرچ با قابلیت نمایش نتایج حین تایپ کردن
یکی دیگر از روش‌های طراحی جعبه‌ی سرچ این است که با استفاده از AJAX، نتایج جست‌وجو را به صورت زنده و آنی و هم‌زمان با تایپ کردن کلمات، به کاربر ارایه کنید.
این روش از نگاه کاربردی بسیار عالی است چرا که ممکن است کاربر دقیقاً نام مقاله یا محصول یا محتوای موردنظر را نداند و با سرچ کردن عبارت کامل به نتیجه‌ی خوبی نرسد. به این ترتیب با تایپ کردن اولین حرف‌ها و کلمات، سریعاً آنچه لازم دارد را پیدا می‌کند.
طراحی جعبه سرچ تمام صفحه با زمینه‌ی شفاف
روش دیگر که برای طراحی جعبه‌ی سرچ استفاده می‌شود این است که دکمه یا آیکونی برای سرچ کردن در نظر بگیرید که با کلیک روی آن، صفحه مات می‌شود و کادر سرچ با پس‌زمینه‌ی شفاف تمام صفحه را پر می‌کند.
کادر مولتی‌سرچ با قابلیت انتخاب موضوع جستجو
در برخی وب‌سایت‌ها که کاربر با استفاده از ابزار سرچ می‌تواند در بخش‌ها و موضوعات مختلف جستجو کند، راهکار عالی این است که از کادری با قابلیت Multi Search استفاده کنید. به عبارت دیگر کاربر از منوی کرکره‌ای موضوع را انتخاب می‌کند و سپس کلمات کلیدی موردنظر خود را سرچ می‌کند.
speckyboyسیاره‌ی آی‌تی