THIẾT KẾ GIAO DIỆN TỐI (DARK THEME) CHO APP IOS

25/01/2021 28
THIET KE DARK THEME CHO APP IOS
APP DEVELOPMENT

I. Tại sao phải thiết kế Dark Theme cho app IOS?

1. Dark theme là một xu hướng phổ biến

Dark theme (giao diện tối) là một trong số những yếu tố thịnh hành và bắt đầu nổi lên trong năm vừa qua, không chỉ trên màn hình điện thoại mà còn trên các màn hình TV, quảng cáo… Màu sắc mang lại cảm xúc, và màu đen thể hiện cho quyền lực, tinh tế, thanh thoát, sang trọng. Chính vì vậy, sắc đen ngày càng trở nên phổ biến với các sản phẩm công nghệ, và chính vì vậy dark theme cho các ứng dụng điện thoại là xu hướng tất yếu.

2. Dark theme giúp kéo dài tuổi thọ pin

Google cho biết, dark theme cho app còn có tác dụng giúp tiết kiệm pin, đặc biệt là trên màn hình OLED. Youtube với giao diện tối đi 50% đã giúp tiết kiệm đến 15% pin.

3. Có tác dụng với sức khỏe

Việc nhìn vào điện thoại với màn hình sáng trong thời gian dài có ảnh hưởng rất lớn đến sức khỏe, vì nó ức chế khả năng sinh ra melatonin, loại hooc-mon cần thiết để bạn dễ ngủ. Theo một nghiên cứu của Nielson năm 2018, con người đang sử dụng các loại màn hình lên tới 11 giờ mỗi ngày, và việc tiếp xúc với thời gian dài như vậy sẽ khiến khô mắt, mỏi mắt, gây mất ngủ, thậm chí tệ hơn có thể gây ra nhiều chứng bệnh như béo phì hoặc ung thư.

Sử dụng điện thoại trong đêm tối không được khuyến khích, và càng nguy hiểm hơn nếu bạn mở một ứng dụng với độ sáng quá cao. Vì vậy, dark theme sẽ giúp mắt được thư giãn hơn, kể cả trong không gian tối.

II. Bí kíp thiết kế Dark theme cho app IOS

Vậy thì, thiết kế dark theme cho app IOS cần lưu ý những gì? Tất cả các quyết định của bạn cần đảm bảo được các yêu cầu sau:

  • Nội dung (text) cần dễ đọc.
    • Nội dung
    • Hình ảnh
    • Thiết kế
  • Thống nhất với các app dark theme khác
  • Thể hiện được hình ảnh thương hiệu

Cuối cùng, dù có đổi giao diện nhưng ứng dụng của bạn vẫn cần duy trì được đúng cấu trúc, bố cục nguyên bản. Và có một số bí kíp sau dành cho bạn, cùng tìm hiểu với CO-WELL Asia nhé!

 

1. Lựa chọn màu sắc

Đổi giao diện không chỉ đơn giản là chuyển nền từ trắng sang đen, text từ đen sang trắng và giữ nguyên các màu sắc còn lại. Hãy thử làm theo hướng dẫn của Apple để lựa chọn được dãy màu phù hợp với thương hiệu của bạn.

Khi bắt đầu tạo dark theme cho app IOS, phương án an toàn nhất là sử dụng màu cơ bản như màu xám đen, vì màu này sẽ giúp giảm sự mỏi mắt và cũng sẽ dễ đọc text hơn, tạo không gian tốt hơn khi so với nền đen hoàn toàn.

Các màu bão hòa hiển thị tốt trên nền sáng, tuy nhiên khi đổi sang nền tối, có khả năng sẽ gây ra cảm giác bị rung, khó đọc. Vì vậy, bạn nên dùng tone màu nhẹ nhàng hơn và cho khách hàng trải nghiệm đọc tốt hơn.

dai mau cho dark theme

2. Để ý đến độ tương phản

