@不知語冰?：看完這個教程，你能收獲到常用的設(shè)計輔助線合集+常用設(shè)計輔助線使用方法+常用的設(shè)計比例列表。

輔助線（或稱參考線），在UI設(shè)計中是經(jīng)常會用到的，無論是用來規(guī)范設(shè)計還是用來提升“專業(yè)觀感”都是很用的。一般的輔助線使用PS、AI自帶的工具就可以了，另外使用像 guideguide 這樣的插件更能事半功倍。而設(shè)計中還可能用到一些特殊的輔助線，比如黃金比例、超橢圓等等。 這里提供一個“常用設(shè)計參考線合集”的AI文件，包括了設(shè)計中常用的輔助線和輔助圖形。

下載地址：http://pan.baidu.com/s/1eQ7Wn8e#list/path=%2F

貴重金屬比例

貴重金屬比例， 由公式推導(dǎo)而來，其中最有名的就是黃金比例，也就是1:1.618。這個所謂的神奇比例在藝術(shù)界中一直都有人推崇，但是可能其實只是持續(xù)了3個世紀的都市傳說和”炒作“，絕大多數(shù)所謂神奇的黃金比例，都是人的主觀的“既成推定”（幾乎任何一張圖片都能找到一個近似1.618或者1~2之間的任何比例），比如金字塔啦、蒙娜麗莎啦、海螺啦

但是黃金比例在多年來的渲染、教育下被附上了神秘、高級、專業(yè)的印象。即是黃金比例本身與審美沒有什么聯(lián)系，但是現(xiàn)在很多人的已經(jīng)主觀的認為黃金比例是好的，希望看到黃金比例。而且使用黃金比例能為你的設(shè)計附上“故事”，增添一個“噱頭”，顯得神奇、專業(yè)、高大上。

△ ?自從PS自帶的剪裁工具自帶黃金比例之后，黃金比例在設(shè)計界更流行了

常用設(shè)計比例列表：

黃金比 1：1.618 (5：8)
白銀比 1：2.414 (5：12)
大和比 1：1.414 (5：7)
第二黃金比 1：2.618 (5：13)
青銅比 1：3.303 (3：9)
鉑金比 1：1.732 (4：7)

△ ?黃金比例設(shè)計的圖形

常用屏幕比例

△ ?各種屏幕的比例在設(shè)計中也是很有用的

黃金比通用格尺

這個看起來十分復(fù)雜的線框并非是用來制作黃金比例圖形的，而是用來判斷一個圖形是否符合黃金比例的。

△ ?用黃金比通用格尺可以快速判斷圖形是否使用了黃金比例設(shè)計

黃金比例組合圖形

能讓你快速的制作出各部件尺寸符合黃金比例的圖形：

常用構(gòu)圖框

構(gòu)圖框常常用在：

特殊輔助線

羊角曲線

羊角曲線是數(shù)學(xué)上的概念，最早應(yīng)用在道路設(shè)計上，其曲率線性增長，所以可以用它作為“緩和曲線”連接直線與曲線，讓他們曲率連續(xù)，過渡更平滑。

△ ?羊角曲線示例

自然對數(shù)曲線

自然對數(shù)曲線也就是 In(X)，也就是loge(x)的函數(shù)圖像，它也常常會用在設(shè)計中。

八頭身比例格尺

這是用來做擬人圖形的的，八頭身是最常見的人體比例。

蚌線

完美矩形

正方形分割為若干個邊長不等的小正方形。如果其中任何一部分小正方形都無法構(gòu)成一個矩形或正方形，則稱為簡單完美正方形。

圓角\曲角矩形

在制作圖標時，圓角矩形是最常用的，但很多時候由于圓角與直線直接相連，曲率不連續(xù)，看起來較為突兀，所以常常使用超橢圓、羊角曲線過渡矩形、膨脹矩形來替代普通的圓角矩形為圖標定型。

超橢圓

這里著重講一下超橢圓，自從iOS 7的圖標從普通的圓角矩形改成超橢圓后，掀起了超橢圓熱潮，近來很多手機UI、主題設(shè)計都大量使用了超橢圓。 超橢圓介于圓與矩形之間，但不像圓角矩形只是矩形與圓的簡單拼接，而是一種特殊的圖形， 方程：

參數(shù)方程：

超橢圓在設(shè)計界很早就有應(yīng)用： 1959年時瑞典斯德哥爾摩提出了其市中心賽格爾廣場圓環(huán)的設(shè)計競賽。丹麥詩人皮亞特·海恩就提出了一個以n = 2.5，a / b = 6/5的超橢圓為基礎(chǔ)的設(shè)計。賽格爾廣場在1967年完成，而皮亞特·海恩繼續(xù)在其他的藝術(shù)品中使用超橢圓，包括床、碟子、桌子等。 并且在字體設(shè)計、工業(yè)設(shè)計中都有廣泛的應(yīng)用。

超橢圓的制作

超橢圓矩形的外形有方程中的參數(shù)n決定（a、b不變的情況下），本文提供的AI文件中是n=4的超橢圓。那要任何制作n=自己想要值的超橢圓呢？

1. 你可以使用數(shù)學(xué)軟件比如Mathlab、Graph等，這里推薦使用Graph，因為它更加簡單易用，并且自帶導(dǎo)出AI所支持的SVG格式矢量格式圖片。

2. 使用在線工具?Super-ellipse Calculator & Plotter，它也可以生成SVG格式的圖片。

誤區(qū)

其實電腦設(shè)計中輔助線大部分時間只是用來對齊、居中和約束比例。而看起來很專業(yè)的網(wǎng)格、內(nèi)切圓大多只是用來裝樣子的，很多都是設(shè)計完成后加上去的。這些其實是過去手工設(shè)計時代遺留下來的產(chǎn)物，設(shè)計師也沒有必要發(fā)布線框稿，如果一個設(shè)計作品要向最終觀眾/用戶展示線框稿，那只能是在裝高大上。

「如何提高平面設(shè)計的功力」

1. 《專業(yè)科班的方法！設(shè)計師在工作中通過哪些方式獲取靈感？》
2. 《專業(yè)科班的方法！設(shè)計一個LOGO 的常規(guī)思路和流程是怎樣的？》
3. 《專業(yè)訓(xùn)練方法！如何設(shè)計一張高品位高水準的海報？（大量實例）》
4. 《專業(yè)科班方法！平面設(shè)計里怎樣提高作品的視覺沖擊力？》
5. 《專業(yè)科班方法！一套完整的中文字體是如何開發(fā)出來的？》

原文地址：styletin

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量200萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com