Thiết kế White space – w3seo Thiết kế không gian trắng trong website

Rate this post

Mọi thiết kế đều bắt đầu với một khung trống. Cho dù bạn thiết kế trang web hay ứng dụng dành cho thiết bị di động, bạn bắt đầu với một trang hoặc màn hình trống, sau đó thêm các yếu tố như văn bản, ảnh, nút, menu, v.v. Nó có thể hấp dẫn để lấp đầy toàn bộ không gian bằng nội dung, nhưng làm như vậy có thể khiến giao diện người dùng (UI) trông lộn xộn và không hấp dẫn.

Sự rõ ràng là một đặc tính không thể thiếu của một thiết kế đẹp, vì giao diện người dùng phải rõ ràng để tất cả người dùng có thể tương tác với sản phẩm một cách hiệu quả. Điều này xảy ra khi các nhà thiết kế kết hợp nhiều white space vào tất cả các phần tử của trang từ trên xuống dưới.

Bài viết này sẽ thảo luận về khái niệm white space và chia sẻ năm ví dụ thực tế về cách sử dụng nó để tạo ra một cái nhìn gọn gàng.

Các bài viết liên quan:

White space trong thiết kế là gì?

white space, còn được gọi là “không gian âm”, là không gian trống xung quanh nội dung và các yếu tố chức năng của trang. Vai trò cơ bản của white space là giúp thiết kế của bạn dễ thở bằng cách giảm lượng văn bản và các yếu tố chức năng mà người dùng nhìn thấy cùng một lúc.

Mặc dù được gọi là “trắng”, không gian này không nhất thiết phải có màu trắng. Bất kỳ loại không gian nào làm nền cho nội dung hoặc các yếu tố chức năng đều có thể được coi là white space.

Các yếu tố của white space trong giao diện người dùng là:

  • Khoảng cách dòng và khoảng cách giữa các chữ cái cho văn bản.
  • Lề và đệm xung quanh các yếu tố chức năng như nút.

White space design: 5 ví dụ thực tế

Bây giờ bạn đã biết white space là gì và cách xác định nó trong thiết kế của bạn, đây là một số mẹo thực tế về cách áp dụng white space:

1. Làm cho văn bản dễ đọc hơn

Phần lớn thông tin chúng ta có trên web và trong các ứng dụng dành cho thiết bị di động là ở dạng văn bản. Vì vậy, điều cần thiết là phải thiết kế theo cách giúp người dùng đọc nội dung của bạn dễ dàng hơn. white space có thể nâng cao khả năng đọc bằng cách theo dõi nội dung và xem các yếu tố trên trang dễ dàng hơn.

Nếu bạn muốn sử dụng white space để làm cho nội dung bằng văn bản dễ đọc hơn, bạn cần điều chỉnh chiều cao dòng (khoảng cách theo chiều dọc giữa các dòng văn bản). Khi chiều cao dòng quá chật, người dùng sẽ khó đọc văn bản hơn vì bản sao sẽ không có đủ chỗ thở. Đồng thời, quá nhiều white space giữa các dòng có thể phá vỡ luồng đọc, vì các dòng trong văn bản bị ngắt kết nối.

Vì vậy, làm thế nào để bạn tìm thấy khoảng cách dòng lý tưởng? Bạn nên chọn chiều cao dòng tương ứng với kích thước phông chữ. Chiều cao dòng tối ưu cho nội dung văn bản là từ 120% đến 145% kích thước phông chữ.

2. Tạo kết nối giữa các phần tử riêng lẻ

white space có tác động to lớn đến cách mọi người lĩnh hội thông tin vì các mối quan hệ nội dung được xác định bởi không gian âm xung quanh. Định luật tiệm cận, một trong những định luật Gestalt cơ bản, nói rằng các vật thể nằm gần nhau có vẻ giống nhau. Có thể nói rằng white space đóng vai trò như một tín hiệu trực quan để cung cấp cho bộ não của chúng ta tín hiệu rằng hình ảnh bên dưới không phải là một tập hợp các đối tượng riêng lẻ mà là một đơn vị duy nhất.

Bạn có thể dựa vào quy tắc này khi bạn thiết kế các biểu mẫu web. Bạn nên đặt nhãn gần các trường có liên quan hơn để tạo một đơn vị duy nhất.

3. Hướng sự chú ý của người dùng đến các đối tượng cụ thể

