תזרים עיצוב - פריסה ועבודות אמנות אשר מעבירה תנועה

Friday of 07

מהי זרימה חזותית?

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

זרימה חזותית יכולה להיות מושגת בדרכים רבות:

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

02 of 07

זרימת טקסט מערבית משמאל לימין

זרימה שגויה. התמונה באדיבות M קירנין

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

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

03 מתוך 07

הטקסט שלך צריך לזרום עם תמונות

תזרים נכון. התמונה באדיבות M קירנין

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

04 of 07

משמאל לימין שווה מהר

זרימה שגויה. התמונה באדיבות M קירנין

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

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

05 מתוך 07

אל תכריח את עין הצופה להאט

תזרים נכון. התמונה באדיבות M קירנין

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

06 מתוך 07

צפה בעינים בתמונות אינטרנט

זרימה שגויה. תמונה באדיבות J Kyrnin

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

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

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

07 מתוך 07

העיניים בכל תמונה צריך להתמודד עם התוכן

תזרים נכון. תמונה באדיבות J Kyrnin

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

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

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