UI設(shè)計(jì)基本規(guī)范

　　想要學(xué)習(xí)UI，那你知道UI設(shè)計(jì)的基本規(guī)范有哪些嗎?
 

　　一、設(shè)計(jì)原則
 

　　統(tǒng)一性：每個(gè)設(shè)計(jì)應(yīng)該是統(tǒng)一的，不能有太多個(gè)性差異化的特征;
 

　　內(nèi)容：用戶更多關(guān)注的是內(nèi)容，而非設(shè)計(jì)本身;
 

　　確定性：在設(shè)計(jì)中減少不確定的因素，和預(yù)期。
 

　　二、色彩系統(tǒng)
 

　　設(shè)計(jì)中三大元素，色彩，字體，圖形，我們?cè)诮⒁粋€(gè)系統(tǒng)時(shí)候，色彩是很重要一部分，我們需要定義好我們整個(gè)系統(tǒng)的色彩架構(gòu)體系，色彩體系一旦建立好，后面我們的設(shè)計(jì)都將圍繞這些色彩進(jìn)行設(shè)計(jì)，色彩包括：品牌色、輔助色、字體黑白灰顏色、不可用顏色、超鏈接顏色、成功或失敗顏色，主色盤,輔助色盤,色盤延伸等。
 

　　三、圖形
 

　　圖形，設(shè)計(jì)中很重要元素之一，我們插畫風(fēng)格圖形如何定義，圖標(biāo)，背景圖形都屬于圖形一部分。插畫在設(shè)計(jì)運(yùn)用類型有幾種，比如atlassian對(duì)于他們插畫類型進(jìn)行了規(guī)范，插畫需要有隱秘和故事性在里面，插畫必須有構(gòu)建的感覺(jué)，定義了人物特征以及顏色規(guī)范。包括對(duì)于空白頁(yè)圖形定義，對(duì)圖標(biāo)風(fēng)格定義，包括色彩關(guān)系，對(duì)于頭像，定義了有五官和無(wú)五官風(fēng)格定義，包括整個(gè)規(guī)范的正確示范和錯(cuò)誤示范,圖標(biāo)規(guī)范等。
 

　　四、柵格系統(tǒng)
 

　　柵格是為了保證頁(yè)面中更好的布局，保證布局統(tǒng)一性。柵格系統(tǒng)里面又分最小單位和間距，在airbnb中對(duì)于間距，他們運(yùn)用了8的倍數(shù)，所有的規(guī)范都是很有彈性的，8，16，24，48，64來(lái)建立。網(wǎng)格系統(tǒng)中的列,也有叫欄,網(wǎng)格系統(tǒng)中的行,網(wǎng)格系統(tǒng)中的水槽,網(wǎng)格系統(tǒng)中的邊距。
 

　　五、字體
 

　　界面中出現(xiàn)最多的內(nèi)容字體，字體除了傳統(tǒng)意義上大小之外，還有字間距、行間距、字重對(duì)比、字體顏色等。字重，就是字體粗細(xì)，通過(guò)字重可以加強(qiáng)層級(jí);字體大小以及運(yùn)用場(chǎng)景，字體在界面中什么樣場(chǎng)景運(yùn)用多大字號(hào)，以及對(duì)應(yīng)的字間距，行間距等等都是需要我們?nèi)ザx的;字體顏色，什么時(shí)候用品牌色，成功，錯(cuò)過(guò)，超鏈接出錯(cuò)等等各個(gè)狀態(tài)的顏色如何去定義，后面文章我會(huì)詳細(xì)說(shuō)明。
 

　　六、投影
 

　　在設(shè)計(jì)系統(tǒng)中我們需要定義好投影關(guān)系，投影需要去定義不同的強(qiáng)度大小，以滿足頁(yè)面中需要，一般通過(guò)透明度，以及投影遠(yuǎn)近來(lái)定義。
 

　　七、圖文關(guān)系
 

　　圖片和文字在界面中如何處理，多色調(diào)如何運(yùn)用，黑色圖片上放文字怎么處理，白色圖片放文字如何處理都是需要我們?nèi)ピ敿?xì)定義的。
 

　　設(shè)計(jì)一套設(shè)計(jì)語(yǔ)言是一個(gè)很復(fù)雜的過(guò)程，前期一般需要比較資深的的設(shè)計(jì)師來(lái)完成，設(shè)計(jì)完成后，對(duì)于基礎(chǔ)的顏色，字體不要經(jīng)常變動(dòng)動(dòng)，成本會(huì)比較高，至少需要保證這些基礎(chǔ)元素，一年內(nèi)不要頻繁變動(dòng)，今天和大家分享的只是一個(gè)大概框架，后續(xù)我將會(huì)拆解里面每個(gè)模塊，逐步和大家分享如何去設(shè)計(jì)一個(gè)語(yǔ)言。
 

