Blog

Thiết kế website hiệu quả hơn với “Golden Ratio” ( Tỷ lệ vàng )

Home / Blog / Thiết kế website hiệu quả hơn với “Golden Ratio” ( Tỷ lệ vàng )

2 years ago Comment!

Golden Ratio” được sử dụng trong cách bài trí đồ họa của tất cả các loại, đặc biệt là để cân bằng nội dung đó của những văn bản có dung lượng lớn. Nó có thể giúp các nhà thiết kế tạo ra hệ thống phân cấp và diện mạo của người sử dụng cho các khu vực cụ thể. Các ví dụ sau đây để xem làm thế nào các nhà thiết kế đã sử dụng hiệu quả như thế nào

Golden Ratio là cái gì ?

“Golden Ratio” là một tỷ lệ toán học, thường được tìm thấy trong tự nhiên và sử dụng trong lý thuyết thiết kế cổ điển để tạo ra các tác phẩm cân bằng. Nó gần như tương đương với 1.6180, cũng được gọi là “ Golden Mean” ( bình vàng ),  các “Golden Section” ( phần vàng ) được gọi bằng các chữ cái Hy Lạp “ϕ”.

Một “ Golden Rectangle” ( hình chữ nhật vàng ) là một hình chữ nhật có chiều dài là 1.6180 lần chiều rộng của nó. Ví dụ, 1 div mà có một mặt 300px là 300 * 1.6180 ≈ 485px có thể được xem là “ Golden Rectangle”

1

Nếu bạn cắt ra một hình vuông từ hình chữ nhật vàng, thì bên trái của bạn cũng sẽ có một hình chữ nhật vàng.

2

Bạn có thể làm tương tự với các hình chữ nhật nhỏ hơn bao nhiêu lần đi nữa vẫn sẽ cho bạn những hình chữ nhật vàng quen thuộc

3

Dãy số Fibonacci

Dãy số Fibonacci tương tự như các Golden Ratio nhưng không chính xác như vậy. Đó là một loạt các con số mà các số tiếp theo trong dãy số là tổng của hai phần trước . Ví dụ : 0,1,1,2,3,5,8

Nếu chúng ta bắt đầu với một hình vuông, sau đó sẽ them vào đó một hình vuông khác ta sẽ có được một hình chữ nhật.

4

Sau đó chúng ta them một hình vuông, bằng với chiều dàu nhất của hình chữ nhật, ta sẽ có :

5

Tiếp tục và tiếp tục như thế

6

Điều này có thể vô thời hạn, cho chúng ta những tác dụng tương tự như “ Golden Rectangle”  nhưng lần này tăng lên thay vì cắt giảm. Cả “Golden Ratio” và dãy số Fibonacci cho chúng ta tỷ lệ hấp dẫn như nhau.

Bây giờ, chúng ta phân tích một vài trang web để chúng ta có thể nhìn thấy rõ hơn.

Ví dụ 1 : YStudio

7

Website này giới thiệu về cái gì ?

“Your Local Studio ” này chuyên về thiết kế và xây dựng có trụ sở tại Copenhagen, Đan Mạch. Học chuyên làm việc với các khái niệm trực quan bất kỳ hình thức nào để tạo ra những kinh nghiệm quý giá để cải thiện môi trường xung quanh.

Làm thế nào để sử dụng “ Golden Mean”

Trang web này sử dụng “ Golden Mean” cho hai trong số ba trang của nó. Trang chủ là một cái nhìn tổng quan về các khái niệm quan trọng trong công việc. Tuy nhiên khi bạn truy cập vào trang Studio sẽ có một chút hình dạng của các trang web truyền thống có hình dạng hình chữ nhật ,“ Golden Mean “ khi bạn di chuyển xuống dưới trang.

8

Tại sao có hiệu quả?

Muốn nổi bật trong đám đông? “Your Local Studio” (YLS) đã làm điều đó bằng cách sử dụng “Golden Ratio” trong thiết kế trang web của họ. Các tính năng thiết kế có một tầm nhìn tiến bộ với hệ thống grid nhất định. Bạn có thể lập luận rằng ngày nay tất cả mọi thứ trong giống như bpptstrap… Hãy xem ngày càng nhiều trang web tìm kiếm thu hút sự chú ý với một bố trí nhiều cấu trúc năng động.

Ví dụ 2 : Mashable

9

Website này giới thiệu về cái gì?

Mashable là một trang web tin tức, một tà nguyên thông tin kiến thức và kết nối lại với nhau.

Làm thế nào sử dụng “ Golden Mean”

Họ đã áp dụng “ Golden Mean” từ UX Tigers để chứng minh làm thế nào Mashable sử dụng dãy Fibonacci trong cách bố trí làm sao cho thật linh hoạt, với tiêu đề bên trái và các liên kết để về tin tức thì phái bên phải, các nhau bằng grids.

Tại sao lại hiệu quả?

“Golden Ratio” tại sao lại hiệu quả, ở đây cho phéo một nội dụng hướng tới trang web để cung cấp cho không gian của các kiểu chữ. Các trang web tương tự có thể xuất hiện dày đặc hơn với phần đóng gói nội dung, bố trí sử dụng các grids truyền thống, nhưng Mashable chứng mình rằng các “Golden Ratio” có thể hiệu quả ngay khi nó vô hình.

Ví dụ 3 : Jackson & Kent

10

Website này giới thiệu về cái gì ?

Jackson & Kent là một hãng sản xuất web từ Pháp. Họ chuyên về các dịch vụ kỹ thuật số như HTML5, CSS3, Drupal, WordPress, PHP/MYSQL, Flash….

Làm thế nào để sử dụng “Golden Mean”

Các ảnh chụp màn hình cho thấy các bố trí chủ yếu bao gồm các công việc của khách hàng trước đây. Nó cũng có tính năng  của một khối nội dung về của trang web Jackson & Kent và một thanh điều hướng ở trung tâm màn hình. Các nút bấm liên lạc như hình dưới đây cũng sẻ dụng các “Golden Mean” như là một hệ thống grids để tổ chức bố trí một cách độc đạo.

11

Tại sao lại hiệu quả ?

Các ví dụ ở đây khuyến khích bạn tìm hiểu các nội dụng trang web theo chiều ngang. Quan điểm chấn chia vạch và hình dạng các khối khác nhau làm cho nội dung trực quan hơn rất nhiều. Khi người sử dụng có thể xem nội dung trên máy tính để  bàn ( cũng như máy tính bảng ), có số lượng phân trang trên phần điều hướng trục ngang. Đây là một cách sáng tạo để xem từng đoạn nội dung, mà còn là giao diện người dùng một cách toàn diện.

 

Kết luận

“Golden Ratio” rất tự nhiên để dẫn người dùng vào điểm cụ thể trong một giao diện. Là một khái niệm có thể giúp bạn suy nghĩ về vị trí của nội dung và sử dụng hệ thống phân cấp có hiệu quả. Sự kết hợp của bố cục, kiểu chữ, màu sắc và nguyên tắc bao quát sẽ đưa các thiết kế lên một tầm cao mới.

Categorised in:

Leave a Reply

Your email address will not be published.

*

*

Đang tải…