عام جديد سعيد لجميع القراء! اليوم ، سنلقي نظرة على ثلاثة اتجاهات رئيسية للملاحة سوف تهيمن على 2015.

قد يظن المرء أننا استكشفنا كل تنويع محتمل للملاحة على الويب ، ومع ذلك فإننا نرى استمرار الاستكشاف داخل هذا المكان المحدد للغاية. إنه لأمر مدهش حقا كيف يمكن تطبيق العديد من أشكال التصميم على قائمة متواضعة من الروابط.

هنا أريد أن أضع في الاعتبار 3 اتجاهات شعبية في مجال الملاحة: أولًا كيف يتغير استخدام navicon (أو رمز الهامبرغر) ، وثانيًا نهجًا جديدًا باستخدام قوائم ملء الشاشة ، وفي النهاية ما أعتبره الكمال في القائمة المنسدلة الضخمة. دعونا نتعمق ونرى هذه الأساليب في العمل.

تحيا / الموت ل ، نافيكا!

تم منح موقع Facebook الفضل في تعميم استخدام navicons لإخفاء خيارات التنقل خارج الشاشة أو إيقاف الرسم. مع ولادة تصميم الويب سريع الاستجابة ، كان مجتمع تصميم الويب يائسة لإيجاد حل للملاحة. كل شيء تغليف في لوحة ملاحة يجلس قبالة قماش ، والتحركات في اختيار navicon كان حلا جذابا. يبدو أن المجتمع قد تدخله كحل سهل إلى حد ما بدا وكأنه يجعل الحياة أسهل على المصمم والمطور. ونتيجة لذلك ، أصبح نظام الملاحة وسيلة انتقال إلى تطبيقات الجوال ومواقع الويب.

لكن في الآونة الأخيرة ، تعرضت البحرية لهجوم. في العديد من هذه المناقشات ، يبدو أنه تم حذف أحد التفاصيل المهمة. تنتقل صناعة تطبيقات الجوال بعيدًا عن الملاحة عبر الشاشة لصالح خيارات الشاشة. يأتي هذا في ظل الاتجاه نحو التطبيقات المركزة ذات الأغراض الفردية. هذا يجعل التغيير أكثر منطقية. في المقابل ، يمكن تعبئة موقع ويب صغير بعشرات ، إن لم يكن مئات الروابط في الملاحة. خذ على سبيل المثال موقعًا مثل sony.com ، أو حتى هذا الموقع. هذه المواقع لديها احتياجات الملاحة التي تتجاوز ما هو ممكن مع شريط علامة تبويب بسيطة. لهذا السبب يبدو لي أن navicons والقوائم الشاشة خارج البقاء هنا. علينا ببساطة أن نكون واعين بحدودها ومشاكلها المحتملة وما إلى ذلك. وبالطبع ، ضع في اعتبارك دائمًا الاستخدام: هل هو تطبيق جوّال أو موقع ويب للجوّال / سريع الاستجابة. لأنها ليست هي نفسها.

01

يعد موقع الويب الخاص بوكالة التصميم Long Story Short مثالًا رائعًا على كيفية الاستفادة من navicon بطريقة هادفة ومقيدة. يستفيد هذا الموقع من navicon لإخفاء النطاق الكامل لخيارات التنقل. وهو يفعل ذلك على كل من إصدارات الجوال وسطح المكتب للموقع. استخدام navicons على سطح المكتب في الواقع هو الاتجاه الفرعي كله هنا. ما يجعل هذا الموقع هو مثال ممتاز للنهج هو أن العناصر الأكثر أهمية في التنقل تظهر خارج القائمة . الصفحة الرئيسية هي بوابة إلى الأقسام الثلاثة الأكثر أهمية في الموقع. وبهذه الطريقة ، لا تعد القائمة المخفية هي التنقل الأساسي ، ولكنها قائمة ثانوية تملأ الفراغات.

02

موقع Squarespace هو مثال جميل آخر عن كيفية استخدام القوائم المخفية بفعالية. في هذا الموقع ، تكون خيارات الجولات وتسجيل الدخول مرئية دائمًا. في حين يتم تضمين حوالي 23 خيار قائمة في الإجمالي في قائمة الشرائح. بصراحة ، استخدام القوائم المخفية للسماح لخيارات التنقل الأكثر أهمية لتحتل مركز الصدارة ليس أقل من رائع. ذهبت من خلال مرحلة كنت فيها حقا على استخدام navicons على سطح المكتب. بدا وكأنه استخدام ملكة جمال لهذه التقنية. ومع ذلك ، بعد رؤية كيف تستخدمها المواقع لدفع المستخدمين نحو العناصر الأكثر أهمية ، لا يسعني إلا أن أحبها.

أخيرًا ، إذا كنت تشعر بالحزن بسبب استخدام navicons ، أو القوائم المخفية لا تأخذ كلمة أي شخص لذلك. بدلاً من ذلك ، يمكنك إجراء اختبارات قابلية الاستخدام الخاصة بك لمعرفة ما إذا كانت تعمل لموقعك. والقاعدة الأساسية العظيمة هي تجنب النقاش والانتقال بدلاً من ذلك.

