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