Chia sẻ của một nhà Quản lý Sản phẩm kiêm Giám đốc Tăng trưởng tại một công ty startup. (Xem hồ sơ tác giả)

Trong bài viết trước, tôi đã giới thiệu Apple Human Interface Guideline (HIG) và tổng quan về thiết kế iOS. Trong bài viết này, tôi sẽ tiếp tục tóm tắt các hướng dẫn thiết kế của Apple và chia sẻ một vài mẹo bạn có thể áp dụng trong thiết kế sản phẩm thực tế.

Tôi đã rất ấn tượng trước khả năng branding của Apple, nhưng ngay cả Apple – một công ty xuất sắc trong việc branding – cũng cho rằng cần ưu tiên nội dung hơn việc branding. Điều này có nghĩa là chúng ta không nên mải miết branding mà bỏ sót nội dung thực chất bên trong.

Nội dung dưới đây không bao gồm những cập nhật sau ngày 6 tháng 7 năm 2022.

1) Adaptivity & Layout

Hãy thiết kế giao diện thích ứng với nhiều kích thước màn hình trên các thiết bị khác nhau.

Kích thước và hướng màn hình thiết bị

Hãy đảm bảo giao diện hiển thị tốt trên mọi kích thước màn hình thiết bị trong trường hợp ứng dụng hoạt động trên một loại thiết bị cụ thể. Ví dụ, các ứng dụng dành riêng cho iPhone cần hiển thị tốt trên mọi kích thước màn hình iPhone.

Layout guide & Safe area

1. Layout guide xác định các vùng hình chữ nhật giúp bạn căn chỉnh vị trí hiển thị các phần nội dung trên màn hình, bố cục và khoảng cách các thành phần.
2. Hệ thống iOS đã định sẵn một layout guide giúp bạn hạn chế chiều rộng của chữ hay đoạn văn bản, nhằm duy trì tính dễ đọc và áp dụng các khoảng trắng xung quanh các vùng nội dung một cách dễ dàng.
3. Safe area (khu vực an toàn) là khu vực có thể hiển thị các navigation bar, tab bar, toolbar hay view controller mà không bị đè bởi các thành phần khác. 
4. Hãy tuân thủ các safe area và khoảng trống trên layout do hệ thống quy định. Những layout guide này đảm bảo ứng dụng có thể hiển thị một cách phù hợp trên các thiết bị và ngữ cảnh. Hơn nữa, safe area bảo đảm các status bar, navigation bar, toolbar và tab bar không đè lên nhau.

Các vấn đề thường được lưu ý trên layout

1. Hãy đảm bảo các nội dung cơ bản được hiển thị rõ ràng bằng các kích thước cơ bản.
2. Hãy duy trì tính nhất quán tổng thể trên toàn bộ ứng dụng. Thông thường, các thành phần cung cấp tính năng tương tự nhau nên có hình thức cũng tương tự nhau.
3. Hãy tận dụng trọng lượng và cảm giác cân bằng về mặt thị giác để truyền tải mức độ quan trọng.
4. Hãy sắp xếp bố cục hỗ trợ người dùng scan (đọc lướt) dễ dàng và có thể truyền tải kết cấu, cấu trúc phân lớp trong ứng dụng.
5. Hãy hỗ trợ cả màn hình khổ dọc và khổ ngang nếu có thể.
6. Hãy cung cấp đủ không gian cảm ứng để người dùng chạm (touch) những thành phần tương tác. Hãy duy trì kích thước tối thiểu 44px x 44px cho tất cả các control. 

Thiết kế trải nghiệm toàn màn hình

1. Hãy mở rộng các thành phần thị giác để lấp đầy màn hình.
   Hãy đảm bảo nền ứng dụng (background) hiển thị đến tận rìa màn hình và các layout hỗ trợ scroll như table và collection hoạt động liền mạch đến cuối cùng.
