צבע
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
אפשר ליצור ערכות צבעים אישיות ונגישות יותר, שמציגות את היררכיית המוצר, המצב שלו והמותג שלו. כשאתם מעצבים מכשירים לבישים, הצבע ממלא תפקיד חשוב בשיפור הקריאוּת, הנוחות, האטרקטיביות החזותית והביטוי, במיוחד במסכים קטנים יותר.
בעזרת העקרונות הבאים תוכלו להבין איך להשתמש בצבעים במגוון עיצובים.
פיתוח מצב שחור
השעונים תוכננו עם רקע שחור, במקום הרקע המצונן שמופיע במכשירי הטלפון. עיצובים כהים מיועדים לסביבות עם תאורה חלשה ועיצובים בהירים מיועדים לתאורה יום, אבל ממשקי המשתמש בשעונים צריכים לפעול בצורה חלקה גם ביום וגם בלילה. לכן, אסימוני צבע לשעונים צריכים להיות מותאמים במיוחד.
תפקידים חדשים בצבע
מערכת הצבעים של Material 3 שומרת על המבנה של שלושה צבעים עיקריים ושני צבעים ניטרליים לרקע, אבל מוסיפה צבעים של קונטיינרים לתפקידים של הצבעים העיקריים.
התפקידים החדשים האלה מאפשרים פוטנציאל ביטוי גדול יותר בלי לשבש את ההיררכיה החזותית, ובעצם מספקים וריאציות של צבע פני השטח עם צפיפות צבע גבוהה יותר.
תפקידים של קונטיינרים שימושיים במיוחד להדגשת מצבים, כמו לחצני החלפת מצב, או כדי לספק עיצוב משלים כשהסגנון העיקרי כבר נמצא בשימוש.
משמעות סמנטית
בממשקי המשתמש של השעונים, הצבעים צריכים להעביר את המשמעות בצורה ברורה ואינטואיטיבית. לדוגמה, אדום מציין שגיאות וירוק מציין הצלחה, וכך המשתמשים יכולים להבין במהירות פעולות או מצבים בלי צורך בהסברים נוספים. השימוש הסמנטי בצבע עוזר למשתמשים לנווט בממשק המשתמש ולבצע פעולות בביטחון.
נגישות של צבעים (תאימות לניגודיות)
בממשקי המשתמש של השעון, הצבעים צריכים להעביר את המשמעות בצורה ברורה ואינטואיטיבית. לדוגמה, אדום מציין שגיאות וירוק מציין הצלחה, וכך המשתמשים יכולים להבין במהירות פעולות או מצבים בלי צורך בהסברים נוספים. השימוש הסמנטי בצבע עוזר למשתמשים לנווט בממשק המשתמש ולבצע פעולות בביטחון.
מה חדש
יש עדכונים משמעותיים במערכת העיצוב החזותי ובאופן שבו אנחנו משפרים את הביטוי באמצעות עדכונים ביסודות הסגנון, ברכיבים ובספריות העיצוב של המשבצות.
מערכת הצבעים העשירה של Material 3 כוללת את התכונות הבאות:
- קבוצה מובנית של יחסי צבעים נגישים
- יותר מ-28 תפקידים של צבעים שממופים לרכיבי Material
- צבעים מובנים של עיצוב כהה ליצירה מצב שחור
- ערכי צבע משופרים של צבעים מושבתים
- צבעים נוספים של שגיאות
- צבע בסיס סטטי עם צבעים שמוגדרים כברירת מחדל לכל תפקיד צבע
- תכונות צבע דינמיות, כולל מערכת/תצוגת שעון ועיצובים של צבעים מבוססי-תמונה
משאבים
מידע נוסף זמין במקורות המידע הבאים.
הנחיות לבחירת צבעים ב-Material Design
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-26 (שעון UTC).
[null,null,["עדכון אחרון: 2025-07-26 (שעון UTC)."],[],[],null,["# Color\n\nCreate more accessible, personal color schemes communicating your product's\nhierarchy, state, and brand. When designing for wearables, color plays a crucial\nrole in enhancing legibility, usability, visual appeal, and expression,\nespecially on smaller screens.\n\nThe following principles explain how to use color across themes.\n\nBuild from black\n----------------\n\n\nWatches are designed with a black background, instead of the tinted background\nthat phone devices use. While dark themes are meant for low-light environments\nand light themes for daylight, watch UIs need to function seamlessly both day\nand night. Therefore, color tokens for watches must be specifically tailored. \n\n\u003cbr /\u003e\n\nNew color roles\n---------------\n\n\nThe Material 3 color system retains the structure of three accent colors and two\nneutral surface colors, but introduces container colors within the accent roles.\nThese new roles enable greater expressive potential without disrupting visual\nhierarchy, essentially providing surface color variations with increased chroma.\nContainer roles are particularly useful for highlighting states, such as toggle\nbuttons, or for providing complementary styling when the primary accent is\nalready utilized. \n\n\u003cbr /\u003e\n\nSemantic meaning\n----------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nColor accessibility (contrast compliance)\n-----------------------------------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nWhat's new\n----------\n\nThere are substantial updates to the visual design system and how we elevate\nexpression throughout updates to our style foundations, components, and tiles\ndesign libraries.\n\nThe Material 3 Expressive color system includes the following features:\n\n- Built-in set of accessible color relationships\n- 28+ color roles mapped to Material components\n- Built-in dark theme colors for building from black\n- Improved disabled color values\n- Additional error colors\n- Static baseline color with default colors assigned to each color role\n- Dynamic color features, including System/Watch face, and image-based color themes\n\nResources\n---------\n\nTo learn more, view the following resources.\n\n### Material Design color guidelines\n\n\n[Learn about the latest best practices](https://material.io/color) for color schemes using Material 3\nExpressive. \n\n\u003cbr /\u003e"]]
