שיעור ראשון - היכרות בנושא הממשקים השונים

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

איזה מסמך לפתוח בשביל להתחיל לעצב אפליקציה?

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

Dp - יחידות מידה שנקראות Density Pixel( גם נקראות Dip ). יחידות המידה הללו מאפשור למתכנתים לקודד את העיצוב ולהתאים את הגרפיקה בקלות בגדלי המסכים השונים ללא עיוות הגרפיקה או פקסול.

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

פיקסל רגיל אחד שווה לאחד Dp במידה והגדרתם בפוטושופ שלכם פיקסל פר איינץ' (dpi) כ-160. כך:

 

במידה ואתם מעצבים למסכים עם רזולוציות גבוהות יותר למשל: xhdpi (בהמשך תקבלו הסבר מפורט על זה) שזה 320 dpi (פיקסל פר אינץ). אז מה שקורה שכל Dp אחד שווה ל-4 פיקסלים רגילים. להלן להמחשה:

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

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

אותו וידאו רק באנגלית:

אילו ממשקים קיימים היום בשוק ואיך נדע באיזו רזולוציה יש לבחור

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

בואו נתחיל עם המוכרים ביותר, נתחיל עם המסובך ביותר שזה הסמסונג גלקסי:

רזולוציה של סמסונג גלקסי

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

Ldpi - רזולוציית מסך נמוכה, קיים במכשירים ממש ישנים - 120 dpi

Mdpi - רזולוציית מסך בינונית - 160 dpi

Hdpi -  רזולוציית מסך גבוהה - 240 dpi

Xhdpi - רזולוציית מסך אקסטרא-גבוהה - 320 dpi

xxhdpi - רזולוציית מסך אקסטרא-אקסטרא-גבוהה - 480 dpi

xxxhdpi - רזולוציית מסף אקסטרא-אקסטרא-אקסטרא-גבוהה - 640 dip

הרזולוציה של המסכים נקבעת לפי הגדרות המכשירים, במכשירים החדשים הרזולוציות יהיו גבוהות יותר כמובן. אפשר לשים לב שיש יחס של 1:1.5 ו1:2 בקפיצות הרזולוציות השונות . לדוגמה אפשר לראות ש Ldpi הוא בדיוק חצי מ Hdpi וMdpi בדיוק חצי מ-Xhdpi.   שלא תחשבו שזה אומר שעליכם לעצב מספר גרסאות לפי הרזולוציות השונות, אלא פשוט לעצב לפי הרזולוציה הגבוהה ביותר ובמידת הצורך המתכנת יעשה את השינויים ברזולוציות.

גדלי המסכים השונים

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

1. גלקסי אס-2 | galaxy s2

 

רזולוציית מסך בפיקסלים: 480X800 פיקסל.

יחס רזולוציית המסך: 0.6

רזולוציית מסך: 218 dpi

 

 

 

 

2. גלקסי אס-3 |galaxy s3

רזולוציית מסך בפיקסלים: 720X1280

יחס רזולוציית המסך: 0.5625

רזולוציית מסך: 306 dpi

 

 

 

3. גלקסי אס-4 | galaxy s4

רזולוציית מסך בפיקסלים: 1080X1920

יחס רזולוציית המסך: 0.5625

רזולוציית מסך: 441 dpi

 

 

 

4. גלקסי אס-5 | galaxy s5

רזולוציית מסך בפיקסלים: 1080X1920

יחס רזולוציית המסך: 0.5625

רזולוציית מסך: 432 dpi

 

 

 

 

5. גלקסי נוט 2 | galaxy note 2

רזולוציית מסך בפיקסלים: 720X1280

יחס רזולוציית המסך: 0.5625

רזולוציית מסך: 265 dpi

 

 

 

6. גלקסי נוט 3 | galaxy note 3

רזולוציית מסך בפיקסלים: 1080X1920

יחס רזולוציית המסך: 0.5625

רזולוציית מסך: 386 dpi

 

 

 

 

 

7. גלקסי נוט 4 | galaxy note 4

רזולוציית מסך בפיקסלים: 1440X2560

יחס רזולוציית המסך: 0.5625

רזולוציית מסך: 515 dpi

 

 

טאבלים של סמסונג גלקסי

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

1. גלקסי טאב אס 10.5 | galaxy tab s 10.5

רזולוציית מסך בפיקסלים: 2560X1600

יחס רזולוציית המסך: 1.6

רזולוציית מסך: 288 dpi

 

 

 

 

 

2. גלקסי טאב-4 10.1 | galaxy tab-4 10.1

רזולוציית מסך בפיקסלים: 1280X800

יחס רזולוציית המסך: 1.6

רזולוציית מסך: 149 dpi

 

 

 

3. גלקסי טאב-4 8.0 | galaxy tab-4 8.0

רזולוציית מסך בפיקסלים: 800X1280

יחס רזולוציית המסך: 0.625

רזולוציית מסך: 189 dpi

 

 

 

 

 

4. גלקסי טאב אס 8.4 | galaxy tab s 8.4

רזולוציית מסך בפיקסלים: 1600X2560

יחס רזולוציית המסך: 0.625

רזולוציית מסך: 359 dpi

 

 

 

5.גלקסי טאב פרו 8.4 | galaxy tab pro 8.4