Thiết kế tốt hướng dẫn người dùng thông qua các tương tác trên một trang và white space đóng một vai trò quan trọng trong quá trình này. Có thể xác định mối quan hệ giữa lượng white space và sự chú ý của người dùng — chúng tôi càng thêm white space gần một đối tượng cụ thể, thì đối tượng đó càng nhận được nhiều sự chú ý từ người dùng. Điều này xảy ra khi khu vực mà đối tượng ở gần không có gì làm phân tán ra khỏi nó.

Kỹ thuật sử dụng white space để thu hút sự chú ý của người dùng hoạt động tốt cho các trang đích của quảng cáo. Có thể hướng sự chú ý của người dùng đến nội dung hoặc các yếu tố chức năng cụ thể (chẳng hạn như các nút gọi hành động) bằng cách sử dụng white space.

Các nhà thiết kế có thể sử dụng một bài kiểm tra năm giây đơn giản để đo lường yếu tố nào nhận được nhiều sự chú ý của người dùng hơn trên một trang. Để làm điều này, hãy xem trang của bạn trong năm giây, nhắm mắt và nói những gì bạn nhớ. Nếu bạn đặt tên cho các phần tử phù hợp (những phần tử bạn muốn người dùng của mình nhìn thấy), bạn đã sử dụng white space đúng cách.

4. Tạo hệ thống phân cấp trực quan trên một trang

Hệ thống phân cấp trực quan là tổ chức nội dung để giúp người dùng dễ dàng xử lý thông tin trên trang. Khi khách truy cập mở một trang mới, họ sẽ quét nó hơn là đọc nó. Hệ thống phân cấp trực quan tốt cải thiện đáng kể khả năng quét của một trang web.

white space cho phép các nhà thiết kế tạo ra một dòng chảy chung mà mắt người dùng sẽ theo dõi khi họ quét một trang. Có hai cách tiếp cận cơ bản để đặt các phần tử trên lưới thiết kế web: đối xứng và không đối xứng.

Bố cục đối xứng có thể dễ nhìn hơn. Vì thiết kế đối xứng đã có sẵn trật tự và ổn định, nên não bộ sẽ dễ dàng hiểu thông tin hơn.

Mặt khác, không đối xứng là sự vắng mặt của đối xứng. Trong thiết kế, sự bất đối xứng thường được sử dụng để tạo ra sự căng thẳng cho thị giác. Các nhà thiết kế thường tạo bố cục không đối xứng để thu hút sự chú ý đến một khu vực hoặc các phần tử cụ thể trên trang.

Điều quan trọng cần nhớ là phải cân đối cả bố cục đối xứng và không đối xứng. Để làm chủ sự cân bằng, bạn cần đo trọng lượng trực quan của từng yếu tố riêng lẻ trong bố cục của mình. Trọng lượng trực quan phụ thuộc vào kích thước của một phần tử (các vật nhỏ hơn nặng hơn các vật lớn hơn) và các thuộc tính trực quan, chẳng hạn như độ tương phản (các phần tử tương phản thu hút nhiều sự chú ý hơn các phần tử trung tính).

5. Truyền đạt cảm giác thanh lịch

white space có tác động đáng kể đến cách thiết kế của bạn được cảm nhận — nó đóng một vai trò quan trọng trong việc định vị thương hiệu. Kết hợp với kiểu chữ sắc nét và khả năng chụp ảnh mạnh mẽ, white space rộng rãi có thể dễ dàng làm cho thiết kế của bạn trông sang trọng. Nó đưa sản phẩm bạn muốn quảng cáo trở nên nổi bật và cho người dùng tín hiệu rõ ràng rằng sản phẩm là phần quan trọng nhất của trang.

white space không bao giờ là không gian lãng phí

white space là một công cụ mạnh mẽ trong hộp công cụ của nhà thiết kế. Được áp dụng đúng cách, nó trở thành một phần không thể thiếu của thiết kế trực quan, đóng vai trò như chất kết dính giữ các phần tử khác nhau trên một trang với nhau đồng thời cải thiện khả năng sử dụng của giao diện. 

Hãy nhớ xem xét white space giao diện người dùng ngay từ đầu của một dự án và tạo một hệ thống khoảng cách chỉ định tập hợp các giá trị khoảng cách có thể có. 

Khi hệ thống khoảng cách trắng trở thành một phần của hệ thống thiết kế trải nghiệm người dùng (UX) của bạn, nó buộc bạn phải chọn từ danh sách các giá trị được xác định trước, cho phép bạn tạo ra một thiết kế nhất quán hơn.