UI設計基本規(guī)范

　　想要學習UI，那你知道UI設計的基本規(guī)范有哪些嗎?
 

　　一、設計原則
 

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

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

　　確定性：在設計中減少不確定的因素，和預期。
 

　　二、色彩系統(tǒng)
 

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

　　三、圖形
 

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

　　四、柵格系統(tǒng)
 

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

　　五、字體
 

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

　　六、投影
 

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

　　七、圖文關(guān)系
 

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

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

　　八、邊距和間距
 

　　在移動端頁面的設計中，頁面中元素的邊距和間距的設計規(guī)范是非常重要的，一個頁面是否美觀、簡潔、是否通透和邊距間距的設計規(guī)范緊密相連，所以說我們有必要對它們進行了解。
 

　　全局邊距
 

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

　　卡片間距
 

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

　　內(nèi)容間距
 

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

　　九、內(nèi)容布局
 

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

　　列表式布局
 

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

　　卡片式布局
 

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

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

　　十、界面圖片設計比例
 

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

　　十一、APP版式設計規(guī)范
 

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

　　十二、界面文字設計規(guī)范
 

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

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

　　十三、切圖規(guī)范
 

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

　　輸出切片
 

　　先將設計稿中的圖標重新排列在一張新的畫布中，保證同樣尺寸的圖標間距相同，這樣做的好處是為圖標建立一個控件庫，有利于圖標的整理。
 

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

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

　　切片命名
 

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

　　十四、設計稿標注
 

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

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

　　十五、程序的對應控件
 

　　Label的自身屬性：顏色、字號、字體、行間距、對齊方式、透明度;
 

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

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