設(shè)計指南是最大化設(shè)計團隊輸出效率并確保品牌一致性的核心工具。成功的設(shè)計規(guī)范不是一次性過程,需要注意許多問題。
對于網(wǎng)站甚至品牌,設(shè)計指南不僅僅是規(guī)范文檔。優(yōu)秀的設(shè)計指南本身就像藝術(shù)品一樣令人愉悅,它在實際設(shè)計工作中具有不可替代的重要功能。它顯示了產(chǎn)品應(yīng)具有的樣式和形式,并以可管理,易于使用且易于理解的方式將整個設(shè)計系統(tǒng)整合在一起。
在制作設(shè)計指南時,不得忽視以下六個要點。
1、品牌標(biāo)識示例
首先,您的設(shè)計指南應(yīng)該包含一個可視化的品牌標(biāo)識展示案例,以便展示品牌標(biāo)識應(yīng)該是什么樣子。
最好的情況實際上是一個適合實際應(yīng)用場景的案例,這樣的實際案例也符合設(shè)計指南的真實意圖。
這些設(shè)計案例通常是品牌網(wǎng)站主頁,移動頁面和APP的屏幕截圖。這些案例展示了品牌標(biāo)識的正確使用以及其他元素的相應(yīng)展示風(fēng)格。
下圖是Love to Ride的品牌設(shè)計指南。他們的設(shè)計指南的每一頁都像網(wǎng)頁一樣設(shè)計,并且本質(zhì)上是一致的。設(shè)計指南甚至討論了一些常見的小元素,這些元素組合在一起來說明,例如應(yīng)該在不同的地方呈現(xiàn)哪些樣式的APP圖標(biāo)。
在設(shè)計指南中使用真實示例的最大優(yōu)點是您不必創(chuàng)建其他場景和模擬,而是使用最真實的示例直接說明它們,對于團隊的其他成員,最有效的展示。
2、完整的設(shè)計說明
從顏色方案到布局布局,從使用圖形到特定控件的外觀,必須有詳細的描述。
在整個設(shè)計中,應(yīng)該在風(fēng)格和功能方面遵循哪些規(guī)則,并且應(yīng)該解釋設(shè)計理念背后的內(nèi)容。
這些完整的解釋有助于整個設(shè)計和開發(fā)團隊在不同媒體上準確一致地采用一致的設(shè)計風(fēng)格。內(nèi)核上相同的元素和高度一致的設(shè)計允許用戶在查看網(wǎng)頁和平面廣告時感知品牌的獨特性和統(tǒng)一性,從而使不同位置的內(nèi)容顯示出明確的關(guān)系。例如,由于用戶的設(shè)備,在線網(wǎng)頁通常呈現(xiàn)不同的字體。設(shè)計人員使用Google Fonts和Typekit來最大化與品牌默認字體盡可能接近的第三方字體。經(jīng)驗。
因此,如果字體是您品牌戰(zhàn)略中不可替代的一部分,那么您應(yīng)該在整體設(shè)計規(guī)范中考慮這一點。
對于需要注意的點,必須明確說明。例如,H1標(biāo)簽下的字體大小必須為88點,縮略圖的大小始終為200× 200像素,但沒有必要限制所有非關(guān)鍵點。將設(shè)計的精神和風(fēng)格與這些關(guān)鍵點相結(jié)合,使您的團隊能夠在規(guī)定的范圍內(nèi)有效地進行設(shè)計。如果定義了所有細節(jié),那么整個規(guī)范就變成了一個字典,每個人都只能依靠對規(guī)范的不間斷訪問來完成設(shè)計。
3、風(fēng)格和調(diào)性
描述和標(biāo)準化設(shè)計指南中每個設(shè)計元素的樣式可能不是那么有趣,但足夠重要。
風(fēng)格的描述也會影響視覺設(shè)計。這些描述的文字將影響設(shè)計師對風(fēng)格體驗和圖片類型選擇的控制,甚至對顏色和字體的控制也會受到影響。所有這些事物共同構(gòu)成了品牌的整體個性。
更重要的是,它們決定了外部世界如何識別您的產(chǎn)品和品牌。
強大的風(fēng)格和色調(diào)是視覺識別的核心之一。設(shè)計元素應(yīng)具有屬于品牌的獨特個性,以確保用戶即使不看文本也能清楚地確定他們屬于誰??纯纯煽诳蓸返募t色和迪士尼字體,這是典型的。
4、SEO 關(guān)鍵詞
搜索引擎優(yōu)化的重要性正在增長。在網(wǎng)頁設(shè)計中,關(guān)鍵字優(yōu)化可能是討論最多但最無聊的組件。但是,您需要盡早考慮關(guān)鍵字優(yōu)化。
您應(yīng)該以設(shè)計語言表達與品牌相關(guān)的關(guān)鍵字,并在設(shè)計指南中明確指出。
Urban Outfitters在其品牌設(shè)計指南中仔細列出了相關(guān)的關(guān)鍵字。雖然作為服裝品牌,列出了許多關(guān)鍵字,但最重要的關(guān)鍵字以不同顏色突出顯示,以便您可以立即知道哪些應(yīng)突出顯示。
這樣的關(guān)鍵字列表無疑對負責(zé)網(wǎng)站文案的營銷策劃者和設(shè)計師非常有用。對于撰稿人而言,思考和回憶往往很容易被困住,而這樣的列表的存在并不會使這種情況發(fā)生。
通過統(tǒng)一內(nèi)容創(chuàng)建和關(guān)鍵字系統(tǒng),網(wǎng)站在排名方面的優(yōu)勢將更加明顯,并且將更接近目標(biāo)用戶。
5、元素的樣式的控制
如今,互聯(lián)網(wǎng)上出現(xiàn)了各種各樣的圖案和設(shè)計材料,濫用材料已成為一個非常普遍的設(shè)計問題。因此,在規(guī)范設(shè)計中,應(yīng)該控制模式和相關(guān)元素的使用范圍。
這包括使用LOGO和圖標(biāo),顏色匹配的限制,表單和導(dǎo)航的控制,以及靜態(tài)和動態(tài)元素的控制。您可以在設(shè)計指南之外創(chuàng)建在線樣式指南,以便設(shè)計人員可以快速復(fù)制和粘貼這些元素。
6、代碼片段
許多常用的代碼片段都包含在當(dāng)今許多網(wǎng)站的設(shè)計指南中。從按鈕的小效果到滑動效果,這些代碼片段與許多細節(jié)的體驗相互關(guān)聯(lián)。最重要的是它們降低了手動輸入代碼的成本并確保了代碼的重用率。
對于網(wǎng)站的文本和媒體內(nèi)容,相關(guān)的通用代碼片段是提高效率的關(guān)鍵之一。
Firefox在其最新設(shè)計指南中包含了元素使用的通用代碼。即使您從未提供完整的代碼段庫,也要嘗試包含一些基本的常用代碼,以便設(shè)計人員和相關(guān)開發(fā)人員能夠更加一致,高效地完成日常編輯工作。
結(jié)語
設(shè)計指南這種東西不一定是靜態(tài)書籍或簡單的PDF文檔。它可以涵蓋各種元素類型,您可以使用工具創(chuàng)建在線多功能設(shè)計指南和樣式指南,以便設(shè)計可以用更少的資源做更多事情。
原作者: CARRIE COUSINS
譯者:陳子木
翻譯地址:http://www.uisdc.com/design-guide-6-key-points
本文由@陳子木授權(quán),未經(jīng)作者許可,禁止轉(zhuǎn)載。
該地圖來自Unsplash,基于CC0協(xié)議