Công cụ xem trước thiết kế mặt đồng hồ Garmin
Thiết kế và xem trước mặt đồng hồ tròn với giờ, ngày, số bước và nhịp tim. Chọn bảng màu tối, kiểm tra độ tương phản WCAG để đảm bảo dễ đọc, và tải thiết kế xuống dưới dạng ảnh PNG.
Xem trước thiết kế mặt đồng hồ Garmin
Thiết kế một mặt đồng hồ tròn theo phong cách công sở và xem thay đổi ngay khi bạn chỉnh sửa. Chọn bảng màu tối, đặt số liệu mẫu, kiểm tra độ tương phản và tải kết quả xuống dưới dạng ảnh PNG.
Độ tương phản với nền
Theo WCAG 2.1, tỷ lệ tối thiểu là 3:1 đối với chữ lớn và 4.5:1 đối với chữ nhỏ hơn. Tỷ lệ càng cao càng dễ đọc dưới ánh nắng.
Tài liệu hướng dẫn
Công cụ này xem trước một mặt đồng hồ tròn ngay trong trình duyệt. Nó vẽ bố cục theo phong cách công sở gồm giờ, ngày, số bước và nhịp tim, và mỗi thành phần đều có thể đổi màu. Bản xem trước cập nhật ngay khi màu sắc thay đổi, và thiết kế hoàn chỉnh có thể được tải xuống dưới dạng ảnh PNG.
Đây chỉ là công cụ xem trước thiết kế. Nó không kết nối với đồng hồ và không tạo ra mặt đồng hồ có thể cài đặt được.
Bản xem trước hiển thị những gì
Mặt đồng hồ sử dụng bố cục mà hầu hết các mặt đồng hồ tròn đều áp dụng:
- ngày ở phía trên cùng
- giờ cỡ lớn ở giữa
- số bước và nhịp tim nằm cạnh nhau bên dưới
- viền đồng hồ có vạch chia giờ quanh mép
Số liệu mẫu có thể thay đổi để đánh giá thiết kế bằng những con số thực tế. Số bước bốn chữ số chiếm nhiều chỗ hơn số hai chữ số, và đồng hồ 12 giờ có thêm ký hiệu AM hoặc PM.
Vì sao dùng bảng màu tối
Hầu hết đồng hồ Garmin tròn dùng màn hình memory-in-pixel hoặc OLED. Trên màn hình OLED, nền tối tiêu thụ ít điện hơn vì các điểm ảnh đen được tắt hẳn. Mặt đồng hồ tối cũng dễ đọc hơn dưới ánh nắng gắt, nơi nền sáng dễ gây chói.
Các bảng màu có sẵn ở đây đều tối vì lý do đó. Người dùng vẫn có thể chọn nền sáng, và công cụ sẽ cảnh báo rằng lựa chọn này khác với thông lệ thông thường.
Độ tương phản và khả năng đọc
Đồng hồ thường được xem lướt qua, nhiều khi trong điều kiện thiếu sáng hoặc khi đang di chuyển, nên độ tương phản quan trọng hơn so với trên điện thoại. Công cụ đo độ tương phản giữa mỗi thành phần và nền bằng công thức WCAG 2.1.
Tỷ lệ này so sánh độ sáng tương đối của hai màu:
contrast = (L1 + 0.05) ÷ (L2 + 0.05)
L1 là độ sáng của màu sáng hơn và L2 là độ sáng của màu tối hơn. Kết quả chạy từ 1:1, nghĩa là hai màu giống hệt nhau, đến 21:1 đối với đen trên nền trắng.
Có hai ngưỡng cần biết:
- 3:1 là mức tối thiểu cho chữ cỡ lớn
- 4.5:1 là mức tối thiểu cho chữ cỡ thường
Giờ hiển thị cỡ lớn nên về lý thuyết 3:1 là đủ, nhưng tỷ lệ cao hơn sẽ tốt hơn khi ở ngoài trời. Các nhãn nhỏ hơn nên đạt 4.5:1 trở lên.
Ví dụ
Lấy nền màu #0b1020, một màu xanh navy rất tối, cùng chữ trắng #ffffff. Độ tương phản khoảng 18:1, dễ đọc trong mọi điều kiện ánh sáng.
Đổi màu số bước thành #2a3a5e, một màu xanh gần với màu nền, tỷ lệ giảm xuống còn khoảng 1.6:1. Lúc này con số gần như không nhìn thấy được ở khoảng cách cánh tay, và công cụ sẽ cảnh báo điều đó.
Tải thiết kế xuống
Nút tải xuống chuyển bản xem trước trực tiếp thành ảnh PNG kích thước 320x320 pixel. Ảnh được tạo ngay trong trình duyệt; không có gì được tải lên. Tệp này có thể dùng làm bản phác thảo, chia sẻ để lấy ý kiến, hoặc giữ làm tài liệu tham khảo khi xây dựng mặt đồng hồ thật bằng công cụ Connect IQ của Garmin.
Câu hỏi thường gặp
Công cụ này có tạo ra mặt đồng hồ để cài đặt được không?
Không. Nó chỉ tạo ra một hình ảnh của thiết kế. Để tạo mặt đồng hồ có thể cài đặt, cần dùng Connect IQ SDK của Garmin hoặc Garmin Watch Face Builder.
Vì sao bản xem trước là hình vuông trong khi đồng hồ là hình tròn?
Ảnh là một khung vẽ hình vuông với mặt đồng hồ tròn được vẽ bên trong, đây là cách các hình ảnh mặt đồng hồ thường được tạo ra. Các góc đơn giản là không hiển thị trên đồng hồ.
Mặt đồng hồ thật nên có kích thước bao nhiêu?
Điều này tùy thuộc vào từng dòng máy. Các màn hình Garmin tròn phổ biến có kích thước 240x240, 260x260 và 416x416 pixel. Bản xem trước dùng 320x320 làm mức trung bình.
Vì sao màu của tôi trông khác trên đồng hồ?
Màn hình đồng hồ khác nhau về độ sáng và khả năng tái tạo màu, và màn hình memory-in-pixel chỉ hiển thị được bảng màu giới hạn. Hãy coi bản xem trước là hướng dẫn tham khảo, rồi kiểm tra lại trên màn hình thật.
Các con số độ tương phản có ý nghĩa gì?
Đó là các tỷ lệ theo tiêu chuẩn trợ năng WCAG 2.1, cùng thước đo được dùng cho các trang web. Số càng cao thì càng dễ đọc.