什么是設(shè)計(jì)規(guī)范，設(shè)計(jì)規(guī)范到底有什么用？如何看懂設(shè)計(jì)規(guī)范？今天@Jaret_杰瑞特 結(jié)合實(shí)際工作中的體驗(yàn)，幫你快速上手設(shè)計(jì)規(guī)范。

“設(shè)計(jì)規(guī)范”這個(gè)話題似乎在這1，2年里大家最常討論到?；谥悄茉O(shè)備的人機(jī)交互方式已經(jīng)漸漸的走向成熟。在經(jīng)歷了最初大家一起一股腦兒摸爬滾打的時(shí)期之后；在進(jìn)行越來(lái)越多、越來(lái)越頻繁的UI／UX工作之后，許多方式方案開始慢慢沉淀，被認(rèn)可，被整理出了一系列具有參考性及可沿用性的東西。

大家對(duì)“設(shè)計(jì)規(guī)范”所起的作用多少都有些了解。時(shí)常聽到的聲音包括有：“讓工程師能清晰的知道如何去實(shí)現(xiàn)還原設(shè)計(jì)”；“設(shè)計(jì)團(tuán)隊(duì)有新小伙伴加入時(shí)能盡快熟悉相關(guān)產(chǎn)品的屬性環(huán)節(jié)，快速上手?！本哂幸环N對(duì)內(nèi)、對(duì)外兼具的作用。

在網(wǎng)上一些設(shè)計(jì)交流共享平臺(tái)上簡(jiǎn)單搜索了一下發(fā)現(xiàn)，絕大部分看到的“規(guī)范”都是類似這樣的一種展示方式

大部分的規(guī)范我能清楚的明白設(shè)計(jì)控件的尺寸規(guī)格。對(duì)于前端的開發(fā)人員來(lái)說(shuō)照著做是沒(méi)有任何障礙的。

但當(dāng)想要通過(guò)“規(guī)范”去認(rèn)識(shí)當(dāng)前的產(chǎn)品；或期望通過(guò)“規(guī)范”來(lái)幫助我進(jìn)一步獲得一些認(rèn)知時(shí)，我發(fā)現(xiàn)變得不再那么容易。似乎除了對(duì)于刻板標(biāo)注的數(shù)字理解外，就不再有其他的任何信息了。

回憶起我在學(xué)習(xí)閱讀Material Design時(shí)的感受，我突然發(fā)現(xiàn)“設(shè)計(jì)規(guī)范”的大體可以歸類為兩大部分-“設(shè)計(jì)指南”和“設(shè)計(jì)規(guī)格”

“按鈕”是最常見的一種控件。隨著設(shè)計(jì)風(fēng)格的不斷更新，按鈕的樣式也在最近幾年中出現(xiàn)了明顯的變化?？此谱詈?jiǎn)單，沒(méi)什么可說(shuō)的“按鈕”或許有很多我們會(huì)忽略的地方。

在Material Design中，“按鈕”的“指南”部分先大致闡述了“按鈕”主要的幾個(gè)類別，以及各類別在整個(gè)產(chǎn)品環(huán)境中所使用的頻次概率以金字塔的方式呈現(xiàn)出來(lái)。并提供了幾個(gè)簡(jiǎn)單但典型的場(chǎng)景表述。

以完整界面的正反例形式，補(bǔ)充之前提到的在場(chǎng)景中的使用方式。

同樣，蘋果的iOS人機(jī)交互指南中也簡(jiǎn)單的大概描述了一些幾個(gè)典型按鈕的作用。（但和Material Design的指南比起來(lái)還是屬于比較含糊和籠統(tǒng)的。）

“設(shè)計(jì)規(guī)格”是我們大部分時(shí)候比較熱衷和有“把握”的部分，畢竟設(shè)計(jì)師對(duì)于細(xì)節(jié)的追求有著一種與生俱來(lái)的天性。

在“設(shè)計(jì)規(guī)格”中，Material Design把“規(guī)格”中的原則性也盡可能的表述了出來(lái)。比如建議（至少）的最小尺寸，按鈕所屬的文本屬性等。

