一(yī)、圖标規範

很多設計師以爲UI設計就是設計圖标。雖然事實并非如此，但圖标的設計在整個UI設計中(zhōng)是比較基礎的一(yī)個環節。

圖标與品牌标志(zhì)一(yī)樣，在設計時都需要做适當的減法，應該盡量用簡約的線條去(qù)表達其含義，應該盡量避免出現線條結構過于複雜(zá)的設計，而且整體(tǐ)的圖标都需要保持風格一(yī)緻，例如圖标的線條粗細、邊角弧度、圖标高度寬度比例、風格等等。

特别是對于新人，所以大(dà)家一(yī)起來看看圖标設計的規範吧：

1、像素對齊

需要嚴格的做到像素對齊，尤其是在做較小(xiǎo)尺寸的圖标時，如果不嚴格的遵循像素對齊，那zui終的顯示效果就會出現問題。

2、多用布爾運算

在做網頁設計圖标的時候，能用基本圖形進行布爾運算的時候，盡量不要使用鋼筆，這樣做的好處有如下(xià)幾點：

讓你的圖标更加規範；

對圖形結構理解更加深刻；

後期更改形狀更加方便

3、獨特的風格

在做系列網頁圖标設計的時候，一(yī)定要在前期給圖标設定一(yī)個風格及原則，使之看起來與衆不同。

在這裏值得一(yī)提就是，我(wǒ)(wǒ)們在做線性圖标時，一(yī)定要保證描邊粗細相同、圓角相同，如果這些基礎的規則都沒有遵循，那也就談不上風格的統一(yī)、創新了。

4、視覺大(dà)小(xiǎo)統一(yī)

在進行網頁圖标設計的時候，我(wǒ)(wǒ)們會使用栅格輔助線來幫助我(wǒ)(wǒ)們更加嚴格謹慎，但一(yī)定不要被輔助線困住，學會靈活運用，保持視覺上的大(dà)小(xiǎo)統一(yī)。

在如今的APP設計環境當中(zhōng)，一(yī)些APP設計大(dà)牛都一(yī)直強調，設計師要爲有品牌意識。那麽，在圖标的設計中(zhōng)，我(wǒ)(wǒ)們也必須強調“品牌性”，簡單的說就是把品牌中(zhōng)的抽象的概念變成具象化的圖形，把品牌主副色調應用到圖标設計中(zhōng)。同時建議大(dà)家每個星期完成一(yī)個主題的作品，提升自己的平面設計能力。

二、标注規範

如何把标注的思路整理清晰——結構化思維進行拆解，将大(dà)問題拆解成小(xiǎo)問題，逐一(yī)擊破！

标注主要是以下(xià)四種不同屬性的内容：尺寸、文字、間距、顔色。

在進行标注時，首先去(qù)除導航欄和标簽欄，因爲這些控件通用性非常強，需要單獨拿出來進行統一(yī)标注，這裏我(wǒ)(wǒ)們隻對内容區來進行标注示例。

1、尺  寸

我(wǒ)(wǒ)們要将頁面上有所需要告知(zhī)尺寸的内容進行标注，例如圖标、圖片、頭像等等。關于尺寸維度的标注我(wǒ)(wǒ)們需要注意的是：

有圓角的地方，需要将圓角半徑标出。

對于一(yī)些控件，如button、列表，一(yī)定要随時問自己有沒有特殊狀态，如按壓狀态、無效狀态、選中(zhōng)狀态等等，如果你不标明，開(kāi)會就會默認沒有這些效果。

一(yī)般情況下(xià)，圖片的尺寸是需要告訴比例的，而不是固定的大(dà)小(xiǎo)，這樣開(kāi)發才能更好的适配，常用的圖片比例有4：3、16：9等。

很多沒有經驗的設計師不理解适配的原理，所以很容易将一(yī)些控件給出固定的尺寸大(dà)小(xiǎo)，如果你将這個按鈕的寬度和高度都标注出來，開(kāi)發就會将這個按鈕的大(dà)小(xiǎo)寫死，一(yī)旦遇到屏幕（白(bái)色區域）較寬的時候，按鈕還是固定大(dà)小(xiǎo)，就會影響視覺效果。所以正确的标注方法是給出按鈕兩邊的間距，讓整個按鈕的寬度自适應（當然高度還是要固定的）,這樣不論遇到哪種分(fēn)辨率的尺寸，都能夠保持相同的視覺效果，擴展性極強。

2、文  字

文字，需要标注文字的大(dà)小(xiǎo)、字體(tǐ)、顔色、透明度、行高等等，當然也可以和開(kāi)發進行溝通，對一(yī)些内容進行删減。關于文字的标注需要注意的事項：文字有一(yī)個很特殊的屬性，就在某些場景下(xià)，文字是動态的，所以這個時候，就需要将極限情況考慮清楚。

表面上我(wǒ)(wǒ)們将标題文字的大(dà)小(xiǎo)、顔色這些内容标注清楚就可以了，但是如果标題文字過多的時候該怎麽處理呢？所以必須要給出一(yī)個極限情況的規範，比如zui多顯示多少個字符，字符超過極限值就用打點的方式處理。

3、間  距

有人可能會覺得間距和尺寸有些相似，但其實它們有着很大(dà)的不同，我(wǒ)(wǒ)們可以這樣理解：尺寸是形容容器的大(dà)小(xiǎo)，而間距是形容容器之間的距離(lí)。間距相對比較簡單，隻要标注清晰就不會有太大(dà)問題。

4、顔  色

需要标注顔色的内容有分(fēn)割線顔色、背景色、按鈕顔色等等。關于顔色的标注需要注意的事項：切記文字的顔色已經歸類到文字屬性裏面，不用重複标注，思路一(yī)定要保持清晰。