2024-7-5 濤濤
設(shè)計規(guī)范能夠使視覺設(shè)計更加統(tǒng)一，前端開發(fā)更加高效準(zhǔn)確。當(dāng)接手一個新項目時，我們應(yīng)該如何著手搭建呢？
前言
設(shè)計規(guī)范能夠使視覺設(shè)計更加統(tǒng)一，前端開發(fā)更加高效準(zhǔn)確。當(dāng)接手一個新項目時，我們應(yīng)該如何著手搭建呢？前段時間我為谷小酒項目制定了一套設(shè)計規(guī)范，現(xiàn)將遇到對問題總結(jié)一下，分享給大家，歡迎大家補充討論。
什么是設(shè)計規(guī)范
首先，我們要知道什么是設(shè)計規(guī)范。通俗的來說，設(shè)計規(guī)范就是對設(shè)計元素進行一些規(guī)范化的限制規(guī)定，諸如顏色，形狀，大小等等，方便后續(xù)延展時，能夠很好的保證視覺上的統(tǒng)一性。對于前端開發(fā)人員來說，提供了一份參考，實現(xiàn)時能更加準(zhǔn)確，從而也減小了復(fù)核的工作量。
設(shè)計規(guī)范應(yīng)當(dāng)避免兩個的坑
1.避免寫得過于“精細”
規(guī)范應(yīng)該是針對整個項目通用的，所以要善于提煉出重疊的部分。對于某個界面特有的元素，就不要列入了，寫的過于“精細”，便成了單個頁面的標(biāo)注和需求，失去了意義，而且在使用的過程中，定的太死也會出現(xiàn)一些問題。我們來看一個例子：
在針對二級導(dǎo)航欄做規(guī)范設(shè)計的時候，這里并沒有考慮到二級導(dǎo)航欄的選項數(shù)是不確定的，所以這里的給出的選中條寬度的限制是無意義的。在執(zhí)行過程中如果嚴(yán)格遵循，也會出現(xiàn)問題。
2.避免將需求文檔摘抄一遍
一般情況我們都會先拿到需求交互文檔，然后再開始設(shè)計。程序也會先看需求交互文檔。所以沒有必要將需求交互的說明文字再添加到設(shè)計規(guī)范里面，這樣會導(dǎo)致整個文檔拖沓冗余。還是舉個例子：
在上面的規(guī)范中，除了元素大小，顏色，邊距，其他均為需求交互文檔里的內(nèi)容。重復(fù)交叉的描述大大增加了閱讀時間，不利于快速方便地查看。
以上兩點是很容易出現(xiàn)的問題，有時候可能為了顯得“豐滿”，不自覺地就寫多了，其實效果并不好，還是簡練方便的文檔更好用。
如何搭建設(shè)計規(guī)范
1.搭建時間
新的項目開動后，初期頁面審核完成時即可開始整理規(guī)范。在整理的過程中可能還會遇到一些小小的改動，需要不斷調(diào)整。當(dāng)設(shè)計基本穩(wěn)定時，規(guī)范也相應(yīng)的可以制定出了。
2.搭建的要點
設(shè)計規(guī)范很重要的一點，就是提煉要點，形成該項目獨有的設(shè)計語言。也可在自由發(fā)揮的部分給出一些指導(dǎo)建議，使得整個項目更具有統(tǒng)一感。比如可以從字體，顏色，圖標(biāo)，控件等角度出發(fā)，進行闡述。語言盡量簡單明了，使用表格、圖片等更有利于查看。
在設(shè)計的過程中，采用怎樣的尺寸距離，怎樣有效提升用戶體驗是一個值得研究的問題。本章只針對規(guī)范的制定進行討論，不做延展。下面是谷小酒的設(shè)計規(guī)范，供大家參考：
字體
對于大部分app來說，都會使用默認字體，比如以IOS作為設(shè)計標(biāo)準(zhǔn)時，采用蘋方。默認字體的好處就是程序上不用另外對打字體包。字體包通常都比較大，會導(dǎo)致系統(tǒng)變慢，不利于流暢的用戶體驗。但是默認字體也有不好的地方，就是顯得大眾化沒有個性。對于一些強調(diào)腔調(diào)的應(yīng)用來說，可能會精心挑選出一款字體。這就要看具體的項目需求，權(quán)衡利弊啦。
在這里不僅列出了字體的樣式，字號，重要程度，建議行距，使用場景，還為其設(shè)置了一組編號。編號的作用在于：程序編寫代碼時可利用編號一一對應(yīng)不同的css樣式，后期迭代時，只需要修改css樣式，就可以將對應(yīng)字體一并修改，非常方便。這個方法是借鑒了騰訊視頻的設(shè)計規(guī)范，第一時間就覺得非常好用，所以用在了本次項目里。
顏色
一個項目的顏色不宜太多，通常三個，不超過五個。谷小酒以紅色#81125為品牌色，搭配黑色#333333，VIP頁面為了突出尊享的感覺，另采用黃色#ffda77主打。由于涉及諸多頁面和功能，需要有不同的信息層級，所以以此衍生出了其他顏色。
圖標(biāo)
圖標(biāo)不僅要在形式上作出規(guī)范，也要在命名上做規(guī)范。命名規(guī)則: 位置名稱_功能名稱_ 詳細區(qū)分標(biāo)志名稱@2x.png。
例如head導(dǎo)航區(qū)域左邊返回按鈕命名：navigationItem_leftBackIcon@2x.png
在后期圖標(biāo)迭代時，無需更改圖標(biāo)名字，只替換圖片內(nèi)容即可。
按鈕
除了不同地方會出現(xiàn)一些形式不同的按鈕外，還應(yīng)注意統(tǒng)一按鈕的不同形態(tài)。
彈窗
彈窗分為沒有按鈕，有一個按鈕，有多個按鈕三種。本次沒有按鈕的彈框采用系統(tǒng)自帶的。有多個按鈕的時候，注意區(qū)分推薦操作和次要操作，從表現(xiàn)形式上去引導(dǎo)用戶。
二級導(dǎo)航
注意選項的可變化性，靈活制定規(guī)范。
列表
列表相對來說比較簡單，由于重復(fù)使用的場景很多，也在規(guī)范中單獨列出。
商品圖片
谷小酒是米小酒旗下的一款高端白酒，該項目是以酒為主的電商平臺，必然有很多商品圖片的頁面。商品圖片除了尺寸還需對文件大小作出限制。圖片如果不經(jīng)壓縮，文件太大，會非常影響運行的流暢度。有了這樣的限制，方便和平面設(shè)計師以及和后臺程序溝通。
間距
間距對于信息的分割是不可或缺的。對于同等層級的信息分割需采用同一距離，對于不同頁面不同功能的信息分割也建議重復(fù)利用這些間距。保證使整個項目視覺上的統(tǒng)一流暢，有條不紊。
結(jié)語
以上就是規(guī)范落地的一個小總結(jié)啦～！希望能夠?qū)Υ蠹矣兴鶐椭?/p>
藍藍設(shè)計(m.lzhte.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan。
關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
藍藍設(shè)計的小編 http://m.lzhte.cn