起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計沉思錄 | 簡單實用的運營設計效率提升小技巧
編輯導讀：重復性的出圖工作占據了設計師的大量時間，我們可以通過規范化設計、可量化組件來提升工作效率。本文作者從這兩個方面出發，分別展開了詳細的梳理說明，希望對你有所幫助。
01 前言
疫情當下，副業一詞，再一次深入所有人的心底。58同城兼職業務也進入了產品成長期。作為一名運營設計師，在工作中經常會遇到以下問題：
- 運營需求比較集中，產品項目周期比較短，設計時間不充足。
- 不同運營活動，產品的運營目標也不盡相同。
- 設計、研發對接成本高，1位設計師需要對接多個研發，并且輸出/溝通所需的工作量較高。
如何能在保證品質的前提下，同時減少重復性的設計工作，快速出圖？這是我總結出來的一些提升設計效率的小技巧希望對大家有所幫助。
02 規范化設計，提升設計品質
規范可以讓我們的設計具有統一性，界面視覺更美觀。規范由設計升華而來，產品有什么樣的視覺呈現和元素定義，都有可遵循的標準，保證日后的迭代可以延續產品所傳遞的思想跟價值，最大限度保證了產品的一致性。
1. 建立尺寸規范，方便協同合作
每個人做設計都會有自己常用的設計圖尺寸，很多人以375px（@1x）為設計稿，也有很多人使用750px（@2x）或720px（@2x）的尺寸。設計之初，確定好固定的頁面尺寸，也可以避免多人合作輸出不一致的麻煩。
2. 字號2進制規范
在界面設計中，文字字號的大小決定了信息的層次和權重。整齊而又層次分明的不同字號大小的排列，會讓整體的設計變得更加清晰有序。
在移動端，不管是 UI 的尺寸還是間距，都應該為4的倍數。因此，我們規定在移動端，字號也是以2為基本進制單位，將字號大小從最小的20px以4的倍數延續到40px。
根據定下的字號，我們將兼職運營模版內部的信息分為6個層級，其中最高的為重要金額、數字的顯示，其字號區間為60~110px（在2x圖設計模式下），最低為輔助說明信息，其字號為20px。具體的建議使用方式如圖：
3. 控制首屏高度，展示完整信息
在設計移動端的專題頁面時，一定要注意首屏線的設置。常規的運營頭部 一般高度都定在600px-750px左右，兼職運營模版根據埋點測試，發現短一點的運營頭圖可以展示更多的底部內容。
將頭圖運營位的高度從之前的600px改成了460px。頭部高度縮短，從而用戶也可以在首屏看到更多信息，引導用戶有興趣向下滑動，用戶點擊率也隨之升高。
4. 模塊間距有規律，元素間距不隨意
品牌設計師或者運營設計師也會用到縱向網格系統，而到移動端運營設計時候，按鈕大小、行間距、元素間距就更需要有恰當的規律和規范了。間距包括頁邊距、模塊與模塊之間的間距，這類全局的間距大小一定要一致。頁邊距大小一般是20、24、30居多，這里兼職運營模版我們使用了30px頁邊距。
模塊與模塊之間的間距相對就復雜一點。定之前確定好模塊之間的分割方式，是用線、面、還是留白。運用接近原理的反面，通過留白代替線框，排列在彼此之間的鄰近元素被認為比那些放置得更遠的元素更相關。
這樣，不同的元素主要被看作是一個組，而不是單個的元素。在設計中，我們也要不被潮流所淘汰。通過無邊化設計，留白設計，來突出信息內容和模塊間的區別。
5. 創建有效的按鈕
按鈕在屏幕的物理尺寸下大于一定面積，防止誤觸的發生，48像素是個安全的界限。按鈕的大小也可以設定一定的規律，為以后的設計做復用準備。
我們將按鈕的大小、色值、圓角以及默認、點擊、置灰狀態進行整理，通過調整色板，可以非常方便的對組件風格進行更換，簡單調整幾個參數即可完成視覺的全面換新，使組件庫能夠更加靈活的適配不同運營專題的視覺風格。
03 可量化組件，提升設計價值
組件是通過對功能及視覺表達中元素的拆解、歸納、重組，并基于可被復用的目的，形成的規范化模塊。它就像組成完整框架的單元體（比如按鈕、導航欄、tab欄等），具有標準規范和可復用場景的基本模塊。
組件化的設計優勢也是顯而易見的：
- 統一性：整個產品不同模塊的業務按照統一規范使用，提升整個產品的視覺交互統一性，減少開發樣式，提升開發效率。避免設計師創造新的組件控件樣式。
- 高效性：設計師和產品經理通過拖動組件搭建界面，節約時間，提升工作效率?？蓪⒏鄷r間放在流程體驗和設計推動上。
- 延續性：通過組件規范，在以后更新中可以連續迭代，避免斷層；團隊即使有成員離開或者加入，通過設計規范和組件庫可以快速的接手和進行正常工作。
在兼職的設計實踐中，我們將精選的特殊的任務進行包裝，最終以banner形式展現，并添加微動效增加頁面趣味性， 更能引起用戶的關注度。并強化信息重點，引導用戶點擊參與。
相同的板塊運用到不同專題頁面當中，只需要更改其表現形式，就可以完成一個新的視覺設計稿。并且在視覺上更具有統一性，避免樣式多給用戶帶來認知障礙。
另外在兼職日常運營中，每次運營活動都會推出一些精選任務，我們以卡片形式展現。這里我們建立了大量且多樣化的組件內容，以便可復用在更多的場景，通過對功能及視覺元素的拆分、歸納、重組。
所有的組件產品同學都通過更改文字內容，色值等滿足新的產品需求，可以大大提高設計跟產品同學的工作效率。
1. 便于團隊協作（設計師與設計師）
在多個設計師同步進行一個項目的時候，規范化的組件設計能保持設計結果的統一性，避免出現多人多風格的現象。
如不同設計師進行協作設計時，由于設計習慣不同，設置了不同的圓角，即加大后期的溝通成本，又要花更多時間去修改。若使用同一個組件，同類型問題就不會出現，后期修改組件也更加容易。
2. 提高協同效率，量化設計價值
組件化設計不僅方便設計師更高效的制作頁面，同時也能提高開發者的工作效率。既可準確定位又方便后期的維護和修改，在發現問題時能快速鎖定錯誤發生的位置。同時，開發者之間也能通過組件進行協作與同步，減少多余的溝通成本，提高了工作效率。
從前的兼職運營上線周期，平均一個人一個月才可以上線一個運營活動。開發運營組件模版之后，我們可以做到一個人一個月上線3-4個運營活動。做到量化運營設計的價值，把頁面拆分不同的模塊，用單變量對照實驗便可以不斷改造提升運營設計方案，提升運營設計價值。
04 結語
運營設計師需要協同產品同學，結合到用戶場景、用戶體驗、用戶理解上。規范的制定和組件庫的搭建，幫助我們節省因重復設計產生的工作時間，讓我們更專注于用戶體驗和對產品的創新。希望這篇文章能為大家帶來一些啟發和思路。
作者：嚴琳，視覺設計師
本文來源于人人都是產品經理合作媒體@58用戶體驗設計中心（微信公眾號@58UXD），作者@嚴琳
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
