設計指南是大程度提升網頁設計團隊輸出效率和確保品牌一致性的核心工具，成功的設計規範並非一蹴而就，需要注意的問題並不少。

　　對於一個網站甚至一個品牌而言，設計指南不僅僅是一份規範檔案那麼簡單。優秀的設計指南本身就如同藝術品一樣令人賞心悅目，在實際的設計工作中，它還有著不可替代的重要功能。它展示出您的產品應有的樣式和形態，並且以一種可管理、易於使用和易於理解的方式將整個設計體系統合到了一起。在製作設計指南的時候，下面 6 個關鍵點一定不能忽視。

　　1 、品牌標識示例

　　先，您的設計指南中應該包含視覺化的品牌標識展示案例，以這樣的方式來呈現品牌標識應有的樣子。

　　知名的案例，其實是就是貼合真實應用場景的案例，而這樣的實戰案例也正貼合了設計指南的真實存在意圖。

　　這些設計案例，通常是品牌旗下網站主頁、移動端頁面、 WordPress APP 的截圖，這些案例展示出品牌標識的正確使用方法，以及相應的其他元素的展示樣式。

　　下圖是 Love to Ride 的品牌設計指南。他們的設計指南每一頁都設計得如同網頁一樣，本身就呈現出了足夠的一致性。設計指南中甚至講一些常見的小元素集中到一起予以說明，比如不同地方的 WordPress APP 圖示應該以什麼樣的樣式來呈現。

　　在設計指南中採用真實案例，大的優勢在於，您不用建立額外的應用場景和模擬說明，而是用真實的案例直接說明，對於團隊其他成員而言，也是為有效的展示。

　　2 、完整的設計說明

　　從配色方案到排版佈局，從圖形的運用到具體控制元件的出現位置，都要有詳細的說明。

　　在整個設計當中，樣式和功能要遵循哪些規律，背後的設計哲學是什麼，都應當予以說明。

　　這些完整的解釋說明，能夠幫助整個設計和開發團隊儘可能在不同的媒體上準確而一致地採用統一的設計風格。相同的元素和核心上高度一致的設計，能讓多使用者在檢視網頁和平面廣告的時候感知到品牌的獨特性和統一性，讓不同位置的內容呈現出明顯的關聯關係。舉個例子，線上的網頁常常會因為多使用者所用裝置而呈現出不同的字型，設計師會大限度地藉助 Google Fonts 和 Typekit 來呼叫儘可能接近品牌預設字型的第三方字型，來達到儘可能一致的體驗。

　　所以，如果字型是您的品牌策略中不可替代的一部分，那麼您應該在整體設計規範中考慮好這一點。

　　對於需要注意的點，一定要予以清晰的說明，比如 H1 標籤下的字型尺寸一定是 88 點，而縮圖的尺寸始終是 200×200 畫素，不過對於非關鍵點就沒有必要全都進行限定。將設計的精神和風格與這些關鍵點結合起來，才能夠讓您的團隊在規定範圍內進行有效的設計，如果將所有的細節都限定死，那麼整個規範就淪為一部詞典了，所有人都只能靠不停的查閱規範來完成設計。

　　3 、風格和調性

　　在設計指南中針對各個設計元素來描述和規範風格可能並不那麼有趣，但是足夠重要。

　　對於風格的描述文案同樣會影響到視覺的設計。這些描述的文字會影響到設計人員對於風格體驗的把控和圖片型別的選取，甚至連色彩和字型的控制也會被影響到。所有的這些東西共同組成了品牌整體的個性。

　　更重要的是，它們決定了外界如何識別您的產品和品牌。

　　強大的風格和調性是視覺識別的核心之一。設計元素應該有屬於品牌的獨特個性，這樣才能確保多使用者即使看不到 LOGO 讀不到文字，也能清晰地判斷出它們是屬於誰的。看看可口可樂的紅色和迪士尼的字型吧，它們就是典型。

　　4 、 SEO 站群關鍵詞

　　搜尋引擎最佳化的重要性日漸突出。在網頁設計當中，關鍵詞的最佳化可能是討論得多但是無趣的組成部分。但是，您需要儘早考慮關鍵詞最佳化這件事情。

　　您應該將您的品牌相關的關鍵詞用設計的語言表述出來，在設計指南中清晰的指出來。

　　Urban Outfitters 在它的品牌設計指南當中，精心到位地列舉出它們相關的關鍵詞。雖然作為服裝品牌，列舉出的關鍵詞非常多，但是其中核心的關鍵詞，使用不同的色彩突出展示，讓您可以瞬間知道哪些應該著重突出。

　　這樣的關鍵詞列表對於負責網站文案的營銷策劃和設計人員而言，無疑是非常有用的。對於文案寫作者而言，憑空去想和回憶往往容易卡住，而這樣的列表的存在，則不會讓這樣的情況發生。

　　讓內容創作和關鍵詞系統統一起來，網站在排名上的優勢會更加明顯，距離目標多使用者就更近一步了。

　　5 、元素的樣式的控制

　　現如今網上各種各樣的圖案和設計素材層出不窮，素材的濫用已經成為非常常見的設計問題了。所以，在規範設計的時候，應當控制圖案和相關元素的使用範圍。

　　這包括 LOGO 和圖示的使用限定範圍，配色的限制，表單和導航的掌控，以及靜態和動態元素的控制。您可以在設計指南之外創造一個線上的風格指南，便於設計人員快速的複製和貼上這些元素。

　　6 、程式碼片段

　　現如今許多網站的設計指南當中，已經包含了許多常用的程式碼片段了。從按鈕的小動效到滑動效果，這些程式碼片段和許多細節的體驗相互關聯，關鍵的是它們降低手動輸入程式碼的成本，確保了程式碼的複用率。

　　對於網站的文字和媒體內容而言，相關的常用程式碼片段是提升效率的關鍵之一。

　　Firefox 在它的新的設計指南當中就囊括了元素使用相關的常用程式碼。即使您從來沒有提供完整的程式碼片段庫，也儘量包含一些基本的、常用的程式碼，讓設計師和相關的開發人員能夠更為統一高效地完成日常的編輯工作。