8 טיפים לעיצוב UI שיהפכו את המשחק שלכם למעולה

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

צלם/תמונה: valentinrussanov/ Getty Images Israel

מאת נועה בר-אל, מרקטינג, אורי נאור, מנהלת קריאייטיב השיווק וריטה נמצוב, כותבת ומנהלת התוכן בחברת איליון המפתחת משחקי קז’ואל למובייל

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

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

מה שונה ב-UI למובייל לעומת WEB?

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

צלם/תמונה: אילן בנדנה

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

1. אינטואיטיביות

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

2. בהירות

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

3. רזולוציה

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

4. ייבוא משחק ממחשב למובייל

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

5. מפות

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

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

6. פונט

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

צלם/תמונה: אילן בנדנה

7. צבעוניות אפקטיבית

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

8. המשכיות

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

הכתבה בחסות Ilyon

Ilyon היא חברת Mobile Gaming שמתמחה במשחקי Casual. בין המשחקים המוכרים שלה ניתן למצוא את Bubble Shooter ואת Cookie Crush. החברה נוסדה ב-2013 על ידי ארבעה יזמים צעירים, ומאז תחילת 2016 עוברת תהליך צמיחה משמעותי ויוצא דופן כשכבר היום יש בחברה מעל 100 עובדים. החזון של החברה הוא - ״להוביל ולהיות חדשניים בתחום משחקי ה-Casual, לצורך הענקת הנאה וריגוש ללקוחותינו ברחבי העולם, תוך דגש על יצירתיות, אחריות וגמישות״.

כתב אורח

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

להגיב

תגובה אחת

  1. הכי חשוב זה \"חויית המשתמש\" הגיב:

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

תגיות לכתבה: