Tỷ lệ vàng – Nguyên tắc về hình thức và bố cục

125bb5f1df3019a705ad9174390bb111

Tỷ lệ vàng – Nguyên tắc về hình thức và bố cục

Bây giờ, chúng ta sẽ xem xét một chủ đề bắt nguồn trực tiếp từ toán học và chúng ta cũng có thể tìm thấy xung quanh mình – tỷ lệ vàng . Đừng lo lắng; chúng tôi sẽ không trở lại lớp học lâu. Chúng ta sẽ xem xét khái niệm này là gì và chính xác nó là một phần cơ bản của việc làm cho thiết kế đẹp mắt người dùng đến mức nào.

Câu chuyện của tỷ lệ vàng là một câu chuyện của truyền thuyết. Với lịch sử gần như từ thời Pi (một công thức toán học tuyệt vời khác, rất cần thiết để hiểu các tính chất của vòng tròn), các học giả, bao gồm cả Pythagoras và Euclid, đã gọi nó bằng nhiều tên, bao gồm cả ý nghĩa vàng và phần thần thánh .

Sự hấp dẫn của tỷ lệ này là gì? Trong nhiều thế kỷ, người ta cho rằng nghệ thuật, kiến ​​trúc và thiên nhiên hấp dẫn mắt hơn khi tỷ lệ của các thiết kế và cấu trúc dựa trên tỷ lệ vàng. Bạn có thể tìm thấy các ví dụ về tỷ lệ vàng trong nỗ lực của con người từ thời Hy Lạp cổ đại. Các bức tượng Parthenon dường như thể hiện tỷ lệ vàng trong hình dạng của chúng, và một số trong số năm chất rắn của Plato (bao gồm cả khối lập phương và khối mười hai) cũng có liên quan đến nó. Tỷ lệ vàng đã được phổ biến trong thời kỳ Phục hưng, và các nghệ sĩ thời kỳ đó đã tìm cách đảm bảo rằng nó được sử dụng để mang lại những tác phẩm có tính thẩm mỹ cao. Ngày nay, chúng ta có thể sử dụng tỷ lệ vàng trong các thiết kế web và ứng dụng của mình để cải thiện bố cục và thu hút người nhìn, đặt trọn niềm tin vào thực tế lâu đời này.

Tỷ lệ vàng là gì?

125bb5f1df3019a705ad9174390bb111

Tỷ lệ vàng đã được sử dụng trong suốt lịch sử để tạo ra các thiết kế hấp dẫn về mặt thị giác. Trong thời kỳ Phục hưng, nó đã trở thành một phần chính thức của lý thuyết thiết kế. Sự xuất hiện thường xuyên của nó trong hình học (với những hình dạng như ngũ giác và ngôi sao năm cánh) đã thu hút sự chú ý của các nhà toán học Hy Lạp cổ đại, những người đã bắt đầu nghiên cứu nó ít nhất 2400 năm trước. Tỷ lệ dựa trên mối quan hệ giữa các số liên tiếp trong dãy Fibonacci. Fibonacci là một nhà toán học người Ý thời trung cổ; tuy nhiên, bạn không cần phải là một nhà toán học để hiểu chuỗi này, vì nó rất đơn giản.

Mỗi số trong dãy Fibonacci chỉ đơn giản là tổng của hai số trước nó. Nó bắt đầu bằng 1, 1 (tức là 1 + số 0 = 1 không nhìn thấy) và 10 thành viên đầu tiên của dãy là 1, 1, 2, 3, 5, 8, 13, 21, 34, 55. Nó tiếp tục vô hạn . Chúng tôi có thể tính toán tỷ lệ bằng cách sử dụng công thức trên (chúng tôi sử dụng chữ cái Hy Lạp Phi để biểu thị sản lượng). Tỷ lệ xấp xỉ 1,618, mặc dù, giống như Pi , nó có một chuỗi số dài sau dấu thập phân. Tuy nhiên, đối với mục đích của chúng tôi, chúng tôi không phải lo lắng về việc vượt qua 1.618.

Tỷ lệ được sử dụng trong thiết kế như thế nào? Hãy nghĩ về một hình chữ nhật, với chiều dài cạnh ngắn là 1. Để tính hình chữ nhật đẹp nhất về mặt thẩm mỹ, bạn chỉ cần nhân chiều dài của cạnh ngắn với tỷ lệ vàng xấp xỉ 1,618. Vì vậy, cạnh dài, trong trường hợp này, sẽ có chiều dài là 1,618.

Nếu bạn có sẵn bút chì, giấy và thước kẻ, hãy thử vẽ một hình chữ nhật theo tỷ lệ này. Hoặc, nếu bạn có thể chuyển sang màn hình khác, hãy tạo một màn hình trong ứng dụng vẽ. Những gì bạn sẽ thấy trước mắt không chỉ là bất kỳ hình chữ nhật nào mà là hình chữ nhật lý tưởng !

