تخطيطات التصميم التكيُّفي الأساسي

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

بلاط

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

التخصيص من خلال استخدام المكونات والتصاميم

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

الإنشاء للتنسيقات سريعة الاستجابة (شاشات ذات ارتفاع ثابت وهوامش النسبة المئوية)

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

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

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

إنشاء تجارب متميّزة

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

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

إضافة قيمة بعد نقطة إيقاف الحجم على الشاشات الأكبر حجمًا

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

تنسيقات التطبيقات القابلة للتمرير وغير القابلة للتمرير

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

تنسيقات التطبيق غير القابلة للتمرير

التخطيطات الأساسية ومكونات ملء الشاشة (بما في ذلك الوسائط واللياقة البدنية)

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

إرشادات الاستجابة (بالنسبة المئوية للهوامش)

حدد جميع الهوامش بالنسب المئوية وحدِّد القيود الرأسية بحيث يمكن أن يمتد المحتوى الرئيسي في المنتصف لملء مساحة العرض المتاحة.

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

إنشاء تجارب متميّزة

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

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

كيفية إضافة قيمة بعد نقطة الإيقاف على الشاشات الأكبر حجمًا

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

تظهر عدة أمثلة على هذا السلوك في القائمة التالية:

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

تمرير تنسيقات التطبيق

التخطيطات الأساسية

تتضمن تنسيقات عرض التطبيق التمرير القوائم (ScalingLazyColumn) ومربعات الحوار. تشكل هذه التخطيطات غالبية شاشات التطبيق، وتمثل مجموعة من المكونات التي تحتاج إلى التكيف مع أحجام الشاشات الأكبر.

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

إرشادات الاستجابة (بالنسبة المئوية للهوامش)

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

إنشاء تجارب متميّزة

طرق عرض التمرير قابلة للتخصيص بشكل كبير، مع إمكانية إضافة أي مجموعة من المكونات بأي ترتيب.

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

إضافة قيمة بعد نقطة الإيقاف على الشاشات الكبيرة

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