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