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

هذه بعض أنماط التنقل المفضلة لديّ ، ويجب أن توفر نقطة انطلاق جيدة لمشاريع التصميم الجديدة.

1. Wayfair

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

ستجد هذه الفتات على صفحات المنتجات و صفحات الفئات حتى يتابعونك في جميع أنحاء الموقع. هذا يتيح لك القفز فئة أو اثنين من أي صفحة مفصلة.

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

2. دعم جوجل

هناك إشارة واضحة أخرى هي Google لأنهم معروفون عمل UX لا يصدق . ستجد فتات الخبز على معظم منتجات جوجل مع صفحات المستويات واحدة من الأفضل هو دعم جوجل موقع.

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

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

3. MSDN Docs

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

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

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

4. أبل

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

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

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

5. TechRadar

غالبًا ما تكون غالبية مسارات التنقل التي أجدها في مواقع الشركة أو متاجر التجارة الإلكترونية. لكن المدونات غالبا ما يكون لها breadcrumbs الخاصة جدا ومثال جيد واحد هو صفحة مقال TechRadar .

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

ولكن هذا يعمل جيدًا إذا لم يكن لديك مكان آخر لإضافة فئة المقالة على الصفحة.

6. TutsPlus

للحصول على تصميم تفصيلي أكثر تفصيلاً ، تحقق من مدونة TutsPlus . تحتوي كل مقالة على مسار تنقل صغير في أعلى الصفحة بما في ذلك الفئات الأساسية والثانوية.

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

العنوان هو جزء من مسار التنقل.

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

7. المبردات

عادة ما تلتزم فتات الخبز التقليدية ببضع رموز نصية مثل الخط المائل للأمام أو قوس السهم الأيمن (>). هذه الأعمال لأنها استخدمت منذ عقود والمستخدمين على دراية بها.

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

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

8. MarketWatch

العودة إلى الأساسيات هو موقع الأخبار على الإنترنت مراقبة السوق . كل من المشاركات الداخلية ميزة التنقل ذهابًا وإيابًا مع أيقونات سهم يمينية إلى نص صغير إلى حد ما.

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

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

9. الأمازون

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

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

ولكن إذا قمت بالتمرير لأسفل على كل صفحة منتج ستجد "معلومات المنتج" أو قسم "تفاصيل المنتج" مع قوائم أفضل البائعين.

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

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

10. ايتسي

موقع التجارة الإلكترونية الإلكتروني / الحرف اليدوية الضخم Etsy يتقدم باستمرار بتصميمه. لقد تم تأسيسها في عام 2005 وتبحث في الموقع الآن ، حيث يمكنك أن ترى أنها أجرت بعض التغييرات الكبيرة على مدى السنوات العشر الماضية.

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

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

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

11. LinuxInsider

ليس هذا التصميم التفصيلي جميلًا على وجه الخصوص ، لكنه يتميز بخاصتي التي لفتت انتباهي.

ستلاحظ رابط "المقالة التالية" بالقرب من أعلى كل منها LinuxInsider نشر . يظهر هذا مباشرةً بجوار مسار التنقل بحيث يبدو وكأنه جزء من التنقل.

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

• ← ما هي أفضل موسيقى للتصميم؟
• أدوبي يكشف أسرار البريد الإلكتروني →