המדריך הזה יעזור לכם להתחיל לעצב לאנדרואיד על ידי תרגום עיצובים קיימים לנייד ב-iOS לאנדרואיד באמצעות דפוסי חוויית משתמש בסיסיים באנדרואיד, וכן באמצעות Material Design.
הם מפורטים כדי להבטיח שוויון בעיצוב ומסודרים לפי יעילות. אם אתם עוקבים אחרי מערכת עיצוב בסיסית משותפת, אתם יכולים לתרגם עיצובים באמצעות המערכת שלכם במקום Material 3. גם ב-Android וגם ב-iOS, הרעיון הוא שהתוכן קודם לכול.
אחרי זה, המיתוג יכול לבוא לידי ביטוי בצבע, בסוג ובצורה. השימוש ב-AI לא רק מאפשר לקרוא את התוכן, אלא גם מקל על יצירת קשר בין חלקי התוכן.
מתחילים עם עיצובים ל-iOS
לפני שמתחילים, יוצרים עותק של אפליקציית iOS. אפליקציות ל-iOS מחולקות לשלושה אזורים: Bars (סרגלים), Views (תצוגות) ו-Controls (אמצעי בקרה). אתם יכולים להשתמש במבנה הזה כדי לתרגם, ולעצב בסוף.
כדאי לעיין בחלקים של אפליקציית Android.
1. מחיקת ממשק המשתמש של מערכת iOS
מחיקת שורת הסטטוס והאינדיקטור של מסך הבית. עכשיו קל יותר לעשות את זה.
2. שינוי הגודל של הפריימים
אפשר להשתמש בגודל קומפקטי ל-Android, 412dp. עם זאת, כדאי לקחת בחשבון טווח של מכשירים גם בתוך גודל חלון מסוים. לדוגמה, אפשר לבצע בדיקה ב-360dp כדי להתאים למסכים קטנים יותר, ולהתאים את המודעות לכל הגדלים של חלונות המודעות.
3. החלפה בסרגלי המערכת של Android
ממשק המשתמש של מערכת Android יכול להשתנות בהתאם למכשיר ולהגדרות של המשתמש, אבל הצגת ממשק משתמש סטנדרטי של המערכת יכולה לעזור לספק יותר הקשר לעיצובים. ממקמים את סרגל ההתראות בחלק העליון ואת סרגל הניווט באמצעות תנועות או סרגל הניווט עם שלושה לחצנים בחלק התחתון.
מידע נוסף זמין במאמר בנושא סרגלי המערכת ב-Android.
4. בהתאם לניווט שלכם
מחליפים את סרגל הכרטיסיות (הניווט התחתון) בסרגל הניווט.
כדאי לעיין שוב במפת התהליך. האם באפליקציית iOS שלך יש תפריט נוסף? (ההמלצות של HIG הן לא להשתמש בדפוס הזה). מומלץ להשתמש בחמישה פריטים או פחות, להגביל את סרגל הניווט התחתון לניווט הראשי, לבדוק אם אפשר להעביר פריטים משניים כמו פרופיל או הגדרות לסרגל האפליקציה העליון, או אם יש פעולה ראשית שאפשר להפוך לכפתור פעולה צף.
תמיד צריך להציג את אמצעי הניווט הראשי בתצוגות האב (הרמה העליונה של קטע במפת הזרימה). תצוגות צאצא (כל מה שמתחת לתצוגת האב) יכולות לכלול ניווט ראשי אם הן נמצאות גבוה יותר בהיררכיית הניווט ולא מודאליות.
מעדכנים את סרגל הניווט התחתון עם הסמלים והתוויות המתאימים. בשתי הפלטפורמות, אין תנועה אופקית בין יעדי הניווט.
5. סרגלי ניווט לסרגלי אפליקציות עליונים
צריך לפרט את הנתונים האלה לפי קטע: קודם הצפיות של ההורים ואחר כך הצפיות של הילדים. סרגל האפליקציות מורכב מהצד הימני: ניווט וכותרת, ומהצד השמאלי: פעולות לביצוע.
אם האפליקציה משתמשת בתפריט חלונית הזזה במקום בסרגל ניווט תחתון, יופיע סמל חלונית הזזה בכל התצוגות הראשיות.
אם לאפליקציה שלכם אין מסילה או חלונית הזזה, תצוגות האב לא מציגות סמל ניווט ראשי.
כברירת מחדל, הכותרת מיושרת לשמאל בסרגל האפליקציות ב-Android.
בתצוגות של ילדים, חץ למעלה מופיע במיקום של סמל הניווט. לא להתבלבל עם חזרה. החץ למעלה מעביר את המשתמש לרמה גבוהה יותר בהיררכיית הניווט של האפליקציה במסלול המשתמש, בעוד שהחזרה או ההחלקה מהקצה נמצאות בניווט המערכת, ומעבירות את המשתמש אחורה ואפילו מוציאות אותו מהאפליקציה.
מה לגבי תצוגות מודאליות? בחלונות קופצים במסך מלא (כמו נגני וידאו ותמונות), הסמל יהיה דומה לסמל של סרגל האפליקציות בתצוגת הצאצא, אבל סמל הניווט צריך להשתנות לסמל הסגירה, שסוגר את החלון הקופץ.
6. קצת יותר מודאליות
מומלץ להתחיל עם תצוגות מודאליות גדולות, שהשימוש בהן הכי יעיל כשרוצים למקד את תשומת הלב של המשתמש במשימה מסוימת. ב-iOS, מודעות כאלה מוצגות לעיתים קרובות כגיליונות, והמשתמש יכול להחליק אותן כלפי מטה.
סיום ההחלפה של סרגלי האפליקציות. ב-iOS, כדי להחליף את החלק העליון של הגיליון ואת התצוגה המקדימה של הרקע בסרגל אפליקציות של תיבת דו-שיח במסך מלא, צריך להשתמש בגיליונות מודאליים.
בונוס: כדאי לבדוק אם אפשר לתרגם גיליונות מודאליים ב-iOS לגיליונות תחתונים.
גיליונות פעולה ופעילות לגיליונות תחתונים. (אפשר גם לתרגם את גיליונות השיתוף).
להתראות, משתמשים בתיבות דו-שיח של המערכת. אם אתם משתמשים בהן כדי להציג מידע חשוב שאתם רוצים שהמשתמש יאשר בדרך כלשהי, כדאי להחליף אותן בתיבות דו-שיח של המערכת. בשלב הזה, חשוב גם להחליף את כל הקלט ואת כל כלי הבחירה.
7. תוכן שקשור לאחים ולאחיות
כרטיסיות או תצוגת כרטיסיות או החלקה בין כרטיסיות. אם אתם משתמשים באמצעי בקרה מחולקים ב-iOS, הם יתורגמו לכרטיסיות ב-Android. שניהם משמשים לסינון בין תצוגות של מידע דומה, אבל לא זהה. כרטיסיות ב-Android בדרך כלל מוצמדות לסרגל האפליקציות, ויש להן יתרון נוסף: אפשר להחליק בין התכנים.
8. תוכן ואמצעי בקרה
בהתאם לאופן שבו הגדרתם את האילוצים או את התנהגות השינוי של הגודל, יכול להיות שרוב התוכן כבר שינה את הגודל. אבל כדאי להקדיש זמן כדי לבדוק ולהגדיר את השוליים. 16dp הוא ערך סטנדרטי טוב במסכים קטנים.
הרשת של קו הבסיס מבוססת על רשת של 8dp לרכיבים ו-4dp לסוגים ולאייקונים. רשת של 8 נקודות מתאימה ל-iOS, ולכן כדאי להתחיל איתה בשתי הפלטפורמות.
אמצעי בקרה. מחליפים את המתגים למתגי Android. שימוש בתיבות סימון ובלחצני בחירה ב-Android. כל האפליקציות האלה מגיעות עם Android.
אם יש לכם טפסים, צריך להחליף את שדות הטקסט ב-iOS בשדות טקסט ב-Android. ל-Material יש אפשרויות כמו קו מתאר או מילוי, אז בוחרים את האפשרות שהכי מתאימה למיתוג שלכם.
יש כמה הבדלים בין רשימות חומרים לבין תאי טבלה ב-iOS:
- השתמשו בקווים מפרידים רק כשצריך.
- האינדיקטורים לא מופיעים ברשימות כדי לצמצם את הרעש החזותי.
- המידות תואמות לרשת של 8dp.
9. סגנון
צבע: צבעי ממשק המשתמש מורכבים מצבעים משניים, צבעים סמנטיים וצבעי רקע, שמשולבים בערכת צבעים. הצבעים האלה מוחלים על ממשק המשתמש לפי התפקידים שלהם.
סוג: אם משתמשים בגופן מערכת, מחליפים את San Francisco. Roboto הוא גופן המערכת שמוגדר כברירת מחדל ב-Android. עם זאת, אנחנו ממליצים לכם להשתמש בערכות נושא ובגופנים של Google שניתנים להורדה כדי לבטא את הסגנון הייחודי של המותג שלכם.
סמלים: גם כאן. אם משתמשים בסמלי SF, צריך לוודא שכולם הומרו לסמלי Material או לסמלים. בוחרים את הווריאציה שמתאימה למותג. ידעתם שאפשר להשתמש בסמלי Material בכל פלטפורמה?
תנועה: ל-Android ול-iOS יש עיצוב תנועה שונה, וחשוב להתאים את העיצוב לכל פלטפורמה. תנועת חומרים היא אינפורמטיבית, ממוקדת ומוצגת. אפקט הגל הוא הדגשה ייחודית שמשמשת ברכיבים כדי לספק משוב על מגע. מערכת התנועה היא קבוצה של דפוסי מעבר שנועדו לנצל את היתרונות של טרנספורמציית קונטיינר, ציר משותף, מעבר הדרגתי והנפשות של מעבר הדרגתי. כדאי לחשוב אם יש אלמנטים בעיצוב שלכם עם מאגרי נתונים קבועים, מה הקשר בין האלמנטים ואיך הם צריכים להיכנס או לצאת.
10. סדר וארגון
אם אתם מתרגמים אב טיפוס, זה הזמן המתאים לשנות את החיבורים. חוזרים אחורה בניווט הראשי. לאחר מכן, סרגלי האפליקציות יזכרו את ההבדל בין 'למעלה' לבין 'חזרה', ותוכלו לבחור מעברים בין דפים שמתאימים ל-Android (כמו שצוין בשלב 9).
צריך שיהיה לך אב-טיפוס שפועל באופן מלא, ומכיוון ששינית את הגודל שלו, הוא מוכן להעברה.
מדריך סגנון ורכיבים
אם יש לכם מערכת עיצוב או מדריך סגנון קיימים, יכול להיות שיש לכם סגנונות בסיסיים משלכם (צבע, סוג, סמלים, צורה) שאפשר להשתמש בהם יחד עם Material Design, בדיוק כמו שהייתם משתמשים בהם לצד הנחיות ל-iOS. בעזרת התאמת העיצוב של Google Material Design, אתם יכולים להתאים אישית את רכיבי Material עם הסגנון הייחודי של המותג שלכם באמצעות צבע, סוג וצורה.
הנחיות ספציפיות לפלטפורמה הן דבר נפוץ במוצרים שפועלים בכמה פלטפורמות, והן יכולות לעזור לכם ליצור מערכת עיצוב שמתמקדת במשתמשים.
לבסוף, אם אתם עובדים בלי מערכת עיצוב, חשוב לדעת שלא כל אפליקציה או מוצר צריכים מערכת עיצוב מותאמת אישית מלאה. כדאי ליצור מדריך סגנון של עמוד אחד. מדריך סגנון הוא מסמך שמפרט את המפרטים הבסיסיים לעיצובים. ספר מותג לרוב יכלול מדריך סגנון.
אפשר להעתיק את זה ל-Android ולהשתמש בזה כמקור לעדכון סגנונות (או סמלים, רכיבים או ספרייה).