我們常看(kàn)到(dào)一(yī)些(‌¥αxiē)WEB或UI設計(jì)中運用(≤∑φyòng)黃(huáng)金(jīn)比例、斐波那(nà×☆ε)契數(shù)列、三分(fēn)法等等，優秀的(de)設計(jì)師(shī)通(∞↓♣tōng)常會(huì)靈活運用(yòng)這(zhè)♠★些(xiē)比例來(lái)做(zuò)設計(jì)，隻要(yào)學會(huì)了(l≠ e)設計(jì)作(zuò)品一(yī)般都(dōu)不(bù)差，同時(shí)使用(y☆₹÷òng)這(zhè)些(xiē)比例向甲方解釋設"≈§₩計(jì)稿時(shí)是(shì)不(bù)是(s€£αhì)更有(yǒu)底氣？

比例關系是(shì)設計(jì)時(shí)必須要(yào)考♥≠慮的(de)元素之一(yī)，無論在尺寸、空(kōng)ε​φ"間(jiān)還(hái)是(shì)顔色上(shàng)，比例和(hé)諧與否會(h₩≥₽uì)影(yǐng)響設計(jì)元素之間(jiān)的(de)關系。比↔♥☆例可(kě)以創建視(shì)覺層次，也(yě)可(kě)以産生(shēng)一(yī)種張‌®力或一(yī)種和(hé)諧感。

黃(huáng)金(jīn)比例

黃(huáng)金(jīn)比又(yòu)稱黃(huáng)金(jīn±÷)律，是(shì)指事(shì)物(wù)各部分(fēn)間(jiān)一(yī)定的(de) ≤×♦數(shù)學比例關系，即将整體(tǐ)一(yī)分(fēn)為(wè∞姙i)二，較大(dà)部分(fēn)與較小(xiǎo)部分(fēn)之比等于整>≠體(tǐ)與較大(dà)部分(fēn)之比，其♥↔"比值約為(wèi)1:0.618，即長(cháng)段為(wèi)全段的(de)ε≠‍0.618。0.618是(shì)被公認λ>‌→為(wèi)最具有(yǒu)審美(měi)意義的(de)比例數(shù)字。

那(nà)黃(huáng)金(jīn)分(fēn)割線到(dàσ€o)底是(shì)個(gè)什(shén)麽東(dōng)西(xī)呢(ne)。它在什(sh±<én)麽位置？它在畫(huà)面中的(de)什(shén)麽地(dì)方？

有(yǒu)一(yī)條線條，如(rú)果我們λε從(cóng)中切一(yī)段，如(rú)果左邊是(shì)0.61' 8這(zhè)麽一(yī)個(gè)比列，右邊是•ε₩​(shì)1這(zhè)麽一(yī)個(gè)比例。

如(rú)果符合這(zhè)樣的(de)左右比例我們稱之為(wèi¶♥)黃(huáng)金(jīn)分(fēn)割比。那(nà)麽中間(jiān)切割≤÷≤‌的(de)位置就(jiù)是(shì)我們黃(huán § ≥g)金(jīn)分(fēn)割線的(de)位置。

三分(fēn)線（黃(huáng)金(jīn)比例的(de)衍生(shēng)∑¶♦）

我們還(hái)有(yǒu)個(gè)困難，那(nà)就(jiù)是(shì)0.618λ∞★₩:1的(de)黃(huáng)金(jīn)分(fēn)割線的(de♦✔)位置确實不(bù)是(shì)很(hěn)好(hǎoΩ☆×¥)找。所以對(duì)于設計(jì)師(shī)來(lái)說(shuō)，我們有δ‍÷(yǒu)一(yī)種簡化(huà)黃(huáng)金Ω'(jīn)風(fēng)格線的(de)做(zuò)法？就(jiù)是(shì)三分(fēn)線→®&。

什(shén)麽意思呢(ne)？左邊是(shì)黃(huáng‌£•)金(jīn)風(fēng)格線，右邊是(shì)三分(fēn)線。三分(fēn)線就(ji←""ù)是(shì)均勻的(de)把長(cháng)方形的©♣(de)長(cháng)和(hé)寬切三段，均勻的(de→®‌)砍三段，每個(gè)方格都(dōu)是(shì)一(yī)樣大(dà)小(x₽β​∑iǎo)。

白(bái)銀(yín)比例

根号矩形具有(yǒu)特殊性質，由√2矩形開(kāi)始可(kě)以>σ無限地(dì)衍生(shēng)出√3、√4、√5、√6等矩形，同時(shí)在這(zhè)些(•✔₩∞xiē)矩形內(nèi)部又(yòu)可(kě)以分(fēn)割出無限的÷$(de)等比矩形。

