電腦網(wǎng)頁界面設計有沒有像material design這樣的規(guī)范？

時間：2024-02-16 00:55:02 | 來源：網(wǎng)站運營

時間：2024-02-16 00:55:02 來源：網(wǎng)站運營

電腦網(wǎng)頁界面設計有沒有像material design這樣的規(guī)范？：對于剛?cè)胄械男氯?，可能覺得設計規(guī)范是一件很高大上又很讓人頭疼的事情。這篇文章會從新人的角度出發(fā)，總結(jié)一些設計規(guī)范要點，算是一次溫故總結(jié)的分享。


一、設計規(guī)范有什么用？

◆ ◆ ◆


設計規(guī)范能為團隊解決不少問題，并提升工作效率，主要體現(xiàn)在以下三個方面：


1、解決多人協(xié)作時控件混亂問題

&amp;lt;img src="<a href="https://pic2.zhimg.com/v2-dfe8dd8f524e5975515b708bfb2166cd_b.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic2.zhimg.com/v2-dfe8dd8f524e5975515b708bfb2166cd_b.jpg</a>" data-rawwidth="800" data-rawheight="565" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic2.zhimg.com/v2-dfe8dd8f524e5975515b708bfb2166cd_r.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic2.zhimg.com/v2-dfe8dd8f524e5975515b708bfb2166cd_r.jpg</a>"&amp;gt;


一個大型項目的視覺稿，往往會有幾十個甚至是上百個頁面，因此，在進行多人協(xié)作一個項目前，可由主視覺設計師出一份視覺規(guī)范，其他一起協(xié)作的幾個設計師遵循這個規(guī)范，才能把控視覺統(tǒng)一性，提高效率，減少返工率。


另外，當新人加入團隊的時候，他們對產(chǎn)品的品牌基因可能理解不透，這時設計規(guī)范就可以幫他們快速上手，并且保持產(chǎn)品的統(tǒng)一性。


2、解決開發(fā)效率、代碼冗余問題

&amp;lt;img src="<a href="https://pic1.zhimg.com/v2-20a2180f7ea126ff935798dae2ce4ca4_b.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic1.zhimg.com/v2-20a2180f7ea126ff935798dae2ce4ca4_b.jpg</a>" data-rawwidth="800" data-rawheight="794" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic1.zhimg.com/v2-20a2180f7ea126ff935798dae2ce4ca4_r.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic1.zhimg.com/v2-20a2180f7ea126ff935798dae2ce4ca4_r.jpg</a>"&amp;gt;


如果沒有做規(guī)范，就拿按鈕這個常見的控件來舉例，程序員不知道具體的規(guī)范，每個程序員用代碼寫了A頁面的按鈕樣式，然后在開發(fā)B頁面時又要重新用代碼寫按鈕樣式，頁面越多程序員的工作量也就越大，影響項目進度，代碼也會越來越臃腫。


另外，對于末端界面沒有規(guī)范到的角落和由規(guī)范控件組成的新頁面提供了有效參考。


3、解決產(chǎn)品迭代中品牌形象會走樣問題

&amp;lt;img src="<a href="https://pic2.zhimg.com/v2-53633590f45615a6f9aa0b91a2f977d5_b.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic2.zhimg.com/v2-53633590f45615a6f9aa0b91a2f977d5_b.jpg</a>" data-rawwidth="800" data-rawheight="686" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic2.zhimg.com/v2-53633590f45615a6f9aa0b91a2f977d5_r.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic2.zhimg.com/v2-53633590f45615a6f9aa0b91a2f977d5_r.jpg</a>"&amp;gt;


產(chǎn)品在迭代過程中，往往是小版本進行幾個功能的迭代比較多。有了規(guī)范，后續(xù)迭代中也能保持設計初衷，遵循定制好的設計規(guī)范，維護好品牌形象。就算是后來加入新的設計師，新的設計師也能通過主設計師做好的規(guī)范，統(tǒng)一品牌形象。


二、設計規(guī)范操作的五大誤區(qū)

◆ ◆ ◆


設計規(guī)范的工作量不小，開始動手之前應了解一下有哪些誤區(qū)，盡量少走彎路，更科學高效地完成一份有效的規(guī)范文檔。


錯誤一：規(guī)范建立時機不對

&amp;lt;img src="<a href="https://pic3.zhimg.com/v2-efc6174f98e21e35ceb0d7a5c10d54f6_b.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic3.zhimg.com/v2-efc6174f98e21e35ceb0d7a5c10d54f6_b.jpg</a>" data-rawwidth="800" data-rawheight="432" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic3.zhimg.com/v2-efc6174f98e21e35ceb0d7a5c10d54f6_r.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic3.zhimg.com/v2-efc6174f98e21e35ceb0d7a5c10d54f6_r.jpg</a>"&amp;gt;