Trên thực tế, sẽ rất khó chịu nếu nhìn vào một màn hình có độ tương phản quá cao (các màu sắc quá rõ rệt mà không có sự chuyển màu dần dần hoặc có các màu nhạt). Độ tương phản cũng là một yếu tố quyết định độ dễ nhìn của text trên nền tối. Và theo như một số báo cáo thì độ tương phản màu sắc không nên vượt quá tỉ lệ 4.5 : 1 với màu text, và tỉ lệ 3 : 1 cho màu tiêu đề.

Bạn có thể sử dụng website này để kiểm tra tỉ lệ màu sắc nền – text.

3. Tối ưu những mảng sáng

Với nền sáng, chúng ta thường dùng các mảng màu lớn và các sắc màu tươi sáng, giúp nhấn mạnh các yếu tố quan trọng hay khiến cho trang trở nên sống động hơn. Tuy nhiên, với dark theme thì điều này sẽ phản tác dụng và làm cho người dùng dễ bị phân tâm khi sử dụng.

4. Dùng font chữ đậm (bold), màu sáng

Nền tối dễ khiến các font chữ bị chìm và mảnh đi, vì vậy, bạn nên dùng các font đậm sẵn trong dark theme. Hãy lựa chọn cẩn thận từ đầu, vì bộ font liên quan sẽ có nhiều kiểu có ảnh hưởng khác nhau đến khả năng đọc nội dung của bạn.

Sử dụng text sáng màu trên nền tối cũng cần phải chú ý nhiều đến độ đậm nhạt (opacity):

Những text cần nhấn mạnh sẽ có opacity khoảng 87%

Những text  cần nhấn trung bình có opacity 60%

Và những text không quan trọng có opacity 38%.

do tuong phan

5. Sử dụng hình ảnh

Hãy thận trọng khi sử dụng các ảnh có nhiều màu sắc. Nếu ảnh không hiển thị tốt trên nền đen, hãy cân nhắc sửa lại hoặc thậm chí tạo ra một phiên bản khác.

6. Cẩn thận với sắc xanh biển (blue)

Sắc xanh biển cũng là một sắc tối được nhiều nhà thiết kế app lựa chọn để sử dụng, hoặc kèm cùng sắc đen. Tuy nhiên, một nghiên cứu của Flux cho thấy ánh sáng xanh có thể gây khó ngủ, đặc biệt là vào ngay trước khi ngủ đêm. Có thể kết hợp thêm màu đỏ vàng trên màn hình để màu xanh trở nên dễ chịu hơn trên dark theme.

7. Các họa tiết animation và illustration

Nếu trong ứng dụng của bạn có các họa tiết hoặc hình khối chuyển động có kích thước lớn/ nặng, bạn cũng cần chuẩn bị phương án để chuyển sang dark theme.

8. Cho phép người dùng Bật/ Tắt chế độ Dark Theme

Việc thiết lập hệ thống tự bật/ tắt chế độ dark theme, ví dụ như khi đi vào không gian ít ánh sáng sẽ chuyển sang nền tối sẽ khiến người dùng có trải nghiệm mới, tuy nhiên có thể sẽ gây ra nhiều lỗi về giao diện. Bởi vậy, bạn không nên tự động thiết lập hệ thống chuyển sang dark theme, mà để người dùng chủ động đổi nếu cần, tùy theo nhu cầu của họ.

 

III. Kết luận

Hy vọng bài viết đã cung cấp cho bạn các thông tin và bí kíp cần thiết khi thiết kế phiên bản dark theme cho app IOS. Bước tiếp theo, hãy cùng thảo luận với đội ngũ thiết kế, vận hành của bạn để lên kế hoạch làm việc chi tiết. Nếu bạn chưa sở hữu một đội ngũ như vậy, CO-WELL Asia sẵn sàng trở thành người đồng hành đắc lực cho bạn để thiết kế một ứng dụng có dark theme đẹp mắt, đảm bảo tính năng và trải nghiệm người dùng.