如何在網頁設計中使用黃金分割率?

發布時間:2019-10-29 09:55:00

黃金比例適用于平面布局的所有領域,特別是平衡文本內容的權重。它可以幫助設計師創建層次結構,并吸引用戶對特定領域的注意力。

如何在網頁設計中使用黃金分割率?

黃金比例適用于平面布局的所有領域,特別是平衡文本內容的權重。它可以幫助設計師創建層次結構,并吸引用戶對特定領域的注意力??纯聪旅孢@個網站的例子,看看設計師是如何使用它的!

如果從這個金色矩形中剪切出一個矩形,則會留下另一個金色矩形:

你可以繼續用更小的矩形做同樣的事情,然后繼續切片,無限循環,你會得到這個熟悉的圖像:

斐波那契數列類似于黃金比率,但并不完全如此。這是一系列數字。序列中的下一個數是前兩個數的和。例如:0,1,1,2,3,5,8,13,21,34,55,89,144,233,377…這個規則公式是xn=xn-1+xn-2。

假設我們從一個正方形開始,然后再添加另一個正方形,我們得到一個需要的矩形:

然后,我們添加另一個矩形,該矩形等于最長矩形的總長度:

一次又一次:

這可以無限期地持續并產生相同的金色矩形效果,但這次是新的,而不是切片。黃金比率和斐波那契數列都能使我們得到有吸引力的比例。

YourLocalStudio是一個基于設計和開發的網站,位于丹麥哥本哈根。他們擅長使用任何形式的視覺概念和創造經驗來優化網頁。

這個網站有兩三個頁面,黃金比例。主頁是對關鍵信息的概念性解釋。但是,當您訪問studio頁面時,您會發現它結合了一點傳統的web布局和黃金矩形,例如以下頁面:

mashable是一個新聞網站,一個信息源,“互聯一代”的知識和資源。

我使用黃金比率測試UX(用戶體驗)觸發器來演示Masabess如何使用Fibonacci序列布局、靈活的內容布局、左標題和鏈接到更多的新聞,由網格分隔。

黃金比例在這里非常有效,因為它允許內容驅動的網站給信息排版提供喘息空間。類似的網站,使用傳統的網格布局,似乎是密密麻麻的,但mashable顯示黃金比例是非常有效的,甚至是看不見的。

jackson&kent是一家來自法國的網絡制作代理。他們專注于數字服務,如HTML5、CSS3、Drupal、WordPress、PHP/MySQL、Flash等。

上面的屏幕截圖顯示了布局如何主要包括以前客戶的工作項。它還有一個關于組織本身的內容,屏幕有一個導航欄,即“聯系人”按鈕。它還使用黃金分割網格系統,并以獨特的方式組織布局。

這里的示例鼓勵您翻譯網站并探索其內容,使內容在網格視圖和不同大小的塊形狀中更加直觀和有趣。因為用戶可能在屏幕上觀看內容(在平板上),所以在水平軸導航上也有分頁編號。這是一種查看每一部分內容的新穎方法,它將用戶界面作為一個整體。

黃金分割率自然會吸引用戶的眼球到頁面上的某個特定點。作為一個概念,它可以幫助您思考內容的布局,并有效地利用層次結構、組合布局、排版、顏色和總體原則。它將有助于提升你的設計水平到一個新的階段。


聯系我們,談您的需求

立即咨詢
青海十一选五走势图表