Chúng ta có thể tìm thấy tỷ lệ vàng trên khắp thế giới thiết kế. Các kiến ​​trúc sư thời đó đã sử dụng nó để làm nền và chiều cao của Acropolis ở Hy Lạp. Nó được sử dụng để xác định định dạng của phần lớn sách trên tủ sách thực của bạn. Đó là nghĩa đen ở mọi nơi bạn nhìn. Có lẽ bởi vì chúng ta được bao quanh bởi những con số và hình dạng bắt nguồn từ tỷ lệ vàng, chúng ta đã trở nên đặc biệt quen với nó. Là nhà thiết kế, chúng tôi cần ghi nhớ khái niệm về sự thoải mái và quen thuộc cho người dùng của chúng tôi. Con mắt của thế giới nhìn tỷ lệ này một cách thuận lợi. Trên thực tế, theo nghĩa đen: tạp chí National Geographic sử dụng một hình chữ nhật màu vàng được cân đối theo tỷ lệ vàng.

 

Tuy nhiên, tỷ lệ vàng không chỉ giúp chúng ta tạo ra những hình chữ nhật đẹp. Bạn cũng có thể tạo hình xoắn ốc bằng cách sử dụng độ dài các cạnh dựa trên thứ tự giảm dần của dãy Fibonacci. Vì vậy, nếu chúng ta lấy độ dài 55 làm điểm bắt đầu, chúng ta có thể tạo hình xoắn ốc bằng cách vẽ nó vào trong để khi nó vượt qua điểm bắt đầu đó, độ dài mới là 34. Chúng ta tiếp tục làm việc hướng vào trong với độ dài 21, 13, 8, 5, v.v. cho đến khi chúng ta đến giữa (chiều dài = 1). Hình xoắn ốc này cũng dựa trên tỷ lệ vàng và có thể thú vị hơn một hình xoắn ốc cân bằng đối với mắt người. Nó có mặt trong tự nhiên, từ thực vật đến động vật có vỏ và động vật thân mềm. Ngay cả tỷ lệ cụ thể của nhiều loài động vật lớn hơn (bao gồm cả con người!) Thường được cho là tỷ lệ theo tỷ lệ vàng. Theo nghĩa đó, có thể nói rằng đó là một phần của chúng ta. Cho nên, bạn với tư cách là nhà thiết kế có thể sử dụng kiểu xoắn ốc này để thu hút ánh nhìn của người dùng từ bất kỳ nơi nào trên thế giới và tập trung họ vào một điểm cụ thể trong thiết kế của bạn. Nghiên cứu đã chỉ ra rằng mắt người xác định (và não bộ diễn giải và xử lý) hình ảnh dựa trên tỷ lệ vàng nhanh hơn so với các hình ảnh không kết hợp tỷ lệ này.

Chúng ta cũng có thể sử dụng tỷ lệ vàng để cân bằng các yếu tố bên trong các yếu tố khác. Logo của Toyota và Pepsi tận dụng thực tế này. Toyota sử dụng tỷ lệ để cân bằng các hình bầu dục trong logo của họ và Pepsi sử dụng tỷ lệ này để cân bằng các hình tròn trong logo của họ. Bạn có thể nghĩ ra bất kỳ thương hiệu nào khác khai thác tỷ lệ “kỳ diệu” này không? Có lẽ đó là thứ có thể làm cho logo thực sự mang tính biểu tượng!

Tính tỷ lệ vàng

Bây giờ chúng ta hãy đi xuống một số toán học. Như với hình ảnh hiển thị ở đầu bài học này, công thức tính tỷ số rất đơn giản. Nó là mối quan hệ giữa hai mặt của một thiết kế (thường là chiều ngang và chiều dọc). Không quan trọng mặt nào chúng ta chọn là dài nhất (A) và chúng ta chọn cạnh nào là ngắn nhất (B). (Mặc dù nếu bạn đang cố gắng xem liệu tỷ lệ vàng đã được sử dụng trong một tác phẩm khác hay chưa, bạn sẽ cần phải theo dõi xem cạnh nào dài nhất hoặc ngắn nhất.)

Công thức cho điều này là:

A / B = (A + B) / A = 1,618033987 = Φ

Φ là chữ cái Hy Lạp Phi – cách chúng ta đại diện cho tỷ lệ vàng. Tại sao A / B = (A + B) / A? Đó là bởi vì chúng ta đang tuân theo dãy Fibonacci và A và B (nếu được biểu thị bằng số nguyên) chỉ đơn giản là hai số liên tiếp trong dãy đó. May mắn thay, chúng ta có thể ước tính con số này là 1,6 hoặc 1,61 hoặc 1,618 trong các thiết kế mà không làm khuất phục sức hấp dẫn thẩm mỹ của tỷ lệ vàng. Đôi mắt của chúng tôi không bận tâm với những sai lệch nhỏ như vậy.

