- 相關(guān)推薦
h5設(shè)計(jì)心得體會
當(dāng)我們對人生或者事物有了新的思考時(shí)，不妨將其寫成一篇心得體會，讓自己銘記于心，這樣可以記錄我們的思想活動。那么要如何寫呢？下面是小編為大家整理的h5設(shè)計(jì)心得體會，僅供參考，希望能夠幫助到大家。
一、運(yùn)營H5概況：
1.1APP產(chǎn)品流程(運(yùn)營設(shè)計(jì)的相關(guān)背景)
先說說產(chǎn)品的流程，移動產(chǎn)品從出生到和用戶見面大多都會經(jīng)歷這么幾個(gè)階段：
在功能定位——交互流程(Ui)——視覺界面(GUI)——開發(fā)和測試，這幾個(gè)步驟，基本實(shí)現(xiàn)了產(chǎn)品從0到1。如果要公司戰(zhàn)略中考慮將上線的APP被更多的用戶見到、使用到，那么就需要運(yùn)營登上歷史舞臺了;
1.2UI設(shè)計(jì)分工/職責(zé)
公司如果規(guī)模比較大，產(chǎn)品需求和運(yùn)營需求都會分配到對應(yīng)的產(chǎn)品UI設(shè)計(jì)師或者運(yùn)營設(shè)計(jì)師，他們負(fù)責(zé)那些工作呢? 產(chǎn)品設(shè)計(jì)：界面布局的合理性以及如何引導(dǎo)用戶完成操作等流程化設(shè)計(jì);運(yùn)營設(shè)計(jì)：活動專題、焦點(diǎn)圖(banner)等更加偏向于視覺化和營銷類的設(shè)計(jì)。而在運(yùn)營H5頁面設(shè)計(jì)中，它需要考慮的是這兩個(gè)的集合，一要兼顧視覺化的、創(chuàng)意的、吸引人的，也要兼顧能合理布局頁面信息，引導(dǎo)用戶進(jìn)行操作(購買/收藏等行為)。
1.3運(yùn)營H5活動的功能目標(biāo)
正如《交互設(shè)計(jì)精髓》這本書中開篇提到的——以目標(biāo)為導(dǎo)向進(jìn)行設(shè)計(jì)，運(yùn)營活動也不例外，運(yùn)營需求的功能目標(biāo)總結(jié)為四個(gè)類型：01活動運(yùn)營型：游戲/邀請函/賀卡/測試;02品牌宣傳型：公司/產(chǎn)品的微官網(wǎng);03產(chǎn)品介紹型：提升轉(zhuǎn)化率;04總結(jié)報(bào)告型：增加用戶粘性;
1.4運(yùn)營H5活動表現(xiàn)形式
目前比較常見的有四種類型：01簡單圖文;02紅包/送券/賀卡/邀請函;03做任務(wù)：問答/評分/測試;04游戲;
1.5公司運(yùn)營情況
由于每個(gè)公司針對的用戶群不一樣，因此在具體的運(yùn)營需求，其需求的功能目標(biāo)也會不一。如媽咪知道，運(yùn)營需求每個(gè)月都會有，尤其是在產(chǎn)品發(fā)布新功能、節(jié)日(春節(jié)/端午/中秋等)、重大活動(公司周年/問診節(jié)等)這幾個(gè)時(shí)期提需求，具體的功能目標(biāo)如下：
20xx年第四個(gè)季度運(yùn)營需求
二、運(yùn)營H5設(shè)計(jì)流程
在了解了運(yùn)營H5活動的一個(gè)基本概況后，能幫助我們在做設(shè)計(jì)的時(shí)候，以目標(biāo)為導(dǎo)向進(jìn)行設(shè)計(jì)，當(dāng)然落到實(shí)際情況，接到運(yùn)營H5需求，也還是需要考量視覺層面的東西。
2.1日常準(zhǔn)備
好設(shè)計(jì)來自有準(zhǔn)備，在這里我做的準(zhǔn)備如下：
2.1.1觀察生活，記錄靈感。線下：商場的櫥窗設(shè)計(jì)，廣告招貼畫，地鐵的廣告貼;線上：競品，電商等app;與美術(shù)有關(guān)的：插畫，漫畫等，用心去觀察，隨時(shí)記錄自己當(dāng)時(shí)的靈感，都是以后設(shè)計(jì)中的財(cái)富。
2.1.2收集和整理。每逢節(jié)假日，淘寶，京東，外賣的app的營宣活動特別多，及時(shí)參與，及時(shí)截圖保存，競品的相關(guān)醫(yī)學(xué)類的活動也是及時(shí)參與，了解其的玩法和現(xiàn)有的設(shè)計(jì)手法。靈感庫網(wǎng)上還有推薦Dribble、Behance、pinterest、花瓣、Google的Panda插件)等，個(gè)人的收藏習(xí)慣中比較偏好花瓣，只要你有網(wǎng)絡(luò)，手機(jī)/公司電腦/家里電腦都可以隨時(shí)看。
花瓣畫板
tip01:對于建立畫板名稱看個(gè)人習(xí)慣，分組和命名方式完全依照自己的習(xí)慣記憶和搜索方式來定即可。
tip02:需要每天刷，大量的閱覽，搜集喜歡的需要的，并隔一段時(shí)間做刪減工作，刪去覺得已經(jīng)過時(shí)了的、沒用的(畢竟隨著實(shí)戰(zhàn)經(jīng)驗(yàn)和眼界的提升，有些圖看不上了嘛)。tip03:可以嘗試分析她們的優(yōu)缺點(diǎn)，如果可以的話以郵件方式給內(nèi)部組員分享。
2.1.3練習(xí)與模仿。好的效果和展現(xiàn)形式都可以模仿，字體變形，光影表現(xiàn)等，基本的技法都是可以在平時(shí)積累的。題主比較懶，這個(gè)我平時(shí)一般看到好的，會收集起來，在實(shí)踐過程中，直接復(fù)制粘貼，臨摹。
2.1.4公司資源管理策略。對于這點(diǎn)題主表示很有發(fā)言權(quán)，剛進(jìn)到公司，我不知道自己要達(dá)到一個(gè)設(shè)計(jì)水準(zhǔn)，也不知道同組設(shè)計(jì)師的設(shè)計(jì)水準(zhǔn)，如果公司有共享文件，可以借熟悉公司環(huán)境的前兩天了解一下(剛?cè)肼氁话悴粫苯o你需求，時(shí)間還比較寬裕)。題主的的做法是在share查看之前的設(shè)計(jì)，了解你要輸出的產(chǎn)物list，如何管理輸出物文件(命名/文件夾管理等)。獲知你大概要達(dá)到的高度，或者是否可以超越，能否有直接挪用的資源，哪種手段不太熟悉可以直接詢問同事(一般做設(shè)計(jì)的同事都比較友善的)。
準(zhǔn)備工作大致是四個(gè)思路，基本可以為幫助你在實(shí)際項(xiàng)目中，幫你快速得到創(chuàng)作源泉和靈感，大大提高你的工作效率。
2.2真正實(shí)戰(zhàn)
2.2.1前期準(zhǔn)備
這個(gè)階段主要包含這四個(gè)方面：溝通需求/分析定位/風(fēng)格確定/視覺推導(dǎo)。
已之前的媽咪問診節(jié)開幕活動的需求為例來闡述。
交互稿(ppt文件)
(1)溝通需求階段(分析定位)：
做設(shè)計(jì)的話，溝通肯定是必不可少的了，這里分別涉及到了跟需求人(主要是運(yùn)營策劃)/交互設(shè)計(jì)師/前端設(shè)計(jì)師/領(lǐng)導(dǎo)之間的溝通，題主剛接手運(yùn)營H5設(shè)計(jì)欠缺這塊經(jīng)驗(yàn)，有一個(gè)設(shè)計(jì)反復(fù)被要求改稿，反思了，就是因?yàn)榍捌跍贤ㄟ@一環(huán)節(jié)出了問題。可見前期溝通時(shí)多重要的事情啊，千萬不能少這一步驟。后來我是怎么完善的呢? 首先，好的習(xí)慣是，從運(yùn)營策劃那拿到交互稿后，從上到下完整的先過一遍交互稿，一方面是看交互稿的內(nèi)容完不完整，是不是還有些內(nèi)容點(diǎn)忘記做了，另一方面也會咨詢一下交互設(shè)計(jì)師，有哪些地方是需要設(shè)計(jì)師特別注意的啊，有沒有什么內(nèi)容是要優(yōu)先做的啊等等，如果沒有特殊要求的話，我一般都是會從彈窗開始。
其次，頁面信息涉及到手機(jī)號碼/錯誤提示/日期選擇/地址輸入等內(nèi)容，一方面需要和運(yùn)營策劃溝通，是否需要手機(jī)驗(yàn)證碼;另一方面也需要和開發(fā)溝通，詢問是否他們H5的模版(時(shí)間選擇器/地址選擇器等)如果有的話，就不必花費(fèi)時(shí)間進(jìn)行設(shè)計(jì)，因?yàn)殚_發(fā)也不會按照一個(gè)運(yùn)營活動單獨(dú)寫一個(gè)實(shí)現(xiàn)的代碼，不過記得在tapd需求單上進(jìn)行備注，以及和需求&;開發(fā)同步。如果沒有，作為設(shè)計(jì)師的你那就需要考慮各種狀態(tài)的設(shè)計(jì)等。
第三，詢問彈窗的文案標(biāo)題這些是否是最后確認(rèn)了，以免涉及到字體變形最后發(fā)現(xiàn)文案要改那真是麻煩，如果拿到需求覺得標(biāo)題不是特別好或者有疑問的時(shí)候，最好和運(yùn)營直接溝通商量，看能不能對文案有一些修改調(diào)整，私自改動那將面對后期改動的慘劇。
第四，溝通階段的，關(guān)鍵的點(diǎn)在于準(zhǔn)確了解運(yùn)營活動的意圖/定位。通過運(yùn)營活動傳達(dá)一種什么目的/態(tài)度，營造一種什么氣氛，好玩的，有趣的，暖心的，促銷的，還是高端大氣的。雖然現(xiàn)在風(fēng)格可以我們自己來定，但決定權(quán)還是沒有那么大，在需求溝通階段還是最好詢問一下，以免走偏。
以上就是我的一些前期準(zhǔn)備工作，算是溝通完了，接下來我們繼續(xù)看。
(2)風(fēng)格確定階段
需要考慮到活動的受眾人群的年齡和活動主題的氣質(zhì)色彩。由于運(yùn)營活動主要由運(yùn)營組提出，磨合多了，風(fēng)格彼此了然，但是醫(yī)學(xué)小組或者其他的提出H5需求，設(shè)計(jì)師可以將各類型風(fēng)格展示出來，給對方挑選一個(gè)合適的方向。
大致風(fēng)格就是這么幾種。
設(shè)計(jì)經(jīng)驗(yàn)：01預(yù)防針：了解對方思路，大家腦海里也許已經(jīng)有一個(gè)大概的風(fēng)格印象。02根據(jù)活動的上線時(shí)間長短，時(shí)間，個(gè)人能力等條件來選擇;03不要被風(fēng)格約束，能夠自由發(fā)揮，不要總做同一種風(fēng)格，希望有所嘗試。
對接需求時(shí)，我也會和運(yùn)營說一下自己的意見：不想太約束，能夠自由發(fā)揮，不想總做同一種風(fēng)格，希望有所嘗試。
這一階段傳達(dá)主要目的：需求方腦海里也許已經(jīng)有一個(gè)大概的樣子模型。但我們也不能夠說得太細(xì)，只是需要了解方向思路對不對就好了，一方面是因?yàn)檫�沒有開始執(zhí)行你也沒法具體到很細(xì)致的地方，另一方面是因?yàn)�，如果一開始就把整個(gè)頁面的設(shè)計(jì)全定死了，那往后如果出現(xiàn)突發(fā)情況或者被需求人誤以為頁面就是這樣了，后面你想靈活發(fā)揮就很難了。
(3)視覺推導(dǎo)階段：
通過重要的溝通階段(風(fēng)格確定階段可有可無，前期可能需要，但隨著需求接的多了，對方會信任你的設(shè)計(jì)，不用每次有需要確認(rèn)風(fēng)格)，那接下來很重要的事情就是勾畫草圖，找感覺。(運(yùn)營H5活動，一般是入口和頁面構(gòu)成，像我所在的公司，運(yùn)營H5入口為彈窗，那彈窗的重要性可想而知，需要考究之前所說的視覺化的、創(chuàng)意的、吸引人的，如果有些H5活動不需要入口，那第一個(gè)頁面的視覺為先來考慮。) 第一個(gè)問題來了，在繪制草圖時(shí)如何構(gòu)思?
題外話：我實(shí)習(xí)的時(shí)候，運(yùn)營H5活動基本是和我坐正對面的美女設(shè)計(jì)師芳芳包攬的，但后期工作需求的調(diào)整，運(yùn)營H5開始分配到了我，運(yùn)營設(shè)計(jì)從0到1，起初其實(shí)很害怕，不知道接了需求如何著手開始。和小組成員請教，也沒法得到很詳實(shí)的答案，一點(diǎn)點(diǎn)積累，后來需求接的多了，突然想明白了，這不是類似于寫作文嘛，寫作文列提綱，那同樣的，接到需求后，根據(jù)活動的上線內(nèi)容和要求，提取關(guān)鍵詞等頭腦方式來進(jìn)行聯(lián)想，是最終畫面效果符合活動主題。
比如說節(jié)日類型的活動需求--中秋節(jié)，她有哪些元素呢?月亮，嫦娥，兔子，桂樹，月餅等;圣誕節(jié)：圣誕樹，圣誕老師，襪子，禮棒，圣誕顏色(紅綠白)等;這些元素可能一下子考慮不全，沒關(guān)系，咱們可以上花瓣搜，關(guān)聯(lián)搜索，獲取大概等元素，然后組合繪制草圖。
在[媽咪問診節(jié)盛大開幕]活動中，我提取的關(guān)鍵詞如下：
媽咪問診節(jié)-關(guān)鍵詞提取
你可能會問我，能不能在花瓣上去找出完全一模一樣的案例，能找到當(dāng)然很好，但是每個(gè)公司的運(yùn)營需求目標(biāo)都不一樣。要找到一摸一樣的這種情況少見，不要太抱希望，有些時(shí)候，根據(jù)關(guān)鍵詞在花瓣或百度查找，找不到合適的素材，那就看丑的素材也能構(gòu)思好的畫面內(nèi)容的，一定要堅(jiān)信自己可以搞定需求。
那第二個(gè)問題，如何做?保守的做法：一般畫2-3個(gè)草圖，可供對方選擇。和需求方溝通需要和運(yùn)營說明的是，草圖是呈現(xiàn)一個(gè)大概的模樣，具體在電腦端設(shè)計(jì)可能有差別，如果在草圖花費(fèi)太多時(shí)間，精力，可能在整個(gè)流程中不太適宜。(有時(shí)候，也會推翻，因此，讓對方提供參考圖，把握大方向，這樣可以避免電腦端快結(jié)束了還要改稿)。
草圖VS成稿
通過以上就是我的一些前期準(zhǔn)備工作，算是溝通完了，接下來我們繼續(xù)看。
2.2.2中期執(zhí)行階段
(1)彈窗/第一個(gè)頁面：
進(jìn)入電腦繪制階段了，是不是好開心啊。因?yàn)樵谏弦粶?zhǔn)備階段中基本找準(zhǔn)了需求核心，可以按照自己的設(shè)計(jì)能力來做設(shè)計(jì)了(說不定還有突破)。從第一頁開始，之前我習(xí)慣先填充畫布的顏色，定個(gè)大氛圍基調(diào)，再做主標(biāo)題的效果，而且不管三七二十一，先做了字體變形再說，最后畫畫面;我知道很多人的習(xí)慣和我一樣，但需求有很多變數(shù)，比如說：
需求方突然要改標(biāo)題文案怎么辦?
把字做好后發(fā)現(xiàn)其他的商品圖或元素怎么排都排不好看了怎么辦? 光做一個(gè)字體設(shè)計(jì)就花費(fèi)了項(xiàng)目一大半的時(shí)間怎么辦? 所以基于種種原因的考慮(說多了都說淚)，我們要學(xué)乖，調(diào)整優(yōu)化自己的做圖順序。
借用婷姐說電商設(shè)計(jì)的話“先把文案先丟在畫布里，弄好畫面形象后再去做標(biāo)題部分的，并且有時(shí)候標(biāo)題字體需要設(shè)計(jì)一下，有時(shí)候只是需要打幾個(gè)字做個(gè)排版就好了，要看具體情況的，因?yàn)椴皇钦f做了字體變形就一定好，不做字體變形就一定不好”。
繪制彈窗之后，及時(shí)和需求方對第一個(gè)圖，以免方向走偏，走偏了之后也能及時(shí)調(diào)整，不浪費(fèi)更多的時(shí)間。(確定彈窗可能需要一段時(shí)間，這期間，可以著手做別的設(shè)計(jì)需求，時(shí)間有效利用，不要干等運(yùn)營的回復(fù)，當(dāng)然你可以主動問。) 是不是說漏了一個(gè)配色?
我的主要依據(jù)01活動定位/目的;02產(chǎn)品app的品牌調(diào)性進(jìn)行選擇;03數(shù)據(jù)統(tǒng)計(jì)等。如媽咪知道的針對用戶群，因此色彩選擇上使用活力，明艷的顏色，色調(diào)一般偏明亮調(diào)，黃色/粉色都比較吸引用戶的點(diǎn)擊。
配色
(2)其他頁面設(shè)計(jì)
彈唱確定之后，繼續(xù)下一個(gè)頁面，看到紅色標(biāo)識的頁面，怎么設(shè)計(jì)頁面、布局信息呢?
【h5設(shè)計(jì)心得體會】相關(guān)文章：
設(shè)計(jì)心得體會03-15
機(jī)械設(shè)計(jì)課程設(shè)計(jì)心得體會02-15
化工設(shè)計(jì)心得體會04-29