Glass có một phong cách riêng, vì vậy, chúng tôi cung cấp các mẫu thẻ tiêu chuẩn, bảng màu, kiểu chữ và nguyên tắc viết nội dung để bạn làm theo bất cứ khi nào có thể.
Trước khi thiết kế bất kỳ bố cục tùy chỉnh nào, hãy sử dụng Bố cục CardBuilder có sẵn do GDK cung cấp để cung cấp cho người dùng trải nghiệm người dùng nhất quán. Nếu không có bố cục nào trong số này đáp ứng yêu cầu của bạn, hãy làm theo các nguyên tắc dưới đây trong thiết kế của bạn.
Chỉ số và lưới
Giao diện người dùng Glass có nguyên tắc về bố cục và lề tiêu chuẩn cho nhiều loại thẻ tiến trình. Thẻ thường có các khu vực chung sau đây và chúng tôi đã trình bày một số nguyên tắc để bạn tuân theo cho một nhóm các thẻ chung.
Vùng thẻ
Glass xác định kích thước cho một tập hợp các khu vực phổ biến để giúp bạn dễ dàng thiết kế và hiển thị các thẻ khác nhau một cách nhất quán.
| Nội dung chính Nội dung văn bản chính của thẻ này là Roboto Light với kích thước tối thiểu là 32 pixel và bị chặn bởi khoảng đệm. Văn bản có kích thước 64 pixel trở lên sử dụng Roboto Thin. Hình ảnh tràn lề Hình ảnh hoạt động hiệu quả nhất khi tràn lề và không yêu cầu khoảng đệm 40px mà văn bản yêu cầu. Khoảng đệm Thẻ trên dòng thời gian có 40 pixel đệm ở tất cả các bên cho nội dung văn bản. Việc này cho phép hầu hết mọi người đều xem được nội dung của bạn một cách rõ ràng. |
Chân trang Chân trang bao gồm thông tin bổ sung về thẻ, chẳng hạn như nguồn của thẻ hoặc dấu thời gian. Văn bản chân trang có màu 24 pixel, Roboto rừng thường và màu trắng (#ffffff). Hình ảnh hoặc cột bên trái Hình ảnh hoặc cột bên trái yêu cầu sửa đổi khoảng đệm và nội dung văn bản. |
Mẫu bố cục
GDK cung cấp nhiều Bố cục CardBuilder mà bạn có thể sử dụng.
Màu
Kính hiển thị hầu hết văn bản có màu trắng và sử dụng các màu tiêu chuẩn sau đây để thể hiện mức độ cấp bách hoặc quan trọng. Bạn cũng có thể sử dụng những màu này cho thẻ trên dòng thời gian của mình:
| Lớp CSS | Giá trị RGB |
|---|---|
white |
#ffffff |
gray |
#808080 |
blue |
#34a7ff |
red |
#cc3333 |
green |
#99cc33 |
yellow |
#ddbb11 |
Ví dụ sau đây sử dụng màu sắc để biểu thị thông tin quan trọng về các tuyến tàu và trạng thái.
Kiểu chữ
Glass hiển thị tất cả văn bản hệ thống bằng Roboto Light, Roboto regular hoặc Roboto Thin, tuỳ thuộc vào kích thước phông chữ. Nếu bạn đang tạo thẻ trực tiếp hoặc video nhúng, hãy sử dụng các kiểu chữ khác nhau để truyền tải thương hiệu của riêng bạn.
Roboto Light
Glass hiển thị hầu hết văn bản ở phông chữ này.
ABCDEFGHIJKLMN
OPQRSTUVWXYZa
bcdefghijklmnopqr
stuvwxyz1234567
890!?/+-=()[]#@$
%^&*<>:;”
Roboto thường
Glass hiển thị văn bản chú thích cuối trang trong phông chữ này.
ABCDEFGHIJKLMNOPQRST
UVWXYZabcdefghijklmnopq
rstuvwxyz1234567890!?/+-=
()[]#@$%^&*<>:;”
Roboto Thin
Glass hiển thị văn bản lớn hơn (64 px trở lên) trong phông chữ này.
ABCDEFGHIJKLMNOPQ RSTUVWXYZabcdefghij klmnopqrstuvwxyz1234 567890!?/+-=()[]#@$%^ &*<>:;”
Đổi kích thước văn bản động
Khi sử dụng bố cục
CardBuilder.TEXT
và
CardBuilder.COLUMNS, Glass sử dụng kích thước phông chữ lớn nhất có thể dựa trên lượng nội dung.
Các thẻ sau đây cho thấy ví dụ về các đặc điểm kiểu chữ của văn bản dựa trên số lượng văn bản.
Viết
Bạn có không gian văn bản hạn chế, vì vậy, hãy tuân theo các nguyên tắc này khi viết văn bản cho Glassware.
Trả lời ngắn gọn. Hãy ngắn gọn, đơn giản và chính xác. Tìm các lựa chọn thay thế cho văn bản dài như đọc to nội dung, hiển thị hình ảnh hoặc video hoặc xóa các tính năng.
Đảm bảo tính đơn giản. Giả sử bạn đang nói chuyện với người thông minh và có năng lực, nhưng không biết thuật ngữ chuyên ngành và có thể không nói được tiếng Anh. Sử dụng các từ ngắn, động từ và danh từ chung.
Hãy thân thiện. Sử dụng tính năng rút gọn. Nói chuyện trực tiếp với độc giả bằng cách sử dụng ngôi thứ hai ("bạn"). Nếu văn bản không đọc theo cách bạn sẽ nói trong cuộc trò chuyện thông thường, thì có thể đó không phải là cách bạn viết.
Đưa việc quan trọng nhất lên trên. Hai từ đầu tiên (khoảng 11 ký tự, bao gồm cả dấu cách) phải chứa ít nhất một phần thông tin quan trọng nhất trong chuỗi. Nếu không, hãy bắt đầu lại. Chỉ mô tả những gì cần thiết và không mô tả những gì cần thiết nữa. Đừng cố gắng giải thích những khác biệt nhỏ. Hầu hết người dùng sẽ bị mất các tài khoản này.
Tránh lặp lại. Nếu một cụm từ quan trọng được lặp lại trong một màn hình hoặc khối văn bản, hãy tìm cách sử dụng cụm từ đó chỉ một lần.