כיצד לעצב ממשק משתמש / UX עבור עדכוני Android 9 ו- 10 האחרונים

פלטת צבעים

בפלטת הצבעים לעיצוב חומר, גוגל מעדיפה מערכת 'שני צבעים' עם וריאציות:

כך למשל, כמו בתצלום זה. הצבע העיקרי שלך יהיה סגול, והצבע המשני שלך הוא ציאן. ואז עבור אלמנטים אחרים של ממשק המשתמש שלך, היית משתמש בגרסאות צל של סגול וציאן, כך שהכל משתלב יחד.

זֶה עורך עיצוב חומרים הוא כלי שימושי מאוד שעוזר לך להרכיב וריאציות צבע. אתה יכול גם לחפש השראה מסוכנויות עיצוב UI / UX מקצועיות כמו חֶרֶס , או רשימה זו של ה- חברות עיצוב אתרים מהשורה הראשונה בשנת 2019.

פריסת רשת רספונסיבית

הבנת פריסת רשת רספונסיבית פירושה הבנה כיצד צפיפות פיקסלים והתאמת מסך אוטומטית עובדת. לרוב, ממוצע הטלפון אנדרואיד DPI הוא בין 300 ל 480 DPI.

עם זאת, מסך של 300 DPI יוכל בדרך כלל להציג עד 4 עמודות:

ואילו מסך עם 600 dpi יציג עד 8 עמודות.

בין כל עמודה ישנם 'מרזבים', בעצם האזורים המפרידים בין כל עמודה. אז בנייד עם 360dp, כל מרזב יהיה סביב 16dp.

הבנת DPI מסך

בעת תכנון ממשק המשתמש, בין אם מדובר בממשק משתמש של המערכת או בממשק המשתמש של האפליקציה שלך, עליך לקחת בחשבון את צפיפות הפיקסלים השונה בגדלי טלפון שונים. להלן תרשים רזולוציות המסך הנפוצות ביותר וצפיפות הפיקסלים:

לכן ככלל אצבע, כאשר מתכננים ערכת נושא או אפליקציה 'גלובלית', ולא מתמקדים ביצירת ערכות נושא עבור מכשיר אחד, עליכם להתחיל בצפיפות הנמוכה ביותר. הסיבה לכך היא שאם אתה מתחיל את העיצוב שלך פי 1, אתה פשוט צריך לבצע מדידות בפיקסלים, והערכים יישארו זהים בכל עקורים.

עם זאת, אם אתה מתכנן פי 3.5, עליך לחלק את כל הערכים ב -3.5 להתאמה לצפיפות אחרת ואז פשוט הופך לכאב ראש של חישוב ערכי DP מרובים.

טיפים נוספים לעיצוב ממשק משתמש UI / UX של Android 10

אם אתה זקוק לצבע מותאם אישית לרכיבי נושא כגון מכשירי רדיו, כפתורים, תיבות סימון וכו ', עליך לעשות זאת לֹא השתמש בציור לצייר את המצבים השונים ( בדק, לחץ, וכו ') . מכיוון שכאשר אתה משתמש בציורים, אתה מאבד את האפקטים המקוריים של עיצוב חומר (כמו אדווה) שגוגל עדכנה בהרחבה באנדרואיד 9 ובאנדרואיד 10.

כשעובדים עם עיצוב חומרים, גוגל כוללת הרבה דברים שאתה יכול לנצל, והם יזרמו בצורה טבעית יותר עם ממשק המשתמש / UX שלך.

כך לדוגמא, הנה כמה מילות מפתח לרכיבי נושא עם אלמנטים מובנים לעיצוב חומרים, והאפליקציה שלך או ממשק המשתמש / UX עדיין ייהנו מהתנהגות המערכת המקומית וממצבי ממשק המשתמש.

כפתור עם אנדרואיד בצבע מותאם אישית: backgroundTint = '@ color / red' ----- לחצן רדיו עם Android Android בצבע מותאם אישית: buttonTint = '@ color / red' - תמונות וסמלים אנדרואיד: drawableTint = '@ color / אדום '----- ProgressBar עם אנדרואיד בצבע מותאם אישית: progressTint =' @ color / red '

כדי להציג צל פשוט מתחת לרכיבים כמו במצב כרטיס תצוגה, אתה רק צריך להשתמש במאפיין הגובה.

אנדרואיד: גובה = '1dp'

מיזוג תגים ומאפייני אב שימושי ביותר כדי לתת לך שליטה טובה יותר וקבצי XML לניהול.

שינויים בפריסה מונפשת יכולים באמת לשפר את ה- UX שלך, וכמעט כל ViewGroup יכבד זאת. כך שבכל פעם שיש שינוי בהיררכיית התצוגה, הוא יגיע עם אנימציה. עם קצת ידע, אתה יכול גם לעצב אפקטים של מעבר מותאם אישית .

אנדרואיד: animateLayoutChanges = 'נכון'