يجب أن يعمل تطبيقك بشكل جيد على أجهزة Wear OS بجميع أحجامها، مع الاستفادة من مساحة إضافية متى توفرت، وستظل تبدو رائعة على الشاشات الأصغر أيضًا. ويقدّم هذا الدليل توصيات لتحقيق تجربة المستخدم هذه.
لمعرفة المزيد حول مبادئ التصميم للتخطيطات التكيفية، اطلع على إرشادات التصميم.
إنشاء تخطيطات سريعة الاستجابة باستخدام Horspeak
يجب أن تحتوي التنسيقات على هوامش تستند إلى النسبة المئوية. نظرًا لأن ميزة "الكتابة" تعمل من خلال الافتراضية في القيم المطلقة بدلاً من ذلك، فاستخدم مكونات من مكتبة علم الحساسية، التي تتميز بالميزات التالية:
- يتم ضبط الهوامش الأفقية بشكلٍ صحيح بناءً على نسبة مئوية من شاشة الجهاز الحجم.
- تم ضبط التباعد في الأعلى والأسفل بشكل صحيح. يمثل هذا تحديات معينة
حيث يعتمد التباعد العلوي والسفلي الموصى به على المكونات
استخدام البيانات المختلفة. على سبيل المثال، يجب أن يختلف المسافة في السمة
Chip
عن السمةText
عند استخدامه في قائمة. - تم ضبط الهوامش
TimeText
بشكل صحيح.
يستخدم مقتطف الرمز التالي نسخة Horology
التنسيق ScalingLazyColumn
لإنشاء محتوى يبدو رائعًا على مجموعة متنوّعة
من أحجام شاشات Wear OS:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
يوضِّح هذا المثال أيضًا السمتَين ScreenScaffold
وAppScaffold
.
هذه التنسيقات بين التطبيق والشاشات الفردية
(مسارات التنقل) لضمان سلوك التمرير الصحيح
مكانة "TimeText
" في السوق.
بالنسبة إلى المساحة المتروكة العلوية والسفلية، يجب أيضًا مراعاة ما يلي:
- مواصفات أول وآخر
ItemType
، لتحديد القيمة الصحيحة المساحة المتروكة. - يتم استخدام
ResponsiveListHeader
للعنصر الأول في القائمة بسبب يجب ألا تحتوي عناوينText
على مساحة متروكة.
يمكن العثور على المواصفات الكاملة في مجموعات تصميم Figma. لمزيد من المعلومات، التفاصيل والأمثلة، يُرجى الاطّلاع على:
- مكتبة علم البشر - توفر مكونات للمساعدة في بناء والمحسّنة والمختلفة لنظام Wear OS
- نموذج ComposeStarter: وهو مثال يعرض الموضحة في هذا الدليل.
- نموذج JetCaster - الذي يعد مثالاً أكثر تعقيدًا لتصميم يعمل مع أحجام شاشات مختلفة، باستخدام مكتبة هورولوجيا.
استخدام تنسيقات التمرير في تطبيقك
استخدام تنسيق التمرير، كما هو موضّح سابقًا في هذه الصفحة، كخيار تلقائي عند تنفيذ شاشاتك. يتيح ذلك للمستخدمين الوصول إلى مكونات تطبيقك. بغض النظر عن إعدادات العرض المفضّلة أو حجم شاشة الجهاز الذي يعمل بنظام التشغيل Wear OS
![تأثير اختلاف حجم الجهاز وتغيير تحجيم الخط](https://developer.android.com/static/images/wear/screenshot-test.png?authuser=6&hl=ar)
تأثير أحجام الأجهزة المختلفة وتغيير حجم الخطوط
مربّعات حوار
يجب أيضًا أن تكون مربّعات الحوار قابلة للتمرير، ما لم يكن هناك سبب وجيه لعدم السماح بذلك.
يضيف المكوِّن ResponsiveDialog
، الذي يوفره Horology، السمة
التالي:
- الانتقال بشكل تلقائي
- تصحيح الهوامش بناءً على النسبة المئوية.
- الأزرار التي تضبط عرضها حيث تسمح المساحة، لتوفير أهداف النقر.
![السلوك التكيُّفي لمربعات الحوار في المهندسين.](https://developer.android.com/static/images/wear/adaptive-dialogs.png?authuser=6&hl=ar)
مربعات حوار سريعة الاستجابة، توفر التمرير التلقائي والأزرار التي تتوافق على المساحة المتوفّرة
قد تتطلب الشاشات المخصَّصة تنسيقات لا يمكن التمرير فيها.
قد تكون بعض الشاشات مناسبة للتنسيقات التي لا يتم التمرير فيها. أمثلة متعددة تشمل شاشة المشغل الرئيسية في تطبيق وسائط وشاشة التمرين في تطبيق اللياقة البدنية.
في هذه الحالات، ألقِ نظرة على الإرشادات الأساسية المتوفرة في مجموعات أدوات تصميم Figma، وتنفيذ تصميم سريع الاستجابة للحجم الشاشة، باستخدام الهوامش الصحيحة.
تقديم تجارب متميّزة من خلال نقاط التوقف
عند استخدام شاشات أكبر، يمكنك تقديم محتوى وميزات إضافية. إلى وتنفيذ هذا النوع من التجارب المميّزة، أو استخدام نقاط الفواصل الإعلانية لحجم الشاشة، عرض تنسيق مختلف عندما يتجاوز حجم الشاشة 225 وحدة بكسل مستقلة الكثافة:
const val LARGE_DISPLAY_BREAKPOINT = 225 @Composable fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT // ... // ... use in your Composables: if (isLargeDisplay()) { // Show additional content. } else { // Show content only for smaller displays. } // ...
توضح إرشادات التصميم المزيد من هذه الفرص.
اختبار مجموعات من أحجام الشاشة والخط باستخدام المعاينات
يساعدك إنشاء المعاينات في تطوير مجموعة متنوعة من أحجام شاشات نظام التشغيل Wear OS. يمكنك استخدام تعريفات الأجهزة ومعاينة تغيير حجم الخط على حد سواء لمعرفة ما يلي:
- كيف تنظر شاشاتك إلى الحدود القصوى للحجم، على سبيل المثال، الخط الأكبر مقترنًا بأصغر شاشة.
- سلوك تجربتك المميّزة خلال نقاط الإيقاف
ضمان تنفيذ المعاينات باستخدام WearPreviewDevices
WearPreviewFontScales
لجميع الشاشات في تطبيقك
@WearPreviewDevices @WearPreviewFontScales @Composable fun ComposeListPreview() { ComposeList() }
اختبار لقطات الشاشة
بالإضافة إلى اختبار المعاينة، يتيح لك اختبار لقطات الشاشة إجراء الاختبارات على مجموعة من أحجام الأجهزة الحالية. وهذا مفيد بشكل خاص عندما تكون هذه الأجهزة متاحًا لك في الحال، وقد لا تظهر المشكلة لأحجام الشاشات الأخرى.
كما يساعدك اختبار لقطة الشاشة في تحديد التراجعات في مواقع محددة في قاعدة التعليمات البرمجية.
تستخدم نماذجنا Roborazzi لاختبار لقطات الشاشة:
- ضبط ملفات المشروع والتطبيق
build.gradle
لاستخدامها روبورازي. - إنشاء اختبار لقطة شاشة لكل شاشة في تطبيقك. على سبيل المثال:
في نموذج ComposeStarter، يؤدّي اختبار
GreetingScreen
التنفيذ كما هو موضّح فيGreetingScreenTest
:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
override val tolerance = 0.02f
@Test
fun greetingScreenTest() = runTest {
AppScaffold(
timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
) {
GreetingScreen(greetingName = "screenshot", onShowList = {})
}
}
companion object {
@JvmStatic
@ParameterizedRobolectricTestRunner.Parameters
fun devices() = WearDevice.entries
}
}
بعض النقاط المهمة التي يجب مراعاتها:
- يتيح لك
FixedTimeSource
إنشاء لقطات شاشة لا تسمح فيهاTimeText
. وأن تتسبب عن غير قصد في فشل الاختبارات. - يتضمّن
WearDevice.entries
تعريفات لأجهزة Wear OS الأكثر رواجًا، وبالتالي إجراء الاختبارات على مجموعة تمثيلية من أحجام الشاشات.
إنشاء صور ذهبية
لإنشاء صور لشاشاتك، شغِّل الأمر التالي في وحدة طرفية:
./gradlew recordRoborazziDebug
التحقّق من الصور
للتحقّق من التغييرات مقابل صور حالية، شغِّل الأمر التالي في محطة طرفية:
./gradlew verifyRoborazziDebug
للاطّلاع على مثال كامل لاختبار لقطات الشاشة، يمكنك الاطّلاع على النموذج ComposeStarter.