編輯導(dǎo)讀：重復(fù)性的出圖工作占據(jù)了設(shè)計(jì)師的大量時間，我們可以通過規(guī)范化設(shè)計(jì)、可量化組件來提升工作效率。本文作者從這兩個方面出發(fā)，分別展開了詳細(xì)的梳理說明，希望對你有所幫助。

01 前言

疫情當(dāng)下，副業(yè)一詞，再一次深入所有人的心底。58同城兼職業(yè)務(wù)也進(jìn)入了產(chǎn)品成長期。作為一名運(yùn)營設(shè)計(jì)師，在工作中經(jīng)常會遇到以下問題：

1. 運(yùn)營需求比較集中，產(chǎn)品項(xiàng)目周期比較短，設(shè)計(jì)時間不充足。
2. 不同運(yùn)營活動，產(chǎn)品的運(yùn)營目標(biāo)也不盡相同。
3. 設(shè)計(jì)、研發(fā)對接成本高，1位設(shè)計(jì)師需要對接多個研發(fā)，并且輸出/溝通所需的工作量較高。

如何能在保證品質(zhì)的前提下，同時減少重復(fù)性的設(shè)計(jì)工作，快速出圖？這是我總結(jié)出來的一些提升設(shè)計(jì)效率的小技巧希望對大家有所幫助。

02 規(guī)范化設(shè)計(jì)，提升設(shè)計(jì)品質(zhì)

規(guī)范可以讓我們的設(shè)計(jì)具有統(tǒng)一性，界面視覺更美觀。規(guī)范由設(shè)計(jì)升華而來，產(chǎn)品有什么樣的視覺呈現(xiàn)和元素定義，都有可遵循的標(biāo)準(zhǔn)，保證日后的迭代可以延續(xù)產(chǎn)品所傳遞的思想跟價值，最大限度保證了產(chǎn)品的一致性。

1. 建立尺寸規(guī)范，方便協(xié)同合作

每個人做設(shè)計(jì)都會有自己常用的設(shè)計(jì)圖尺寸，很多人以375px（@1x）為設(shè)計(jì)稿，也有很多人使用750px（@2x）或720px（@2x）的尺寸。設(shè)計(jì)之初，確定好固定的頁面尺寸，也可以避免多人合作輸出不一致的麻煩。

2. 字號2進(jìn)制規(guī)范

在界面設(shè)計(jì)中，文字字號的大小決定了信息的層次和權(quán)重。整齊而又層次分明的不同字號大小的排列，會讓整體的設(shè)計(jì)變得更加清晰有序。

在移動端，不管是 UI 的尺寸還是間距，都應(yīng)該為4的倍數(shù)。因此，我們規(guī)定在移動端，字號也是以2為基本進(jìn)制單位，將字號大小從最小的20px以4的倍數(shù)延續(xù)到40px。

根據(jù)定下的字號，我們將兼職運(yùn)營模版內(nèi)部的信息分為6個層級，其中最高的為重要金額、數(shù)字的顯示，其字號區(qū)間為60~110px（在2x圖設(shè)計(jì)模式下），最低為輔助說明信息，其字號為20px。具體的建議使用方式如圖：

3. 控制首屏高度，展示完整信息

在設(shè)計(jì)移動端的專題頁面時，一定要注意首屏線的設(shè)置。常規(guī)的運(yùn)營頭部 一般高度都定在600px-750px左右，兼職運(yùn)營模版根據(jù)埋點(diǎn)測試，發(fā)現(xiàn)短一點(diǎn)的運(yùn)營頭圖可以展示更多的底部內(nèi)容。

將頭圖運(yùn)營位的高度從之前的600px改成了460px。頭部高度縮短，從而用戶也可以在首屏看到更多信息，引導(dǎo)用戶有興趣向下滑動，用戶點(diǎn)擊率也隨之升高。

4. 模塊間距有規(guī)律，元素間距不隨意

品牌設(shè)計(jì)師或者運(yùn)營設(shè)計(jì)師也會用到縱向網(wǎng)格系統(tǒng)，而到移動端運(yùn)營設(shè)計(jì)時候，按鈕大小、行間距、元素間距就更需要有恰當(dāng)?shù)囊?guī)律和規(guī)范了。間距包括頁邊距、模塊與模塊之間的間距，這類全局的間距大小一定要一致。頁邊距大小一般是20、24、30居多，這里兼職運(yùn)營模版我們使用了30px頁邊距。

模塊與模塊之間的間距相對就復(fù)雜一點(diǎn)。定之前確定好模塊之間的分割方式，是用線、面、還是留白。運(yùn)用接近原理的反面，通過留白代替線框，排列在彼此之間的鄰近元素被認(rèn)為比那些放置得更遠(yuǎn)的元素更相關(guān)。

這樣，不同的元素主要被看作是一個組，而不是單個的元素。在設(shè)計(jì)中，我們也要不被潮流所淘汰。通過無邊化設(shè)計(jì)，留白設(shè)計(jì)，來突出信息內(nèi)容和模塊間的區(qū)別。

5. 創(chuàng)建有效的按鈕

按鈕在屏幕的物理尺寸下大于一定面積，防止誤觸的發(fā)生，48像素是個安全的界限。按鈕的大小也可以設(shè)定一定的規(guī)律，為以后的設(shè)計(jì)做復(fù)用準(zhǔn)備。

