ui設計規範大全：ui的界面設計規範你了解嗎？很多新人在開始做移動端UI設計的時候，往往對界面的一些尺寸規範不是十厘清楚，很多時候都是憑借自己的感覺和經驗去繪制界面，心裡并沒有一個清晰的概念，導緻做出來的頁面總是不那麼盡如人意。下面這篇ui設計規範大全：ui的界面設計規範值得你看看。本文整理彙總了2020年最新的界面設計（iOS系統）中常用的一些UI尺寸規範大全以及ui設計語言和原則，如控件間距、适配、标注、切圖等，設計師在設計時并不一定要嚴格遵守，但對這些規範應有所了解，并融會貫通。
閱讀本文至少花3杯咖啡的時間，你做好準備了嗎？
iOS系統 - 01. - 界面設計尺寸及欄高度 目前主流的iOS裝置主要有iPhone SE（4英寸）、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸），它們都采用了Retina視網膜螢幕，其中iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，無論是欄高度還是應用圖示，設計師提供給開發人員的切片大小，前者始終是後者的1.5倍，并分别以@3x和@2x在檔案名結尾命名，程式再根據不同分辨率自動加載@3x或者@2x的切片。
通過上面的講解和圖示我們了解了iPhone不同裝置的實體尺寸，那麼他們的像素分辨率又是多少呢？也就是說我們用Photoshop做設計建立畫布應該設定多大呢？另外，iOS應用中的欄，包括狀态欄、導航欄、标簽欄、工具欄等，它們的高度又分别是多少呢？（注意：iOS嚴格規定了各個欄的高度，這個是必須遵守的）通過下面的表格和圖示來為你解答上面的問題。
注意：在進行iphone x設計的時候我們依然可以采用熟悉的iphone 7的設計尺寸作為模闆，隻是高度增加了290px，設計尺寸為750*1624（@2x）。注意狀态欄的高度由原來的40px變成了88px，另外底部要預留68px的首頁訓示器的位置。
在移動端頁面的設計中，頁面中元素的邊距和間距的設計規範是非常重要的，一個頁面是否美觀、簡潔、是否通透和邊距間距的設計規範緊密相連，是以說我們有必要對它們進行了解。
全局邊距
全局邊距是指頁面内容到螢幕邊緣的距離，整個應用的界面都應該以此來進行規範，以達到頁面整體視覺效果的統一。全局邊距的設定可以更好的引導使用者豎向向下閱讀。
在實際應用中應該根據不同的産品氣質采用不同的邊距，讓邊距成為界面的一種設計語言，常用的全局邊距有32px、30px、24px、20px等等，當然除了這些還有更大或者更小的邊距，但上面說到的這些是最常用的，而且有一個特點就是數值全是偶數。
以iOS原生态頁面為例，“設定”頁面和“通用”頁面都是使用的30px的邊距。
再以微信和支付寶為例，他們的邊距分别是20px和24px。
通常左右邊距最小為20px，這樣的距離可以展示更多的内容，不建議比20還小，否則就會使界面内容過于擁擠，給使用者的浏覽帶來視覺負擔。30px是非常舒服的距離，是絕大多數應用的首選邊距。
還有一種是不留邊距，通常被應用在卡片式布局中圖檔通欄顯示，比如站酷APP（當然站酷APP也進行了改版，首頁已經采用了不通欄的卡片式設計）。這種圖檔通欄顯示的設定方式，更容易讓使用者将注意力集中到每個圖文的内容本身，其視覺流在向下浏覽時因為沒有留白的引導被圖檔直接割裂，造成在圖檔上停留更長時間。
卡片間距
在移動端頁面設計中卡片式布局是非常常見的布局方式，至于卡片和卡片之間的距離的設定需要根據界面的風格以及卡片承載資訊的多少來界定，通常最小不低于16px，過小的間距會造成使用者的緊張情緒，使用最多的間距是20px、24px、30px、40px，當然間距也不宜過大，過大的間距會使界面變得松散，間距的顔色設定可以與分割線一緻，也可以更淺一些。
以iOS（750*1334px）為例，設定頁面不需要承載太多的資訊，是以采用了較大的70px作為卡片間距，有利于減輕使用者的閱讀負擔，而通知中心承載了大量的資訊，過大的間距會讓浏覽變得不連貫和界面視覺松散，是以采用了較小的16px作為卡片的間距。
下面來看一下微信的卡片間距設定的是多少，以及顔色值。
注：卡片間距和顔色值是直接截圖測量和吸取的，可能不十分準确
繼續舉例，下面的兩張截圖分别是巨劃算（卡片間距20px）和拼多多（卡片間距16px）的首頁截圖，這種電商類的APP因為需要承載大量的資訊，是以一般間距設定的都比較小。
總結：卡片間距的設定是靈活多變的，一定要根據産品的氣質和實際需求去設定，平時也可以多截圖測量一下各類APP的卡片間距都是怎麼設定的，看的多了并融會貫通，卡片間距設定自然會更加合理，更加得心應手。
内容間距
一款APP除了各種欄（狀态欄、導航欄、标簽欄、工具欄）和控件icon就是内容了，内容的布局形式多種多樣，這裡不去探讨内容具體應該如何去布局，我們來說一說内容的間距設定問題。
先來介紹一下格式塔原則中的一個重要的原則就是鄰近性，格式塔鄰近性原則認為：單個元素之間的相對距離會影響我們感覺它是否以及如何組織在一起，，互相靠近的元素看起來屬于一組，而那些距離較遠的則自動劃分組外，距離近的關系緊密。來看下圖，左圖中的圓在水準方向比垂直距離近，那麼，我們看到了4排圓點，而右圖則看成4列。
在UI設計中内容布局時，一定要重視鄰近性原則的運用，比如在下面這款輕芒閱讀APP的主界面中，每一個應用名稱都遠離其他圖示，與對應的圖示距離較近，保持親密的關系，也讓使用者的浏覽變得更直覺，如果應用名稱與上下圖示距離相同，就分不出它是屬于上面還是下面，進而讓使用者産生錯亂的感覺。
再來看一個案例，日日煮APP，上面圖檔與文字較近，下面圖檔與文字較遠，是以我們清晰的知道文字是屬于上面的圖檔的。
在APP的設計中内容的布局形式多種多樣，這裡介紹最常用的兩種布局形式，清單式布局和卡片式布局。
清單式布局
清單式布局方式非常普遍，随便打開一個APP，基本都存在這種布局方式，其布局形式的特點在于能夠在較小的螢幕中顯示多條資訊，使用者通過上下滑動的手勢能獲得大量的資訊回報。而清單也是一種非常容易了解的展示形式。
以我們最常用的微信和QQ為例，其“資訊”頁面都是采用的清單式布局，在采用這種布局形式的時候要注意清單舒适體驗的最小高度是80px，最大的高度要視内容的多少而定。
繼續舉例，自如（清單高度110px）和唯品會（清單高度106px）的清單式布局。
卡片式布局
形式非常靈活。其特點在于，每張卡片的内容和形式都可以互相獨立，互不幹擾，是以可以在同一個頁面中出現不同的卡片承載不同的内容。而由于每張卡片都是獨立存在的，其資訊量可以相對清單更加豐富。
在使用卡片式布局的時候要注意卡片本身一般是白色的，而卡片之間的間距顔色一般是淺灰色，當然不同産品風格顔色可能不一樣，有些是淺灰色偏藍等。
雙欄卡片的布局形式，比較常見于以圖檔資訊為主導的App。例如一些商城的商品陳列頁面。這種形式與卡片式類似，但它能在一屏裡顯示更多的内容，至少4張卡片。同時，由于分開左右兩欄的顯示，使用者可以更加友善地對比左右兩欄卡片的内容。
在UI設計中，對于圖檔的尺寸和比例沒有嚴格的規範，設計師往往憑借經驗和感覺設定一個看起來不錯的尺寸，但事實上我們是有章可循的。運用科學的手段設定圖檔的尺寸，可以獲得最優的方案，常見的圖檔尺寸有16:9、4:3、3:2、1:1和1:0.618（黃金比例）等。
這些比例不無根據，它們都和圖檔尺寸有關。16:9 是根據人體工程學的研究，發現人的兩隻眼睛的視野範圍是一個長寬比例為16:9的長方形，4:3 是勾三股四弦五，在攝影中非常常見……。
在應用界面的設計中，功能圖示不是單獨的個體，通常是由許多不同的圖示構成整個系列，它們貫穿于整個産品應用的所有頁面并向使用者傳遞資訊。
一套APP圖示應該具有相同的風格，包括造型規則、圓角大小，線框粗細，圖形樣式和個性細節等元素都應該具有統一的規範。
通過分析以上三組圖示可以得出：他們具有統一的色彩，統一的圓角大小，統一的線框粗細，那綜合起來也就是具有統一的風格，給使用者高度統一的視覺體驗。
06. - APP版式設計規範版式設計又叫做版面編輯，即在有限的版面空間裡，将版面的構成要素如文字、圖檔、控件等根據特定的内容進行組合排列。一個優秀的排版要考慮到使用者的閱讀習慣和設計美感，在UI設計中版面設計的原則有哪些呢？
對齊
對齊是貫穿版式設計的最基礎，最重要的原則之一，它能建立起一種整齊劃一的外觀，帶給使用者有序一緻的浏覽體驗。
對稱
對稱是宇宙間的設計哲學，是對立統一規律的本質屬性，呈現出一種和諧自然的美，在應用界面的設計中，引導頁設計、注冊登入輸入框和按鈕等無一不是對稱的設計。
分組
物以類聚，人以群分。分組是将同類别的資訊組合在一起，直覺的呈現在使用者的面前，這樣的設計能夠減少使用者的認知負擔，在移動端界面的設計中最常見的分組方式就是卡片，為使用者選擇提供專注而又明确的浏覽體驗。
文字是APP中最核心的元素，是産品傳達給使用者的主要内容，是以說文字在APP的設計中是非常重要的，那麼，文字的字型如何選擇，字号如何設定，是否加粗，顔色如何設定？
在一款APP中字号範圍一般在20-36之間（@2x）,當然iOS 11中出現了大标題的設計，字号還是要根據産品屬性酌情設定。另外需要注意的一點是所有的字号設定都必須為偶數，上下級内容字号極差關系為2-4号。
關于字型：在iOS 9推出之前設計師普遍采用華文黑體、谷歌思源、冬青等字型進行設計，iOS 9推出了蘋果自己的字型——蘋方！自此之後蘋方字型被廣泛應用于移動端設計中。
關于字型顔色和是否加粗：字型的顔色設定我們一般很少用純黑色，一般用深灰色和淺灰色、細體和粗體（注意要用字型本身的字重，不能用PS的加粗功能）來區分重要資訊和次要資訊，進行資訊層級的劃分。
iOS主流裝置的分辨率分别是640x1136px（@2x）（iPhone SE）、750 x1334px（@2x）（iPhone 6s/7/8）、1242x2208px（@3x）（iPhone 6s/7/8 Plus）、1125x2436px（@3x）／750x1624px（@2x）（iPhone X）。
在設計設計中設計師需要設計一套基準設計圖來達到适配多個分辨率的目的，我們可以選擇中間尺寸750 x1334px作為基準，向下适配640x1136px，向上适配1242x2208px和750x1624px／1125x2436px。
750x1334向下适配640x1136
由于750x1334px和640x1136px兩個尺寸的界面都是2倍的像素倍率，是以它們的切片大小是相同的，即系統圖示、文字和高度都無需适配，需要适配的是寬度。
為了讓大家了解适配的原則，我們以文字描述和圖示的方式進行750x1334px到640x1136px的界面推導。
繪制一個750x1334px的設計圖，這是最常見的首頁設計圖，從上至下分别是狀态欄、導航欄、首焦圖、主要入口、分割、清單。
下面開始進行适配，上面提到了由于750x1334px到640x1136px都是2倍的像素倍率，界面的圖示、文字大小等都是相同的，是以我們不需要改變圖像大小，隻需将畫布大小改成 640x1136px即可，然後再改變橫向元素的間距以達到适配的目的。
首先打開750x1334px的設計稿，執行Command+Alt+C（改變畫布大小的快捷鍵），滑鼠左鍵單擊“定位”的左上角的格子，設定寬高為640和1136，點選“确定”。
改變畫布大小之後，設計稿的右邊和下邊都被裁切（上面左圖中半透明蒙版覆寫區域），畫布縮小成640x1136px。
上面左圖裁切到右圖适配完成，做了如下調整。
1）導航欄右邊的圖示向左移動保持和原來的右邊距一緻，标題居中。
2）首焦圖高度除以1.17（750／640=1.17得到）後居中，寬度640px。
3）主要入口右邊的圖示向左移動保持和原來的右邊距一緻，各圖示的間距等寬。
750x1334向上适配1242x2208
由于750x1334px界面是2倍的像素倍率，而1242x2208px是3倍的像素倍率，也就是說1242x2208px界面上所有的元素的尺寸都是750x1334px界面上元素的1.5倍，是以我們在進行适配的時候直接将界面的圖像大小變為原來的1.5倍，然後調整畫布大小為1242x2208px，最後調整界面圖示和元素的橫向間距的大小完成适配。
上面說了整體思路，下面我們來說說具體怎麼适配。
首先對750x1334px的畫布執行Command+Alt+I指令（調整圖像大小），機關設定為百分比，寬高設定為150%，點選“确定”，調整之後的畫布大小為1125x2001px。
緊接着對1.5倍之後的1125x2001px界面執行Command+Alt+C（調整畫布大小），滑鼠單擊“定位”左上角的格子，調整寬高為1242和2208px，點選“确定”。
上面左圖拓展畫布到右圖完成适配做了如下調整。
1）導航欄右邊的圖示向右移動保持和原來的右邊距一緻，标題居中。
2）首焦圖的高度乘以1.65（1242/750=1.65得到）後居中，寬度1242px。
3）主要入口右邊的圖示向右移動和原來的右邊距一緻，各圖示的間距等寬。
注：分割線仍是1px。
750x1334向上适配1125x2436px（@3x）
與蘋果之前釋出的iOS裝置相比，iPhone X的像素分辨率發生了變化，為1125x2436px（@3x），在實際工作中為了友善向上和向下的适配，我們仍然可以選擇熟悉的iPhone 7（750x1334px）的尺寸作為模版進行設計，隻是高度增加了290px；設計尺寸為：750x1624px（@2x）。設計完成之後将設計稿的圖像大小拓展1.5倍即可得到1125x2436px（@3x）尺寸的設計稿。
在适配的時候需要注意，狀态欄由之前的40px增加到88px，标簽底部預留68px用于放置首頁訓示器，如下圖所示。
關于首頁訓示器的适配涉及到兩種情況：底部出現标簽欄、工具欄等操作設計時，需要将底色下延68px并填充原有顔色，這樣的處理可以讓底部設計更佳簡潔舒适，沒有功能操作時，頁面底部不需要填充顔色，隻需蓋住首頁訓示器即可。
對于大多數采用瀑布流的頁面來說，僅僅是螢幕高度上的變化，可以無視。但對于如：新手引導頁、音樂播放器等需要單屏顯示的界面就需要重新布局。
當界面設計定稿之後，設計師需要對圖示進行切片提供給開發工程師，通常我們隻需要對icon進行切圖即可，文字、線條和一些标準的幾何形狀是不需要切圖的，例如搜尋框隻需要在标注中描述它的尺寸、圓角大小、背景色值、不透明度即可，開發工程師可以用代碼實作這種效果。
輸出切片
先将設計稿中的圖示重新排列在一張新的畫布中，保證同樣尺寸的圖示間距相同，這樣做的好處是為圖示建立一個控件庫，有利于圖示的整理。
給每一個圖示建立好參考線之後，用PS自帶的切片功能，沿着建立好的每個圖示的參考線畫框即可，注意最後要輸出PNG格式的切片（PNG格式擁有更多的顔色和細節并且支援透明）。
在具體操作時首先要将畫布背景色去掉，讓畫布變成透明，做好切片後執行“檔案-存儲為Web所用格式，在對話框中選擇PNG格式，點選“存儲”即可。
注：圖中标簽欄圖示的底色塊是為了保證統一的切片尺寸，可以根據色塊建立參考線，具體切圖時要将色塊去掉。
切片命名
切片命名的通用規範是，界面_功能_狀态.png。名稱應使用英文命名，不要使用數字或者符号作為開頭，使用下劃線進行連接配接，例如一個首頁處于正常狀态下的按鈕命名是 [email protected]。其中界面首頁是home、空間按鈕是btn、狀态正常是normal。為了命名的正确性，設計師需要先和合作的開發工程師進行溝通确認。
10. - 設計稿标注當界面設計定稿之後，設計師需要對界面進行标注給開發工程師在還原界面時進行參考。借助一些專業的标注工具有利于我們提高工作效率，常用的标注工具有Mark Man或PX Cook。
在一份設計稿中需要标注的内容是文字的字号大小、粗細、顔色、不透明度；界面的背景顔色、不透明度；各個圖示、清單、文字之間的間距。
界面标注的作用是給開發工程師提供參考，是以在标注之前需要和開發工程師進行溝通，了解他們的工作方式，标注完成之後宣講你的注意事項，以更快捷高效的完成工作，并且最大限度的完成視覺高的還原。
以上包括界面尺寸、控件間距、版式設計規範、文字設計規範、設計适配、标注、切圖等等一些列的移動端UI設計規範。
設計語言 -在做設計語言之前我們先要建立設計原則，以及設計原則下面的設計關鍵詞，通過設計關鍵詞推導出對應的視覺表現手法，也就是通常我們所說的，形，色，字，構，質。
http://sumaart.com (二維碼自動識别)
根據原子定律（不懂原子定律同學可以搜尋原子設計方法）我們從頁面中最細小的元素入手，也可以了解為頁面中無法再拆分的元素開始，它是組成界面最基礎的元素，從最基礎的元素，開始做統一性，本次我将從顔色，字型，網格說起。
顔色 從顔色開始，需要根據整個頁面中場景進行顔色定義，同樣色彩也需要根據我們定義的關鍵詞去推導，在定義顔色過程中，可以參加色彩心理學原理，以及競品分析：
高品質：深色配色，黑白，中性的配色 全球化：深邃紫色，科技藍，自然綠 年輕化：漸變色，馬卡龍撞色在定義了上述大的色彩原理下，需要對界面中使用場景進行梳理得出下列大概色彩類型：
當然也可以定義一些界面中常用漸變色闆，現在很多網站也有很多很好看的漸變可以去嘗試。
也可以定義一些圖檔上放文字效果，疊加什麼顔色，顔色的模式是什麼樣的，透明度是多大，這些都可以幫助我們定義好一套色彩體系。
當然還有一些很不錯的色闆，如果你不知道怎麼配色，也不知道當下流行色是怎麼樣，也可以從這些色闆裡面選擇一個配色，挑選一些符合你們産品的配色。
▲ https://www.materialui.co/
▲ https://coolors.co/
▲ http://colorsupplyyy.com/app/
字型 字型是界面中使用者看到最多的一些元素，除了定義界面中的字型，同時我們也要定義界面下的字型，包括線下物料宣傳等，在字型選擇上，需要注意：
1.資訊傳遞是否足夠清晰，字型也是有情感的，字型表達的情感是否和我們界面中需求是一緻的。 2.個性上，有的字型很方正，筆直，有的字型筆劃比較活潑，那麼不同字型我們如何去選擇，同樣需要在前面大的設計關鍵詞下面去設計。 對于字型選擇，一定要根據産品關鍵詞去定義，以上是界面中常用一些英文和中文字型，每種字型雖然大體看差不多，其實每個字型，細看其實有些筆畫上的差異！我個人建議蘋方字型和Helvetica Neue比較通用性更強，中文字型包比較大，特殊産品如果需要有個性化中文字型，需要注意字型大小包處理！
字号字号是界面中很重要元素，字号大小決定了資訊的層次和層次，在扁平化設計中，字号越來越重要，好的字号設定能讓界面更加清晰一緻性強！相反差的字号會讓界面看起來山寨，關于字号的選擇，可以遵循iOS的規範大小，也可以根據自己産品個性去定義你的字号。
假如你是電商産品，那麼你可能需要對價格字型單獨設定字号，如果你是金融産品，那麼對應的字号也需要定義好對應的大小層級！
▲ 對于特殊字型的處理（375分辨率）
▲ 常用的5種字型節奏（375分辨率）
▲ 特殊數字或圖形化字号（375分辨率）
行高參考3C原理，不明白可以百度搜，英文的行高是字号的1.2倍，但是中英文字型原因，中文字型一般是1.5-2倍之間，我們需要充分考慮不同人群特點，老人，兒童，年輕人，以及使用環境。
英文的行高一般為字型1.2倍，比如你字号是20号，那麼行高24，當然也有很多國外設計師采用黃金比例的行高，比如1.414倍，1.618倍，1.717倍數等等，行高大小，正如我前面所說，需要充分考慮你整個界面的節奏，和内容以及使用者人群來定義是需要緊湊還是疏密！
中文常用的行高，一般為字型大小的1.5倍比較合适，當然也可以一些簡單的做法，就是字号+4原則，比如你字号是20，你的行高24，字号28，行高32也是可行的，每個團隊可以根據需求去定義。
字重 字重，顧名思義就是字型粗細，越來越多的産品需要通過字型粗細來拉開資訊層次，當下主流趨勢iOS11中也是通過字重來拉開資訊層級的，是以在定義字型規範時候也需要重複考慮進去什麼時候用什麼字型。
網格系統 這塊知識相對比較複雜，我這邊簡單分享下，我想大多數同學都經曆過這個情況，拿到其他設計師源檔案，間距混亂，一會邊距20，一會24，一會32，特别混亂，原因在于大家間距沒有去詳細定義它的規則。
看看别人怎麼做的？
▲ Airbnb的規範中，對于間距的定義，沒有像其他規範那樣，隻定義一個最小機關數值，而是定義了5種彈性間距，8，16，24，48，64在他的全部設計裡面，包括元素和元素之前，圖文之間都是運用這一套間距規則，保證了整個界面的統一性。
▲ 這是國外運用比較多的8點網格，Airbnb在這個基礎上進行了進一步的簡潔，隻保留了8，16，24，48，64
▲ 國外有項資料表明，設計師在運用8為最小機關做設計時候，一般常用間距有哪些，最後定義了5種常用間距規則。
是以，我們在規範時候，一定不要運用太多的間距規則，否則間距，很難得到控制和統一，建議定幾種間距，你可以是8，16，24，48，64，如果你覺得這些間距不夠用，你也可以添加新的間距規則進行，但是建議不要太多。
網格設計政策1.定最小機關
先定義最小機關，機關越小頁面越緊湊，目前常用比較多的有，4，5，8，假設我們最小機關是4為倍數，那我們所有的間距都按照8的倍數遞增，得到間距規則，8，16，20，40，60
2.按增量設計
http://sumaart.com (二維碼自動識别)
▲ 界面中所有的間距地方，全部運用8，16，20，40，60這幾個原則來做設計，保證頁面統一性。
▲ 頁面中的元素高度，比如banner高度也是按照間距增量去設計高度，那麼整個頁面就更加有系統性和科學性。
▲ 在做系統設計時候經常用到的，通過增量來做設計，希望大家都可以掌握這種間距原則！
圖形 圖形是界面中的靈魂，圖形也是很好傳遞視覺語言很重要的一部分，如何保證圖形一緻性，打造界面中視覺記憶點，這個點很大，展開來講很多，包括品牌符号，icon插畫元素一系列等等。
設計語言是一個很龐大的設計體系，字型，網格系統，顔色，圖形等等，包括後面定義好原子後，怎麼定義元件，再到頁面。文章裡借鑒了一些國外設計語言網站，大家感興趣，也可以從這些網站裡學習下，看看别人是如何做的。
通過以上内容相信大家對ui設計規範大全：ui的界面設計規範也有一定的了解了，大家有什麼問題可以随時留言評論，看見就會回複的，
評論區扣1贈送UI設計入門資料大禮包一份，需要的小夥伴注意喽~