UE交互設(shè)計(jì)師應(yīng)該掌握的規(guī)范大全

提起設(shè)計(jì)規(guī)范，每一個(gè)大公司的UI設(shè)計(jì)師都有著自己的理解，但是剛?cè)肼毜男率峙笥褌兛赡苓€不了解UI設(shè)計(jì)有哪些規(guī)范。今天AAA教育的小編就來為大家打出這篇文章，一名UI新手設(shè)計(jì)師應(yīng)該如何建立自己的UI元件庫。


Step 1： 建立設(shè)計(jì)資源庫

打開設(shè)計(jì)系統(tǒng)平臺(tái)，點(diǎn)擊新建資源庫，這里有自定義資源庫和示例庫可供選擇。選擇完畢后，設(shè)置資源庫名稱，點(diǎn)擊創(chuàng)建。

Step 2 : 確定資源庫的主要模塊

進(jìn)入資源庫以后，根據(jù)自己的產(chǎn)品主要界面設(shè)計(jì)確定資源庫的主要板塊。常見的顏色，字體，Logo,組件和度量都可以進(jìn)行添加規(guī)范，除此之外，這個(gè)平臺(tái)還提供了圖片，陰影等共9種設(shè)計(jì)資源。

Step 3：建立基礎(chǔ)的資源規(guī)范

通過設(shè)計(jì)平臺(tái)中的“+”按鈕，可根據(jù)提示進(jìn)行資源的添加。對于習(xí)慣使用Sketch的設(shè)計(jì)師來說，可以先在Sketch中對資源進(jìn)行編輯，然后在打開Mockplus X 插件點(diǎn)擊添加資源，即可與Mockplus設(shè)計(jì)平臺(tái)的資源庫實(shí)時(shí)同步。其他的資源建立方式相同，就不再一一贅述了。

Step 4： 共享設(shè)計(jì)資源庫

在完成設(shè)計(jì)資源庫后，可以打開分享功能與小伙伴共享成果；或者分享給有經(jīng)驗(yàn)的設(shè)計(jì)師聽取一些意見。點(diǎn)擊設(shè)計(jì)平臺(tái)右上角的分享按鈕，設(shè)置分享密碼后，勾選“啟用此分享”；然后復(fù)制分享鏈接發(fā)送給你的小伙伴，輸入查看密碼即可觀看你的設(shè)計(jì)規(guī)范了。

Step 5 ： 導(dǎo)出樣式代碼（讓開發(fā)更懂你的設(shè)計(jì)）

點(diǎn)擊設(shè)計(jì)平臺(tái)的右上角箭頭按鈕，即可導(dǎo)出樣式代碼，目前該平臺(tái)支持CSS, SCSS及LESS三種代碼樣式的導(dǎo)出。

Step 6: 導(dǎo)出PDF/圖片

在完成上述操作及設(shè)計(jì)資源的上傳后，是時(shí)候展示你的成果了。點(diǎn)擊“導(dǎo)出圖片”或“PDF”，就可以隨時(shí)隨地共享你的設(shè)計(jì)規(guī)范了。

 

總結(jié)

隨著設(shè)計(jì)行業(yè)的不斷發(fā)展，設(shè)計(jì)規(guī)范扮演著越來越重要的角色，甚至成為UI設(shè)計(jì)師必須掌握的技能之一。作為一名UI設(shè)計(jì)新手，如何才能掌握設(shè)計(jì)規(guī)范？你必須了解什么是設(shè)計(jì)規(guī)范，明白設(shè)計(jì)規(guī)范的重要性以及如何構(gòu)建它。掌握了這三件事，你就掌握了設(shè)計(jì)規(guī)范！