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

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

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

1. גודל

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

2. גוון

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

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

3. בהירות

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

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

4. רוויה

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

5. מרקם (טקסטורה)

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

התפעול של המערכת עצמה הוא די פשוט. לאחר שנכנסים לאתר Portfoilio (דרך הדפדפן או דרך הפאנל הראשי של Creative Cloud), מתחברים למערכת באמצעות חשבון ה-Adobe האישי.

6. צורה

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

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

7. אוריינטציה

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

8. חלל לבן

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

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

9. משקל פיזי נתפש

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

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

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

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

הערה 1

השאר תגובה

Please enter your comment!
Please enter your name here