我們將按鈕的大小、色值、圓角以及默認(rèn)、點(diǎn)擊、置灰狀態(tài)進(jìn)行整理，通過調(diào)整色板，可以非常方便的對組件風(fēng)格進(jìn)行更換，簡單調(diào)整幾個參數(shù)即可完成視覺的全面換新，使組件庫能夠更加靈活的適配不同運(yùn)營專題的視覺風(fēng)格。

03 可量化組件，提升設(shè)計(jì)價值

組件是通過對功能及視覺表達(dá)中元素的拆解、歸納、重組，并基于可被復(fù)用的目的，形成的規(guī)范化模塊。它就像組成完整框架的單元體（比如按鈕、導(dǎo)航欄、tab欄等），具有標(biāo)準(zhǔn)規(guī)范和可復(fù)用場景的基本模塊。

組件化的設(shè)計(jì)優(yōu)勢也是顯而易見的：

• 統(tǒng)一性：整個產(chǎn)品不同模塊的業(yè)務(wù)按照統(tǒng)一規(guī)范使用，提升整個產(chǎn)品的視覺交互統(tǒng)一性，減少開發(fā)樣式，提升開發(fā)效率。避免設(shè)計(jì)師創(chuàng)造新的組件控件樣式。
• 高效性：設(shè)計(jì)師和產(chǎn)品經(jīng)理通過拖動組件搭建界面，節(jié)約時間，提升工作效率。可將更多時間放在流程體驗(yàn)和設(shè)計(jì)推動上。
• 延續(xù)性：通過組件規(guī)范，在以后更新中可以連續(xù)迭代，避免斷層；團(tuán)隊(duì)即使有成員離開或者加入，通過設(shè)計(jì)規(guī)范和組件庫可以快速的接手和進(jìn)行正常工作。

在兼職的設(shè)計(jì)實(shí)踐中，我們將精選的特殊的任務(wù)進(jìn)行包裝，最終以banner形式展現(xiàn)，并添加微動效增加頁面趣味性， 更能引起用戶的關(guān)注度。并強(qiáng)化信息重點(diǎn)，引導(dǎo)用戶點(diǎn)擊參與。

相同的板塊運(yùn)用到不同專題頁面當(dāng)中，只需要更改其表現(xiàn)形式，就可以完成一個新的視覺設(shè)計(jì)稿。并且在視覺上更具有統(tǒng)一性，避免樣式多給用戶帶來認(rèn)知障礙。

另外在兼職日常運(yùn)營中，每次運(yùn)營活動都會推出一些精選任務(wù)，我們以卡片形式展現(xiàn)。這里我們建立了大量且多樣化的組件內(nèi)容，以便可復(fù)用在更多的場景，通過對功能及視覺元素的拆分、歸納、重組。

所有的組件產(chǎn)品同學(xué)都通過更改文字內(nèi)容，色值等滿足新的產(chǎn)品需求，可以大大提高設(shè)計(jì)跟產(chǎn)品同學(xué)的工作效率。

1. 便于團(tuán)隊(duì)協(xié)作（設(shè)計(jì)師與設(shè)計(jì)師）

在多個設(shè)計(jì)師同步進(jìn)行一個項(xiàng)目的時候，規(guī)范化的組件設(shè)計(jì)能保持設(shè)計(jì)結(jié)果的統(tǒng)一性，避免出現(xiàn)多人多風(fēng)格的現(xiàn)象。

如不同設(shè)計(jì)師進(jìn)行協(xié)作設(shè)計(jì)時，由于設(shè)計(jì)習(xí)慣不同，設(shè)置了不同的圓角，即加大后期的溝通成本，又要花更多時間去修改。若使用同一個組件，同類型問題就不會出現(xiàn)，后期修改組件也更加容易。

2. 提高協(xié)同效率，量化設(shè)計(jì)價值

組件化設(shè)計(jì)不僅方便設(shè)計(jì)師更高效的制作頁面，同時也能提高開發(fā)者的工作效率。既可準(zhǔn)確定位又方便后期的維護(hù)和修改，在發(fā)現(xiàn)問題時能快速鎖定錯誤發(fā)生的位置。同時，開發(fā)者之間也能通過組件進(jìn)行協(xié)作與同步，減少多余的溝通成本，提高了工作效率。

從前的兼職運(yùn)營上線周期，平均一個人一個月才可以上線一個運(yùn)營活動。開發(fā)運(yùn)營組件模版之后，我們可以做到一個人一個月上線3-4個運(yùn)營活動。做到量化運(yùn)營設(shè)計(jì)的價值，把頁面拆分不同的模塊，用單變量對照實(shí)驗(yàn)便可以不斷改造提升運(yùn)營設(shè)計(jì)方案，提升運(yùn)營設(shè)計(jì)價值。

04 結(jié)語

運(yùn)營設(shè)計(jì)師需要協(xié)同產(chǎn)品同學(xué)，結(jié)合到用戶場景、用戶體驗(yàn)、用戶理解上。規(guī)范的制定和組件庫的搭建，幫助我們節(jié)省因重復(fù)設(shè)計(jì)產(chǎn)生的工作時間，讓我們更專注于用戶體驗(yàn)和對產(chǎn)品的創(chuàng)新。希望這篇文章能為大家?guī)硪恍﹩l(fā)和思路。

作者：嚴(yán)琳，視覺設(shè)計(jì)師

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心（微信公眾號@58UXD），作者@嚴(yán)琳

題圖來自Unsplash，基于CC0協(xié)議