設(shè)計指南是最大化網(wǎng)頁設(shè)計團(tuán)隊輸出效率，保證品牌一致性的核心工具。成功的設(shè)計規(guī)范不是一蹴而就的，需要注意的問題很多。

　　對于一個網(wǎng)站甚至一個品牌來說，設(shè)計指南不僅僅是一個標(biāo)準(zhǔn)文檔。優(yōu)秀的設(shè)計指南本身就像藝術(shù)品一樣賞心悅目，在實際設(shè)計工作中具有不可替代的重要作用。它展示了你的產(chǎn)品的風(fēng)格和形式，并以一種易于管理、易于使用和易于理解的方式集成了整個設(shè)計系統(tǒng)。

　　在制定設(shè)計指南時，以下六個要點(diǎn)不容忽視。

　　1.品牌識別示例

　　首先，你的設(shè)計指南應(yīng)該包括視覺品牌標(biāo)識展示案例，這樣才能把品牌標(biāo)識呈現(xiàn)出來。

　　最好的案例，其實是符合實際應(yīng)用場景的案例，這樣的實際案例也符合設(shè)計指南的真實意圖。

　　這些設(shè)計案例通常是品牌網(wǎng)站的首頁、手機(jī)頁面、APP的截圖。這些案例展示了品牌標(biāo)志的正確使用和其他元素的相應(yīng)顯示樣式。

　　下圖是《愛騎行》的品牌設(shè)計指南。他們設(shè)計指南的每一頁都設(shè)計得像一個網(wǎng)頁，這本身就顯示出足夠的一致性。設(shè)計指南中把一些常見的小元素放在一起解釋，比如不同地方的APP圖標(biāo)應(yīng)該呈現(xiàn)什么風(fēng)格。

　　在設(shè)計指南中使用真實案例最大的好處是不需要創(chuàng)建額外的應(yīng)用場景和模擬指令，而是用最真實的案例直接講解，這也是對其他團(tuán)隊成員最有效的展示。

　　2.完整的設(shè)計描述

　　從配色到布局，從圖形的應(yīng)用到具體控件的位置，都要有詳細(xì)的說明。

　　在整個設(shè)計中，風(fēng)格和功能上應(yīng)該遵循什么規(guī)律，背后的設(shè)計理念是什么，都要說明。

　　這些完整的解釋可以幫助整個設(shè)計開發(fā)團(tuán)隊在不同的媒體中盡可能準(zhǔn)確一致地采用統(tǒng)一的設(shè)計風(fēng)格。在內(nèi)核上有相同的元素和高度一致的設(shè)計，用戶在查看網(wǎng)頁和平面廣告時可以感知到品牌的獨(dú)特性和統(tǒng)一性，使不同位置的內(nèi)容呈現(xiàn)出明顯的相關(guān)性。例如，由于用戶使用的設(shè)備，在線網(wǎng)頁經(jīng)常呈現(xiàn)不同的字體。設(shè)計師會使用Google  Fonts和Typekit調(diào)用第三方字體，盡可能接近品牌默認(rèn)字體，以達(dá)到盡可能一致的體驗。

　　因此，如果字體是你品牌戰(zhàn)略中不可替代的一部分，你應(yīng)該在整體設(shè)計規(guī)范中考慮到這一點(diǎn)。需要注意的地方一定要解釋清楚。例如，H1標(biāo)簽下的字體大小必須是88點(diǎn)，而縮略圖大小總是200200像素，但不需要限制所有非關(guān)鍵點(diǎn)。只有將設(shè)計精神和風(fēng)格與這些要點(diǎn)結(jié)合起來，你的團(tuán)隊才能在規(guī)定的范圍內(nèi)進(jìn)行有效的設(shè)計。如果所有細(xì)節(jié)都被限制死，那么整個規(guī)范就變成了字典，每個人只有不斷的查閱規(guī)范才能完成設(shè)計。

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

　　在設(shè)計指南中描述和標(biāo)準(zhǔn)化每個設(shè)計元素的風(fēng)格可能并不那么有趣，但它足夠重要。

　　風(fēng)格的描述性復(fù)制也會影響視覺設(shè)計。這些描述性文字會影響設(shè)計師對風(fēng)格體驗的掌控，對圖片類型的選擇，甚至?xí)绊憣︻伾妥煮w的控制。所有這些共同構(gòu)成了品牌的整體個性。

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

　　強(qiáng)烈的風(fēng)格和調(diào)性是視覺識別的核心之一。設(shè)計元素要有屬于品牌的獨(dú)特個性，保證用戶即使看不到LOGO，看不到文字，也能清晰判斷自己屬于誰?？纯纯煽诳蓸返募t色和迪士尼的字體。他們是典型的。

　　4.SEO關(guān)鍵詞

　　搜索引擎優(yōu)化的重要性日益突出。在網(wǎng)頁設(shè)計中，關(guān)鍵詞優(yōu)化可能是討論最多但最無聊的部分。但是，你需要盡快考慮關(guān)鍵詞優(yōu)化。

　　你應(yīng)該用設(shè)計語言表達(dá)與你的品牌相關(guān)的關(guān)鍵詞，并在設(shè)計指南中明確指出。

　　城市舾裝商在其品牌設(shè)計指南中仔細(xì)列出了他們的相關(guān)關(guān)鍵詞。作為一個服裝品牌，列出的關(guān)鍵詞很多，但是核心關(guān)鍵詞都是用不同的顏色突出顯示的，讓你瞬間知道哪些應(yīng)該突出顯示。

　　這樣的關(guān)鍵詞列表，對于負(fù)責(zé)網(wǎng)站文案的營銷策劃和設(shè)計師來說，無疑是非常有用的。對于文案來說，很容易陷入無中生有的思考和回憶，但這樣一個列表的存在并不會讓這種情況發(fā)生。

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

　　5.元素樣式的控制

　　如今，各種各樣的圖案和設(shè)計材料正在互聯(lián)網(wǎng)上涌現(xiàn)，材料的濫用已經(jīng)成為一個非常普遍的設(shè)計問題。所以在規(guī)范設(shè)計的時候，要控制模式和相關(guān)元素的使用范圍。

　　這包括LOGO和圖標(biāo)的使用，配色的限制，表單和導(dǎo)航的控制，靜態(tài)和動態(tài)元素的控制。您可以在設(shè)計指南之外創(chuàng)建一個在線樣式指南，以便設(shè)計人員可以快速復(fù)制和粘貼這些元素。6.代碼片段

　　現(xiàn)在很多網(wǎng)站的設(shè)計指南已經(jīng)包含了很多常用的代碼片段。從小動作效果到按鈕的滑動效果，這些代碼片段都和很多細(xì)節(jié)體驗有關(guān)。最重要的是他們降低了手工輸入代碼的成本，保證了代碼重用率。

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

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