21 قوائم تنقل جميلة ومبتكرة

نشرت: 2017-11-17

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

جدول المحتويات إخفاء
clyp - الشريط الجانبي لـ iPhone
HBK / وكالة إبداعية
UI Kit (فندق)
رموز قائمة التنقل Mixpanel / واجهة المستخدم
إغلاق القائمة الجانبية
تطبيق شريط تفاعلي
شريط علامة تبويب متحرك
كالهون pt. الخامس
قائمة مزدوجة
لقطة موقع Jazzboard
قائمة محدد التاريخ
قائمة جانبية
ناف بار - Blaffin Arenas Mobile
WePassengers ، القائمة
اسقاط
شريط تمرير الخيارات
القائمة المنسدلة
قائمة البلد + اللغة
قراءة حسب الفئة
تصميم القائمة
القائمة المنسدلة

clyp - الشريط الجانبي لـ iPhone

clyp - شريط جانبي لـ iPhone بواسطة Riccardo Carlet - قوائم Dribbble الإبداعية للتنقل دبوس

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

HBK / وكالة إبداعية

HBK Creative Agenc قوائم التنقل الإبداعية دبوس

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

UI Kit (فندق)

Ui Kit (فندق) بواسطة Mike _ Creative Mints - Dribbble دبوس

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

رموز قائمة التنقل Mixpanel / واجهة المستخدم

Mixpanel Navigation Menu Icons_UI بواسطة Mason Yarnell - Dribbble دبوس

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

إغلاق القائمة الجانبية

إغلاق القائمة الجانبية بواسطة Eddie Lobanovskiy - Dribbble دبوس

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

تطبيق شريط تفاعلي

تطبيق شريط تفاعلي من Gal Shir - Dribbble دبوس

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

شريط علامة تبويب متحرك

شريط علامات تبويب متحرك بواسطة فيرجيل بانا - Dribbble دبوس

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

كالهون pt. الخامس

كالهونس pt. ي بواسطة جاي فليتشر - المراوغة دبوس

هذا أيضًا مصدر إلهام رائع حقًا. يحتوي هذا المشروع على مفهوم تصميم إبداعي ويوفر تنقلًا سلسًا.

قائمة مزدوجة

قائمة مزدوجة قوائم التنقل الإبداعية دبوس

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

لقطة موقع Jazzboard

موقع ويب Jazzboard تم تصويره بواسطة Mads Ejsing - Dribbble دبوس

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

قائمة محدد التاريخ

قائمة محدد التاريخ من قبل Ozzy Urrutia - Dribbble دبوس

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

قائمة جانبية

قائمة جانبية من دارينا ماتفينكو - Dribbble دبوس

هذه القائمة الجانبية تبدو رائعة. يستخدم ألوانًا ترابية لإنشاء تصميم رائع للواجهة.

ناف بار - Blaffin Arenas Mobile

ناف بار - Blaffin Arenas Mobile بواسطة Miguel Oliva Marquez - Dribbble دبوس

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

WePassengers ، القائمة

WePassengers ، قائمة لورنزو فرانشيني - Dribbble دبوس

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

اسقاط

قوائم التنقل الإبداعية المنسدلة دبوس

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

شريط تمرير الخيارات

سلايدر الخيارات - كريس بانيستر - Dribbble دبوس

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

القائمة المنسدلة

القائمة المنسدلة بواسطة Bady - Dribbble دبوس

هذا هو مفهوم تصميم شريط التنقل الذي يستخدم اللون الأخضر كلونه الرئيسي. تستخدم الحالة المنسدلة ظلًا أغمق قليلاً من اللون الأخضر.

قائمة البلد + اللغة

Country + Language Menu بواسطة Mike Precious - Dribbble دبوس

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

قراءة حسب الفئة

قراءة حسب الفئة بقلم Janna Hagan - Dribbble دبوس

هذا مفهوم آخر رائع لتصميم النظرة الخاطفة التي لا يزال المصمم يعمل على المحاذاة.

تصميم القائمة

تصميم القائمة من قبل Lauren Bradley - Dribbble دبوس

في هذا المشروع ، كانت Lauren Bradley تلعب بمفاهيم قائمة معقدة مع طرق عرض Anon مقابل طرق العرض المسجلة و 3 مستويات. والنتيجة حقا أنيقة.

القائمة المنسدلة

القائمة المنسدلة بواسطة جوناثان أوغدن - Dribbble دبوس

هذه هي المحاولة الأولى لقائمة منسدلة لهذا المصمم ويبدو أن تصميمها كان ممتعًا للغاية.