08
09
10

التنقل على كامل الشاشة

الاتجاه الثاني الذي أود إلقاء نظرة عليه هو استخدام قوائم التنقل على كامل الشاشة. عادة ما يتم تنشيط هذه القوائم عن طريق زر أو رابط من نوع ما ؛ في كثير من الأحيان a navicon. الفرق هنا هو أنه بدلاً من لوحة صغيرة تنزلق ، يتولى التنقل الشاشة بأكملها. على الهاتف المحمول هذا يبدو طبيعيا ، ولكن على سطح المكتب هذا هو في الواقع نهج جديد ومثير للاهتمام.

03

إن التنقل على هذا الموقع مثير للاهتمام من حيث أن تراكب التنقل تحوي الكثير من اللكمات في القائمة. هنا لديهم خيارات القائمة المتوقعة ، ولكن نظرًا لأنه شاشة كاملة ، فإن لديهم أيضًا مساحة لنموذج اتصال كامل ومعلومات الاتصال وروابط وسائل التواصل الاجتماعي ومقالة مدونة حديثة وعبارة بارزة تحث المستخدم على اتخاذ إجراء.

من المثير للاهتمام اعتبار المستخدم الذي يطلق قائمة في أي وقت يبحث عن الاتجاه. هذا يجعلها فرصة رئيسية لتوجيههم نحو ما تريد منهم القيام به. في هذه الحالة ، يريدون من المستخدم الاتصال أو زيارة مخطط المشروع.

04

في هذا المثال ، نرى أيضًا النمط في العمل ، ولكن بطريقة أضيق من ذلك بكثير. بدلاً من التعبئة في خيارات إضافية اختاروا ببساطة تقديم قائمة موجزة للغاية من خيارات التنقل. بالإضافة إلى أنها تحصل على نقاط مكافأة لتحريك navicon إلى "x" لإغلاق القائمة.

05
06
07

الكمال من القائمة فائقة الحجم

وأخيرًا ، أريد أن أفكر في القائمة المنسدلة ذات الحجم الكبير أو الضخم. إن استخدام أنظمة القوائم فائقة الحجم ليس بالأمر الجديد. ما أجده مثيرًا للاهتمام هو المحتوى الموجود داخلها. في تقييمي للأشياء قام المصممون بالفعل بوضع هذا الفضاء الجديد للعمل بطرق فعالة.

11

يوضح موقع Lowes بشكل مثالي ما يدور في ذهني. هنا يمكنك أن ترى أن نظام القائمة أصبح موقعًا للمحتوى. يمكن استخدام هذا المحتوى لتوجيه تدفق المستخدمين من خلال الموقع. الأهم من ذلك أنها يمكن أن تدفعهم نحو المحتوى الأهم. يصبح السؤال ، ما هو أهم محتوى؟ ربما هي العناصر الأكثر ربحية في متجرك. وبهذه الطريقة يعمل الملاحة بمثابة مندوب مبيعات يدفع المنتجات الأكثر ربحية. أو ربما يتم استخدامه لتوجيه المستخدمين إلى العناصر الأكثر شعبية.

12

موقع آخر يستخدم هذا الخيار بطريقة مختلفة قليلاً هو موقع New Balance على الويب. هنا تكون القوائم المنسدلة الثلاثة الأولى كبيرة في طبيعتها ، ولكنها في الأساس قوائم روابط. ومع ذلك ، فإن الخيار الأخير لإنشاء أحذية مخصصة ينتج القائمة المنسدلة المعروضة أعلاه. خيار القائمة هذا هو رابط واحد. أحب أن انتهزوا الفرصة لجعل هذا العنصر الواحد في مقدمة مقنعة حقًا للمحتوى الذي يكمن خلف الرابط.

13
14
15
16

استنتاج

هذه الاتجاهات الثلاثة ، على الرغم من أننا يمكن مناقشتها بشكل منفصل لها العديد من السمات المشتركة. الأساسي من بين هذه هي الطريقة التي تغيرت الملاحة على مر السنين. تستخدم القوائم المنسدلة بشكل عام قائمة منظمة من الروابط. بالنسبة للجزء الأكبر كانوا محايدين إلى حد ما في أن جميع الأشياء قدمت على قدم المساواة. الآن نجد أن أنظمة الملاحة هي طريقة رئيسية للمساعدة في توجيه المستخدمين نحو الأهداف المرغوبة.

بالنسبة لي ، التحدي واضح. أننا يجب أن نرفع تفكيرنا في الملاحة ونحتضن بالفعل تأثيره على تجربة استخدام مواقع الويب التي نقوم بإنشائها. في كثير من الأحيان أجد أن الملاحة هي جزءًا من فكرة ثانوية. عندما تكون في الواقع ، يجب أن تكون من بين العناصر الأكثر دقة ودقّة في التصميم.