7 Quy Tắc Thiết Kế UI Tuyệt Đẹp (Dành Cho Dân Không Chuyên)

Giới thiệu

Đầu tiên và trên hết thì bài viết không phải dành cho tất cả mọi người, vậy những ai nên đọc bài này?

• Developer: những người muốn tự thiết kế ra UI đẹp mắt mà không phải tốn quá nhiều thời gian tìm hiểu UI.
• UX designer (không phải UI designer): những người muốn CV của mình đẹp hơn một template PowerPoint tẻ nhạt.

Nếu bạn đang học về mỹ thuật hoặc bạn am hiểu về UI designer thì bạn sẽ thấy bài viết khá là: a.) tẻ nhạt, b.) sai và c.) khó chịu.

Tiếp theo tôi sẽ nói bạn sẽ nhận được gì khi đọc bài viết này. Trước tiên, tôi là một UX designer và tôi không hề có kỹ năng về UI design. Tôi yêu thiết kế UX, nhưng chỉ trong một thời gian ngắn, tôi nhận ra rằng có rất nhiều lý do cần phải học làm một giao diện đẹp:

• CV của tôi trông thật thảm hại, không phản ánh được hết công việc và quá trình tư duy của tôi.
• Khách hàng của tôi muốn thuê những người có chuyên môn hơn là những người chỉ biết phác họa box và arrow.
• Hmm, có khi nào tôi muốn làm ở một startup? Chắc chỉ làm chân quét rác được thôi.

Tôi cũng có lý do của mình chứ. Tôi không có khiếu thẩm mỹ. Chuyên ngành của tôi là kỹ thuật — thậm chí tôi rất tự hào khi làm ra một thứ gì đó trông xấu khủng khiếp.

| Chuyên ngành của tôi là kỹ thuật — thậm chí tôi rất tự hào khi làm ra một thứ gì đó trông xấu khủng khiếp.

Cuối cùng thì, tôi đã học được về tính thẩm mỹ của ứng dụng. Tôi đã làm việc 10 tiếng ở một project về UI nhưng chỉ được trả công 1 tiếng. 9 tiếng còn lại là thời gian tôi học. Mặt dày đi cóp nhặt ở các nơi khác về. Tìm kiếm trong tuyệt vọng cái gì đó để copy trên Google, Pinterest và Dribble.

Những quy tắc sau là những bài học tôi đúc kết ra từ thời gian đó.

Bài viết này không chỉ đơn thuần là lý thuyết mà hoàn toàn thực tế. Bạn sẽ không tìm thấy gì về tỉ lệ vàng, cách phối màu. Tất cả những gì tôi học được là nhờ thực chiến, kiên trì và luyện tập.

Hãy nghĩ giống như là: Judo được sáng lập ra dựa trên hàng thế kỷ truyền thống võ thuật và triết học Nhật Bản. Bạn học Judo, và không chỉ học cách chiến đấu, bạn học cả về năng lượng, sự cân bằng, luồng khí, dòng chảy. Những thứ đại loại vậy.

7 quy tắc giúp bạn thiết kế UI tuyệt đẹp:

1. Ánh sáng chiếu từ trên xuống
2. Đen và trắng trước
3. Sử dụng gấp đôi whitespace
4. Học cách đè chữ trên ảnh 
5. Làm chữ hiện — ẩn 
6. Font chữ nên dùng 
7. Ăn trộm một cách lịch sự 

OK bây giờ chúng ta bắt đầu với quy tắc số 1.

Quy tắc 1: Đổ Ánh Sáng Từ Trên Xuống

Bóng là một thứ cực kỳ quan trọng. Bóng gợi ý não người chúng ta đang nhìn vào cái gì. Đây là điều quan trọng bậc nhất và cũng không phải quá hiển nhiên khi học về UI: ánh sáng rọi từ trên xuống. Ánh sáng chiếu từ trên xuống là điều quá đỗi bình thường và nếu điều ngược lại xảy ra thì trông khá là đáng sợ.

Khi ánh sáng chiếu từ trên xuống, nó rọi sáng những thứ bên trên và in bóng lên những thứ bên dưới. Bên trên thì sáng hơn, bên dưới thì tối hơn. Mí mắt dưới của con người thường không quá đậm, nhưng mà cứ thử chiếu sáng từ dưới lên thì bạn nghĩ thế nào. Hãy nhìn bức tranh phía trên và cảm nhận.

Điều tương tự cũng đúng với UI. Dưới các thành phần UI đều có bóng ở dưới đáy. Tuy rằng màn hình thì phẳng, nhưng chúng ta bỏ rất nhiều công sức để làm cho mọi thứ mang lại cảm giác về không gian 3 chiều.

Hãy xem ví dụ về một button ở trên. Ngay cả khi trông phẳng, thì những button trên vẫn có những chi tiết rất nhỏ liên quan đến ánh sáng:

