一、圖標規范    

       很(hen)多設計師(shi)以(yi)為(wei)UI設計就是(shi)設計圖標。雖然事(shi)實并非如此，但圖標的(de)設計在整個UI設計中是(shi)比(bi)較基礎的(de)一個環節。    

       圖(tu)標(biao)與品牌標(biao)志一樣，在設計(ji)時(shi)都需(xu)要(yao)做適當的減法，應該盡量用簡約(yue)的線(xian)條(tiao)(tiao)去表達其含義，應該盡量避免(mian)出現(xian)線(xian)條(tiao)(tiao)結構過(guo)于復雜的設計(ji)，而且整體的圖(tu)標(biao)都需(xu)要(yao)保持(chi)風(feng)格一致，例(li)如圖(tu)標(biao)的線(xian)條(tiao)(tiao)粗細、邊(bian)角弧度(du)、圖(tu)標(biao)高度(du)寬度(du)比例(li)、風(feng)格等(deng)等(deng)。 

        特(te)別(bie)是對于新人，所(suo)以大家一起(qi)來看看圖(tu)標設計的規范(fan)吧(ba)：    

       1、像素對齊    

       需要(yao)嚴(yan)格的做到(dao)像素對(dui)齊(qi)，尤其是在做較小尺(chi)寸的圖標時，如果不嚴(yan)格的遵循像素對(dui)齊(qi)，那zui終的顯示(shi)效果就(jiu)會出現問題。    

       2、多用布爾運算    

       在做(zuo)網頁設計(ji)圖標的(de)時候，能用(yong)基本圖形進行布(bu)爾運算的(de)時候，盡量不要使用(yong)鋼(gang)筆，這樣做(zuo)的(de)好處有(you)如下(xia)幾點：    

• 讓你的圖(tu)標更加規(gui)范；        ;    

• 對圖形結構理(li)解更(geng)加(jia)深(shen)刻；            

