054-471-6138
054-471-6138
יצירת קשר
מסמך הנחיות לבונת האתרים · UI SYSTEM & STATE

UI INTELLIGENCE

מערכת הנחיות עיצוב ממשק - טיפוגרפיה, צבע, רשת, קומפוננטות ומצבים

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

מערכות עיצוב · טל שילון + נגישות · WCAG + רשת ומרווחים · טל שילון = שפת עיצוב עקבית וברת-בנייה
THE 3 LAYERS

שלוש שכבות ידע, שפה ויזואלית אחת

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

SYSTEM
מערכות עיצוב מוכרות
טל שילון · שפת רכיבים אחידה

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

מה זה נותן ⌄
✓סקאלת גדלים אחידה
✓מצבי אינטראקציה סטנדרטיים
✓גובה/הצללה כשפת עומק
✓מוטיבים חוזרים = פחות למידה
STANDARD · MEASURED
תקני נגישות וקריאות
WCAG 2.2 · Web Content Accessibility Guidelines

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

מה זה נותן ⌄
✓ניגודיות 4.5:1 לטקסט רגיל
✓מטרת לחיצה 44px לפחות
✓גודל טקסט מינימלי קריא
✓ממשק תקין למגוון עיוורון צבעים
GRID · PROPORTION
רשת, פרופורציה ומרווחים
טל שילון · סדר שמרגישים בלי מאמץ

רשת מתמטית, יחסי גודל עקביים ומרווחים שחוזרים על עצמם - מה שגורם לעמוד "להרגיש" מסודר בלי מאמץ.

מה זה נותן ⌄
✓סקאלת מרווחים בכפולות של 4/8px
✓יחס גובה-רוחב עקבי
✓יישור לעוגני רשת
✓קצב ויזואלי צפוי
HOW THE DOCUMENT WORKS

כל רכיב UI מקבל שני רבדים

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

STATIC
איך זה נראה במנוחה

צבע, טיפוגרפיה, מרווח, פרופורציה וגובה - הזהות הוויזואלית הבסיסית של הרכיב.

STATE
איך זה מגיב

default · hover · focus · active · disabled · loading - כל מצב מוגדר בפני עצמו, לא נגזר במקרה.

01
PART 1 · TYPOGRAPHY

היררכיה טיפוגרפית

כל הכותרות בעמוד נגזרות מגודל בסיס ומיחס קנה-מידה יחיד - כך שכל הרמות עומדות ביחס עקבי אחת לשנייה.

מחוון אינטראקטיבי · יחס קנה-המידה

גררו כדי לשנות את יחס הגדילה בין הרמות - מ-1.1 (עדין) עד 1.6 (דרמטי). כל הרמות מתעדכנות יחד.

1.1 עדין 1.6 דרמטי
כותרת עמוד - H1
כותרת קטע - H2
כותרת משנה - H3
טקסט גוף רגיל לקריאה שוטפת בממשק
יחס נוכחי: {{ scaleLabel }} · בסיס 16px
02
PART 2 · COLOR & CONTRAST

צבע כמובן, לא כקישוט

ניגודיות היא לא עניין של טעם - יש לה סף מספרי מדיד. בדקו איפה עובר הגבול בין קריא ללא-קריא:

בודק ניגודיות חי · WCAG

גררו את בהירות הטקסט על רקע כהה קבוע, וראו מתי הניגודיות עוברת את סף 4.5:1.

כהה בהיר
טקסט לדוגמה על הרקע הזה
יחס ניגודיות: {{ contrastRatio }}:1 {{ contrastBadge }}
1-2 צבעי מיתוג בלבד

צבע ראשי לפעולה, ואולי צבע משני להדגשה - לא יותר. שאר הפלטה היא ניואנסים ניטרליים.

צבע נושא משמעות קבועה

אדום=שגיאה, ירוק=הצלחה, כתום=אזהרה - בעקביות מלאה, לכל אורך המערכת.

לא מסתמכים על צבע בלבד

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

03
PART 3 · GRID & SPACING

רשת ומרווחים עקביים

כל מרווח בעמוד נבחר מסקאלה קבועה - 4, 8, 12, 16, 24, 32, 48px. אף פעם לא מספר "שנראה טוב" באקראי.
הדגמה · רשת 8px

הפעילו את הרשת ותראו שכל קומפוננטה מיושרת אליה.

{{ s.label }}
04
PART 4 · COMPONENTS & STATES

כפתור אחד, שישה מצבים

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

{{ stateDesc }}
05
PART 5 · ELEVATION & MOTION

עומק כשפת סדר-עדיפויות

הצללה עמוקה יותר = קרוב יותר למשתמש = חשוב יותר. עברו בין רמות העומק וראו איך זה מתורגם:

רכיב לדוגמה
{{ elevDesc }}
06
PART 6 · CONSISTENCY & TOKENS

אותה משמעות, ערך אחד

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

הדגמה · לוח כרטיסים
כרטיס A
רדיוס 6px
כרטיס B
רדיוס 18px
כרטיס C
רדיוס 2px
✗ שלושה רדיוסים, שלושה גווני ירוק, שלושה גדלי טקסט - כולם "כרטיס"
כרטיס A
token: radius-md
כרטיס B
token: radius-md
כרטיס C
token: radius-md
✓ ערך אחד לרדיוס, ערך אחד לצבע רקע, סקאלה אחת לטקסט - כל הכרטיסים מהמשפחה
THE DECISION CHAIN

כל הנחיה במסמך עוברת את השרשרת הזו

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

TOKENערך בסיס יחיד - צבע, גודל, רדיוס
↓
COMPONENTהטוקן נבנה לרכיב שלם ועקבי
↓
STATEלכל מצב אינטראקציה יש הגדרה
↓
ACCESSIBILITYניגודיות, גודל וקריאות עומדים בסף
↓
PERCEPTIONאיך העין קולטת את זה בפועל
↓
TRUSTממשק שנראה מקצועי - נחשב אמין
התוצאה הסופית
"תעשי ממשק יפה" ← שפת עיצוב UI שלמה וניתנת לחזרה

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

מבוסס על שלוש שכבות ידע · טל שילון · מומחה איקומרס