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