המדריך המעשי לעיצוב במובייל

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

בגדול, הבעיה היא ידועה ומוכרת – ריבוי מכשירים ורזולוציות [בעיקר באנדרואיד] הם אלה שעושים את כל ההמולה סביב העניין. כמו שאומרים בתאילנד: “ביג בלאגן”.

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

בואו נתחיל מהנחת היסוד הפשוטה. PPI = DPI.
(Pixels per inch / Dots per inch)
אפל משתמשים במינוח של הPPI, וגוגל בDPI.

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

לקוח מתוך realityonweb.com

לקוח מתוך realityonweb.com

 

חשוב להבדיל בין המונחים:
רזולוציה – מספר הפיקסלים שיכולים להיות במסך לאורך/לרוחב. 1920X1080.
דחיסות/צפיפות [Density] – היא כמות הפיקסלים הנמצאים ב 1 אינצ’.

 

איך לפתוח קובץ עבודה בהתאם למכשיר שעבורו מעצבים?

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

המידות בסקאצ׳

המידות בסקאצ׳

אנדרואיד – איך יודעים באיזה גודל לעצב את תבניות הUI?

DP היא יחידת מידה שעובדים על פיה באנדרואיד, כדי להתמודד עם מכשירים שונים בדחיסות שונה.
DP היא בעצם פיקסל פיזי אחד, על דחיסות של 160DPI.
כלומר, עבור מכשיר שהוא 160DPI, אז 1DP = 1px.

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

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

 

hdpi

 

איך נדע מה הDPI של המכשיר שאנחנו מעצבים עבורו?

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

Nexus5

NOTE:
אם המכשיר שאתם מעצבים אליו לא נמצא ברשימה, אז א’ אולי כדי שתשאלו את עצמכם למה אתם מעצבים למכשיר לא פופולארי. ב’, תמיד אפשר לשאול את dpi.lv .
יכול מאוד להיות שלמכשירים מסויימים לא יהיה DPI מדוייק לזה שברשימה מעל. כך שאם הDPI הוא בערך 640, למשל, אפשר לעגל ולהמשיך לעצב בשקט.

   

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

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

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

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

מתוך גוגל מטריאל

לצורך העניין, הנקסוס 5 שלנו הוא XXhdpi. בגלל שהוא גדול פי 3 מיחידת המידה המקורית שהוגדרה [160 DPI], צריך לחשב כמה הם 12 DP עבור רזולוציה כזו. נכון שהתשובה היא  36 פיקסלים, אבל כדי לחסוך זמן ועצבים:

זה המחשבון שיעזור לכם בחישוב יחידות מידה בכל המכשירים האנדרואידים.

pixplicity

 

 

IOS – החיים קצת קלים יותר

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

כלומר, 1point = 1 pixel , במסך שהוא לא רטינה:

 

iphone-pixels-and-points

לקוח מתוך ivomynttinen.com

 

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

איך לייצא את האייקונים לפיתוח?

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

מה שבטוח, Sketch Assets Export יפתור את הבעיה.

לא בטוחים במשהו? חוק הברזל הוא קודם כל להתייעץ עם צוות הפיתוח.

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

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

יש לכם מה להוסיף? מצאתם טעות במדריך? כתבו לי 🙂

 

9 תגובות “המדריך המעשי לעיצוב במובייל

כתיבת תגובה

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

שינוי גודל גופנים
ניגודיות