المظهر هو مجموعة من الأنماط أو السمات، مثل اللون والنوع والشكل، والتي يمكن أن تؤثر في شكل ومظهر جهاز المستخدم الجوّال أو الشاشة الكبيرة وتجربته داخل التطبيق.
الخلاصات
- لمنح المستخدمين تجربة أكثر تخصيصًا وسهلة الاستخدام، يُرجى التأكّد من أنّ تطبيقك يستخدم الإعدادات المفضّلة للنظام، بما في ذلك المظاهر، مثل المظهر الفاتح أو الداكن والديناميكية والتباين.
- يمكنك إنشاء مظهر مخصَّص لاستخدامه كعنصر احتياطي في حال عدم توفُّر مظهر ديناميكي.
- ضع في اعتبارك إعدادات الكتابة عند استخدام المظاهر المختلفة.
- تأكَّد دائمًا من عدم وجود تباين بين النص وسطحه لضمان الوضوح.
أنواع المظاهر
تعتمد المظاهر على النظام أو التطبيق. يمكن أن تؤثر مظاهر النظام في واجهة المستخدم بالكامل لجهاز المستخدم وتوفر عناصر تحكم مقابلة في إعدادات الجهاز، في حين لا يؤثر مظهر التطبيق إلا في التطبيق الذي تم تنفيذه فيه.
يجب أن يستخدم تطبيقك أيًا من نوعَي المظاهر لعرضه، ولكن لا تنطبق مظاهر التطبيق إلا داخل التطبيق وليس في أي مكان آخر على الجهاز. يمكنك أيضًا إلغاء بعض إعدادات مظهر النظام من خلال الإعدادات داخل التطبيق.
مظاهر النظام
يتم تطبيق مظاهر النظام على جهاز Android بأكمله، بما في ذلك التطبيقات الفردية بناءً على إعدادات المستخدم. تشمل مظاهر النظام مظاهر فاتحة وداكنة ومظاهر من إنشاء المستخدمين ومظاهر شركة مصنّعة.
المظاهر الفاتحة والداكنة
يتألّف وضع "المظهر الفاتح" أو وضع "اليوم" من وضع عرض ساطع مع سطوع أعلى وأسطح مصممة بدرجات ألوان عالية. وعلى العكس من ذلك، يعمل المظهر الداكن أو الوضع الليلي على تبديل واجهة المستخدم لتقليل السطوع. تم بناء الأسطح من اللون الرمادي الداكن أو قيم الدرجات اللونية المنخفضة.
وللمظهر الداكن مزايا متعددة، منها المساعدة في قراءة الشاشة بسهولة في ظروف الإضاءة المشمسة أو المنخفضة، وتقليل إجهاد العين بسبب انخفاض مستوى السطوع، والحفاظ على عمر البطارية. كما أنه غالبًا ما يكون ميزة التطبيق الأكثر طلبًا بين المستخدمين.
ننصحك بأخذ النقاط الأساسية التالية في الاعتبار عند تنفيذ المظاهر الفاتحة والداكنة:
- يمكنك تخصيص نظام ألوان للحصول على تعبير أكبر. إذا كنت تستخدم Material Theme Builder لإنشاء مخطط، فسيتم تلقائيًا إنشاء مخطط. اقرأ المزيد حول تخصيص المواد ونظام الألوان لإنشاء مظهر يحمل علامة تجارية.
- يمكن للمستخدمين ضبط مظهر فاتح أو مظهر داكن على إعدادات العرض على مستوى النظام على وضع التفعيل الدائم أو الإيقاف دائمًا أو تلقائيًا حسب الوقت من اليوم. ننصح بإظهار إعدادات النظام المفضلة لدى المستخدم، ولكن من الجيد أيضًا إنشاء عناصر تحكم داخل التطبيق لتزويد المستخدمين بتعديلات أكثر دقة.
- يمكن أيضًا لمحتوى الويب في مكوّنات WebView استخدام النمط الفاتح أو الداكن أو التلقائي. يمكنك الاطّلاع على طريقة إتاحة "المظهر الداكن" في مكتبات WebView.
- يمكن لنظام Android فرض وضع "المظهر الداكن" إذا فعّله المستخدمون. يمكنك أيضًا إنشاء مظهر داكن مخصّص للتحكّم بشكل أكبر.
- إذا لم يفعّل المستخدم مظاهر أو إعدادات أخرى، يمكنك "قفل" تطبيقك باستخدام المظهر الفاتح. ومع ذلك، لا نوصي بالقيام بذلك، لأنه قد يتعارض مع احتياجات المستخدم والتخصيص.
المظاهر التي أنشأها المستخدمون
تتوافق المظاهر التي ينشئها المستخدمون مع اللون الديناميكي الذي وفّرناه باستخدام Material You بدءًا من الإصدار 12 من نظام Android. عند تفعيل هذا الإعداد، يستمِد اللون الديناميكي ألوانًا مخصّصة من خلفية المستخدم ليتم تطبيقها على التطبيقات وواجهة مستخدم النظام. تُستخدم لوحة الألوان هذه كنقطة بداية لإنشاء مخططات الألوان الفاتحة والداكنة.
ويمكن أيضًا تعديل إعدادات الخطوط ضمن إعدادات الجهاز لاستيفاء الإعدادات المفضّلة لدى المستخدم واحتياجات إمكانية الوصول. يمكن وينبغي أن تنطبق هذه الإعدادات على التطبيقات، لذا تأكد من استخدام قيم البكسل القابلة للتطوير للخطوط.
مظاهر الشركة المصنّعة
قد توفر الشركات المصنعة للأجهزة إمكانيات إضافية خاصة بتحديد المظاهر يمكن أن تؤثر في واجهة مستخدم النظام وإعدادات العرض.
مظاهر التطبيقات
الخط القاعدي
توفر مكونات Material في مكتبة Material موضوعًا أساسيًا يستخدم نظام ألوان أرجوانية وخط Roboto. أي تطبيق لا يحدد سمات المظهر يعود إلى هذه السمات الأساسية.
مخصّص (العلامة التجارية)
يمنحك استخدام المظاهر المخصّصة نطاقًا أكبر من التعبير لشكل وأسلوب تطبيقك، أو ليكون بمثابة عنصر احتياطي عند عدم توفّر مظاهر نظام معيّنة. يكون هذا مفيدًا سواء كنت تعمل مع نظام تصميم مخصص كامل أو دليل صغير للعلامة التجارية أو عدد قليل من ألوانك المفضلة.
يمكن أن يشتمل تطبيقك أيضًا على العديد من المخططات المخصّصة، سواء كانت المخططات الكاملة التي يمكن للمستخدم الاختيار منها، أو العناصر المستوحاة من المحتوى، أو العناصر ذات العلامات التجارية الفرعية.
المحتوى
لجذب المزيد من التركيز إلى بعض المحتوى، يمكن لواجهة المستخدم استخدام اللون الديناميكي لاكتساب اللون من ذلك المحتوى. يعمل لون المحتوى بشكل جيد مع مصدر محتوى أساسي واحد، ولكن احرص على استخدامه بحذر في المشاهدات التي تتضمّن مصادر محتوى متعددة.
يؤثر المظهر عادةً على تطبيق عام، ولكن يمكن أيضًا تطبيقه بشكل انتقائي إلى جانب موضوعات أخرى. تجنَّب استخدام عدد كبير جدًا من المظاهر والمجموعات من خلال الحفاظ على تسلسل هرمي: وهو مصدر المظهر الأساسي (سواء الديناميكي أو المخصّص) الذي ينطبق على غالبية واجهة المستخدِم.
المادة
يوفر Material Design مظهرًا أساسيًا وأنظمة موضوعات (اللون والنوع والشكل). يمكن أيضًا توسيع نطاق تخصيص التصميم المتعدد الأبعاد لإضافة سمات إضافية للمظهر.
علامة تجارية
إذا كانت أنظمة مظاهر Material Design لا تتوافق مع الشكل والمظهر اللذين تريدهما في تطبيقك، يمكنك تنفيذ مظهر مخصص بالكامل. تأكد من اختبار الخصائص المخصصة من أجل التباين والوضوح.
اطّلِع على كيفية تنفيذ نظام مخصّص في Compose.
سمات المظهر
تتماشى سمات المظهر مع الأنماط المرئية الشائعة المستخدمة في تصميم واجهة المستخدم لإثارة مجموعة من الجماليات. داخل التطبيق، غالبًا ما ترتبط هذه الخصائص بأنظمة تحديد نسق المواد للسماح بتخصيص أداة تطوير التطبيقات.
اللون
استخدم الألوان للتعبير عن الأسلوب وتوصيل المعنى. يمكن أن يكون ضبط ألوان تطبيقك حاسمًا للتخصيص، وتحديد الغرض الدلالي، وبالطبع تحديد هوية العلامة التجارية.
داخل المظهر، نظام الألوان هو مجموعة الدرجات اللونية المخصصة لأدوار محددة يتم تعيينها إلى المكونات. تعرَّف على المزيد من المعلومات حول اللون في واجهة مستخدم Android ونظام ألوان Material 3.
Type
خط نظام Android هو Roboto (المتاح مجانًا لجميع التطبيقات) ولكن يمكنك تخصيص النوع. ضع في اعتبارك سهولة قراءة الخطوط المحددة لتتماشى مع أدوارها. الاطّلاع على معلومات حول تطبيق النوع
شكل
يساعد تخصيص شكل زوايا الحاوية عن الإعدادات الافتراضية الأساسية في تحديد طبيعة تطبيقك. على سبيل المثال، يمكنك استخدام زوايا مستديرة كاملة لإضفاء طابع أكثر سلاسة ومرحًا مع أو استخدام قطع زاوٍ لإضفاء شعور أكثر جدية. تحقَّق من الرموز المميزة للأشكال والأنماط الخاصة بمكونات Material.
الرموز
تتوفر رموز Material لاستخدامها في تطبيقك بخمسة أنماط: معبأ، مخطط، حاد، مستدير، اثنين من الألوان. استخدم نفس نمط الأيقونة في جميع أنحاء التطبيق للحفاظ على مظهر متسق ومصقول.
سمات المظاهر الأخرى
بينما يشكل اللون والنوع والشكل أنظمة تحديد Material الأساسية، لا تقتصر أنظمة التصميم على المفاهيم التي تعتمد عليها Material. يمكنك تعديل الأنظمة الحالية وتقديم أنظمة جديدة بالكامل، مع فئات وأنواع جديدة لجعل مفاهيم أخرى متوافقة مع المظاهر. وقد تحتاج أيضًا إلى توسيع نطاق الأنظمة الحالية أو استبدالها لاستخدام سمات مخصّصة أكثر مما تم توفيره. على سبيل المثال، قد تحتاج إلى إضافة نظام من التدرجات أو أبعاد المسافات.
تطبيق مظهر في تطبيقك
مقارنة بين المظهر والنمط بالإضافة إلى الصفوف
يمكن أن تحتوي كل من المظاهر والأنماط على سمات تصميم متعددة. وقد يكون النمط مستقلاً عن المظهر ويشير إلى شكل عنصر فردي (أو عرض)، بينما يمكنك تعيين مظهر عبر عناصر متعددة وحتى التطبيق بأكمله. والنمط هو خيار أسلوبي قابل لإعادة الاستخدام، مشابه لنمط أو رمز مميز في برنامج التصميم الخاص بك. على سبيل المثال، الجسم كبير هو نمط، بينما فاتح وداكن هما مظهران.
تنفيذ مظهر في Compose
يتكون الموضوع عادةً من أنظمة متعددة تجمع المفاهيم المرئية والسلوكية الشائعة، والتي تصممها باستخدام فئات ذات قيم موضوعات.
راجِع التصميم المتعدد الأبعاد 3 في Compose للحصول على مزيد من المعلومات حول استخدام Jetpack Compose لإنشاء عملية تنفيذ لمظهر التصميم المتعدد الأبعاد 3.
Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
تنفيذ مظهر في طرق العرض
المظاهر هي مجموعة من الموارد ذات الأسماء الدلالية التي يمكن استخدامها في جميع أقسام تطبيقك. وتشترك المظاهر في بنية النمط نفسها.
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
مكوّنات WebView
يمكن أن يستخدم محتوى الويب في WebView أيضًا نمطًا فاتحًا أو داكنًا أو تلقائيًا. يمكنك الاطّلاع على طريقة توفير المظهر الداكن في مكتبات WebView.
تخصيص مظهر متعدد الأبعاد
يمكنك استخدام المكوّن الإضافي Figma لأداة إنشاء Material Theme Builder لتخصيص مظهر Material Theme. إنّ إنشاء مظهر باستخدامه يمنحك ملفات مظاهر قابلة للتنفيذ بأنظمة ألوان فاتحة وداكنة تم إنشاؤها من قبل، ما يسمح لك بزيادة التخصيص من خلال تحديث ملف المظهر الذي تم تصديره باستخدام القيم الدقيقة لديك.
