עיצובים

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

חטיפות דסקית

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

סוגי עיצובים

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

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

עיצובי המערכת

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

עיצוב בהיר ועיצוב כהה

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

לעיצוב הכהה יש כמה יתרונות: הוא עוזר לשפר את הקריאוּת במסך באור שמשי או נמוך את תנאי האור, הפחתת מאמץ העיניים עקב בהירות נמוכה יותר, ושימור סוללה. בנוסף, לרוב זוהי תכונת האפליקציה המבוקשת ביותר בקרב המשתמשים.

כדאי להביא בחשבון את הנקודות הבאות כשמטמיעים עיצוב בהיר או כהה:

• אפשר להתאים אישית את ערכת הצבעים כדי לקבל הבעה טובה יותר. אם אתם משתמשים Material Design Builder כדי ליצור סכמה, הוא יוצר באופן אוטומטי עיצוב כהה scheme. מידע נוסף על התאמה אישית של חומר ועל מערכת הצבעים כדי ליצור נושא ממותג.
• המשתמשים יכולים להגדיר עיצוב בהיר או עיצוב כהה בהגדרות התצוגה ברמת המערכת פועל תמיד, כבוי או אוטומטי בהתאם לשעה ביום. ההמלצות שלנו שמשקף את הגדרות המערכת המועדפות של המשתמש, אבל כדאי גם ליצור אמצעי בקרה בתוך האפליקציה כדי לספק למשתמשים שינויים מפורטים יותר.
• תוכן מהאינטרנט ברכיבי WebView יכול גם להשתמש בעיצוב בהיר, כהה או ברירת מחדל. קריאה איך יש תמיכה בעיצוב כהה ברכיבי WebView.
• אם המשתמשים הפעילו אותה, Android יכול לאלץ שימוש בעיצוב כהה. אפשר גם ליצור עיצוב כהה בהתאמה אישית לשליטה טובה יותר.
• אם המשתמש לא הפעיל עיצובים או הגדרות אחרים, תוכלו לבחור 'נעילה' את האפליקציה לעיצוב בהיר. עם זאת, לא מומלץ לעשות את זה, כי הן עלולות להפר את צורכי הנגישות וההתאמה האישית של המשתמש.

עיצובים שנוצרו על ידי משתמשים

עיצובים שנוצרו על ידי משתמשים נתמכים באמצעות צבע דינמי, שאותו אנחנו יהיה זמין ב-Material You החל מ-Android 12. כשהמדיניות מופעלת, צבע יוצר צבעים מותאמים אישית מהטפט של המשתמש שיוחל על האפליקציות שלו וממשק המשתמש של המערכת. לוח הצבעים הזה משמש כנקודת ההתחלה ליצירה ערכות של צבעים בהירים כהים.

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

העיצובים של היצרן

יצרני מכשירים עשויים לספק יכולות קנייניות נוספות שקשורות לנושא שעשויים להשפיע על הגדרות ממשק המשתמש והתצוגה של המערכת.

עיצובי אפליקציות

ערך הבסיס

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

בהתאמה אישית (מותג)

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

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

תוכן

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

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

חומר

Material Design מספק מערכת עיצוב ועיצוב בסיס (צבע, סוג, צורה). ניתן גם להרחיב את עיצוב התוכן כדי להשיג תוצאות נוספות לעיצוב.

מותג

אם מערכות העיצוב של Material Design לא מתאימות למראה ולחוויה הרצויה תוכלו להטמיע עיצוב מותאם אישית באפליקציה. חשוב לבדוק התאמה אישית מאפיינים של ניגודיות וקריאה.

איך מטמיעים מערכת מותאמת אישית בכתיבה

מאפייני עיצוב

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

צבע

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

בעיצוב מסוים, ערכת צבעים היא קבוצת גוונים שהוקצו לתפקידים ספציפיים. שממופות לרכיבים. מידע נוסף על צבע ב-Android ממשק המשתמש ומערכת הצבעים של Material 3.

סוג

גופן המערכת של Android הוא Roboto (זמין בחינם לכל האפליקציות), אבל ניתן להתאים אישית את הסוג. כדאי להביא בחשבון את הקריאוּת של הגופנים שנבחרו ליישור את התפקידים שלהם. למידע נוסף על החלת סוג.

צורה

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

סמלים

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

מאפייני עיצוב אחרים

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

החלת עיצוב באפליקציה

עיצוב לעומת סגנון ומחלקות פלוס

גם לעיצובים וגם לסגנונות יכולים להיות מאפייני עיצוב מרובים. סגנון יכול להיות ללא קשר לנושא מסוים, ומתייחס למראה של רכיב מסוים (או 'תצוגה'), בעוד שתוכל להגדיר עיצוב עבור מספר רכיבים ואפילו אפליקציה. סגנון הוא בחירת סגנון לשימוש חוזר, המקביל לסגנון או לאסימון תוכנת העיצוב. לדוגמה, Body Large הוא סגנון בעוד שהסגנון 'בהיר' ו'כהה' הוא 'סגנון כהה'. הם נושאים.

הטמעת עיצוב ב'כתיבה'

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

מידע נוסף על השימוש ב-Jetpack זמין במאמר Material Design 3 ב-Compose פיתוח נייטיב כדי ליצור הטמעה של העיצוב 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)

הטמעת עיצוב ב-Views

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

לתחילת העבודה עם 'תצוגות'.

Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>

רכיבי WebView

תוכן מהאינטרנט ב-WebView יכול גם להיות בהיר, כהה או עיצוב ברירת מחדל. למידע נוסף יש תמיכה בעיצוב כהה ברכיבי WebView.

התאמה אישית של עיצוב Material

אפשר להשתמש בפלאגין של Material Theme Builder Figma כדי להתאים אישית עיצוב Material. פיתוח עיצוב באמצעותו מאפשר להטמיע קבצים עם ערכות של צבעים בהירים כהים שכבר נוצרו, מה שמאפשר כדי לבצע את ההתאמה האישית עוד יותר, כדאי לעדכן את קובץ העיצוב שמיוצא ערכים מדויקים.