2. Tránh đặt các thành phần tương tác một cách rõ ràng ở dưới cùng và các góc của màn hình.
3. Hãy thêm đủ các nội dung cần thiết để tránh tình trạng clipping.
4. Hãy sử dụng full-width button:

• Button có chiều rộng bằng với kích thước màn hình có thể bị hiểu lầm là không phải button.
• Các cạnh của button phải tuân thủ lề chuẩn của hệ thống. 
• Khi nằm ở phía dưới màn hình, full-width button sẽ hiển thị tốt nhất nếu được bo tròn các góc và nằm ở cạnh dưới của safe area.  
• Đảm bảo button không đè lên Home Indicator.

5. Không che khuất những tính năng đặc biệt của màn hình hoặc thu hút sự chú ý quá mức.
6. Hãy lưu ý chiều cao của status bar.

2) Animation

1. Hãy cẩn trọng trong việc sử dụng animation và hiệu ứng motion.
2. Hãy cố gắng đạt được tính thiết thực và độ tin cậy.
3. Hãy sử dụng các animation một cách nhất quán.
4. Hãy để người dùng tùy chọn sử dụng hoặc không sử dụng animation.

3) Branding

1. Hãy kết hợp branding một cách tinh tế và không phô trương. 

• Một trong những phương pháp branding thích hợp là tạo ra ngữ cảnh trong ứng dụng bằng cách sử dụng màu sắc chủ đạo của logo thương hiệu trên toàn bộ giao diện. 

2. Branding không được gây ảnh hưởng đến thiết kế ứng dụng.

• Hãy khiến ứng dụng của bạn trông giống như ứng dụng của iOS.
• Hãy đặt trọng tâm là nội dung trực quan, dễ điều hướng và dễ sử dụng.
• Cho dù ứng dụng có khả dụng trên những nền tảng khác, bạn cũng không nên làm loãng thiết kế nhằm mục đích branding một cách nhất quán trên nhiều nền tảng.

3. Hãy ưu tiên nội dung trước việc branding.

• Việc liên tục ghim một thanh (header) cố định ở phía trên màn hình chỉ để thể hiện giá trị thương hiệu sẽ khiến cho không gian hiển thị nội dung chính bị thu hẹp.
• Thay vào đó, hãy cân nhắc một phương pháp branding ít can thiệp hơn, chẳng hạn như tùy chỉnh bảng màu, kiểu chữ hoặc phông nền một cách tinh tế.

4. Đừng bị cuốn vào ham muốn hiển thị logo trên toàn ứng dụng.

• Nếu không phải trường hợp cần thiết để cung cấp ngữ cảnh, bạn không nên hiển thị logo ở mọi nơi trong ứng dụng.

4) Color

1. Đừng chỉ phụ thuộc riêng vào màu sắc khi cần phân biệt các đối tượng hoặc truyền tải nội dung quan trọng.
2. Hãy sử dụng màu sắc một cách cẩn thận.
   Các màu sắc nổi bật được sử dụng để thu hút sự chú ý của người dùng vào những nội dung quan trọng sẽ càng phát huy sức mạnh khi được sử dụng một cách cẩn thận.
3. Hãy lựa chọn các bảng màu (color palette) phù hợp với màu sắc của logo.
4. Hãy lựa chọn các màu sắc phối hợp tốt với nhau một cách tổng thể trong ứng dụng.
5. Hãy sử dụng hai bảng màu chủ đạo khác nhau để ứng dụng hiển thị tốt trong cả Light Mode và Dark Mode. 
6. Đừng sử dụng cùng một màu sắc cho các thành phần tương tác và các thành phần không tương tác trên giao diện.
7. Hãy cân nhắc ý nghĩa các màu sắc trong bối cảnh một quốc gia hoặc nền văn hóa khác.
8. Đừng sử dụng các màu sắc khiến người dùng khó nhận thức nội dung của ứng dụng. 

