工作經(jīng)驗|如何編寫「設(shè)計規(guī)范」?這套思路一學(xué)就會!

2022-5-9    lanlanwork


看上去復(fù)雜的規(guī)范,其實都可以抽離出同一套編寫思路,不管你寫的是哪一類規(guī)范(比如組件規(guī)范、動效規(guī)范、Banner 視覺規(guī)范等 )都可以嘗試分為以下幾個步驟:

1. 定義通用原則

2. 定義事件特點

3. 定義特殊場景

4. 其它內(nèi)容補充

 

一、定義通用原則

通用原則會為你的使用者提供評價內(nèi)容設(shè)計好壞、質(zhì)量高低的衡量標準,定義整體設(shè)計的大方向,也會幫助使用者決策,判斷什么該做、什么不該做。

 

案例:

以編寫「Banner 的設(shè)計風(fēng)格」規(guī)范為例,規(guī)范中的某兩條內(nèi)容如下:

– 契合語義:Banner 中的元素需要與文字語義契合,并對重點內(nèi)容做強化和引導(dǎo);

– 樣式簡潔:以不過于吸引視線為標準,形狀不可過于復(fù)雜,面積不要過大,符合 XXXX 行業(yè)的風(fēng)格特征。

 

經(jīng)驗:

1. 通常總結(jié)出關(guān)鍵的 2-5 條即可,內(nèi)容在精不在多;語言精練,易記、易理解很重要。

2. 這些原則是最基礎(chǔ)、通用的判斷標準,在編寫的過程中要結(jié)合實際情況,使之具備真實有效的指導(dǎo)性。

3. 形式要從簡。寫規(guī)范不是為了彰顯設(shè)計價值,而是為了統(tǒng)一和更正他人的設(shè)計行為,因此形式要追隨功能,侃侃而談和花里胡哨的排版都要慎用,切忌舍本逐末。

 

二、定義事件特點

接下來你需要對所要規(guī)范的事件本身進行描述,包括事件的特征、狀態(tài)、使用方式等細節(jié)。這就需要你對于事件本身進行有邏輯的拆解和分類,你可以按照設(shè)計流程或者組成事件的框架結(jié)構(gòu)來進行描述。

 

案例:

以編寫「Banner 的設(shè)計風(fēng)格」規(guī)范為例,你可以按照 Banner 的設(shè)計產(chǎn)出流程,從 Banner 的構(gòu)成框架、圖案樣式、文案規(guī)范、色彩規(guī)范、輸出文件格式等方面,對其進行詳細描述,這些內(nèi)容就是你對于設(shè)計產(chǎn)出的基礎(chǔ)要求和限制。

經(jīng)驗:

1. 通常來說你不需要從 0-1 來定義這部分內(nèi)容,而是可以借鑒現(xiàn)有行業(yè)中已被廣泛認可的設(shè)計原理和法則(比如視覺原則就有:視差規(guī)律、情感化設(shè)計、費茲定律等等),來為你的規(guī)范做理論背書,再結(jié)合實際產(chǎn)品 / 行業(yè)特點來編寫規(guī)范。

2. 規(guī)范顆粒度沒有限制,描述越細致,規(guī)范就越嚴格。規(guī)范定義得太寬松會起不到效果,太嚴格則會產(chǎn)生限制、不宜遵守,因此要適度。

3. 對于一些比較難理解的規(guī)范內(nèi)容,可以給出一些正確 / 錯誤實例,也直接給出一些切實可用的實操模版,輔助使用者進行理解或操作。如下方 Material Design 在描述 icon 設(shè)計規(guī)范時給出的實例:

圖片

 

三、定義特殊場景

以上的通用規(guī)范和定義可以涵蓋 80% 左右的設(shè)計情況。但在具體業(yè)務(wù)中難免會出現(xiàn)特殊或極端情況,預(yù)判并定義這些特殊場景的使用方式也很重要。你可以把特殊場景理解為「邊界場景」,相當(dāng)于找到事件位于臨界點時的處理方法。

 

案例:

還是以編寫「Banner 的設(shè)計風(fēng)格」規(guī)范為例,對于文案規(guī)范這部分內(nèi)容,當(dāng)業(yè)務(wù)一定要修改現(xiàn)在的文字排版和布局;或者給出的文字內(nèi)容很長且無法縮減;再或者要翻譯成多國語言等,對這類情況提前做好預(yù)判,給出合理的解決方案。

 

經(jīng)驗:

1. 對于特殊場景,你可以給你自己設(shè)定一條邏輯線,有順序地思考。

2. 更可行的方法是收集實際工作中其他設(shè)計師在設(shè)計過程中遇到的各種特殊情況,進行匯總整理。

3. 特殊場景的規(guī)范不需要一步到位,隨時發(fā)現(xiàn),隨時補充。

 

四、其他內(nèi)容補充

你還可以補充以下內(nèi)容,讓你的規(guī)范更完整:

 應(yīng)用此規(guī)范的最佳實踐案例;

 對于其他相關(guān)部門的同事,想要獲取相關(guān)知識,如何快速閱讀關(guān)鍵內(nèi)容;

 設(shè)立簡易的反饋和答疑方式,收取使用者的反饋,以便優(yōu)化規(guī)范;

 規(guī)范的更新時間和更新內(nèi)容紀要,保留完整的記錄和歸檔。

規(guī)范的編寫過程不會是一帆風(fēng)順的,不要急于求成,可以步步為營,逐漸優(yōu)化。

 

另外,并不是說規(guī)范文檔編寫好就萬事俱備了,更重要的是要提供給規(guī)范使用者閱讀的便利性,包括:如何更快地閱讀文檔、在更新文檔之后如何同步等等。關(guān)于編寫好規(guī)范如何落地和推廣應(yīng)用,你可以查看文章:如何讓「設(shè)計規(guī)范」被有效執(zhí)行和落地? 。

原文鏈接:長弓小子(公眾號)

作者:元堯

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》工作經(jīng)驗|如何編寫「設(shè)計規(guī)范」?這套思路一學(xué)就會!

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司


分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