Is Metro Interface a “Performance Driven Design”?

19 ביוני 2012

26 תגובות

האם ממשק המטרו הוא רעיון גאוני לעיצוב מונחה ביצועים?

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

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

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

screenshot_win8prev_hero
מסך הפתיחה של Windows 8 (דוגמא לממשק מטרו)

ננסה לפרט את העקרונות שמגדירים את מטרו:
ממשק פשוט, נקי ומינימליסטי, שימוש בטיפוגרפיה (טקסט בעיקר) כאמצעי ניווט שולט, בנוסף, הוא מתאפיין בצבעים אחידים ופשוטים, וצורות מרובעות.
Windows_Phone_7.5_Start_Screen
מסך הפתיחה של Windows Phone 7.5 (דוגמא לממשק מטרו)

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

אם מסתכלים על המאפיינים של מטרו שתיארתי מקודם, קל לשים לב שהעקרונות מכתיבים ממשקים מאוד פשוטים, לא רק פשוטים למשתמש, אך גם פשוטים למחשב.
מבחינה עיבודית, כשמכונה כמו מחשב צריכה לצייר (to Render) מסך של מטרו, זה הרבה יותר פשוט מאשר מסך כמו של Android לדוגמא, או אפילו Windows 7.
עכשיו קחו את מה שאמרתי, ותוסיפו לזה את המגמה האדירה של עולם התכנה לכיוון אפליקציות מבוססות דפדפן, שגם הפכה למיינסטרים ב Windows 8, ותבינו איך הגעתי לחשוב על הקונפירציה הזו – אם אני רוצה לצייר בדפדפן באמצעות HTML\JS\CSS מסך של מטרו, זה הרבה הרבה הרבה יותר פשוט מלצייר לדוגמא מסך של אנדרואיד, או של מק. זו עבודה פשוטה מאוד, גם לדפדפן וגם למתכנת.

htc_rosie_1
מסך הפתיחה של Android with HTC Sense (דוגמא לממשק שאינו מטרו)

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

  • ממשק פשוט, מינימליסטי, נקי – מבחינת המחשב זה פשוט מאוד. כמה שפחות דברים שהוא צריך לצייר למסך, הוא יעשה את זה יותר מהר. אם אנחנו אומרים שאנחנו רוצים מסכים פחות עמוסים בפקדים, זה אומר שהמסך ירוץ יותר מהר.
  • צבעים אחידים – בשביל מחשב לצבוע ריבוע בצבע כחול, זה הרבה יותר קל מלצבוע אותו בצבע מדורג (Gradiant) שהופל מכתום לכחול. אם מסתכלים עם דפדפנים זה אפילו יותר בולט, כשצביעה בצבע אחיד היא פעולה טריוואלית, בעוד שצבע מדורג היא פעולה לא פשוטה בכלל. אם נתחיל להשוות לאפקטים למיניהם כמו שקיפות למחצה, או אפקט הזכוכית, כאן זה כבר הבדל עצום בביצועים, וכשמדברים על דפדפן זה גם קשה למימוש עד בלתי אפשרי (תלוי באפקט).
  • ריבועים – צורות מלבניות למיניהן, הן יחידת ציוד די בסיסית למחשב. זאת לעומת צורות מורכבות יותר כמו לדוגמא, צורה של טיפה (סתם דוגמא). זה נובע מהמתמטיקה שמאחורי הצורה, אבל בשורה התחתונה, המחשב יצייר ריבועים הרבה יותר טוב מאשר טיפות, או לדוגמא ריבועים עם פינות מעוגלות (שרואים הרבה לדוגמא באייפון). אם נדבר על דפדפנים אז כאן ריבועים זה אבני היסוד של דפים. לצייר טיפה בדפדפן זו עבודה לא פשוטה בכלל וצורכת הרבה יותר משאבים מציור מלבן שפחות או יותר מסתכם בשורה אחת המייצרת Div עם Border ו Background-Color.
  • טיפוגרפיה – קחו לדוגמא את ממשק הפנורמה של Windows Phone 7. הוא מורכב רובו ככולו מטקסטים בלבד. אין אייקונים או סמלים מיוחדים, או תמונות או צורות אחרות. כמעט הכל שם זה טקסט. כתיבת טקסט היא גם אחת הפעולות הבסיסיות של המחשב ושל כל תשתית UI. אין צורך בכלי ציור מתוחכמים כדי לכתוב טקסט למסך. במיוחד כשמדובר על דפדפנים שבמקור נבנו עבור המטרה היחידה של הצגת טקסט, ולכן עושים זאת בקלות רבה מאוד.
  • ממשק ללא תמונות – זו אינה עיקרון ישיר של ממשק מטרו, אבל אם תשימו לב, לרוב באפליקציות מטרו אין תמונות אשר משמשות לבניית הממשק. אני לא מדבר על תמונות שהן חלק מהתוכן כמו לדוגמא תמונה של תל אביב בכתבה שמדברת על תל אביב. אני מדבר על תמונות שבונות את הממשק, כמו לדוגמא אייקונים למיניהם, תמונות רקע, חלקים מהתפריט, וכולי. לצייר תמונה על המסך זו לא עבודה קשה למחשב, אבל בטוח שיותר קשה מלצייר קו, או ריבוע. בנוסף, מעבר ליתרון בביצועים, עם תמונות קשה להתעסק. כדי שיראו טוב צריך שיהיו ברזולוציה גבוהה, וזה אומר נפח גדול. צריך לדאוג לשמור על פרופורציות. לפעמים צריך לספק כמה גדלים לאותה תמונה עבור שימושים שונים, ואי אפשר להגדיל או להקטין אותן בקלות תוך שמירה על המראה המקורי.

