Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng bạn mở hai màn hình cùng một ứng dụng đặt vé máy bay. Màn hình A: mọi thứ trông "gọn gàng", nhưng bạn phải quét mắt qua lại vài lần mới tìm được nút "Đặt vé". Màn hình B: chỉ trong một cái liếc, mắt bạn tự động dừng lại đúng chỗ cần dừng — giá vé nổi bật, nút hành động rõ ràng, thông tin phụ lùi về sau. Cả hai màn hình có thể dùng cùng một bộ màu, cùng một font chữ. Khác biệt nằm ở các nguyên tắc thiết kế thị giác (visual design principles) — thứ quyết định mắt người nhìn đi đâu, cảm thấy dễ chịu hay rối rắm.
Đây là bài học đầu tiên của cả khóa, và nó là nền móng. Trước khi bạn học Figma, học Auto Layout, học design token hay quy trình bàn giao cho lập trình viên, bạn cần hiểu những định luật cơ bản chi phối cách con người tiếp nhận hình ảnh. Nếu thiếu nền này, bạn sẽ chỉ là người "vẽ đẹp theo cảm tính" — làm được sản phẩm trông ổn nhưng không giải thích được vì sao, và không sửa được khi nó trông sai.
Trong bài này chúng ta đi vào bốn nguyên tắc nền tảng nhất mà mọi giao diện tốt đều tuân theo: Hierarchy (phân cấp thị giác), Contrast (tương phản), Balance (cân bằng) và Alignment (căn chỉnh). Đây là góc nhìn tổng quan, "bức tranh lớn". Những bài sau sẽ đào sâu từng phần — ví dụ Bài 4 mổ xẻ riêng cách tạo hierarchy bằng size/weight/color/spacing, Bài 5 nói về Gestalt, Bài 7 về màu và độ tương phản. Còn ở đây, mục tiêu của bạn là nhìn ra được bốn lực này đang hoạt động trong bất kỳ giao diện nào bạn gặp.
Khái niệm cốt lõi
Thiết kế thị giác không phải là "làm cho đẹp". Nó là sắp xếp thông tin để mắt và não người xử lý dễ dàng nhất. Con người không đọc màn hình từng chữ như đọc sách; chúng ta quét (scan). Bốn nguyên tắc dưới đây là công cụ để bạn điều khiển cái quét đó.
1. Hierarchy — Phân cấp thị giác
Hierarchy trả lời câu hỏi: "Người dùng nên nhìn thấy cái gì trước, cái gì sau?" Không phải mọi thứ trên màn hình đều quan trọng như nhau. Một trang sản phẩm có thể có tên sản phẩm, giá, mô tả, đánh giá, nút "Mua ngay", chính sách đổi trả... Nếu tất cả đều to bằng nhau, đậm như nhau, thì mắt người dùng không biết bám vào đâu — và một giao diện không có điểm nhấn là một giao diện thất bại.
Bạn tạo hierarchy bằng bốn đòn bẩy chính:
- Size (kích thước): to hơn = quan trọng hơn. Tiêu đề lớn, nội dung phụ nhỏ.
- Weight (độ đậm): chữ đậm (bold) kéo sự chú ý mạnh hơn chữ thường.
- Color (màu sắc): màu nổi bật, tương phản cao thu hút mắt; màu xám nhạt lùi ra sau.
- Position (vị trí): trong văn hóa đọc từ trái sang phải, trên xuống dưới (như tiếng Việt), góc trên bên trái thường được nhìn thấy đầu tiên.
2. Contrast — Tương phản
Contrast là sự khác biệt đủ lớn giữa các phần tử để mắt phân biệt được chúng. Contrast không chỉ là màu sáng/tối; nó bao gồm khác biệt về kích thước (chữ 32px cạnh chữ 14px), về màu (đen trên trắng), về hình dạng (nút bo tròn cạnh khối chữ nhật), về khoảng cách.
Contrast phục vụ hai mục đích. Thứ nhất, tạo điểm nhấn: nút "Thanh toán" màu cam trên nền trắng nổi bật vì nó tương phản. Thứ hai, và cực kỳ quan trọng, đảm bảo khả năng đọc: chữ xám nhạt trên nền trắng nhìn "sang" nhưng nếu tương phản quá thấp thì người lớn tuổi hoặc người nhìn trên màn hình ngoài trời sẽ không đọc được. Đây là điểm nối trực tiếp tới accessibility — thứ chúng ta sẽ đo bằng con số cụ thể (tỷ lệ tương phản) ở Bài 7. Bây giờ chỉ cần nhớ nguyên tắc: thiếu tương phản là kẻ thù của khả năng đọc.
3. Balance — Cân bằng
Balance là cảm giác phân bố "sức nặng" thị giác hợp lý trên bề mặt thiết kế, để giao diện không bị nghiêng lệch, không có một góc quá nặng nề trong khi góc kia trống rỗng. Có hai loại:
- Cân bằng đối xứng (symmetrical): hai bên giống nhau như soi gương. Cảm giác trang trọng, ổn định, đáng tin — hay dùng cho ngân hàng, tổ chức chính phủ, thương hiệu cao cấp.
- Cân bằng bất đối xứng (asymmetrical): hai bên khác nhau nhưng vẫn cân bằng về "sức nặng" — ví dụ một khối hình lớn bên trái được cân lại bằng vài dòng chữ và một nút nhỏ bên phải. Cảm giác năng động, hiện đại, thường thấy ở startup công nghệ.
4. Alignment — Căn chỉnh
Alignment là việc các phần tử được sắp thẳng hàng theo một trục vô hình chung. Đây là nguyên tắc bị xem nhẹ nhất nhưng lại là thứ phân biệt rõ nhất giữa "nghiệp dư" và "chuyên nghiệp". Khi các phần tử thẳng hàng — cùng lề trái, cùng lề phải, cùng đường tâm — mắt cảm nhận được trật tự ngầm, thấy giao diện "sạch" mà không giải thích được vì sao. Ngược lại, chỉ cần một nút lệch vài pixel so với khối chữ phía trên, tổng thể lập tức trông cẩu thả.
Có một nguyên tắc vàng: mỗi phần tử nên có một lý do để nằm ở vị trí của nó, và lý do đó thường là "nó thẳng hàng với một thứ khác". Đừng đặt vật thể lơ lửng tùy hứng.
Bốn nguyên tắc này không hoạt động riêng lẻ mà cộng hưởng với nhau. Bạn dùng size + color để tạo hierarchy; hierarchy cần contrast để nổi bật; các khối được sắp cần alignment và balance để tổng thể dễ chịu. Người mới thường học từng cái rời rạc; người giỏi nhìn chúng như một hệ thống.
Tình huống thực tế
Ví dụ 1 — Nút "Đặt ngay" bị chìm trên app đặt đồ ăn
Một nhóm khởi nghiệp ở TP.HCM làm ứng dụng giao đồ ăn (kiểu ShopeeFood, GrabFood) than phiền rằng tỷ lệ khách bấm hoàn tất đơn thấp. Khi xem lại màn hình chi tiết món ăn, vấn đề lộ ra ngay: nút "Đặt ngay" dùng màu xanh lá nhạt, chữ trắng, nằm chung một hàng với ba nút phụ ("Yêu thích", "Chia sẻ", "Đánh giá") có kích thước bằng hệt. Về mặt hierarchy, hành động quan trọng nhất — thứ mang lại doanh thu — lại có sức nặng thị giác ngang với ba hành động vụn vặt.
Cách xử lý: phóng to nút "Đặt ngay" chiếm gần trọn chiều ngang màn hình, đổi sang màu cam đậm tương phản mạnh với nền, để riêng một hàng ở dưới cùng; ba nút phụ thu nhỏ lại thành icon xám ở góc trên. Sau khi điều chỉnh, tỷ lệ hoàn tất đơn trong hai tuần thử nghiệm tăng khoảng 18%.
Bài học: hierarchy và contrast không phải chuyện thẩm mỹ suông — chúng ảnh hưởng trực tiếp đến hành vi và tiền bạc. Hành động quan trọng nhất phải là phần tử nổi bật nhất, không có ngoại lệ.
Ví dụ 2 — Trang chủ ngân hàng số trông "rối" dù màu rất đẹp
Một designer junior tại một ngân hàng số ở Việt Nam thiết kế trang tổng quan tài khoản. Cô chọn bảng màu rất chỉn chu, font đẹp, nhưng khi đưa lên review thì cả nhóm đều thấy "rối mà không biết vì sao". Soi kỹ: số dư tài khoản căn giữa, tên chủ thẻ căn trái, danh sách giao dịch căn phải, nút chuyển tiền lại thụt vào một khoảng lạ. Không có phần tử nào thẳng hàng với phần tử nào — mỗi khối tự chọn một trục riêng.
Cách xử lý: thiết lập một trục căn lề trái thống nhất cho toàn bộ nội dung chính, chỉ giữ số dư nổi bật ở trên. Không đổi một màu nào, không đổi font — chỉ căn thẳng hàng lại. Kết quả: giao diện lập tức "sạch" hẳn, và cả nhóm review đều gật đầu.
Bài học: khi một thiết kế trông rối mà bạn không chỉ ra được lý do, thủ phạm số một thường là alignment. Màu đẹp và font đẹp không cứu được một bố cục lệch trục.
Ví dụ 3 — Landing page bất đối xứng của một startup SaaS
Một startup phần mềm ở Singapore làm landing page giới thiệu sản phẩm. Họ muốn cảm giác hiện đại, năng động chứ không cứng nhắc, nên chọn cân bằng bất đối xứng: nửa trái là một khối tiêu đề lớn cùng nút "Dùng thử miễn phí" màu tương phản mạnh; nửa phải là một ảnh minh họa sản phẩm cỡ lớn. Khối chữ bên trái tuy "nhẹ" hơn về diện tích nhưng nhờ độ đậm của tiêu đề và màu nổi của nút, nó cân lại được sức nặng của tấm ảnh bên phải.
Ban đầu một thành viên đề xuất căn giữa mọi thứ cho "an toàn", nhưng như vậy trang trông giống hàng nghìn template chung chung khác. Bản bất đối xứng giữ được nét riêng mà vẫn cân bằng.
Bài học: balance không có nghĩa là đối xứng. Bất đối xứng có kiểm soát tạo ra năng lượng và cá tính, miễn là bạn cảm nhận và phân bố đúng "sức nặng thị giác" của mỗi khối.
Hướng dẫn từng bước
Đây là quy trình bạn có thể áp dụng cho bất kỳ màn hình nào để kiểm tra và cải thiện theo bốn nguyên tắc.
- Liệt kê độ ưu tiên nội dung. Trước khi động vào màu hay font, viết ra danh sách các phần tử trên màn hình và xếp hạng: cái nào quan trọng nhất (primary), quan trọng vừa (secondary), phụ (tertiary). Đây là bản thiết kế hierarchy trên giấy.
- Dựng hierarchy bằng size và weight trước. Cho phần tử primary kích thước lớn nhất và/hoặc đậm nhất. Đừng vội dùng màu — nếu bố cục đã rõ ràng khi chỉ có đen trắng và các cỡ chữ khác nhau, thì nền tảng của bạn đã vững.
- Kiểm tra bằng "phép thử nhắm mắt". Nhìn màn hình rồi lim dim mắt cho hình ảnh mờ đi. Phần tử nào vẫn nổi bật khi mờ chính là phần tử có sức nặng thị giác cao nhất. Nó có đúng là thứ bạn muốn người dùng thấy đầu tiên không? Nếu không, chỉnh lại size/weight.
- Thêm contrast có chủ đích. Dùng màu và độ tương phản để làm nổi hành động chính và tách các nhóm nội dung. Kiểm tra chữ có đủ tương phản với nền để đọc thoải mái không (ta sẽ đo bằng con số ở Bài 7).
- Căn chỉnh mọi thứ về một hệ trục. Chọn các đường lề chung (ví dụ toàn bộ nội dung căn lề trái theo một trục). Bật lưới/thước trong Figma và kiểm tra không có phần tử nào lệch trục vô cớ.
- Rà soát balance tổng thể. Lùi ra xa màn hình. Có góc nào nặng nề, góc nào trống hoác không? Điều chỉnh vị trí và kích thước để phân bố sức nặng cho đều — dù đối xứng hay bất đối xứng.
- Kiểm chứng với người khác. Đưa cho một đồng nghiệp xem 5 giây rồi hỏi: "Bạn nhớ gì đầu tiên?" Câu trả lời cho bạn biết hierarchy có hoạt động đúng ý đồ không.
Lỗi thường gặp & mẹo
- Làm mọi thứ đều nổi bật = không có gì nổi bật. Người mới thường tô đậm, phóng to, đổ màu mạnh cho nhiều phần tử vì sợ cái nào cũng "quan trọng". Kết quả là mắt bị quá tải. Mẹo: mỗi màn hình nên có một phần tử vô địch (hero) rõ ràng; những cái khác nhường bước.
- Nhầm "khoảng trống" với "lãng phí". Junior hay có xu hướng lấp đầy mọi chỗ trống. Nhưng khoảng trống (white space) chính là công cụ tạo hierarchy và balance — nó cho phần tử "thở" và tách nhóm nội dung. Đừng sợ khoảng trống.
- Căn chỉnh "bằng mắt" thay vì bằng lưới. Kéo phần tử tới lui cho tới khi "trông thẳng" là cái bẫy. Hãy dùng thước, lưới và tính năng snap của Figma để căn chính xác. Sai lệch vài pixel mắt vẫn cảm nhận được.
- Dùng màu để cứu một hierarchy yếu. Nếu bố cục chỉ rõ ràng khi có màu, còn ở chế độ đen trắng thì rối, tức là nền tảng size/weight của bạn chưa ổn. Luôn dựng hierarchy chắc trước, màu chỉ là lớp tăng cường.
- Tương phản quá thấp cho "sang trọng". Chữ xám nhạt trên nền trắng có thể đẹp trên màn hình xịn của bạn, nhưng khách hàng lớn tuổi hoặc dùng điện thoại cũ ngoài nắng sẽ không đọc nổi. Đẹp mà không đọc được thì vô nghĩa.
- Mẹo tổng quát: khi bí, hãy gỡ bỏ bớt thay vì thêm vào. Phần lớn thiết kế rối được cứu bằng cách bớt đi — bớt màu, bớt cỡ chữ, bớt đường viền — chứ không phải thêm.
Bài tập thực hành
- Phân tích ngược (reverse analysis). Mở một ứng dụng bạn dùng hằng ngày (Momo, VNPay, Shopee, hay app ngân hàng của bạn). Chọn một màn hình và chú thích lên ảnh chụp: đâu là hierarchy (primary/secondary/tertiary), contrast được dùng ở đâu, các phần tử căn theo trục nào, balance đối xứng hay bất đối xứng. Viết 3–4 câu nhận xét cái gì tốt, cái gì bạn sẽ sửa.
- Bài tập đen trắng. Lấy một màn hình bất kỳ bạn từng thiết kế (hoặc phác một màn hình đăng nhập đơn giản) và làm lại chỉ với màu đen, trắng, xám — không dùng màu nào khác. Ép bản thân tạo hierarchy rõ ràng chỉ bằng size, weight và khoảng cách. Nếu bố cục vẫn đọc tốt ở dạng này, bạn đã nắm được cốt lõi.
- Thử nghiệm balance. Thiết kế hai phiên bản của cùng một section giới thiệu sản phẩm: một bản cân bằng đối xứng (căn giữa), một bản bất đối xứng (chữ một bên, ảnh một bên). Đưa cho 3 người xem và hỏi bản nào khiến họ chú ý tới nút hành động nhanh hơn. Ghi lại nhận xét.
- Săn lỗi alignment. Chụp màn hình 3 website/app tiếng Việt bất kỳ, kẻ các đường thẳng đứng và ngang lên ảnh, tìm ít nhất một chỗ bị lệch trục ở mỗi cái. Việc này rèn "con mắt" phát hiện lỗi căn chỉnh — kỹ năng cực kỳ giá trị khi làm QA thiết kế sau này.
Tóm tắt
- Thiết kế thị giác không phải "làm cho đẹp" mà là sắp xếp thông tin để mắt và não người xử lý dễ nhất. Con người quét màn hình, và bốn nguyên tắc dưới đây giúp bạn điều khiển cái quét đó.
- Hierarchy quyết định thứ tự người dùng nhìn thấy, tạo ra bằng size, weight, color, position. Hành động quan trọng nhất phải nổi bật nhất.
- Contrast tạo điểm nhấn và bảo đảm khả năng đọc; thiếu tương phản là kẻ thù của accessibility.
- Balance phân bố sức nặng thị giác cho đều — đối xứng cho cảm giác ổn định trang trọng, bất đối xứng cho năng động hiện đại.
- Alignment là thứ phân biệt chuyên nghiệp với nghiệp dư; khi thiết kế trông rối mà không rõ lý do, hãy nghi ngờ căn chỉnh trước tiên.
- Bốn nguyên tắc cộng hưởng với nhau. Hãy dựng hierarchy bằng đen trắng trước, thêm contrast có chủ đích, căn mọi thứ về một trục, rồi kiểm tra balance tổng thể — và khi bí, hãy bớt đi thay vì thêm vào.