規(guī)范建立的時機很重要，太早或者太晚都會給后續(xù)迭代帶來很多麻煩。最佳時機是在完成風格定位后做規(guī)范，可以承上啟下高效完成工作。


錯誤二：對非重要界面進行規(guī)范設定

&amp;lt;img src="<a href="https://pic4.zhimg.com/v2-53183a5d0955126f378f5e267145f70b_b.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic4.zhimg.com/v2-53183a5d0955126f378f5e267145f70b_b.jpg</a>" data-rawwidth="800" data-rawheight="558" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic4.zhimg.com/v2-53183a5d0955126f378f5e267145f70b_r.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic4.zhimg.com/v2-53183a5d0955126f378f5e267145f70b_r.jpg</a>"&amp;gt;


整理規(guī)范時，應只針對控件、色值、質(zhì)感、動效、品牌元素等重要界面進行規(guī)范設定。



錯誤三：規(guī)則沒彈性

&amp;lt;img src="<a href="https://pic4.zhimg.com/v2-a45859d42f3a562c287d94a0fcbd8977_b.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic4.zhimg.com/v2-a45859d42f3a562c287d94a0fcbd8977_b.jpg</a>" data-rawwidth="800" data-rawheight="634" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic4.zhimg.com/v2-a45859d42f3a562c287d94a0fcbd8977_r.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic4.zhimg.com/v2-a45859d42f3a562c287d94a0fcbd8977_r.jpg</a>"&amp;gt;


采用28原則只能針對產(chǎn)品80%的界面進行規(guī)范。這里講的80%和20%是一個相對的概念，80%代表色彩、按鈕、字體、間距等重要內(nèi)容，這些內(nèi)容需要進行詳細的規(guī)范說明。另外的20%是指某些控件是不可復用并且不重要的，這種20%的內(nèi)容不需要花費精力做進規(guī)范里。這個28原則需要設計師根據(jù)具體情況具體分析，作出更適合當下的設計。


錯誤四：規(guī)范沒有迭代

&amp;lt;img src="<a href="https://pic3.zhimg.com/v2-97c3b3d32b479d5217cdcec87d291a2e_b.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic3.zhimg.com/v2-97c3b3d32b479d5217cdcec87d291a2e_b.jpg</a>" data-rawwidth="800" data-rawheight="575" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic3.zhimg.com/v2-97c3b3d32b479d5217cdcec87d291a2e_r.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic3.zhimg.com/v2-97c3b3d32b479d5217cdcec87d291a2e_r.jpg</a>"&amp;gt;


在完成v1.0版規(guī)范后，產(chǎn)品還會一直迭代，產(chǎn)品改版過程中必定會不斷優(yōu)化設計。


在產(chǎn)品迭代過程中需要對舊的規(guī)范進行更新優(yōu)化，不好的、過時的規(guī)范需要及時同步歸納，并及時通知到項目相關人員。要不然，陳舊的規(guī)范起不到幫助設計工作的開展，反而是一種負面影響。


錯誤五：規(guī)范沒有執(zhí)行力

&amp;lt;img src="<a href="https://pic4.zhimg.com/v2-5ce421741daa01bd4a78df8acd49acbf_b.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic4.zhimg.com/v2-5ce421741daa01bd4a78df8acd49acbf_b.jpg</a>" data-rawwidth="800" data-rawheight="638" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic4.zhimg.com/v2-5ce421741daa01bd4a78df8acd49acbf_r.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic4.zhimg.com/v2-5ce421741daa01bd4a78df8acd49acbf_r.jpg</a>"&amp;gt;


有兩種規(guī)范是缺乏執(zhí)行力的：

第一、規(guī)范內(nèi)容不具體，缺少對核心模塊的細節(jié)說明。


第二、規(guī)范太全面死板太臃腫，無從看起，對后續(xù)設計有束縛。


三、設計規(guī)范怎么做？

◆ ◆ ◆



設計規(guī)范的模塊分類有很多，會讓新人感到無從下手，怎么樣梳理才更能科學易用？以下六個維度可以作為參考。


1、信息系統(tǒng)：字體選擇、顏色、層級區(qū)分

&amp;lt;img src="<a href="https://pic3.zhimg.com/v2-3908b33d844df4ca9d393f197eadce2a_b.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic3.zhimg.com/v2-3908b33d844df4ca9d393f197eadce2a_b.jpg</a>" data-rawwidth="800" data-rawheight="489" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic3.zhimg.com/v2-3908b33d844df4ca9d393f197eadce2a_r.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic3.zhimg.com/v2-3908b33d844df4ca9d393f197eadce2a_r.jpg</a>"&amp;gt;


