חשוב לעצב את הווידג'טים בצורה יעילה כדי שהמראה שלהם ייראה מושך לספק חוויית משתמש עקבית. החלק הזה יתעמק במושגים המרכזיים להגדרת הצבע והטיפוגרפיה כדי ליצור ווידג'טים ל-Android שיוצרים מעורבות.
צבע
שימוש בצבע כדי לבטא את הסגנון ולהעביר את המשמעות. הגדרת צבעים מתאימים לצבעי הווידג'ט שלכם, כדי להבטיח קריאוּת, התאמה אישית יבטא את זהות המותג של האפליקציה שלכם.
משתמשים בתפקידים ובאסימונים של צבעי Material כדי לעמוד בהנחיות בנוגע לניגודיות לנגישות והן תומכות בתכונות צבע דינמיות, כמו צבע שנוצר על ידי משתמשים כהה או כהה עיצובים בהירים.
אפשר לקרוא מידע נוסף בהנחיות צבעים של עיצוב חומר.
עיצובים דינמיים
החל מ-Android 12, לווידג'ט יש אפשרות להשתמש בצבעי העיצוב של המכשיר ללחצנים. רקעים ורכיבים אחרים. כך מתקבלת עקביות חזותית ווידג'טים, טפטים וסמלים של מסך הבית, כדי להציע למשתמשי Android לספק חוויית משתמש עקבית יותר. שימוש באסימונים הצבעוניים שסופקו מבטיח הווידג'ט ייראה משולב בכל עיצובי המכשיר שמסופקים על ידי מכשירים שונים של היצרנים הרלוונטיים, והעיצובים הדינמיים שהמשתמש הגדיר.
![](https://developer.android.com/static/images/design/ui/mobile/widgets/01_Dynamic_theme.jpg?hl=he)
מצב בהיר או כהה
מצב כהה הוא גרסה עם תאורה חלשה של ממשק המשתמש של המכשיר, שבדרך כלל מוצג כהה בצבעי פני השטח. יותר ויותר משתמשים עוברים למצב כהה כדי לשפר את השירות חיי הסוללה ונוחות לעיניים. אם הווידג'ט לא מתאים את עצמו למצב כהה, ייראה בצורה לא תקינה ועלול לגרום לתסכול בקרב המשתמשים.
![](https://developer.android.com/static/images/design/ui/mobile/widgets/02_Light_and_Dark.jpg?hl=he)
טיפוגרפיה
הטיפוגרפיה עוזרת להפוך את הכתיבה לקריאה ויפה. שימוש בגופנים בגדלים שונים המשקלים ליצור היררכיה ברורה, ומובילים את תשומת הלב של המשתמש רכיבים חשובים חשובים. חשוב לשים לב לרווחים בין שורות ולרווחים בין אותיות (kerning) כדי לשפר את הקריאות, במיוחד בהצגה של טקסט קטן יותר בתוך המרחב המוגבל בווידג'ט.
היררכיה
ההיררכיה מועברת באמצעות הבדלים במשקל הגופן, בגודל, בגובה השורה, וריווח בין אותיות. סולם הסוגים המעודכן מארגן את סגנונות הטקסט בחמישה תפקידים שנקראים כדי לתאר את המטרות שלהם. חמשת סגנונות הטקסט הם תצוגה, כותרת, כותרת, כותרת משנה ותוכן. התפקידים החדשים מותאמים למכשירים שונים, וכך לשימוש קל יותר במגוון תרחישים לדוגמה.
![](https://developer.android.com/static/images/design/ui/mobile/widgets/03_Typography.jpg?hl=he)