Cách sử dụng tỷ lệ vàng trong thiết kế của bạn

Bạn có thể sử dụng tỷ lệ vàng trong các thiết kế của mình một cách dễ dàng. Sử dụng các ứng dụng như Adobe Photoshop và Adobe Illustrator, bạn có thể tạo các hướng dẫn hoặc lớp sẽ giúp bạn thiết kế bằng tỷ lệ vàng.

Nếu phần mềm của bạn không tự động tính toán tỷ lệ vàng, bạn luôn có thể sử dụng một công cụ trực tuyến để giúp chỉ định tỷ lệ cho độ dài các cạnh. Dưới đây là ba công cụ như vậy:

Tỉ lệ vàng

Máy tính

Atrise Golden Section

 

Mang đi

Tỷ lệ vàng mà các nhà triết học, toán học, kiến ​​trúc sư, nghệ sĩ và nhà thiết kế đã sử dụng trong hơn hai nghìn năm, là cơ bản cho cả nhà thiết kế và người dùng. Các thiết kế như logo Pepsi và thậm chí là các hình dạng tự nhiên mang các tỷ lệ của quy tắc vàng, chẳng hạn như vỏ nautilus, bao quanh chúng ta.

Bởi vì những hình thức này rất phổ biến, mắt của chúng ta xác định chúng một cách nhanh chóng và chúng ta có xu hướng xử lý chúng như quen thuộc và dễ chịu. Mặc dù tỷ lệ vàng đã là một chủ đề nghiên cứu trong nhiều thế kỷ và được người Hy Lạp cổ đại biết đến, nhà toán học người Ý thời trung cổ Fibonacci đã xác định dãy số nổi tiếng của mình. Sử dụng điều này (trong đó một dãy số, bắt đầu bằng 1,1, sao cho chúng ta thêm số đứng trước vào số đứng sau nó) là chìa khóa để hiểu tỷ lệ vàng (mà chúng ta biểu thị bằng chữ cái Hy Lạp Phi ).

Chúng tôi sử dụng rộng rãi tỷ lệ vàng trong thiết kế web và ứng dụng. Đặc biệt, nó rất dễ kết hợp khi xây dựng wireframe. Bạn có thể đảm bảo rằng nội dung bạn cần được ưu tiên đúng mức và nhu cầu thẩm mỹ của bố cục sẽ được đáp ứng mà không cần thực hiện quá nhiều công việc thiết kế lúc đầu. Chẳng hạn, chỉ khi bạn quyết định nơi bạn sẽ đặt các phần tử và tính năng trên khuôn khổ này thì công việc mới trở nên liên quan hơn.

Trong hình trên cùng trong ví dụ trên, tỷ lệ giữa vùng nội dung và thanh bên bằng Phi (1.618). Bạn có thể kiểm tra điều này bằng các phép đo dưới đây:

  • Tổng chiều rộng của bố cục cố định là 960 px. Bạn chia vùng này thành một vùng nội dung và một thanh bên. Khu vực nội dung là khu vực dài hơn trong hai khu vực.
  • Nếu bạn chia tổng chiều rộng của 960 px cho 1.618, bạn sẽ có 593 px. Sau đó, bạn chỉ định độ dài này cho vùng nội dung.
  • Bạn gán 367 px còn lại cho thanh bên.

Vì đây là một tỷ lệ nên nó rất linh hoạt. Điều này có nghĩa là bạn có thể dễ dàng áp dụng nó để tạo nhiều bố cục thiết kế, vì không cần sử dụng các số cố định. Tất cả những gì bạn cần làm là chỉ định rằng khu vực dài hơn dài hơn 1.618 lần so với khu vực ngắn hơn.

Bạn có thể áp dụng tỷ lệ vàng trong bất kỳ phần nào của bố cục trang của mình. Ví dụ: bạn có thể sử dụng tỷ lệ vàng trong tiêu đề để thu hút sự chú ý của người dùng và sau đó lặp lại nó trong phần nội dung.

Trong hình dưới (trên), chúng ta cũng thấy dạng xoắn ốc sử dụng tỷ lệ vàng. Sử dụng dãy Fibonacci theo thứ tự giảm dần để áp dụng cho độ dài của một cạnh xoắn ốc, chúng ta có thể dễ dàng tạo các thiết kế xoắn ốc dựa trên tỷ lệ vàng.

Là nhà thiết kế, chúng tôi tìm thấy vô số phần mềm có sẵn giúp chúng tôi dễ dàng khai thác tiềm năng của tỷ lệ vàng trong các sáng tạo của mình và tối ưu hóa trải nghiệm người dùng . Adobe, với Photoshop và Illustrator, là một công ty cung cấp sự trợ giúp tuyệt vời này.

Start typing and press Enter to search

Shopping Cart