[ 平面理論教程 ] 詳細解析黃金比例在UI設計中的運用- 設計教程 - 骨子愛創意

教學主題: 詳細解析黃金比例在UI設計中的運用

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 詳細解析黃金比例在UI設計中的運用

這教學的重點為這幾點 [ 設計,運用,比例,解析,黃金,詳細,一個,我們,這個,得到, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

文章介紹了黃金比例在自然界和UI設計中的運用，讓你的界面設計更有依據，瞬間逼格提升。

“黃金比例”在建築、機械、logo和圖片設計中扮演着重要的角色。這裡我不想寫太多關於什麼是黃金比例的東西，你可以在維基百科上了解到。我只能簡明地說下：我們的知覺傾向於協調和美觀，我認為黃金比例是讓產品變得更舒適和美觀的最優雅方式。簡而言之，它是一種尋求設計平衡的工具。

這個技巧在界面設計中並不流行，因為它看起來很難。我會以一些簡單的術語來解釋——如何建立一個典型的黃金比例並把它運用到實踐。

幾何圖形

黃金比例的黃金分割率是1:1.618。這很容易畫出來：

首先畫一個正方形

從正方形的中間(A點)畫一條斜線到對角(B點)

畫一段弧線。通過畫圓得到了一個矩形。正方形和矩形組成的圖形就是“黃金比例矩形”。

如果我們在大和小的矩形里畫斜線，在交叉的地方就能得到一個焦點。把最重要的界面元素放在這個點來吸引用戶的注意力，這是個好主意。

這個形狀獨特的屬性在於它的分割性，我們能得到一個更小的包含了一個正方形和一個矩形的矩形，一種反向變大。

最美妙的是：如果每個弧半徑等於正方形的邊，我們就可以得到黃金比例的螺旋形。

矩形可能會旋轉或調整到畫布或界面的理想尺寸。

現在是三角形

畫一個三角形，一邊是另一邊的兩倍

以B點為中心，AB為邊長畫一條弧線。弧弦交叉得到了D點。

現在以C點為中心，CD為邊長畫一條弧線，我們得到了E點。

從E點畫一條直線與斜邊相交。

結果是，我們能得到其他更小的等比例三角形。順便說下，有一個顯而易見的黃金比例，那就是一個元素是另一個元素的1.618倍。

自然之美

如果我們不斷地分割三角形，在三角形之間畫圓弧，為什麼幾乎所有自然界的事物都遵循着黃金法則，就會變得很清晰。有時它們是以斐波那契數列排列：

1,1,2,3,5,8,13,21,34,55,89，..

(每個連續的數字都是前面兩個數字之和)

如果你畫了這個黃金比例的螺旋形，以40或60度進行旋轉，你會創造出這個美麗的圖形：

這是一個以20度的角度進行旋轉的效果和水平形狀的一個投射：

使用了黃金比例，能畫出任何圖形用在圖標、logo、界面等的設計中。

移動界面的設計

我做了兩個例子來說明黃金比例的應用。第一個是ASOS商店的一個卡片產品。這個app的第一屏只能看到圖片和“喜歡、播放、分享”的操作區域。這個設計並不是很舒適，因為你必須滑動頁面去找到產品大小、顏色、材質的描述或加到購物車的按鈕。結果是，快速地查看產品變得很困難。

如果你畫一個黃金比例的矩形，怎麼擺放元素就變得有依據了。這種結構可以使第一屏展示更合理的用戶數據。

正如我們看到的，在焦點區有“喜歡”操作，這個app的一個關鍵性的操作。

在舒適的範圍內，元素是醒目的，每個元素，從屏幕的邊緣，一個拇指就很容易按到。

第二個例子就是博客界面。矩形可以把所有東西都放進來：我們有一個很大的圖片，以及很大的文字區域。如果圖片是基於黃金比例，並不會扭曲移動尺寸。

把“喜歡”和“評論”放在右下角會讓它們顯得更大，但並不張揚。它們不會蓋過圖片，然而對用戶可見。

希望你不會對1:1.618這個比例感到害怕，趕緊去用在你的界面設計中吧。

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 詳細解析黃金比例在UI設計中的運用 這教學會喜歡

文章標題: 骨子愛創意- 詳細解析黃金比例在UI設計中的運用–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 設計,運用,比例,解析,黃金,詳細,一個,我們,這個,得到,

本文永久連結 :詳細解析黃金比例在UI設計中的運用

本文轉載自 :VIA