在看了很長(zhǎng)一段時(shí)間也一直在反復(fù)學(xué)習(xí)大家都熟悉的Material Design之后，在我實(shí)際工作中，碰巧也看到了一份來(lái)自公司內(nèi)部的設(shè)計(jì)規(guī)范。（由于屬于公司業(yè)務(wù)，內(nèi)容會(huì)以厚碼呈現(xiàn)，請(qǐng)見諒）

整個(gè)規(guī)范的原則與我們一開始定義的是基本一致的?！岸萌绾味ㄖ啤笨梢岳斫鉃橐惶灼放普Z(yǔ)言針對(duì)全球不同國(guó)家的市場(chǎng)需求，仍然可以在通過(guò)閱讀這份規(guī)范，來(lái)了解如何在這套體系下針對(duì)自己國(guó)家的市場(chǎng)進(jìn)行設(shè)計(jì)。

作為對(duì)比，仍然使用“按鈕”進(jìn)行簡(jiǎn)單的解釋。

“按鈕”的概述；主要類別樣式；主要類別基于典型場(chǎng)景使用的展示及其類型的整體描等述首先會(huì)在“指南”部分中呈現(xiàn)。

基于“按鈕”的使用環(huán)境會(huì)以具體的幾個(gè)完整界面來(lái)進(jìn)行解釋說(shuō)明。這一部分放在產(chǎn)品應(yīng)用章節(jié)中可以讓閱讀者快速了解感知具體的真實(shí)使用情境。

最后“核心按鈕規(guī)格”的說(shuō)明展示則讓人更容易理解和體會(huì)之前在概述和場(chǎng)景下閱讀到的內(nèi)容，將兩者串聯(lián)起來(lái)，更利于閱讀者正確消化。

我在閱讀到從網(wǎng)上分享平臺(tái)中搜索出大部分的關(guān)于“按鈕規(guī)范”的這一部分時(shí)，發(fā)現(xiàn)這兩類呈現(xiàn)方式在理解和實(shí)際工作中有著明顯的差異，前者像是一種產(chǎn)品和信息傳遞的媒介，后者更像是一種寫給自己的關(guān)鍵數(shù)據(jù)備忘。

我發(fā)現(xiàn)現(xiàn)在在很多產(chǎn)品中對(duì)于給予用戶的一些文本描述、反饋等語(yǔ)言類的設(shè)定越來(lái)越重視。簡(jiǎn)練、易懂切合場(chǎng)景的文本表述可以提高用戶的認(rèn)知和學(xué)習(xí)門檻，提高用戶行為效率。復(fù)雜難懂的語(yǔ)言表述則會(huì)破壞用戶的行為流程，甚至在關(guān)鍵操作上給用戶造成損失。

Material Design中對(duì)于語(yǔ)言文本的描述從用詞本身到語(yǔ)氣語(yǔ)調(diào)，甚至到標(biāo)點(diǎn)的使用都有詳細(xì)的建議。

作為傳統(tǒng)的服務(wù)性品牌零售行業(yè)，無(wú)論線上線下，對(duì)于品牌價(jià)值的傳遞方式和做法在許多方面都是一致的。結(jié)合自身品牌的定位，在語(yǔ)言描述上遵循有效的信息化、有吸引力的闡述和人與人之間親密對(duì)話的方式。

情景式的表達(dá)在設(shè)計(jì)規(guī)范中很難找到的原因是，基于一些動(dòng)態(tài)化展示的組件和功能時(shí)，情景式的表達(dá)可以快速的讓閱讀者理解產(chǎn)品和設(shè)計(jì)上的一些特性。

設(shè)置一個(gè)“人物”，講述一段故事，引出一個(gè)使用實(shí)例，展示一張場(chǎng)景下的界面不失為一種有效的表述方式。

另外，情景式表現(xiàn)方式也可以用在日常的設(shè)計(jì)評(píng)審工作流程中。相比較直接看一屏的線框界面加各種串聯(lián)的線，一段典型使用場(chǎng)景的描述更有利于大家理解設(shè)計(jì)的意圖，從用戶場(chǎng)景出發(fā)去考慮、看待和討論一些設(shè)計(jì)和需求的定義。