כדי לבחור את הצבעים עבור חנות Shopify, התחל משלושה תפקידים: בסיס נייטרלי המקל על הקריאה, צבע עיקרי המבטא את המותג וצבע מבטא השמור לפעולות חשובות פלטה יעילה מכילה מעט צבעים, נשארת עקבית בכל הדפים, ושומרת על ניגודיות מספקת הן בשולחן העבודה והן בנייד.
תן תפקיד ספציפי לכל צבע
צבע חייב לבצע פונקציה יציבה בממשק אם אותו כחול משמש רקע, קישור, כפתור משני והודעת שגיאה, המבקר כבר לא יודע על מה להסתכל.
צבעים ניטרליים
אוף-וויט, אפור בהיר מאוד, כחול כמעט שחור או אפור עמוק מבנה את הרקעים והטקסטים. הם תופסים את רוב העמוד ונותנים מקום לוויזואליה המופקת.
הצבע העיקרי
הוא מחבר את הלוגו, כותרות מסוימות, אלמנטים גרפיים ואזורים חזקים הוא חייב להישאר מזוהה מבלי לפלוש לכל החנות.
צבע מבטא
שמור אותו עבור כפתורים חשובים, תגים שימושיים או מידע עדיפות. נדירותו מעניקה לו השפעה רבה יותר מהרוויה שלו.
צבעים פונקציונליים
הצלחה, שגיאה, התראה, הפסקה או אימות חייבים להישאר מובנים הוסף תמיד טקסט או סמל: צבע לבדו אינו מספיק.
שיטה פשוטה בת שישה שלבים
אל תחליט מהלוגו לבד צבע מסוגנן על כרטיס ביקור יכול להפוך מעייף כאשר הוא מכסה מסך מלא בדוק את הפלטה עם כותרות אמיתיות, תמונות, מחירים, וריאציות וכפתורים.
שלוש דוגמאות לפלטות מאוזנות
דוגמאות אלו משמשות כנקודת מוצא השילוב הנכון תלוי במוצרים, בצילום, במיצוב ובצבעים שכבר מקושרים למותג.
פיכח פרימיום
כחול חצות, רקע בהיר מאוד ומבטא זהב מט מתאים למצגת יוקרתית אם הזהב נשאר דקורטיבי או מקבל טקסט כהה מספיק.
טבעי חם
ירוק עמוק, שנהב וטרקוטה פלטה זו עובדת היטב עם חומרים טבעיים, בתנאי שאתה משמר את הקריאות של טקסטים קטנים.
מודרני דינמי
כחול נייבי, כחול בהיר וכתום.כחול מארגן את הממשק; כתום מושך תשומת לב לפעולה שנבחרה, מבלי להופיע על כל רכיב.
מאמר מערכת מתוק
אנתרציט סגול, לבן ורדרד ופטל עמום. פלטה רכה נשארת מקצועית אם הטקסטים והכפתורים שומרים על הבדל ברור בבהירות.
ניגוד: הכלל שבא לפני האסתטיקה
לטקסט יומיומי, שאפו לפחות ליחס ניגודיות של 4.5:1 לטקסט גדול באמת, הסף המינימלי הוא 3:1. גם הסמלים, הגבולות והמידע החזותי הדרושים חייבים להישאר ניתנים להבדלה ספים אלו מגיעים מהמלצות ה-WCAG של ה-W3C.
| אלמנט | שליטה מומלצת | שגיאה תכופה |
|---|---|---|
| טקסט נפוץ | ניגודיות של לפחות 4.5:1 עם התחתית | אפור בהיר מדי על רקע לבן |
| כפתור ראשי | טקסט קריא, מתאר או צורה ניתנת לזיהוי | טקסט לבן על צבע בהיר בהיר מדי |
| קישור בפסקה | צבע מנוגד והדגשה או רמז אחר | ההבדל מורגש רק לפי צבע |
| הודעת שגיאה | צבע, סמל וטקסט מפורש | שדה המסומן רק בגבול אדום |
| מצב מקלדת | קו מתאר מיקוד גלוי לכל הרקעים | הפוקוס הוסר מסיבות אסתטיות |
כיצד ליישם פלטה ב-Shopify?
בעורך ערכות הנושא של Shopify, ערכות צבעים כוללות רקעים, טקסט, קישורים, גבולות וכפתורים. החל מספר דיאגרמות עקביות על קטעים תואמים במקום ליצור שילוב חדש עבור כל בלוק.
תרשים ברור ראשי
רקע לבן או בהיר מאוד, טקסט כהה, קישורים גלויים השתמש בו עבור רוב האוספים, דפי המוצר והתוכן.
דפוס כהה
שמור אותו בכותרת התחתונה, תוספת עריכה או קטע חזק. כפה טקסטים ותאים ברורים כדי לשמור על הצבע שלהם.
ערכת מבטא
השתמש בו מדי פעם להכרזה או קריאה לפעולה בדוק את כל המצבים: רגיל, ביקר, ריחף מעל, נכה והתמקד.
קופה עקבית
קח בחזרה את המותג מבלי לגבות את התשלום. contrast, הבנה של שדות והמשכיות עם החנות נשארים בראש סדר העדיפויות.
כדי להרחיב עבודה זו, התייעצו גם מדריך לחצני הפעולה ו המדריך לחוויית המובייל.
שגיאות שהופכות חנות לבלתי עקבית
הכפל מבטאים
שלושה צבעים בהירים המשמשים באותה עוצמה מתחרים זה בזה המבקר כבר לא יכול להבחין בין הכפתור, התג והמידע המשני.
צבע את כל הרקעים
התמונות המיוצרות מאבדות דיוק והדף הופך מעייף בסיס ניטרלי מספק בדרך כלל מסגרת יציבה יותר.
שינוי בהתאם לדפים
כפתור כחול בדף הבית, ירוק בכרטיס וכתום בסל מחליש את הלמידה החזותית של הקורס.
תשכחו ממצבים טכניים
יש לבדוק קישורים שביקרו בהם, לחצנים מושבתים, שגיאות, מוקדים וגרסאות נבחרות, במיוחד לאחר הוספת אפליקציה.
איזה שירות לבחור לפי הצורך?
רשימת תיוג לפני אימות הצבעים
- הפלטה כוללת בסיס, צבע עיקרי ומבטא.
- כל צבע שומר על אותו תפקיד בכל הדפים.
- הטקסט הנוכחי משיג ניגודיות מספקת עם הרקע שלו.
- הכפתורים נשארים קריאים בכל המצבים שלהם.
- קישורים אינם מזוהים רק לפי צבעם.
- הודעות שגיאה משתמשות גם בטקסט או בסמל.
- התמונות שהופקו נשארות נאמנות ומנותקות היטב מהרקע.
- סכימה כהה אינה כופה טקסט לבן על מפות אור.
- המזרן נשלט ברוחב 375 פיקסלים.
- קבלת הפנים, האוספים, הקלפים, הסל והקופה נבדקים.
שאלות נפוצות על Shopify Store Colors
בכמה צבעים כדאי להשתמש בחנות של Shopify?
שלושה תפקידים עיקריים מספיקים לעתים קרובות: בסיס ניטרלי, צבע מותג ומבטא גוונים נוספים יכולים לשמש עבור גבולות, רקעים משניים ומצבים פונקציונליים, מבלי להפוך לצבעים דומיננטיים חדשים.
איזה צבע נמכר הכי הרבה?
אין צבע מבטיח יותר מכירות בהירות של הצעה, נראות כפתור, ניגודיות ועקביות של עניין מסע יותר מאשר מה שנקרא צבע המרה אוניברסלי.
האם כפתור הוסף לסל חייב להיות ירוק?
מס 'מעל לכל, זה חייב להבדיל את עצמו מהסביבה, להישאר עקבי עם המותג ולהציג טקסט קריא.The אותו צבע פעולה צריך לשמור על אותו תפקיד בעמודים הראשיים.
אפשר להשתמש ברקע שחור על כל החנות?
כן, אם המוצרים, הטקסטים, השדות והמצבים האינטראקטיביים נשארים קריאים לחלוטין יקום אפל דורש יותר פקדים ועשוי להיות פחות מתאים לתצלומים או קטגוריות מסוימות.
אילו ניגודים יש לכבד עבור הטקסטים?
שאפו לפחות 4.5:1 לטקסט יומיומי ו-3:1 לטקסט גדול באמת. מידע פונקציונלי ואינדיקטורים חזותיים חשובים צריכים גם הם להישאר ניתנים להבחנה.
איך לשנות צבעים ב-Shopify?
פתח את עורך ערכת הנושא, ולאחר מכן את הגדרות ערכת הנושא ואת סעיף הצבעים. בהתאם לנושא, תוכל לנהל ערכות צבעים ולהחיל אותן על מקטעים תואמים.
האם עלינו להשתמש בצבעי הלוגו בדיוק?
מס 'הלוגו מספק בסיס, אבל הממשק צריך נייטרליים, ניגודים ומצבים פונקציונליים. כמה צבעי לוגו יכולים להישמר כמו מבטאים ולא רקעים עיקריים.
כיצד לבדוק פלטה חדשה מבלי לשבש את החנות?
עבוד על עותק של ערכת הנושא, החל את הפלטה על כמה תבניות מייצגות, ולאחר מכן בדוק מחשב, נייד, וריאציות, עגלת קניות, טפסים וקופה לפני העלייה לאוויר.
בנה פלטה ברורה לפני עיצוב החנות
SiteQuiVend יכול לנתח עקביות צבע, ניגודיות טקסט וכפתורים ויישום בדגמי Shopify העיקריים. המטרה היא לבחור את ההתערבות הנחוצה באמת, מתיקון ממוקד ועד שיפוץ גלובלי יותר.
