التفكير في طرق لحل مشكلة SIDENAV
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
في تحدي واجهة المستخدم الرسومية اليوم، أنشأنا تجربة تنقل جانبي يمكن الوصول إليها من خلال التنقل الجانبي وسريعة الاستجابة، وذلك باستخدام CSS وJS. يعمل شريط التنقل الجانبي على العديد من المتصفحات وأحجام الشاشات وأجهزة الإدخال. هل هذا صحيح؟ يمكنك المتابعة بينما نستخدم الشبكة والتحويل والفئات الزائفة ومقدار هائل من JavaScript للتعامل مع تجربة المستخدم هذه.
سيردّ @AdamArgyleInk على تعليقاتك خلال أوّل 30 دقيقة بعد طرح الحلقة. يمكنك التواصل معنا هنا أو طرح الأسئلة أو إرسال الرمز الخاص بك.
الفصول:
- 0:00 - مقدمة
- 0:30 - نظرة عامة على ميزة تصحيح الأخطاء في الزاوية
- 2:25 - الشبكة += تخطيط تكديس استعلام الوسائط
- 3:42 - الانتقال من خلال تسهيل الاستخدام
- 4:22 - :target Class
- 5:57 - Escape Key UX
- 6:16 - تنظيم التركيز
- 6:49 - تجربة المستخدم لقارئ الشاشة
- 7:56 - الخاتمة والعبارة التي تحث المستخدم على اتخاذ إجراء
المراجع:
مشاهدة المزيد من تحدّيات واجهة المستخدم التصويرية ← https://goo.gle/GUIchallenges
الاشتراك في Google Chrome Developers ← http://goo.gl/LLLNvf
arrow_back الرجوع إلى كل الحلقات
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2021-01-21 (حسب التوقيت العالمي المتفَّق عليه)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"لا يحتوي على المعلومات التي أحتاج إليها."
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"الخطوات معقدة للغاية / كثيرة جدًا."
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"المحتوى قديم."
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"ثمة مشكلة في الترجمة."
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"مشكلة في العيّنات / التعليمات البرمجية"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"غير ذلك"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"يسهُل فهم المحتوى."
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"ساعَدني المحتوى في حلّ مشكلتي."
},{
"type": "thumb-up",
"id": "otherUp",
"label":"غير ذلك"
}]
{"lastModified": "\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0623\u062e\u064a\u0631: 2021-01-21 (\u062d\u0633\u0628 \u0627\u0644\u062a\u0648\u0642\u064a\u062a \u0627\u0644\u0639\u0627\u0644\u0645\u064a \u0627\u0644\u0645\u062a\u0641\u0651\u064e\u0642 \u0639\u0644\u064a\u0647)"}
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2021-01-21 (حسب التوقيت العالمي المتفَّق عليه)"],[],[]]