המדריך האולטימטיבי לעיצוב ממשק המשתמש

תוֹכֶן

• 01. בחר את הטיפוגרפיה שלך
• 02. בחר בפלטה הימנית
• 03. קישורים וכפתורים בסגנון
• 04. צור את הרכיבים שלך
• 05. לתעד ולשתף פעולה

מהו עיצוב ממשק משתמש? שאלה טובה יותר תהיה, מה בעצם נכנס לתכנון ממשק משתמש? אֶסתֵטִיקָה? שְׁמִישׁוּת? נְגִישׁוּת? כולם? כיצד כל הגורמים הללו מתאחדים כדי לאפשר חווית משתמש אופטימלית ואשר צריך לבוא במקום הראשון?

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

01. בחר את הטיפוגרפיה שלך

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

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

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

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

כשמדובר בקריאות ובקריאות, גודל הגופן המינימלי המותר כמוגדר על פי הנחיות הנגישות לתוכן אינטרנט של WCAG 2.0 הוא 18pt (או מודגש 14pt). גודל הגופן הטוב ביותר לשימוש תלוי במידה רבה בגופן עצמו, אך חשוב לשים לב להיררכיה הוויזואלית וכיצד גודל בסיס זה מבדיל את עצמו מהסיכומים והכותרות (כלומר h1>, h2>, h3>).

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

• h1>: 44 פיקסלים
• h2>: 33 פיקסלים
• h3>: 22 פיקסלים
• p>: 18 פיקסלים

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

בשלב הבא בחר את הגופן שלך, אך היזהר מכיוון שמה שאתה עשוי להבחין בכמה גופנים זה 18px p> ו- 22 פיקסלים h3> לא נראה כל כך שונה. יש לנו שתי אפשרויות: לשנות את גדלי הגופנים או לשקול גופן שונה לכותרות. עבור עם האחרון אם אתה צופה שהעיצוב שלך יהיה כבד טקסט.

זכור כי:

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

גובה קו

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

שוב, WCAG עוזר לנו עם זה, והצהיר שגובה השורה צריך להיות פי 1.5 מגודל הגופן. לכן, בכלי העיצוב של ממשק המשתמש שלך תחת 'קו' (או דומה), פשוט הכפל את גודל הגופן ב - לפחות - 1.5. לדוגמא, אם הטקסט בגוף הוא 18 פיקסלים, אז גובה השורה יהיה 27 פיקסלים (18 * 1.5 - אתה יכול גם לבצע את פעולת המתמטיקה ישירות במפקח). עם זאת, שים לב - אם 1.6x מרגיש טוב יותר, השתמש ב- 1.6x. זכרו שגופנים שונים יפיקו תוצאות שונות.

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

מרווח בין פסקאות

ריווח בין פסקאות אינו סגנון שנוכל להכריז עליו באמצעות המפקח של InVision Studio. במקום זאת, נצטרך ליישר ידנית שכבות באמצעות מדריכים חכמים (⌥). בדומה לגובה הקו, מכפיל הקסם הוא 2x (כפול מגודל הגופן). לדוגמא, אם גודל הגופן הוא 18 פיקסלים, אז צריך להיות לפחות רווח של 36 פיקסלים לפני שמובילים לגוש הטקסט הבא. מרווח האותיות צריך להיות לפחות 0.12.

עם זאת, איננו צריכים לדאוג לכך עד שנתחיל ליצור רכיבים.

סגנונות משותפים

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

02. בחר בפלטה הימנית

בחירת הצבעים המושלמים לעיצוב שלך חורגת מהאסתטיקה: היא יכולה להודיע ​​על כל ההיררכיה של האתר שלך.

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

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

01. מוּחלָט
תוסף Stark תואם ל- Sketch ו- Adobe XD ועוזר לך לבדוק ניגודיות צבעים ולדמות עיוורון צבעים ישירות מהקנבס. התמיכה ב- Figma ו- InVision Studio תגיע בקרוב מאוד.
02.צבעים
צבעים הוא קבוצה של 90 שילובי צבעים בעלי מידת ניגודיות צבע מתאימה על מנת לעמוד בהנחיות WCAG 2.0 - חלקם אף מצליחים לעמוד בתקן AAA.
03. פרויקט A11y
פרויקט A11y מהווה מוקד עצום לכל הקשור לנגישות. הוא כולל משאבים, כלים, טיפים, הדרכות ונוצר על ידי יצרן התוסף Stark ומקבל מימון מ- InVision.

