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

01探尋期

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

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

結(jié)合主要的用戶群體思索。拿字體來(lái)說(shuō)：一般狀況下小孩與老人字號(hào)大而醒目，青年群體適中且共性；所以，面對(duì)不同的用戶群體，需要設(shè)定易于該用戶群體閱讀的字體與字號(hào)。

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

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

結(jié)合對(duì)標(biāo)競(jìng)品進(jìn)行思索。通常狀況下競(jìng)品會(huì)是最直接的參考資料，從排版、布局、空間，發(fā)覺(jué)對(duì)手身上優(yōu)質(zhì)的思路，關(guān)心產(chǎn)品更好發(fā)力。

02輸出期

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

通過(guò)對(duì)產(chǎn)品調(diào)性的精確?????推斷，錨定方向后可開頭定義品牌色、LOGO、質(zhì)感，為界面設(shè)計(jì)供應(yīng)最基礎(chǔ)的設(shè)計(jì)單元。

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

LOGO是一個(gè)產(chǎn)品的形象和符號(hào)，體現(xiàn)產(chǎn)品的底蘊(yùn)和品嘗。一般產(chǎn)品LOGO、幫助形、品牌字體三個(gè)部分相互組合使用，從而達(dá)到全都的傳播效果。

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

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

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

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

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

當(dāng)核心頁(yè)面輸出后需通過(guò)內(nèi)部評(píng)審，將不足反應(yīng)出來(lái)，即時(shí)修改。最終大家達(dá)成全都的設(shè)計(jì)方向與思想，更利于并推動(dòng)后續(xù)工作與支配。

03落地期

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

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

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

2.規(guī)范中的詳細(xì)分類

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

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

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

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

信息展現(xiàn)是產(chǎn)品中默認(rèn)的可視化區(qū)域，如圖表、廣告、缺省圖、卡片區(qū)等。展現(xiàn)區(qū)域常常會(huì)遇到尺寸適配、特別狀態(tài)、極端狀況等，往往需和產(chǎn)品、交互共同爭(zhēng)論出相關(guān)的展現(xiàn)規(guī)章。

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

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

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

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

04結(jié)語(yǔ)

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