干貨篇，最佳UI設(shè)計(jì)規(guī)范10例

時(shí)間：2023-09-10 19:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-10 19:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

干貨篇，最佳UI設(shè)計(jì)規(guī)范10例：不得不承認(rèn)，整理設(shè)計(jì)規(guī)范是UI設(shè)計(jì)師設(shè)計(jì)能力的一種體現(xiàn)，尤其是便隨項(xiàng)目越來(lái)越多的情況下，對(duì)設(shè)計(jì)規(guī)范的把控力，成為了設(shè)計(jì)師職業(yè)素養(yǎng)的一種體現(xiàn)。

無(wú)論還是處于自己設(shè)計(jì)創(chuàng)作的階段，還是和程序員溝通推動(dòng)產(chǎn)品開(kāi)發(fā)的階段，設(shè)計(jì)規(guī)范完善與否，對(duì)產(chǎn)品的一致性和用戶體驗(yàn)有著近乎于決定性的關(guān)鍵作用。在UI設(shè)計(jì)的過(guò)程中，設(shè)計(jì)規(guī)范是一個(gè)關(guān)鍵步驟。

整理設(shè)計(jì)規(guī)范很苦惱？?jī)?yōu)秀全面的設(shè)計(jì)規(guī)范是什么樣的？如何通過(guò)設(shè)計(jì)規(guī)范提高品牌一致性和推動(dòng)開(kāi)發(fā)高度還原設(shè)計(jì)？我們不妨先來(lái)看看優(yōu)秀的設(shè)計(jì)規(guī)范到底是什么樣子。這里有我整理的10個(gè)設(shè)計(jì)和質(zhì)量俱佳的設(shè)計(jì)規(guī)范模板，它們給我?guī)?lái)了很多啟發(fā)，也希望對(duì)你有所幫助。

設(shè)計(jì)規(guī)范的組成

制定良好設(shè)計(jì)規(guī)范的第一步就是合理歸類。你需要先明確你需要整理的內(nèi)容有哪些，這些內(nèi)容的分類又該怎樣呈現(xiàn)。一般來(lái)講，UI設(shè)計(jì)規(guī)范有一下幾大分類：Logo、標(biāo)準(zhǔn)色、字號(hào)、段落設(shè)置、圖標(biāo)、圖片、間距、圓角值、大小、陰影、組件等。

設(shè)計(jì)規(guī)范10例 （大圖流量君謹(jǐn)慎，文末有打包資源，直接下載，我很勤快了）

1.







2.







3.







4.







5.







6.







7.







8.







9.







10.







制作設(shè)計(jì)規(guī)范

還在設(shè)計(jì)規(guī)范文檔？也是很多人還在做著這樣費(fèi)力不討好的事。相信看了上面的10個(gè)案例，你會(huì)發(fā)現(xiàn)，咦？還像它們都不是手寫出來(lái)的呢？

的確，時(shí)代進(jìn)步，高效的設(shè)計(jì)規(guī)范制作工具也頻頻出爐，比如，摩客設(shè)計(jì)系統(tǒng)。（本人親用，功能尚佳）

1，摹客系統(tǒng)提供設(shè)計(jì)規(guī)范分類大綱

你可以建立多個(gè)庫(kù)、分類和子分類來(lái)進(jìn)行管理，每個(gè)庫(kù)里包含2大類資源分類，第一類是文件類資源，其包含Logo、圖片、圖標(biāo)、組件、字體；第二類是編輯類資源，包括顏色、度量、標(biāo)準(zhǔn)字、陰影?；緷M足了設(shè)計(jì)師的多種設(shè)計(jì)類型需求。

設(shè)計(jì)規(guī)范整理和制作過(guò)程中，只需要在對(duì)應(yīng)的分來(lái)下，自定義添加對(duì)應(yīng)的內(nèi)容就可以了。

2，對(duì)接設(shè)計(jì)工具Sketch和Mockplus

規(guī)范不等同于標(biāo)注，卻也有一種“限制感”。在這種規(guī)范的“束縛”下，優(yōu)秀的設(shè)計(jì)師總是可以最大限度的利用可擴(kuò)展性，做出優(yōu)秀的設(shè)計(jì)方案。

但規(guī)范還是用來(lái)使用的，是一種有效的方法來(lái)為你的設(shè)計(jì)服務(wù)。因此規(guī)范本身應(yīng)該是和工具相對(duì)接的。做出來(lái)的規(guī)范如何投入使用，如何才能服務(wù)于設(shè)計(jì)，服務(wù)于產(chǎn)品，完成產(chǎn)品體驗(yàn)的不斷優(yōu)化，這才是關(guān)鍵點(diǎn)。

在摹客設(shè)計(jì)系統(tǒng)中，對(duì)接的設(shè)計(jì)工具是Mockplus和Sketch。Mockplus是更快更簡(jiǎn)單的原型設(shè)計(jì)工具，而Sketch是一個(gè)高效的矢量圖工具。在摹客設(shè)計(jì)系統(tǒng)中，可以實(shí)現(xiàn)設(shè)計(jì)資源的應(yīng)用、上傳和推送。也就是說(shuō)，你可以在Mockplus和Sketch中制作和上傳設(shè)計(jì)資源，再讓整個(gè)團(tuán)隊(duì)分享和利用這些通用資源進(jìn)行快速設(shè)計(jì)。而應(yīng)用決策也很簡(jiǎn)潔，只需鼠標(biāo)拖拽或者點(diǎn)擊即可應(yīng)用。這對(duì)于快速設(shè)計(jì)的需求，是極有利的。

3. 輸出和優(yōu)化

一個(gè)規(guī)范可能不僅僅是用于設(shè)計(jì)師之間，還需要對(duì)接開(kāi)發(fā)，交付給你的老板以及第三方工作人員。因此規(guī)范的輸出也是至關(guān)重要的。在摹客設(shè)計(jì)系統(tǒng)中，針對(duì)團(tuán)隊(duì)內(nèi)成員，你可以一鍵分享設(shè)計(jì)規(guī)范，對(duì)于開(kāi)發(fā)人員，你可以導(dǎo)出CSS、SCSS、LESS，應(yīng)用到前端開(kāi)發(fā)。當(dāng)然，你還可以導(dǎo)出如上面分享的各類版式的設(shè)計(jì)規(guī)范圖（UI Style Guide），用于更多的交付對(duì)象。

更多呢，還需要你么自己去親自嘗試，時(shí)間出真知。希望今天分享的設(shè)計(jì)規(guī)范圖對(duì)大家有所啟發(fā)啦。

對(duì)啦，這里可以下載更多的設(shè)計(jì)規(guī)范圖哦，我都打包好了。

下載摹客設(shè)計(jì)系統(tǒng)。

下載Sketch插件。

PS：據(jù)悉摹客設(shè)計(jì)系統(tǒng)上新正在活動(dòng)進(jìn)行中。有三大福利享不停！

1，免費(fèi)贈(zèng)送摹客（Mockplus+設(shè)計(jì)系統(tǒng)）專業(yè)版半個(gè)月！

2，免費(fèi)幸運(yùn)抽獎(jiǎng)，Airpods、Wacom手繪板、小米手環(huán)等你拿！

3，參加設(shè)計(jì)大賽，曬設(shè)計(jì)規(guī)范，贏iPad Pro！

領(lǐng)取福利快速通道在這里哦