7 Quy Tắc Thiết Kế UI Tuyệt Đẹp (Dành Cho Dân Không Chuyên)-P.3
Lần trước tôi đã chia sẻ xong ở phần Quy Tắc số 2 về màu sắc (Xem lại Quy Tăc 1 và Quy Tắc 2). Tiếp nối sau đây chúng ta cùng tìm hiểu Quy Tắc số 3:
Quy tắc 3: Nhân đôi whitespace lên
Nếu muốn UI trông ổn, hãy thêm thật nhiều khoảng trống.
Ở quy tắc 2, tôi đã nói rằng Đen và Trắng buộc designer phải suy nghĩ về không gian và bố cục trước khi quan tâm đến màu sắc, và vì sao đó là một điều nên làm. Hmm, giờ thì tôi sẽ nói về không gian và bố cục.
Nếu bạn chỉ dùng HTML, bạn sẽ quen với việc HTML sẽ hiển thị như sau:
Thường thì, mọi thứ sẽ rúc hết lên đầu trang. Font chữ thì nhỏ, không có khoảng cách giữa các dòng. Chỉ có một xíuuu khoảng trống giữa các đoạn. Đoạn văn thì trải dài tới cuối trang, cho dù là 100px hay 10,000 px.
Về mặt thẩm mỹ mà nói, thật là kinh khủng. Nếu bạn muốn UI trông giống như đã được bỏ thời gian nghĩ về thiết kế, bạn cần phải thêm rất nhiều khoảng trống.
Whitespace, HTML, và CSS.
Nếu bạn giống tôi, trước đây, khi viết CSS, tôi thường không dùng whitespace. Đã đến lúc rèn lại bản thân khắc phục tật xấu. Hãy bắt đầu nghĩ whitespace là điều mặc định — mọi thứ đều bắt đầu với whitespace.
Đây là một ý tưởng trình chơi nhạc của Piotr Kwiatkowski.
Hãy chú ý đặc biệt đến menu bên trái.
Menu trái
Khoảng trống giữa các danh mục menu gấp đôi chiều cao của chữ. Bạn đang nhìn font chữ 12px với padding trên và dưới cũng ngần đó.
Hoặc hãy nhìn vào 2 tiêu đề.
Khoảng cách giữa chữ “PLAYLISTS” và phần gạch chân là 15px. Nhiều hơn cả kích thước của font. Đấy là còn chưa kể tới 25px cách nhau giữa các danh sách.
Phần sidebar bên phải có không gian rộng rãi giữa các dòng.
Piotr rất chú tâm đến cách thêm các khoảng không gian, và kết quả rất thành công. Dù đây chỉ là một concept cho vui (theo như tôi được biết), nhưng về mặt thẩm mỹ thì đủ để so sánh với các UI âm nhạc tốt nhất.
Thêm whitespace rộng rãi và hào phóng sẽ giúp giao diện của những trang rối rắm nhất trở nên đơn giản và mời gọi — ví dụ như diễn đàn.
Forum design concept bởi Matt Sisto
Hoặc Wikipedia.
Wikipedia design concept bởi Aurélien Salomon
Thêm space giữa các dòng.
Thêm space giữa các thành phần.
Thêm space giữa các nhóm thành phần.
Phân tích xem cái nào nhìn ổn.
Đấy là những gì cần lưu ý ở Quy Tắc số 3. Vậy chúng ta đã đi qua được nửa chặng đường với 3 Quy Tắc đầu tiên:
- Ánh sáng chiếu từ trên xuống
- Đen và trắng trước
- Sử dụng gấp đôi whitespace
Hẹn gặp lại các bạn ở Phần tiếp theo còn lại cho 4 Quy Tắc cuối cùng nhé!
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ự
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
