Glass memiliki gaya yang unik, jadi kami menyediakan template kartu standar, palet warna, tipografi, dan panduan penulisan yang dapat Anda ikuti jika memungkinkan.
Sebelum mendesain tata letak kustom apa pun, gunakan Tata Letak CardBuilder yang tersedia yang disediakan oleh GDK untuk memberi pengguna pengalaman yang konsisten. Jika tidak satu pun tata letak ini memenuhi persyaratan Anda, ikuti panduan di bawah dalam desain.
Metrik dan Petak
Antarmuka pengguna Glass memiliki panduan tata letak dan margin standar untuk berbagai jenis kartu linimasa. Kartu biasanya memiliki wilayah umum berikut, dan kami telah menetapkan beberapa pedoman yang harus Anda ikuti untuk serangkaian kartu umum.
Region kartu
Glass menentukan dimensi untuk kumpulan region umum guna memudahkan desain dan tampilan kartu yang berbeda secara konsisten.
| Konten Utama Konten teks utama kartu ini ada di Roboto Light dengan ukuran minimum 32 piksel dan dibatasi oleh padding. Teks yang berukuran 64 piksel dan lebih besar menggunakan Roboto Thin. Gambar full bleed Gambar berfungsi optimal jika full-bleed dan tidak memerlukan padding 40 px yang diperlukan teks. Padding Kartu linimasa memiliki padding 40 piksel di semua sisi untuk konten teks. Hal ini memungkinkan sebagian besar orang melihat konten Anda dengan jelas. |
Footer Footer menampilkan informasi tambahan tentang kartu tersebut, seperti sumber kartu atau stempel waktu. Teks footer berukuran 24 piksel, Roboto Regular, dan berwarna putih (#ffffff) dalam warna. Gambar atau kolom kiri Gambar atau kolom kiri memerlukan modifikasi pada padding dan konten teks. |
Template tata letak
GDK menyediakan berbagai Tata Letak CardBuilder yang dapat Anda gunakan.
Warna
Glass menampilkan sebagian besar teks dalam warna putih dan menggunakan warna standar berikut untuk menunjukkan urgensi atau kepentingan. Anda juga dapat menggunakan warna ini untuk kartu linimasa:
| Kelas CSS | Nilai RGB |
|---|---|
white |
#ffffff |
gray |
#808080 |
blue |
#34a7ff |
red |
#cc3333 |
green |
#99cc33 |
yellow |
#ddbb11 |
Contoh berikut menggunakan warna untuk menunjukkan informasi penting tentang jalur kereta api dan status.
Tipografi
Glass menampilkan semua teks sistem dalam Roboto Light, Roboto Regular, atau Roboto Thin bergantung pada ukuran font. Jika Anda membuat kartu live atau imersif, jangan ragu untuk menggunakan tipografi yang berbeda untuk menyampaikan branding Anda sendiri.
Roboto Light
Glass menampilkan sebagian besar teks dalam font ini.
ABCDEFGHIJKLMN
OPQRSTUVWXYZa
bcdefghijklmnopqr
stuvwxyz1234567
890!?/+-=()[]#@$
%^&*<>:;”
Roboto Regular
Glass menampilkan teks catatan kaki dalam font ini.
ABCDEFGHIJKLMNOPQRST
UVWXYZabcdefghijklmnopq
rstuvwxyz1234567890!?/+-=
()[]#@$%^&*<>:;”
Roboto Thin
Glass menampilkan teks yang lebih besar (64 px dan lebih besar) dalam font ini.
ABCDEFGHIJKLMNOPQ RSTUVWXYZabcdefghij klmnopqrstuvwxyz1234 567890!?/+-=()[]#@$%^ &*<>:;”
Pengubahan ukuran teks dinamis
Saat menggunakan tata letak
CardBuilder.TEXT
dan
CardBuilder.COLUMNS, Glass menggunakan ukuran font sebesar mungkin berdasarkan jumlah konten.
Kartu berikut menampilkan contoh karakteristik tipografi teks
berdasarkan jumlah teks.
Penulisan
Anda memiliki ruang penyimpanan teks yang terbatas, jadi ikuti pedoman berikut saat menulis teks untuk Glassware.
Ringkas. Ringkas, sederhana, dan akurat. Cari alternatif untuk teks panjang seperti membaca konten dengan keras, menampilkan gambar atau video, atau menghapus fitur.
Jangan berbelit-belit. Berpura-pura berbicara dengan seseorang yang cerdas dan kompeten, tetapi tidak memahami jargon teknis dan mungkin tidak mengerti bahasa Inggris dengan baik. Gunakan kata-kata pendek, kata kerja aktif, dan kata benda umum.
Bersikaplah ramah. Gunakan singkatan. Bicara langsung dengan pembaca menggunakan orang kedua ("Anda"). Jika teks tidak dapat dibaca seperti dalam percakapan kasual, mungkin Anda tidak perlu menulisnya.
Tempatkan hal yang paling penting terlebih dahulu. Dua kata pertama (sekitar 11 karakter, termasuk spasi) harus menyertakan setidaknya rasa informasi paling penting dalam string. Jika tidak, mulailah dari awal. Deskripsikan hanya hal yang diperlukan, dan tidak lebih. Jangan coba menjelaskan perbedaan yang samar. Item akan hilang pada sebagian besar pengguna.
Hindari pengulangan. Jika istilah yang signifikan diulang dalam layar atau blok teks, temukan cara untuk menggunakannya sekali saja.