導(dǎo)語：為什么蘋果的設(shè)計如此吸引人？無論是軟件、硬件、品宣、廣告都繼承了其簡約、極致的設(shè)計精髓。在多元變化的市場環(huán)境下，為何它能一直保持一致的體驗語言，其實這一切源于他們的標(biāo)準(zhǔn)。

如何在產(chǎn)品設(shè)計中制定一套有效的規(guī)范標(biāo)準(zhǔn)，建立自己的產(chǎn)品設(shè)計語言？一般可以分為三個階段，探尋期、輸出期、落地期，這次就來分享一下如何創(chuàng)建一套完整的設(shè)計規(guī)范。

01 探尋期

1. 為產(chǎn)品尋找調(diào)性

調(diào)性是產(chǎn)品給用戶的整體感受，通過印象標(biāo)簽讓用戶產(chǎn)生聯(lián)想并記住產(chǎn)品。包括顏色、字體、質(zhì)地、布局等元素共同構(gòu)成，形成統(tǒng)一氣質(zhì)。

結(jié)合主要的用戶群體思考。拿字體來說：一般情況下小孩與老人字號大而醒目，青年群體適中且個性；所以，面對不同的用戶群體，需要設(shè)定易于該用戶群體閱讀的字體與字號。

從產(chǎn)品品牌去思考。挖掘當(dāng)前的圖標(biāo)語言趨勢，借鑒其表達(dá)方法融合在自己產(chǎn)品里，讓品牌基因與產(chǎn)品緊密關(guān)聯(lián)。

分析目前的視覺流行趨勢。讓設(shè)計方向保持前瞻性，借鑒融合，形成產(chǎn)品獨有的風(fēng)格。如3D語言、流體視覺、多彩表達(dá)都是較為流行的表現(xiàn)手法。

結(jié)合對標(biāo)競品進行思考。通常情況下競品會是最直接的參考資料，從排版、布局、空間，發(fā)現(xiàn)對手身上優(yōu)質(zhì)的思路，幫助產(chǎn)品更好發(fā)力。

02 輸出期

1. 定義顏色、LOGO、質(zhì)感

通過對產(chǎn)品調(diào)性的準(zhǔn)確判斷，錨定方向后可開始定義品牌色、LOGO、質(zhì)感，為界面設(shè)計提供最基礎(chǔ)的設(shè)計單元。

顏色，由品牌色、輔助色、點綴色、字體色四種組成。主色根據(jù)產(chǎn)品關(guān)鍵詞推導(dǎo)；輔助色是主色相鄰色或?qū)Ρ壬稽c綴色常用于產(chǎn)品特殊和提醒狀態(tài)；而字體色一般與主色調(diào)和，讓整體視覺更加協(xié)調(diào)。

LOGO是一個產(chǎn)品的形象和符號，體現(xiàn)產(chǎn)品的底蘊和品味。一般產(chǎn)品LOGO、輔助形、品牌字體三個部分相互組合使用，從而達(dá)到一致的傳播效果。

質(zhì)感要與產(chǎn)品定位相吻合。在純扁平的潮流之下，誕生了磨砂玻璃、新擬態(tài)、深度扁平等風(fēng)格；在圖標(biāo)、按鈕、頁面背景中都可以融入質(zhì)感語言，幫產(chǎn)品提升設(shè)計品質(zhì)。

2. 有效設(shè)計關(guān)鍵頁面

在設(shè)計關(guān)鍵頁時可以用刪格系統(tǒng)去規(guī)劃信息元素，讓布局更有規(guī)律。PC端一般為12列、平板為8列、移動端為4列；槽一般固定為4PX的倍數(shù),如16px、24px、32PX等，列越多信息布局越靈活。

優(yōu)先考慮輸出核心頁面。在產(chǎn)品輸出期都是爭分奪秒，我們可以先將產(chǎn)品一級核心頁面或關(guān)鍵流程頁面進行輸出，如首頁、我的、發(fā)現(xiàn)、登錄，兼顧效率與質(zhì)量的平衡。

在團隊協(xié)作時，可將高級設(shè)計師放在一級面的設(shè)計輸出上，定義設(shè)計原則和規(guī)范，由其統(tǒng)籌設(shè)計方向。參與設(shè)計師進行跟進和完善，讓每股勁都使在刀刃上。

