設(shè)計(jì)指南是最大程度提升設(shè)計(jì)團(tuán)隊(duì)輸出效率和確保品牌一致性的核心工具，成功的設(shè)計(jì)規(guī)范并非一蹴而就，需要注意的問題并不少。

對(duì)于一個(gè)網(wǎng)站甚至一個(gè)品牌而言，設(shè)計(jì)指南不僅僅是一份規(guī)范文檔那么簡單。優(yōu)秀的設(shè)計(jì)指南本身就如同藝術(shù)品一樣令人賞心悅目，在實(shí)際的設(shè)計(jì)工作中，它還有著不可替代的重要功能。它展示出你的產(chǎn)品應(yīng)有的樣式和形態(tài)，并且以一種可管理、易于使用和易于理解的方式將整個(gè)設(shè)計(jì)體系統(tǒng)合到了一起。

在制作設(shè)計(jì)指南的時(shí)候，下面6個(gè)關(guān)鍵點(diǎn)一定不能忽視。

1、品牌標(biāo)識(shí)示例

首先，你的設(shè)計(jì)指南中應(yīng)該包含可視化的品牌標(biāo)識(shí)展示案例，以這樣的方式來呈現(xiàn)品牌標(biāo)識(shí)應(yīng)有的樣子。

最好的案例，其實(shí)是就是貼合真實(shí)應(yīng)用場(chǎng)景的案例，而這樣的實(shí)戰(zhàn)案例也正貼合了設(shè)計(jì)指南的真實(shí)存在意圖。

這些設(shè)計(jì)案例，通常是品牌旗下網(wǎng)站主頁、移動(dòng)端頁面、APP的截圖，這些案例展示出品牌標(biāo)識(shí)的正確使用方法，以及相應(yīng)的其他元素的展示樣式。

下圖是 Love to Ride 的品牌設(shè)計(jì)指南。他們的設(shè)計(jì)指南每一頁都設(shè)計(jì)得如同網(wǎng)頁一樣，本身就呈現(xiàn)出了足夠的一致性。設(shè)計(jì)指南中甚至講一些常見的小元素集中到一起予以說明，比如不同地方的APP圖標(biāo)應(yīng)該以什么樣的樣式來呈現(xiàn)。

在設(shè)計(jì)指南中采用真實(shí)案例，最大的優(yōu)勢(shì)在于，你不用創(chuàng)建額外的應(yīng)用場(chǎng)景和模擬說明，而是用最真實(shí)的案例直接說明，對(duì)于團(tuán)隊(duì)其他成員而言，也是最為有效的展示。

2、完整的設(shè)計(jì)說明

從配色方案到排版布局，從圖形的運(yùn)用到具體控件的出現(xiàn)位置，都要有詳細(xì)的說明。

在整個(gè)設(shè)計(jì)當(dāng)中，樣式和功能要遵循哪些規(guī)律，背后的設(shè)計(jì)哲學(xué)是什么，都應(yīng)當(dāng)予以說明。

這些完整的解釋說明，能夠幫助整個(gè)設(shè)計(jì)和開發(fā)團(tuán)隊(duì)盡可能在不同的媒體上準(zhǔn)確而一致地采用統(tǒng)一的設(shè)計(jì)風(fēng)格。相同的元素和內(nèi)核上高度一致的設(shè)計(jì)，能讓用戶在查看網(wǎng)頁和平面廣告的時(shí)候感知到品牌的獨(dú)特性和統(tǒng)一性，讓不同位置的內(nèi)容呈現(xiàn)出明顯的關(guān)聯(lián)關(guān)系。舉個(gè)例子，在線的網(wǎng)頁常常會(huì)因?yàn)橛脩羲迷O(shè)備而呈現(xiàn)出不同的字體，設(shè)計(jì)師會(huì)最大限度地借助Google Fonts 和 Typekit 來調(diào)用盡可能接近品牌默認(rèn)字體的第三方字體，來達(dá)到盡可能一致的體驗(yàn)。

所以，如果字體是你的品牌策略中不可替代的一部分，那么你應(yīng)該在整體設(shè)計(jì)規(guī)范中考慮好這一點(diǎn)。

對(duì)于需要注意的點(diǎn)，一定要予以清晰的說明，比如H1標(biāo)簽下的字體尺寸一定是88點(diǎn)，而縮略圖的尺寸始終是200x200像素，不過對(duì)于非關(guān)鍵點(diǎn)就沒有必要全都進(jìn)行限定。將設(shè)計(jì)的精神和風(fēng)格與這些關(guān)鍵點(diǎn)結(jié)合起來，才能夠讓你的團(tuán)隊(duì)在規(guī)定范圍內(nèi)進(jìn)行有效的設(shè)計(jì)，如果將所有的細(xì)節(jié)都限定死，那么整個(gè)規(guī)范就淪為一部詞典了，所有人都只能靠不停的查閱規(guī)范來完成設(shè)計(jì)。

3、風(fēng)格和調(diào)性

在設(shè)計(jì)指南中針對(duì)各個(gè)設(shè)計(jì)元素來描述和規(guī)范風(fēng)格可能并不那么有趣，但是足夠重要。

對(duì)于風(fēng)格的描述文案同樣會(huì)影響到視覺的設(shè)計(jì)。這些描述的文本會(huì)影響到設(shè)計(jì)人員對(duì)于風(fēng)格體驗(yàn)的把控和圖片類型的選取，甚至連色彩和字體的控制也會(huì)被影響到。所有的這些東西共同組成了品牌整體的個(gè)性。

更重要的是，它們決定了外界如何識(shí)別你的產(chǎn)品和品牌。

強(qiáng)大的風(fēng)格和調(diào)性是視覺識(shí)別的核心之一。設(shè)計(jì)元素應(yīng)該有屬于品牌的獨(dú)特個(gè)性，這樣才能確保用戶即使看不到LOGO讀不到文本，也能清晰地判斷出它們是屬于誰的。看看可口可樂的紅色和迪士尼的字體吧，它們就是典型。

4、SEO 關(guān)鍵詞

搜索引擎優(yōu)化的重要性日漸突出。在網(wǎng)頁設(shè)計(jì)當(dāng)中，關(guān)鍵詞的優(yōu)化可能是討論得最多但是最無趣的組成部分。但是，你需要盡早考慮關(guān)鍵詞優(yōu)化這件事情。

你應(yīng)該將你的品牌相關(guān)的關(guān)鍵詞用設(shè)計(jì)的語言表述出來，在設(shè)計(jì)指南中清晰的指出來。

Urban Outfitters 在它的品牌設(shè)計(jì)指南當(dāng)中，精心到位地列舉出它們相關(guān)的關(guān)鍵詞。雖然作為服裝品牌，列舉出的關(guān)鍵詞非常多，但是其中最核心的關(guān)鍵詞，使用不同的色彩突出展示，讓你可以瞬間知道哪些應(yīng)該著重突出。

這樣的關(guān)鍵詞列表對(duì)于負(fù)責(zé)網(wǎng)站文案的營銷策劃和設(shè)計(jì)人員而言，無疑是非常有用的。對(duì)于文案寫作者而言，憑空去想和回憶往往容易卡住，而這樣的列表的存在，則不會(huì)讓這樣的情況發(fā)生。

讓內(nèi)容創(chuàng)作和關(guān)鍵詞系統(tǒng)統(tǒng)一起來，網(wǎng)站在排名上的優(yōu)勢(shì)會(huì)更加明顯，距離目標(biāo)用戶就更近一步了。

5、元素的樣式的控制

現(xiàn)如今網(wǎng)上各種各樣的圖案和設(shè)計(jì)素材層出不窮，素材的濫用已經(jīng)成為非常常見的設(shè)計(jì)問題了。所以，在規(guī)范設(shè)計(jì)的時(shí)候，應(yīng)當(dāng)控制圖案和相關(guān)元素的使用范圍。

這包括LOGO和 圖標(biāo)的使用限定范圍，配色的限制，表單和導(dǎo)航的掌控，以及靜態(tài)和動(dòng)態(tài)元素的控制。你可以在設(shè)計(jì)指南之外創(chuàng)造一個(gè)在線的風(fēng)格指南，便于設(shè)計(jì)人員快速的復(fù)制和粘貼這些元素。

6、代碼片段

現(xiàn)如今許多網(wǎng)站的設(shè)計(jì)指南當(dāng)中，已經(jīng)包含了許多常用的代碼片段了。從按鈕的小動(dòng)效到滑動(dòng)效果，這些代碼片段和許多細(xì)節(jié)的體驗(yàn)相互關(guān)聯(lián)，最關(guān)鍵的是它們降低手動(dòng)輸入代碼的成本，確保了代碼的復(fù)用率。

對(duì)于網(wǎng)站的文本和媒體內(nèi)容而言，相關(guān)的常用代碼片段是提升效率的關(guān)鍵之一。

Firefox 在它的最新的設(shè)計(jì)指南當(dāng)中就囊括了元素使用相關(guān)的常用代碼。即使你從來沒有提供完整的代碼片段庫，也盡量包含一些基本的、常用的代碼，讓設(shè)計(jì)師和相關(guān)的開發(fā)人員能夠更為統(tǒng)一高效地完成日常的編輯工作。

結(jié)語

設(shè)計(jì)指南這種東西并不一定要做成靜態(tài)的圖書或者簡單的PDF文檔，它所涵蓋的元素類型可以多種多樣，可以借助工具創(chuàng)造在線的多功能的設(shè)計(jì)指南和風(fēng)格指南，讓設(shè)計(jì)事半功倍。

【別人家的設(shè)計(jì)規(guī)范是這樣的】

1. 《設(shè)計(jì)規(guī)范官網(wǎng)匯總：iOS、Material Design、IBM、Fluent……（持續(xù)更新）》
2. 《如何寫好移動(dòng)端產(chǎn)品文案？這兒有份超詳細(xì)的規(guī)范指南》
3. 《如何用「8點(diǎn)網(wǎng)格」來規(guī)范你的設(shè)計(jì)？看這篇好文！》
4. 《中小團(tuán)隊(duì)來收！如何快速制作有效的UI設(shè)計(jì)規(guī)范？》

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com