產(chǎn)品中的字號應該有一個全局的規(guī)劃，在同一個界面內(nèi)，盡量少用太多太接近的字號。如果你對全局的字號沒把握，不妨參考一下上圖的字號分布。

&amp;lt;img src="<a href="https://pic3.zhimg.com/v2-38f9ed51edbfeb03b71ad0b112b7ea06_b.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic3.zhimg.com/v2-38f9ed51edbfeb03b71ad0b112b7ea06_b.jpg</a>" data-rawwidth="800" data-rawheight="562" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic3.zhimg.com/v2-38f9ed51edbfeb03b71ad0b112b7ea06_r.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic3.zhimg.com/v2-38f9ed51edbfeb03b71ad0b112b7ea06_r.jpg</a>"&amp;gt;


如上圖所示，「L」和 「XXL」用了兩個很相似的顏色#666666和#6e6e6e，這兩個顏色肉眼難以區(qū)分，在同一層級去做字體顏色區(qū)分是沒必要的。同一組中的內(nèi)容屬于同一層級，從信息層級來講應該要用同一種顏色，表示是同一個層級。


產(chǎn)品文字中一般會有一級標題、二級標題、一級正文、二級正文、提示文字、輔助文字等，為了區(qū)分層級便于瀏覽，通常會根據(jù)產(chǎn)品需要把字體顏色深淺分成3到5個層級，常見的有#333333、#666666、#999999這個組合，這個組合的層級區(qū)分比較分明，適應性比較廣，因此有一定的參考價值。

&amp;lt;img src="<a href="https://pic2.zhimg.com/v2-4d4af5be2dff3017dd4d53c6251d108d_b.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic2.zhimg.com/v2-4d4af5be2dff3017dd4d53c6251d108d_b.jpg</a>" data-rawwidth="800" data-rawheight="576" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic2.zhimg.com/v2-4d4af5be2dff3017dd4d53c6251d108d_r.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic2.zhimg.com/v2-4d4af5be2dff3017dd4d53c6251d108d_r.jpg</a>"&amp;gt;


從技術實現(xiàn)層面來講，對于字體的選擇，產(chǎn)品設計和推廣設計有較大的區(qū)別。


推廣設計的風格多種多樣，需要根據(jù)需求選擇字體來營造氛圍，推廣設計的字體往往是做在圖片上，不需要考慮用戶的設備中有沒有包含該字體。


產(chǎn)品設計的字體，很少會做在圖上，大多數(shù)字體由前端工程師來實現(xiàn)，設計師一般會選擇用戶設備里自帶的字體來進行設計。


另外，從視覺層面來講，文字的層級一般用字號去區(qū)分，如果既用字號去區(qū)分，又用不同字體去區(qū)分信息，會顯得凌亂缺乏美感，因此字體的數(shù)量應做減法，能用2種就不要用3種，能用1種就不要用2種。


2、控件系統(tǒng)：按鈕的樣式統(tǒng)一

&amp;lt;img src="<a href="https://pic3.zhimg.com/v2-99f10dc4aff25be681f90e9285510cda_b.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic3.zhimg.com/v2-99f10dc4aff25be681f90e9285510cda_b.jpg</a>" data-rawwidth="800" data-rawheight="530" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic3.zhimg.com/v2-99f10dc4aff25be681f90e9285510cda_r.jpg" data-editable="true" data-title="zhimg.com 的頁面">https://pic3.zhimg.com/v2-99f10dc4aff25be681f90e9285510cda_r.jpg</a>"&amp;gt;


在產(chǎn)品中按鈕控件的復用度是很高的，同樣的一個確定按鈕也會根據(jù)頁面環(huán)境不同來設定不同寬高尺寸。


需要注意的是，即使按鈕寬高不同，按鈕樣式也需要統(tǒng)一寬高比例、描邊、直角、圓角、色值、文字區(qū)域、字體、字間距等，以保證按鈕樣式的統(tǒng)一。另外，在一般情況下，按鈕會有四種鼠標狀態(tài)。不同顏色的按鈕之間，相同的鼠標狀態(tài)也需統(tǒng)一視覺效果。


還有布局系統(tǒng)、配色系統(tǒng)、品牌系統(tǒng)等完整設計規(guī)范要點，可以關注我的微信公眾號【EG365可視化】查看全文，完整資料關注公眾號后回復“網(wǎng)易”拿到。


http://weixin.qq.com/r/0kQSCsPEL55QrYdp9xHA (二維碼自動識別)