白(bái)銀(yín)比例 √2 ≈ 1.414

青銅比例

因為(wèi)根号矩形的(de)等比性和(hé)可(§★π≥kě)無限分(fēn)割型，所以在分(fēn)割構圖中和(hé)黃(huáng)金(π¥βjīn)矩形一(yī)樣，能(néng)産生(shēng)大(dà)量和(hé)諧的(de)組合。>π←♣

青銅比例√3 ≈ 1.732

斐波那(nà)契數(shù)列（黃(huáng)金(jīn)比例的(de)衍 ‌生(shēng)）

斐波那(nà)契數(shù)列是(shì)由意大(dà)利數(shù)學家(jiā)奧納多(d✔φuō)·斐波那(nà)契在1202年(niφ£♦βán)出版《算(suàn)盤全書(shū)》中提出。這(zhè)組數(∑±shù)列的(de)數(shù)字為(w÷‍‌™èi)1、1、2、3、5、8、13、21、34…從(cóng)第三位開(kā✘↑≈i)始，每一(yī)個(gè)數(shù)都(dōu)是(shì)由前兩位相(xià≈₹₹↔ng)加得(de)出。而這(zhè)個(gè)數(shù)列的(de)比例形式非常接近(jìn)黃β σ☆(huáng)金(jīn)比例，所以又(yòu)稱“黃(huáng)金(jīn)↕♥♦γ分(fēn)割數(shù)列”。

斐波那(nà)契數(shù)列（FibonacciSe •♠ quence）數(shù)列是(shì)這(z♠•↓÷hè)樣一(yī)個(gè)數(shù)列：

1、1、2、3、5、8、13、21、34、55、89…$¶

在數(shù)學上(shàng)，斐波那(nà)契數(sh←>≥™ù)列是(shì)以遞歸的(de)方法來(lái)定義：

F0=1

F1=1

Fn=F(n-1) F(n-2)

(n>=2，n∈N*)

等差數(shù)列

等差數(shù)列是(shì)最常見(jiàn)數(shù)列的(de)一(→βyī)種，如(rú)果一(yī)個(gè)數(shù)列從(cóng)第二項≈≤≈起，每一(yī)項與它前一(yī)項的(de)差等于同一(yī)個(gè)​♠常數(shù)，這(zhè)個(gè)數"δ→↕(shù)列就(jiù)叫作(zuò)等差數(shù)列。比≥↓<如(rú)1、3、5、7、9、11、13…

等比數(shù)列

如(rú)果一(yī)個(gè)數(shù)列從(cóng)第二項起，每一(yī)₹♣β÷項與它前一(yī)項的(de)比值等于同一(yī)個(gè)€<常數(shù)，這(zhè)個(gè)數(∑Ωσπshù)列就(jiù)叫作(zuò)等比數(shù)列。比如(rú)1、2、4φ€®≤、8、16、32、64…

盧卡斯數(shù)列

盧卡斯數(shù)列：1、 3、 4、 7、 11、18、 29、©₽  47、 76、 123…

斐波那(nà)契數(shù)列和(hé)盧卡斯數(shù)列具有(yǒ∏±↔u)相(xiàng)同的(de)性質：從(cóng)第三項開(kāi)始，每一≥Ω(yī)項都(dōu)等于前兩項之和(hé)，我們稱之為(wèi)斐波那(nà)π↕β<契—盧卡斯遞推。

卡特蘭數(shù)

卡特蘭數(shù)是(shì)一(yī)種經典的(de)組合數(shù)，經常出現(xi∑✔✘àn)在各種計(jì)算(suàn)中，其前幾項為© ≠∏(wèi) : 1、2、5、14、42、132、 429、1430、4₹☆862…

帕多(duō)瓦數(shù)列

帕多(duō)瓦數(shù)列是(shì)：1，1，1，2，2，3，4§§•，5，7，9，12，16，21，28，37，49，™★¶₽65，86，114，151……

它從(cóng)第四項開(kāi)始，每一(yī)項都(dōu)是(shì)前面2項與前ε±≥​面3項的(de)和(hé)。即x=（x-2） （x-3），x為(wèi)項的(de)序數(s →₽hù)（x>4）。

它和(hé)斐波拉契數(shù)列非常相(xiàng)似，¶∞<稍有(yǒu)不(bù)同的(de)是(shì)：每個(gè)數(shù)都(dō♥✘u)是(shì)跳(tiào)過它前面的(de)那(nà)個(g∏✘è)數(shù)，并把前面的(de)兩個(gè)數(shù)相(xiàng)加而得(de)出的¥★γ(de)。

雷諾數(shù)列

