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

איך לא לצייר אייקונים שטוחים

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

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

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

דוגמה לאייקונים שטוחים טובים:

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

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

1. ניווט ושימושיות

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

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

2. עטיפת רגל שטוחה ארוכה

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

3. כפתורים מבלבלים

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

4. אייקונים מצוירים בצורה גרועה

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

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

5. מיקוד תוכן כוזב

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

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

אז האם עיצוב שטוח הכרחי לאתרים בכלל?

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

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

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

דוגמה לעיצוב שטוח באיכות גבוהה:

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

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

אופנה היא מחזורית ומאז 2010, עיצוב שטוח חזר במהירות לפופולריות עד שהפך לסטנדרט החדש בעיצוב בעזרת מחשב ב-2014.

האבולוציה של עיצוב שטוח

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

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

עקרונות עיצוב שטוח

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

2. אייקונים.
שימוש באייקונים פשוטים עם קריאה ברורה לפעולה (תקליטון או סמל אחסון בענן המבקש ממך לשמור קובץ) הופך את הממשק לקל ואינטואיטיבי יותר.

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

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

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

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

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

יתרונות עיצוב שטוח לאתר

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

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

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

4. מראה חיצוני.
כמה זמן לדעתך לוקח למשתמש לגבש דעה לגבי משאב? דַקָה? אולי 30 שניות? תשובה נכונה: 0.05 שניות! בזמן הזה אי אפשר ללמוד את תוכן האתר, אבל אפשר לסרוק את המראה ולהבין אילו תחושות הוא מעורר. עיצוב שטוח אומר למשתמשים שהאתר שלכם מודרני, שהוא בפיתוח, וזה כבר תנאי מוקדם ליצירת אמון בסיסי.

איפה אפשר להשתמש בעיצוב שטוח?

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

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

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


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

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

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

הפופולריות של הסגנון השטוח בעיצוב בוצעה על ידי שחרור מערכת ההפעלה Windows 8 מבית מיקרוסופט בסגנון מטרו, כמו גם iOS 7, שבה אפל בוחרת גם בסגנון שטוח. לאחר מכן מתחיל העידן האמיתי של עיצוב שטוח. בקרוב, שירותי חיפוש ואפליקציות גדולים - גוגל, יוטיוב - עוברים ל-Flat-design; מופיעים אתרים רבים המשתמשים בעקרונות של סגנון שטוח בעיצובם. בשנים האחרונות, עיצוב שטוח היה מוביל בטרנדים עולמיים של עיצוב אתרים.

היתרונות של עיצוב שטוח

  1. פּרַקטִיוּת- השימוש בעיצוב שטוח מאפשר למזער את מספר הסגנונות, התסריטים והאנימציות, מה שמאפשר לאתר להיטען מהר יותר.
  2. קל להסתגל- עיצוב שטוח קל מספיק להסתגל לרזולוציות מסך שונות.
  3. קלות שימוש- הודות לסגנון הפשוט, קל יותר למשתמשים לתפוס מידע באתר.
  4. יוֹפִי- חוסר משוא פנים ועיצובים פשוטים מאפשרים לך להתמקד בעיצוב שבאמת תופס אותך.

5 עקרונות של עיצוב אתר שטוח

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

1 - שימוש באובייקטים דו מימדיים

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

2 - אייקונים וחפצים פשוטים

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

3 - פונטים פשוטים בסגנון העיצוב

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

4 - משחק צבעים

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

5 - מינימליזם

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

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

דוגמאות לעיצוב שטוח

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

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

המקום שבו הכל התחיל

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

מסקאומורפיזם לעיצוב שטוח

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

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

מאפיינים של סגנון שטוח

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

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

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

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

דוגמאות לעיצוב שטוח

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

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

האבולוציה של עיצוב שטוח

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

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

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

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

יתרונות וחסרונות של סגנון

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

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

מראה פשוט מקל על הקריאה של הטקסט ומאפשר לך להתמקד בתוכן הראשי.

העיצוב נראה הרמוני והוליסטי, מה שיוצר רושם נעים כללי.

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

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

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

ביקשנו מהם לענות על שלוש שאלות עיקריות:

  • מדוע העולם התחיל להתקדם לעבר עיצוב שטוח ברשת ובמובייל ומה זה;
  • מה זה ייתן לאפל ול-iOS 7;
  • איך זה ישפיע על מעצבים מצד אחד, ועל משתמשים מצד שני.

דניס סודילקובסקי, קייב
מומחה לעיצוב אינטראקציה, מפיק Prodesign.in.ua

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

מה אפל תקבל מזה? הוא ישמור על מקומו במגמה ומאות אלפי הערות על כך שה-iOS שלהם הופך להיות דומה מאוד לאנדרואיד.

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

דניאל ברוס, שטוקהולם
Digital Creative בכיר, danielbruce.se

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

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

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

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

באשר למשתמשים רגילים, הם אוהבים צבעים בהירים.

איבן קלימנקו, קייב
מעצב ממשק נייד, 5tak.com

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

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

ואז בשנות ה-60 כולם התחילו להתפעל מפלסטיק.

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

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

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

אולסיה גריצ'ינה, קייב
מעצב ממשק משתמש ב-Componentix, טוויטר: elendiel

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

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

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

פאבל גרוזיאן, קייב
מעצב מוצר ב-MacPaw, grozyan

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

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



מאמר זה זמין גם בשפות הבאות: תאילנדית

  • הַבָּא

    תודה רבה על המידע המאוד שימושי במאמר. הכל מוצג בצורה מאוד ברורה. זה מרגיש כאילו נעשתה עבודה רבה כדי לנתח את פעולת חנות eBay

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

      • הַבָּא

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

  • זה גם נחמד שהניסיונות של eBay להרוס את הממשק עבור משתמשים מרוסיה וממדינות חבר העמים החלו להניב פרי. אחרי הכל, הרוב המכריע של אזרחי מדינות ברית המועצות לשעבר אינם בעלי ידע רב בשפות זרות. לא יותר מ-5% מהאוכלוסייה דוברי אנגלית. יש יותר בקרב צעירים. לכן, לפחות הממשק הוא ברוסית - זו עזרה גדולה לקניות מקוונות בפלטפורמת מסחר זו. eBay לא הלכה בדרכה של מקבילתה הסינית Aliexpress, שם מתבצעת תרגום מכונה (מאוד מגושם ולא מובן, לפעמים גורם לצחוק) של תיאורי מוצרים. אני מקווה שבשלב מתקדם יותר של פיתוח הבינה המלאכותית, תרגום מכונה איכותי מכל שפה לכל שפה תוך שניות יהפוך למציאות. עד כה יש לנו את זה (הפרופיל של אחד המוכרים באיביי עם ממשק רוסי, אבל תיאור באנגלית):
    https://uploads.disquscdn.com/images/7a52c9a89108b922159a4fad35de0ab0bee0c8804b9731f56d8a1dc659655d60.png