俗話說(shuō)國(guó)有國(guó)法，家有家規(guī)史隆，沒(méi)有規(guī)矩不成方圓魂务。無(wú)論是哪一行業(yè)都有各自的規(guī)矩和規(guī)范。
UI設(shè)計(jì)也不例外，具有設(shè)計(jì)規(guī)范粘姜。規(guī)范的設(shè)計(jì)可以讓我們?cè)O(shè)計(jì)具有統(tǒng)一性鬓照，界面視覺(jué)更美觀。
想要擁有高效且美觀的設(shè)計(jì)孤紧，就必須遵守UI設(shè)計(jì)的規(guī)范豺裆。
今天小渣帶來(lái)的這些規(guī)范，可以讓正入門的新手UI設(shè)計(jì)師們高效的完成你們的設(shè)計(jì)号显。
一留储、畫布尺寸規(guī)范
1.750*1334 px（IOS）
2.狀態(tài)欄（40px）、導(dǎo)航欄（88px）咙轩、主菜單（98px）获讳、內(nèi)容區(qū)域（根據(jù)設(shè)計(jì)需要此區(qū)域可向下拉長(zhǎng)）
二、色彩規(guī)范
色彩規(guī)范主要表明色彩的色值和使用范圍活喊，一般會(huì)從品牌色丐膝、輔助色、基礎(chǔ)色钾菊、狀態(tài)用色等等帅矗。
顏色不宜過(guò)多。選取一種主色煞烫、一種輔助色（非必需）浑此，在此基礎(chǔ)上進(jìn)行明度、飽和度變化滞详，構(gòu)成配色方案凛俱。
1.主色：原則上選用公司Logo色
2.搭配色：根據(jù)設(shè)計(jì)需要配色。
3.其余顏色通過(guò)純黑#000000與純白#ffffff的透明度變化來(lái)展現(xiàn)（包括圖標(biāo)和分隔線）料饥，而且透明度限定了幾個(gè)值蒲犬。
三、 字體規(guī)范
字體規(guī)范最需要注意的是提取出各個(gè)場(chǎng)景下需要用的字體和字號(hào)岸啡。
需要注意的是原叮，要標(biāo)注上應(yīng)用場(chǎng)景方便其他人理解。不然其他成員也并不知道到底什么時(shí)候應(yīng)用一級(jí)標(biāo)題巡蘸、什么時(shí)候用二級(jí)標(biāo)題奋隶。
1)常用字號(hào)（字號(hào)不要出現(xiàn)奇數(shù)）
2)英文和數(shù)字字體：Roboto ? 中文字體：方正蘭亭黑體或微軟雅黑（根據(jù)適應(yīng)不同系統(tǒng)配置來(lái)進(jìn)行設(shè)計(jì)）
四、圖標(biāo)規(guī)范
1.像素對(duì)齊
需要嚴(yán)格的做到像素對(duì)齊悦荒，尤其是在做較小尺寸的圖標(biāo)時(shí)唯欣，如果不嚴(yán)格的遵循像素對(duì)齊，那最終的顯示效果就會(huì)出現(xiàn)問(wèn)題逾冬。
2.多用布爾運(yùn)算
在做圖標(biāo)的時(shí)候黍聂，能用基本圖形進(jìn)行布爾運(yùn)算的時(shí)候，盡量不要使用鋼筆身腻，這樣做的好處有如下幾點(diǎn)：
讓你的圖標(biāo)更加規(guī)范
對(duì)圖形結(jié)構(gòu)理解更加深刻
后期更改形狀更加方便
很多設(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)格等等陵刹。
3.獨(dú)特的風(fēng)格
在做系列圖標(biāo)的時(shí)候默伍，一定要在前期給圖標(biāo)設(shè)定一個(gè)風(fēng)格及原則，使之看起來(lái)與眾不同衰琐。
在這里值得一提就是也糊，我們?cè)谧鼍€性圖標(biāo)時(shí)，一定要保證描邊粗細(xì)相同羡宙、圓角相同狸剃，如果這些基礎(chǔ)的規(guī)則都沒(méi)有遵循，那也就談不上風(fēng)格的統(tǒng)一狗热、創(chuàng)新了钞馁。
4.視覺(jué)大小統(tǒng)一
在進(jìn)行圖標(biāo)設(shè)計(jì)的時(shí)候，我們會(huì)使用柵格輔助線來(lái)幫助我們更加嚴(yán)格謹(jǐn)慎匿刮，但一定不要被輔助線困住指攒，學(xué)會(huì)靈活運(yùn)用，保持視覺(jué)上的大小統(tǒng)一僻焚。
在如今的APP設(shè)計(jì)環(huán)境當(dāng)中允悦，一些APP設(shè)計(jì)大牛都一直強(qiáng)調(diào)，設(shè)計(jì)師要為有品牌意識(shí)虑啤。
那么隙弛，在圖標(biāo)的設(shè)計(jì)中，我們也必須強(qiáng)調(diào)“品牌性”狞山，簡(jiǎn)單的說(shuō)就是把品牌中的抽象的概念變成具象化的圖形全闷，把品牌主副色調(diào)應(yīng)用到圖標(biāo)設(shè)計(jì)中。
五萍启、命名規(guī)范
小渣剛開(kāi)始做設(shè)計(jì)時(shí)對(duì)于“命名”是沒(méi)什么概念的总珠，我都是隨隨便便地用一些沒(méi)有特定意思的字母去給頁(yè)面命名屏鳍，以至于后來(lái)頁(yè)面多的時(shí)候，要修改和調(diào)整時(shí)完全找不到局服，文件夾也一團(tuán)亂钓瞭。
自從小渣吃了這一教訓(xùn)后，頁(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ā)看都不用看直接替換就可以了贞绵。
如果你覺(jué)得這篇文章有所幫助
那記得分享給身邊的朋友哈~
哦，對(duì)了
本文首發(fā)微信公眾號(hào)“UI小渣”恍飘，歡迎轉(zhuǎn)載榨崩，轉(zhuǎn)載請(qǐng)注明作者及來(lái)源。