雷諾數(shù)列是(shì)把10分(fēn)成5份，或10£ππ'份、20份、40份的(de)一(yī)個(gè)方法，就(jiù)是(sh"​ì)應用(yòng)在分(fēn)割比例上<¥πα(shàng)，二是(shì)應用(yò© ng)在字号比例大(dà)小(xiǎo)選擇上(shàng)。從(cóng)數(shù)學上±₽÷(shàng)講就(jiù)是(shì)把10分(→←≥fēn)别開(kāi)5次方、10次方、20次方和(hé)40次方。我們以5次方為(↑₩₽wèi)例分(fēn)别是(shì)：10%、16%、25%、40%、6£γ3%、100%。

勒·柯布西(xī)耶 — 模度（黃(huáng☆→)金(jīn)比例的(de)衍生(shēng)）

1948年(nián)，經過7年(nián)的(de)理(≥®♣lǐ)論研究與試驗，柯布出版了(le)《模度-合乎人(ré↑λ™♠n)體(tǐ)比例的(de)、通(tōng)用(yòng)與¥→≥♦建築和(hé)機(jī)械的(de)和(hé)諧尺度》一(yī)書(s≈←​hū)，詳細闡述了(le)模度理(lǐ)論的(de)開(kāi)端、發展、完​∏↔₹善到(dào)實際應用(yòng)。此書(shūγ≤)的(de)出版标志(zhì)著(zhe)模度理(lǐ)論的(de)正式建立。

比較成熟的(de)模度系統的(de)數(s→&hù)字推導起始于以身(shēn)高(gāo)為(wèi)6英尺（約1 ♥σ83厘米）人(rén)作(zuò)為(wèi)标準，結合斐波那(nà)契數(shù)列分(÷ fēn)析。對(duì)人(rén)體(tǐ)的™±(de)分(fēn)析得(de)出的(de)結₩®δ論包括以下(xià)幾個(gè)關鍵數(s∏Ω£↓hù)字：舉手高(gāo)（226厘米），身(shēn)高(gāα₩±o)（183厘米），臍高(gāo)（113厘米）和(hé)垂手高(gāo•♦≤≠)（86厘米）。這(zhè)一(yī)系列數(shù)字都(dōu)可(kě)以利用(yòn≥εg)黃(huáng)金(jīn)分(fēn)割比和(hé)斐波那≠"×(nà)契數(shù)列結合在一(yī)起:43=70×0.618，70=11α♠3×0.618，113=183×0.618；4↕‌3 70=113，70 113=183，43 ₽↓‍∞70 113=226。

利用(yòng)113的(de)尺寸産生(shēng)黃(✔<huáng)金(jīn)比70，由此得(de)到(dào)紅(hóng)尺：4φ™-6-10-16-27-43-70-113-183-296等。

利用(yòng)226=2X113=86 140，由此得(de)到(dào)第'∏♥↑二組數(shù)字-藍(lán)尺：13-20.6-33-53-86-14λ☆0-226-366-592等。

柯布還(hái)借助“模度”的(de)比例優勢對δ‌€Ω(duì)文(wén)藝複興的(de)幾何不(bù)變性研究展開(kāi)了$©(le)批判。他(tā)認為(wèi)對(duì)正多(duō)面體(tǐ)、星形體(tǐε♥÷)及正多(duō)邊形的(de)研究，背離(lí)了(×₽ le)基于視(shì)覺判斷的(de)建築學的(de)本質，因為(wèi)人(rén)眼λ‌對(duì)不(bù)同距離(lí)的(de)事(shì)物®€(wù)的(de)認知(zhī)并不(bù)是(shì)均勻、等分($✔fēn)的(de)而是(shì)漸變的(de)。

三角函數(shù)特殊角

特殊三角函數(shù)值一(yī)般指在0，30°，45°，60₩∑α°，90°，180°角下(xià)的(de)正餘弦值。

我們在設計(jì)中會(huì)把360°角度會(huì)進行(xíng)細分σσπ§(fēn)，以15°角為(wèi)一(yī)個(gè)單位≤₹©進行(xíng)遞增歸納我們常用(yòng)的(de)角度值：0°、15°、30γ >°、45°、60°、90°、120°、1♠‌γ35°、150°、180°、270°

我們在設計(jì)中在顔色的(de)色相(xiàng)就(jiù)是(shλ♥ì)用(yòng)360°來(lái)衡量的(de)，∞♣設計(jì)中經常使用(yòng)不(bù)透明(míng)度配色法就(jiù)是(shì)γ←∞>把顔色不(bù)透明(míng)度10等分(fēn)，在≈ β≈産品設計(jì)中我們确定主色的(de)顔色後，可(kě)以根據主色的(de)色相(xi♦↑àng)的(de)角度值比如(rú)每次增加15°來(lái)找到(£₹≠dào)合适的(de)輔助色和(hé)點綴色。