רזולוציית מסך בפיקסלים: 1600X2560

יחס רזולוציית המסך: 0.625

רזולוציית מסך: 359 dpi

 

 

 

6. גלקסי טאב 4 7.0 | galaxy tab 4 7.0

רזולוציית מסך בפיקסלים: 800X1280

יחס רזולוציית המסך: 0.625

רזולוציית מסך: 216 dpi

 

 

 

7. גלקסי טאב 3 7.0 | galaxy tab 3 7.0

רזולוציית מסך בפיקסלים: 1024X600

יחס רזולוציית המסך: 1.706

רזולוציית מסך: 169 dpi

 

 

 

 

 

8. גלקסי נוט 10.1  גרסה 2014 | galaxy note 10.1 edition 2014

רזולוציית מסך בפיקסלים: 1600X2560

יחס רזולוציית המסך: 0.625

רזולוציית מסך: 299 dpi

 

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

רזולוציה של אייפון

יחס הרזולוציות באייפון משתנות כמעט כל דגם אבל רוחב המסך זהה (מלבד אייפון 6) ולכן אם אתם רוצים לעשות עיצוב לאפליקציה כמו שצריך (לרוב מתכנתים יודעים להסתדר אבל החלטתי לא להסתמך על זה במאמר שלי) יש לעצב לכל רזולוציה בהתאמה (אייפון 4, 5, 6+). או לפחות לתת את ההנחיות המתאימות למתכנת על מנת שלא יהיו שוליים שחורים או שדברים יאבדו פרופורציות ויפוקסלו חלילה...במכשירי אפל לא עובדים לפי dp אבל השיטה של הגדרת מסמך בפוטושופ זהה. באייפון עובדים עם UI Builder שעושה את עבודת ההתאמה למכשירים השונים בצורה מעולה.

1. אייפון 4 | iphone 4

רזולוציית מסך בפיקסלים: 640X960

יחס רזולוציית המסך: 0.66666

רזולוציית מסך: 326 dpi

גודל מסך: 3.5 אינץ

 

 

 

2. אייפון 4-אס | iphone 4S

רזולוציית מסך בפיקסלים: 640X960

יחס רזולוציית המסך: 0.66666

רזולוציית מסך: 326 dpi

גודל מסך: 3.5 אינץ

 

 

 

3. אייפון 5 | iphone 5

רזולוציית מסך בפיקסלים: 640X1136

יחס רזולוציית המסך: 0.563

רזולוציית מסך: 326 dpi

גודל מסך: 4 אינץ

 

 

 

 

4. אייפון 5-אס | iphone 5S

רזולוציית מסך בפיקסלים: 640X1136

יחס רזולוציית המסך: 0.563

רזולוציית מסך: 326 dpi

גודל מסך: 4 אינץ

 

 

5. אייפון 6 | iphone 6

רזולוציית מסך בפיקסלים:

750X1334 (תצוגת HD)

640X1136 (תצוגת זום)

יחס רזולוציית המסך: 0.563

רזולוציית מסך: 326 dpi

גודל מסך: 4.7 אינץ

 

 

6. אייפון 6 פלוס | iphone 6 plus

רזולוציית מסך בפיקסלים:

1242X2208 (תצוגת HD)

1125X2001 (תצוגת זום)

יחס רזולוציית המסך: 0.5625

רזולוציית מסך: 401 dpi

גודל מסך: 5.5 אינץ

 

האייפד

האייפד מגיע בדגמים וגדלים שונים, אעבור רק על הדגמים הפופולארים ולא על הישנים.

1. אייפד אייר | ipad air

רזולוציית מסך בפיקסלים: 2048X1536

יחס רזולוציית המסך: 1.333

רזולוציית מסך: 264 dpi

גודל מסך: 9.7 אינץ

 

 

 

2. אייפד 2 | ipad 2

רזולוציית מסך בפיקסלים: 1024X768

יחס רזולוציית המסך: 1.333

רזולוציית מסך: 132 dpi

גודל מסך: 9.7 אינץ

 

 

 

 

3. אייפד מיני 2 | ipad mini 2

רזולוציית מסך בפיקסלים: 2048X1536

יחס רזולוציית המסך: 1.333

רזולוציית מסך: 324 dpi

גודל מסך: 7.9 אינץ

 

4.  אייפד אייר 2 | ipad air 2

רזולוציית מסך בפיקסלים: 1536X2048

יחס רזולוציית המסך: 0.75  (1.333)

רזולוציית מסך: 264 dpi

גודל מסך: 9.7 אינץ

 

5. אייפד מיני 3 | ipad mini 3

רזולוציית מסך בפיקסלים: 2048X1536

יחס רזולוציית המסך: 0.75  (1.333)

רזולוציית מסך: 324 dpi

גודל מסך: 7.9 אינץ

 

 

 

 

6. אייפד 3 | ipad 3

רזולוציית מסך בפיקסלים: 2048X1536

יחס רזולוציית המסך: 1.333

רזולוציית מסך: 264 dpi

גודל מסך: 9.7 אינץ

 

 

 

 

7. אייפד 4 | ipad 4

רזולוציית מסך בפיקסלים: 2048X1536

יחס רזולוציית המסך: 1.333

רזולוציית מסך: 264 dpi

גודל מסך: 9.7 אינץ