Glass มีรูปแบบเป็นเอกลักษณ์ เราจึงมีเทมเพลตการ์ดมาตรฐาน ชุดสี แบบอักษร และหลักเกณฑ์การเขียนให้คุณปฏิบัติตามทุกครั้งที่ทําได้
ก่อนออกแบบเลย์เอาต์ที่กําหนดเอง ให้ใช้ CardBuilder Layouts ที่มีให้บริการจาก GDK เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่สอดคล้องกัน หากไม่มีเลย์เอาต์ใดตรงตามข้อกําหนดของคุณ ให้ทําตามหลักเกณฑ์ด้านล่างในการออกแบบ
เมตริกและตารางกริด
อินเทอร์เฟซผู้ใช้ของ Glass มีหลักเกณฑ์การจัดวางและระยะขอบมาตรฐานสําหรับการ์ดไทม์ไลน์ประเภทต่างๆ โดยปกติแล้ว การ์ดจะมีเขตทั่วๆ ไปดังต่อไปนี้ เราได้วางหลักเกณฑ์บางอย่างไว้ปฏิบัติตามสําหรับชุดการ์ดทั่วไป
เขตของการ์ด
Glass จะกําหนดขนาดของชุดภูมิภาคทั่วไปเพื่อให้ออกแบบและแสดงการ์ดต่างๆ ได้อย่างสอดคล้องกัน
| เนื้อหาหลัก เนื้อหาข้อความหลักของการ์ดอยู่ใน Roboto Light ที่มีขนาดขั้นต่ํา 32 พิกเซลและล้อมรอบด้วยระยะห่างจากขอบ ข้อความที่มีขนาดใหญ่กว่า 64 พิกเซลและใช้ Roboto Thin รูปภาพเต็มพื้นที่ รูปภาพจะทํางานได้ดีที่สุดเมื่อเต็มพื้นที่และไม่จําเป็นต้องใช้ระยะห่างจากขอบของข้อความขนาด 40 พิกเซล ระยะห่างจากขอบ การ์ดไทม์ไลน์มีระยะห่างจากขอบ 40 พิกเซลทุกด้านสําหรับเนื้อหาข้อความ วิธีนี้จะช่วยให้ผู้ชมส่วนใหญ่เห็นเนื้อหาของคุณได้อย่างชัดเจน |
ส่วนท้าย ส่วนท้ายจะแสดงข้อมูลเพิ่มเติมเกี่ยวกับการ์ด เช่น แหล่งที่มาของการ์ดหรือการประทับเวลา ข้อความส่วนท้ายคือ 24 พิกเซล Roboto regular และสีขาว (#="#) สี รูปภาพหรือคอลัมน์ด้านซ้าย ต้องแก้ไขการแก้ไขระยะห่างจากขอบและเนื้อหาข้อความด้านซ้าย |
เทมเพลตเลย์เอาต์
GDK มี LayoutBuilder Layouts มากมายที่คุณใช้ได้
สี
Glass แสดงข้อความส่วนใหญ่เป็นสีขาว และใช้สีมาตรฐานต่อไปนี้เพื่อแสดงความเร่งด่วนหรือความสําคัญ คุณใช้สีต่อไปนี้กับการ์ดไทม์ไลน์ได้ด้วย
| คลาส CSS | ค่า RGB |
|---|---|
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!?/+-=()[]#@$
%^&*<>:;"
Roboto แบบธรรมดา
Glass จะแสดงข้อความเชิงอรรถในแบบอักษรนี้
ABCDEFGHIJKLMNOPQRST
UVWXYZabcdefghijklmnopq
rstuvwxyz1234567890!?/+-=
()[]#@$%^&*<>:;"
Roboto Thin
Glass แสดงข้อความขนาดใหญ่ขึ้น (64 พิกเซลขึ้นไป) ในแบบอักษรนี้
ABCDEFGHIJKLMNOPQ RSTUVWXYZabcdefghij klmnopqrstuvwxyz1234 567890!?/+-=()[]#@$%^ &*<>:;"
การปรับขนาดข้อความแบบไดนามิก
เมื่อใช้เลย์เอาต์ CardBuilder.TEXT และ CardBuilder.COLUMNS Glass จะใช้ขนาดแบบอักษรที่ใหญ่ที่สุดโดยอิงตามจํานวนเนื้อหา
การ์ดต่อไปนี้แสดงตัวอย่างลักษณะการสะกดของข้อความตามปริมาณข้อความ
การเขียน
คุณมีพื้นที่จํากัดสําหรับข้อความ ดังนั้นต้องปฏิบัติตามหลักเกณฑ์เหล่านี้เมื่อเขียนข้อความสําหรับ Glassware
เขียนให้สั้นกระชับ คุณจึงควรใช้ชื่อที่กระชับ เรียบง่าย และแม่นยํา มองหาตัวเลือกสําหรับข้อความขนาดยาว เช่น การอ่านเนื้อหาแบบอ่านออกเสียง การแสดงรูปภาพหรือวิดีโอ หรือนําฟีเจอร์ออก
ทําให้เรียบง่าย สมมติว่าคุณกําลังพูดคุยกับผู้ที่ฉลาดและรอบรู้ แต่ไม่ทราบคําศัพท์เฉพาะทางและอาจสื่อสารภาษาอังกฤษได้ไม่มากนัก ใช้คําสั้นๆ คํากริยาที่ใช้งานอยู่ และคํานามทั่วไป
เป็นมิตร ใช้การหด พูดคุยกับผู้อ่านโดยตรงโดยใช้บุคคลที่ 2 ("คุณ") หากข้อความไม่อ่านตามวิธีพูดในการสนทนาทั่วไป ก็อาจไม่ใช่วิธีที่เหมาะสมในการเขียนข้อความ
ให้ความสําคัญกับสิ่งที่สําคัญที่สุดก่อน คํา 2 คําแรก (ประมาณ 11 อักขระ รวมถึงการเว้นวรรค) ควรประกอบด้วยรสชาติของข้อมูลที่สําคัญที่สุดในสตริงเป็นอย่างน้อย หากไม่ ให้เริ่มต้นใหม่ อธิบายเฉพาะข้อมูลที่จําเป็นเท่านั้น อย่าพยายามอธิบายความแตกต่างที่มีความละเอียดอ่อน แต่จะหายไปสําหรับผู้ใช้ส่วนใหญ่
หลีกเลี่ยงการกล่าวซ้ํา หากคําสําคัญซ้ํากันซ้ําภายในหน้าจอหรือบล็อกข้อความ ให้ค้นหาวิธีใช้เพียงครั้งเดียว