在公司做UI設計，如果設計人員少，設計師不僅需要接產品需求，也有源源不斷的的運營需求。如何進行運營UI設計，尤其是H5設計，需要從哪個方面著手？你會不會和我一樣，在設計過程中，剛接觸一個設計類型無從下手？你是否在查找資料過程中，是否看到別人的分享時，收獲頗多？會不會仍覺得不足？因為那些作者都是從某個角度切入闡述的，知識點太分散不夠成體系？
本文從運營活動概況、設計流程、總結與沉淀等三個方面進行闡述。（最近在學習腦圖，借之前做運營H5設計的經驗，來嘗試用腦圖的形式來沉淀自己的知識體系）
一、運營H5概況：
1.1APP產品流程（運營設計的相關背景）
先說說產品的流程，移動產品從出生到和用戶見面大多都會經歷這么幾個階段：
在功能定位——交互流程（Ui）——視覺界面（GUI）——開發和測試，這幾個步驟，基本實現了產品從0到1。如果要公司戰略中考慮將上線的APP被更多的用戶見到、使用到，那么就需要運營登上歷史舞臺了；
1.2UI設計分工／職責
公司如果規模比較大，產品需求和運營需求都會分配到對應的產品UI設計師或者運營設計師，他們負責那些工作呢？
產品設計：界面布局的合理性以及如何引導用戶完成操作等流程化設計；運營設計：活動專題、焦點圖（banner）等更加偏向于視覺化和營銷類的設計。而在運營H5頁面設計中，它需要考慮的是這兩個的集合，一要兼顧視覺化的、創意的、吸引人的，也要兼顧能合理布局頁面信息，引導用戶進行操作（購買／收藏等行為）。
1.3運營H5活動的功能目標
正如《交互設計精髓》這本書中開篇提到的——以目標為導向進行設計，運營活動也不例外，運營需求的功能目標總結為四個類型：01活動運營型：游戲／邀請函／賀卡／測試；02品牌宣傳型：公司／產品的微官網；03產品介紹型：提升轉化率；04總結報告型：增加用戶粘性；
1.4運營H5活動表現形式
目前比較常見的有四種類型：01簡單圖文；02紅包／送券／賀卡／邀請函；03做任務：問答／評分／測試；04游戲；
1.5公司運營情況
由于每個公司針對的用戶群不一樣，因此在具體的運營需求，其需求的功能目標也會不一。如媽咪知道，運營需求每個月都會有，尤其是在產品發布新功能、節日（春節／端午／中秋等）、重大活動（公司周年／問診節等）這幾個時期提需求，具體的功能目標如下：
二、運營H5設計流程
在了解了運營H5活動的一個基本概況后，能幫助我們在做設計的時候，以目標為導向進行設計，當然落到實際情況，接到運營H5需求，也還是需要考量視覺層面的東西。
2.1日常準備
好設計來自有準備，在這里我做的準備如下：
2.1.1觀察生活，記錄靈感。線下：商場的櫥窗設計，廣告招貼畫，地鐵的廣告貼；線上：競品，電商等app；與美術有關的：插畫，漫畫等，用心去觀察，隨時記錄自己當時的靈感，都是以后設計中的財富。
2.1.2收集和整理。每逢節假日，淘寶，京東，外賣的app的營宣活動特別多，及時參與，及時截圖保存，競品的相關醫學類的活動也是及時參與，了解其的玩法和現有的設計手法。靈感庫網上還有推薦Dribble、Behance、pinterest、花瓣、Google的Panda插件)等，個人的收藏習慣中比較偏好花瓣，只要你有網絡，手機／公司電腦／家里電腦都可以隨時看。
tip01:對于建立畫板名稱看個人習慣，分組和命名方式完全依照自己的習慣記憶和搜索方式來定即可。tip02:需要每天刷，大量的閱覽，搜集喜歡的需要的，并隔一段時間做刪減工作，刪去覺得已經過時了的、沒用的（畢竟隨著實戰經驗和眼界的提升，有些圖看不上了嘛）。tip03:可以嘗試分析她們的優缺點，如果可以的話以郵件方式給內部組員分享。
2.1.3練習與模仿。好的效果和展現形式都可以模仿，字體變形，光影表現等，基本的技法都是可以在平時積累的。題主比較懶，這個我平時一般看到好的，會收集起來，在實踐過程中，直接復制粘貼，臨摹。
2.1.4公司資源管理策略。對于這點題主表示很有發言權，剛進到公司，我不知道自己要達到一個設計水準，也不知道同組設計師的設計水準，如果公司有共享文件，可以借熟悉公司環境的前兩天了解一下（剛入職一般不會著急給你需求，時間還比較寬裕）。題主的的做法是在share查看之前的設計，了解你要輸出的產物list，如何管理輸出物文件（命名／文件夾管理等）。獲知你大概要達到的高度，或者是否可以超越，能否有直接挪用的資源，哪種手段不太熟悉可以直接詢問同事（一般做設計的同事都比較友善的）。
準備工作大致是四個思路，基本可以為幫助你在實際項目中，幫你快速得到創作源泉和靈感，大大提高你的工作效率。
2.2真正實戰
2.2.1前期準備
這個階段主要包含這四個方面：溝通需求／分析定位／風格確定／視覺推導。
已之前的媽咪問診節開幕活動的需求為例來闡述。
（1）溝通需求階段（分析定位）：
做設計的話，溝通肯定是必不可少的了，這里分別涉及到了跟需求人（主要是運營策劃）／交互設計師／前端設計師／領導之間的溝通，題主剛接手運營H5設計欠缺這塊經驗，有一個設計反復被要求改稿，反思了，就是因為前期溝通這一環節出了問題。可見前期溝通時多重要的事情啊，千萬不能少這一步驟。后來我是怎么完善的呢？
首先，好的習慣是，從運營策劃那拿到交互稿后，從上到下完整的先過一遍交互稿，一方面是看交互稿的內容完不完整，是不是還有些內容點忘記做了，另一方面也會咨詢一下交互設計師，有哪些地方是需要設計師特別注意的啊，有沒有什么內容是要優先做的啊等等，如果沒有特殊要求的話，我一般都是會從彈窗開始。
其次，頁面信息涉及到手機號碼／錯誤提示／日期選擇／地址輸入等內容，一方面需要和運營策劃溝通，是否需要手機驗證碼；另一方面也需要和開發溝通，詢問是否他們H5的模版（時間選擇器／地址選擇器等）如果有的話，就不必花費時間進行設計，因為開發也不會按照一個運營活動單獨寫一個實現的代碼，不過記得在tapd需求單上進行備注，以及和需求&開發同步。如果沒有，作為設計師的你那就需要考慮各種狀態的設計等。
第三，詢問彈窗的文案標題這些是否是最后確認了，以免涉及到字體變形最后發現文案要改那真是麻煩，如果拿到需求覺得標題不是特別好或者有疑問的時候，最好和運營直接溝通商量，看能不能對文案有一些修改調整，私自改動那將面對后期改動的慘劇。
第四，溝通階段的，關鍵的點在于準確了解運營活動的意圖／定位。通過運營活動傳達一種什么目的／態度，營造一種什么氣氛，好玩的，有趣的，暖心的，促銷的，還是高端大氣的。雖然現在風格可以我們自己來定，但決定權還是沒有那么大，在需求溝通階段還是最好詢問一下，以免走偏。
以上就是我的一些前期準備工作，算是溝通完了，接下來我們繼續看。
（2）風格確定階段
需要考慮到活動的受眾人群的年齡和活動主題的氣質色彩。由于運營活動主要由運營組提出，磨合多了，風格彼此了然，但是醫學小組或者其他的提出H5需求，設計師可以將各類型風格展示出來，給對方挑選一個合適的方向。
大致風格就是這么幾種。
設計經驗：01預防針：了解對方思路，大家腦海里也許已經有一個大概的風格印象。02根據活動的上線時間長短，時間，個人能力等條件來選擇；03不要被風格約束，能夠自由發揮，不要總做同一種風格，希望有所嘗試。
對接需求時，我也會和運營說一下自己的意見：不想太約束，能夠自由發揮，不想總做同一種風格，希望有所嘗試。
這一階段傳達主要目的：需求方腦海里也許已經有一個大概的樣子模型。但我們也不能夠說得太細，只是需要了解方向思路對不對就好了，一方面是因為還沒有開始執行你也沒法具體到很細致的地方，另一方面是因為，如果一開始就把整個頁面的設計全定死了，那往后如果出現突發情況或者被需求人誤以為頁面就是這樣了，后面你想靈活發揮就很難了。
（3）視覺推導階段：
通過重要的溝通階段（風格確定階段可有可無，前期可能需要，但隨著需求接的多了，對方會信任你的設計，不用每次有需要確認風格），那接下來很重要的事情就是勾畫草圖，找感覺。（運營H5活動，一般是入口和頁面構成，像我所在的公司，運營H5入口為彈窗，那彈窗的重要性可想而知，需要考究之前所說的視覺化的、創意的、吸引人的，如果有些H5活動不需要入口，那第一個頁面的視覺為先來考慮。）
第一個問題來了，在繪制草圖時如何構思？
題外話：我實習的時候，運營H5活動基本是和我坐正對面的美女設計師芳芳包攬的，但后期工作需求的調整，運營H5開始分配到了我，運營設計從0到1，起初其實很害怕，不知道接了需求如何著手開始。和小組成員請教，也沒法得到很詳實的答案，一點點積累，后來需求接的多了，突然想明白了，這不是類似于寫作文嘛，寫作文列提綱，那同樣的，接到需求后，根據活動的上線內容和要求，提取關鍵詞等頭腦方式來進行聯想，是最終畫面效果符合活動主題。
比如說節日類型的活動需求－－中秋節，她有哪些元素呢？月亮，嫦娥，兔子，桂樹，月餅等；圣誕節：圣誕樹，圣誕老師，襪子，禮棒，圣誕顏色（紅綠白）等；這些元素可能一下子考慮不全，沒關系，咱們可以上花瓣搜，關聯搜索，獲取大概等元素，然后組合繪制草圖。
在［媽咪問診節盛大開幕］活動中，我提取的關鍵詞如下：
你可能會問我，能不能在花瓣上去找出完全一模一樣的案例，能找到當然很好，但是每個公司的運營需求目標都不一樣。要找到一摸一樣的這種情況少見，不要太抱希望，有些時候，根據關鍵詞在花瓣或百度查找，找不到合適的素材，那就看丑的素材也能構思好的畫面內容的，一定要堅信自己可以搞定需求。
那第二個問題，如何做？保守的做法：一般畫2－3個草圖，可供對方選擇。和需求方溝通需要和運營說明的是，草圖是呈現一個大概的模樣，具體在電腦端設計可能有差別，如果在草圖花費太多時間，精力，可能在整個流程中不太適宜。（有時候，也會推翻，因此，讓對方提供參考圖，把握大方向，這樣可以避免電腦端快結束了還要改稿）。
通過以上就是我的一些前期準備工作，算是溝通完了，接下來我們繼續看。
2.2.2中期執行階段
（1）彈窗／第一個頁面：
進入電腦繪制階段了，是不是好開心啊。因為在上一準備階段中基本找準了需求核心，可以按照自己的設計能力來做設計了（說不定還有突破）。從第一頁開始，之前我習慣先填充畫布的顏色，定個大氛圍基調，再做主標題的效果，而且不管三七二十一，先做了字體變形再說，最后畫畫面；我知道很多人的習慣和我一樣，但需求有很多變數，比如說：
需求方突然要改標題文案怎么辦？
把字做好后發現其他的商品圖或元素怎么排都排不好看了怎么辦？
光做一個字體設計就花費了項目一大半的時間怎么辦？
所以基于種種原因的考慮（說多了都說淚），我們要學乖，調整優化自己的做圖順序。
借用婷姐說電商設計的話“先把文案先丟在畫布里，弄好畫面形象后再去做標題部分的，并且有時候標題字體需要設計一下，有時候只是需要打幾個字做個排版就好了，要看具體情況的，因為不是說做了字體變形就一定好，不做字體變形就一定不好”。
繪制彈窗之后，及時和需求方對第一個圖，以免方向走偏，走偏了之后也能及時調整，不浪費更多的時間。（確定彈窗可能需要一段時間，這期間，可以著手做別的設計需求，時間有效利用，不要干等運營的回復，當然你可以主動問。）
是不是說漏了一個配色？
我的主要依據01活動定位／目的；02產品app的品牌調性進行選擇；03數據統計等。如媽咪知道的針對用戶群，因此色彩選擇上使用活力，明艷的顏色，色調一般偏明亮調，黃色／粉色都比較吸引用戶的點擊。
（2）其他頁面設計
彈唱確定之后，繼續下一個頁面，看到紅色標識的頁面，怎么設計頁面、布局信息呢？
因為要保證一個整體的活動頁面，因此第一個要做的就是延續彈窗的視覺元素：配色、氛圍元素等，第二個是要對頁面信息進行梳理層級關系，以便用戶的視覺流線引導。
設計原則——建立有效的視覺層次（手法），對頁面內容進行組織和區分優先級。思路整理如下：
01突出－最重要的：字體更粗／大；顏色更特別；留白更多；位置更接近頁面的頂部。
02分組－類似的：成組，采用類似的顯示樣式；位置：放在一個定義明確的區域內；
03嵌套－組成部分的：隸屬／包含關系的元素，在視覺上進行嵌套。
最終頁面如下：
如果頁面大體設計完，給我們的老大和運營方看過并通過之后，下一步就是確定頁面輸出物清單。
2.2.3后期調整階段
在做運營活動時最常見的有兩種情況，一個是開發技術實現的問題；一個是文案調整更換。面對這個如何解決？首先是心態調整，平常心對待即可，因為設計過程中，中途要修改文案或臨時要修改文案都是非常普遍的事情（這個事實并不開心）。
具體調整的時候，遵循先溝通再修改／先緊急再一般的原則；
（1）先溝通再修改。其實在整個設計過程中都會涉及到溝通的問題，前面我們已經提到了，在拿到需求的前期就是有很多個溝通環節，同樣的在整個頁面設計完成后，我們需要給到自己的老大或者運營審核對不對？而通常情況下，他們都會給到一些自己的建議或看法，那么作為設計師的你肯定是要虛心聽取，也要有自己的想法了，這個時候的溝通協商就很重要了，比如哪些地方設計師是應該改的，哪些地方是可以說服運營接受的，哪些地方應該繼續完善的，所有這些都需要去溝通協商。
（2）先緊急再一般。事情分輕重緩急，修改也一樣，也分緊急和不緊急，這個時候就不一定是按照從上而下的順序來修改了，而是要有優先級，什么事情比較緊急就先做那件事情，所以這就要視具體情況而定了。
三、沉淀&總結
一次運營的結束并不是產品宣傳的終止，要想下次還能獲得好的宣傳效果就必須總結經驗。比如說工作流程，溝通需求的技巧等，好的就沉淀，不順暢的就優化。
3.1沉淀
3.1.1 效果跟蹤：比如公司的數據比較好的話，可以通過數據來觀察用戶的反饋，你都能從中獲知你的設計存在的問題。為什么這次的問診支付量。
3.1.2規范沉淀：總結制定設計規范，這樣組內其他同學或者自己下次運營設計的時候，就有很多元素可以復用的，圖片的尺寸也有統一的標準，可以大大提高效率。
3.1.3問題梳理：整個需求走下來，其實面臨了大大小小的難題。問題是怎么出現的，你是如何克服的，如何解決的，心里路程是怎樣的，都可以進行記錄。分類整理，規避問題，高效的設計。例如切圖，當視覺稿確認之后，先把有把握的設計圖進行標注，切圖，減少不必要的溝通（在與開發看來是不必要的）。
在這里，其實都是說要嚴格要求自己。有些時候，需求比較緊急，自我的設計水平沒考慮到，產品也上線了，這個時候發現設計有些漏洞，但開發說已經上線了，更換的話比較麻煩，況且你說的改動，問題不大，之類的話語。不管怎么的結果，都可以在基礎上打磨，不僅是考驗對設計的耐心，對工作的態度：無論做的好與不好，都要繼續挖掘自己的潛力。
3.2總結
（1）好的運營設計需要平時不斷的積累，優秀作品收集，不斷練習，都是很好的積累途徑。
（2）需求階段，找準核心很重要，深入溝通是關鍵。要找到核心點和表現的優先次序，再去設計。
（3）設計階段，先尋找創意思路，然后構思合適的版式，并且要考慮設計投放的環境，最后要找到合適的方法包裝方案，推動方案。
（4）設計上線并不是產品宣傳的終止，需要效果跟蹤，是為了下一次的設計，也為了自己的沉淀。
～～
以上就是我對運營H5設計的總結梳理，如有好的建議請各位留下寶貴的意見。
希望我們都能夠在設計的路上，對于接手過的設計需求能夠有階段性的沉淀和總結，構建自己的設計體系。加油，不枉自己的青春。