5) Launch Screen

1. Màn hình khởi động không phải cơ hội để thể hiện tính nghệ thuật, mà là lúc để bạn cho người dùng nhận thấy rằng ứng dụng sẽ hoạt động nhanh chóng và họ có thể sử dụng ngay lập tức.
2. Hãy thiết kế màn hình khởi động gần giống với màn hình đầu tiên trong ứng dụng. 
3. Đừng hiển thị nội dung chữ trong màn hình khởi động. Nội dung của màn hình khởi động sẽ không được thay đổi, do đó không được bản địa hóa.
4. Downplay Launching:

• Ứng dụng cần hỗ trợ người dùng nhanh chóng truy cập và sử dụng.
• Ứng dụng có màn hình khởi động được thiết kế tương đồng với giao diện sẽ khiến người dùng cảm thấy có thể bắt đầu sử dụng ngay.

5. Đừng quảng cáo.

• Màn hình khởi động cũng không phải một cơ hội để quảng cáo.
• Đừng thiết kế trải nghiệm bắt đầu ứng dụng như một trang thông tin.
• Đừng hiển thị logo hay các yếu tố branding khác nếu chúng không phải thành phần cố định ở màn hình đầu tiên. 

6) Terminology

1. Tất cả các từ ngữ xuất hiện trong ứng dụng đều là một phần trong quá trình giao tiếp với người dùng, do đó cần giúp người dùng cảm thấy thoải mái.
2. Hãy sử dụng từ ngữ và cách diễn đạt thân quen, dễ hiểu. Đừng sử dụng những thuật ngữ khiến người dùng khó hiểu. 
3. Hãy duy trì các nội dung chữ trên giao diện chính xác và ngắn gọn.

• Người dùng sẽ không hài lòng khi phải đọc những đoạn hướng dẫn sử dụng dài.
• Hãy tách biệt các thông tin quan trọng nhất, diễn đạt một cách ngắn gọn và làm nổi bật chúng.

4. Hãy tách biệt các thành phần tương tác một cách thích hợp.

• Người dùng nên có khả năng nhanh chóng biết được thành phần đó thực hiện chức năng gì.
• Hãy sử dụng các động từ như “Kết nối”, “Gửi” hay “Thêm” cho nhãn của button và các thành phần tương tác khác.

5. Hãy cố gắng sử dụng lối nói thân thiện.
6. Hãy chú ý cẩn thận khi pha trò và tạo sự hài hước.
7. Hãy sử dụng các từ ngữ và hình ảnh thích hợp, nhất quán với nhau và đảm bảo các chỉ dẫn phù hợp với tình huống phát sinh. 
8. Hãy tham khảo ngày tháng một cách chính xác.

• Việc sử dụng các từ ngữ thân thuộc như “Hôm nay” hay “Ngày mai” có thể là một ý hay, tuy nhiên nếu bạn không cân nhắc vị trí hiện tại của người dùng, chúng có thể gây ra một sự nhầm lẫn hoặc trở nên bất hợp lý.

7) Typography

Hãy lựa chọn phông chữ thích hợp nhằm nâng cao trải nghiệm ứng dụng.

1. Hãy sử dụng kiểu chữ sẵn có (built-in text style) nếu có thể. Kiểu chữ sẵn có giúp duy trì tính dễ đọc và thể hiện nội dung một cách rõ ràng về mặt thị giác. 
2. Hãy nhấn mạnh những thông tin quan trọng. Bạn có thể tận dụng độ dày, kích thước và màu sắc của chữ để nhấn mạnh.
3. Hãy xác định thứ tự ưu tiên cho các phần nội dung cần nhấn mạnh, vì không phải phần nào cũng quan trọng như nhau.
4. Hãy hạn chế số lượng font sử dụng trên giao diện. Nếu giao diện có quá nhiều font khác nhau, người dùng có thể cảm thấy ứng dụng hỗn tạp và bị chắp vá.
5. Hãy lưu ý đến khoảng cách giữa các dòng để tăng tính dễ đọc và tiết kiệm không gian. Nội dung chữ có thể dễ đọc hơn nhờ vào việc tăng hoặc giảm khoảng cách giữa các dòng tùy từng trường hợp cụ thể.

