[TOC] # 聊聊UI設計規范：移動端、H5與Web端  ## 1. UI設計規范是什么 UI設計規范，是指由UI設計師制定的，對配色、字體、元素間距、控件尺寸、頁面布局等可復用設計規則的提煉和約束，用于指導后續的設計工作。制作UI設計規范是一件看起來非常容易的事情，一個psd文件、一個pdf，甚至一個ppt文件都可以作為設計規范的載體。 然而UI規范的逐漸完善、堅持在產品中推行，以及整個團隊切實意識到規范的必要性，則是需要UI設計師多年積累的一個過程。 ## 2. 設計規范的價值 UI設計規范是一份在團隊協作中，對降低溝通成本、提高設計效率、保持產品或品牌設計風格一致而言非常重要的文檔，團隊越大，規范的重要性就越發凸顯。對開發而言，可以便于開發同學準確地還原樣式、增強控件的復用性。對設計師團隊而言，便于向新介入項目的同事介紹項目概況、幫助其迅速上手項目。對公司品牌而言，則有助于向用戶傳達統一的品牌形象。 當然，嚴格而精細的設計規范在不注重設計的團隊中堅持推行卻并不容易，需求的變化速度、前端同學的脾氣、領導的審美水平……等等很多因素會造成一套UI規范的推行無疾而終。不過，在規模過小的團隊中，甚至設計師只有一個人的情況下，UI設計規范是否必要、甚至是否會影響工作效率，則確實需要設計師自己進行斟酌。 ## 3. 設計規范的制訂時機 規范的制定是在設計之前進行還是設計之后進行，不同團隊有不同的看法。有主張先制定規范的，有主張同時進行的，有主張在整套UI設計做好后再進行規范的整理的（例如網易）。個人認為還是在整套UI基本成型后再進行更為合理，UI沒成型前就制定規范的話，一來容易欠考慮而漏掉很多需要約束的東西，二來過早地被規范約束的設計很可能會影響創意的發揮。無論如何選擇規范和設計的先后，規范都是一個逐漸完善和積累的過程，在初稿形成后，不斷進行歸納、微調和后續補充是一份優秀規范積淀的必經之路。 ## 4. 設計規范的內容 不同終端的產品所需的UI設計規范大體內容相同（如色彩、控件、文字排版規范），但在此之外仍然存在一定的差別。 **（1）移動端的UI設計規范（主要指原生應用）：** A. 需要指明尺寸適配的屏幕是2x屏還是3x屏（1x屏現在已經很少見了）。 B. 切圖要注意點擊區域，可以連同點擊區域一起切圖，避免點擊區域過小（對iOS，所有點擊區域不能小于88px）。 C. Android開發中需要.9.png格式的特殊切圖，即對普通png擴大畫布大小，上下左右四周各留1像素，并將最外圍的一圈像素涂成純黑。 D. 考慮手勢的效果。 **（2）H5頁面的UI設計規范：** A. 有別于原生應用，需要考慮多尺寸屏幕適配的布局規范和響應性問題，例如布局變化的臨界點、柵格設計等。 B. 手勢操作設計應避免使用與瀏覽器本身有沖突的操作，減少手勢操作。 C. 樣式盡量與原生控件風格一致。 **（3）Web端的UI設計規范：** 主要區別在于需要指定控件的懸停效果，且無需考慮復雜的手勢效果。另外，同樣需要考慮不同分辨率下的布局規范。 ## 5. 常用標注工具 Markman、Cutterman、標你妹 等幾款工具都是目前比較流行的標注工具，其中cutterman還結合了切圖等功能，這里大家完全可以根據自己的使用偏好選擇一款更得心應手的就好。 ## 6. UI設計規范習作 最近也在做手頭一個APP項目的設計規范，不過礙于是公司項目的規范性文檔，不太方便公開設計文件。這里分享幾個之前根據線上知名產品做過的設計規范習作，分別對應上面講到的三種終端——Web端的Dribbble、原生移動端（iOS）的知乎、H5移動端的簡書。實際上，這樣基于線上已有產品的練習完全可以從技術和內容層面幫助我們熟悉UI規范制訂中需要考慮到的方方面面，另外還可以順便仔細看看，這些如雷貫耳的知名產品設計質量到底如何。 從這三個示例里就可以明顯看出，Dribbble作為設計本行的平臺，在規范的執行方面如教科書般精確，是個很好的正面例子。簡書作為一款很關注寫作體驗的產品，即使在瀏覽環境復雜的H5端，樣式和風格依然有較好的一致性。反面例子就是知乎了，乍一看是簡單得不能再簡單的藍白灰搭配，實際上從控件、文字到色彩，隨意性簡直可以用隨處可見來形容，這就是沒有完善的設計規范，或者設計規范沒有被很好地執行的后果，值得我們在工作中吸取教訓。 ### 6.1 Web端規范習作：[Dribbble](https://dribbble.com/)   ### 6.2 移動端原生APP規范習作：[知乎](https://www.zhihu.com/app/)（iOS）   ### 6.3 移動端H5規范習作：[簡書](http://www.jianshu.com/apps)  ## 推薦一些設計常用網站： 視覺中國：http://shijue.me/ 站酷：http://www.zcool.com.cn/ Dribble：Show and tell for designers https://dribbble.com/ 花瓣網：http://huaban.com/ UImaker：http://www.uimaker.com/ 25學堂-專注APPUI界面設計,分享移動互聯網優秀產品：http://www.25xt.com/ 破洛洛：標識logo欣賞 http://www.poluoluo.com/xinshang/brand/logo/ 設計在線; http://www.dolcn.com/ Arting365：https://tianchi.shuju.aliyun.com/video.htm?spm=5176.100258.1234.7.cFO6fn 配色：http://www.peise.net/ http://qrohlf.com/trianglify-generator/ http://colorhunt.co/ adobe kuler 設計工具：photoshop；illustrator；coredraw；Axure；dreamweaver等。