اقتراحات التصميم

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

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

التصاميم للشاشات الأكبر

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

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

إليك بعض الاقتراحات:

• توفير تنسيقات مخصّصة لهذه الشاشات الأكبر يمكنك إجراء ذلك باستخدام البُعد الأقصر للشاشة أو الحدّ الأدنى للعرض والارتفاع المتاحَين.
• تخيَّل كيف تعمل تجربة المستخدم والتنسيقات في بيئة أفقية أولاً مثل ChromeOS. يمكنك تعديل التصاميم لتظهر بشكل جيد وتعمل بشكل جيد في هذه الاتجاهات استنادًا إلى حجم النافذة، أو يمكنك توفير تصاميم أفقية محدّدة باستخدام أداة تحديد نوع المورد land. يمكنك الاطّلاع على مزيد من المعلومات حول تغيير حجم النافذة بشكلٍ ديناميكي واعتبارات أخرى للشاشات الكبيرة على صفحة "إدارة النوافذ".
• لا تتوسّع أشرطة التنقّل السفلية بشكل جيد عندما يتم توسيع تطبيقك ليصبح عريضًا. ننصحك بنقل شريط التنقّل إلى قائمة على الجانب الأيمن حيث يمكن الوصول إليه بسهولة أكبر ويمكنه عرض المزيد من الخيارات. يوضّح مثال "الردّ" ذلك بشكل جيد.
• على الأقل، خصِّص السمات، مثل أحجام الخطوط والهوامش والمسافات للشاشات الأكبر حجمًا، لتحسين استخدام المساحة وسهولة قراءة المحتوى. يجب مراعاة كيف ستبدو العناصر عندما يكون المستخدمون بعيدين قليلاً عن الجهاز، مثل جهاز ChromeOS أو بيئات سطح المكتب الأخرى.
• اضبط موضع عناصر التحكّم في واجهة المستخدم لتكون في متناول المستخدمين عند استخدام الماوس أو حمل الجهاز اللوحي، مثلاً نحو الجوانب وبعيدًا عن المنتصف.
• يجب أن تكون مساحة الحشو لعناصر واجهة المستخدم أكبر عادةً على أجهزة ChromeOS والأجهزة الأخرى ذات الشاشات الكبيرة مقارنةً بالهواتف. يجب أن تتكيّف الهوامش والمساحات الفاصلة مع أحجام الشاشات المختلفة.
• املأ المحتوى النصي بشكل كافٍ حتى لا تتم محاذاته مباشرةً على طول حواف الشاشة. استخدِم مساحة متروكة لا تقلّ عن 16 وحدة بكسل مستقلة حول المحتوى بالقرب من حواف الشاشة.

على وجه الخصوص، تأكَّد من عدم ظهور تخطيطاتك "ممدّدة" على الشاشة:

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

الاستفادة من مساحة الشاشة الإضافية

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

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

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

في ما يلي بعض الاقتراحات لتطبيقك:

• تحدّد علامتك التجارية الاتجاه الذي يجب اتّباعه عند التفكير في أحجام الشاشات المختلفة هذه. يعتمد تحديد ما يجب إعطاؤه الأولوية وعرضه للمستخدم على أنواع رحلات المستخدمين المتوفّرة والميزات الأكثر استخدامًا. للحصول على أفكار، اطّلِع على دراسات Material وشاهِد كيف يستجيب كل منتج بشكل مختلف لشاشة أكبر.
• فكِّر في كيفية عمل تصميم تطبيقك باستخدام نظام شبكة متجاوب، وكيفية نقل المحتوى وعناصر التنقّل والخيارات عند الحصول على مساحة أكبر على الشاشة.
• حدِّد أحجام الشاشات التي ستستخدم فيها تخطيطًا مختلفًا، ثم قدِّم التخطيطات المختلفة في حِزم أحجام النوافذ المناسبة (مثل كبير/كبير جدًا) أو الحد الأدنى لعرض النوافذ (مثل sw600dp/sw720). تذكَّر أنّه عند الوصول إلى هذه التنسيقات، يجب ألا يتغيّر السياق العام الذي كان المستخدم فيه، وعليك محاولة الاحتفاظ بجميع حالات المستخدم أثناء الانتقال بين التنسيقات (موضع التمرير، والنص الذي تتم كتابته، وما إلى ذلك).

استخدام مواد عرض مصمَّمة للشاشات الأكبر حجمًا وذات الكثافة الأعلى

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

للمزيد من المعلومات حول VectorDrawables وأصول الرسومات المتجهة على Android، يمكنك الاطّلاع على مشاركة المدونة هذه التي كتبها نيك بوتشر.

ضبط أحجام الخطوط ومساحات اللمس

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

في ما يلي بعض الاعتبارات:

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