أفضل الممارسات المتعلّقة بالبلاط

التصميم على خلفية سوداء

من المهم تصميم التطبيقات على خلفية سوداء في Wear OS لسببَين رئيسيَّين:

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

افعل هذا

اضبط لون الخلفية على الأسود دائمًا.

لا تفعل ذلك

لا تضبط الخلفية كصورة بلا حدود أو لون موحّد.

تضمين العناصر الضرورية فقط

عند تفعيل هذه الميزة (على سبيل المثال، باستخدام ProtoLayout Material3 PrimaryLayout)، سيعرض نظام التشغيل Wear OS تلقائيًا رمز التطبيق الدائم، والذي سيظهر تلقائيًا عندما ينتقل المستخدم عبر لوحة العرض الدوّارة للمربّعات. يجب عدم تصميم رمز التطبيق وإضافته كجزء من شاشة المعلومات.

تأكَّد من أنّ رمز التطبيق المقدَّم أحادي اللون إذا كنت تستخدم مظهرًا ديناميكيًا في مربّع التطبيق. اطّلِع على إرشادات رموز منتجات Android لمعرفة كيفية إنشاء رمز التطبيق لعلامتك التجارية.

افعل هذا

قد يعرض نظام التشغيل Wear OS رمز التطبيق تلقائيًا عندما ينتقل المستخدم عبر لوحة العرض الدوّارة للمربّعات. لست بحاجة إلى وضع رمز التطبيق في تصميم المربّع.

لا تفعل ذلك

لا تضِف رمز التطبيق في تصميم المربّع لأنّه قد يظهر مرّتين/متداخلًا إذا تم عرضه أيضًا على مستوى النظام.

إخفاء عناوين التطبيقات لضمان الحد الأدنى من استهدافات النقر

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

افعل هذا

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

لا تفعل ذلك

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

اختيار حالة استخدام أساسية واحدة للتمييز

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

افعل هذا

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

لا تفعل ذلك

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

يجب تضمين حاوية واحدة (على الأقل).

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

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

افعل هذا

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

لا تفعل ذلك

هذه الشاشة أقل فعالية لأنّها لا توضّح أنّه يمكن للمستخدم النقر على المحتوى للاطّلاع على معلومات إضافية.

جعل الإجراءات مفهومة على الفور

لا تتوفّر للتجارب على الساعة مساحة كبيرة للتعبير عن معناها، لذا تتضمّن المربّعات الأكثر فعالية مكوّنات تفاعلية يمكن توقّعها بسهولة.

افعل هذا

يستفيد المربّع الناجح بالكامل من المساحة المتاحة للتعبير بوضوح عن نتيجة كل إجراء.

لا تفعل ذلك

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

ترتيب الأولويات للإجراءات بشكل مرئي

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

  • استخدِم الألوان الأساسية على أزرار الإجراءات الأساسية.
  • استخدام ألوان ثانوية/ثالثية على الإجراءات الثانوية

افعل هذا

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

لا تفعل ذلك

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

تبسيط المحتوى في عدد أقل من الحاويات

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

افعل هذا

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

لا تفعل ذلك

لا حاجة لاستخدام 4 حاويات هنا لأنّ جميع المعلومات ستنتقل إلى الموقع الجغرافي نفسه.

استخدام الحاويات لأغراض وظيفية

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

افعل هذا

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

لا تفعل ذلك

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

عرض تمثيلات سهلة الفهم للرسوم البيانية والرسومات البيانية

إنّ إمكانية الاطّلاع السريع على المحتوى هي من أهم العناصر في تصميم Wear OS. نظرًا لوقت الظهور المحدود على الشاشة (حوالي 7 ثوانٍ)، يجب إعطاء الأولوية للمعلومات الأساسية بتنسيق واضح وسهل الفهم بنظرة سريعة.

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

افعل هذا

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

لا تفعل ذلك

عرض معلومات رقمية أو إحصاءات مفصّلة في المربّع