設(shè)計(jì)有趣的地方在于它的通用性，不論是音樂(lè)、建筑還是工業(yè)，設(shè)計(jì)的規(guī)范大同小異。今天山東新華電腦學(xué)院為大家帶來(lái)的這些規(guī)范，可是成為優(yōu)秀UI設(shè)計(jì)師必須知道的“純干貨”，還能讓大家深刻了解UI設(shè)計(jì)規(guī)范的本質(zhì)是什么，怎么樣？有興趣地朋友快來(lái)看看吧！

山東新華電腦學(xué)院分享UI設(shè)計(jì)規(guī)范

★圖標(biāo)規(guī)范

很多設(shè)計(jì)師以為UI設(shè)計(jì)就是設(shè)計(jì)圖標(biāo)。雖然事實(shí)并非如此，但圖標(biāo)的設(shè)計(jì)在整個(gè)UI設(shè)計(jì)中是比較基礎(chǔ)的一個(gè)環(huán)節(jié)。

圖標(biāo)與品牌標(biāo)志一樣，在設(shè)計(jì)時(shí)都需要做適當(dāng)?shù)臏p法，應(yīng)該盡量用簡(jiǎn)約的線條去表達(dá)其含義，應(yīng)該盡量避免出現(xiàn)線條結(jié)構(gòu)過(guò)于復(fù)雜的設(shè)計(jì)，而且整體的圖標(biāo)都需要保持風(fēng)格一致，例如圖標(biāo)的線條粗細(xì)、邊角弧度、圖標(biāo)高度寬度比例、風(fēng)格等等。

像素對(duì)齊：需要嚴(yán)格的做到像素對(duì)齊，尤其是在做較小尺寸的圖標(biāo)時(shí)，如果不嚴(yán)格的遵循像素對(duì)齊，那終的顯示效果就會(huì)出現(xiàn)問(wèn)題。

多用布爾運(yùn)算：在做圖標(biāo)的時(shí)候，能用基本圖形進(jìn)行布爾運(yùn)算的時(shí)候，盡量不要使用鋼筆

獨(dú)特的風(fēng)格：在做系列圖標(biāo)的時(shí)候，一定要在前期給圖標(biāo)設(shè)定一個(gè)風(fēng)格及原則，使之看起來(lái)與眾不同。

視覺(jué)大小統(tǒng)一：在進(jìn)行圖標(biāo)設(shè)計(jì)的時(shí)候，我們會(huì)使用柵格輔助線來(lái)幫助我們更加嚴(yán)格謹(jǐn)慎，但一定不要被輔助線困住，學(xué)會(huì)靈活運(yùn)用，保持視覺(jué)上的大小統(tǒng)一。

★標(biāo)注規(guī)范

如何把標(biāo)注的思路整理清晰——結(jié)構(gòu)化思維進(jìn)行拆解，將大問(wèn)題拆解成小問(wèn)題，逐一擊破！

標(biāo)注主要是以下四種不同屬性的內(nèi)容：尺寸、文字、間距、顏色。

在進(jìn)行標(biāo)注時(shí)，首先去除導(dǎo)航欄和標(biāo)簽欄，因?yàn)檫@些控件通用性非常強(qiáng)，需要單獨(dú)拿出來(lái)進(jìn)行統(tǒng)一標(biāo)注，這里我們只對(duì)內(nèi)容區(qū)來(lái)進(jìn)行標(biāo)注示例。

★命名規(guī)范

很多UI設(shè)計(jì)師對(duì)于“命名”是沒(méi)什么概念的，他們都是隨隨便便地用一些沒(méi)有特定意思的字母去給頁(yè)面命名，這是不好的。因?yàn)榻y(tǒng)一的、規(guī)范的命名對(duì)我們自己的文件整理有很大的幫助，后期修改文件、圖層的時(shí)候更加方便快捷，而且規(guī)范的命名也顯得我們自身比較專業(yè)。而且，如果如果命名不統(tǒng)一，團(tuán)隊(duì)之間的成員很難達(dá)成共識(shí)，任務(wù)交接時(shí)需要很大的學(xué)習(xí)成本。

