تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
من المهمّ تصميم التطبيقات المصغّرة بفعالية لتحقيق تجربة مستخدم جذابة ومتناغمة من الناحية المرئية. يتناول هذا القسم المفاهيم الأساسية و
التقنيات لتحديد اللون وأسلوب الخط من أجل إنشاء التطبيقات المصغّرة الأكثر فائدة
وجاذبيتك على Android.
اللون
استخدِم الألوان للتعبير عن الأناقة ونقل المعنى. إنّ اختيار ألوان مناسبة لتطبيقاتك المصغّرة مهم جدًا لسهولة القراءة والتخصيص، وبالطبع للتعبير عن هوية علامتك التجارية.
استخدِم أدوار وعناصر Material Color لاستيفاء إرشادات التباين في تسهيل الاستخدام
وتوفير ميزات الألوان الديناميكية، مثل الألوان التي ينشئها المستخدم والمظاهر الداكنة أو
الفاتحة.
يحدِّد شكل التطبيق المصغّر مزاجه. بالنسبة إلى التطبيقات المصغّرة المستطيلة،
استخدِم سمة شعاع زاوية النظام. تحقّق هذه السمة اتساقًا
على مختلف الأجهزة وتساعد في منع اقتصاص محتوى التطبيقات المصغّرة.
بدءًا من الإصدار 12 من نظام Android، يمكن للتطبيق المصغّر استخدام ألوان مظهر الجهاز للأزرار
والخلفيات والمكونات الأخرى. ويؤدي ذلك إلى توفير اتساق مرئي على مستوى التطبيقات المصغّرة المختلفة ورموز الشاشة الرئيسية والخلفيات، ما يقدّم لمستخدمي Android تجربة استخدام
أكثر انسجامًا. يضمن استخدام الرموز المميّزة للألوان المُقدَّمة أن يبدو تطبيقك المصغر مدمجًا في مظاهر الأجهزة التي يوفّرها مصنعو الأجهزة المتعدّدون والمظاهر الديناميكية التي يضبطها المستخدم.
الشكل 1: صورة لتطبيق مصغّر مع عرض الرموز اللونية
الوضع الفاتح والوضع الداكن
"الوضع الداكن" هو إصدار مخصّص للأماكن ذات الإضاءة الخافتة من واجهة مستخدم الجهاز، ويعرض في أغلب الأحيان ألوانًا سطحية داكنة. يتزايد استخدام المستخدمين للوضع الداكن لتحسين
عمر البطارية وراحة العين. إذا لم تتكيّف الأداة المصغّرة مع الوضع الداكن،
ستظهر خارج مكانها وقد تتسبب في إزعاج المستخدمين.
الشكل 2: تطبيق مصغّر في الوضع الفاتح على الشاشة اليسرى والوضع الداكن على الشاشة اليمنى
أسلوب الخط
يساعد أسلوب الخط في جعل الكتابة سهلة القراءة وجميلة. استخدِم أحجام الخطوط و
كثافتها لإنشاء تسلسل هرمي واضح، ما يوجّه نظر المستخدم إلى العناصر
الأكثر أهمية. انتبه إلى المسافة بين السطور والمسافة بين الأحرف (التقران)
لتحسين قابلية القراءة، خاصةً لعرض النصوص الأصغر حجمًا ضمن
المساحة المحدودة للأداة المصغّرة.
تسلسل هرمي
يتم التعبير عن التسلسل الهرمي من خلال الاختلافات في سمك الخط وحجمه وارتفاع السطر
وتباعد الأحرف. تنظِّم مقياس الكتابة المعدَّل أنماط النصوص في خمسة أدوار
تم تسميتها لوصف أغراضها. أنماط النصوص الخمسة هي النص المعروض
والعنوان والعنوان الفرعي والنص الأساسي. لا تعتمد الأدوار الجديدة على الجهاز، ما يتيح
تطبيقها بسهولة أكبر في مجموعة متنوعة من حالات الاستخدام.
الشكل 3: تطبيق مصغّر يعرض استخدام مقاييس أنواع مختلفة.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Style\n\nStyling widgets effectively is crucial for achieving a visually appealing and\nconsistent user experience. This section delves into the key concepts and\ntechniques for defining the color and typography to create the most helpful\nand engaging Android widgets.\n\nColor\n-----\n\nUse color to express style and communicate meaning. Setting appropriate colors\nfor your widget colors are crucial for legibility, personalization, and of\ncourse expressing your app's brand identity.\n\nUse Material color roles and tokens to fulfill accessibility contrast guidelines\nand support dynamic color features, such as user-generated color and dark or\nlight themes.\n\nFor more information see the [Material Design Color guidance](https://m3.material.io/styles/color/system/overview).\n\nShape\n-----\n\nThe shape of your widget sets the mood of your widget. For rectangular widgets,\nuse the [system corner radius property](/reference/android/R.dimen#system_app_widget_background_radius). This property creates consistency\nacross different devices and helps prevent widget content from being clipped.\n\nFor more details, see [Implement rounded corners](/develop/ui/views/appwidgets#rounded-corner).\n\nDynamic themes\n--------------\n\nStarting in Android 12, a widget can use the device theme colors for buttons,\nbackgrounds, and other components. This provides visual consistency across\ndifferent widgets, home screen icons, and wallpapers, offering Android users a\nmore cohesive user experience. Using the provided color tokens ensures your\nwidget will look integrated across device themes provided by different device\nmanufacturers and the dynamic themes set by the user.\n**Figure 1:** Image of a widget with color tokens called out.\n\nLight and dark mode\n-------------------\n\nA dark mode is a low-light version of the device UI that displays mostly dark\nsurface colors. Users are increasingly switching to dark mode for better\nbattery life and eye comfort. If your widget doesn't adapt to dark mode, it\nwill appear out of place and could potentially frustrate users.\n**Figure 2:** A widget in light mode on the left screen and dark on the right.\n\nTypography\n----------\n\nTypography helps make writing legible and beautiful. Utilize font sizes and\nweights to establish a clear hierarchy, guiding the user's eye to the most\nimportant elements. Pay attention to line spacing and letter spacing (kerning)\nto improve readability, especially for smaller text displays within the\nrestricted space of a widget.\n\n### Hierarchy\n\nHierarchy is communicated through differences in font weight, size, line height,\nand letter spacing. The updated type scale organizes text styles into five roles\nthat are named to describe their purposes. The five text styles are display,\nheadline, title, subtitle and body. The new roles are device-agnostic, allowing\neasier application across a variety of use cases.\n**Figure 3:** A widget showing the use of different type scales."]]
