תגובות

כמה טיפים מועילים לעיצוב אפליקציות לאייפד

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

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

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

עיצוב מינימליסטי? תופס.. תופס..

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

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

1.  תפריטים מותאמים – תפריט מותאם הוא תפריט ייעודי שמופיע על מנת לעזור למשתמש להגיע לפעולה מסוימת. לדוגמא:

באפליקציה SqueezePad תוכלו לראות שבנוסף לתפריט הבסיסי (עם כפתורי play, stop, volume וכו'..) במעבר על אלבום מסוים מופיע תפריט מותאם  – ייעודי לאותו האלבום, שנותן אפשרויות נוספות כמו לקבל ביוגרפיה על הלהקה, סקירות על האלבום וקריאת קרדיטים.

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

2. שימוש חכם במודולים של האייפד – המסך הגדול של האייפד מאפשר לנו להשתמש בפונקיוצליות אדירה שבלתי ניתנת לשימוש באייפון או באייפוד טאצ'. באייפד קיימים כמה מצבי פעולה ברורים של "אם לחצתי על Y, יקרה X" (זה הגיוני? אף פעם לא הייתי טוב בנעלמים). לדוגמא:

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

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

ריבוי פריטים

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

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

מאוזן, אנכי, למי זה בעצם משנה?

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

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

איסור נגיעה – לא אצלינו!

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

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

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

לסיכום

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

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

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

(מקורות שנתנו לי השראה לכתיבת הפוסט: Smashingmagazine, mattgemmell)

———————————————————————————————-

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

יצא לכם לעצב אפליקציה לאייפד? אתם מוזמנים להוסיף ולשתף את כולם בטיפים משלכם בתגובות!

קצת על דניאל שטרנליכט

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

6 תגובות לפוסט "כמה טיפים מועילים לעיצוב אפליקציות לאייפד"

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים