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

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

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

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

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

但當(dāng)想要通過“規(guī)范”去認(rèn)識當(dāng)前的產(chǎn)品；或期望通過“規(guī)范”來幫助我進(jìn)一步獲得一些認(rèn)知時(shí)，我發(fā)現(xiàn)變得不再那么容易。似乎除了對于刻板標(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)了明顯的變化。看似最簡單，沒什么可說的“按鈕”或許有很多我們會忽略的地方。

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

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

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

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

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

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

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

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

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

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

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

歡迎關(guān)注作者微信公眾號：

「如何看懂iOS 10 的設(shè)計(jì)規(guī)范指南」

1. 看趨勢變化丨《從IOS 10設(shè)計(jì)指南變化看設(shè)計(jì)的新趨勢》
2. 看交互啟示丨《從IOS 10 的交互設(shè)計(jì)中學(xué)到的3個設(shè)計(jì)啟示》
3. 看使用方法丨《一份超詳細(xì)的「IOS 10 UI KIT」使用手冊（附源文件）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com