• Nút ở trạng thái chưa được ấn (bởi người dùng) sẽ có viền dưới tối.
• Nút chưa ấn phần trên hơi sáng hơn phần dưới một chút.
• Nút chưa ấn có bóng mờ mỏng — nhìn qua đoạn phóng to sẽ dễ thấy hơn.
• Nút đã ấn phần dưới tối hơn phần trên, và hầu hết tối hơn. Còn có người tranh luận là trong thực tế nút được ấn còn tối hơn, vì còn bị tay che.

Đó chỉ là về nút, nhưng có tới 4 hiệu ứng ánh sáng. Đó là một bài học cho bạn. Bây giờ chúng ta sẽ áp dụng logic đó cho mọi thứ.

Mặc dù iOS 6 đã có từ từ khá lâu nhưng lại là một case study tốt để học về ánh sáng.

Đây là ví dụ phần cài đặt trong iOS 6 — Do Not Disturb và Notification. Có vẻ không có gì to tát phải không. Hãy xem có bao nhiêu hiệu ứng ánh sáng được áp dụng:

• Phần viền của khung điều khiển có đổ bóng một xíu, mang lại cảm giác toàn bộ phần bên trong chìm xuống
• Phần trượt “ON” viền bên trên cũng có đổ bóng
• Phần trượt “ON” lõm xuống và phần dưới phản chiếu nhiều ánh sáng hơn
• Icon thì nổi hơn một chút. Bạn có thấy phần viền sáng ở trên không? Điều này mô tả rằng bề mặt vuông góc với nguồn sáng, do đó nhận nhiều ánh sáng, nên phản chiếu lại nhiều ánh sáng hơn tới mắt.
• Đường phân cách ở giữa thì tối hơn nếu không hướng tới nguồn sáng, sáng hơn nếu hướng tới nguồn sáng

Ví dụ về đường phân cách.

Các phần tử đổ bóng vào trong:

• ô nhập chữ
• nút đã ấn
• rãnh trượt
• nút radio (chưa chọn)
• checkbox

Các phần tử đổ bóng ra ngoài:

• nút chưa ấn
• nút ở rãnh trượt
• card
• nút xổ xuống (dropdown)
• phần nút của nút radio đã chọn
• popup

Khoan, vậy thiết kế phẳng thì sao Erik?

iOS 7 đã khuấy động giới công nghệ vì “thiết kế phẳng” của mình. Phẳng ở đây nghĩa là phẳng thực sự, theo nghĩa đen luôn. Không hề có cảm giác lồi lên hay lõm vào, chỉ có các đường, hình dạng một màu đơn.

Tôi rất thích đơn giản và thoáng như vậy. Nhưng tôi không nghĩ xu hướng này sẽ tồn tại lâu. Mô phỏng khéo léo theo không gian 3 chiều dường như là điều tự nhiên nhất mà chúng ta khó có thể bỏ hoàn toàn được.

Đúng hơn là, trong tương lai gần, chúng ta sẽ thấy nhiều hơn giao diện semi-flat (bán phẳng) (và đây là điều tôi khuyên bạn nên thành thạo trong thiết kế). Tôi sẽ gọi nó là “flatty design”. Vẫn thoáng đãng, vẫn đơn giản, nhưng vẫn có một chút đổ bóng và quan trọng nhất là vẫn đủ để có thể gợi ý người dùng chạm/trượt/click vào đâu.

OS X Yosemite — flatty, không phải flat

Trong khi tôi viết bài này, Google đang phát hành ngôn ngữ “Material Design” cho các sản phẩm của mình. Một ngôn ngữ thị giác thống nhất — mà cốt lõi của nó — tìm cách mô phỏng, bắt chước thế giới thực.

Ví dụ: từ hướng dẫn của Material Design, chúng ta có thể hiểu được độ sâu khác nhau bằng cách sử dụng đổ bóng ở các cấp độ khác nhau.

Đây là thứ mà tôi thấy khắp nơi. Mô phỏng khéo léo đời thực để truyền tải thông tin. Từ khóa: khéo léo. Bạn không thể phủ nhận là nó không mô phỏng thế giới thực. Nhưng đây cũng không phải là web của những năm 2006. Không có texture, dải màu, điểm sáng.

Tôi nghĩ Flatty chính là xu hướng thiết kế tương lai. Tuy vậy chúng ta cùng trở lại quá khứ một xíu:

Trên đây là phần tóm tắt ngắn cho Quy tắc số 1 trước, hy vọng các bạn sẽ hiểu được phần nào nguyên tắc này trước nhé. Hẹn gặp các bạn ở các phần Quy tắc tiếp theo. 

Trên đây là bài dịch từ bài viết gốc của một tác giả. Các bạn muốn hứng thú tìm hiểu đọc sâu hơn thì theo đường link bên dưới nhé:

https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda