تشترك المربعات في بعض عناصر التصميم الأساسية. استخدم قوالب ومكونات البلاط لبناء مربعات فريدة لتطبيقك.
العناصر الأساسية
يصف الجدول التالي عناصر تصميم البلاط الأساسية.
|
|
|
|
|
|
رمز التطبيقيوفر مطور التطبيق رموز التطبيقات، ويتم عرضها مؤقتًا على الشاشة. |
مجال التصميملكل نموذج من نماذج المربّعات قواعده الخاصة في ما يتعلق بمنطقة المحتوى الأساسي. تأكد من الرجوع إلى إرشادات التخطيط. |
الزر السفليالأزرار مهمة لتفعيل الإجراءات الثانوية على المربّع. ضَع الأزرار فوق أسفل الشاشة بنسبة% 6.3. |
رمز التطبيق
يعرض نظام التشغيل Wear رمز التطبيق تلقائيًا أثناء انتقال المستخدم في لوحة عرض دوّارة للمربّع. يتلاشى رمز التطبيق ولا يجب تنفيذه داخل المربع. لمزيد من المعلومات حول إنشاء رموز التطبيقات، يمكنك الاطّلاع على رموز المنتج.
الشكل 1. أمثلة على رموز التطبيقات
يعرض تطبيق Wear تلقائيًا رمز تطبيقك
الإجراءات التي يُنصح بها
الإجراءات غير المُوصى بها
زرّ
اختر نصًا قصيرًا للأزرار. استخدم نصًا خاصًا بإجراء ووجهة عبارة الحث على اتخاذ إجراء. تأكد من أن ترجمة نص الزر تتناسب مع عدد الأحرف. إذا كان نص الزر المُترجَم طويلاً جدًا، اضبط الزر على خيار المزيد بدلاً من ذلك.
|
|
|
موضع الإعلان |
مواصفات الأزرار |
Type |
| ضَع الزرّ بنسبة% 6.3 من الجزء السفلي إذا كانت خلفية شاشة الساعة. | اترك مساحة متروكة 12 بكسل مستقل الكثافة على كلا الجانبين. | أحجام الخطوط غير قابلة للتطوير. اضبط الحد الأدنى لحجم الخط على تسعة. وبالنسبة إلى اللغات غير اللاتينية، استخدِم الحد الأدنى لحجم الخط وهو سبعة. |
النماذج
هناك أربعة أنواع من قوالب المربعات المتاحة. يمكنك تنزيل مجموعة أدوات تصميم مربّعات (Figma) للاطّلاع على الأمثلة ولتقديم ملاحظات وآراء بشأن تجربتك في استخدام هذا النموذج.
التركيز على النص
تم تصميم نموذج المربع النصي المستند إلى النص لعرض النص على المربعات مثل آخر الأخبار والأحداث القادمة والتذكيرات. ويتم استخدامه عادةً لتسجيل الدخول وحالات الخطأ وحالة الإعداد لإعلام المستخدمين بما يحدث وتقديم عبارة واضحة تحث المستخدم على اتخاذ إجراء.
التركيز على الزر
صُمم قالب المربع الذي يركز على الزر للمربعات التي تحتوي على ما يصل إلى خمسة إجراءات أساسية. استخدِم هذا النموذج لبدء مهام محدَّدة بسرعة.
تركز على المعلومات
يعرض نموذج المربع الذي يركز على المعلومات مقاييس عالية المستوى ومستوى التقدم. ويُعدّ هذا الإجراء مفيدًا بشكلٍ خاص في المربّعات المتعلّقة بالصحة واللياقة البدنية. يوفر خيارات مرنة لعرض المحتوى. للحفاظ على سهولة العرض، حدد أولويات البيانات المهمة وتجنب تكديس القالب بشكل مفرط.
تركز على البيانات
قالب المربع الذي يركز على البيانات هو قالب متعدد الاستخدامات مصمم لعرض المخططات والعناصر الرسومية التي تلخّص المعلومات الدورية. توفر المرونة في تصور البيانات ومفيدة لإنشاء حالات فارغة مرئية. يعد الحفاظ على عناصر رسومية بسيطة أمرًا ضروريًا لضمان بقاء المربع سريعًا.
اللون
للحفاظ على سرعة عرض المربعات، اختصِر بثلاثة ألوان فقط.
الإجراءات التي يُنصح بها
الإجراءات غير المُوصى بها
أسلوب الخط
يمكنك استخدام Roboto كخط أساسي على نظام التشغيل Wear OS. استخدم النص الأساسي 2 كحجم خط افتراضي وأصغر، والشاشة 2 كأكبر حجم.
لمزيد من المعلومات حول الخط والوزن وتغيير الحجم، يمكنك الاطّلاع على أسلوب الخط.
المكوّنات
استخدِم المكوّنات لبناء مربّعاتك. خصِّص ألوان المكوّن للتعبير عن علامتك التجارية من خلال اتّباع إرشادات تخصيص تصاميم الملابس.
يمكنك تنزيل مجموعة أدوات تصميم مربّعات (Figma) للاطّلاع على أمثلة للمكوّنات.
| المكوّن | الصيغة | مثال |
| زرّ | الزر العادي | الأحجام المتاحة: عادية، وكبيرة جدًا، وكبيرة جدًا  |
| زرّ | زر النص العادي | الأحجام المتاحة: عادية، وكبيرة جدًا، وكبيرة جدًا  |
| الشريحة | شريحة عادية أساسية |
 |
| الشريحة | شريحة عادية ثانوية |
 |
| الشريحة | شريحة صورة رمزية صغيرة |
 |
| الشريحة | شريحة صورة رمزية كبيرة |
 |
| الشريحة | شريحة مدمجة (أسفل) |
 |
| مؤشر التقدم | مؤشر التقدم العادي |
 |
| مؤشر التقدم | مؤشر مستوى تقدُّم مع فجوة |
 |
المَراجع
لمزيد من المعلومات، راجع إرشادات تصميم مربّعات الشاشة.