با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
طراحی موثر ویجت ها برای دستیابی به یک تجربه کاربر از نظر بصری جذاب و سازگار بسیار مهم است. این بخش به مفاهیم و تکنیک های کلیدی برای تعریف رنگ و تایپوگرافی برای ایجاد مفیدترین و جذاب ترین ویجت های اندروید می پردازد.
رنگ
از رنگ برای بیان سبک و ارتباط معنا استفاده کنید. تنظیم رنگ‌های مناسب برای رنگ‌های ویجت برای خوانایی، شخصی‌سازی و البته بیان هویت برند برنامه شما بسیار مهم است.
از نقش‌ها و نشانه‌های رنگ مواد برای اجرای دستورالعمل‌های کنتراست دسترسی و پشتیبانی از ویژگی‌های رنگ پویا، مانند رنگ‌های تولید شده توسط کاربر و تم‌های تیره یا روشن استفاده کنید.
شکل ویجت شما حالت ویجت شما را تعیین می کند. برای ویجت های مستطیلی، از ویژگی شعاع گوشه سیستم استفاده کنید. این ویژگی باعث ایجاد ثبات در دستگاه های مختلف می شود و به جلوگیری از بریده شدن محتوای ویجت کمک می کند.
با شروع اندروید 12، یک ویجت می‌تواند از رنگ‌های تم دستگاه برای دکمه‌ها، پس‌زمینه‌ها و سایر اجزا استفاده کند. این یکپارچگی بصری را در بین ویجت‌ها، نمادهای صفحه اصلی و تصاویر پس زمینه مختلف فراهم می‌کند و به کاربران اندروید تجربه کاربری منسجم‌تری را ارائه می‌دهد. استفاده از نشانه های رنگی ارائه شده تضمین می کند که ویجت شما در تم های دستگاه ارائه شده توسط سازندگان دستگاه های مختلف و تم های پویا تنظیم شده توسط کاربر یکپارچه به نظر می رسد.
شکل 1: تصویر یک ویجت با نشانه های رنگی فراخوانی شده است.
حالت روشن و تاریک
حالت تاریک یک نسخه کم نور از رابط کاربری دستگاه است که عمدتاً رنگ‌های سطح تیره را نمایش می‌دهد. کاربران به طور فزاینده ای به حالت تاریک برای عمر باتری بهتر و راحتی چشم تغییر می کنند. اگر ویجت شما با حالت تاریک سازگار نشود، در جای خود ظاهر نمی شود و به طور بالقوه می تواند کاربران را ناامید کند.
شکل 2: یک ویجت در حالت روشن در صفحه سمت چپ و تاریک در سمت راست.
تایپوگرافی
تایپوگرافی به خوانا و زیبا شدن نوشتار کمک می کند. از اندازه و وزن فونت برای ایجاد یک سلسله مراتب واضح استفاده کنید و چشم کاربر را به مهم ترین عناصر هدایت کنید. برای بهبود خوانایی، به خصوص برای نمایش متن های کوچکتر در فضای محدود یک ویجت، به فاصله خطوط و فاصله حروف (هرکینگ) توجه کنید.
سلسله مراتب
سلسله مراتب از طریق تفاوت در وزن فونت، اندازه، ارتفاع خط و فاصله حروف برقرار می شود. مقیاس نوع به روز شده، سبک های متن را در پنج نقش سازماندهی می کند که برای توصیف اهداف آنها نامگذاری شده است. پنج سبک متن عبارتند از: نمایش، عنوان، عنوان، زیرنویس و متن. نقش‌های جدید دستگاه‌ها را آگنوستیک می‌کنند، و امکان کاربرد آسان‌تر در انواع موارد استفاده را فراهم می‌کنند.
شکل 3: ویجتی که استفاده از مقیاس های مختلف را نشان می دهد.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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-29 بهوقت ساعت هماهنگ جهانی."],[],[],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."]]
