שימוש בדרך בני אדם תהליך מידע חזותי בעיצוב אינטרנט
עיצוב אתרים וממשקי משתמש הפכו להיות קלים יותר בשנים האחרונות. יש כל כך הרבה כלים שם בחוץ, כי אתה יכול להשתמש בו עושה את זה חסר טעם להתחיל מאפס בעת פיתוח ממשק משתמש (לבדוק את אוסף UI טריים שלנו). אבל אני לא כאן כדי להתווכח על מותו של עיצוב אתרים.
במקום זאת, מה שאני אעשה הוא לנסות להסביר את המושגים הבסיסיים, המבוססים על פסיכולוגיה, מאחורי שפע כלי העיצוב החזותי (מתוך ערכות CSS הבסיסיות ביותר לנושאים המתקדמים ביותר). אתה לא רק הולך להשתמש בהם, אלא גם להבין אותם. אני בטוח שזה גם יהיה קל יותר לשנות את אלה הקיימים בהצלחה גם כן.
בואו נסתכל על איך המוח האנושי והגוף עובד כשזה מגיע לעיבוד מידע חזותי וכיצד ידע זה מתפרש לתוך עיצוב עבור האינטרנט.
עקרונות הארגון התפיסתי
על פי הפסיכולוגיה של הגשטאלט, כל זה שונה מסכום חלקיו. חסידי אסכולה זו טוענים שישנם כמה עקרונות לגבי האופן שבו המוח האנושי מקבץ אובייקטים. אלו הן לא רק תיאוריות, אלא גם עובדות מעשיות בפועל על ארגון קבוצות חזותיות.
להלן תמצא את החוקים ואת השימושים הפופולריים יותר ידועה של עקרונות אלה. ייתכן אפילו שתוכל למצוא כמה רעיונות חדשים עבור העיצוב הבא שלך.
חוק הדמיון
העיקרון הראשון קובע כי חפצים קטנים הדומים נתפסים כקבוצה, ולא במספר מקרים של אותו אובייקט קטן. הדמיון עשוי להתבסס על צורה, צבע, הצללה או איכות אחרת. עיקרון זה הוא הבסיס עיצוב תבנית כמו גם עיצובים גיאומטריים רבים מינימליסטי לוגו.
לדוגמה, תמונה זו נראית כלוגו מעגלי במקום משולשים נפרדים. הצורה המשולשת בתחתית הנשר גורמת לנו לחשוב שגם הצורה היא חלק מהתמונה.
אתה כנראה גם ניצל את החוק הזה ביודעין בעת יצירת כמה, תיבות תוכן מובחרות בגודל זהה עבור אתר האינטרנט שלך. אם אתה רוצה להראות כי אלמנטים מסוימים התוכן הם בעלי חשיבות זהה או לשתף מידע דומה, ליצור צורה מסוימת רק למטרה זו. בדרך זו, המשתמש שלך יקשר מיד את הצורה המסוימת הזו עם אזור מסוים של מידע.
חוק הקרבה
על פי חוק זה חפצים קרובים יותר זה לזה הנחשבים לאותה קבוצה. אותם ריבועים, כשהם מוצגים זה ליד זה בסמיכות קרובה, יוצרים תחושה של קיבוץ.
עיקרון זה נוצל במידה רבה באינטרנט לאחרונה, במיוחד כאשר עובדים עם תוכן לולאות, למשל על בלוגים ו webshops.
ניתן מיד לקבץ את הכותרת, את התמונה בהשתתפות, את metadata ואת קטע יחד גם ללא גבולות או רקע. ייתכן שתוכל לטהר קווים מיותרים וצבעים מחוץ לעיצוב שלך כדי להפוך אותו מינימליסטי יותר, אך עדיין מובנת לחלוטין.
לנוחותך, אני מצטט גם את ויקיפדיה:
חוק של צורה טובה
החוק הידוע גם בשם חוק פראגנאן או גסטלט טוב, קובע כי אנו נוטים לקבץ אובייקטים יחדיו אם הם טופס דפוס פשוט, קבוע ומסודר. מוחנו מנסה להפריד בין צורות מורכבות וקשות מבחינה תפיסתית לקבוצות רבות של צורות מובנות פשוט; זה להוביל את חשיבותה של תמציתיות.
זו גם אחת הסיבות האפשריות מאחורי ההצלחה של עיצוב מבוסס רשת ואת זה עשה טבלה מבוססי מסגרת (למרבה המזל דברים של ימי הביניים כהה) אינטרנט מבנים כל כך פופולרי.
אם אתה שומר על עיקרון זה בראש אתה כנראה לא בסופו של דבר יצירת אתר מלא בצורות מורכבות של בלוקים תוכן זה יהיה מחובר בראש באמצעות חוקים אחרים לעיל. ובכל זאת, אתה יכול לקבץ את האובייקטים שלך בצורה מעניינת, למשל בצורת היהלום או העפיפונים, שכן אלה עדיין נתפסים כצורות מסודרות ומתמצות.
תיאוריית צבעים, תפיסה ושימוש
צבע הראייה ותפיסת הצבע היא סובייקטיבית במידה רבה מבוסס על איך המוחות של הצופים מגיבים אל גלי האור המשתקפים על ידי חפצים צבעוניים או צורות. הכלל הוא שאנשים שונים, אפילו ללא ליקויי ראייה לראות את אותו אובייקט בצבע שונה (אולי אתה זוכר את השמלה).
מאפייני צבע
עדיין ישנם שלושה מאפיינים אובייקטיביים של צבע; גוון, ערך ו אינטנסיביות.
גוון הוא שם של צבע כפי שכותרתו על גלגל צבע או קשת. ישנם שישה (או שתים עשרה, תלוי עם מי אתה מדבר) גוונים בסיסיים: אדום, כתום, צהוב, ירוק, כחול, ויולט.
צהוב, כחול ואדום ראשוני, כתום, ירוק וסגול הם משני hues; גם, יש שלישי גוונים שהם התערובות הישירות של שני גוונים ראשוניים ומשניים (לדוגמה, ירוק סגול או סגול אדום).
ערך הוא הקלילות או החושך של הצבע, המכונה ערך גבוה עבור צבעים בהירים או ערך נמוך עבור צבעים כהים.
אינטנסיביות מתייחס ל בהירות או עמעום של צבע; משמעות הדבר היא כי צבע עם אותו גוון ואת אותו ערך עדיין יכול להיות מעומעם או מוארת על ידי שינוי עוצמת ויצירת פלטי צבע שונים.
העוצמה הגבוהה ביותר של כל צבע היא הגוון הם מראים על גלגל הצבעים (ראה להלן), ואילו הנמוך ביותר הוא בצבע אפור.
צבע ניגודים
בהתייחסו לחוקי הדמיון שלעיל, המוחות של התופסים יוצרים קבוצות של אובייקטים קטנים שהם רואים על סמך מאפיינים דומים ושונים - לעתים קרובות צבעים.
כאשר בחרת את לוח הצבעים עבור האתר שלך, במיוחד אם אתה הולך על גישה מינימליסטית או אם אתה מעצב אזור תוכן כבד טקסט, למשל. בלוגים או מודעות, אתה צריך להיות מודע ניגודים צבע שונים שעשוי לסייע לך למצוא את ערכי הצבע הנכונים עבור התוצאה הטובה ביותר.
יש 7 ניגודים צבע לפי יוהנס איטן, אם כי אני רק אזכור 3.
1. ניגודיות של הגוון
צהוב, אדום וכחול בעוצמה מלאה הם ניגודים ישירים וחיים. גוונים משניים עושים הבחנה פחות חדה, אבל עדיין עובדים, בדיוק כמו גוונים שלישוני לעשות, אם כי לא לייצר כמו תוצאות מדהים כמו עם גוונים ראשוניים.
2. ניגודיות משלימה
שני צבעים הם בניגוד משלימים אם כאשר מעורבבים יחד הם יוצרים אפור ניטרלי. אלה נקראים גם זוגות מוזרים. אם הם סמוכים, הם מגבירים את החיות ואת האינטנסיביות, בזמן שהם מעורבים יחד הם מבטלים זה את זה. לכל צבע יש אחד ומשלים אחד בלבד; על גלגל הצבעים, זוגות הם באלכסון מול אחד לשני.
3. ניגודיות אור כהה
אם אתה רוצה להתנסות עם אתר בצבע אחד, באמצעות ערכים שונים של אותו גוון עשוי לייצר תוצאות מדהים. לעתים קרובות נעשה שימוש בעיצוב אינטרנט מינימליסטי, אתה יכול גם לייצר תוצאות מצוינות המבוססות על ניגודיות אור כהה אם אתה רוצה לספק אפשרויות צבע הנושא למשתמש שלך. ניגודיות זו משמשת גם לעיצוב גווני אפור.
אם אתה רוצה להמשיך את 4 הניגודים הנותרים צבע, אתה יכול למצוא אותם כאן.
יצירת לוחות ולבדוק ניגודים
לדעת את התיאוריה הוא נהדר, לפרש את הרעיונות שלך הוא דבר אחר לגמרי. אתה לא צריך לדאוג, האינטרנט מספק תמיכה מצוינת לצבע שלך ג 'אגלינג הצרכים. יש שפע של כלים המסייעים לך ליצור תבניות צבע מותאמות אישית המבוססות על כללי ניגודיות צבעים, למשל. פאלטון או Adobe Kuler.
למטרות אינטרנט, ייתכן שתרצה לבדוק ניגודים שבהם בחרת להשתמש ב- webAIM, באתר של ג'ונתן סנוק או להוריד מופע של ה- Color Contrast Analyzer על-ידי קבוצת Paciello כאן.
סיכום
כאשר אתה מתחיל לעבוד עם נושא חדש או להתחיל לשנות את הקיים, נסה לחשוב על העקרונות של תפיסה לארגן את התוכן שלך לזכור לזכור את הכללים צבע כאשר נותנים את העיצוב הסופי שלה צורה גוון.
הערת העורךYou הפוסט הזה נכתב עבור Hongkiat.com על ידי מרטון פקטה. מרטון הוא מפתח האתר ההונגרי לאחרונה מכור על וורדפרס. הוא מחדש נלהב סופר תוכן עצמאי שאוהב לשחק RPGs בזמנו הפנוי.