而更重要的是，有規(guī)范的命名可以極大的節(jié)省程序開(kāi)發(fā)的時(shí)間成本，減少很多不必要的溝通與重復(fù)切圖的概率，程序員完全可以直接使用的我們切片而不更改切片的名稱，后期我們更換切圖，只要切片名稱不變，開(kāi)發(fā)看都不用看直接替換就可以了。

★交互規(guī)范

以下幾點(diǎn)交互常識(shí)：

簡(jiǎn)化操作：能一步完成的交互就不要分兩步。

用戶習(xí)慣：大部分用戶都有固化思維，我們作為設(shè)計(jì)師應(yīng)該尊重?cái)?shù)據(jù)，尊重用戶選擇。

減少干擾：減少界面元素的不確定因素，方便用戶快速找到自己想要的。

快速響應(yīng)：加快用戶讀取的響應(yīng)速度，能夠避免從遠(yuǎn)程取數(shù)據(jù)的，就盡量避免。

界面友好：除了根據(jù)需求提供視覺(jué)解決方案以外，在設(shè)計(jì)的過(guò)程中適當(dāng)?shù)丶尤胍恍┬〖?xì)節(jié)使交互界面更加友好是設(shè)計(jì)師的職責(zé)所在。

★圖片處理規(guī)范

圖片統(tǒng)一性

1）圖片色調(diào)色溫需統(tǒng)一，例如一個(gè)嬰兒產(chǎn)品的首頁(yè)，整體需要搭配暖色調(diào)的圖片，這樣看上去整體才比較統(tǒng)一舒服。

2）圖片比例需統(tǒng)一，例如一個(gè)賣貨的產(chǎn)品詳情頁(yè)，在同一屏的欄目中（頁(yè)面）所出現(xiàn)的產(chǎn)品或者人物，比例就需要有一個(gè)統(tǒng)一的大小比例，這樣看上去才比較統(tǒng)一舒服。

圖片細(xì)節(jié)處理

1）圖片精度不夠（這里所說(shuō)的精度不是說(shuō)DPI分辨率需要300哦，那是做高精度印刷輸出時(shí)才需要的，而在電腦及手機(jī)上的圖片DPI分辨率為72即可，另外輸出圖片時(shí)需適當(dāng)壓縮一下圖片的大小）、雜色太多可以使用PS內(nèi)置的CR濾鏡處理。

2）圖片尺寸建議統(tǒng)一為偶數(shù)值，方便前端技術(shù)人員開(kāi)發(fā)。

3）圖片邊緣避免與白色背景融合，可以在邊緣位置加色。

4）為了配合標(biāo)題字體，圖片可以局部調(diào)亮或調(diào)暗。

★動(dòng)效規(guī)范

無(wú)論是現(xiàn)在經(jīng)�？吹降钠髽I(yè)/品牌H5宣傳頁(yè)面、移動(dòng)端啟動(dòng)頁(yè)，還是曾經(jīng)紅極一時(shí)的首頁(yè)動(dòng)畫，都需要用到動(dòng)效效果。會(huì)做點(diǎn)動(dòng)效會(huì)給我們加分不少，尤其是做一些加載動(dòng)畫，這是我們經(jīng)常會(huì)遇到的需求。

做動(dòng)效時(shí)，我們需要注意以下幾點(diǎn)：

1）不論你的動(dòng)畫有多好看、多吸引眼球，如果成本太高或者過(guò)于復(fù)雜都是無(wú)法落地的，所以我們要遵循簡(jiǎn)單實(shí)用的原則來(lái)進(jìn)行設(shè)計(jì)，千萬(wàn)不要過(guò)度設(shè)計(jì)。

2）任何交互動(dòng)作所導(dǎo)致的狀態(tài)都需要考慮正常狀態(tài)與異常狀態(tài)。拿加載動(dòng)畫來(lái)說(shuō)，我們需要考慮加載成功的反饋與加載失敗的反饋，并將之注明在輸出規(guī)范中。

3）動(dòng)效使用的工具：可以PS做一些動(dòng)態(tài)表情，用AE做一些加載動(dòng)畫，頁(yè)面之間的交互動(dòng)效可以使用Flinto、Principle等。

看了山東新華電腦學(xué)校的分享，相信你對(duì)UI設(shè)計(jì)有了一定的了解了吧！那么想成為優(yōu)秀的UI設(shè)計(jì)師嗎？快來(lái)山東新華電腦學(xué)校報(bào)名學(xué)習(xí)吧！