بهترین سبک های طراحی منوهای ناوبری ثابت در طراحی وب در 2018

طراحی یک ناوبری در طراحی وب برنامه ریزی دقیقی را دنبال می کند. شما باید در مورد آنچه کاربران ممکن است به دنبال آن بپردازید و آنچه که از نوع nav در طرح شما مناسب تر باشد فکر کنید.

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

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

بیشتر بخوانید »»» طراحی وب سایت حرفه ای در تبریز

 

نوابار تغییر اندازه خودکار

 

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

با یک نوار ناوبری خودکار می توانید اطمینان حاصل کنید که منوی شما فضای زیادی را از دست نخواهد داد. این نگرانی بزرگی برای Navs ثابت است؛ زیرا آنها همیشه در معرض نمایش روی صفحه قرار می گیرند. و این دو برابر برای  منوهای تلفن همراه است  که فضای صفحه نمایش مقدس است.

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

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

طراحی وب
طراحی وب

 

نگاهی به وب سایت گروه رسانه Fandango نگاهی بیندازید.

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

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

 

مخاطبان خود را با وب سایت های متحرک و ارائه های وب تحت تاثیر قرار دهید

 

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

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

در حال حاضر شما می توانید انتخاب کنید فقط تغییر اندازه لینک ها و یا اصلاح لوگو. شما این را در   وب سایت آرایشگران Tweed را ببینید .

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

طراحی وب
طراحی وب

 

ثابت عمودی Navs

 

همه ما در مورد منوهای ناوبری ثابت افقی می دانیم. اینها، به طور پیشفرض، رایج ترین ناوهای موجود در وب توسط شات های طولانی هستند.

اما شما می توانید ناوبری عمودی نیز کار کنید، اگر شما می دانید که چگونه آن را به درستی طراحی کنید. اکثر اینها نیاز به یک سبک ناز چسبنده دارند تا لینک ها از هر نقطه از سایت قابل دسترسی باشند.

نمونه کارها از  Jorge Rigabert  یک مثال خوب از نوک عمودی طولانی ارائه می دهد. در داخل شما لینک ها را در سراسر طرف مقابل از جمله پروفایل های رسانه های اجتماعی و یک آرم زیبا خواهید یافت. هنگامی که شما یک طرح مانند این شما لازم نیست نگرانی در مورد تغییر اندازه در هنگام پیمایش پایین.

در عوض، شما باید مطمئن شوید که نوک عمودی می تواند به درستی در تلفن همراه تنظیم مجدد شود. این یک کار کامل به خودی خود است، اما زمانی که درست انجام شود، می تواند به نظر بی معنی باشد.

طراحی وب
طراحی وب

 

مثال خوبی دیگر نمونه کارها  مایکل نگو است .

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

اما شما همچنین می توانید یک تکنیک کمی کسب کنید و چیزی شبیه  Roman Kirichik انجام دهید .

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

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

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

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

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

 

عمق را با سایه های قطره اضافه کنید

 

اگر اغلب وب را مرور میکنید، مطمئنا اثرات سایه را مشاهده خواهید کرد. بسیاری از طراحان مایل به دنبال کردن روند صاف  سایه های طولانی هستند،  اما من سایه های CSS3 زیرکتر را ترجیح می دهم تا عمق را به یک صفحه اضافه کنم.

طراحی وب
طراحی وب

 

دانه و ملات  سایت با استفاده از یک سایه ساده در حال سقوط کردن منو ثابت است.

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

سبک سایه ای کامل وجود ندارد و شما در هر ناوبری ثابت نیز نیازی به این ندارید.

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

 

انیمیشن پیمایش در Navbars

 

انیمیشن وب سفارشی یک مفهوم پیچیده برای توسعه دهندگان 10 سال پیش بود. در حال حاضر آن را به آسانی به عنوان  نوشتن برخی از جی کوئری  و یا اضافه کردن برخی از پلاگین ها.

این باعث می شود که حتی طرح بندی ها با کمی microinteractions و انیمیشن های کوچکتر  که به رفتارهای کوچک اما قابل توجه واکنش نشان می دهند، ساده تر شوند  .

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

این نوار نگه دارنده نوار تمیز را در بالای صفحه نگه می دارد و فضای آرم را برای توجه بیشتر فراهم می کند. یک گزینه کمی متفاوت این است که فایله ثابت را در نظر بگیرد پس از آنکه کاربر کافی به اندازه کافی حرکت کند. شما می توانید این را در  99U  با ناوبری بالای خود ببینید.

طراحی وب
طراحی وب

 

تا زمانی که کاربر احساس امنیت در هر چیزی را در صفحه نداشته باشد، نباید بیش از حد روی انیمیشن ها غلبه کنید.

همه نوع انیمیشن های کوچکی وجود دارد که شما می توانید از محو شدن به نظر یا کشیدن به صفحه مانند  وب سایت Coloud انجام دهید .

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

 

نتیجه گیری

 

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

امیدوارم این روند بتواند به شما در طراحی برنامه های خنک نویسان کمک کند تا این لینک ها را ثابت و راحت در هر صفحه در دسترس قرار دهند.

بیشتر بخوانید »»» چرا طراحی وب سایت شما مهم است

 


Source

 

سایر مقالات مفید این سایت: