Trang này giải thích các trường hợp sử dụng nâng cao hơn cho Watch Face Designer, bao gồm cả cách thêm chế độ hỗ trợ cho mặt số phụ, các chức năng và giao diện màu. Để tìm hiểu thêm về cách bắt đầu, hãy xem hướng dẫn kiến thức cơ bản.
Mặt số phụ
Bạn có thể tạo kim đồng hồ kim xoay trong một phần của mặt đồng hồ, giống như mặt số phụ trên đồng hồ đeo tay thực.
Để thực hiện điều này, vui lòng hoàn thành các bước sau:
Tạo một khung trống bao phủ khu vực mà bạn đã đặt mặt số phụ trong thiết kế:
Hình 1: Khung trống bao phủ một khe cắm mặt số phụ Thiết kế kim giây bên trong khung này:
Hình 2: Thiết kế kim giây nằm trong một khung chứa Chọn khung mặt số phụ có kim giây. Sau đó, trong Watch Face Designer, hãy đặt Rotate around (Xoay quanh) thành "Layer center" (Tâm lớp):
Hình 3: Sau khi chọn khung chứa (bên trái), hãy chọn hành vi xoay kim giây (bên phải)
Chức năng
Để thêm một vị trí cho chức năng, hãy thêm một khung hình vào mặt đồng hồ. Trong khung này, hãy thiết kế giao diện của vị trí chức năng khi vị trí đó trống. Đây là thiết kế cơ bản cho các loại chức năng khác, chẳng hạn như biểu tượng và văn bản.
Có nhiều loại chức năng. Mặt đồng hồ của bạn cung cấp các mẫu cho từng loại và các ứng dụng trên đồng hồ của người dùng sẽ quyết định sử dụng mẫu nào và cung cấp dữ liệu nào cho chính chúng. Người dùng chọn ứng dụng nào sẽ xuất hiện trong khe chức năng nào.
Chọn khung chứa thiết kế cho vị trí chức năng. Sau đó, trong Watch Face Designer (Công cụ thiết kế mặt đồng hồ), hãy thay đổi Hành vi thành "Vị trí cho tiện ích". Quy trình này sẽ tạo một thành phần, có một biến thể (một thiết kế trống).
Áp dụng các loại khu vực hiển thị chức năng
Vì không hữu ích khi thêm một vùng chức năng chỉ hỗ trợ loại "trống", hãy thêm một loại khác. Trong cửa sổ Watch Face Designer, hãy nhấn vào + Support a new type (+ Hỗ trợ một loại mới) rồi chọn "Short text" (Văn bản ngắn). Văn bản ngắn là một loại vùng chức năng được hầu hết các ứng dụng hỗ trợ, cho thấy 2 nhãn nhỏ cùng với một biểu tượng.
Bước này tạo ra một biến thể khác để chúng ta thể hiện thiết kế cho loại mặt đồng hồ này. Chọn hàng "Văn bản ngắn" để chuyển đến hàng đó.
Khi bạn chỉnh sửa các lớp trong một mẫu mặt đồng hồ có thông tin, lựa chọn "Hành vi" sẽ xuất hiện. Lựa chọn này tương tự như lựa chọn trên mặt đồng hồ, nhưng ở đây, bạn có thể chọn những hành vi dành riêng cho loại chức năng mà bạn đang chỉnh sửa.
Trong ví dụ này, các lớp bên trong một chức năng văn bản ngắn có thể là tiêu đề, văn bản hoặc biểu tượng một màu của ứng dụng. Một màu có nghĩa là biểu tượng sẽ kế thừa màu mà bạn đặt cho biểu tượng đó trong Figma.
Sau khi bạn tạo một hình chữ nhật ở vị trí bạn muốn biểu tượng ứng dụng xuất hiện trên mặt đồng hồ, hãy chuyển đến cửa sổ Watch Face Designer (Trình thiết kế mặt đồng hồ) rồi đặt Behavior (Hành vi) thành "Single-color icon" (Biểu tượng một màu):
Tiếp theo, hãy tạo 2 lớp văn bản. Các lớp này đại diện cho 2 vị trí "văn bản ngắn" khác: một cho tiêu đề và một cho văn bản:
Bản xem trước cho thấy cách các thành phần kết hợp với nhau. Ví dụ này cho thấy giao diện của một tiện ích nếu ứng dụng lịch được chỉ định cho vị trí này.
Để hiển thị văn bản bằng tất cả các ký tự viết hoa, như trong hình ảnh sau, hãy sử dụng tính năng phân biệt chữ hoa chữ thường trong trình đơn Kiểu chữ của Figma.
Xin lưu ý rằng không giống như thời gian kỹ thuật số, không có hoạt động xuất phông chữ tuỳ ý nào cho văn bản tiện ích. Các chức năng luôn được vẽ bằng phông chữ hệ thống của thiết bị Wear OS. Phông chữ này có thể khác nhau nhưng thường là Roboto.
Để thêm chế độ hỗ trợ cho các loại chức năng khác hoặc tuỳ chỉnh các chế độ cài đặt liên quan như Ứng dụng mặc định hoặc liệu khe cắm có xuất hiện khi đồng hồ ở chế độ xung quanh hay không, hãy chọn khe cắm chức năng trong mặt đồng hồ:
Cách phối Màu
Trong mặt đồng hồ, bạn có thể đưa vào nhiều lựa chọn cho chủ đề màu sắc. Sau đó, người dùng có thể chọn giao diện mà họ muốn bằng bộ chọn mặt đồng hồ trên đồng hồ.
Watch Face Designer hỗ trợ các giao diện màu bằng kiểu Figma.
Hãy cân nhắc trường hợp mà bạn muốn cho phép người dùng tuỳ chỉnh màu sắc của kim đồng hồ và mặt số cho mặt đồng hồ sau:
Tạo kiểu đầu tiên
Để tạo một kiểu màu có thể tuỳ chỉnh trên đồng hồ, hãy tạo một kiểu mới:
- Bỏ chọn mọi thứ trên canvas.
- Trong thanh bên phải, bên cạnh Kiểu, hãy chọn nút +.
Bạn phải đặt tên theo một cách cụ thể:
Watch Face Name/Element Family Name/Descriptive Color Name/Specific Element Name
Trong trường hợp này, tên của mặt đồng hồ mẫu là Bauhaus, vì vậy, màu bắt đầu bằng tên đó, theo sau là Hands, đây là phần tử mà người dùng có thể tuỳ chỉnh.
Sau đó, hãy đặt một tên màu mô tả, chẳng hạn như Charcoal, và chỉ định phần tử cụ thể nào (kim giờ) cần thay đổi màu.
Kết hợp tất cả lại với nhau, tên cuối cùng là: Bauhaus/Hands/Charcoal/Hours:
Làm theo quy trình tương tự để tạo một giao diện màu tuỳ chỉnh cho kim phút:
Cuối cùng, hãy chỉ định các màu này cho kim thực tế xuất hiện trên mặt đồng hồ:
Bauhaus/Hands/Charcoal/Minutes cho kim phút của mặt đồng hồThêm một kiểu khác
Tạo một kiểu mới bằng cách thay đổi phần Theme Name của kiểu. Ví dụ sau đây sẽ thêm một kiểu mới có tên là Rust (Bauhaus/Hands/Rust/Hours):
Sau đó, người dùng có thể chuyển đổi giữa các giao diện màu "Than" và "Gỉ sắt" trên thiết bị của họ, đồng thời kim giờ và kim phút trên mặt đồng hồ của bạn sẽ được tô lại màu cho phù hợp:
Áp dụng cho các phần tử khác
Làm theo các bước tương tự để tạo chủ đề cho các phần tử khác của mặt đồng hồ. Bạn có thể kết hợp các giao diện này và sử dụng bất kỳ số lượng kiểu màu nào để tạo các giao diện phức tạp có thể hoán đổi:
Với bộ kiểu nêu trên, bạn đã cung cấp 2 lựa chọn cho kim (Rust và Charcoal) và 3 lựa chọn cho mặt số (Light, Dark và Duotone):
