يتميّز Glass بنمط فريد، لذلك فإننا نقدم لك نماذج بطاقات قياسية ومجموعة ألوان نقية وأنماط طباعة وإرشادات توجيهية يمكنك اتباعها، إن أمكن.
قبل تصميم أي تنسيقات مخصصة، استخدم تنسيقات CardBuilder المتاحة من خلال GDK لتوفر للمستخدمين تجربة متسقة للمستخدم. إذا لم تستوفِ أي من هذه التنسيقات متطلباتك، فاتبع الإرشادات أدناه في تصميمك.
المقاييس والشبكات
تشتمل واجهة مستخدم Glass على إرشادات قياسية للتنسيق والهوامش لأنواع مختلفة من بطاقات المخطط الزمني. تحتوي البطاقات عادةً على المناطق العامة التالية، وقد وضعنا بعض الإرشادات التي يجب اتباعها للحصول على مجموعة عامة من البطاقات.
مناطق البطاقات
يحدد تطبيق Glass أبعاد مجموعة من المناطق المشتركة لتسهيل تصميم مختلف البطاقات وعرضها بشكل متناسق.
| المحتوى الرئيسي يجب أن يكون حجم محتوى النص الرئيسي للبطاقة ضِمن Roboto Light وبحدٍ أدنى للحجم يبلغ 32 بكسل، ومحاطًا بحشوة. يستخدم النص الذي يبلغ حجمه 64 بكسل أو أكثر Roboto Thin. صورة تجاوزت الهوامش بشكلٍ كامل تحقّق الصور أداءً أفضل عند تجاوز الهوامش بشكل كامل ولا تتطلّب مساحة متروكة بحجم 40 بكسل يتطلبها النص. المساحة المتروكة تتضمّن بطاقات المخطط الزمني مساحة 40 بكسل من جميع جوانب المحتوى النصي. ويتيح هذا لمعظم المستخدمين رؤية المحتوى بوضوح. |
تذييل الصفحة يعرض التذييل معلومات إضافية عن البطاقة، مثل مصدر البطاقة أو طابع زمني. نص التذييل هو 24 بكسل، وRoboto عادي، وأبيض (#ffffff) في اللون. العمود أو الصورة اليسرى تتطلب الصورة أو الأعمدة اليمنى إجراء تعديلات على المساحة المتروكة ومحتوى النص. |
نماذج التنسيق
يقدم GDK العديد من تنسيقات CardBuilder التي يمكنك استخدامها.
اللون
تعرض Glass معظم النص باللون الأبيض وتستخدم الألوان القياسية التالية للإشارة إلى الحاجة المُلحّة أو الأهمية. يمكنك استخدام هذه الألوان لبطاقات المخطط الزمني أيضًا:
| فئة CSS | قيمة نموذج أحمر أخضر أزرق |
|---|---|
white |
#ffffff |
gray |
#808080 |
blue |
#34a7ff |
red |
#cc3333 |
green |
#99cc33 |
yellow |
#ddbb11 |
يستخدم المثال التالي الألوان للإشارة إلى معلومات مهمة حول خطوط القطارات وحالتها.
فن الطباعة
يعرض Glass نص النظام بكامله باستخدام Roboto Light أو Roboto Regular أو Roboto Thin حسب حجم الخط. إذا أردت إنشاء بطاقات تفاعلية أو بطاقات تفاعلية، فلا تتردد في استخدام أسلوب طباعة مختلف للتعبير عن علامتك التجارية.
Roboto Light
يعرض Glass معظم النص في هذا الخط.
ABCDEFGHIJKLMN
OPQRSTUVWXYZa
bcdefghijklmnopqr
stuvwxyz1234567
890!?/+-=()[]#@$
%^&*<>:;"
روبوت روبوت عادي
يعرض Glass نص الحاشية السفلية بهذا الخط.
ABCDEFGHIJKLMNOPQRST
UVWXYZabcdefghijklmnopq
rstuvwxyz1234567890!?/+-=
()[]#@$%^&*<>:;"
روتو رقيق
يعرض Glass نصًا أكبر حجمًا (64 بكسل وما فوق) بهذا الخط.
ABCDEFGHIJKLMNOPQ RSTUVWXYZabcdefghij klmnopqrstuvwxyz1234 567890!?/+-=()[]#@$%^ &*<>:;"
تغيير حجم النص الديناميكي
عند استخدام التنسيقات
CardBuilder.TEXT
وCardBuilder.COLUMNS،
يستخدم Glass أكبر حجم ممكن للخط استنادًا إلى حجم المحتوى.
تعرض البطاقات التالية أمثلة لخصائص طباعة النص
بناءً على مقدار النص.
الكتابة
لديك مساحة محدودة للنص، لذا اتبع هذه الإرشادات عند كتابة نص لـ Glassware.
اجعله موجزًا. يجب أن يكون العنوان موجزًا وبسيطًا ودقيقًا. ابحث عن بدائل للنص الطويل، مثل قراءة المحتوى بصوت عالٍ أو عرض صور أو فيديوهات أو إزالة بعض الميزات.
الحفاظ على البساطة. لِنفترض أنّك تتحدث مع شخص ذكيّ وكفء، ولكنّه لا يعرف المصطلحات الفنية وقد لا يتكلّم اللغة الإنجليزية جيدًا. استخدم كلمات قصيرة وأفعالاً نشطة وأسماءً شائعة.
كن ودودًا. استخدام الانقباضات. تحدث إلى القارئ مباشرة باستخدام الشخص الثاني ("أنت"). إذا كان نصك لا يقرأ الطريقة التي تقولها في محادثة غير رسمية، من المحتمل ألا يكون هذا هو النص الذي يجب أن تكتبه به.
ضع أهم شيء أولاً. يجب أن تتضمّن أول كلمتين (حوالي 11 حرفًا، بما في ذلك المسافات) طعمًا على الأقل من المعلومات الأكثر أهمية في السلسلة. وإذا لم يكن الأمر كذلك، فابدأ من جديد. اشرح ما هو ضروري فقط، ولا حاجة إلى وصفه. لا تحاول توضيح الاختلافات الطفيفة. وسيتم فقدها مع معظم المستخدمين.
تجنّب التكرار. في حال تكرار عبارة مهمة ضمن شاشة أو جزء من النص، ابحث عن طريقة لاستخدامها مرة واحدة فقط.