8) Image Size & Resolution

Khái niệm độ phân giải hình ảnh

1. iOS sử dụng một hệ tọa độ bao gồm các điểm tọa độ tương ứng với các pixel trên màn hình khi sắp nội dung trên giao diện.
2. Trên màn hình có độ phân giải chuẩn, mật độ các pixel là 1:1 (hay còn gọi là @1), có nghĩa là 1 pixel tương ứng với 1 điểm.
3. Các màn hình có độ phân giải cao có mật độ pixel lớn hơn, 2.0 hoặc 3.0 (@2 hoặc @3). 
4. Các hình ảnh có kích thước lớn (tính theo pixel) hiển thị tốt hơn trên các màn hình có độ phân giải cao.

Thiết kế artwork có độ phân giải cao

1. Hãy sử dụng lưới 8px x 8px.
2. Hãy thiết kế artwork với những định dạng thích hợp.

• Thông thường, đồ họa bitmap hoặc raster có định dạng PNG. Định dạng PNG phù hợp với những artwork cần các hiệu ứng như đổ bóng, thực cảm hay highlight.
• Định dạng hình ảnh là JPEG.
• Thông thường, định dạng PNG được sử dụng cho các icon ứng dụng sinh động.

9) App Icon

1. Hãy thiết kế icon đơn giản: hãy chọn một yếu tố đơn vị thể hiện rõ ràng nhất bản chất ứng dụng rồi thể hiện nó bằng một hình thức đơn giản và độc đáo.
2. Hãy biến icon thành điểm tập trung nhất: hãy thiết kế icon như một điểm trung tâm duy nhất có thể thu hút sự chú ý ngay lập tức và thể hiện rõ dịch vụ của ứng dụng.
3. Thiết kế icon dễ nhận biết: hãy đầu tư thời gian để thiết kế một icon đẹp, trừu tượng và thu hút, đồng thời có thể thể hiện mục đích của ứng dụng một cách nghệ thuật. 
4. Sử dụng màu nền đơn giản và đừng để nền trong suốt.

• Hãy sử dụng một phông nền đơn giản, không lấn át các ứng dụng xung quanh.
• Bạn không nhất thiết phải lấp đầy diện tích icon bằng các nội dung.

5. Hãy chỉ sử dụng từ ngữ trong trường hợp thật sự cần thiết hoặc khi chữ (text) là một phần của icon.

• Không nên lặp lại tên ứng dụng trong icon hoặc đưa vào icon những từ ngữ cho người dùng biết nên dùng ứng dụng này để làm gì một cách không cần thiết.
• Trường hợp icon bao gồm chữ, hãy nhấn mạnh từ ngữ liên quan đến nội dung thực tế ứng dụng mang đến cho người dùng.

6. Đừng sử dụng hình ảnh, screenshot hoặc các thành phần của giao diện trong icon.
7. Đừng đặt icon ở mọi nơi trên giao diện.

• Việc sử dụng icon với nhiều ý định khác nhau trong ứng dụng trái lại có thể khiến người dùng cảm thấy rối.

8. Hãy kiểm tra khả năng hiển thị của icon trên nhiều phông nền khác nhau. 

• Bạn không thể đoán biết được ảnh nền người dùng sẽ sử dụng, do đó hãy kiểm tra khả năng hiển thị của icon trên cả nền màu sáng và màu tối.

The original article: 애플이 알려주는 디자인 팁: ②Visual Design 편
The translated article above belongs to the author ASH and yozmIT (요즘IT). Metacoders commits not to use this content for any commercial purpose.