最近(jìn)兩年(nián)流行(xíng)的(de)2.5d插畫(huà"£•)風(fēng)格就(jiù)是(shì)會(huì)基于30°傾斜角去(φ✔qù)統一(yī)軸的(de)方向。

品牌設計(jì)中也(yě)是(shì)一≈•☆(yī)樣，很(hěn)多(duō)都(dōu)需要(yào)線條輔助。線的(de)角§γ度有(yǒu)0°、15°、30°、45°β∑ ÷、60°、90°幫助設計(jì)的(de)更加合理(lǐ)規範。

8點網格

建立8點為(wèi)一(yī)個(gè)單位的(↓✔•de)網格，所有(yǒu)的(de)元素尺寸都(dōu)是(shì‌€∞•)8的(de)倍數(shù)。使用(yòng) 8 的(de)增量來(lái)确定頁面上(★↓¥↓shàng)元素的(de)大(dà)小(xiǎo)和(hé)空(k←πōng)間(jiān)。界面設計(jì)中的(de)邊距或填充都(dōu)是(sh± ↑±ì) 8 的(de)增量（倍數(shù)）

如(rú)果你(nǐ)用(yòng)8作(zuò)為(wèi)設計(jì)的(de)最小(xiσ★α€ǎo)單位，你(nǐ)可(kě)以很(hěn)方便的(de)縮小(xiǎo)的(de)你(nǐ  ✘)的(de)設計(jì)尺寸，8/2=4,4✔← /2=2,2/2=1。

圖片常用(yòng)尺寸

在UI界面設計(jì)中我們經常需要(y$₹ào)使用(yòng)不(bù)同尺寸的(de)圖片，由于移動端界面大(dà)小(xiǎo)有 ✔×±(yǒu)限，在大(dà)量界面設計(jì)中總結了(le)圖片尺寸的(de)比例有↓∞(yǒu)1:1、2:3、4:3、16:9₩≠β‍、16:10。

Airbnb移動端的(de)界面中使用(yòng)了(le)大‍™(dà)量1:1、3:2、13:21等尺寸大(dà)小(xiǎo)§<☆的(de)圖片，有(yǒu)了(le)基于黃(±♠←huáng)金(jīn)比例的(de)圖片尺寸讓界面排版≥☆<↕看(kàn)上(shàng)去(qù)更加合理(lǐ)舒服。

費(fèi)希納矩形

19世紀中葉，德國(guó)心理(lǐ)學家(jiā)費(fèi)希♦∞€納曾經做(zuò)過一(yī)次别出心裁的≠®≈(de)試驗，他(tā)召開(kāi)一(yī)次“矩形展覽會(huì)”，會(h↓§uì)上(shàng)展出了(le)他(÷ tā)精心制(zhì)作(zuò)的(de≤$ π)各種矩形，并要(yào)求參觀者投票(piào)選擇各種自(zì)認為(wèi)ε‍✔∑最美(měi)的(de)矩形，結果以下(xià)四種矩形入選(寬×長(cháng)€≠≥)：(1)5×8；(2)8×13；(3)13×21；(4)21×34。

因為(wèi)5∶8＝0.625，8∶13≈0. ©₽×615，13∶21≈0.619，21∶34≈0.618。由此可(kě)見(jiàn)，它們的(deασ)寬與長(cháng)的(de)比都(dōu)接近(jìn)于0.618，因此這(zhè)些(x↓‌iē)矩形可(kě)近(jìn)似地(dì)看(kàn)作(zuò)↑♥₹§黃(huáng)金(jīn)矩形，給人(rén)以美(měiσ₩)的(de)感受。

印刷常用(yòng)尺寸

打印/印刷常用(yòng)紙(zhǐ)A系列尺寸，辦公室常用(yòng)A4λ™ε打印紙(zhǐ)尺寸210mm×297mm

A0紙(zhǐ)尺寸841mm×1189mm

A1紙(zhǐ)尺寸594mm×841mm

A2紙(zhǐ)尺寸420mm×594mm

A3紙(zhǐ)尺寸297mm×420mm

A4紙(zhǐ)尺寸210mm×297m±'€ m

A5紙(zhǐ)尺寸148mm×210mm

A6紙(zhǐ)尺寸105mm×148m→∏©m

A7紙(zhǐ)尺寸74mm×105mm

A8紙(zhǐ)尺寸52mm×74mm

A9紙(zhǐ)尺寸37mm×52mm