שלושת סוגי הצבעים

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

• צבע קריאה לפעולה (גם צבע המותג הראשי)
• צבע כהה ניטראלי (טוב יותר לאלמנטים של ממשק המשתמש או למצב כהה)
• עבור כל האמור לעיל, וריאציה מעט בהירה יותר וכהה יותר

זה מאפשר את הפעולות הבאות:

• ניתן להשיג בקלות מצב כהה
• צבע ה- CTA שלנו לעולם לא יתנגש עם צבעים אחרים
• בכל תרחיש נוכל להדגיש ולהבליט

הגדר את לוח הצבעים שלך

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

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

בניגוד

בשלב הבא נצטרך לבדוק את הצבעים שלנו לגבי ניגודיות צבע אופטימלית. ישנם מגוון כלים שיכולים לעשות זאת, למשל תוסף Stark עבור Sketch ו- Adobe XD או Contrast עבור macOS - עם זאת, פתרון מקוון כגון Contrast Checker או Color Contrast Checker יעשה בסדר גמור.

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

03. קישורים וכפתורים בסגנון

גודל

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

בדיקת יכולת ראייה חזותית היא בדיקת שמישות המשמשת כדי לקבוע אם מטרות הברז נראות לחיצות. סנכרן את העיצוב מסטודיו ל- Freehand (⌘⇧F), שלח את כתובת האתר המתקבלת לבודקים ותן להם להקיף את האלמנטים שלדעתם ניתנים ללחיצה.

משתמשי Non-InVision Studio יכולים להשתמש גם ב- Freehand, אך משתמשי InVision Studio יכולים להשיק את העיצובים שלהם ל- Freehand בצורה חלקה מ- InVision Studio, שהיא הדרך המהירה והיעילה ביותר להשיג משוב חזותי ממשתמשים.

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

• נוֹרמָלִי: 44 פיקסלים בגובה (פינות מעוגלות: 5 פיקסלים)
• גָדוֹל: 54 פיקסלים בגובה (פינות מעוגלות: 10 פיקסלים)
• גדול מאוד: 64 פיקסלים בגובה (פינות מעוגלות: 15 פיקסלים)

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

עוֹמֶק

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

אינטראקטיביות

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

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

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

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

04. צור את הרכיבים שלך

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

שימוש ברכיבים

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

זה לא אומר שאנחנו צריכים לתכנן המון רכיבים או להיות מוכנים לכל תרחיש אפשרי, אבל זה אומר שאנחנו צריכים להשתמש בגישה 'מה אם?'.

לדוגמא, אם מסגרת החוטים שלנו קוראת לרכיב 3x1 אך אנו יודעים שהתוכן אינו מוגדר באבן, התבוננות קטנה עשויה לגרום לנו לתהות: 'מה אם רכיבים אלה בסופו של דבר יהיו 4x1?'. כלל האצבע הוא: תכננו רק לצרכי המשתמש שכבר קיימים אך נסו להפוך את הפתרונות לגמישים יחסית. אחרת, נקבל קצת 'חוב עיצובי' מבולגן מאוד בהמשך הקו.

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

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

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

ניצול הכללים שלנו

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

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

מבחן לחץ

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

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

05. לתעד ולשתף פעולה

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

צבעים

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

ספריות משותפות

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

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

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

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

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

עיצוב בקנה מידה

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

לדוגמה, אולי נרצה להשתמש בשכבות טקסט כדי להעלות הערות לספרייה שלנו כאמצעי להסביר את מקרי השימוש של אלמנטים שונים. עבור הסגנונות הטיפוגרפיים, נוכל אפילו לערוך את הטקסט כך שהוא תיאור יותר (למשל "h1> / 1.3 / 44px"). זה אומר את זה h1>s צריך להיות 44 פיקסלים וגובה הקו שלהם יהיה 1.3.

עיצוב מסירה

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

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

תוכן זה הופיע במקור במגזין נט.