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

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

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

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

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

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

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

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

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

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

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

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

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

★命名規(guī)范

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

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

★交互規(guī)范

以下幾點交互常識：

簡化操作：能一步完成的交互就不要分兩步。

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

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

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

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

★圖片處理規(guī)范

圖片統(tǒng)一性

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

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

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

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

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

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

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

★動效規(guī)范

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

做動效時，我們需要注意以下幾點：

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

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

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

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