　　八、邊距和間距
 

　　在移動(dòng)端頁(yè)面的設(shè)計(jì)中，頁(yè)面中元素的邊距和間距的設(shè)計(jì)規(guī)范是非常重要的，一個(gè)頁(yè)面是否美觀、簡(jiǎn)潔、是否通透和邊距間距的設(shè)計(jì)規(guī)范緊密相連，所以說(shuō)我們有必要對(duì)它們進(jìn)行了解。
 

　　全局邊距
 

　　全局邊距是指頁(yè)面內(nèi)容到屏幕邊緣的距離，整個(gè)應(yīng)用的界面都應(yīng)該以此來(lái)進(jìn)行規(guī)范，以達(dá)到頁(yè)面整體視覺(jué)效果的統(tǒng)一。全局邊距的設(shè)置可以更好的引導(dǎo)用戶豎向向下閱讀。
 

　　卡片間距
 

　　在移動(dòng)端頁(yè)面設(shè)計(jì)中卡片式布局是非常常見(jiàn)的布局方式，至于卡片和卡片之間的距離的設(shè)置需要根據(jù)界面的風(fēng)格以及卡片承載信息的多少來(lái)界定，通常最小不低于16px，卡片間距的設(shè)置是靈活多變的，一定要根據(jù)產(chǎn)品的氣質(zhì)和實(shí)際需求去設(shè)置，平時(shí)也可以多截圖測(cè)量一下各類 APP 的卡片間距都是怎么設(shè)置的，看的多了并融會(huì)貫通，卡片間距設(shè)置自然會(huì)更加合理，更加得心應(yīng)手。
 

　　內(nèi)容間距
 

　　一款 APP 除了狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、工具欄和控件icon就是內(nèi)容了，內(nèi)容的布局形式多種多樣。格式塔鄰近性原則認(rèn)為：?jiǎn)蝹€(gè)元素之間的相對(duì)距離會(huì)影響我們感知它是否以及如何組織在一起，互相靠近的元素看起來(lái)屬于一組，而那些距離較遠(yuǎn)的則自動(dòng)劃分組外，距離近的關(guān)系緊密。
 

　　九、內(nèi)容布局
 

　　在 APP 的設(shè)計(jì)中內(nèi)容的布局形式多種多樣，最常用的兩種布局形式就是列表式布局和卡片式布局。
 

　　列表式布局
 

　　列表式布局方式非常普遍，隨便打開(kāi)一個(gè) APP，基本都存在這種布局方式，其布局形式的特點(diǎn)在于能夠在較小的屏幕中顯示多條信息，用戶通過(guò)上下滑動(dòng)的手勢(shì)能獲得大量的信息反饋。而列表也是一種非常容易理解的展示形式。
 

　　卡片式布局
 

　　形式非常靈活。其特點(diǎn)在于，每張卡片的內(nèi)容和形式都可以相互獨(dú)立，互不干擾，所以可以在同一個(gè)頁(yè)面中出現(xiàn)不同的卡片承載不同的內(nèi)容。而由于每張卡片都是獨(dú)立存在的，其信息量可以相對(duì)列表更加豐富。
 

　　在使用卡片式布局的時(shí)候要注意卡片本身一般是白色的，而卡片之間的間距顏色一般是淺灰色，當(dāng)然不同產(chǎn)品風(fēng)格顏色可能不一樣，有些是淺灰色偏藍(lán)等。
 

　　十、界面圖片設(shè)計(jì)比例
 

　　在 UI設(shè)計(jì)中，對(duì)于圖片的尺寸和比例沒(méi)有嚴(yán)格的規(guī)范，設(shè)計(jì)師往往憑借經(jīng)驗(yàn)和感覺(jué)設(shè)置一個(gè)看起來(lái)不錯(cuò)的尺寸，但事實(shí)上我們是有章可循的。運(yùn)用科學(xué)的手段設(shè)置圖片的尺寸，可以獲得最優(yōu)的方案，常見(jiàn)的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618(黃金比例)等。
 

　　十一、APP版式設(shè)計(jì)規(guī)范
 

　　版式設(shè)計(jì)又叫做版面編輯，即在有限的版面空間里，將版面的構(gòu)成要素如文字、圖片、控件等根據(jù)特定的內(nèi)容進(jìn)行組合排列。一個(gè)優(yōu)秀的排版要考慮到用戶的閱讀習(xí)慣和設(shè)計(jì)美感，在 UI設(shè)計(jì)中版面設(shè)計(jì)的原則有哪些呢?
 

