כיצד להתאים אפליקציית ווב לממשק המטרו של חלונות 8? [מדריך]

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

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

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

דוגמא מהחיים

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

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

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

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

סיימנו. יש לנו אפליקציית מטרו ל- Windows 8.

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

ליאור יאיר, מנכ”ל משותף בחברת נטקראפט. במסגרת תפקידו הוא אחראי על תהליכי המחקר, האפיון והעיצוב המבוצעים על ידי חברת נטקראפט בארץ ובעולם. הנציג הרשמי של ארגון IXDA בישראל. חבר בקבוצת מקימי ארגון UXI ומקים בית הספר לחווית משתמש Netcraft Academy ואת אירועי חווית משתמש על בירה. מרצה בכנסים ובמוסדות אקדמיים בארץ ובעולם.

ליאור יאיר

ליאור יאיר הוא מומחה לחווית משתמש ומנכ"ל משותף בחברת נטקראפט.

הגב

5 תגובות על "כיצד להתאים אפליקציית ווב לממשק המטרו של חלונות 8? [מדריך]"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
Orit.Sha
Guest

תודה על הפוסט ליאור !
הרעיון בהחלט מתחיל להתבהר בעזרתו.
מניחה שאחרי יום העיון – יתבהר עוד יותר (:

שי א.
Guest

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

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

יניב, אתם יכולים להתחמק מתגובות מהסוג הזה אם תרחיבו את התיוג על פוסטים נושאיים כאלה ותוסיפו תיוג “מיקרוסופט” או “וינדוס 8” (או “אפל” או “גוגל”) ותאפשרו הסתיר פוסטים על נושאים מסויימים ומידי פעם תפרסמו איך אפשר להסתיר פוסטים עם תיוג מסויים.

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

יכול להיות פיצ’ר נחמד.

ליאור יאיר
Guest

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

wpDiscuz

תגיות לכתבה: