Glass की एक अद्वितीय शैली है, इसलिए जब भी संभव होता है तब हम आपके लिए मानक कार्ड टेम्प्लेट, रंग पटल, टाइपोग्राफ़ी, और लेखन दिशा-निर्देश उपलब्ध कराते हैं.
कोई भी कस्टम लेआउट डिज़ाइन करने से पहले, उपयोगकर्ताओं को एक जैसा उपयोगकर्ता अनुभव देने के लिए, GDK से मिले उपलब्ध CardBuilder Layouts का इस्तेमाल करें. अगर इनमें से कोई भी लेआउट आपकी ज़रूरतों को पूरा नहीं करता है, तो अपने डिज़ाइन में नीचे दिए गए दिशा-निर्देशों का पालन करें.
मेट्रिक और ग्रिड
Glass के यूज़र इंटरफ़ेस में लेआउट और मार्जिन से जुड़े स्टैंडर्ड दिशा-निर्देश, अलग-अलग तरह के टाइमलाइन कार्ड के लिए हैं. आम तौर पर, कार्ड में इन सामान्य इलाकों को शामिल किया जाता है. साथ ही, हमने कार्ड से जुड़े कुछ दिशा-निर्देश बनाए हैं, जिन्हें फ़ॉलो करते हुए आपको कुछ सामान्य कार्ड दिखेंगे.
कार्ड वाले इलाके
Glass सामान्य क्षेत्रों के समूह के लिए आयाम परिभाषित करता है, ताकि आप आसानी से विभिन्न कार्ड डिज़ाइन और प्रदर्शित कर सकें.
| मुख्य कॉन्टेंट कार्ड का मुख्य कॉन्टेंट, रोबोटो लाइट में है. यह कम से कम 32 पिक्सल का है और इसे पैडिंग (जगह) से सीमित किया गया है. टेक्स्ट में 64 पिक्सल और इससे ज़्यादा साइज़ का टेक्स्ट, रोबोटो थिन का इस्तेमाल करता है. फ़ुल-ब्लीड इमेज इमेज तब बेहतर काम करती हैं, जब फ़ुल-ब्लीड सुविधा चालू हो. ऐसे में, 40 पिक्सल की पैडिंग की ज़रूरत नहीं होती. पैडिंग टाइमलाइन कार्ड में टेक्स्ट कॉन्टेंट के लिए, चारों तरफ़ 40 पिक्सल की पैडिंग होती है. इससे, ज़्यादातर लोग आपका कॉन्टेंट साफ़ तौर पर देख पाते हैं. |
फ़ुटर फ़ुटर में, कार्ड के बारे में ज़्यादा जानकारी दिखती है, जैसे कि कार्ड का सोर्स या टाइमस्टैंप. फ़ुटर टेक्स्ट 24 पिक्सल का है, रोबोटो रेगुलर, और सफ़ेद रंग का #GoogleDoodle. बाईं इमेज या कॉलम बाईं इमेज या कॉलम के लिए पैडिंग और टेक्स्ट कॉन्टेंट में बदलाव करना ज़रूरी है. |
लेआउट टेंप्लेट
GDK कई CardBuilder Layouts उपलब्ध कराता है, जिनका इस्तेमाल किया जा सकता है.
रंग
ग्लास ज़्यादातर टेक्स्ट को सफ़ेद रंग में दिखाता है और ज़रूरी रंगों या अहमियत को दिखाने के लिए इन स्टैंडर्ड रंगों का इस्तेमाल करता है. इन रंगों का इस्तेमाल अपने टाइमलाइन कार्ड के लिए भी किया जा सकता है:
| सीएसएस क्लास | आरजीबी वैल्यू |
|---|---|
white |
#ffffff |
gray |
#808080 |
blue |
#34a7ff |
red |
#cc3333 |
green |
#99cc33 |
yellow |
#ddbb11 |
नीचे दिए गए उदाहरण में, ट्रेन की लाइनों और स्थिति से जुड़ी अहम जानकारी देने के लिए, रंगों का इस्तेमाल किया गया है.
टाइपाेग्राफ़ी
ग्लास, सभी सिस्टम टेक्स्ट को फ़ॉन्ट साइज़ के हिसाब से, Roboto Light, Roboto रेगुलर या रोबोटो थिन में दिखाता है. अगर आप लाइव कार्ड या इमर्सन बना रहे हैं, तो अपनी ब्रैंडिंग को बेहतर तरीके से पेश करने के लिए अलग-अलग टाइपोग्राफ़ी का बेझिझक इस्तेमाल करें.
Roboto Light
इस फ़ॉन्ट में, ज़्यादातर टेक्स्ट ग्लास में दिखता है.
ABCDEFGHIJKLMN
OPQRSTUVWXYZa
bcdefghijklmnopqr
stuvwxyz1234567
890!?/+-=()[]#@$
%^&*<>:;”
रोबोटो नियमित
Glass इस फ़ॉन्ट में फ़ुटनोट टेक्स्ट दिखाता है.
ABCDEFGHIJKLMNOPQRST
UVWXYZabcdefghijklmnopq
rstuvwxyz1234567890!?/+-=
()[]#@$%^&*<>:;”
रोबोटो थिन
Glass इस फ़ॉन्ट में बड़ा लेख (64 px और ऊपर) प्रदर्शित करता है.
ABCDEFGHIJKLMNOPQ RSTUVWXYZabcdefghij klmnopqrstuvwxyz1234 567890!?/+-=()[#@$%^ &*<>:;”
डाइनैमिक टेक्स्ट का साइज़ बदलना
CardBuilder.TEXT
और
CardBuilder.COLUMNS
लेआउट का इस्तेमाल करते समय, Glass, कॉन्टेंट के हिसाब से सबसे बड़े फ़ॉन्ट साइज़ का इस्तेमाल करता है.
नीचे दिए गए कार्ड, टेक्स्ट की मात्रा के आधार पर, टेक्स्ट की टाइपोग्राफ़ी विशेषताओं के उदाहरण दिखाते हैं.
लिखना
आपके पास टेक्स्ट के लिए जगह सीमित है, इसलिए Glassware के लिए टेक्स्ट लिखते समय इन दिशा-निर्देशों का पालन करें.
इसे छोटा रखें. कम शब्दों का इस्तेमाल करें. यह आसान और सटीक होना चाहिए. लंबे टेक्स्ट के विकल्प देखें. जैसे, कॉन्टेंट को ज़ोर से पढ़ना, इमेज या वीडियो दिखाना या सुविधाएं हटाना.
इसे आसान रखें. मान लें कि आप किसी ऐसे व्यक्ति से बात कर रहे हैं जो चालाक और योग्य है, लेकिन उसे तकनीकी भाषा समझ नहीं आती और वह अंग्रेज़ी अच्छी तरह नहीं बोल सकता. छोटे शब्दों, ऐक्टिव कार्रवाइयों, और आम संज्ञाओं का इस्तेमाल करें.
फ़्रेंडली बनें. छोटा करें. दूसरे व्यक्ति (आप) का इस्तेमाल करके सीधे रीडर से बात करें. अगर आपका टेक्स्ट, बोले जाने वाले तरीके से नहीं बोला गया है, तो हो सकता है कि उसे टाइप न करे.
सबसे अहम चीज़ को सबसे पहले रखें. शुरुआती दो शब्दों (करीब 11 वर्णों के साथ) में स्ट्रिंग की कम से कम ज़रूरी जानकारी शामिल होनी चाहिए. अगर ऐसा नहीं है, तो फिर से शुरू करें. सिर्फ़ ज़रूरी चीज़ों के बारे में बताएं. बारीक अंतर को समझाने की कोशिश न करें. ज़्यादातर उपयोगकर्ताओं को वे नहीं देख पाएंगे.
दोहराव से बचें. अगर किसी खास शब्द की स्क्रीन पर या टेक्स्ट के ब्लॉक को दोहराया जाता है, तो उसे एक बार इस्तेमाल करने का तरीका ढूंढें.