סגנון

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

לפני תכנון של פריסות בהתאמה אישית, השתמשו בפריסות של CardBuilder שסופקו על ידי GDK כדי לספק למשתמשים חוויית משתמש עקבית. אם אף אחת מהפריסות האלו לא עומדת בדרישות שלכם, בצעו את ההנחיות הבאות בעיצוב שלכם.

מדדים ורשתות

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

אזורים בכרטיס

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

תוכן ראשי

תוכן הטקסט הראשי של הכרטיס מופיע בגופן Roboto Light עם גודל מינימלי של 32 פיקסלים. תחום הגבולות הוא מרווח פנימי. טקסט בגודל 64 פיקסלים ומעלה משתמש ב-Roboto Thin.


תמונה בגלישה מלאה

תמונות מניבות את התוצאות הטובות ביותר כשצריך למלא את כל הדף, והן לא מצריכות מרווח של 40 פיקסלים שנדרש לטקסט.


ריפוד

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

כותרת תחתונה

בכותרת התחתונה מופיעים פרטים נוספים לגבי הכרטיס, כמו מקור הכרטיס או חותמת זמן. צבע הכותרת התחתונה של הטקסט הוא 24 פיקסלים, רובוט רגיל וצבע לבן (#index).


תמונה או עמודה משמאל

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

תבניות פריסה

ה-GDK מספק פריסות של CardBuilder שונות שתוכלו להשתמש בהן.

צבע

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

מחלקת CSS ערך RGB
white ‎#ffffff
gray #808080
blue #34a7ff
red #cc3333
green #99cc33
yellow #ddbb11

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

טיפוגרפיה

Glass מציג את כל טקסט המערכת בגופן Roboto Light, Roboto Standard או Roboto Thin, בהתאם לגודל הגופן. אם אתם יוצרים כרטיסים בשידור חי או סרטונים סוחפים, אתם יכולים להשתמש בטיפוגרפיה שונה כדי להעביר את המיתוג שלכם.

Roboto Light

רוב הטקסט בגופן זכוכית מוצג בגופן.

ABCDEFGHIJKLMN OPQRSTUVWXYZa bcdefghijklmnopqr stuvwxyz1234567 890!?/+-=()[#@$
%^&*<>:;”

>

רובוטית רגילה

Glass מציגה טקסט של הערת שוליים בגופן זה.

ABCDEFGHIJKLMNOPQRST UVWXYZabcdefghijklmnopq rstuvwxyz1234567890!?/+-=
()[#@$%^&*<>:;"

רובוט דק

זכוכית מציגה טקסט גדול יותר (64 פיקסלים ומעלה) בגופן זה.

ABCDEFGHIJKLMNOPQ RSTUVWXYZabcdefghij klmnopqrstuvwxyz1234 567890!?/+-=()[#@$%^ &*<>:;”

שינוי גודל של טקסט דינמי

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

כתיבה

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

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

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

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

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

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