בואו נראה את ההבדלים בפועל:

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

iPhone settings design

לעומת ממשק ההגדרות של Windows Phone:

ScreenDump_2011-16-31-10-16-01-3160-PM

זו לא תחרות מי יותר יפה. רק שימו לב להבדלים מנקודת מבט תכנותית.

דוגמא נוספת:

שולחן העבודה של Windows Vista:
Vista design

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

לעומת שולחן העבודה של Windows 8:

8270_Desktop-theme_0459AA86

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

“To complete the story, we updated the appearance of most common controls, such as buttons, check boxes, sliders, and the Ribbon. We squared off the rounded edges, cleaned away gradients, and flattened the control backgrounds”

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

 

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

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

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

26 תגובות

  1. xrumer vps15 בספטמבר 2012 ב 6:15

    blogs.microsoft.co.il is little outdated site, but i still love it!
    xrumer vps

    הגב
  2. icons18 בספטמבר 2012 ב 10:21

    Let's return to a theme

    P.S. Please review Love Icon Set from Ikonaluk

    הגב
  3. icons18 בספטמבר 2012 ב 11:16

    It is removed (has mixed topic)

    P.S. Please review Desktop Building Icons from yourmailkept

    הגב
  4. icons18 בספטמבר 2012 ב 11:52

    I think, that you are mistaken. I can defend the position.

    P.S. Please review Business Software Ikons from designesticons

    הגב
  5. icon collection18 בספטמבר 2012 ב 12:38

    In it something is. Earlier I thought differently, thanks for an explanation.

    P.S. Please review Design Icon Set from yourmailkept1

    הגב
  6. icon set18 בספטמבר 2012 ב 12:43

    It is remarkable, the useful message

    P.S. Please review 24×24 Free Button Icons from yourmailkept1

    הגב
  7. seo tools26 באוקטובר 2012 ב 23:29

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

    הגב
  8. Matthew Lokuta25 בינואר 2013 ב 17:38

    This is a topic which is near to my heart… Take care! Where are your contact details though?

    הגב
  9. Erin Mcgarrigle28 בינואר 2013 ב 5:08

    I blog often and I truly appreciate your information. Your article has really peaked my interest. I'm going to book mark your website and keep checking for new details about once a week. I opted in for your Feed as well.

    הגב
  10. Regena Southard30 בינואר 2013 ב 13:52

    Saved as a favorite, I really like your web site!

    הגב
  11. Sean Chiz1 בפברואר 2013 ב 21:42

    Everyone loves it when individuals get together and share views. Great website, continue the good work!

    הגב
  12. deattamevoima8 בפברואר 2013 ב 19:25

    Without shoe lifts, yes shoe lifts, I might still be looked more than for promotion, ignored by the majority of the opposite sex and suffer feelings of worthlessness and obviously have extremely very little self confidence

    http://www.bookmark-clever.de/benutzer/82891/lesezeichen/

    הגב
  13. Lauren Adolphsen12 בפברואר 2013 ב 12:12

    You should be a part of a contest for one of the best sites on the net. I will recommend this site!

    הגב
  14. Azalee Starns16 בפברואר 2013 ב 21:00

    Saved as a favorite, I really like your blog!

    הגב
  15. Latoria Lenarz17 בפברואר 2013 ב 3:19

    Very good post. I'm dealing with some of these issues as well..

    הגב
  16. Rebbeca Lamprecht21 בפברואר 2013 ב 22:26

    Excellent post. I will be experiencing many of these issues as well..

    הגב
  17. Barlow12 במרץ 2013 ב 17:00

    Highly descriptive post, I loved that bit. Will there be a part 2?

    הגב
  18. plailfelp28 במאי 2013 ב 4:25

    Child Abuse Hotline Ad Uses Photographic Trick That Makes It Visible Only To Children

    A Spanish organization called Fundación ANAR, or Aid to Children and Adolescents at Risk, created a bus-stop advertisement in April that features the group's hotline number for children to report abuse. But by using a process called lenticular photography, the company made the hotline number, and much of the ad's content, visible only to those under a certain height — presumably children.

    Lenticular photography allows companies to create an image in a way that lets viewers see one of several different photos, depending on where they're standing. In the case of ANAR's ad, anyone taller than 4 feet 5 inches — the average height of a 10-year-old, according to the group — would see a picture of a boy with an unmarked face and the following message: "Sometimes, child abuse is only visible to the child suffering it." Anyone under that height would see an image of the boy with a bruised face, the organization's hotline number (116-111) in white text, and the message, "If somebody hurts you, phone us and we'll help you."

    [url="http://zcj.pl/biznes,i,ekonomia/windery,reklamowe,reklama,na,flagach,s,7665/"]Read more about it[/url]

    הגב