新手科普文！每個設計師都該懂的參考線完全手冊

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

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

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

貴重金屬比例

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

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

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

常用設計比例列表：

黃金比 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)

△ ?黃金比例設計的圖形

常用屏幕比例

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

黃金比通用格尺

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

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

黃金比例組合圖形

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

常用構圖框

構圖框常常用在：

特殊輔助線

羊角曲線

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

△ ?羊角曲線示例

自然對數曲線

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

八頭身比例格尺

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

蚌線

完美矩形

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

圓角\曲角矩形

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

超橢圓

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

參數方程：

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

超橢圓的制作

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

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

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

誤區

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

「如何提高平面設計的功力」

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

原文地址：styletin

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

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