h5設計心得體會(huì )
我們在一些事情上受到啟發(fā)后，往往會(huì )寫(xiě)一篇心得體會(huì )，這樣就可以通過(guò)不斷總結，豐富我們的思想。怎樣寫(xiě)好心得體會(huì )呢？下面是小編收集整理的h5設計心得體會(huì )，歡迎大家分享。
h5設計心得體會(huì )1
一、運營(yíng)H5概況：
1.1APP產(chǎn)品流程(運營(yíng)設計的相關(guān)背景)
先說(shuō)說(shuō)產(chǎn)品的流程，移動(dòng)產(chǎn)品從出生到和用戶(hù)見(jiàn)面大多都會(huì )經(jīng)歷這么幾個(gè)階段：
在功能定位——交互流程(Ui)——視覺(jué)界面(GUI)——開(kāi)發(fā)和測試，這幾個(gè)步驟，基本實(shí)現了產(chǎn)品從0到1。如果要公司戰略中考慮將上線(xiàn)的APP被更多的用戶(hù)見(jiàn)到、使用到，那么就需要運營(yíng)登上歷史舞臺了;
1.2UI設計分工/職責
公司如果規模比較大，產(chǎn)品需求和運營(yíng)需求都會(huì )分配到對應的產(chǎn)品UI設計師或者運營(yíng)設計師，他們負責那些工作呢? 產(chǎn)品設計：界面布局的合理性以及如何引導用戶(hù)完成操作等流程化設計;運營(yíng)設計：活動(dòng)專(zhuān)題、焦點(diǎn)圖(banner)等更加偏向于視覺(jué)化和營(yíng)銷(xiāo)類(lèi)的設計。而在運營(yíng)H5頁(yè)面設計中，它需要考慮的是這兩個(gè)的集合，一要兼顧視覺(jué)化的、創(chuàng )意的、吸引人的，也要兼顧能合理布局頁(yè)面信息，引導用戶(hù)進(jìn)行操作(購買(mǎi)/收藏等行為)。
1.3運營(yíng)H5活動(dòng)的功能目標
正如《交互設計精髓》這本書(shū)中開(kāi)篇提到的——以目標為導向進(jìn)行設計，運營(yíng)活動(dòng)也不例外，運營(yíng)需求的功能目標總結為四個(gè)類(lèi)型：01活動(dòng)運營(yíng)型：游戲/邀請函/賀卡/測試;02品牌宣傳型：公司/產(chǎn)品的微官網(wǎng);03產(chǎn)品介紹型：提升轉化率;04總結報告型：增加用戶(hù)粘性;
1.4運營(yíng)H5活動(dòng)表現形式
目前比較常見(jiàn)的有四種類(lèi)型：01簡(jiǎn)單圖文;02紅包/送券/賀卡/邀請函;03做任務(wù)：?jiǎn)?wèn)答/評分/測試;04游戲;
1.5公司運營(yíng)情況
由于每個(gè)公司針對的用戶(hù)群不一樣，因此在具體的運營(yíng)需求，其需求的功能目標也會(huì )不一。如媽咪知道，運營(yíng)需求每個(gè)月都會(huì )有，尤其是在產(chǎn)品發(fā)布新功能、節日(春節/端午/中秋等)、重大活動(dòng)(公司周年/問(wèn)診節等)這幾個(gè)時(shí)期提需求，具體的功能目標如下：
20xx年第四個(gè)季度運營(yíng)需求
二、運營(yíng)H5設計流程
在了解了運營(yíng)H5活動(dòng)的一個(gè)基本概況后，能幫助我們在做設計的時(shí)候，以目標為導向進(jìn)行設計，當然落到實(shí)際情況，接到運營(yíng)H5需求，也還是需要考量視覺(jué)層面的東西。
2.1日常準備
好設計來(lái)自有準備，在這里我做的準備如下：
2.1.1觀(guān)察生活，記錄靈感。線(xiàn)下：商場(chǎng)的櫥窗設計，廣告招貼畫(huà)，地鐵的廣告貼;線(xiàn)上：競品，電商等app;與美術(shù)有關(guān)的：插畫(huà)，漫畫(huà)等，用心去觀(guān)察，隨時(shí)記錄自己當時(shí)的靈感，都是以后設計中的財富。
2.1.2收集和整理。每逢節假日，淘寶，京東，外賣(mài)的app的營(yíng)宣活動(dòng)特別多，及時(shí)參與，及時(shí)截圖保存，競品的相關(guān)醫學(xué)類(lèi)的'活動(dòng)也是及時(shí)參與，了解其的玩法和現有的設計手法。靈感庫網(wǎng)上還有推薦Dribble、Behance、pinterest、花瓣、Google的Panda插件)等，個(gè)人的收藏習慣中比較偏好花瓣，只要你有網(wǎng)絡(luò )，手機/公司電腦/家里電腦都可以隨時(shí)看。
花瓣畫(huà)板
tip01:對于建立畫(huà)板名稱(chēng)看個(gè)人習慣，分組和命名方式完全依照自己的習慣記憶和搜索方式來(lái)定即可。
tip02:需要每天刷，大量的閱覽，搜集喜歡的需要的，并隔一段時(shí)間做刪減工作，刪去覺(jué)得已經(jīng)過(guò)時(shí)了的、沒(méi)用的(畢竟隨著(zhù)實(shí)戰經(jīng)驗和眼界的提升，有些圖看不上了嘛)。tip03:可以嘗試分析她們的優(yōu)缺點(diǎn)，如果可以的話(huà)以郵件方式給內部組員分享。
2.1.3練習與模仿。好的效果和展現形式都可以模仿，字體變形，光影表現等，基本的技法都是可以在平時(shí)積累的。題主比較懶，這個(gè)我平時(shí)一般看到好的，會(huì )收集起來(lái)，在實(shí)踐過(guò)程中，直接復制粘貼，臨摹。
2.1.4公司資源管理策略。對于這點(diǎn)題主表示很有發(fā)言權，剛進(jìn)到公司，我不知道自己要達到一個(gè)設計水準，也不知道同組設計師的設計水準，如果公司有共享文件，可以借熟悉公司環(huán)境的前兩天了解一下(剛入職一般不會(huì )著(zhù)急給你需求，時(shí)間還比較寬裕)。題主的的做法是在share查看之前的設計，了解你要輸出的產(chǎn)物list，如何管理輸出物文件(命名/文件夾管理等)。獲知你大概要達到的高度，或者是否可以超越，能否有直接挪用的資源，哪種手段不太熟悉可以直接詢(xún)問(wèn)同事(一般做設計的同事都比較友善的)。
準備工作大致是四個(gè)思路，基本可以為幫助你在實(shí)際項目中，幫你快速得到創(chuàng )作源泉和靈感，大大提高你的工作效率。
2.2真正實(shí)戰
2.2.1前期準備
這個(gè)階段主要包含這四個(gè)方面：溝通需求/分析定位/風(fēng)格確定/視覺(jué)推導。
已之前的媽咪問(wèn)診節開(kāi)幕活動(dòng)的需求為例來(lái)闡述。
交互稿(ppt文件)
(1)溝通需求階段(分析定位)：
做設計的話(huà)，溝通肯定是必不可少的了，這里分別涉及到了跟需求人(主要是運營(yíng)策劃)/交互設計師/前端設計師/領(lǐng)導之間的溝通，題主剛接手運營(yíng)H5設計欠缺這塊經(jīng)驗，有一個(gè)設計反復被要求改稿，反思了，就是因為前期溝通這一環(huán)節出了問(wèn)題�？梢�(jiàn)前期溝通時(shí)多重要的事情啊，千萬(wàn)不能少這一步驟。后來(lái)我是怎么完善的呢? 首先，好的習慣是，從運營(yíng)策劃那拿到交互稿后，從上到下完整的先過(guò)一遍交互稿，一方面是看交互稿的內容完不完整，是不是還有些內容點(diǎn)忘記做了，另一方面也會(huì )咨詢(xún)一下交互設計師，有哪些地方是需要設計師特別注意的啊，有沒(méi)有什么內容是要優(yōu)先做的啊等等，如果沒(méi)有特殊要求的話(huà)，我一般都是會(huì )從彈窗開(kāi)始。
其次，頁(yè)面信息涉及到手機號碼/錯誤提示/日期選擇/地址輸入等內容，一方面需要和運營(yíng)策劃溝通，是否需要手機驗證碼;另一方面也需要和開(kāi)發(fā)溝通，詢(xún)問(wèn)是否他們H5的模版(時(shí)間選擇器/地址選擇器等)如果有的話(huà)，就不必花費時(shí)間進(jìn)行設計，因為開(kāi)發(fā)也不會(huì )按照一個(gè)運營(yíng)活動(dòng)單獨寫(xiě)一個(gè)實(shí)現的代碼，不過(guò)記得在tapd需求單上進(jìn)行備注，以及和需求&開(kāi)發(fā)同步。如果沒(méi)有，作為設計師的你那就需要考慮各種狀態(tài)的設計等。
第三，詢(xún)問(wèn)彈窗的文案標題這些是否是最后確認了，以免涉及到字體變形最后發(fā)現文案要改那真是麻煩，如果拿到需求覺(jué)得標題不是特別好或者有疑問(wèn)的時(shí)候，最好和運營(yíng)直接溝通商量，看能不能對文案有一些修改調整，私自改動(dòng)那將面對后期改動(dòng)的慘劇。
第四，溝通階段的，關(guān)鍵的點(diǎn)在于準確了解運營(yíng)活動(dòng)的意圖/定位。通過(guò)運營(yíng)活動(dòng)傳達一種什么目的/態(tài)度，營(yíng)造一種什么氣氛，好玩的，有趣的，暖心的，促銷(xiāo)的，還是高端大氣的。雖然現在風(fēng)格可以我們自己來(lái)定，但決定權還是沒(méi)有那么大，在需求溝通階段還是最好詢(xún)問(wèn)一下，以免走偏。
以上就是我的一些前期準備工作，算是溝通完了，接下來(lái)我們繼續看。
(2)風(fēng)格確定階段
需要考慮到活動(dòng)的受眾人群的年齡和活動(dòng)主題的氣質(zhì)色彩。由于運營(yíng)活動(dòng)主要由運營(yíng)組提出，磨合多了，風(fēng)格彼此了然，但是醫學(xué)小組或者其他的提出H5需求，設計師可以將各類(lèi)型風(fēng)格展示出來(lái)，給對方挑選一個(gè)合適的方向。
大致風(fēng)格就是這么幾種。
設計經(jīng)驗：01預防針：了解對方思路，大家腦海里也許已經(jīng)有一個(gè)大概的風(fēng)格印象。02根據活動(dòng)的上線(xiàn)時(shí)間長(cháng)短，時(shí)間，個(gè)人能力等條件來(lái)選擇;03不要被風(fēng)格約束，能夠自由發(fā)揮，不要總做同一種風(fēng)格，希望有所嘗試。
對接需求時(shí)，我也會(huì )和運營(yíng)說(shuō)一下自己的意見(jiàn)：不想太約束，能夠自由發(fā)揮，不想總做同一種風(fēng)格，希望有所嘗試。
這一階段傳達主要目的：需求方腦海里也許已經(jīng)有一個(gè)大概的樣子模型。但我們也不能夠說(shuō)得太細，只是需要了解方向思路對不對就好了，一方面是因為還沒(méi)有開(kāi)始執行你也沒(méi)法具體到很細致的地方，另一方面是因為，如果一開(kāi)始就把整個(gè)頁(yè)面的設計全定死了，那往后如果出現突發(fā)情況或者被需求人誤以為頁(yè)面就是這樣了，后面你想靈活發(fā)揮就很難了。
(3)視覺(jué)推導階段：
通過(guò)重要的溝通階段(風(fēng)格確定階段可有可無(wú)，前期可能需要，但隨著(zhù)需求接的多了，對方會(huì )信任你的設計，不用每次有需要確認風(fēng)格)，那接下來(lái)很重要的事情就是勾畫(huà)草圖，找感覺(jué)。(運營(yíng)H5活動(dòng)，一般是入口和頁(yè)面構成，像我所在的公司，運營(yíng)H5入口為彈窗，那彈窗的重要性可想而知，需要考究之前所說(shuō)的視覺(jué)化的、創(chuàng )意的、吸引人的，如果有些H5活動(dòng)不需要入口，那第一個(gè)頁(yè)面的視覺(jué)為先來(lái)考慮。) 第一個(gè)問(wèn)題來(lái)了，在繪制草圖時(shí)如何構思?
題外話(huà)：我實(shí)習的時(shí)候，運營(yíng)H5活動(dòng)基本是和我坐正對面的美女設計師芳芳包攬的，但后期工作需求的調整，運營(yíng)H5開(kāi)始分配到了我，運營(yíng)設計從0到1，起初其實(shí)很害怕，不知道接了需求如何著(zhù)手開(kāi)始。和小組成員請教，也沒(méi)法得到很詳實(shí)的答案，一點(diǎn)點(diǎn)積累，后來(lái)需求接的多了，突然想明白了，這不是類(lèi)似于寫(xiě)作文嘛，寫(xiě)作文列提綱，那同樣的，接到需求后，根據活動(dòng)的上線(xiàn)內容和要求，提取關(guān)鍵詞等頭腦方式來(lái)進(jìn)行聯(lián)想，是最終畫(huà)面效果符合活動(dòng)主題。
比如說(shuō)節日類(lèi)型的活動(dòng)需求--中秋節，她有哪些元素呢?月亮，嫦娥，兔子，桂樹(shù)，月餅等;圣誕節：圣誕樹(shù)，圣誕老師，襪子，禮棒，圣誕顏色(紅綠白)等;這些元素可能一下子考慮不全，沒(méi)關(guān)系，咱們可以上花瓣搜，關(guān)聯(lián)搜索，獲取大概等元素，然后組合繪制草圖。
在[媽咪問(wèn)診節盛大開(kāi)幕]活動(dòng)中，我提取的關(guān)鍵詞如下：
媽咪問(wèn)診節-關(guān)鍵詞提取
你可能會(huì )問(wèn)我，能不能在花瓣上去找出完全一模一樣的案例，能找到當然很好，但是每個(gè)公司的運營(yíng)需求目標都不一樣。要找到一摸一樣的這種情況少見(jiàn)，不要太抱希望，有些時(shí)候，根據關(guān)鍵詞在花瓣或百度查找，找不到合適的素材，那就看丑的素材也能構思好的畫(huà)面內容的，一定要堅信自己可以搞定需求。
那第二個(gè)問(wèn)題，如何做?保守的做法：一般畫(huà)2-3個(gè)草圖，可供對方選擇。和需求方溝通需要和運營(yíng)說(shuō)明的是，草圖是呈現一個(gè)大概的模樣，具體在電腦端設計可能有差別，如果在草圖花費太多時(shí)間，精力，可能在整個(gè)流程中不太適宜。(有時(shí)候，也會(huì )推翻，因此，讓對方提供參考圖，把握大方向，這樣可以避免電腦端快結束了還要改稿)。
草圖VS成稿
通過(guò)以上就是我的一些前期準備工作，算是溝通完了，接下來(lái)我們繼續看。
2.2.2中期執行階段
(1)彈窗/第一個(gè)頁(yè)面：
進(jìn)入電腦繪制階段了，是不是好開(kāi)心啊。因為在上一準備階段中基本找準了需求核心，可以按照自己的設計能力來(lái)做設計了(說(shuō)不定還有突破)。從第一頁(yè)開(kāi)始，之前我習慣先填充畫(huà)布的顏色，定個(gè)大氛圍基調，再做主標題的效果，而且不管三七二十一，先做了字體變形再說(shuō)，最后畫(huà)畫(huà)面;我知道很多人的習慣和我一樣，但需求有很多變數，比如說(shuō)：
需求方突然要改標題文案怎么辦?
把字做好后發(fā)現其他的商品圖或元素怎么排都排不好看了怎么辦? 光做一個(gè)字體設計就花費了項目一大半的時(shí)間怎么辦? 所以基于種種原因的考慮(說(shuō)多了都說(shuō)淚)，我們要學(xué)乖，調整優(yōu)化自己的做圖順序。
借用婷姐說(shuō)電商設計的話(huà)“先把文案先丟在畫(huà)布里，弄好畫(huà)面形象后再去做標題部分的，并且有時(shí)候標題字體需要設計一下，有時(shí)候只是需要打幾個(gè)字做個(gè)排版就好了，要看具體情況的，因為不是說(shuō)做了字體變形就一定好，不做字體變形就一定不好”。
繪制彈窗之后，及時(shí)和需求方對第一個(gè)圖，以免方向走偏，走偏了之后也能及時(shí)調整，不浪費更多的時(shí)間。(確定彈窗可能需要一段時(shí)間，這期間，可以著(zhù)手做別的設計需求，時(shí)間有效利用，不要干等運營(yíng)的回復，當然你可以主動(dòng)問(wèn)。) 是不是說(shuō)漏了一個(gè)配色?
我的主要依據01活動(dòng)定位/目的;02產(chǎn)品app的品牌調性進(jìn)行選擇;03數據統計等。如媽咪知道的針對用戶(hù)群，因此色彩選擇上使用活力，明艷的顏色，色調一般偏明亮調，黃色/粉色都比較吸引用戶(hù)的點(diǎn)擊。
配色
(2)其他頁(yè)面設計
彈唱確定之后，繼續下一個(gè)頁(yè)面，看到紅色標識的頁(yè)面，怎么設計頁(yè)面、布局信息呢?
h5設計心得體會(huì )2
1、交互上，慎用向右滑動(dòng)的操作方式。
如：刮刮樂(lè )涂抹效果，左右滑動(dòng)翻頁(yè)等。
原因：蘋(píng)果手機上，向右滑動(dòng)容易觸發(fā)返回“上一級頁(yè)面”效果。
2、交互上，慎用橫屏展示效果。
原因：體驗上，需要用戶(hù)設備開(kāi)啟屏幕旋轉功能，才能正常觀(guān)看，用戶(hù)操作成本高。對不同屏幕的手機，長(cháng)寬比例不一，難以展示最佳的視覺(jué)效果。
3、視覺(jué)上，功能按鈕等，遠離頁(yè)面底部(大概128px，這個(gè)尺寸不是固定值)，具體看重構采用什么適配方式(僅供參考：640*1136 px，從上往下計算，主要內容在1008px內)。
原因：更好的適配各種屏幕的手機，避免按鈕被擋住。
4、視覺(jué)上，慎用“光線(xiàn)疊加效果”或PS里面的“圖層樣式”效果。
如：給圖層加個(gè)“柔光”、“濾色”、“色相”等等效果，除非這個(gè)視覺(jué)元素可以合并為一體。
原因：給重構挖坑，導致不好切圖，無(wú)法還原視覺(jué)效果。
5、視覺(jué)上，矢量圖?想做簡(jiǎn)單的動(dòng)畫(huà)?導出SVG格式試試!
原因：能減少體積的事，為什么拒絕呢……
6、動(dòng)畫(huà)上，盡量避免全屏動(dòng)畫(huà)，優(yōu)先考慮局部動(dòng)畫(huà)的方式。
如：各種粒子效果全屏飄過(guò)等。
原因：如果呈現的視覺(jué)效果無(wú)法用代碼實(shí)現，就意味著(zhù)要用全屏尺寸的序列幀來(lái)處理，體積上會(huì )飆升，影響加載體驗。
7、動(dòng)畫(huà)上，序列幀壓縮小技巧，靜態(tài)的畫(huà)面，保存較高質(zhì)量。中間運動(dòng)的模糊狀態(tài)，大膽的壓低畫(huà)面質(zhì)量吧。
原因：壓縮體積，運動(dòng)狀態(tài)就算有鋸齒也不明顯。
8、重構上，，壓縮下，有效減少體積。
原因：額，這個(gè)也要說(shuō)原因?好吧，偷偷告訴你，現在這網(wǎng)站不止可以壓縮png，還可以壓縮jpg，更重要的是……支持批量下載了!
9、重構上，音樂(lè )請壓縮下，能大大減少整體的體積。
技巧：如果沒(méi)有特殊要求，可以考慮弄成單聲道音頻文件，比特率48或更低就行了。
10、重構上，安卓機不支持多個(gè)音頻同時(shí)播放……意味著(zhù)無(wú)法背景音樂(lè )跟音效同時(shí)播放!(蘋(píng)果機則沒(méi)問(wèn)題)
11、重構上，視頻無(wú)法自動(dòng)播放，首次播放需要用戶(hù)點(diǎn)擊觸發(fā)。
(視頻用什么格式?建議用mp4格式，并用H.264編碼器)
12、重構上，測試請多留意“魅族”手機和華為P6/P7等，屏幕底部采用虛擬按鈕的'手機。設備容易出問(wèn)題。
說(shuō)那么多，再來(lái)幾條小知識。
到底是什么用瀏覽器內核?額，這個(gè)問(wèn)題還真難說(shuō)清楚。
安卓：
微信5.4-6.1版本，如果有安裝QQ瀏覽器，則用QQ瀏覽器的內核。否則用手機系統自帶的。
微信6.1版本后，內嵌了QQ瀏覽器的內核。
QQ瀏覽器：6.2版本及以后使用blink內核。之前用webkit內核。
蘋(píng)果：
一直都是系統自帶的……
向上滑動(dòng)翻頁(yè)的操作，視覺(jué)指引的箭頭應該是向上，而不是向下哦;除非你是點(diǎn)擊翻頁(yè)效果，才用向下的箭頭。
指紋掃描?親屏幕觸發(fā)互動(dòng)?吹口氣檢測氣體成份?
這些都是偽技術(shù)，開(kāi)開(kāi)心心被玩弄下就好了，哈哈。
不過(guò)像多屏互動(dòng)，音頻分析等，通過(guò)各種接口做技術(shù)支持，實(shí)現一些互動(dòng)操作，這些可是未來(lái)的趨勢哦!
h5設計心得體會(huì )3
前段時(shí)間接到任務(wù)，需要尋找一個(gè)第三方軟件公司開(kāi)發(fā)一個(gè)節日游戲h5。
百度一下發(fā)現這類(lèi)開(kāi)發(fā)公司很多，仔細比較后選擇了一家廣州公司。用了三天時(shí)間，確定h5細節敲定了合同價(jià)格，然后就上報領(lǐng)導等待。
接著(zhù)就是長(cháng)達一周的靜默，期間我也催促過(guò)領(lǐng)導早點(diǎn)定下來(lái)，因為扣除開(kāi)發(fā)時(shí)間離預訂上線(xiàn)的日子已不多。不過(guò)，回復總是讓我再等等。
提醒領(lǐng)導無(wú)果后，我跟美工說(shuō)明項目的頁(yè)面要求，讓她先設計起來(lái)，免得倉促之間來(lái)不及。但還是沒(méi)用，領(lǐng)導沒(méi)布置任務(wù)，美工也缺乏動(dòng)力開(kāi)工。
我以為項目要黃，結果等來(lái)的是贊助找到立刻開(kāi)始。離上線(xiàn)只有5天，但軟件公司光開(kāi)發(fā)就要10天�？胺Q(chēng)不可能完成的'任務(wù)。
跟軟件方反復協(xié)商后，修改了原方案給為精簡(jiǎn)版h5，即使這樣也很難保證順利交付，而且幾乎沒(méi)有測試時(shí)間。為此我們還逼迫簽訂了一份免責協(xié)議。如果，軟件出現問(wèn)題，保證不會(huì )追究軟件方的開(kāi)發(fā)責任。
在一頓屁滾尿流，連滾帶爬的趕工后，項目終于上線(xiàn)。長(cháng)舒一口氣外，還讓我學(xué)到了三點(diǎn)。
1.想提醒領(lǐng)導注意deadline
一般的提醒沒(méi)用后，要試試“威脅”工期來(lái)不及，項目無(wú)法上線(xiàn)，整個(gè)活動(dòng)效果會(huì )大打折扣。先打預防針，即使后來(lái)真來(lái)不及也不會(huì )太怪你。
2.提前準備項目資料
催促同事早點(diǎn)準備資料，想要有效果可能還要依靠領(lǐng)導的。遇到問(wèn)題多向領(lǐng)導，讓領(lǐng)導為你所用，或獲得授權方便行事。
3.給自己留足空間
在和乙方商量中，一定要給自己留足空間。計劃22號上線(xiàn)，就一定要說(shuō)21號上午上線(xiàn)。項目中意外一定有，給自己留足“本”才能不手忙腳亂。
h5設計心得體會(huì )4
去年JDC出了不少優(yōu)秀的武媚娘…不，H5模板制作呢，大家都很拼，同時(shí)當然也積累了一些經(jīng)驗和教訓，今天結合咱們的實(shí)戰案例，從字體，排版，動(dòng)效，音效，適配性，想法這幾個(gè)方面好好聊一聊關(guān)于H5的設計，希望對同學(xué)們有幫助。
字體
H5移動(dòng)端頁(yè)面設計心得分享 三聯(lián)
排版
在有限的手機屏幕空間內，我們積累的經(jīng)驗告訴我們最好的效果是簡(jiǎn)單集中，最好有一個(gè)核心元素，中心元素不宜過(guò)多，突出重點(diǎn)為最優(yōu)。
20jd20150124
比如JDC的“拍拍十二星座實(shí)用手冊”的項目，只用了最簡(jiǎn)單的圖形和文字居中擺放。
以可口可樂(lè )的這個(gè)“我們在這我們在乎”為例，相較而言，越左邊的排版會(huì )越容易引起關(guān)注。這是因為我們懶惰的大腦里最初看到這種簡(jiǎn)潔排版會(huì )立刻出現“嗯我可以馬上看完不費勁”的潛意識信息而帶著(zhù)輕松的態(tài)度去閱讀。
動(dòng)效
1 / 前期跟前端設計師進(jìn)行溝通，討論頁(yè)面中元素的動(dòng)效呈現。例如一些元素的位移，旋轉，翻轉，縮放，逐楨，淡入淡出，粒子效果，照片處理等等，還有3D展示效果。這個(gè)網(wǎng)站里有h5所能實(shí)現的效果)
16jd20150124
比如JDC出品的“京東HR招聘”里面就用了位移，縮放，淡入淡出的效果。而“京東微店七宗罪”的最慷慨這一屏則是用到了粒子效果，每個(gè)錢(qián)幣翻轉下落的速度不一樣顯得畫(huà)面更真實(shí)。今年在朋友圈瘋轉的維多利亞和特斯拉的H5用的是擦除的效果，模糊的遮罩足夠挑起人們的好奇心。
以上兩款，包括今年最火的H5案例都在這了 >>>《如此風(fēng)騷!20xx年刷爆朋友圈的十大 HTML5 技術(shù)案例》
2 / 背景動(dòng)效其實(shí)比較推薦緩動(dòng)效果，如“京東管培生招聘”的例子里星空中一閃而過(guò)的流星，間歇性出現不搶主角風(fēng)頭再好不過(guò)了.
3 /復雜多變的動(dòng)效不一定是好的，要考慮到加載速度等用戶(hù)體驗問(wèn)題。
音效
1 / 考慮到用戶(hù)使用場(chǎng)景的多樣性，那種介紹類(lèi)的如果要加背景音樂(lè )，盡量不要太粗暴。有一點(diǎn)循序漸進(jìn)最好，給用戶(hù)留時(shí)間在騷擾別人之前可以關(guān)閉。
或者可以在開(kāi)始時(shí)是關(guān)閉狀態(tài)。但做游戲h5頁(yè)面的時(shí)候，音樂(lè )可以沒(méi)有關(guān)閉開(kāi)啟按鈕，因為用戶(hù)對接下來(lái)發(fā)生的事是有預知的。
2 / 考慮每一頁(yè)音樂(lè )按鈕放置的明顯性。如果能用其他頁(yè)面元素去替代音樂(lè )符號作為按鈕也是極好的。
給前端設計師的音樂(lè )文件：格式為mp3等，單軌，最好30秒以?xún)�。為了加載速度，文件大小盡量控制在：100k以?xún)茸罴�，可以用Adobe Audition等軟件來(lái)壓縮。作為無(wú)限循環(huán)的背景音樂(lè )，截取時(shí)一定要注意頭尾得連接得上。
交互
1 / 展示型: 有很多種不同的交互方式，最常見(jiàn)的是翻頁(yè)，這種方式制作起來(lái)相對簡(jiǎn)單，多用于展示一些新的產(chǎn)品，功能，或者活動(dòng)介紹等。技術(shù)上現在市面上已經(jīng)有H5在線(xiàn)生成器，基本上給圖片和文字就可以幫你進(jìn)行處理。
除了翻頁(yè)以外，還有點(diǎn)擊，輸入文字，擦除屏幕，滑動(dòng)屏幕等，玩法非常豐富。在“拍拍圣誕活動(dòng)”里就用到了重力感應，搖一搖可以隨機判斷，讓用戶(hù)有了自己參與的樂(lè )趣。
2 /游戲型：像是起初朋友圈紅過(guò)的圍住神經(jīng)貓，或者是我們的“拍拍Jump”這類(lèi)需要計算邏輯，得出分數或者結論的小游戲。
3 /產(chǎn)品型：有一些H5是作為一個(gè)長(cháng)期運營(yíng)的產(chǎn)品存在的，用戶(hù)的訪(fǎng)問(wèn)可能會(huì )更固定，比如微信里的購物頁(yè)面等。
手機端之間：一般我們先用640X1136進(jìn)行設計，參考線(xiàn)會(huì )標在960高的地方，主要元素最好不要過(guò)高以適配各種機型。其他安卓機器前端切圖時(shí)可以適當拉伸，變化不會(huì )太大就不用每個(gè)進(jìn)行適配。
響應式設計：頁(yè)面的設計與開(kāi)發(fā)應當根據用戶(hù)行為以及設備環(huán)境(系統平臺、屏幕尺寸、屏幕定向等)進(jìn)行相應的響應和調整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。
為不同電子設備單個(gè)布局，盡量使用純色而非漸變
想法
被大眾主流樂(lè )于分享的信息大概有這么幾種：
最直接的利益驅動(dòng)，分享有獎或者需要眾籌等，
對自己有用并且也對周?chē)艘矔?huì )有新鮮感的信息，
自己參與游戲或者測試得到的結果。
不管是分享給朋友或朋友圈還是QQ對話(huà)，讓用戶(hù)主動(dòng)去分享你的帶有很大性質(zhì)的廣告意味的信息在自己的社交群體中，此條信息與自己相關(guān)并且別人也能參與進(jìn)來(lái)當然是最理想的。
可口可樂(lè )北極熊求合影的例子就是一個(gè)很好的宣傳方式，借由簡(jiǎn)單的合成照片技術(shù)讓人們有意愿去分享自己努力創(chuàng )作的照片。還有UJEANS的設計延續了品牌的調性就是實(shí)用，在選擇你的牛仔褲喜好時(shí)也同時(shí)穿插了商品的說(shuō)明，顯得不那么生硬，它比較符合理由3。
在我們設計一個(gè)H5頁(yè)面時(shí)，很重要的一點(diǎn)就是站在自己的角度跳出來(lái)去看你做的東西，首先一點(diǎn)是你和你周?chē)?人愿意轉發(fā)分享這個(gè)東西嗎?它有趣嗎?它對其他人也是有用的信息嗎?
在做“1212陪你一二到底”的時(shí)候，我們的設計師要在最后引出有優(yōu)惠券領(lǐng)取這個(gè)信息，前面也用用盡了節操去設計文案和人物，在此體會(huì )一下文案的重要性，它是貫穿整個(gè)H5的靈魂。第二張圖上的小字“海外大牌足不出戶(hù)購遍全球”是產(chǎn)品想說(shuō)的硬廣告臺詞，但在小小的手機屏幕里，碎片時(shí)間中，我們必須先抓人眼球，再抓住人心，所以”身體和快遞，至少一個(gè)在路上“。
對于展示型和互動(dòng)型H5來(lái)說(shuō)最重要的還是想法。對于設計師來(lái)說(shuō)，也許他們給到我們的只有幾行文字，那時(shí)候前期構思這個(gè)H5的時(shí)間有可能比真正做的時(shí)間還要長(cháng)。
比如拍拍網(wǎng)全球同步發(fā)售iPhone6的這個(gè)消息要做成H5，如果我們只是做一張炫酷的圖片告訴大家我們這里有iphone6分享朋友圈有可能中獎，也會(huì )有利益驅動(dòng)的誘惑讓人去轉發(fā)分享。但通過(guò)大家的腦爆，我們將這句話(huà)變成“關(guān)于Phone6的哥德巴赫猜想”，根據測試結果得出有趣的結論，這樣轉發(fā)的并不是赤果果的求中獎行為，還帶著(zhù)有趣的插圖和自己測出來(lái)的殺馬特范，是不是顯得更含蓄更不經(jīng)意呢。這樣最終轉發(fā)的理由上述1，2，3好像都有了呢。
今年JDC大概做了十多個(gè)H5 頁(yè)面，產(chǎn)量頗豐。 H5和app比起來(lái)優(yōu)勢在于開(kāi)發(fā)周期時(shí)間短，傳播起來(lái)有效率，并且在更新迭代的成本上要小很多。特別在游戲上，未來(lái)H5模板制作會(huì )有更多的可能性。我們也會(huì )堅持去研究和嘗試，不管是新技術(shù)，還是更有趣的營(yíng)銷(xiāo)方式，和大家共勉。
h5設計心得體會(huì )5
一、運營(yíng)H5概況：
1.1APP產(chǎn)品流程(運營(yíng)設計的相關(guān)背景)
先說(shuō)說(shuō)產(chǎn)品的流程，移動(dòng)產(chǎn)品從出生到和用戶(hù)見(jiàn)面大多都會(huì )經(jīng)歷這么幾個(gè)階段：
在功能定位——交互流程(Ui)——視覺(jué)界面(GUI)——開(kāi)發(fā)和測試，這幾個(gè)步驟，基本實(shí)現了產(chǎn)品從0到1。如果要公司戰略中考慮將上線(xiàn)的APP被更多的用戶(hù)見(jiàn)到、使用到，那么就需要運營(yíng)登上舞臺了;
1.2UI設計分工/職責
公司如果規模比較大，產(chǎn)品需求和運營(yíng)需求都會(huì )分配到對應的產(chǎn)品UI設計師或者運營(yíng)設計師，他們負責那些工作呢?
產(chǎn)品設計：界面布局的合理性以及如何引導用戶(hù)完成操作等流程化設計;運營(yíng)設計：活動(dòng)專(zhuān)題、焦點(diǎn)圖(banner)等更加偏向于視覺(jué)化和營(yíng)銷(xiāo)類(lèi)的設計。而在運營(yíng)H5頁(yè)面設計中，它需要考慮的是這兩個(gè)的集合，一要兼顧視覺(jué)化的、創(chuàng )意的、吸引人的，也要兼顧能合理布局頁(yè)面信息，引導用戶(hù)進(jìn)行操作(購買(mǎi)/等行為)。
1.3運營(yíng)H5活動(dòng)的功能目標
正如《交互設計精髓》這本書(shū)中開(kāi)篇提到的——以目標為導向進(jìn)行設計，運營(yíng)活動(dòng)也不例外，運營(yíng)需求的功能目標總結為四個(gè)類(lèi)型：01活動(dòng)運營(yíng)型：/pic/測試;02品牌宣傳型：公司/產(chǎn)品的微官網(wǎng)；03產(chǎn)品介紹型：提升轉化率；04總結型：增加用戶(hù)粘性;
1.4運營(yíng)H5活動(dòng)表現形式
目前比較常見(jiàn)的有四種類(lèi)型：01簡(jiǎn)單圖文;02紅包/送券/賀卡/邀請函;03做任務(wù)：?jiǎn)?wèn)答/評分/測試;04游戲;
1.5公司運營(yíng)情況
由于每個(gè)公司針對的用戶(hù)群不一樣，因此在具體的運營(yíng)需求，其需求的功能目標也會(huì )不一。如媽咪知道，運營(yíng)需求每個(gè)月都會(huì )有，尤其是在產(chǎn)品發(fā)布新功能、(/pic/問(wèn)診節等)這幾個(gè)時(shí)期提需求，具體的功能目標如下：
20xx年第四個(gè)季度運營(yíng)需求
二、運營(yíng)H5設計流程
在了解了運營(yíng)H5活動(dòng)的一個(gè)基本概況后，能幫助我們在做設計的時(shí)候，以目標為導向進(jìn)行設計，當然落到實(shí)際情況，接到運營(yíng)H5需求，也還是需要考量視覺(jué)層面的東西。
2.1日常準備
好設計來(lái)自有準備，在這里我做的準備如下：
2.1.1觀(guān)察生活，記錄。線(xiàn)下：商場(chǎng)的櫥窗設計，廣告招貼畫(huà)，地鐵的廣告貼;線(xiàn)上：競品，電商等app;與有關(guān)的：，等，用心去觀(guān)察，隨時(shí)記錄自己當時(shí)的靈感，都是以后設計中的財富。
2.1.2和整理。每逢節假日，淘寶，京東，外賣(mài)的app的營(yíng)宣活動(dòng)特別多，及時(shí)參與，及時(shí)截圖保存，競品的相關(guān)類(lèi)的活動(dòng)也是及時(shí)參與，了解其的玩法和現有的設計手法。靈感庫網(wǎng)上還有推薦Dribble、Behance、pinterest、花瓣、Google的Panda插件)等，個(gè)人的收藏習慣中比較偏好花瓣，只要你有網(wǎng)絡(luò )，手機/公司/家里電腦都可以隨時(shí)看。
花瓣畫(huà)板
tip01:對于建立畫(huà)板名稱(chēng)看個(gè)人習慣，分組和命名方式完全依照自己的習慣記憶和搜索方式來(lái)定即可。tip02:需要每天刷，大量的閱覽，搜集喜歡的需要的，并隔一段時(shí)間做刪減工作，刪去覺(jué)得已經(jīng)過(guò)時(shí)了的、沒(méi)用的(畢竟隨著(zhù)實(shí)戰和眼界的提升，有些圖看不上了嘛)。tip03:可以嘗試分析她們的優(yōu)缺點(diǎn)，如果可以的話(huà)以郵件方式給內部組員分享。
2.1.3練習與模仿。好的效果和展現形式都可以模仿，字體變形，光影表現等，基本的技法都是可以在平時(shí)積累的。題主比較懶，這個(gè)我平時(shí)一般看到好的，會(huì )收集起來(lái)，在實(shí)踐過(guò)程中，直接復制粘貼，臨摹。
2.1.4公司資源管理策略。對于這點(diǎn)題主表示很有發(fā)言權，剛進(jìn)到公司，我不知道自己要達到一個(gè)設計水準，也不知道同組設計師的設計水準，如果公司有共享文件，可以借熟悉公司環(huán)境的前兩天了解一下(剛入職一般不會(huì )著(zhù)急給你需求，時(shí)間還比較寬裕)。題主的的做法是在share查看之前的設計，了解你要輸出的產(chǎn)物list，如何管理輸出物文件(命名/文件夾管理等)。獲知你大概要達到的高度，或者是否可以超越，能否有直接挪用的資源，哪種手段不太熟悉可以直接詢(xún)問(wèn)同事(一般做設計的同事都比較友善的)。
準備工作大致是四個(gè)思路，基本可以為幫助你在實(shí)際項目中，幫你快速得到創(chuàng )作源泉和靈感，大大提高你的工作效率。
2.2真正實(shí)戰
2.2.1前期準備
這個(gè)階段主要包含這四個(gè)方面：溝通需求/分析定位/風(fēng)格確定/視覺(jué)推導。
已之前的媽咪問(wèn)診節開(kāi)幕活動(dòng)的需求為例來(lái)闡述。
交互稿(ppt文件)
(1)溝通需求階段(分析定位)：
做設計的話(huà)，溝通肯定是必不可少的了，這里分別涉及到了跟需求人(主要是運營(yíng)策劃)/交互設計師/前端設計師/領(lǐng)導之間的溝通，題主剛接手運營(yíng)H5設計欠缺這塊經(jīng)驗，有一個(gè)設計反復被要求改稿，了，就是因為前期溝通這一環(huán)節出了問(wèn)題�？梢�(jiàn)前期溝通時(shí)多重要的事情啊，千萬(wàn)不能少這一步驟。后來(lái)我是怎么完善的呢?
首先，好的習慣是，從運營(yíng)策劃那拿到交互稿后，從上到下完整的先過(guò)一遍交互稿，一方面是看交互稿的內容完不完整，是不是還有些內容點(diǎn)忘記做了，另一方面也會(huì )咨詢(xún)一下交互設計師，有哪些地方是需要設計師特別注意的啊，有沒(méi)有什么內容是要優(yōu)先做的啊等等，如果沒(méi)有特殊要求的話(huà)，我一般都是會(huì )從彈窗開(kāi)始。
其次，頁(yè)面信息涉及到手機號碼/錯誤提示/日期選擇/地址輸入等內容，一方面需要和運營(yíng)策劃溝通，是否需要手機驗證碼;另一方面也需要和開(kāi)發(fā)溝通，詢(xún)問(wèn)是否他們H5的模版(時(shí)間選擇器/地址選擇器等)如果有的'話(huà)，就不必花費時(shí)間進(jìn)行設計，因為開(kāi)發(fā)也不會(huì )按照一個(gè)運營(yíng)活動(dòng)單獨寫(xiě)一個(gè)實(shí)現的代碼，不過(guò)記得在tapd需求單上進(jìn)行備注，以及和需求&開(kāi)發(fā)同步。如果沒(méi)有，作為設計師的你那就需要考慮各種狀態(tài)的設計等。
第三，詢(xún)問(wèn)彈窗的文案標題這些是否是最后確認了，以免涉及到字體變形最后發(fā)現文案要改那真是麻煩，如果拿到需求覺(jué)得標題不是特別好或者有疑問(wèn)的時(shí)候，最好和運營(yíng)直接溝通商量，看能不能對文案有一些修改調整，私自改動(dòng)那將面對后期改動(dòng)的慘劇。
第四，溝通階段的，關(guān)鍵的點(diǎn)在于準確了解運營(yíng)活動(dòng)的意圖/定位。通過(guò)運營(yíng)活動(dòng)傳達一種什么目的/態(tài)度，營(yíng)造一種什么氣氛，好玩的，有趣的，暖心的，促銷(xiāo)的，還是高端大氣的。雖然現在風(fēng)格可以我們自己來(lái)定，但權還是沒(méi)有那么大，在需求溝通階段還是最好詢(xún)問(wèn)一下，以免走偏。
以上就是我的一些前期準備工作，算是溝通完了，接下來(lái)我們繼續看。
(2)風(fēng)格確定階段
需要考慮到活動(dòng)的受眾人群的年齡和活動(dòng)主題的氣質(zhì)色彩。由于運營(yíng)活動(dòng)主要由運營(yíng)組提出，磨合多了，風(fēng)格彼此了然，但是醫學(xué)小組或者其他的提出H5需求，設計師可以將各類(lèi)型風(fēng)格展示出來(lái)，給對方挑選一個(gè)合適的方向。
大致風(fēng)格就是這么幾種。
設計經(jīng)驗：01預防針：了解對方思路，大家腦海里也許已經(jīng)有一個(gè)大概的風(fēng)格印象。02根據活動(dòng)的上線(xiàn)時(shí)間長(cháng)短，時(shí)間，個(gè)人能力等條件來(lái)選擇;03不要被風(fēng)格約束，能夠自由發(fā)揮，不要總做同一種風(fēng)格，希望有所嘗試。
對接需求時(shí)，我也會(huì )和運營(yíng)說(shuō)一下自己的：不想太約束，能夠自由發(fā)揮，不想總做同一種風(fēng)格，希望有所嘗試。
這一階段傳達主要目的：需求方腦海里也許已經(jīng)有一個(gè)大概的樣子模型。但我們也不能夠說(shuō)得太細，只是需要了解方向思路對不對就好了，一方面是因為還沒(méi)有開(kāi)始執行你也沒(méi)法具體到很細致的地方，另一方面是因為，如果一開(kāi)始就把整個(gè)頁(yè)面的設計全定死了，那往后如果出現突發(fā)情況或者被需求人誤以為頁(yè)面就是這樣了，后面你想靈活發(fā)揮就很難了。
(3)視覺(jué)推導階段：
通過(guò)重要的溝通階段(風(fēng)格確定階段可有可無(wú)，前期可能需要，但隨著(zhù)需求接的多了，對方會(huì )信任你的設計，不用每次有需要確認風(fēng)格)，那接下來(lái)很重要的事情就是勾畫(huà)草圖，找感覺(jué)。(運營(yíng)H5活動(dòng)，一般是入口和頁(yè)面構成，像我所在的公司，運營(yíng)H5入口為彈窗，那彈窗的重要性可想而知，需要考究之前所說(shuō)的視覺(jué)化的、創(chuàng )意的、吸引人的，如果有些H5活動(dòng)不需要入口，那第一個(gè)頁(yè)面的視覺(jué)為先來(lái)考慮。)
第一個(gè)問(wèn)題來(lái)了，在繪制草圖時(shí)如何構思?
題外話(huà)：我的時(shí)候，運營(yíng)H5活動(dòng)基本是和我坐正對面的美女設計師芳芳包攬的，但后期工作需求的調整，運營(yíng)H5開(kāi)始分配到了我，運營(yíng)設計從0到1，起初其實(shí)很害怕，不知道接了需求如何著(zhù)手開(kāi)始。和小組成員請教，也沒(méi)法得到很詳實(shí)的答案，一點(diǎn)點(diǎn)積累，后來(lái)需求接的多了，突然想明白了，這不是類(lèi)似于寫(xiě)作文嘛，寫(xiě)作文列提綱，那同樣的，接到需求后，根據活動(dòng)的上線(xiàn)內容和要求，提取關(guān)鍵詞等頭腦方式來(lái)進(jìn)行聯(lián)想，是最終畫(huà)面效果符合活動(dòng)主題。
比如說(shuō)節日類(lèi)型的活動(dòng)需求--中秋節，她有哪些元素呢?月亮，嫦娥，兔子，桂樹(shù)，月餅等;：圣誕樹(shù)，圣誕老師，襪子，禮棒，圣誕顏色(紅綠白)等;這些元素可能一下子考慮不全，沒(méi)關(guān)系，咱們可以上花瓣搜，關(guān)聯(lián)搜索，獲取大概等元素，然后組合繪制草圖。
在[媽咪問(wèn)診節盛大開(kāi)幕]活動(dòng)中，我提取的關(guān)鍵詞如下：
媽咪問(wèn)診節-關(guān)鍵詞提取
你可能會(huì )問(wèn)我，能不能在花瓣上去找出完全一模一樣的案例，能找到當然很好，但是每個(gè)公司的運營(yíng)需求目標都不一樣。要找到一摸一樣的這種情況少見(jiàn)，不要太抱希望，有些時(shí)候，根據關(guān)鍵詞在花瓣或百度查找，找不到合適的素材，那就看丑的素材也能構思好的畫(huà)面內容的，一定要堅信自己可以搞定需求。
那第二個(gè)問(wèn)題，如何做?保守的做法：一般畫(huà)2-3個(gè)草圖，可供對方選擇。和需求方溝通需要和運營(yíng)說(shuō)明的是，草圖是呈現一個(gè)大概的模樣，具體在電腦端設計可能有差別，如果在草圖花費太多時(shí)間，精力，可能在整個(gè)流程中不太適宜。(有時(shí)候，也會(huì )推翻，因此，讓對方提供參考圖，把握大方向，這樣可以避免電腦端快結束了還要改稿)。
草圖VS成稿
通過(guò)以上就是我的一些前期準備工作，算是溝通完了，接下來(lái)我們繼續看。
2.2.2中期執行階段
(1)彈窗/第一個(gè)頁(yè)面：
進(jìn)入電腦繪制階段了，是不是好開(kāi)心啊。因為在上一準備階段中基本找準了需求核心，可以按照自己的設計能力來(lái)做設計了(說(shuō)不定還有突破)。從第一頁(yè)開(kāi)始，之前我習慣先填充畫(huà)布的顏色，定個(gè)大氛圍基調，再做主標題的效果，而且不管三七二十一，先做了字體變形再說(shuō)，最后面;我知道很多人的習慣和我一樣，但需求有很多變數，比如說(shuō)：
需求方突然要改標題文案怎么辦?
把字做好后發(fā)現其他的商品圖或元素怎么排都排不好看了怎么辦?
光做一個(gè)字體設計就花費了項目一大半的時(shí)間怎么辦?
所以基于種種原因的考慮(說(shuō)多了都說(shuō)淚)，我們要學(xué)乖，調整優(yōu)化自己的做圖順序。
借用婷姐說(shuō)電商設計的話(huà)“先把文案先丟在畫(huà)布里，弄好畫(huà)面形象后再去做標題部分的，并且有時(shí)候標題字體需要設計一下，有時(shí)候只是需要打幾個(gè)字做個(gè)排版就好了，要看具體情況的，因為不是說(shuō)做了字體變形就一定好，不做字體變形就一定不好”。
繪制彈窗之后，及時(shí)和需求方對第一個(gè)圖，以免方向走偏，走偏了之后也能及時(shí)調整，不浪費更多的時(shí)間。(確定彈窗可能需要一段時(shí)間，這期間，可以著(zhù)手做別的設計需求，時(shí)間有效利用，不要干等運營(yíng)的回復，當然你可以主動(dòng)問(wèn)。)
是不是說(shuō)漏了一個(gè)配色?
我的主要依據01活動(dòng)定位/目的;02產(chǎn)品app的品牌調性進(jìn)行選擇;03數據統計等。如媽咪知道的針對用戶(hù)群，因此色彩選擇上使用活力，明艷的顏色，色調一般偏明亮調，黃色/粉色都比較吸引用戶(hù)的點(diǎn)擊。
配色
(2)其他頁(yè)面設計
彈唱確定之后，繼續下一個(gè)頁(yè)面，看到紅色標識的頁(yè)面，怎么設計頁(yè)面、布局信息呢?
因為要保證一個(gè)整體的活動(dòng)頁(yè)面，因此第一個(gè)要做的就是延續彈窗的視覺(jué)元素：配色、氛圍元素等，第二個(gè)是要對頁(yè)面信息進(jìn)行梳理層級關(guān)系，以便用戶(hù)的視覺(jué)流線(xiàn)引導。
設計原則——建立有效的視覺(jué)層次(手法)，對頁(yè)面內容進(jìn)行組織和區分優(yōu)先級。思路整理如下：
01突出-最重要的：字體更粗/大;顏色更特別;留白更多;位置更接近頁(yè)面的頂部。
02分組-類(lèi)似的：成組，采用類(lèi)似的顯示樣式;位置：放在一個(gè)定義明確的區域內;
03嵌套-組成部分的：隸屬/包含關(guān)系的元素，在視覺(jué)上進(jìn)行嵌套。
交互VS視覺(jué)
最終頁(yè)面如下：
如果頁(yè)面大體設計完，給我們的老大和運營(yíng)方看過(guò)并通過(guò)之后，下一步就是確定頁(yè)面輸出物清單。
頁(yè)面輸出物清單
2.2.3后期調整階段
在做運營(yíng)活動(dòng)時(shí)最常見(jiàn)的有兩種情況，一個(gè)是開(kāi)發(fā)技術(shù)實(shí)現的問(wèn)題;一個(gè)是文案調整更換。面對這個(gè)如何解決?首先是心態(tài)調整，平常心對待即可，因為設計過(guò)程中，中途要修改文案或臨時(shí)要修改文案都是非常普遍的事情(這個(gè)事實(shí)并不開(kāi)心)。
具體調整的時(shí)候，遵循先溝通再修改/先緊急再一般的原則;
(1)先溝通再修改。其實(shí)在整個(gè)設計過(guò)程中都會(huì )涉及到溝通的問(wèn)題，前面我們已經(jīng)提到了，在拿到需求的前期就是有很多個(gè)溝通環(huán)節，同樣的在整個(gè)頁(yè)面設計完成后，我們需要給到自己的老大或者運營(yíng)審核對不對?而通常情況下，他們都會(huì )給到一些自己的建議或看法，那么作為設計師的你肯定是要虛心聽(tīng)取，也要有自己的想法了，這個(gè)時(shí)候的溝通協(xié)商就很重要了，比如哪些地方設計師是應該改的，哪些地方是可以說(shuō)服運營(yíng)接受的，哪些地方應該繼續完善的，所有這些都需要去溝通協(xié)商。
(2)先緊急再一般。事情分輕重緩急，修改也一樣，也分緊急和不緊急，這個(gè)時(shí)候就不一定是按照從上而下的順序來(lái)修改了，而是要有優(yōu)先級，什么事情比較緊急就先做那件事情，所以這就要視具體情況而定了。
三、沉淀&總結
一次運營(yíng)的結束并不是產(chǎn)品宣傳的終止，要想下次還能獲得好的宣傳效果就必須總結經(jīng)驗。比如說(shuō)工作流程，溝通需求的技巧等，好的就沉淀，不順暢的就優(yōu)化。
3.1沉淀
3.1.1效果跟蹤：比如公司的數據比較好的話(huà)，可以通過(guò)數據來(lái)觀(guān)察用戶(hù)的反饋，你都能從中獲知你的設計存在的問(wèn)題。為什么這次的問(wèn)診支付量。
3.1.2規范沉淀：總結制定設計規范，這樣組內其他同學(xué)或者自己下次運營(yíng)設計的時(shí)候，就有很多元素可以復用的，圖片的尺寸也有統一的標準，可以大大提高效率。
3.1.3問(wèn)題梳理：整個(gè)需求走下來(lái)，其實(shí)面臨了大大小小的難題。問(wèn)題是怎么出現的，你是如何克服的，如何解決的，心里路程是怎樣的，都可以進(jìn)行記錄。分類(lèi)整理，規避問(wèn)題，高效的設計。例如切圖，當視覺(jué)稿確認之后，先把有把握的設計圖進(jìn)行標注，切圖，減少不必要的溝通(在與開(kāi)發(fā)看來(lái)是不必要的)。
在這里，其實(shí)都是說(shuō)要嚴格要求自己。有些時(shí)候，需求比較緊急，自我的設計水平?jīng)]考慮到，產(chǎn)品也上線(xiàn)了，這個(gè)時(shí)候發(fā)現設計有些漏洞，但開(kāi)發(fā)說(shuō)已經(jīng)上線(xiàn)了，更換的話(huà)比較麻煩，況且你說(shuō)的改動(dòng)，問(wèn)題不大，之類(lèi)的話(huà)語(yǔ)。不管怎么的結果，都可以在基礎上打磨，不僅是考驗對設計的耐心，對工作的態(tài)度：無(wú)論做的好與不好，都要繼續挖掘自己的潛力。
3.2總結
(1)好的運營(yíng)設計需要平時(shí)不斷的積累，優(yōu)秀作品收集，不斷練習，都是很好的積累途徑。
(2)需求階段，找準核心很重要，深入溝通是關(guān)鍵。要找到核心點(diǎn)和表現的優(yōu)先次序，再去設計。
(3)設計階段，先尋找創(chuàng )意思路，然后構思合適的版式，并且要考慮設計投放的環(huán)境，最后要找到合適的方法包裝方案，推動(dòng)方案。
(4)設計上線(xiàn)并不是產(chǎn)品宣傳的終止，需要效果跟蹤，是為了下一次的設計，也為了自己的沉淀。
以上就是我對運營(yíng)H5設計的總結梳理，如有好的建議請各位留下寶貴的意見(jiàn)。
希望我們都能夠在設計的路上，對于接手過(guò)的設計需求能夠有階段性的沉淀和總結，構建自己的設計體系。加油，不枉自己的青春。
【h5設計心得體會(huì )】相關(guān)文章：
設計心得體會(huì )12-10
設計心得體會(huì )范例05-24
網(wǎng)站設計心得體會(huì )06-10
作業(yè)設計的心得體會(huì )08-01
設計實(shí)踐心得體會(huì )01-10
字體設計心得體會(huì )01-22
作業(yè)設計心得體會(huì )08-13
教學(xué)設計心得體會(huì )08-09
課程設計的心得體會(huì )01-16