　　十二、界面文字設(shè)計(jì)規(guī)范
 

　　文字是 APP 中最核心的元素，是產(chǎn)品傳達(dá)給用戶的主要內(nèi)容，所以說(shuō)文字在 APP 的設(shè)計(jì)中是非常重要的，那么，文字的字體如何選擇，字號(hào)如何設(shè)定，是否加粗，顏色如何設(shè)置
 

　　在一款 APP 中字號(hào)范圍一般在20-36之間(@2x),當(dāng)然 iOS 11中出現(xiàn)了大標(biāo)題的設(shè)計(jì)，字號(hào)還是要根據(jù)產(chǎn)品屬性酌情設(shè)定。另外需要注意的一點(diǎn)是所有的字號(hào)設(shè)置都必須為偶數(shù)，上下級(jí)內(nèi)容字號(hào)極差關(guān)系為2-4號(hào)。關(guān)于字體。
 

　　十三、切圖規(guī)范
 

　　當(dāng)界面設(shè)計(jì)定稿之后，設(shè)計(jì)師需要對(duì)圖標(biāo)進(jìn)行切片提供給開(kāi)發(fā)工程師，通常我們只需要對(duì) icon 進(jìn)行切圖即可，文字、線條和一些標(biāo)準(zhǔn)的幾何形狀是不需要切圖的，例如搜索框只需要在標(biāo)注中描述它的尺寸、圓角大小、背景色值、不透明度即可，開(kāi)發(fā)工程師可以用代碼實(shí)現(xiàn)這種效果。
 

　　輸出切片
 

　　先將設(shè)計(jì)稿中的圖標(biāo)重新排列在一張新的畫布中，保證同樣尺寸的圖標(biāo)間距相同，這樣做的好處是為圖標(biāo)建立一個(gè)控件庫(kù)，有利于圖標(biāo)的整理。
 

　　給每一個(gè)圖標(biāo)建立好參考線之后，用 PS 自帶的切片功能，沿著建立好的每個(gè)圖標(biāo)的參考線畫框即可，注意最后要輸出 PNG 格式的切片(PNG 格式擁有更多的顏色和細(xì)節(jié)并且支持透明)。
 

　　在具體操作時(shí)首先要將畫布背景色去掉，讓畫布變成透明，做好切片后執(zhí)行文件-存儲(chǔ)為 Web 所用格式，在對(duì)話框中選擇 PNG 格式，點(diǎn)擊「存儲(chǔ)」即可
 

　　切片命名
 

　　切片命名的通用規(guī)范是，界面_功能_狀態(tài).png。名稱應(yīng)使用英文命名，不要使用數(shù)字或者符號(hào)作為開(kāi)頭，使用下劃線進(jìn)行連接，例如一個(gè)首頁(yè)處于正常狀態(tài)下的按鈕命名是 home_btn_nor@2x.png。其中界面首頁(yè)是 home、空間按鈕是 btn、狀態(tài)正常是 normal。為了命名的正確性，設(shè)計(jì)師需要先和合作的開(kāi)發(fā)工程師進(jìn)行溝通確認(rèn)。
 

　　十四、設(shè)計(jì)稿標(biāo)注
 

　　當(dāng)界面設(shè)計(jì)定稿之后，設(shè)計(jì)師需要對(duì)界面進(jìn)行標(biāo)注給開(kāi)發(fā)工程師在還原界面時(shí)進(jìn)行參考。借助一些專業(yè)的標(biāo)注工具有利于我們提高工作效率，常用的標(biāo)注工具有 Mark Man 或 PX Cook。
 

　　在一份設(shè)計(jì)稿中需要標(biāo)注的內(nèi)容是文字的字號(hào)大小、粗細(xì)、顏色、不透明度;界面的背景顏色、不透明度;各個(gè)圖標(biāo)、列表、文字之間的間距。
 

　　十五、程序的對(duì)應(yīng)控件
 

　　Label的自身屬性：顏色、字號(hào)、字體、行間距、對(duì)齊方式、透明度;
 

　　Image View的自身屬性：寬高、間距、距離、透明度。
 

　　如今使用本地化插件Sketch Measure，幾乎不用手工標(biāo)注，標(biāo)注導(dǎo)出HTML后，直接給開(kāi)發(fā)，他們想看什么屬性自己點(diǎn)擊查看。而一些線上工具的插件，比如藍(lán)湖、墨刀、Mockplus等，功能更加豐富。