2023年實踐總結(jié)運營H5設(shè)計總結(jié)

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