設計指(zhi)南是最大程(cheng)度提升網頁設計團隊輸(shu)出效率(lv)和確保品牌一致性的(de)核心工(gong)具，成功(gong)的(de)設計規(gui)范并非一蹴而就，需要(yao)注意的(de)問題并不(bu)少(shao)。
對于一(yi)(yi)個(ge)網站甚至一(yi)(yi)個(ge)品(pin)牌(pai)而言(yan)，設(she)計(ji)指南(nan)不(bu)(bu)僅僅是一(yi)(yi)份(fen)規范文檔那么簡單(dan)。優秀的設(she)計(ji)指南(nan)本身(shen)就如(ru)同(tong)藝術(shu)品(pin)一(yi)(yi)樣(yang)令人賞心悅目，在實際的設(she)計(ji)工(gong)作(zuo)中，它(ta)還有(you)著不(bu)(bu)可替代的重要功能。它(ta)展(zhan)示出你的產品(pin)應有(you)的樣(yang)式和(he)形態，并且以(yi)一(yi)(yi)種可管(guan)理、易(yi)于使用和(he)易(yi)于理解的方(fang)式將整個(ge)設(she)計(ji)體系統合到了一(yi)(yi)起。在制(zhi)作設(she)計指南(nan)的(de)時候，下面6個關鍵點(dian)一定不能(neng)忽視。
1、品牌標識(shi)示例
首先，你的(de)(de)設計指(zhi)南(nan)中(zhong)應該(gai)包含可視化的(de)(de)品(pin)牌(pai)標識(shi)展示案例(li)，以(yi)這(zhe)樣(yang)的(de)(de)方式來呈現品(pin)牌(pai)標識(shi)應有的(de)(de)樣(yang)子。
最好的案(an)例(li)，其實是(shi)就是(shi)貼合(he)真實應(ying)用場景的案(an)例(li)，而這樣的實戰(zhan)案(an)例(li)也(ye)正貼合(he)了(le)設(she)計(ji)指南(nan)的真實存在(zai)意(yi)圖。
這些設(she)計案例(li)，通常(chang)是品(pin)牌旗下網站主頁、移動(dong)端頁面、APP的截圖，這些案例(li)展示出品(pin)牌標識的正確(que)使用方法，以及相應的其(qi)他元素的展示樣式。
下圖是(shi)Love to Ride的(de)(de)品(pin)牌設計(ji)指(zhi)南。他(ta)們的(de)(de)設計(ji)指(zhi)南每一(yi)(yi)(yi)頁(ye)都設計(ji)得如同網頁(ye)一(yi)(yi)(yi)樣(yang)，本身就呈現出了足夠的(de)(de)一(yi)(yi)(yi)致性(xing)。設計(ji)指(zhi)南中(zhong)甚(shen)至講(jiang)一(yi)(yi)(yi)些常見(jian)的(de)(de)小元素(su)集中(zhong)到一(yi)(yi)(yi)起予以(yi)說明，比如不同地方的(de)(de)APP圖標應(ying)該以(yi)什么(me)樣(yang)的(de)(de)樣(yang)式來呈現。
在設計指南中采用(yong)(yong)真(zhen)實(shi)案(an)例，最(zui)大的(de)優(you)勢(shi)在于，你不(bu)用(yong)(yong)創建額外(wai)的(de)應用(yong)(yong)場景(jing)和模(mo)擬(ni)說(shuo)明，而(er)是用(yong)(yong)最(zui)真(zhen)實(shi)的(de)案(an)例直接(jie)說(shuo)明，對于團隊其他成員而(er)言，也是最(zui)為有效的(de)展示(shi)。
2、完整的設(she)計說(shuo)明
從(cong)(cong)配色方案到排版布(bu)局(ju)，從(cong)(cong)圖形的運用(yong)到具(ju)體控件的出現(xian)位置，都要(yao)有詳細的說明。
在(zai)整(zheng)個設(she)計(ji)當中，樣式和功能要遵循哪些規律，背后(hou)的設(she)計(ji)哲學是(shi)什么，都(dou)應當予以說明(ming)。
這些完整的(de)(de)(de)(de)解釋(shi)說明(ming)，能夠幫助整個設(she)計和(he)開發(fa)團隊盡(jin)可(ke)能在不(bu)同的(de)(de)(de)(de)媒體上(shang)準確而(er)一致(zhi)地采(cai)用統(tong)(tong)一的(de)(de)(de)(de)設(she)計風格。相同的(de)(de)(de)(de)元素和(he)內核上(shang)高(gao)度一致(zhi)的(de)(de)(de)(de)設(she)計，能讓用戶在查看(kan)網(wang)頁和(he)平面廣告(gao)的(de)(de)(de)(de)時(shi)候感(gan)知到(dao)品牌(pai)的(de)(de)(de)(de)獨(du)特性和(he)統(tong)(tong)一性，讓不(bu)同位置的(de)(de)(de)(de)內容呈(cheng)(cheng)現出明(ming)顯的(de)(de)(de)(de)關(guan)(guan)聯關(guan)(guan)系。舉個例子，在線的(de)(de)(de)(de)網(wang)頁常常會(hui)因(yin)為用戶所用設(she)備而(er)呈(cheng)(cheng)現出不(bu)同的(de)(de)(de)(de)字體，設(she)計師會(hui)最大限度地借助Google Fonts和(he)Typekit來調用盡(jin)可(ke)能接近品牌(pai)默認字體的(de)(de)(de)(de)第三方(fang)字體，來達到(dao)盡(jin)可(ke)能一致(zhi)的(de)(de)(de)(de)體驗。
所(suo)以，如果字(zi)體是你(ni)(ni)的品牌(pai)策略中(zhong)(zhong)不可(ke)替代的一部分，那么你(ni)(ni)應該(gai)在整體設計(ji)規(gui)范中(zhong)(zhong)考慮好這一點。
對(dui)于需要注意的點(dian)(dian)，一定要予以清晰的說明，比如H1標簽下的字體尺寸一定是(shi)88點(dian)(dian)，而縮略圖(tu)的尺寸始終(zhong)是(shi)200×200像素，不過對(dui)于非關鍵(jian)點(dian)(dian)就沒有必(bi)要全都進行限定。將(jiang)設(she)(she)計(ji)的精神和(he)風格與這(zhe)些關鍵(jian)點(dian)(dian)結合起(qi)來，才(cai)能夠讓你(ni)的團隊在規(gui)定范圍內進行有效(xiao)的設(she)(she)計(ji)，如果(guo)將(jiang)所有的細(xi)節都限定死，那(nei)么整(zheng)個(ge)規(gui)范就淪為一部詞典了，所有人都只能靠不停(ting)的查閱規(gui)范來完成設(she)(she)計(ji)。
3、風格和調性
在設(she)計(ji)指南中針對(dui)各(ge)個設(she)計(ji)元素來描(miao)述和規(gui)范風格可(ke)能(neng)并不那么有趣，但是足夠(gou)重要。
對于風(feng)(feng)格(ge)的(de)描述文案同(tong)樣會(hui)影(ying)(ying)響到(dao)視覺(jue)的(de)設計。這些描述的(de)文本會(hui)影(ying)(ying)響到(dao)設計人員對于風(feng)(feng)格(ge)體(ti)驗的(de)把控和圖片類型的(de)選取(qu)，甚至連色彩和字體(ti)的(de)控制也會(hui)被影(ying)(ying)響到(dao)。所(suo)有的(de)這些東西共同(tong)組成了品牌整體(ti)的(de)個性(xing)。
更重要的(de)是(shi)，它們決定(ding)了外界如(ru)何識別你的(de)產品(pin)和品(pin)牌。
強(qiang)大的(de)(de)(de)(de)風格和調性是(shi)視覺識別的(de)(de)(de)(de)核心之一。設計元素應該有屬(shu)于(yu)品牌(pai)的(de)(de)(de)(de)獨特(te)個性，這樣才能(neng)確保用戶即使看(kan)不到(dao)LOGO讀不到(dao)文(wen)本，也(ye)能(neng)清晰地判(pan)斷出它們(men)是(shi)屬(shu)于(yu)誰的(de)(de)(de)(de)。看(kan)看(kan)可口可樂的(de)(de)(de)(de)紅色和迪士尼的(de)(de)(de)(de)字體(ti)吧，它們(men)就是(shi)典型。
4、SEO關鍵(jian)詞(ci)
搜索引擎優化(hua)的重要(yao)性(xing)日(ri)漸突出。在網頁設(she)計當中，關(guan)鍵(jian)詞的優化(hua)可(ke)能是討(tao)論得最多但是最無(wu)趣的組(zu)成部(bu)分。但是，你需要(yao)盡(jin)早考慮關(guan)鍵(jian)詞優化(hua)這件事(shi)情。
你應(ying)該將你的(de)品牌相關的(de)關鍵詞用設計的(de)語言(yan)表(biao)述出(chu)來(lai)，在設計指(zhi)南中清晰(xi)的(de)指(zhi)出(chu)來(lai)。
Urban Outfitters在它的(de)品牌(pai)設計指南當中，精(jing)心(xin)到位地(di)列(lie)(lie)舉(ju)出它們相關(guan)的(de)關(guan)鍵詞(ci)。雖然作為服裝品牌(pai)，列(lie)(lie)舉(ju)出的(de)關(guan)鍵詞(ci)非常多，但是其中最(zui)核(he)心(xin)的(de)關(guan)鍵詞(ci)，使用(yong)不同的(de)色彩突(tu)出展示，讓(rang)你(ni)可以(yi)瞬間知(zhi)道哪(na)些應該著重突(tu)出。
這樣的(de)(de)關鍵詞列表(biao)對(dui)于負(fu)責網站文案的(de)(de)營銷策劃(hua)和設計人員(yuan)而言(yan)，無疑是非(fei)常有用的(de)(de)。對(dui)于文案寫作者而言(yan)，憑(ping)空(kong)去想和回(hui)憶往(wang)往(wang)容易(yi)卡住，而這樣的(de)(de)列表(biao)的(de)(de)存在，則不會(hui)讓這樣的(de)(de)情況發生(sheng)。
讓(rang)內容創作和關鍵詞系統統一起來，網站在排(pai)名上的優勢會更加明(ming)顯(xian)，距(ju)離目(mu)標用戶就更近一步了。
5、元素的(de)樣式的(de)控制
現(xian)如今(jin)網(wang)上(shang)各種(zhong)各樣的(de)圖案(an)(an)和(he)(he)設計素(su)材(cai)層出不窮，素(su)材(cai)的(de)濫(lan)用已(yi)經成為非常常見的(de)設計問題了。所以(yi)，在規范(fan)(fan)設計的(de)時(shi)候，應當控制圖案(an)(an)和(he)(he)相關元素(su)的(de)使用范(fan)(fan)圍。
這(zhe)包括LOGO和(he)圖標(biao)的(de)使(shi)用限定范圍，配色的(de)限制(zhi)，表單和(he)導航(hang)的(de)掌控，以(yi)及靜態(tai)和(he)動態(tai)元素(su)的(de)控制(zhi)。你(ni)可以(yi)在(zai)設計(ji)指南之外創造一個(ge)在(zai)線的(de)風格指南，便于設計(ji)人(ren)員快速的(de)復制(zhi)和(he)粘貼(tie)這(zhe)些元素(su)。
6、代碼片段
現如(ru)今許多網站的(de)設(she)計指(zhi)南當中，已經(jing)包含了許多常(chang)用(yong)的(de)代碼(ma)片段了。從(cong)按鈕的(de)小(xiao)動效到滑動效果，這些(xie)代碼(ma)片段和許多細節的(de)體(ti)驗相互關(guan)聯，最(zui)關(guan)鍵的(de)是它們降低(di)手動輸入代碼(ma)的(de)成(cheng)本，確保了代碼(ma)的(de)復(fu)用(yong)率。
對于網站的文本和媒(mei)體內容而言(yan)，相關(guan)的常用代碼(ma)片段(duan)是提(ti)升效率的關(guan)鍵之一。
Firefox在它(ta)的(de)最新的(de)設計指南當中就囊括(kuo)了元素(su)使用(yong)(yong)相關(guan)的(de)常(chang)用(yong)(yong)代碼。即使你從來沒有(you)提供完整(zheng)的(de)代碼片段(duan)庫，也盡量包含一些基本的(de)、常(chang)用(yong)(yong)的(de)代碼，讓設計師和相關(guan)的(de)開發(fa)人員能夠更(geng)為統一高效地完成日常(chang)的(de)編輯(ji)工作。
