h5設計心得體會(huì )

h5設計心得體會(huì )

　　我們心里有一些收獲后，常�？梢詫⑺鼈儗�(xiě)成一篇心得體會(huì )，這樣能夠讓人頭腦更加清醒，目標更加明確。是不是無(wú)從下筆、沒(méi)有頭緒？以下是小編為大家整理的h5設計心得體會(huì )，希望能夠幫助到大家。

　　一、運營(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ì )】相關(guān)文章：

廣告設計課程中引入H5廣告的必要性論文07-03

設計課程設計心得體會(huì )06-06

課程設計設計心得體會(huì )09-30

設計心得體會(huì )12-29

設計心得體會(huì )05-02

機械設計課程設計心得體會(huì )07-04

設計作品心得體會(huì )10-26

作業(yè)設計心得體會(huì )（經(jīng)典）11-10

設計制作心得體會(huì )02-28

教學(xué)設計的心得體會(huì )01-13