如何搭建設計規(guī)范——電商平臺實戰(zhàn)總結
發(fā)布者：君點科技 時間：2019-05-30 10:42:45什么是設計規(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ā)，進行闡述。語言盡量簡單明了，使用表格、圖片等更有利于查看。
在設計的過程中，采用怎樣的尺寸距離，怎樣有效提升用戶體驗是一個值得研究的問題。
字體
對于大部分app來說，都會使用默認字體，比如以IOS作為設計標準時，采用蘋方。默認字體的好處就是程序上不用另外對打字體包。字體包通常都比較大，會導致系統(tǒng)變慢，不利于流暢的用戶體驗。但是默認字體也有不好的地方，就是顯得大眾化沒有個性。對于一些強調腔調的應用來說，可能會精心挑選出一款字體。這就要看具體的項目需求，權衡利弊啦。
在這里不僅列出了字體的樣式，字號，重要程度，建議行距，使用場景，還為其設置了一組編號。編號的作用在于：程序編寫代碼時可利用編號一一對應不同的css樣式，后期迭代時，只需要修改css樣式，就可以將對應字體一并修改，非常方便。這個方法是借鑒了騰訊視頻的設計規(guī)范，第一時間就覺得非常好用，所以用在了本次項目里。
顏色
一個項目的顏色不宜太多，通常三個，不超過五個。涉及諸多頁面和功能，需要有不同的信息層級，因此衍生出了其他顏色。
圖標
圖標不僅要在形式上作出規(guī)范，也要在命名上做規(guī)范。命名規(guī)則: 位置名稱_功能名稱_ 詳細區(qū)分標志名稱@2x.png。
例如head導航區(qū)域左邊返回按鈕命名：[email protected]
在后期圖標迭代時，無需更改圖標名字，只替換圖片內容即可。
按鈕
除了不同地方會出現(xiàn)一些形式不同的按鈕外，還應注意統(tǒng)一按鈕的不同形態(tài)。
彈窗
彈窗分為沒有按鈕，有一個按鈕，有多個按鈕三種。本次沒有按鈕的彈框采用系統(tǒng)自帶的。有多個按鈕的時候，注意區(qū)分推薦操作和次要操作，從表現(xiàn)形式上去引導用戶。
二級導航
注意選項的可變化性，靈活制定規(guī)范。
列表
列表相對來說比較簡單，由于重復使用的場景很多，也在規(guī)范中單獨列出。
商品圖片
項目若是電商平臺，必然有很多商品圖片的頁面。商品圖片除了尺寸還需對文件大小作出限制。圖片如果不經壓縮，文件太大，會非常影響運行的流暢度。有了這樣的限制，方便和平面設計師以及和后臺程序溝通。
間距
間距對于信息的分割是不可或缺的。對于同等層級的信息分割需采用同一距離，對于不同頁面不同功能的信息分割也建議重復利用這些間距。保證使整個項目視覺上的統(tǒng)一流暢，有條不紊。
本信息來源于：君點科技 fasttcp.cn 網站建設，網站設計，上海網站建設，上海網站設計，網站建設公司，網站設計公司
掃描二維碼
