דף הבית » ממשק משתמש / UX » שטוח 2.0 & איך זה פותר בעיות השימושיות של עיצוב שטוח

    שטוח 2.0 & איך זה פותר בעיות השימושיות של עיצוב שטוח

    עיצוב שטוח כבר סביב מאז כבר 1950, כאשר הבינלאומי סגנון טיפוגרפי פותחה. בזמנים האחרונים היא צברה פופולריות רבה מאז השקת החדש של מיקרוסופט גיאומטריה ו-טיפוגרפיה ממוקד עיצוב המטרו שפה, בהתחלה ב- Windows Phone החדש בשנת 2010, ולאחר מכן ב- Windows 8 בשנת 2012.

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

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

    בעיות השימושיות של עיצוב שטוח

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

    אין מסמנים חזותיים של Clickability

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

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

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

    למה זה בעיה? בוא ננסה ניסוי.

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

    הגבלת יכולת הגילוי בגלל Z- ציר

    אנשים בחיים האמיתיים מוצאים חפצים ומתנועעים בשלושה מימדים: ציר ה- x, y ו- z. כאשר הם נתקלים באתר מינימליסטי מעוצב, שטוח ללא אפקטים 3D, הם מקבלים חוויה שונה ממה שהם רגילים, מה הם בעיקר familar עם.

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

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

    צפיפות מידע נמוכה

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

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

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

    עלייתו של שטוח 2.0 /

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

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

    תמונה: ג 'נטלמן

    עיצוב חומר

    שפת התכנון החדשה של גוגל, המכונה Design Material היא כנראה הדוגמה הבולטת ביותר לסגנון ה- Flat 2.0. גוגל פרסמה חומר עיצוב עם אנדרואיד L בשנת 2014. בעוד עיצוב חומר שומרת על המאפיינים העיקריים של עיצוב שטוח, הוא משתמש מטאפורות מסוימות מהפיזיקה כדי לעזור למשתמשים למצוא במהירות אנלוגיות בין העולם האמיתי לבין העולם הדיגיטלי.

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

    סיכום

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

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