עקרונות היררכיה חזותית עבור מעצבים הם תפיסה עיצובית המשמשת להנחות כיצד עיניו של הצופה נעות בעיצוב ולקבוע אילו אלמנטים חשובים ביותר או מושכים מבחינה ויזואלית.
בתחילה היו לוחות אבן, מגילות פפירוס ונייר. ואז הגיעו מסכי מחשב וטאבלטים אלקטרוניים. ככל שטכנולוגיית תצוגת הדפים מתפתחת, למעצבים נותרה דרך ברורה לארגן תוכן. אבל מה עדיף? בקיצור , היררכיה ויזואלית.
הנה ההגדרה של היררכיה חזותית: היררכיה חזותית היא הסידור אלמנטים גרפיים בעיצוב לפי סדר החשיבות של כל מרכיב. משקל חזותי קובע חשיבות האלמנט בהיררכיה של העיצוב, אומר לצופה במה להתמקד ובאיזה סדר.
זה הופך לנושא יותר ויותר חשוב כאשר מסגרות רספונסיביות מאלצות מעצבים לחשוב על דפים רבים ושונים בבת אחת. מול טקסט צפוף וטווחי תשומת לב קצרים, מעצבים פיתחו 6 עקרונות כדי לכוון את עין הקורא למידע החשוב ביותר.
6 העקרונות האלה של היררכיה חזותית יעזרו לכם לעצב כל דבר, החל מברושורים ועד אפליקציות, ויבטיחו שלמשתמש הקצה תהיה חווית קריאה חיובית למעצבים.
כל התרבויות נקראות מלמעלה למטה, ורוב התרבויות נקראות משמאל לימין. אבל למרות שהידע הזה חשוב עבור עיצוב עמוד, מעצבים יודעים שהמשימה הרבה יותר קשה.
מחקרים אחרונים הראו שאנשים סורקים תחילה דף כדי לראות אם הם מתעניינים בו לפני שהם קוראים אותו. דפוסי סריקה נוטים לקבל אחת משתי צורות, "F" ו-"Z", ואתה יכול לנצל זאת בעיצוב שלך.
דפוסי F. עקרונות של היררכיה חזותית
תבניות F להחיל על דפי טקסט מסורתיים כגון מאמרים או פוסטים בבלוג. הקורא סורק את הצד השמאלי דפים מחפש מילות מפתח מעניינות בכותרות מיושרות לשמאל או במשפטי נושא ראשוניים, ואז עוצר וקורא (מימין) כאשר הוא או היא נתקלים במשהו מעניין. התוצאה נראית כמו F (או E, או משהו עם פסים אופקיים אפילו יותר; אבל המונח "F" תקוע).
איך אתה יכול להשתמש בזה? יישר מידע חשוב לשמאל והשתמש בכותרות קצרות ומודגשות, תבליטים ואלמנטים דומים שמושכי תשומת לב כדי לפרק בלוקים של פסקאות.
דגם Z. עקרונות של היררכיה חזותית
דפוסי Z חלים על סוגים אחרים של דפים, כגון פרסומות או אתרי אינטרנט, שבהם המידע אינו מוצג בהכרח בפסקאות חסומות. הקורא סורק תחילה את חלקו העליון של העמוד, היכן שסביר שיימצא מידע חשוב, ואז עובר לפינה הנגדית באלכסון ועושה את אותו הדבר בתחתית העמוד.
מעצבי אתרים מעצבים בדרך כלל את הדפים שלהם כך שיתאימו באופן מפורש להתנהגות זו, מניחים את המידע החשוב ביותר בפינות ומכוונים מידע חשוב אחר לאורך הפסים העליונים והתחתונים ומתחברים באלכסון.
למטה בעיצוב עצרת הכנס 2010, אלמנטים חשובים הם הלוגו (למעלה משמאל), כפתור "הירשם עכשיו" (מימין למעלה), ורשימת רמקולים (למטה), הממוקמים אסטרטגית בנקודות יפות של דפוס Z.
2. הגודל קובע. עקרונות של היררכיה חזותית
_
זה די פשוט: אנשים קוראים קודם דברים גדולים. אם עיניכם נמשכות ל"הביצועים" לפני שאתם "מתפצלים" לפרסומת למטה עבור ה-Young Vic, כדאי שתפנו מיד לפסיכולוג תפיסתי: סביר להניח שתוכל להרוויח כסף טוב אם תבחן כאנומליה נדירה.
מה שמעניין הוא שהנטייה הזו למעשה חזקה מספיק כדי לדחות את הכלל מלמעלה למטה. בתמונה שלמעלה, "האק" עוקף את "זמן לפעול" מכיוון שהוא גדול יותר ומשמאל (כך שהכלל משמאל לימין עוזר).
אבל בעמוד הבא של הדו"ח השנתי: מסע זכויות האדם 2012 (פותח בטור התקשורת החמישי) אנו קוראים בגדול גוֹפָן "המאבק לשוויון על שביל הקמפיין" לפני הטקסט ישירות מעליו "בחירות 2012". עקרונות של היררכיה חזותית
"בחירות 2012" הוא סדר המידע ברמה הגבוהה ביותר: הוא מספר לנו את הנושא הכללי אליו מתייחס המידע להלן. אבל המעצב החליט שכותרת המאמר מעניינת יותר עבור הקוראים, ולכן דירג אותה כך שתקרא קודם.
3. מרווח ומרקם. עקרונות של היררכיה חזותית
דרך נוספת למשוך תשומת לב היא לתת לתוכן מספיק מקום לנשום . אם יש רווח שלילי משמעותי סביב הכפתור או אם יש מעקב נרחב אחר השורות בבלוק הטקסט, אלמנטים אלה יהיו גלויים יותר לקוראים.
כפי שניתן לראות בתמונה למטה (חלק מהאתר של DrawtoClick), מרווח יכול להיות חלופה אלגנטית או השלמה לשימוש בגודל. כאן, נקודת המכירה, "Notre agence vouscompagne...", כתובה באותיות קטנות מאוד, אך היא מוקפת בשפע של שטח לבן, המעיד על חשיבותה. למטה, המשפטים "Le Compendre", "Le Réaliser" ו-"Le Partager" מקבלים דגש נוסף, בהיותם מנותקים מהמרחב שמסביב.
כשאנשים מדברים על "מרקם" ביחס להיררכיה חזותית, הם לא מתכוונים לאפקטים הגרפיים של מרקם. במקום זאת, סוג זה של "מרקם" מתייחס לסידור או למבנה הכולל של החלל, הטקסט ופרטים אחרים בדף. דוגמה זו מ-Bright Pink ממחישה היטב את הרעיון:
בתמונה הראשונה, המילה "ספורט" גבוהה יותר בהיררכיה מאשר "בדמינטון" כי היא גבוהה יותר, גדולה ונועזת יותר. בתמונה 2, שתי המילים שוות בערך, הודות למלבן השחור שגורם ל"בדמינטון" לבלוט ומכניס אותו לחלל משלו.
בתמונה השלישית, שרבוט הרקע קוטע את מרחב ה"ספורט" אך לא את מרחב ה"בדמינטון", ולכן מביא להיפוך שבו "בדמינטון" הוא הגבוה בהיררכיה. קשה לחזות את ההתפתחות הזו, ולכן מעצבים מרבים לשייך אותה לתחושה הוליסטית של "טקסטורה".
4. משקל גופן והתאמה. עקרונות של היררכיה חזותית
בחירת גופנים היא קריטית לביסוס היררכיה חזותית. בין המאפיינים החשובים ביותר של גופן הם משקל, רוחב המשיכות המרכיבות את האותיות שלו וסגנון, כגון סריף ו-sans serif. שינויים אחרים, כגון נטוי, עשויים אף הם לשחק תפקיד.
שים לב איך אוזניות משפיע על סדר ההיררכיה של המילים בעיצוב האינטרנט להלן עבור The Tea Factory: "תה מושלם שיעזור לך להתחמם" הוא שם המשחק, אבל הבדלים במשקל הגופן והנטות, בנוסף למיקום המילים, יוצרים יותר חווית קריאה דינמית, פחות ליניארית. "://azbyka.com.ua/foto/tea-factory.jpg" />
במקרים מסוימים, המטרה היא להציג מגוון מידע כדחוף לא פחות. הגדרה של כולם באותו גודל ומשקל תבטיח שוויון, אבל גם תגרום לזה להיראות מונוטוני. בידול גופנים הוא דרך אחת להימנע מכך, כמו שער המגזין Trendi למטה. עקרונות של היררכיה חזותית
כאן, חמשת הטיזרים סביב הפריפריה של העמוד זהים בהיררכיה, אך משיגים גיוון על ידי שינוי שני גופנים מתאימים היטב - האחד סריף במשקל בינוני והשני בהיר אך גבוה ללא סריף.
5. צבע וגוון.
הנה עוד דבר לא מובן מאליו: צבעים בהירים בולטים בין צבעים עמומים או גוונים של אפור, בעוד שגוונים בהירים יותר נראים "רחוקים" יותר ובכך נופלים נמוך יותר בהיררכיה מאשר גוונים עשירים וכהים יותר. אתר Where Are They מעמיד ניגודיות של אור בהיר ותאורה אחורית צבעונית עם אפקט רשת שחור ולבן לאפקט של זוהר:
אתר גוגנהיים משתמש בצבע כדי להדגיש מידע חשוב כגון בחירת מיקום, רשימת תערוכות הנצפות כעת וקישורים לתערוכות מיוחדות. עקרונות של היררכיה חזותית
הגופן הטוב ביותר לאריזה מותאמת אישית
אתר האינטרנט של מוזיאון וויטני, לעומת זאת, קובע היררכיה בתוך גופן, משקל וטון אחד (שחור) באמצעות גוון (שמשמעותו הוספת לבן לגוון הבסיס, הפיכתו לבהיר יותר). "Cory Archangel on Pop Culture" נמצא בבירור מתחת ל"New on Whitney Stories" בהיררכיה החזותית, לא רק בגלל שהוא נמוך יותר, אלא גם בגלל שהגוון שלו בהיר יותר, מה שהופך אותו פחות בולט על הרקע הלבן. עקרונות של היררכיה חזותית
לצבע יש משמעות מיוחדת ב עיצוב נייד יישומים שבהם גודל מסך קטן מגביל את יכולתך להשתמש באסטרטגיות אחרות כגון שונות בגודל ומרווח רחב. באפליקציית Grainger Industrial Supply, כפתור "המשך לקופה" נצבע באדום, מה שהופך אותו לבלוט בכל עמוד בו הוא מופיע. חלונית תוצאות החיפוש המצומצמת, לעומת זאת, היא אפורה, מה שהופך אותה לשווה ערך בהיררכיה לאלמנטים אחרים כגון סרגל החיפוש וקישורי מוצרים.
עיצוב אפליקציה עבור Grainger
6. כיוון למעצבים.
פריסות עמודים מתוכננות בדרך כלל לעקוב אחר רשת של קווים אנכיים ואופקיים, הן על פי מוסכמה והן משום שזהו הפורמט הקריא ביותר. במערכת כזו יש דרך חדשה לבסס היררכיה: שבירת הרשת.
טקסט הממוקם לאורך עקומה או אלכסון בולט אוטומטית מול הטקסט החסום ברשת שמסביב, ותופס את מרכז הבמה. זו כבר מזמן אסטרטגיה יעילה בפרסום, כמו כרזת תחנת האוטובוס של Frost Design.
השאירו תגובה