יש עיצובים שעובדים מעולה גם ב-iOS וגם באנדרואיד [טור אורח]

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

מאת דנה פרידמן

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

לאחרונה, חלק מהמרכיבים הופכים להיות חוצי פלטפורמה, ה-Floating Action Button נראה רבות באפליקציות iOS , וה-Bottom Navigation הפך סטנדרטי לחלוטין באפליקציות אנדרואיד ואפילו נכלל באופן רשמי באחת מה-Support Library האחרונות באנדרואיד. סטנדרטיזציה זו מגיעה מההבנה שחלק מהפתרונות אשר נוצרו בפלטפורמות אחרות, מצליחים להתמודד בצורה חכמה יותר עם בעיות שקיימות גם בפלטפורמה הנוכחית, ולתרום ליצירת חווית משתמש טובה.

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

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

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

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

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

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

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

לסיכום

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

הכותבת הינה מעצבת מובייל UI/UX, חברת Vonage ישראל

כתב אורח

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

הגב

2 Comments on "יש עיצובים שעובדים מעולה גם ב-iOS וגם באנדרואיד [טור אורח]"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
Sort by:   newest | oldest | most voted
עידן
Guest

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

Sine
Guest

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

wpDiscuz

תגיות לכתבה: