المظاهر

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

الخلاصات

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

أنواع المظاهر

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

يجب أن ينفِّذ تطبيقك أي نوع من المظاهر لعرضه، ولكن تنطبق مظاهر التطبيق. داخل التطبيق فقط وليس في أي مكان آخر على الجهاز يمكنك أيضًا تجاهل بعض إعدادات مظاهر النظام مع الإعدادات داخل التطبيق

مظاهر النظام

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

المظهران الفاتح والداكن

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

يتميّز المظهر الداكن بمزايا متعددة: يساعد في تسهيل قراءة الشاشة في الأوقات المشمسة أو المنخفضة. ظروف الإضاءة وتقليل إجهاد العين بسبب انخفاض السطوع البطارية. وغالبًا ما يكون التطبيق هو ميزة التطبيق الأكثر طلبًا من بين المستخدمين.

يمكنك الاستناد إلى النقاط الرئيسية التالية عند تطبيق المظهرَين الفاتح والداكن:

• يمكنك تخصيص نظام ألوان للحصول على مزيد من التعبير. إذا كنت تستخدم لإنشاء مخطط باستخدام Material Theme Builder، يتم تلقائيًا إنشاء خلفية . اقرأ المزيد عن تخصيص المواد ونظام الألوان لإنشاء موضوع علامة تجارية.
• يمكن للمستخدمين ضبط مظهر فاتح أو مظهر داكن في إعدادات الشاشة على مستوى النظام. إلى "قيد التشغيل دائمًا" أو "قيد الإيقاف دائمًا" أو "تلقائيًا" استنادًا إلى الوقت من اليوم. ننصحك بما يلي: تعكس إعدادات النظام المفضلة لدى المستخدم، ولكن من الجيد أيضًا إنشاء عناصر تحكُّم داخل التطبيق من أجل تزويد المستخدمين بتعديلات أكثر دقة.
• يمكن أن يستخدم محتوى الويب في مكوّنات WebView أيضًا التصميم الفاتح أو الداكن أو التلقائي. قراءة طريقة دعم المظهر الداكن في مكتبات WebView
• إذا فعَّله المستخدمون، يمكن لنظام Android فرض مظهر داكن. يمكنك أيضًا إنشاء مظهر داكن مخصص لمزيد من التحكم.
• إذا لم يسبق للمستخدم تفعيل مظاهر أو إعدادات أخرى، يتوفّر لك خيار "القفل" تطبيقك على المظهر الفاتح. مع ذلك، لا ننصح بذلك حيث قد يتعارض ذلك مع احتياجات المستخدم المتعلقة بإمكانية الوصول والتخصيص.

مظاهر من إنشاء المستخدمين

تتوافق المظاهر التي ينشئها المستخدمون مع اللون الديناميكي، الذي باستخدام Material You بدءًا من Android 12. عند التفعيل، يكون ديناميكيًا يستمد اللون ألوانًا مخصصة من خلفية المستخدم لتطبيقها على تطبيقاته وواجهة مستخدم النظام. تُستخدم لوحة الألوان هذه كنقطة بداية لإنشاء الألوان الفاتحة والداكنة.

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

مظاهر الشركة المصنّعة

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

مظاهر التطبيقات

الخط القاعدي

توفر مكونات Material في مكتبة المواد موضوعًا أساسيًا نظام الألوان الأرجوانية وخط Roboto. أي تطبيق لا يحدّد المظهر إلى هذه السمات الأساسية.

مخصّص (العلامة التجارية)

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

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

المحتوى

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

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

المادة

يوفر Material Design سمة أساسية وأنظمة موضوعات (اللون، النوع، الشكل). يمكن أيضًا توسيع نطاق تحديد التصميم المتعدد الأبعاد لتحقيق المزيد من السمات على الموضوع.

العلامة التجارية

إذا لم تتوافق أنظمة مظاهر Material Design مع الشكل والمظهر الذي تريده في تطبيقك، يمكنك تنفيذ مظهر مخصّص بالكامل احرص على اختبار خياراتك المخصّصة خصائص التباين والوضوح.

الاطّلاع على كيفية تنفيذ نظام مخصّص في Compose

سمات المظهر

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

اللون

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

داخل الموضوع، نظام الألوان هو مجموعة الدرجات اللونية المخصصة لأدوار محددة التي يتم تعيينها إلى المكونات. مزيد من المعلومات حول اللون في Android واجهة المستخدم ونظام الألوان Material 3.

النوع

خط نظام Android هو Roboto (المتاح مجانًا لجميع التطبيقات) ولكن يمكنك تخصيص الكتابة. مراعاة وضوح الخطوط المختارة التي تتم محاذاتها مع وأدوارهم. اطّلِع على معلومات حول نوع التطبيق.

شكل

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

الرموز

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

سمات السمات الأخرى

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

تطبيق مظهر في تطبيقك

الموضوع مقابل النمط بالإضافة إلى الفئات

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

تنفيذ مظهر في Compose

يتكون الموضوع عادةً من أنظمة متعددة تجمع العناصر المرئية والمفاهيم السلوكية، التي تصممها باستخدام فئات ذات قيم موضوعات.

الاطّلاع على التصميم المتعدد الأبعاد 3 في Compose للحصول على مزيد من المعلومات عن استخدام Jetpack الإنشاء لإنشاء تنفيذ لموضوع Material Design 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.

تخصيص مظهر Material

يمكنك استخدام المكوّن الإضافي Material Theme Builder في Figma من أجل لتخصيص مظهر متعدد الأبعاد. يتيح لك إنشاء مظهر باستخدامه إمكانية التنفيذ ووضع ملفات بأنظمة ألوان فاتحة وداكنة تم إنشاؤها بالفعل، مما يسمح لك للاستفادة بشكل أكبر من التخصيص من خلال تعديل ملف المظهر الذي تم تصديره باستخدام القيم الدقيقة.