當(dāng)核心頁面輸出后需通過內(nèi)部評審，將不足反應(yīng)出來，即時修改。最終大家達(dá)成一致的設(shè)計方向與思想，更利于并推進后續(xù)工作與安排。

03 落地期

1. 在設(shè)計中沉淀規(guī)范

規(guī)范形成不是一蹴而就，而需經(jīng)過一定時間沉淀和積累；每位設(shè)計師需階段性累計規(guī)范，主視覺負(fù)責(zé)定期收集整理和完善，形成一個規(guī)范共建的循環(huán)。

創(chuàng)建規(guī)范時，主視覺需要界定出規(guī)范的范圍并分類。一般情況下可以分為界面布局、基礎(chǔ)規(guī)范、模態(tài)反饋、錄入狀態(tài)、信息展示五大類，這五種幾乎可以適應(yīng)大多數(shù)產(chǎn)品。

2. 規(guī)范中的具體分類

界面布局是圍繞屏幕尺寸、體驗原則、開發(fā)邏輯的展示與規(guī)劃。常見的布局方法是通過柵格和百分比，去有規(guī)律的容納并管理信息；如宮格式、瀑布流、陳列館、卡片式等都是經(jīng)典的布局方式，通過合理的布局，可以定義出頁面展示樣式和基本的體驗規(guī)則。

規(guī)范基礎(chǔ)是產(chǎn)品的基石，所有的頁面基本都是圍繞其去演變；可分為顏色規(guī)范、文字規(guī)范、圖標(biāo)規(guī)范、按鈕規(guī)范、間距規(guī)范，同時需根據(jù)場景定義不同的尺寸和狀態(tài)。

模態(tài)反饋是指在整個產(chǎn)品體驗環(huán)節(jié)中所有觸發(fā)事件后呈現(xiàn)的狀態(tài)。如進度條、結(jié)果態(tài)、彈窗、Toast、加載態(tài)等，無論是模態(tài)還是非模態(tài)提示都需考慮其中。

錄入狀態(tài)是屬于產(chǎn)品使用中主動或被動的互動行為。如信息輸入、選擇、切換、上傳、留言等，與之互動的一系列操作都屬于用戶錄入。

信息展示是產(chǎn)品中默認(rèn)的可視化區(qū)域，如圖表、廣告、缺省圖、卡片區(qū)等。展示區(qū)域經(jīng)常會碰到尺寸適配、特殊狀態(tài)、極端情況等，往往需和產(chǎn)品、交互共同討論出相關(guān)的展示規(guī)則。

以上就是創(chuàng)建產(chǎn)品規(guī)范的五種分類方法。在實際項目中，需窮盡每一個類別的內(nèi)容，盡可能去做到每個功能都有表格記錄，便于查驗，做到不留遺漏。

3. 通過宣導(dǎo)，達(dá)成共識

當(dāng)我們輸出了完整的規(guī)范后，可以整理一份宣導(dǎo)文檔；通過內(nèi)部小會相互交流意見，收集整理現(xiàn)存問題，修改并完善規(guī)范的不足，上下統(tǒng)一設(shè)計規(guī)則讓后期執(zhí)行更高效。

對外我們也要需要和其他部門達(dá)成一致的規(guī)則與共識?？梢匝s開發(fā)、產(chǎn)品、測試進行統(tǒng)一的規(guī)范宣導(dǎo)。多個部門形成一致的共識，讓落地更精確。

04 結(jié)語

建立了設(shè)計規(guī)范等同于制定了一套與外界對話標(biāo)準(zhǔn)機制，可以幫助用戶養(yǎng)成習(xí)慣，讓設(shè)計協(xié)作更順暢，部門之間溝通更方便，也讓產(chǎn)品迭代更高效。

擁有規(guī)范僅僅解決了產(chǎn)品的基礎(chǔ)問題，若要持續(xù)提升體驗，賦予產(chǎn)品更高價值，則需根據(jù)場景，不斷優(yōu)化迭代保持生命力。

希望大家看完這文章之后有所收獲，吸收文章的內(nèi)容運用在實際項目當(dāng)中。

作者：WOWdesign，研究設(shè)計價值最大化，涉及用戶體驗、品牌體驗、空間體驗。

本文由 @WOWdesign 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議