設(shè)計有趣的地方在于它的通用性，不論是音樂、建筑還是工業(yè)，設(shè)計的規(guī)范大同小異。今天山東新華電腦學(xué)院為大家帶來的這些規(guī)范，可是成為優(yōu)秀UI設(shè)計師必須知道的“純干貨”，還能讓大家深刻了解UI設(shè)計規(guī)范的本質(zhì)是什么，怎么樣？有興趣地朋友快來看看吧！
山東新華電腦學(xué)院分享UI設(shè)計規(guī)范
★圖標規(guī)范
很多設(shè)計師以為UI設(shè)計就是設(shè)計圖標。雖然事實并非如此，但圖標的設(shè)計在整個UI設(shè)計中是比較基礎(chǔ)的一個環(huán)節(jié)。
圖標與品牌標志一樣，在設(shè)計時都需要做適當(dāng)?shù)臏p法，應(yīng)該盡量用簡約的線條去表達其含義，應(yīng)該盡量避免出現(xiàn)線條結(jié)構(gòu)過于復(fù)雜的設(shè)計，而且整體的圖標都需要保持風(fēng)格一致，例如圖標的線條粗細、邊角弧度、圖標高度寬度比例、風(fēng)格等等。
像素對齊：需要嚴格的做到像素對齊，尤其是在做較小尺寸的圖標時，如果不嚴格的遵循像素對齊，那終的顯示效果就會出現(xiàn)問題。
多用布爾運算：在做圖標的時候，能用基本圖形進行布爾運算的時候，盡量不要使用鋼筆
獨特的風(fēng)格：在做系列圖標的時候，一定要在前期給圖標設(shè)定一個風(fēng)格及原則，使之看起來與眾不同。
視覺大小統(tǒng)一：在進行圖標設(shè)計的時候，我們會使用柵格輔助線來幫助我們更加嚴格謹慎，但一定不要被輔助線困住，學(xué)會靈活運用，保持視覺上的大小統(tǒng)一。
★標注規(guī)范
如何把標注的思路整理清晰——結(jié)構(gòu)化思維進行拆解，將大問題拆解成小問題，逐一擊破！
標注主要是以下四種不同屬性的內(nèi)容：尺寸、文字、間距、顏色。
在進行標注時，首先去除導(dǎo)航欄和標簽欄，因為這些控件通用性非常強，需要單獨拿出來進行統(tǒng)一標注，這里我們只對內(nèi)容區(qū)來進行標注示例。
★命名規(guī)范
很多UI設(shè)計師對于“命名”是沒什么概念的，他們都是隨隨便便地用一些沒有特定意思的字母去給頁面命名，這是不好的。因為統(tǒng)一的、規(guī)范的命名對我們自己的文件整理有很大的幫助，后期修改文件、圖層的時候更加方便快捷，而且規(guī)范的命名也顯得我們自身比較專業(yè)。而且，如果如果命名不統(tǒng)一，團隊之間的成員很難達成共識，任務(wù)交接時需要很大的學(xué)習(xí)成本。
而更重要的是，有規(guī)范的命名可以極大的節(jié)省程序開發(fā)的時間成本，減少很多不必要的溝通與重復(fù)切圖的概率，程序員完全可以直接使用的我們切片而不更改切片的名稱，后期我們更換切圖，只要切片名稱不變，開發(fā)看都不用看直接替換就可以了。
★交互規(guī)范
以下幾點交互常識：
簡化操作：能一步完成的交互就不要分兩步。
用戶習(xí)慣：大部分用戶都有固化思維，我們作為設(shè)計師應(yīng)該尊重數(shù)據(jù)，尊重用戶選擇。
減少干擾：減少界面元素的不確定因素，方便用戶快速找到自己想要的。
快速響應(yīng)：加快用戶讀取的響應(yīng)速度，能夠避免從遠程取數(shù)據(jù)的，就盡量避免。
界面友好：除了根據(jù)需求提供視覺解決方案以外，在設(shè)計的過程中適當(dāng)?shù)丶尤胍恍┬〖毠?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)一舒服。
圖片細節(jié)處理
1）圖片精度不夠（這里所說的精度不是說DPI分辨率需要300哦，那是做高精度印刷輸出時才需要的，而在電腦及手機上的圖片DPI分辨率為72即可，另外輸出圖片時需適當(dāng)壓縮一下圖片的大小）、雜色太多可以使用PS內(nèi)置的CR濾鏡處理。
2）圖片尺寸建議統(tǒng)一為偶數(shù)值，方便前端技術(shù)人員開發(fā)。
3）圖片邊緣避免與白色背景融合，可以在邊緣位置加色。
4）為了配合標題字體，圖片可以局部調(diào)亮或調(diào)暗。
★動效規(guī)范
無論是現(xiàn)在經(jīng)常看到的企業(yè)/品牌H5宣傳頁面、移動端啟動頁，還是曾經(jīng)紅極一時的首頁動畫，都需要用到動效效果。會做點動效會給我們加分不少，尤其是做一些加載動畫，這是我們經(jīng)常會遇到的需求。
做動效時，我們需要注意以下幾點：
1）不論你的動畫有多好看、多吸引眼球，如果成本太高或者過于復(fù)雜都是無法落地的，所以我們要遵循簡單實用的原則來進行設(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í)吧！
