[Article] Thử thách khi làm Tini UI Dark theme

Về Tini UI Dark theme

Với việc phát triển không ngừng của Tini App, dựa vào thư viện Tini UI bản Light theme đã có sẵn, Tini Design đang phát triển thêm phiên bản Dark theme để có thể đáp ứng nhu cầu của nhiều ứng dụng hơn.

Quá trình tạo ra Tini UI Dark là một quá trình vừa làm, vừa học và vừa khóc…Hãy cùng tìm hiểu về Tini UI Dark và xem những thử thách mà team Tini Design phải đối mặt nhé!

Các tiêu chí cần phải đạt được

Danh sách các tiêu chí cần phải đạt được khi làm Tini UI Dark theme:

  1. Dark theme cần phải đảm bảo các yêu cầu về mặt thị giác
    • Màu sắc phải dịu mắt, trung tính để có thể áp dụng cho nhiều ứng dụng khác nhau.
    • Đảm bảo độ tương phản tốt giữa nền và các thành phần nằm trên nền.
  2. Phiên bản Light theme và Dark theme phải có sự tương đồng về cấu trúc thư viện components, hệ thống design tokens để tiện cho việc dễ dàng chuyển đổi giữa hai theme.

Các thử thách gặp phải khi làm Tini UI Dark theme

Thử thách 1: Bảng màu hiện tại của Tini UI Light theme không đáp ứng được yêu cầu

Bảng màu hiện tại của Tini UI Light theme có Saturation, Brightness nhiều. Nếu áp dụng vào UI của Dark theme, sẽ làm cho tất cả thành phần UI nổi bật một cách không cần thiết, khiến người dùng khó phân biệt chính phụ, gây chói và mỏi mắt.

Hướng giải quyết: Tạo 1 bảng màu mới.

Cách tìm 1 bản màu phù hợp

Để bắt đầu làm 1 bảng màu mới, team bắt đầu với dãy màu Xám (Grayscale), tiếp theo sẽ áp dụng công thức chọn màu Grayscale để hoàn thiện các màu khác.

Sau khi thử nghiệm với nhiều cách thức chọn màu khác nhau team Tini Design đã hướng đến việc chọn bảng màu có Saturation vừa phải để tạo cá tính cũng như có thể áp dụng được cho nhiều brand khác nhau.

Bảng màu mới dành cho Tini UI Dark theme

Dựa vào dãy màu xám, tụi mình tiến hành chọn các màu khác cho bảng màu dựa vào sự tương đồng về brightness, tuy nhiên ko nhất thiết là phải giống nhau hoàn toàn.

Khác biệt giữa bảng màu Light theme và Dark theme

Bảng màu mới của Tini UI Dark theme dựa vào bản màu Light theme với tên các token màu không thay đổi nhưng giá trị màu được giảm độ tươi và sáng xuống.


Thử thách 2: Liên kết bảng màu mới với hệ thống hơn 400 tokens màu.

Tini UI Dark theme có hệ thống token màu bao gồm:

  • Màu Global là các màu thuộc bảng màu mới
  • Màu Alias là những màu có mục đích, hoàn cảnh sử dụng, màu Alias có giá trị thừa hưởng từ màu Global
  • Màu Component specific là màu của các thành phần cấu tạo nên một component. Giá trị của màu component specific thừa hưởng từ màu Alias nếu có thể, nếu không có màu Alias thích hợp thì có thể thừa hưởng từ màu Global.

Tìm hiểu thêm về Hệ thống màu sắc của Tini UI

Công thức liên kết màu Global, Alias và Component specific dựa vào Light theme

Các quy tắc:

  • Team tránh dùng màu đen tuần và màu trắng thuần trên các nền của Dark theme để đảm bảo tiêu chí màu sắc dịu mắt đã nêu ở trên.
  • Về mặt Elevation, mặt phẳng có mức độ elevation càng cao thì màu nền càng sáng.

Từ các quy tắc trên, team bắt đầu liên kết các màu với nhau:

  • Các màu theme:
    • Màu alias-theme thừa hưởng màu global-gray-90.
    • Màu alias-theme-variant thừa hưởng màu global-gray-100.
    • Màu alias-primary-on-theme thừa hưởng màu global-gray-10.
    • Dựa vào bước màu ở Light theme, các màu alias-secondary-on-theme, alias-outline và alias-outline-variant dùng một trong các màu alias-theme, alias-primary-on-theme làm gốc để tính bước màu.

  • Các màu reverse-theme là màu đối nghịch với theme dùng để tạo sự chú ý cho một số component (ví dụ như toast bar).
  • Với các màu thừa hưởng global-black và global-white ở Light theme, trừ các component đặc biệt (như Overlay, slider thumb, switch thumb,…) còn lại thay đổi theo:
    • Light theme: Các màu thừa hưởng global-black → Dark theme: Thừa hưởng global-white
    • Light theme: Các màu thừa hưởng global-white → Dark theme: Thừa hưởng global-black
  • Các màu thừa hưởng màu global khác ở light theme → Dark theme: giữ nguyên màu được thừa hưởng nếu không cần thay đổi.

Cách liên kết màu

Do những hạn chế hiện tại của Figma, cũng như không có Figma plugin nào có thể đáp ứng nhu cầu, việc liên kết các màu với nhau buộc phải làm bằng tay cho từng token màu (hơn 400 màu)…


Thử thách 3: Kiểm tra lại Tini UI Dark theme với các tiêu chí đã đề ra

Để đảm bảo các yêu cầu về độ tương phản cũng như sự tương đồng giữa 2 thư viện Light theme và Dark theme, team đã kiểm tra Tini UI Dark theme trên các thiết kế hiện có bằng tính năng swap library của Figma.

Kiểm tra Dark theme trên Shopping template

Kiểm tra Dark theme trên Tiki Exchange - Social group

Sau khi chạy kiểm tra thử, team phát hiện ra một số component cần phải thừa hưởng token màu khác.

Nhờ việc kiểm tra thử, team cũng phát hiện ra một số component ở light theme cũng nên thừa hưởng theo giá trị mới (Inputs và Brand reverse button). Điều này đồng nghĩa với việc một số token trong hệ thống token màu cần được update lại ở Light theme và Dark theme.

Tạm kết

Tini UI Dark theme và Light theme vẫn sẽ được cập nhật và cải thiện hàng tháng và luôn mong muốn mang lại những trải nghiệm tốt hơn cho các bạn designer và developer!

Để lại comment dưới bài post này nếu bạn có bất kỳ thắc mắc nào, và đừng quên follow tụi mình để cập nhật nhanh nhất những bài viết tiếp theo nhé.

Tìm hiểu thêm về Tini Dark UI trên Figma community


Thông tin liên quan

Design library

Standard flows

  • Tini Checkout flows: Figma

Template

10 Likes

Nice, 10 điểm vì chia sẻ hữu ích +100 điểm vì có meme :smiley:

4 Likes

Hữu ích quá ạ. Cảm phục designer tần tảo :clap:t2:

4 Likes


Đề nghị đồng chí chăm chỉ hoạt động nhiều hơn ạ =)))