（屏幕斷點分布） 
（Carbon 的柵格定義） 
（Fiori 針對 Table 的響應式設計） 
@彩云Sky：Hi，我是彩云。經常在讀者群里看到有人討論，面試時被問到設計規范相關問題，不知道怎么回答才好。是不是要回答設計規范的具體尺寸，再把各種適配規則全背下來呢？今天彩云就和大家一起探討下，到底要如何理解并運用設計規范。
1.什么是設計規范？
設計規范是一個老生常談的話題了，網上相關的文章也非常多，但我相信有很多設計師對設計規范的理解還是比較模糊，認為設計規范指的就是字體，顏色，控件規范那些，這種理解其實是比較狹隘的。
于我而言，設計規范用一句話總結就是：設計規范是針對特定產品所制定出來的一整套產品標準，包括流程標準，技術標準，設計規則等等。通過這套標準，能減少錯誤發生率并提高設計質量和輸出穩定性。
舉個例子，我在做QQ的3D厘米秀項目的時候，一開始合作方提交的設計資源正確率很低，風格也各不相同。然后為了解決這個問題，我在項目中定義了流程標準，資源標準，cp合作標準等等。通過這些規范讓多個不同設計團隊能合作到一起，提升了整體協作的效率和質量，這些標準就成了設計規范的一部分。
可以說，每個項目因合作方式，人員習慣，落地形式的不同，所形成的規范是有區別的。所以，設計規范更應該是針對項目來說的，除非是問你Android或iOS這種已經廣泛適用的平臺級規范。不然是很難有標準答案的，回答更應該是一種思路的描述，比如你會如何定義一套規范、解決了哪些問題以及如何驗證這套規范真的助力了產品的體驗提升。
2.設計規范的作用
1）遵守用戶習慣，減少認知成本
Don’t make me think。大家都知道，好用得產品都是盡可能的減少用戶思考，不斷去貼近用戶的使用習慣。比如在iOS系統里想返回上一個頁面時，你會熟悉的去左上角找返回操作，但如果把返回操作放在右上角就會很不習慣；再比如對國內用戶來說，他們習慣正確按鈕用綠色，錯誤按鈕用紅色，如果你非要反過來制造所謂的差異化，用戶就會感到困惑，誤操作的概率也可能會大量增加。
2）統一品牌性格
品牌性格不論是大到公司層面，還是小到具體某一個產品，都需要有一套品牌識別體系來約束，只有統一的視覺印象才能更好的讓用戶記住。這些品牌識別體系其實也是設計規范的一部分，在具體執行中，可以根據一些品牌核心概念規范快速做一些風格決策。
比如騰訊QQ的品牌形像風格關鍵詞是青春、互動，敘事和干凈，那么在選擇畫面配色的時候就可以根據關鍵詞指導畫面的選擇，使得整體的畫風得到統一。
3）降低新人學習成本
這里所說的新人不單純指剛入職場的設計新人，也包括剛參與到一個新項目的設計老手，設計規范是能夠以最低的溝通成本實現快速上手。有成熟的控件資源和標桿的設計參考，就算是之前完全沒做過的設計師也能搭建出一個還不錯的頁面。
4）提高開發效率
有了好的設計規范，開發就能把一些常用的樣式進行封裝，在需要復用的場景中直接調用。這樣做，一方面可以通過調用的方式減少樣式代碼的復制使用，提升效率的同時降低軟件包體積，另一方面也可以減少不必要的工作量，方便后期維護。
5）保證設計的一致性
有設計規范的約束，能讓團隊在一個既定的框架內做設計，統一大家的輸出質量，從而保證設計的一致性。
3.怎么學習設計規范
設計規范的學習肯定不是靠死記硬背，而是要講究方法，從我自身的經驗來說，我覺得大致可以有以下2個步驟：
1）在新手期，多去看一些大廠的設計規范，先建立認知，不要求全部記住。把這些規范當成字典，先大致了解一遍，等真正做的時候拿不準再去查閱就好了。這里推薦幾個必看的大廠設計規范官網，建議收藏。
蘋果iOS設計官網：https://developer.apple.com/design/human-interface-guidelines
谷歌Material Design設計官網：https://material.io/design
微軟Fluent Design System設計官網：https://www.microsoft.com/design/fluent
IBM設計官網：https://www.ibm.com/design/language
Facebook設計官網：https://design.facebook.com
螞蟻金服設計官網：https://ant.design/index-cn
其實網上很多設計規范，原理之類的文章，源頭都來自于這些大廠規范，想獲得一手信息，最好是自己去這些網站多看看。
這也就是我為什么不寫具體規范數值的原因，因為網上的資料實在是太多太詳細了，寫一些重復的知識實在是沒多少價值。學知識的路上一定不要什么都等別人喂給自己，需要更多的主動性，這樣才能提升自己的學習能力和解決問題的能力。
2）根據自己要做的模塊，有針對性的找市面上大廠的應用作為參考，直接截圖標注，自己總結規律印象會更加深刻。
我開始做UI的時候就這樣學習的，不知道字體該用多大，間距用多大，顏色怎么用，就直接去找相類似的界面截圖參考，量它們的尺寸，吸它們的顏色，然后就這樣一步步的把規范經驗積累起來了。
比如從QQ的動態tab頁面中，我們可以借鑒到很多信息，比如列表的高度，列表左側的圖標尺寸和圓角，間隔線高度和配色，右側的箭頭大小和配色，列表文字的字號和配色，用戶頭像大小和結合的樣式，圖標與文字的間距等等。這些借鑒并非是抄襲，要你做的跟這個界面一模一樣，只是參考這里面的某幾個屬性然后結合自己的產品綜合運用，減少出錯。
發現了嗎？一個優秀的界面設計，上面的任何信息其實都可以拿來參考，就看你會不會用了。
需要強調的是，這些參考來的標準，并非是標準答案，還是要根據自己的實際項目做調整，只是至少知道一個范圍，在這個范圍內不大會犯錯。
這就像剛開始做設計時一樣，去參考這些規范相當于做臨摹的練習，這種臨摹是需要的，臨摹的過程中不斷加入自己的思考，然后通過總結，變成自己的知識體系。
4.怎樣定義出設計規范
隨著對設計規范理解的加深，自身設計能力的不斷提高，就要開始從設計規范的使用者轉變為規范的制定者了。如何制定針對項目的設計規范呢？我的經驗是在項目過程中把做的好的和踩坑后的正確解法進行總結，并形成文字，積累多了就形成了規范。要把每一次遇到的問題都當成是一次改進流程和規范的機會。
我自己是有隨時記錄的習慣，項目中一旦發現問題就會趕緊把它記錄下來。有時候甚至還蠻期待出現問題的，因為出了問題才能找到優化的機會，自己也能從中找到解決問題的成就感。
曾經在QQ的3D厘米秀項目中遇到過非常多的坑，然后從填坑的過程中慢慢總結出各種設計規范，去幫助項目減少錯誤率，提升設計質量。從最終的產出和結果來看，自身的進步是可觀的，對產品的幫助也比較大，所以很值得去做。
5.使用規范會影響設計的創意性嗎？
剛掌握設計規范的時候，干活是特別舒服的一件事，因為做需求可以很快，好像拼拼組件就能完成。但稍微做久一點時間，又會覺得好像沒啥進步，天天拼組件，擔心影響設計的創意性，真是挺矛盾的。
其實，規范也是要在遵守和引領用戶習慣中不斷迭代的。既要保持大的設計規范框架不變化，又要在設計的過程中給用戶制造驚喜。比如，整個UI的配色和字體需要保持統一，但在一些圖形，動效上可以做出亮點，讓用戶在整個使用體驗中既是沉浸的又能有些小驚喜。規范的打破與重建一定是需要一個動態平衡的過程。
總結
設計規范絕對不需要死記硬背，而是要充分理解并靈活使用，才能發揮它的價值。隨著UI行業的不斷成熟，設計工具的簡單化，各種組件化資源和思維越來越普及，可以預見的是未來一般的UI界面會高度組件化，設計師單純在界面上花費的時間可能會越來越少。
這從行業的發展來說，減少了很多體力勞動，讓設計和開發有更多的時間去打磨產品細節，肯定是好事。但對設計師自身來說，省下了以前那種常規設計需求的時間后還能做些什么，設計師的價值又在哪？值得每個設計師去思考。
原文地址：彩云譯設計（公眾號）
作者：彩云Sky
轉載請注明：學UI網》原來設計規范要這樣理解，早知道就好了！
文章來源：站酷 作者：陳皮Celia
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
