Hướng dẫn này giải thích cách tạo mặt đồng hồ, thêm các phần tử dựa trên thời gian và hỗ trợ ảnh do người dùng chọn, bao gồm cả một thư viện nhiều ảnh. Để biết thêm các tính năng khác, hãy xem hướng dẫn nâng cao.
Tạo mặt đồng hồ
Để tạo mặt đồng hồ, hãy vẽ một khung hình trong Figma, sau đó định cấu hình khung hình đó như sau:
Đặt kích thước của nó thành 450 đơn vị chiều rộng và 450 đơn vị chiều cao:
Hình 1: Bảng bố cục khung của Figma, cho thấy mặt đồng hồ 450x450 Các kích thước khác cũng hoạt động, nhưng bạn nên dùng kích thước 450x450 cho mặt đồng hồ Wear OS và bắt buộc phải dùng kích thước này để xuất sang Watch Face Studio.
Để có mặt đồng hồ tiết kiệm pin, hãy đặt màu nền của khung thành màu đen:
Hình 2: Bảng điều khiển tô khung hình cho thấy màu tô đen Đặt tên cho khung hình theo tên bạn muốn đặt cho mặt đồng hồ. Thông báo này sẽ xuất hiện trên đồng hồ của người dùng.
Sau khi tạo và định cấu hình khung, hãy mở trình bổ trợ Watch Face Designer rồi chọn khung bạn vừa tạo. Bản xem trước trực tiếp của mặt đồng hồ đó sẽ xuất hiện trong cửa sổ Watch Face Designer.
Thêm các phần tử vào mặt đồng hồ
Thêm một số thành phần vào mặt đồng hồ để người dùng có thể xem giờ.
Thời gian tương tự
Vẽ một hình chữ nhật, đóng vai trò là kim giây trên đồng hồ.
Xác minh rằng khi hiển thị thời điểm bắt đầu một phút mới, hình chữ nhật sẽ được căn giữa theo chiều ngang và cạnh dưới của hình chữ nhật nằm ở giữa mặt đồng hồ, giống như kim đồng hồ thực. Theo mặc định, Figma bật tính năng Snap to Geometry (Liên kết với hình học). Tính năng này sẽ hiển thị các đường dẫn màu đỏ để giúp bạn căn chỉnh hình chữ nhật này:
Tiếp theo, hãy cho Watch Face Designer biết rằng lớp này không chỉ dùng để trang trí. Chọn hình chữ nhật mà bạn đã vẽ ở bước trước, sau đó chuyển đến cửa sổ Watch Face Designer (Trình thiết kế mặt đồng hồ) và thay đổi Behavior (Hành vi) từ "Static" (Tĩnh) thành "Second hand" (Kim giây).
Lưu ý cách kim bắt đầu di chuyển mỗi giây một lần, mô phỏng tiếng tích tắc của đồng hồ. Bạn có thể điều chỉnh cách xoay nếu muốn, đồng thời có thể tạo kim phút và kim giờ tương tự như cách bạn tạo kim giây này.
Để biết thông tin về mặt số phụ, hãy xem hướng dẫn sử dụng nâng cao.
Giờ kỹ thuật số
Chúng ta cũng có thể hiển thị thời gian bằng định dạng kỹ thuật số. Để thực hiện việc này, hãy tạo một lớp văn bản trong Figma. Hiện tại, hãy nhập Hh:Mm:Ss làm nội dung văn bản của lớp.
Trong cửa sổ Watch Face Designer, hãy thay đổi Hành vi của văn bản từ "Tĩnh" thành "Thời gian kỹ thuật số". Bản xem trước cho thấy giao diện của thành phần này trên một thiết bị thực:
Để tìm hiểu về bộ ký tự có sẵn mà bạn có thể sử dụng, hãy làm theo hướng dẫn về mẫu xuất hiện trong thanh bên của cửa sổ Watch Face Designer (Trình thiết kế mặt đồng hồ). Ví dụ: a biểu thị thời gian hiện tại là "SA" hay "CH". Bạn có thể dùng tham số này với "định dạng giờ" để hiển thị thời gian 12 giờ.
Bạn có thể chọn bất kỳ phông chữ nào trong Figma, kể cả những phông chữ không có trong Wear OS. Phông chữ đó sẽ tự động được xuất và đi kèm với mặt đồng hồ. Xin lưu ý rằng mỗi phông chữ đều có các điều khoản cấp phép riêng để phân phối lại.
Xem trước ở nhiều thời điểm
Để xem mặt đồng hồ vào các thời điểm khác nhau trong ngày, bạn có thể điều chỉnh thời gian mà bản xem trước đang hiển thị bằng cách kéo thanh trượt ở cuối cửa sổ Watch Face Designer (Trình thiết kế mặt đồng hồ):
Khi xem trước xong các thời điểm khác nhau, bạn có thể đặt lại thời gian thành thời gian hiện tại bằng cách chọn nút Đặt lại ở góc dưới cùng bên trái:
Thêm ảnh do người dùng cung cấp
Mặt đồng hồ có thể có một vị trí dành cho ảnh tuỳ chỉnh. Nhờ đó, người dùng có thể thêm một bức ảnh cá nhân làm phông nền, trong khi vẫn hiển thị thời gian và mọi thành phần khác mà bạn đã đưa vào thiết kế của mình.
Để hỗ trợ ảnh tuỳ chỉnh, hãy thêm một lớp vào mặt đồng hồ và đặt Hành vi của lớp đó thành "Ảnh do người dùng cung cấp". Trong ví dụ này, chúng ta sẽ dùng ảnh mẫu của một bông hoa cho lớp này làm hình ảnh mặc định. Hình ảnh này được dùng làm hình ảnh dự phòng trước khi người dùng chỉ định ảnh của riêng họ hoặc khi người dùng chọn không sử dụng một trong các bức ảnh của họ.
Hỗ trợ chọn nhiều ảnh
Mặt đồng hồ có thể hỗ trợ việc chọn nhiều ảnh. Watch Face Designer gọi đây là một thư viện:
Khi bạn đặt chế độ Chọn ảnh thành "Thư viện", người dùng có thể chọn nhiều ảnh cho vị trí này và đồng hồ sẽ chuyển đổi giữa các ảnh tại nhiều thời điểm, tuỳ thuộc vào lựa chọn của bạn trong phần "Thay đổi ảnh":
- Khi bạn chọn "Khi nhấn", ảnh sẽ thay đổi khi người dùng nhấn vào lớp của bạn.
- Khi bạn chọn "Khi giơ cổ tay", hình nền sẽ thay đổi sau mỗi 3 lần người dùng giơ cổ tay. Hiện tại, bạn không thể điều chỉnh chế độ này bằng Watch Face Designer. Tìm hiểu thêm về cách Định dạng mặt đồng hồ cung cấp chế độ hỗ trợ nâng cao hơn bằng cách sử dụng thuộc tính
changeAfterEvery.
Tìm hiểu thêm
Để xem trước mặt đồng hồ trên một thiết bị thực, hãy xem hướng dẫn về xuất.
Để biết thêm các lựa chọn và tính năng, hãy xem hướng dẫn về cách sử dụng nâng cao.