• 后(hou)期更改形狀更加方(fang)便            

       3、獨特的風格    

       在(zai)做系列網頁圖(tu)標設計的時(shi)候，一定(ding)要(yao)在(zai)前期給圖(tu)標設定(ding)一個風格及原(yuan)則，使之看起(qi)來與眾不同。    

       在這(zhe)里值得一(yi)提(ti)就(jiu)是，我們在做線性圖標時，一(yi)定要保(bao)證描(miao)邊粗細相同(tong)、圓角相同(tong)，如果這(zhe)些基礎的(de)規則都沒有遵循，那也(ye)就(jiu)談(tan)不上(shang)風格的(de)統一(yi)、創新了。    

       4、視覺大小統一    

       在進行網頁(ye)圖標設(she)計(ji)的時候，我(wo)(wo)們會(hui)使(shi)用柵格輔助(zhu)線來幫助(zhu)我(wo)(wo)們更(geng)加嚴格謹慎，但(dan)一(yi)定不要被輔助(zhu)線困住，學會(hui)靈活運用，保持視覺上的大(da)小(xiao)統一(yi)。    

       在(zai)如(ru)今(jin)的APP設(she)計(ji)環(huan)境當中(zhong)，一些APP設(she)計(ji)大牛(niu)都一直強調，設(she)計(ji)師(shi)要(yao)為有品(pin)牌意(yi)識。那么，在(zai)圖(tu)標(biao)的設(she)計(ji)中(zhong)，我們(men)也必須強調“品(pin)牌性”，簡單的說就是把(ba)品(pin)牌中(zhong)的抽象的概念變成具象化的圖(tu)形，把(ba)品(pin)牌主(zhu)副色調應用到圖(tu)標(biao)設(she)計(ji)中(zhong)。同時(shi)建(jian)議大家(jia)每個星(xing)期完(wan)成一個主(zhu)題的作品(pin)，提升(sheng)自己的平(ping)面設(she)計(ji)能力。    

       二、標注規范    

       如(ru)何(he)把標注的思(si)路(lu)整理清晰——結構化思(si)維進行(xing)拆解，將大問題拆解成小問題，逐一擊破(po)！ ;   

       標注主要是以下四種不同屬性的內容：尺(chi)寸、文字、間距、顏色(se)。    

       在進行標注(zhu)時，首先去(qu)除導航欄和(he)標簽(qian)欄，因(yin)為這(zhe)些控件通用性非常強(qiang)，需要單獨拿(na)出來進行統一標注(zhu)，這(zhe)里我(wo)們(men)只對內容區來進行標注(zhu)示例。    

       1、尺  寸    

       我們要(yao)(yao)將頁(ye)面(mian)上有所需要(yao)(yao)告知尺寸的內容進(jin)行標(biao)注，例如圖標(biao)、圖片、頭像等等。關于(yu)尺寸維度的標(biao)注我們需要(yao)(yao)注意的是：    

       有圓角的地方(fang)，需要將(jiang)圓角半(ban)徑標出。    

       對(dui)于一些(xie)控件，如(ru)button、列表，一定要隨時問自己有(you)沒有(you)特殊狀態(tai)，如(ru)按(an)壓狀態(tai)、無效狀態(tai)、選中狀態(tai)等等，如(ru)果你不標(biao)明，開會就會默(mo)認(ren)沒有(you)這些(xie)效果。    

       一般情況下，圖片的(de)(de)尺寸(cun)是(shi)需要告(gao)訴比例(li)的(de)(de)，而不是(shi)固定的(de)(de)大(da)小，這樣開發才(cai)能更好的(de)(de)適配，常用的(de)(de)圖片比例(li)有(you)4：3、16：9等(deng)。    

       很(hen)多沒有經驗的(de)(de)(de)設計(ji)師不(bu)(bu)理(li)解(jie)適(shi)配的(de)(de)(de)原理(li)，所以(yi)(yi)很(hen)容易將一些控件給出(chu)固(gu)定(ding)的(de)(de)(de)尺寸大(da)(da)小，如果你將這個(ge)按(an)鈕(niu)的(de)(de)(de)寬(kuan)(kuan)度和(he)高度都(dou)標注出(chu)來，開(kai)發就會將這個(ge)按(an)鈕(niu)的(de)(de)(de)大(da)(da)小寫死(si)，一旦遇(yu)到(dao)屏幕(mu)（白色區(qu)域）較寬(kuan)(kuan)的(de)(de)(de)時候，按(an)鈕(niu)還是(shi)(shi)固(gu)定(ding)大(da)(da)小，就會影響視覺效果。所以(yi)(yi)正確的(de)(de)(de)標注方法(fa)是(shi)(shi)給出(chu)按(an)鈕(niu)兩(liang)邊的(de)(de)(de)間距，讓整個(ge)按(an)鈕(niu)的(de)(de)(de)寬(kuan)(kuan)度自適(shi)應（當然高度還是(shi)(shi)要固(gu)定(ding)的(de)(de)(de)）,這樣不(bu)(bu)論遇(yu)到(dao)哪(na)種分辨率的(de)(de)(de)尺寸，都(dou)能(neng)夠保(bao)持相同的(de)(de)(de)視覺效果，擴展(zhan)性(xing)極強。    

       2、文  字    

       文字(zi)(zi)，需(xu)要(yao)標注文字(zi)(zi)的大小、字(zi)(zi)體、顏色、透明度(du)、行高等(deng)等(deng)，當然也可以和(he)開(kai)發進(jin)行溝(gou)通，對一些(xie)(xie)內(nei)容進(jin)行刪(shan)減。關于文字(zi)(zi)的標注需(xu)要(yao)注意的事項：文字(zi)(zi)有一個很特殊的屬性(xing)，就(jiu)在某些(xie)(xie)場景下，文字(zi)(zi)是動態的，所以這(zhe)個時(shi)候(hou)，就(jiu)需(xu)要(yao)將極限情況考慮清楚(chu)。    

       表面上我們將標題文字(zi)(zi)的(de)(de)大小、顏色這些內容標注清楚就(jiu)可以(yi)了，但是如果標題文字(zi)(zi)過多(duo)(duo)的(de)(de)時候該怎么(me)處(chu)理(li)呢？所(suo)以(yi)必須要給出(chu)一個極限(xian)情況(kuang)的(de)(de)規(gui)范(fan)，比(bi)如zui多(duo)(duo)顯示(shi)多(duo)(duo)少個字(zi)(zi)符(fu)，字(zi)(zi)符(fu)超過極限(xian)值就(jiu)用打點的(de)(de)方式處(chu)理(li)。    

       3、間  距    

       有人可能會覺得間距和尺(chi)寸(cun)有些相(xiang)似，但(dan)其實它們有著很大(da)(da)的不(bu)(bu)同(tong)，我們可以(yi)這樣理解：尺(chi)寸(cun)是(shi)形容(rong)容(rong)器(qi)的大(da)(da)小，而(er)間距是(shi)形容(rong)容(rong)器(qi)之間的距離。間距相(xiang)對比(bi)較簡單，只要標注清晰就不(bu)(bu)會有太大(da)(da)問題。    

       4、顏  色    

       需(xu)要(yao)標注顏(yan)(yan)(yan)色(se)的(de)(de)內(nei)容有(you)分割線顏(yan)(yan)(yan)色(se)、背景色(se)、按鈕顏(yan)(yan)(yan)色(se)等等。關于顏(yan)(yan)(yan)色(se)的(de)(de)標注需(xu)要(yao)注意(yi)的(de)(de)事項：切(qie)記文字的(de)(de)顏(yan)(yan)(yan)色(se)已經歸類到(dao)文字屬性里面(mian)，不(bu)用(yong)重復(fu)標注，思(si)路(lu)一定要(yao)保持清晰。