HTML5是Web中核心語(yǔ)言HTML的規(guī)范，用戶使用任何手段進(jìn)行網(wǎng)頁(yè)瀏覽時(shí)看到的內(nèi)容原本都是HTML格式的，在瀏覽器中通過(guò)一些技術(shù)處理將其轉(zhuǎn)換成為了可識(shí)別的信息。下面就是小編給大家?guī)?lái)的h5設(shè)計(jì)心得體會(huì)，希望能幫助到大家!

h5設(shè)計(jì)心得體會(huì)篇1

一、運(yùn)營(yíng)H5概況：

1.1APP產(chǎn)品流程(運(yùn)營(yíng)設(shè)計(jì)的相關(guān)背景)

先說(shuō)說(shuō)產(chǎn)品的流程，移動(dòng)產(chǎn)品從出生到和用戶見(jiàn)面大多都會(huì)經(jīng)歷這么幾個(gè)階段：

在功能定位——交互流程(Ui)——視覺(jué)界面(GUI)——開(kāi)發(fā)和測(cè)試，這幾個(gè)步驟，基本實(shí)現(xiàn)了產(chǎn)品從0到1。如果要公司戰(zhàn)略中考慮將上線的APP被更多的用戶見(jiàn)到、使用到，那么就需要運(yùn)營(yíng)登上歷史舞臺(tái)了;

1.2UI設(shè)計(jì)分工/職責(zé)

公司如果規(guī)模比較大，產(chǎn)品需求和運(yùn)營(yíng)需求都會(huì)分配到對(duì)應(yīng)的產(chǎn)品UI設(shè)計(jì)師或者運(yùn)營(yíng)設(shè)計(jì)師，他們負(fù)責(zé)那些工作呢?

產(chǎn)品設(shè)計(jì)：界面布局的合理性以及如何引導(dǎo)用戶完成操作等流程化設(shè)計(jì);運(yùn)營(yíng)設(shè)計(jì)：活動(dòng)專題、焦點(diǎn)圖(banner)等更加偏向于視覺(jué)化和營(yíng)銷類的設(shè)計(jì)。而在運(yùn)營(yíng)H5頁(yè)面設(shè)計(jì)中，它需要考慮的是這兩個(gè)的集合，一要兼顧視覺(jué)化的、創(chuàng)意的、吸引人的，也要兼顧能合理布局頁(yè)面信息，引導(dǎo)用戶進(jìn)行操作(購(gòu)買/收藏等行為)。

1.3運(yùn)營(yíng)H5活動(dòng)的功能目標(biāo)

正如《交互設(shè)計(jì)精髓》這本書中開(kāi)篇提到的——以目標(biāo)為導(dǎo)向進(jìn)行設(shè)計(jì)，運(yùn)營(yíng)活動(dòng)也不例外，運(yùn)營(yíng)需求的功能目標(biāo)總結(jié)為四個(gè)類型：01活動(dòng)運(yùn)營(yíng)型：游戲/邀請(qǐng)函/賀卡/測(cè)試;02品牌宣傳型：公司/產(chǎn)品的微官網(wǎng);03產(chǎn)品介紹型：提升轉(zhuǎn)化率;04總結(jié)報(bào)告型：增加用戶粘性;

1.4運(yùn)營(yíng)H5活動(dòng)表現(xiàn)形式

目前比較常見(jiàn)的有四種類型：01簡(jiǎn)單圖文;02紅包/送券/賀卡/邀請(qǐng)函;03做任務(wù)：?jiǎn)柎?評(píng)分/測(cè)試;04游戲;

1.5公司運(yùn)營(yíng)情況

由于每個(gè)公司針對(duì)的用戶群不一樣，因此在具體的運(yùn)營(yíng)需求，其需求的功能目標(biāo)也會(huì)不一。如媽咪知道，運(yùn)營(yíng)需求每個(gè)月都會(huì)有，尤其是在產(chǎn)品發(fā)布新功能、節(jié)日(春節(jié)/端午/中秋等)、重大活動(dòng)(公司周年/問(wèn)診節(jié)等)這幾個(gè)時(shí)期提需求，具體的功能目標(biāo)如下：

20_年第四個(gè)季度運(yùn)營(yíng)需求

二、運(yùn)營(yíng)H5設(shè)計(jì)流程

在了解了運(yùn)營(yíng)H5活動(dòng)的一個(gè)基本概況后，能幫助我們?cè)谧鲈O(shè)計(jì)的時(shí)候，以目標(biāo)為導(dǎo)向進(jìn)行設(shè)計(jì)，當(dāng)然落到實(shí)際情況，接到運(yùn)營(yíng)H5需求，也還是需要考量視覺(jué)層面的東西。

2.1日常準(zhǔn)備

好設(shè)計(jì)來(lái)自有準(zhǔn)備，在這里我做的準(zhǔn)備如下：

2.1.1觀察生活，記錄靈感。線下：商場(chǎng)的櫥窗設(shè)計(jì)，廣告招貼畫，地鐵的廣告貼;線上：競(jìng)品，電商等app;與美術(shù)有關(guān)的：插畫，漫畫等，用心去觀察，隨時(shí)記錄自己當(dāng)時(shí)的靈感，都是以后設(shè)計(jì)中的財(cái)富。

2.1.2收集和整理。每逢節(jié)假日，淘寶，京東，外賣的app的營(yíng)宣活動(dòng)特別多，及時(shí)參與，及時(shí)截圖保存，競(jìng)品的相關(guān)醫(yī)學(xué)類的活動(dòng)也是及時(shí)參與，了解其的玩法和現(xiàn)有的設(shè)計(jì)手法。靈感庫(kù)網(wǎng)上還有推薦Dribble、Behance、pinterest、花瓣、Google的Panda插件)等，個(gè)人的收藏習(xí)慣中比較偏好花瓣，只要你有網(wǎng)絡(luò)，手機(jī)/公司電腦/家里電腦都可以隨時(shí)看。

花瓣畫板

tip01:對(duì)于建立畫板名稱看個(gè)人習(xí)慣，分組和命名方式完全依照自己的習(xí)慣記憶和搜索方式來(lái)定即可。tip02:需要每天刷，大量的閱覽，搜集喜歡的需要的，并隔一段時(shí)間做刪減工作，刪去覺(jué)得已經(jīng)過(guò)時(shí)了的、沒(méi)用的(畢竟隨著實(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í)一般看到好的，會(huì)收集起來(lái)，在實(shí)踐過(guò)程中，直接復(fù)制粘貼，臨摹。

2.1.4公司資源管理策略。對(duì)于這點(diǎn)題主表示很有發(fā)言權(quán)，剛進(jìn)到公司，我不知道自己要達(dá)到一個(gè)設(shè)計(jì)水準(zhǔn)，也不知道同組設(shè)計(jì)師的設(shè)計(jì)水準(zhǔn)，如果公司有共享文件，可以借熟悉公司環(huán)境的前兩天了解一下(剛?cè)肼氁话悴粫?huì)著急給你需求，時(shí)間還比較寬裕)。題主的的做法是在share查看之前的設(shè)計(jì)，了解你要輸出的產(chǎn)物list，如何管理輸出物文件(命名/文件夾管理等)。獲知你大概要達(dá)到的高度，或者是否可以超越，能否有直接挪用的資源，哪種手段不太熟悉可以直接詢問(wèn)同事(一般做設(shè)計(jì)的同事都比較友善的)。

準(zhǔn)備工作大致是四個(gè)思路，基本可以為幫助你在實(shí)際項(xiàng)目中，幫你快速得到創(chuàng)作源泉和靈感，大大提高你的工作效率。

2.2真正實(shí)戰(zhàn)

2.2.1前期準(zhǔn)備

這個(gè)階段主要包含這四個(gè)方面：溝通需求/分析定位/風(fēng)格確定/視覺(jué)推導(dǎo)。

已之前的媽咪問(wèn)診節(jié)開(kāi)幕活動(dòng)的需求為例來(lái)闡述。

交互稿(ppt文件)

(1)溝通需求階段(分析定位)：

做設(shè)計(jì)的話，溝通肯定是必不可少的了，這里分別涉及到了跟需求人(主要是運(yùn)營(yíng)策劃)/交互設(shè)計(jì)師/前端設(shè)計(jì)師/領(lǐng)導(dǎo)之間的溝通，題主剛接手運(yùn)營(yíng)H5設(shè)計(jì)欠缺這塊經(jīng)驗(yàn)，有一個(gè)設(shè)計(jì)反復(fù)被要求改稿，反思了，就是因?yàn)榍捌跍贤ㄟ@一環(huán)節(jié)出了問(wèn)題。可見(jiàn)前期溝通時(shí)多重要的事情啊，千萬(wàn)不能少這一步驟。后來(lái)我是怎么完善的呢?

首先，好的習(xí)慣是，從運(yùn)營(yíng)策劃那拿到交互稿后，從上到下完整的先過(guò)一遍交互稿，一方面是看交互稿的內(nèi)容完不完整，是不是還有些內(nèi)容點(diǎn)忘記做了，另一方面也會(huì)咨詢一下交互設(shè)計(jì)師，有哪些地方是需要設(shè)計(jì)師特別注意的啊，有沒(méi)有什么內(nèi)容是要優(yōu)先做的啊等等，如果沒(méi)有特殊要求的話，我一般都是會(huì)從彈窗開(kāi)始。

其次，頁(yè)面信息涉及到手機(jī)號(hào)碼/錯(cuò)誤提示/日期選擇/地址輸入等內(nèi)容，一方面需要和運(yùn)營(yíng)策劃溝通，是否需要手機(jī)驗(yàn)證碼;另一方面也需要和開(kāi)發(fā)溝通，詢問(wèn)是否他們H5的模版(時(shí)間選擇器/地址選擇器等)如果有的話，就不必花費(fèi)時(shí)間進(jìn)行設(shè)計(jì)，因?yàn)殚_(kāi)發(fā)也不會(huì)按照一個(gè)運(yùn)營(yíng)活動(dòng)單獨(dú)寫一個(gè)實(shí)現(xiàn)的代碼，不過(guò)記得在tapd需求單上進(jìn)行備注，以及和需求&開(kāi)發(fā)同步。如果沒(méi)有，作為設(shè)計(jì)師的你那就需要考慮各種狀態(tài)的設(shè)計(jì)等。

第三，詢問(wèn)彈窗的文案標(biāo)題這些是否是最后確認(rèn)了，以免涉及到字體變形最后發(fā)現(xiàn)文案要改那真是麻煩，如果拿到需求覺(jué)得標(biāo)題不是特別好或者有疑問(wèn)的時(shí)候，最好和運(yùn)營(yíng)直接溝通商量，看能不能對(duì)文案有一些修改調(diào)整，私自改動(dòng)那將面對(duì)后期改動(dòng)的慘劇。

第四，溝通階段的，關(guān)鍵的點(diǎn)在于準(zhǔn)確了解運(yùn)營(yíng)活動(dòng)的意圖/定位。通過(guò)運(yùn)營(yíng)活動(dòng)傳達(dá)一種什么目的/態(tài)度，營(yíng)造一種什么氣氛，好玩的，有趣的，暖心的，促銷的，還是高端大氣的。雖然現(xiàn)在風(fēng)格可以我們自己來(lái)定，但決定權(quán)還是沒(méi)有那么大，在需求溝通階段還是最好詢問(wèn)一下，以免走偏。

以上就是我的一些前期準(zhǔn)備工作，算是溝通完了，接下來(lái)我們繼續(xù)看。

(2)風(fēng)格確定階段

需要考慮到活動(dòng)的受眾人群的年齡和活動(dòng)主題的氣質(zhì)色彩。由于運(yùn)營(yíng)活動(dòng)主要由運(yùn)營(yíng)組提出，磨合多了，風(fēng)格彼此了然，但是醫(yī)學(xué)小組或者其他的提出H5需求，設(shè)計(jì)師可以將各類型風(fēng)格展示出來(lái)，給對(duì)方挑選一個(gè)合適的方向。

大致風(fēng)格就是這么幾種。

設(shè)計(jì)經(jīng)驗(yàn)：01預(yù)防針：了解對(duì)方思路，大家腦海里也許已經(jīng)有一個(gè)大概的風(fēng)格印象。02根據(jù)活動(dòng)的上線時(shí)間長(zhǎng)短，時(shí)間，個(gè)人能力等條件來(lái)選擇;03不要被風(fēng)格約束，能夠自由發(fā)揮，不要總做同一種風(fēng)格，希望有所嘗試。

對(duì)接需求時(shí)，我也會(huì)和運(yùn)營(yíng)說(shuō)一下自己的意見(jiàn)：不想太約束，能夠自由發(fā)揮，不想總做同一種風(fēng)格，希望有所嘗試。

這一階段傳達(dá)主要目的：需求方腦海里也許已經(jīng)有一個(gè)大概的樣子模型。但我們也不能夠說(shuō)得太細(xì)，只是需要了解方向思路對(duì)不對(duì)就好了，一方面是因?yàn)檫€沒(méi)有開(kāi)始執(zhí)行你也沒(méi)法具體到很細(xì)致的地方，另一方面是因?yàn)?，如果一開(kāi)始就把整個(gè)頁(yè)面的設(shè)計(jì)全定死了，那往后如果出現(xiàn)突發(fā)情況或者被需求人誤以為頁(yè)面就是這樣了，后面你想靈活發(fā)揮就很難了。

(3)視覺(jué)推導(dǎo)階段：

通過(guò)重要的溝通階段(風(fēng)格確定階段可有可無(wú)，前期可能需要，但隨著需求接的多了，對(duì)方會(huì)信任你的設(shè)計(jì)，不用每次有需要確認(rèn)風(fēng)格)，那接下來(lái)很重要的事情就是勾畫草圖，找感覺(jué)。(運(yùn)營(yíng)H5活動(dòng)，一般是入口和頁(yè)面構(gòu)成，像我所在的公司，運(yùn)營(yíng)H5入口為彈窗，那彈窗的重要性可想而知，需要考究之前所說(shuō)的視覺(jué)化的、創(chuàng)意的、吸引人的，如果有些H5活動(dòng)不需要入口，那第一個(gè)頁(yè)面的視覺(jué)為先來(lái)考慮。)

第一個(gè)問(wèn)題來(lái)了，在繪制草圖時(shí)如何構(gòu)思?

題外話：我實(shí)習(xí)的時(shí)候，運(yùn)營(yíng)H5活動(dòng)基本是和我坐正對(duì)面的美女設(shè)計(jì)師芳芳包攬的，但后期工作需求的調(diào)整，運(yùn)營(yíng)H5開(kāi)始分配到了我，運(yùn)營(yíng)設(shè)計(jì)從0到1，起初其實(shí)很害怕，不知道接了需求如何著手開(kāi)始。和小組成員請(qǐng)教，也沒(méi)法得到很詳實(shí)的答案，一點(diǎn)點(diǎn)積累，后來(lái)需求接的多了，突然想明白了，這不是類似于寫作文嘛，寫作文列提綱，那同樣的，接到需求后，根據(jù)活動(dòng)的上線內(nèi)容和要求，提取關(guān)鍵詞等頭腦方式來(lái)進(jìn)行聯(lián)想，是最終畫面效果符合活動(dòng)主題。

比如說(shuō)節(jié)日類型的活動(dòng)需求--中秋節(jié)，她有哪些元素呢?月亮，嫦娥，兔子，桂樹(shù)，月餅等;圣誕節(jié)：圣誕樹(shù)，圣誕老師，襪子，禮棒，圣誕顏色(紅綠白)等;這些元素可能一下子考慮不全，沒(méi)關(guān)系，咱們可以上花瓣搜，關(guān)聯(lián)搜索，獲取大概等元素，然后組合繪制草圖。

在[媽咪問(wèn)診節(jié)盛大開(kāi)幕]活動(dòng)中，我提取的關(guān)鍵詞如下：

媽咪問(wèn)診節(jié)-關(guān)鍵詞提取

你可能會(huì)問(wèn)我，能不能在花瓣上去找出完全一模一樣的案例，能找到當(dāng)然很好，但是每個(gè)公司的運(yùn)營(yíng)需求目標(biāo)都不一樣。要找到一摸一樣的這種情況少見(jiàn)，不要太抱希望，有些時(shí)候，根據(jù)關(guān)鍵詞在花瓣或百度查找，找不到合適的素材，那就看丑的素材也能構(gòu)思好的畫面內(nèi)容的，一定要堅(jiān)信自己可以搞定需求。

那第二個(gè)問(wèn)題，如何做?保守的做法：一般畫2-3個(gè)草圖，可供對(duì)方選擇。和需求方溝通需要和運(yùn)營(yíng)說(shuō)明的是，草圖是呈現(xiàn)一個(gè)大概的模樣，具體在電腦端設(shè)計(jì)可能有差別，如果在草圖花費(fèi)太多時(shí)間，精力，可能在整個(gè)流程中不太適宜。(有時(shí)候，也會(huì)推翻，因此，讓對(duì)方提供參考圖，把握大方向，這樣可以避免電腦端快結(jié)束了還要改稿)。

草圖VS成稿

通過(guò)以上就是我的一些前期準(zhǔn)備工作，算是溝通完了，接下來(lái)我們繼續(xù)看。

2.2.2中期執(zhí)行階段

(1)彈窗/第一個(gè)頁(yè)面：

進(jìn)入電腦繪制階段了，是不是好開(kāi)心啊。因?yàn)樵谏弦粶?zhǔn)備階段中基本找準(zhǔn)了需求核心，可以按照自己的設(shè)計(jì)能力來(lái)做設(shè)計(jì)了(說(shuō)不定還有突破)。從第一頁(yè)開(kāi)始，之前我習(xí)慣先填充畫布的顏色，定個(gè)大氛圍基調(diào)，再做主標(biāo)題的效果，而且不管三七二十一，先做了字體變形再說(shuō)，最后畫畫面;我知道很多人的習(xí)慣和我一樣，但需求有很多變數(shù)，比如說(shuō)：

需求方突然要改標(biāo)題文案怎么辦?

把字做好后發(fā)現(xiàn)其他的商品圖或元素怎么排都排不好看了怎么辦?

光做一個(gè)字體設(shè)計(jì)就花費(fèi)了項(xiàng)目一大半的時(shí)間怎么辦?

所以基于種.種原因的考慮(說(shuō)多了都說(shuō)淚)，我們要學(xué)乖，調(diào)整優(yōu)化自己的做圖順序。

借用婷姐說(shuō)電商設(shè)計(jì)的話“先把文案先丟在畫布里，弄好畫面形象后再去做標(biāo)題部分的，并且有時(shí)候標(biāo)題字體需要設(shè)計(jì)一下，有時(shí)候只是需要打幾個(gè)字做個(gè)排版就好了，要看具體情況的，因?yàn)椴皇钦f(shuō)做了字體變形就一定好，不做字體變形就一定不好”。

繪制彈窗之后，及時(shí)和需求方對(duì)第一個(gè)圖，以免方向走偏，走偏了之后也能及時(shí)調(diào)整，不浪費(fèi)更多的時(shí)間。(確定彈窗可能需要一段時(shí)間，這期間，可以著手做別的設(shè)計(jì)需求，時(shí)間有效利用，不要干等運(yùn)營(yíng)的回復(fù)，當(dāng)然你可以主動(dòng)問(wèn)。)

是不是說(shuō)漏了一個(gè)配色?

我的主要依據(jù)01活動(dòng)定位/目的;02產(chǎn)品app的品牌調(diào)性進(jìn)行選擇;03數(shù)據(jù)統(tǒng)計(jì)等。如媽咪知道的針對(duì)用戶群，因此色彩選擇上使用活力，明艷的顏色，色調(diào)一般偏明亮調(diào)，黃色/粉色都比較吸引用戶的點(diǎn)擊。

配色

(2)其他頁(yè)面設(shè)計(jì)

彈唱確定之后，繼續(xù)下一個(gè)頁(yè)面，看到紅色標(biāo)識(shí)的頁(yè)面，怎么設(shè)計(jì)頁(yè)面、布局信息呢?

因?yàn)橐ＷC一個(gè)整體的活動(dòng)頁(yè)面，因此第一個(gè)要做的就是延續(xù)彈窗的視覺(jué)元素：配色、氛圍元素等，第二個(gè)是要對(duì)頁(yè)面信息進(jìn)行梳理層級(jí)關(guān)系，以便用戶的視覺(jué)流線引導(dǎo)。

設(shè)計(jì)原則——建立有效的視覺(jué)層次(手法)，對(duì)頁(yè)面內(nèi)容進(jìn)行組織和區(qū)分優(yōu)先級(jí)。思路整理如下：

01突出-最重要的：字體更粗/大;顏色更特別;留白更多;位置更接近頁(yè)面的頂部。

02分組-類似的：成組，采用類似的顯示樣式;位置：放在一個(gè)定義明確的區(qū)域內(nèi);

03嵌套-組成部分的：隸屬/包含關(guān)系的元素，在視覺(jué)上進(jìn)行嵌套。

交互VS視覺(jué)

最終頁(yè)面如下：

如果頁(yè)面大體設(shè)計(jì)完，給我們的老大和運(yùn)營(yíng)方看過(guò)并通過(guò)之后，下一步就是確定頁(yè)面輸出物清單。

頁(yè)面輸出物清單

2.2.3后期調(diào)整階段

在做運(yùn)營(yíng)活動(dòng)時(shí)最常見(jiàn)的有兩種情況，一個(gè)是開(kāi)發(fā)技術(shù)實(shí)現(xiàn)的問(wèn)題;一個(gè)是文案調(diào)整更換。面對(duì)這個(gè)如何解決?首先是心態(tài)調(diào)整，平常心對(duì)待即可，因?yàn)樵O(shè)計(jì)過(guò)程中，中途要修改文案或臨時(shí)要修改文案都是非常普遍的事情(這個(gè)事實(shí)并不開(kāi)心)。

具體調(diào)整的時(shí)候，遵循先溝通再修改/先緊急再一般的原則;

(1)先溝通再修改。其實(shí)在整個(gè)設(shè)計(jì)過(guò)程中都會(huì)涉及到溝通的問(wèn)題，前面我們已經(jīng)提到了，在拿到需求的前期就是有很多個(gè)溝通環(huán)節(jié)，同樣的在整個(gè)頁(yè)面設(shè)計(jì)完成后，我們需要給到自己的老大或者運(yùn)營(yíng)審核對(duì)不對(duì)?而通常情況下，他們都會(huì)給到一些自己的建議或看法，那么作為設(shè)計(jì)師的你肯定是要虛心聽(tīng)取，也要有自己的想法了，這個(gè)時(shí)候的溝通協(xié)商就很重要了，比如哪些地方設(shè)計(jì)師是應(yīng)該改的，哪些地方是可以說(shuō)服運(yùn)營(yíng)接受的，哪些地方應(yīng)該繼續(xù)完善的，所有這些都需要去溝通協(xié)商。

(2)先緊急再一般。事情分輕重緩急，修改也一樣，也分緊急和不緊急，這個(gè)時(shí)候就不一定是按照從上而下的順序來(lái)修改了，而是要有優(yōu)先級(jí)，什么事情比較緊急就先做那件事情，所以這就要視具體情況而定了。

三、沉淀&總結(jié)

一次運(yùn)營(yíng)的結(jié)束并不是產(chǎn)品宣傳的終止，要想下次還能獲得好的宣傳效果就必須總結(jié)經(jīng)驗(yàn)。比如說(shuō)工作流程，溝通需求的技巧等，好的就沉淀，不順暢的就優(yōu)化。

3.1沉淀

3.1.1 效果跟蹤：比如公司的數(shù)據(jù)比較好的話，可以通過(guò)數(shù)據(jù)來(lái)觀察用戶的反饋，你都能從中獲知你的設(shè)計(jì)存在的問(wèn)題。為什么這次的問(wèn)診支付量。

3.1.2規(guī)范沉淀：總結(jié)制定設(shè)計(jì)規(guī)范，這樣組內(nèi)其他同學(xué)或者自己下次運(yùn)營(yíng)設(shè)計(jì)的時(shí)候，就有很多元素可以復(fù)用的，圖片的尺寸也有統(tǒng)一的標(biāo)準(zhǔn)，可以大大提高效率。

3.1.3問(wèn)題梳理：整個(gè)需求走下來(lái)，其實(shí)面臨了大大小小的難題。問(wèn)題是怎么出現(xiàn)的，你是如何克服的，如何解決的，心里路程是怎樣的，都可以進(jìn)行記錄。分類整理，規(guī)避問(wèn)題，高效的設(shè)計(jì)。例如切圖，當(dāng)視覺(jué)稿確認(rèn)之后，先把有把握的設(shè)計(jì)圖進(jìn)行標(biāo)注，切圖，減少不必要的溝通(在與開(kāi)發(fā)看來(lái)是不必要的)。

在這里，其實(shí)都是說(shuō)要嚴(yán)格要求自己。有些時(shí)候，需求比較緊急，自我的設(shè)計(jì)水平?jīng)]考慮到，產(chǎn)品也上線了，這個(gè)時(shí)候發(fā)現(xiàn)設(shè)計(jì)有些漏洞，但開(kāi)發(fā)說(shuō)已經(jīng)上線了，更換的話比較麻煩，況且你說(shuō)的改動(dòng)，問(wèn)題不大，之類的話語(yǔ)。不管怎么的結(jié)果，都可以在基礎(chǔ)上打磨，不僅是考驗(yàn)對(duì)設(shè)計(jì)的耐心，對(duì)工作的態(tài)度：無(wú)論做的好與不好，都要繼續(xù)挖掘自己的潛力。

3.2總結(jié)

(1)好的運(yùn)營(yíng)設(shè)計(jì)需要平時(shí)不斷的積累，優(yōu)秀作品收集，不斷練習(xí)，都是很好的積累途徑。

(2)需求階段，找準(zhǔn)核心很重要，深入溝通是關(guān)鍵。要找到核心點(diǎn)和表現(xiàn)的優(yōu)先次序，再去設(shè)計(jì)。

(3)設(shè)計(jì)階段，先尋找創(chuàng)意思路，然后構(gòu)思合適的版式，并且要考慮設(shè)計(jì)投放的環(huán)境，最后要找到合適的方法包裝方案，推動(dòng)方案。

(4)設(shè)計(jì)上線并不是產(chǎn)品宣傳的終止，需要效果跟蹤，是為了下一次的設(shè)計(jì)，也為了自己的沉淀。

～～

以上就是我對(duì)運(yùn)營(yíng)H5設(shè)計(jì)的總結(jié)梳理，如有好的建議請(qǐng)各位留下寶貴的意見(jiàn)。

希望我們都能夠在設(shè)計(jì)的路上，對(duì)于接手過(guò)的設(shè)計(jì)需求能夠有階段性的沉淀和總結(jié)，構(gòu)建自己的設(shè)計(jì)體系。加油，不枉自己的青春。

h5設(shè)計(jì)心得體會(huì)篇2

前段時(shí)間接到任務(wù)，需要尋找一個(gè)第三方軟件公司開(kāi)發(fā)一個(gè)節(jié)日游戲h5。

百度一下發(fā)現(xiàn)這類開(kāi)發(fā)公司很多，仔細(xì)比較后選擇了一家廣州公司。用了三天時(shí)間，確定h5細(xì)節(jié)敲定了合同價(jià)格，然后就上報(bào)領(lǐng)導(dǎo)等待批復(fù)。

接著就是長(zhǎng)達(dá)一周的靜默，期間我也催促過(guò)領(lǐng)導(dǎo)早點(diǎn)定下來(lái)，因?yàn)榭鄢_(kāi)發(fā)時(shí)間離預(yù)訂上線的日子已不多。不過(guò)，回復(fù)總是讓我再等等。

提醒領(lǐng)導(dǎo)無(wú)果后，我跟美工說(shuō)明項(xiàng)目的頁(yè)面要求，讓她先設(shè)計(jì)起來(lái)，免得倉(cāng)促之間來(lái)不及。但還是沒(méi)用，領(lǐng)導(dǎo)沒(méi)布置任務(wù)，美工也缺乏動(dòng)力開(kāi)工。

我以為項(xiàng)目要黃，結(jié)果等來(lái)的是贊助找到立刻開(kāi)始。離上線只有5天，但軟件公司光開(kāi)發(fā)就要10天?？胺Q不可能完成的任務(wù)。

跟軟件方反復(fù)協(xié)商后，修改了原方案給為精簡(jiǎn)版h5，即使這樣也很難保證順利交付，而且?guī)缀鯖](méi)有測(cè)試時(shí)間。為此我們還逼迫簽訂了一份免責(zé)協(xié)議。如果，軟件出現(xiàn)問(wèn)題，保證不會(huì)追究軟件方的開(kāi)發(fā)責(zé)任。

在一頓屁滾尿流，連滾帶爬的趕工后，項(xiàng)目終于上線。長(zhǎng)舒一口氣外，還讓我學(xué)到了三點(diǎn)。

1.想辦法提醒領(lǐng)導(dǎo)注意deadline

一般的提醒沒(méi)用后，要試試“威脅”工期來(lái)不及，項(xiàng)目無(wú)法上線，整個(gè)活動(dòng)效果會(huì)大打折扣。先打預(yù)防針，即使后來(lái)真來(lái)不及也不會(huì)太怪你。

2.提前準(zhǔn)備項(xiàng)目資料

催促同事早點(diǎn)準(zhǔn)備資料，想要有效果可能還要依靠領(lǐng)導(dǎo)的命令。遇到問(wèn)題多向領(lǐng)導(dǎo)請(qǐng)示，讓領(lǐng)導(dǎo)為你所用，或獲得授權(quán)方便行事。

3.給自己留足空間

在和乙方商量中，一定要給自己留足空間。計(jì)劃22號(hào)上線，就一定要說(shuō)21號(hào)上午上線。項(xiàng)目中意外一定有，給自己留足“本”才能不手忙腳亂。

h5設(shè)計(jì)心得體會(huì)篇3

1、交互上，慎用向右滑動(dòng)的操作方式。

如：刮刮樂(lè)涂抹效果，左右滑動(dòng)翻頁(yè)等。

原因：蘋果手機(jī)上，向右滑動(dòng)容易觸發(fā)返回“上一級(jí)頁(yè)面”效果。

2、交互上，慎用橫屏展示效果。

原因：體驗(yàn)上，需要用戶設(shè)備開(kāi)啟屏幕旋轉(zhuǎn)功能，才能正常觀看，用戶操作成本高。對(duì)不同屏幕的手機(jī)，長(zhǎng)寬比例不一，難以展示最佳的視覺(jué)效果。

3、視覺(jué)上，功能按鈕等，遠(yuǎn)離頁(yè)面底部(大概128px，這個(gè)尺寸不是固定值)，具體看重構(gòu)采用什么適配方式(僅供參考：640__1136 px，從上往下計(jì)算，主要內(nèi)容在1008px內(nèi))。

原因：更好的適配各種屏幕的手機(jī)，避免按鈕被擋住。

4、視覺(jué)上，慎用“光線疊加效果”或PS里面的“圖層樣式”效果。

如：給圖層加個(gè)“柔光”、“濾色”、“色相”等等效果，除非這個(gè)視覺(jué)元素可以合并為一體。

原因：給重構(gòu)挖坑，導(dǎo)致不好切圖，無(wú)法還原視覺(jué)效果。

5、視覺(jué)上，矢量圖?想做簡(jiǎn)單的動(dòng)畫?導(dǎo)出SVG格式試試!

原因：能減少體積的事，為什么拒絕呢……

6、動(dòng)畫上，盡量避免全屏動(dòng)畫，優(yōu)先考慮局部動(dòng)畫的方式。

如：各種粒子效果全屏飄過(guò)等。

原因：如果呈現(xiàn)的視覺(jué)效果無(wú)法用代碼實(shí)現(xiàn)，就意味著要用全屏尺寸的序列幀來(lái)處理，體積上會(huì)飆升，影響加載體驗(yàn)。

7、動(dòng)畫上，序列幀壓縮小技巧，靜態(tài)的畫面，保存較高質(zhì)量。中間運(yùn)動(dòng)的模糊狀態(tài)，大膽的壓低畫面質(zhì)量吧。

原因：壓縮體積，運(yùn)動(dòng)狀態(tài)就算有鋸齒也不明顯。

8、重構(gòu)上，，壓縮下，有效減少體積。

原因：額，這個(gè)也要說(shuō)原因?好吧，偷偷告訴你，現(xiàn)在這網(wǎng)站不止可以壓縮png，還可以壓縮jpg，更重要的是……支持批量下載了!

9、重構(gòu)上，音樂(lè)請(qǐng)壓縮下，能大大減少整體的體積。

技巧：如果沒(méi)有特殊要求，可以考慮弄成單聲道音頻文件，比特率48或更低就行了。

10、重構(gòu)上，安卓機(jī)不支持多個(gè)音頻同時(shí)播放……意味著無(wú)法背景音樂(lè)跟音效同時(shí)播放!(蘋果機(jī)則沒(méi)問(wèn)題)

11、重構(gòu)上，視頻無(wú)法自動(dòng)播放，首次播放需要用戶點(diǎn)擊觸發(fā)。

(視頻用什么格式?建議用mp4格式，并用H.264編碼器)

12、重構(gòu)上，測(cè)試請(qǐng)多留意“魅族”手機(jī)和華為P6/P7等，屏幕底部采用虛擬按鈕的手機(jī)。設(shè)備容易出問(wèn)題。

說(shuō)那么多，再來(lái)幾條小知識(shí)。

微信到底是什么用瀏覽器內(nèi)核?額，這個(gè)問(wèn)題還真難說(shuō)清楚。

安卓：

微信5.4-6.1版本，如果有安裝QQ瀏覽器，則用QQ瀏覽器的內(nèi)核。否則用手機(jī)系統(tǒng)自帶的。

微信6.1版本后，內(nèi)嵌了QQ瀏覽器的內(nèi)核。

QQ瀏覽器：6.2版本及以后使用blink內(nèi)核。之前用webkit內(nèi)核。

蘋果：

一直都是系統(tǒng)自帶的……

向上滑動(dòng)翻頁(yè)的操作，視覺(jué)指引的箭頭應(yīng)該是向上，而不是向下哦;除非你是點(diǎn)擊翻頁(yè)效果，才用向下的箭頭。

指紋掃描?親屏幕觸發(fā)互動(dòng)?吹口氣檢測(cè)氣體成份?

這些都是偽技術(shù)，開(kāi)開(kāi)心心被玩弄下就好了，哈哈。

不過(guò)像多屏互動(dòng)，音頻分析等，通過(guò)各種接口做技術(shù)支持，實(shí)現(xiàn)一些互動(dòng)操作，這些可是未來(lái)的趨勢(shì)哦!

h5設(shè)計(jì)心得體會(huì)篇4

去年JDC出了不少優(yōu)秀的武媚娘…不，H5模板制作呢，大家都很拼，同時(shí)當(dāng)然也積累了一些經(jīng)驗(yàn)和教訓(xùn)，今天結(jié)合咱們的實(shí)戰(zhàn)案例，從字體，排版，動(dòng)效，音效，適配性，想法這幾個(gè)方面好好聊一聊關(guān)于H5的設(shè)計(jì)，希望對(duì)同學(xué)們有幫助。

字體

H5移動(dòng)端頁(yè)面設(shè)計(jì)心得分享 三聯(lián)

排版

在有限的手機(jī)屏幕空間內(nèi)，我們積累的經(jīng)驗(yàn)告訴我們最好的效果是簡(jiǎn)單集中，最好有一個(gè)核心元素，中心元素不宜過(guò)多，突出重點(diǎn)為最優(yōu)。

20jd20_0124

比如JDC的“拍拍十二星座實(shí)用手冊(cè)”的項(xiàng)目，只用了最簡(jiǎn)單的圖形和文字居中擺放。

以可口可樂(lè)的這個(gè)“我們?cè)谶@我們?cè)诤酢睘槔噍^而言，越左邊的排版會(huì)越容易引起關(guān)注。這是因?yàn)槲覀儜卸璧拇竽X里最初看到這種簡(jiǎn)潔排版會(huì)立刻出現(xiàn)“嗯我可以馬上看完不費(fèi)勁”的潛意識(shí)信息而帶著輕松的態(tài)度去閱讀。

動(dòng)效

1 / 前期跟前端設(shè)計(jì)師進(jìn)行溝通，討論頁(yè)面中元素的動(dòng)效呈現(xiàn)。例如一些元素的位移，旋轉(zhuǎn)，翻轉(zhuǎn)，縮放，逐楨，淡入淡出，粒子效果，照片處理等等，還有3D展示效果。這個(gè)網(wǎng)站里有h5所能實(shí)現(xiàn)的效果)

16jd20_0124

比如JDC出品的“京東HR招聘”里面就用了位移，縮放，淡入淡出的效果。而“京東微店七宗罪”的最慷慨這一屏則是用到了粒子效果，每個(gè)錢幣翻轉(zhuǎn)下落的速度不一樣顯得畫面更真實(shí)。今年在朋友圈瘋轉(zhuǎn)的維多利亞和特斯拉的H5用的是擦除的效果，模糊的遮罩足夠挑起人們的好奇心。

以上兩款，包括今年最火的H5案例都在這了 >>>《如此風(fēng)騷!20_年刷爆朋友圈的十大 HTML5 技術(shù)案例》

2 / 背景動(dòng)效其實(shí)比較推薦緩動(dòng)效果，如“京東管培生招聘”的例子里星空中一閃而過(guò)的流星，間歇性出現(xiàn)不搶主角風(fēng)頭再好不過(guò)了.

3 /復(fù)雜多變的動(dòng)效不一定是好的，要考慮到加載速度等用戶體驗(yàn)問(wèn)題。

音效

1 / 考慮到用戶使用場(chǎng)景的多樣性，那種介紹類的如果要加背景音樂(lè)，盡量不要太粗暴。有一點(diǎn)循序漸進(jìn)最好，給用戶留時(shí)間在騷擾別人之前可以關(guān)閉。

或者可以在開(kāi)始時(shí)是關(guān)閉狀態(tài)。但做游戲h5頁(yè)面的時(shí)候，音樂(lè)可以沒(méi)有關(guān)閉開(kāi)啟按鈕，因?yàn)橛脩魧?duì)接下來(lái)發(fā)生的事是有預(yù)知的。

2 / 考慮每一頁(yè)音樂(lè)按鈕放置的明顯性。如果能用其他頁(yè)面元素去替代音樂(lè)符號(hào)作為按鈕也是極好的。

給前端設(shè)計(jì)師的音樂(lè)文件：格式為mp3等，單軌，最好30秒以內(nèi)。為了加載速度，文件大小盡量控制在：100k以內(nèi)最佳，可以用Adobe Audition等軟件來(lái)壓縮。作為無(wú)限循環(huán)的背景音樂(lè)，截取時(shí)一定要注意頭尾得連接得上。

交互

1 / 展示型: 有很多種不同的交互方式，最常見(jiàn)的是翻頁(yè)，這種方式制作起來(lái)相對(duì)簡(jiǎn)單，多用于展示一些新的產(chǎn)品，功能，或者活動(dòng)介紹等。技術(shù)上現(xiàn)在市面上已經(jīng)有H5在線生成器，基本上給圖片和文字就可以幫你進(jìn)行處理。

除了翻頁(yè)以外，還有點(diǎn)擊，輸入文字，擦除屏幕，滑動(dòng)屏幕等，玩法非常豐富。在“拍拍圣誕活動(dòng)”里就用到了重力感應(yīng)，搖一搖可以隨機(jī)判斷，讓用戶有了自己參與的樂(lè)趣。

2 /游戲型：像是起初朋友圈紅過(guò)的圍住神經(jīng)貓，或者是我們的“拍拍Jump”這類需要計(jì)算邏輯，得出分?jǐn)?shù)或者結(jié)論的小游戲。

3 /產(chǎn)品型：有一些H5是作為一個(gè)長(zhǎng)期運(yùn)營(yíng)的產(chǎn)品存在的，用戶的訪問(wèn)可能會(huì)更固定，比如微信里的購(gòu)物頁(yè)面等。

手機(jī)端之間：一般我們先用640X1136進(jìn)行設(shè)計(jì)，參考線會(huì)標(biāo)在960高的地方，主要元素最好不要過(guò)高以適配各種機(jī)型。其他安卓機(jī)器前端切圖時(shí)可以適當(dāng)拉伸，變化不會(huì)太大就不用每個(gè)進(jìn)行適配。

響應(yīng)式設(shè)計(jì)：頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。

為不同電子設(shè)備單個(gè)布局，盡量使用純色而非漸變

想法

被大眾主流樂(lè)于分享的信息大概有這么幾種：

最直接的利益驅(qū)動(dòng)，分享有獎(jiǎng)或者需要眾籌等，

對(duì)自己有用并且也對(duì)周圍人也會(huì)有新鮮感的信息，

自己參與游戲或者測(cè)試得到的結(jié)果。

不管是分享給朋友或朋友圈還是QQ對(duì)話，讓用戶主動(dòng)去分享你的帶有很大性質(zhì)的廣告意味的信息在自己的社交群體中，此條信息與自己相關(guān)并且別人也能參與進(jìn)來(lái)當(dāng)然是最理想的。

可口可樂(lè)北極熊求合影的例子就是一個(gè)很好的宣傳方式，借由簡(jiǎn)單的合成照片技術(shù)讓人們有意愿去分享自己努力創(chuàng)作的照片。還有UJEANS的設(shè)計(jì)延續(xù)了品牌的調(diào)性就是實(shí)用，在選擇你的牛仔褲喜好時(shí)也同時(shí)穿插了商品的說(shuō)明，顯得不那么生硬，它比較符合理由3。

在我們?cè)O(shè)計(jì)一個(gè)H5頁(yè)面時(shí)，很重要的一點(diǎn)就是站在自己的角度跳出來(lái)去看你做的東西，首先一點(diǎn)是你和你周圍的人愿意轉(zhuǎn)發(fā)分享這個(gè)東西嗎?它有趣嗎?它對(duì)其他人也是有用的信息嗎?

在做“1212陪你一二到底”的時(shí)候，我們的設(shè)計(jì)師要在最后引出有優(yōu)惠券領(lǐng)取這個(gè)信息，前面也用用盡了節(jié)操去設(shè)計(jì)文案和人物，在此體會(huì)一下文案的重要性，它是貫穿整個(gè)H5的靈魂。第二張圖上的小字“海外大牌足不出戶購(gòu)遍全球”是產(chǎn)品想說(shuō)的硬廣告臺(tái)詞，但在小小的手機(jī)屏幕里，碎片時(shí)間中，我們必須先抓人眼球，再抓住人心，所以”身體和快遞，至少一個(gè)在路上“。

對(duì)于展示型和互動(dòng)型H5來(lái)說(shuō)最重要的還是想法。對(duì)于設(shè)計(jì)師來(lái)說(shuō)，也許他們給到我們的只有幾行文字，那時(shí)候前期構(gòu)思這個(gè)H5的時(shí)間有可能比真正做的時(shí)間還要長(zhǎng)。

比如拍拍網(wǎng)全球同步發(fā)售iPhone6的這個(gè)消息要做成H5，如果我們只是做一張炫酷的圖片告訴大家我們這里有iphone6分享朋友圈有可能中獎(jiǎng)，也會(huì)有利益驅(qū)動(dòng)的誘惑讓人去轉(zhuǎn)發(fā)分享。但通過(guò)大家的腦爆，我們將這句話變成“關(guān)于Phone6的哥德巴赫猜想”，根據(jù)測(cè)試結(jié)果得出有趣的結(jié)論，這樣轉(zhuǎn)發(fā)的并不是赤果果的求中獎(jiǎng)行為，還帶著有趣的插圖和自己測(cè)出來(lái)的殺馬特范，是不是顯得更含蓄更不經(jīng)意呢。這樣最終轉(zhuǎn)發(fā)的理由上述1，2，3好像都有了呢。

今年JDC大概做了十多個(gè)H5 頁(yè)面，產(chǎn)量頗豐。 H5和app比起來(lái)優(yōu)勢(shì)在于開(kāi)發(fā)周期時(shí)間短，傳播起來(lái)有效率，并且在更新迭代的成本上要小很多。特別在游戲上，未來(lái)H5模板制作會(huì)有更多的可能性。我們也會(huì)堅(jiān)持去研究和嘗試，不管是新技術(shù)，還是更有趣的營(yíng)銷方式，和大家共勉。

h5設(shè)計(jì)心得體會(huì)篇5

時(shí)光飛逝，轉(zhuǎn)眼間在千鋒學(xué)習(xí)html5開(kāi)發(fā)生活半年了，如今學(xué)成畢業(yè)找到心儀的工作，最要感謝的莫過(guò)于千鋒了。

起初剛來(lái)千鋒還是有些不適應(yīng)，習(xí)慣了大學(xué)散漫的生活，突然正經(jīng)的按時(shí)上課，每天學(xué)習(xí)那么久的時(shí)間，覺(jué)得好累，還記得第一天上完課完成作業(yè)是21:15，那時(shí)候我感觸特別深，上了3年的大學(xué)都從沒(méi)有認(rèn)真學(xué)習(xí)到這個(gè)點(diǎn)的時(shí)候，真是奇跡，當(dāng)時(shí)還興奮的不行，覺(jué)得不可思議，直到后來(lái)，在千鋒的學(xué)習(xí)，才知道這是家常便飯，也習(xí)以為常。

從起初的不適應(yīng)覺(jué)得不現(xiàn)實(shí)，到如今的每天主動(dòng)學(xué)習(xí)，到關(guān)教學(xué)樓才會(huì)回寢室，這對(duì)于我來(lái)說(shuō)就是從一個(gè)學(xué)渣逆襲成為學(xué)霸，千鋒成就了我。

有緣遇見(jiàn)助教華哥盡職盡責(zé)

來(lái)到千鋒先認(rèn)識(shí)的就是我們26班的助教華哥，其實(shí)來(lái)千鋒學(xué)習(xí)最終收獲滿意的成果最要感謝的莫過(guò)于華哥了，初入千鋒遠(yuǎn)離家人，不懂不會(huì)的好多，華哥都會(huì)盡心盡力的幫我們解決，無(wú)論生活還是學(xué)習(xí)，就是我們的大哥哥，帶領(lǐng)我們學(xué)習(xí)，還記得當(dāng)初有問(wèn)題，問(wèn)華哥，為我們改問(wèn)題找錯(cuò)到好晚，

一直陪著我們學(xué)習(xí)，9.30下晚自習(xí)就可以回去休息的他，每天陪我們到關(guān)教學(xué)樓，是班級(jí)最后一個(gè)走的人，周六我們上自習(xí)，還來(lái)陪我們給我們解決問(wèn)題。

用自己休息的時(shí)間來(lái)帶我們，真的是盡心盡力，從未遇見(jiàn)這么負(fù)責(zé)的老師。

后來(lái)來(lái)到了32班，又有緣遇見(jiàn)華哥，那時(shí)候正是3階段，最關(guān)鍵的時(shí)候，華哥每天晚自習(xí)考我們面試題，給我們講面試題，讓我們找到一個(gè)好工作，真是盡職盡責(zé)。

昨日的付出才有今日的成績(jī)

還記得我們不學(xué)好不會(huì)你認(rèn)真講解的樣子，還記得我們貪玩不認(rèn)真，你跟我們著急生氣的樣子，還記得我們拿到心儀的`offer，你高興的樣子，還記得太多太多，都是你帶給我們的，沒(méi)有你當(dāng)初陪我們激勵(lì)我們學(xué)習(xí)，也就沒(méi)有今天的我們，在此特別感謝華哥。感謝千鋒的老師。

還記得做項(xiàng)目期間cookie不會(huì)，想抄以前的代碼改一改，高老師就坐在我旁邊，一步一步的教我怎么寫，直到我自己寫出來(lái)為止，我回來(lái)為止。

在我自己想放棄的時(shí)候，高老師都沒(méi)有放棄我，而是帶著我，一步一步的講解，耐心的給我教會(huì)，也讓我重拾了信心，還有鵬哥，知道我們幾個(gè)人基礎(chǔ)差，每次講完課都會(huì)下來(lái)問(wèn)一遍學(xué)會(huì)了沒(méi)有，沒(méi)聽(tīng)懂就再講一遍，一遍不會(huì)講兩遍，午休給我們講，晚自習(xí)還給我們講，直到我們學(xué)會(huì)了為止。

盡心盡力從無(wú)怨言。

真的有你們昨日的付出，才有我們今日的成績(jī)。

感謝遇見(jiàn)這樣的團(tuán)隊(duì)，這樣的老師。

如今，已完成這半年的艱苦奮斗，終于‘修成正果’。

找到理想的工作，是千鋒成就了我，給了我希望，給了我未來(lái)。

在這里特別向千鋒致敬，感謝有這么負(fù)責(zé)的教育機(jī)構(gòu)，同時(shí)希望千鋒越來(lái)越好，培養(yǎng)出更多的人才。

h5設(shè)計(jì)心得體會(huì)篇6

風(fēng)塵仆仆的來(lái)到了大連，來(lái)參加匯博組織的HTML5培訓(xùn)，從HTML5基礎(chǔ)講起，起初并不以為然，想這HTML這個(gè)平常上課也經(jīng)常接觸到的東西，但是聽(tīng)完第一堂課后，后面的興趣越來(lái)越濃厚，尤其是講到HTML5的新特性時(shí)候，講到canvas畫布時(shí)候，突然感覺(jué)HTML的.功能遠(yuǎn)遠(yuǎn)超出了我的想象，超出了我的預(yù)期，當(dāng)自己做完第一個(gè)實(shí)例的時(shí)候，就想以后一定要把這個(gè)充滿未來(lái)潛力的東西傳到學(xué)校，學(xué)生一定會(huì)感興趣。當(dāng)老師簡(jiǎn)單講完CSS和JS時(shí)候，然后將HTML5+CSS+JS結(jié)合起來(lái)的時(shí)候，就感覺(jué)這是個(gè)強(qiáng)大無(wú)比的組合，不次于使用C#在VS平臺(tái)上實(shí)現(xiàn)的功能。尤其是其在游戲和動(dòng)畫上的效果，使得頁(yè)面可以輕松拋棄Flash的枷鎖也同樣能夠?qū)崿F(xiàn)強(qiáng)大的動(dòng)畫效果。

最后一天Intel的老師講到如何將HTML5的APP上傳到不同平臺(tái)的應(yīng)用商店時(shí)候，這時(shí)候就更感到自己學(xué)到的東西有意義了。不像以前單純教學(xué)，為了完成教學(xué)任務(wù)而教學(xué)，通過(guò)應(yīng)用的上傳，可以更加鼓勵(lì)學(xué)生的積極性，激發(fā)他們的學(xué)習(xí)動(dòng)力，嗯，不錯(cuò)的思路，把這個(gè)思路用在教學(xué)上，一定能有所收獲，學(xué)生一定能感興趣。

這次培訓(xùn)對(duì)于自己在今后教學(xué)過(guò)程中提出了一個(gè)新的思路，我們的教學(xué)可以找到學(xué)生的興趣點(diǎn)，像歐美國(guó)家教育環(huán)境那樣能夠激發(fā)出學(xué)生自身的興趣，而這個(gè)激發(fā)就需要我們老師和企業(yè)共同想辦法能為學(xué)生由被動(dòng)學(xué)習(xí)變?yōu)橹鲃?dòng)激發(fā)資深興趣去學(xué)習(xí)。這才是最重要的，才能培養(yǎng)出高質(zhì)量人才。總之，感謝Intel，感謝微軟，感謝匯博給我們提供了這次培訓(xùn)，期待下次培訓(xùn)。

h5設(shè)計(jì)心得體會(huì)篇7

利用假期和休息時(shí)間，初步學(xué)習(xí)了有關(guān)html+css的知識(shí)，感觸頗多。做網(wǎng)站原來(lái)一直處于一種茫然的狀態(tài)，邊學(xué)邊做，邊實(shí)踐邊維護(hù)，每每遇到問(wèn)題了，便會(huì)花費(fèi)很大的精力去解決，在解決問(wèn)題的過(guò)程中也慢慢提高，但工作有時(shí)相當(dāng)?shù)某粤?。通過(guò)一段時(shí)間詳細(xì)的接觸到html+css，從基礎(chǔ)知識(shí)補(bǔ)起，利用空閑時(shí)間看書及有關(guān)div+css“布局入門教程”，它通過(guò)舉一個(gè)例子，然后讓你上機(jī)測(cè)試效果，讓我有對(duì)樣式表CSS有一個(gè)初步的印象，知道了CSS能做什么。我覺(jué)得這份教程很有條理，由淺入深，一步一步引領(lǐng)你向前走，讓你明白他們?cè)谡f(shuō)什么。

在些之前，我是從未接觸過(guò)div+css的，甚至連dreamwear、photoshop的工具也都是皮毛。我的學(xué)習(xí)思路是這樣的：

一、先寫HTML還是先寫CSS？

對(duì)于一個(gè)新手而言，在有了一點(diǎn)html知識(shí)之后，對(duì)于CSS、DIV都感覺(jué)特別的疑惑，不知道這其中到底是什么聯(lián)系？為什么用了CSS的'網(wǎng)頁(yè)不能像其它代碼一樣直觀？html和css哪個(gè)先寫？其實(shí)這些問(wèn)題在我看完教程，但還沒(méi)真正上手實(shí)踐時(shí)的疑惑！等真正上手自己做時(shí)，我才發(fā)現(xiàn)應(yīng)該兩者同時(shí)寫！

二、把站點(diǎn)建好，目錄建好，比如建好文件夾css,images,這兩個(gè)是最其本的，然后新建一個(gè).html空文件，一個(gè).css空樣式表，把.css外部樣式表連接到.html這個(gè)文件上，鏈接寫在中。

三、寫HTML中的最基本的布局部分，都是用DIV，然后直接在DIV里加入ID或CLASS，這些布局部分包括外套部分，頭部分，中間部分，左，中，右，版權(quán)部分等。

四、到樣式表中寫各個(gè)布局層的樣式。

五、寫一段代碼后就進(jìn)行瀏覽器的測(cè)試，同時(shí)用IE6與FF一起測(cè)試。在瀏覽器中調(diào)試，調(diào)試時(shí)發(fā)現(xiàn)許多之前沒(méi)有預(yù)料的問(wèn)題，如瀏覽器的兼容問(wèn)題、浮動(dòng)的問(wèn)題等。

六、不斷的找出問(wèn)題、理解怎么出錯(cuò)的，不斷的再測(cè)試！

這樣的學(xué)習(xí)和研究過(guò)程，讓我體驗(yàn)到了許多次的付出與回報(bào)的樂(lè)趣，如：

第一：閱讀一本書，一般來(lái)說(shuō)我第一次要先把整個(gè)書通讀一遍，不理解的也要往下看，因?yàn)樵谕驴吹倪^(guò)程中也許會(huì)找到那個(gè)問(wèn)題的答案，等看完后我會(huì)有一個(gè)大概的印象，但一定會(huì)有很多不明白的地方，沒(méi)關(guān)系，繼續(xù)往下看。

第二：就要邊看邊做學(xué)習(xí)筆記了，我有隨時(shí)寫筆記的習(xí)慣，電子稿或手寫稿均可。把自己認(rèn)為是重點(diǎn)的部分寫上，便于以后查閱；再者，把覺(jué)得有疑問(wèn)的部分記下，帶著疑問(wèn)看下去，如果沒(méi)有答案，上網(wǎng)查詢或是問(wèn)前輩，解疑是提高知識(shí)最快的一種方式。

第三：心態(tài)很重要，一定得靜下心看書，能不越過(guò)的看就不越過(guò)，要樹(shù)立信心，堅(jiān)持再堅(jiān)持下去。系統(tǒng)的將教程學(xué)完，一遍不行兩遍，持之以恒。

第四：當(dāng)你到達(dá)終點(diǎn)時(shí)你回發(fā)現(xiàn)一切都是順理成章的事。因?yàn)槟闩α?，努力了就?huì)有回報(bào)，有結(jié)果。

學(xué)習(xí)永遠(yuǎn)沒(méi)有終點(diǎn)，隨著學(xué)習(xí)，知識(shí)不斷提高，所接觸的技術(shù)領(lǐng)域也隨之?dāng)U大。堅(jiān)持看書，堅(jiān)持以任何一種方式學(xué)習(xí)，都將受益無(wú)窮，也都是一件十分快樂(lè)的`事情。

h5設(shè)計(jì)心得體會(huì)篇8

學(xué)習(xí)H5我們不需要過(guò)度的關(guān)注細(xì)節(jié)，五柳先生的“不求甚解”的態(tài)度就很好，遇到能想起來(lái)，用到明白來(lái)源，不用作為擴(kuò)展知識(shí)。

其次，H5的設(shè)計(jì)起點(diǎn)就是從實(shí)用出發(fā)的，也就是說(shuō)很多特性都是怎么方便就怎么來(lái)。所以我們可以關(guān)注我們感興趣的技術(shù)，但是開(kāi)發(fā)的時(shí)候還是不要特意的使用H5，能用到而且兼容性也不錯(cuò)就用，用不到也不要“畫蛇添足”，比如163郵箱就有用到nav標(biāo)簽等，但是如果自己不是很精通H5或者是沒(méi)必要重構(gòu)就不要去把一些東西改為H5的，比如編寫JS的時(shí)候特意的用WebWorker，這就很不好!除非我們很明確的知道，這就是針對(duì)移動(dòng)端這種基本上全面支持H5的Browser設(shè)計(jì)開(kāi)發(fā)的功能。

最后，H5技術(shù)不復(fù)雜，它從來(lái)都不是什么新技術(shù)，只是HTML的延續(xù)，我認(rèn)為的H5包括如下三點(diǎn):

(1)改進(jìn)及增強(qiáng)的HTML屬性，新頁(yè)面可以嘗試使用。

(2)增強(qiáng)了的JS交互接口:WebWorker、WebStorage、WebDB、OfflineApplication、Geolocation、Canvas，可以說(shuō)H5和JS相互增強(qiáng)更上一層，但是還是要小心使用!

(3)CSS3:改進(jìn)增強(qiáng)CSS功能，讓頁(yè)面效果更絢麗，開(kāi)發(fā)更簡(jiǎn)單，尤其是“移動(dòng)先行”的現(xiàn)代互聯(lián)網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)理念能讓“響應(yīng)式設(shè)計(jì)”越來(lái)越簡(jiǎn)單、流行，甚至出現(xiàn)了很多框架，比如bootstrap。

學(xué)習(xí)方法:

學(xué)習(xí)HTML這類的標(biāo)記語(yǔ)言，我們需要從四個(gè)方面入手:

(1)語(yǔ)法:即怎樣的書寫格式是Browser接受和支持的，HTML技術(shù)的語(yǔ)法很簡(jiǎn)單，只要注意大小寫在HTML、XHTML、H5中的一些細(xì)節(jié)不同就可以了。

(2)元素:也就是標(biāo)簽，這個(gè)就靠經(jīng)驗(yàn)和記憶了，不求甚解多用就好。但是有一點(diǎn)，系統(tǒng)的.學(xué)習(xí)和雜亂記憶的不同點(diǎn)就是:系統(tǒng)的學(xué)習(xí)會(huì)把元素分類。這樣方便記憶、對(duì)比和使用，能讓我們盡量減少不必要的錯(cuò)誤嵌套。一般會(huì)把HTML標(biāo)簽分為文檔結(jié)構(gòu)標(biāo)簽、文本格式標(biāo)簽、字符格式標(biāo)簽、列表標(biāo)簽、鏈接標(biāo)簽、表格標(biāo)簽和表單標(biāo)簽這8類，有些標(biāo)簽不實(shí)用就不用看了。

(3)屬性:知道每類標(biāo)簽都有什么屬性，一般來(lái)說(shuō)學(xué)習(xí)方法是知道有什么屬性，然后了解下哪些標(biāo)簽不支持這些屬性。其實(shí)，除了name、id、class、style外很多元素屬性我們都很少用，涉及到格式的屬性，我們都用CSS來(lái)代替了。這也是H5推薦的做法，那些屬性在H5中都被廢棄了，比如background屬性。

(4)其他:其他的東西就是去了解一些額外的知識(shí):歷史背景、關(guān)聯(lián)技術(shù)、深入技術(shù)，比如XML、DTD，甚至是Browser對(duì)頁(yè)面的解析、渲染過(guò)程，DOM樹(shù)的構(gòu)建、RenderTree的構(gòu)建過(guò)程，來(lái)幫助我們學(xué)習(xí)、開(kāi)發(fā)高效頁(yè)面。“課外知識(shí)”多了，自然就能做到“他強(qiáng)由他強(qiáng)，清風(fēng)拂山崗”的境界了。

h5設(shè)計(jì)心得體會(huì)篇9

如今移動(dòng)互聯(lián)網(wǎng)發(fā)展迅速，技術(shù)不斷的更新迭代，所學(xué)知識(shí)也需與時(shí)俱進(jìn)?，F(xiàn)在市場(chǎng)上的主流互聯(lián)網(wǎng)網(wǎng)站，需要打造的是一流用戶交互體驗(yàn)。對(duì)于前端開(kāi)發(fā)者的要求，不再是簡(jiǎn)單的頁(yè)面展示，而是需要全棧式的前端開(kāi)發(fā)工程師。

方法一：注重實(shí)踐，由實(shí)踐出真知

在HTML5知識(shí)學(xué)習(xí)過(guò)程中，有些學(xué)員不喜歡動(dòng)手，更喜歡聽(tīng)講師講或者自己背誦，這種學(xué)習(xí)方法是萬(wàn)萬(wàn)不可取的。因?yàn)榇a的學(xué)習(xí)，是個(gè)需要?jiǎng)邮值倪^(guò)程。掌握代碼不僅僅只有記憶還有嘗試。嘗試自己去寫代碼，然后發(fā)現(xiàn)問(wèn)題，最后進(jìn)行歸納總結(jié)，同時(shí)形成理論并記憶。

方法二：由整體到局部，由骨架到血肉

我們?cè)趯W(xué)習(xí)HTML和CSS時(shí)，會(huì)涉及到網(wǎng)頁(yè)的搭建等相關(guān)知識(shí)。在學(xué)習(xí)這部分知識(shí)時(shí)我們采取的是“由外及內(nèi)”、“由整體到部分”、“由全局到細(xì)節(jié)”的學(xué)習(xí)方法。我們?cè)诮佑|某一個(gè)新的知識(shí)點(diǎn)時(shí)，一定要從主干到枝葉，不要拘泥于某一個(gè)細(xì)節(jié)而沉溺于其中。主干如同知識(shí)的一個(gè)主線，這種先找主干后添枝葉的學(xué)習(xí)方法能夠讓知識(shí)遺漏變成最少，也會(huì)比較容易建立起知識(shí)與知識(shí)間的關(guān)系。

方法三：記憶很重要

我們剛才在方法一中提到注重實(shí)踐，并不是讓我們忽略記憶。記憶也是同樣重要的，學(xué)習(xí)時(shí)我們通常會(huì)遇到需要記憶的知識(shí)點(diǎn)。如有哪些數(shù)據(jù)類型、有哪些標(biāo)簽元素等等。遇到這類知識(shí)點(diǎn)時(shí)我們一定要通過(guò)記憶將其熟練掌握，很多人在學(xué)習(xí)的過(guò)程中覺(jué)得還是理解是最重要的，這種想法是錯(cuò)誤的。因?yàn)槿绻B記都記不住還談什么理解呢?

方法四：類比

在學(xué)習(xí)CSS引入方式這種知識(shí)點(diǎn)時(shí)，我們采用了另一種學(xué)習(xí)方法。類比，或者也可以叫做辨析。這種方法主要針對(duì)于區(qū)分相似的兩種或多種事物。如strong與em，塊元素與行元素，同步與異步等等此類知識(shí)具有相似性的知識(shí)，應(yīng)多多思考，抓取幾種事物的不同點(diǎn)，結(jié)合去記憶。

方法五：循序漸進(jìn)的學(xué)習(xí)

學(xué)習(xí)是一個(gè)日積月累的過(guò)程，不能一口吃成一個(gè)胖子。在學(xué)習(xí)的過(guò)程中我們通常會(huì)遇到一些大型的知識(shí)，這種知識(shí)是比較難啃的。當(dāng)我們遇到此類知識(shí)時(shí)，不要急于求成，要腳踏實(shí)地一步一步的來(lái)，例如動(dòng)畫框架的學(xué)習(xí)就是一個(gè)典型的例子。

在循序漸進(jìn)的學(xué)習(xí)過(guò)程中，學(xué)習(xí)思路也是很重要的。換句話說(shuō)，我們面對(duì)一個(gè)“大型”的知識(shí)點(diǎn)，知道要按部就班的一步一步的來(lái)完成，但是就是不知道該怎么開(kāi)始，從哪兒開(kāi)始。這時(shí)候就需要我們有明確的學(xué)習(xí)思路，在學(xué)習(xí)知識(shí)的過(guò)程中重點(diǎn)是關(guān)注思路，而具體的小知識(shí)點(diǎn)就是血和肉。

方法六：有一雙善于發(fā)現(xiàn)的眼睛，利用生活輔助學(xué)習(xí)。

這種學(xué)習(xí)方法簡(jiǎn)單來(lái)講就是利用生活中的實(shí)際事物輔助抽象知識(shí)的學(xué)習(xí)。利用這種方法能夠讓我們更快更好的理解和吸收知識(shí)，例如在講解AJAX時(shí)我們利用了信件郵寄。在講解構(gòu)造函數(shù)時(shí)，我們利用了毛坯房和裝修房。在講解引用類型變量的時(shí)候我們借助了鑰匙和倉(cāng)庫(kù)的關(guān)系等等。

學(xué)習(xí)并不是一蹴而就的，在學(xué)習(xí)過(guò)程中有一個(gè)良好的學(xué)習(xí)方法這是至關(guān)重要的。掌握一套自己的'學(xué)習(xí)方法，日后必定受益終生的。

還有最重要的一個(gè)關(guān)鍵，那就是你必須要堅(jiān)持，必須要有求知的欲望。

隨著互聯(lián)網(wǎng)的高速發(fā)展，軟件行業(yè)更加火爆，幾乎高薪職位都與軟件行業(yè)掛勾，程序員成了高薪的標(biāo)志。HTML5作為近幾年非常火的軟件開(kāi)發(fā)語(yǔ)言，更是得到了多人一致的好評(píng)和青睞。既然HTML5這么火，學(xué)習(xí)這門課程當(dāng)然前景更可觀。

只要努力學(xué)到真東西，前途自然不會(huì)差。如果你想學(xué)好HTML5開(kāi)發(fā)語(yǔ)言，應(yīng)該根據(jù)自己的實(shí)際需求去實(shí)地看一下，先去試聽(tīng)之后，再選擇比較適合自己的，希望能給你帶去幫助。

其實(shí)你會(huì)使用HTML4.01，那么HTML5不需要多學(xué)，知道幾個(gè)刪除的標(biāo)簽和新增的標(biāo)簽就好。H5主要體現(xiàn)在新的javascript的api上，比如canvas的繪圖，js與video標(biāo)簽結(jié)合來(lái)代替?zhèn)鹘y(tǒng)的flash player的播放模式。

個(gè)人認(rèn)為HTML5不止是超文本標(biāo)簽語(yǔ)言，更像是一種集合，包含了HTML5CSS3JS，HTML5配合CSS3JS結(jié)合起來(lái)才能發(fā)揮作用，所以要學(xué)習(xí)HTML5還需要學(xué)習(xí)CSS3和javascript。

h5設(shè)計(jì)心得體會(huì)篇10

一連上了兩個(gè)星期的網(wǎng)頁(yè)實(shí)訓(xùn)課，可以說(shuō)學(xué)到很多以前沒(méi)有學(xué)到的東西。雖然在大一的時(shí)候我們的專業(yè)出開(kāi)設(shè)了網(wǎng)頁(yè)設(shè)計(jì)課，但感覺(jué)這兩個(gè)星期學(xué)到的遠(yuǎn)遠(yuǎn)比以前學(xué)一個(gè)學(xué)期的要多，要豐富。

每一天都有新的內(nèi)容要學(xué)，讓人感覺(jué)很興奮，很高興，恨不得馬上就把它給學(xué)會(huì)。通過(guò)這次實(shí)訓(xùn)使我更熟練掌握Dreamweaver、Flash、Fireworks、Photoshop等軟件的功能和應(yīng)用。不但如此，更增加了同學(xué)間的友誼，陪養(yǎng)了彼此間的團(tuán)結(jié)。

在這期間，每一天老師都會(huì)發(fā)一些素材和實(shí)訓(xùn)給我們，首先是網(wǎng)頁(yè)素材的準(zhǔn)備，在網(wǎng)上查看一些網(wǎng)頁(yè)背景和背景顏色搭配，讓我了解到網(wǎng)頁(yè)的顏色不能多過(guò)3種色彩。接下來(lái)的幾天再結(jié)合自己的網(wǎng)頁(yè)來(lái)進(jìn)行策劃，在做首頁(yè)之前，先用圖紙把網(wǎng)頁(yè)的結(jié)構(gòu)畫出來(lái)，內(nèi)容和結(jié)構(gòu)都想清楚用Fireworks把網(wǎng)頁(yè)設(shè)計(jì)出來(lái)，再切割圖片，把它們導(dǎo)成Html格式在Dreamweaver中進(jìn)行進(jìn)一步的編輯。

我們的網(wǎng)站主要是圍繞宿舍而展開(kāi)的一串活動(dòng)、人物等，宿舍給我們一種很溫馨、很快樂(lè)的感覺(jué)，所以我們決定將這次的網(wǎng)頁(yè)名叫funnyroom。主題確定好了，那么分工出就明確了，我們組有三個(gè)人，兩個(gè)人負(fù)責(zé)找素材，另一個(gè)美術(shù)好的就負(fù)責(zé)網(wǎng)頁(yè)的頁(yè)面設(shè)計(jì)，但是我們始終不是學(xué)美術(shù)方面的，所以色彩方面搭配的不是很好，后來(lái)采用了色彩比較清新自然的綠色來(lái)作為首頁(yè)的主色調(diào)，讓人第一眼看上去就有難忘的感覺(jué)。而從第二頁(yè)開(kāi)始就采用粉色為主色調(diào)，讓人可以感受到我們的主題，因?yàn)槭醉?yè)和其它的顏色不一樣，所以我們就把首頁(yè)當(dāng)作是過(guò)渡頁(yè)，第二頁(yè)開(kāi)始才是網(wǎng)頁(yè)的內(nèi)容。為了增加網(wǎng)頁(yè)的新鮮感和活潑感，還適當(dāng)在添加一些透明flash和一些網(wǎng)頁(yè)特效。在這實(shí)訓(xùn)的.時(shí)間里面，我們分工合作，共同努力，對(duì)網(wǎng)頁(yè)反復(fù)調(diào)試和修改，特別是對(duì)于Fireworks軟件不那么熟悉，有很多的實(shí)例都要看過(guò)老師的演示才會(huì)明白，不過(guò)這也恰恰讓我學(xué)到更多。雖然中途難不免會(huì)有因?yàn)橐庖?jiàn)的不合而發(fā)生一些小小的爭(zhēng)吵，但我覺(jué)得不影響我們的網(wǎng)頁(yè)設(shè)計(jì)，反而會(huì)因?yàn)檫@些不同的意見(jiàn)而重新學(xué)到更多的知識(shí)。

h5設(shè)計(jì)心得體會(huì)篇11

時(shí)間過(guò)得很快，從剛開(kāi)始的培訓(xùn)開(kāi)始到現(xiàn)在的培訓(xùn)結(jié)束，似乎都是眨眼間的事情。首先很感謝任課老師莫老師和班主任以及其他騰科工作人員的工作付出，還有班級(jí)上共同學(xué)習(xí)進(jìn)步的'小伙伴們，讓我順利的學(xué)完了HTML5所有課程。這次HTML5課程的學(xué)習(xí)讓我學(xué)到了很多前端方面的知識(shí)，感覺(jué)自身的IT技術(shù)提升了不少。

此次課程培訓(xùn)讓我對(duì)HTML5有了更加深入的了解。HTML指的是超文本標(biāo)記語(yǔ)言，標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽，HTML使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)。HTML5區(qū)別于HTML的標(biāo)準(zhǔn)，基于全新的規(guī)則手冊(cè)，提供了一些新的元素和屬性，在web技術(shù)發(fā)展的過(guò)程中成為新的里程碑。從市場(chǎng)來(lái)看，無(wú)論是桌面應(yīng)用還是移動(dòng)應(yīng)用，HTML5都是當(dāng)下Web技術(shù)中最炙手可熱的新寵，是創(chuàng)新的主旋律，在不久的時(shí)間里一定會(huì)大有作為。

學(xué)習(xí)都是一步一個(gè)腳印，H5學(xué)習(xí)也是從前端開(kāi)發(fā)的基礎(chǔ)學(xué)起，首先學(xué)習(xí)使用HTML、CSS、Java、Jquery等一系列前端技術(shù)，實(shí)現(xiàn)一些網(wǎng)頁(yè)動(dòng)態(tài)效果。再到后面的Vue。js、bootstrap、Type等一些主流框架，還有微信小程序的學(xué)習(xí)。培訓(xùn)課程當(dāng)然不是上課聽(tīng)懂就可以，而是必須能要去動(dòng)手操作，達(dá)到熟練使用的要求和效果，為了保證學(xué)習(xí)效果，課程以理論和實(shí)例相結(jié)合的方式進(jìn)行授課。而且每個(gè)學(xué)習(xí)階段的結(jié)束都會(huì)做一個(gè)實(shí)訓(xùn)項(xiàng)目，做項(xiàng)目不僅能是學(xué)到一些新知識(shí)，也能查缺補(bǔ)漏，鞏固自己所學(xué)知識(shí)。

最好希望自己早日找到工作，在前端開(kāi)發(fā)這條路上創(chuàng)造輝煌！

h5設(shè)計(jì)心得體會(huì)篇12

HTML5在網(wǎng)頁(yè)開(kāi)發(fā)上，賦予網(wǎng)頁(yè)更好的意義和結(jié)構(gòu)，更加豐富的標(biāo)簽將隨著對(duì)RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對(duì)程序、對(duì)用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。北京恒泰博遠(yuǎn)軟件開(kāi)發(fā)公司對(duì)HTML5的解釋是，為開(kāi)發(fā)者提供了一個(gè)跨平臺(tái)的移動(dòng)apps開(kāi)發(fā)方案，并且該方案具有很好的擴(kuò)展性和靈活性。

由目前it行業(yè)使用html5開(kāi)發(fā)app來(lái)看，如今國(guó)內(nèi)使用html5開(kāi)發(fā)app應(yīng)用技術(shù)尚有欠缺，因?yàn)樵谑謾C(jī)開(kāi)發(fā)app上，html5應(yīng)用只有兩種方法，要不就是全使用HTML5的語(yǔ)法，要不就是僅使用JavaScript引擎。

JavaScript引擎的構(gòu)建方法讓制作手機(jī)網(wǎng)頁(yè)游戲成為可能。由于界面層很復(fù)雜，已預(yù)訂了一個(gè)UI工具包去使用。

純HTML5手機(jī)應(yīng)用運(yùn)行緩慢并錯(cuò)漏百出，但優(yōu)化后的效果會(huì)好轉(zhuǎn)。盡管不是很多人愿意去做這樣的優(yōu)化，但依然可以去嘗試。

HTML5手機(jī)應(yīng)用的最大優(yōu)勢(shì)就是可以在網(wǎng)頁(yè)上直接調(diào)試和修改。原生應(yīng)用的開(kāi)發(fā)人員可能需要花費(fèi)非常大的力氣才能達(dá)到HTML5的效果，不斷地重復(fù)編碼、調(diào)試和運(yùn)行，這是首先得解決的一個(gè)問(wèn)題。

即使這樣，我們還是很看好html5app開(kāi)發(fā)，原因有一下幾點(diǎn)。

一、是基于html5強(qiáng)大的兼容性，因?yàn)镠TML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開(kāi)放接口，使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)，就因?yàn)檫@種強(qiáng)大的'兼容性，使得在當(dāng)下開(kāi)發(fā)界是如此的火，同樣也是因?yàn)檫@強(qiáng)大的兼容性，使得手機(jī)應(yīng)用軟件，app更適合，也更方便。所以更適合手機(jī)app軟件開(kāi)發(fā)，正好補(bǔ)充了手機(jī)小巧的不足。

二、html5app開(kāi)發(fā)支持的手機(jī)系統(tǒng)有android、ios。

三、html5其突出的特點(diǎn)就是強(qiáng)化了web頁(yè)的表現(xiàn)性,追加了本地?cái)?shù)據(jù)庫(kù)，可以用作離線應(yīng)用的開(kāi)發(fā)，離線應(yīng)用就是把需要的資源先緩存到本地，下次再查看時(shí)無(wú)需聯(lián)網(wǎng)。

四、html5app開(kāi)發(fā)，能提供更快、更簡(jiǎn)便的服務(wù)，代碼可高度重用，服務(wù)發(fā)布方便。

五、動(dòng)畫、游戲動(dòng)態(tài)效果，地理定位等很多app應(yīng)用正在崛起，而html5技術(shù)的強(qiáng)大優(yōu)勢(shì)就是這種讓我們驚嘆的效果。而未來(lái)采用html5開(kāi)發(fā)app的，將會(huì)大量減少代碼量，應(yīng)用軟件也會(huì)得到更高的用戶體驗(yàn)，更好的視覺(jué)效果。

h5設(shè)計(jì)心得體會(huì)篇13

這個(gè)學(xué)期學(xué)習(xí)了網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)基礎(chǔ)這門課程，使我增加了計(jì)算機(jī)的基礎(chǔ)知識(shí)，同時(shí)也增加了對(duì)學(xué)習(xí)計(jì)算機(jī)的濃厚興趣。

第一、從這次實(shí)訓(xùn)當(dāng)中我深刻的體會(huì)到理論知識(shí)的重要性，只有在自己熟練理論知識(shí)后再能在實(shí)踐中游刃有余，才不會(huì)出現(xiàn)“用時(shí)方恨少的境地?！?/p>

第二、實(shí)訓(xùn)中我印象最深的是對(duì)各種網(wǎng)頁(yè)制作工具的使用不熟練，甚至還有個(gè)別不會(huì)用的，只是自己想要做個(gè)圖片或圖標(biāo)等都做不好，其心情想而知。所以對(duì)這些網(wǎng)頁(yè)是做工具的使用都要練習(xí)。

第三、集體協(xié)作是我又一個(gè)體會(huì)。這次網(wǎng)頁(yè)制作由于某些原因我一個(gè)人一組，是我搞掘到壓力很大而且很累，而且我自己的'思維能力很有限，網(wǎng)站設(shè)計(jì)和制作上也略顯粗糙和不足，正所謂：你有一個(gè)思想，我有一個(gè)思想，分享后我們就都有兩個(gè)思想。所以與同學(xué)合作是很有必要的。

人生的快樂(lè)莫過(guò)于做自己喜歡的事情，我很慶幸能有這次實(shí)訓(xùn)機(jī)會(huì)，因?yàn)槲蚁矚g靜靜地坐著去做做自己心里的故事，或許做的不是特別完美，從此也可以看出我以后還需要更多的努力，我會(huì)奮勇向前不斷不努力的，希望能夠得到老師的肯定！

h5設(shè)計(jì)心得體會(huì)篇14

本學(xué)期的網(wǎng)業(yè)設(shè)計(jì)課程，開(kāi)展了動(dòng)態(tài)思維訓(xùn)練教學(xué)活動(dòng)，對(duì)于我們學(xué)生來(lái)說(shuō)，可以激發(fā)學(xué)習(xí)興趣，調(diào)動(dòng)學(xué)習(xí)的自覺(jué)性，自己動(dòng)腦、動(dòng)手，動(dòng)口，運(yùn)用網(wǎng)絡(luò)資源，結(jié)合教材及老師的指導(dǎo)，通過(guò)自身的實(shí)踐，創(chuàng)作出積聚個(gè)人風(fēng)格、個(gè)性的個(gè)人網(wǎng)頁(yè)。總體來(lái)說(shuō)，整個(gè)學(xué)期的學(xué)習(xí)過(guò)程，我學(xué)會(huì)了很多知識(shí)，雖然過(guò)程比較艱辛，但在INTENET領(lǐng)域中，有了一個(gè)展示自我的空間，我覺(jué)得很開(kāi)心、很有成就感。

一、充分發(fā)揮動(dòng)手能力

作為網(wǎng)頁(yè)設(shè)計(jì)的初學(xué)者，我對(duì)網(wǎng)頁(yè)設(shè)計(jì)非常感興趣，一心想設(shè)計(jì)出一個(gè)美觀、實(shí)用、內(nèi)容豐富的個(gè)人網(wǎng)頁(yè)。本學(xué)期的教改方案由以前學(xué)生單純接受知識(shí)變?yōu)橹鲃?dòng)參與教學(xué)活動(dòng)。在這樣的壓力和動(dòng)力下，通過(guò)自己動(dòng)手、動(dòng)腦，通過(guò)網(wǎng)絡(luò)資源，老師的指導(dǎo)，在不斷發(fā)現(xiàn)問(wèn)題和解決問(wèn)題的過(guò)程中學(xué)到了很多知識(shí)，也增強(qiáng)了我的創(chuàng)作能力和動(dòng)手能力，在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，從構(gòu)思到設(shè)計(jì)、完善、維護(hù)，整個(gè)過(guò)程我都全身心投入，使我真正學(xué)到了網(wǎng)頁(yè)設(shè)計(jì)的知識(shí)。

二、在設(shè)計(jì)過(guò)程中不斷提高網(wǎng)頁(yè)設(shè)計(jì)水平

在本次網(wǎng)頁(yè)設(shè)計(jì)中，我不僅學(xué)到了很多關(guān)于網(wǎng)頁(yè)設(shè)計(jì)方面的知識(shí)，也從中學(xué)會(huì)了關(guān)于網(wǎng)絡(luò)、編程等方面的知識(shí)。我從最初開(kāi)始運(yùn)用FrontPage設(shè)計(jì)網(wǎng)頁(yè)，到后來(lái)運(yùn)用Dreamweaver、Flash、Fireworks等網(wǎng)軟件設(shè)計(jì)網(wǎng)頁(yè)，完善網(wǎng)頁(yè)。在這個(gè)過(guò)程中，我通過(guò)自學(xué)教材、上網(wǎng)查詢，學(xué)習(xí)了Dreamweaver、Flash、Fireworks等網(wǎng)頁(yè)軟件的應(yīng)用，學(xué)會(huì)了管理、維護(hù)自己的站點(diǎn)，以及一些簡(jiǎn)單動(dòng)畫、控件的制作等等。在設(shè)計(jì)過(guò)程中也出現(xiàn)了很多的問(wèn)題，但通過(guò)看書，上網(wǎng)查詢，請(qǐng)教老師等方式，不斷的學(xué)習(xí)、解決、提高，設(shè)計(jì)出的網(wǎng)頁(yè)不論是外觀還是內(nèi)容，都在不斷的進(jìn)步、改善。可以說(shuō)在自己動(dòng)手，不斷實(shí)踐的過(guò)程中，網(wǎng)頁(yè)設(shè)計(jì)水平得到了很大的提高。

三、不足之處

由于平時(shí)工作比較繁忙，學(xué)習(xí)時(shí)間比較少，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)軟件的強(qiáng)大功能運(yùn)用得還不夠。在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，由于沒(méi)有網(wǎng)頁(yè)制作代碼的知識(shí)，所以在設(shè)計(jì)時(shí)也遇到了很多麻煩，有時(shí)插入一個(gè)特效腳本也是很麻煩。在網(wǎng)頁(yè)制作過(guò)程中，想提高設(shè)計(jì)水平，想有個(gè)理想的網(wǎng)頁(yè)，必須學(xué)會(huì)代碼的運(yùn)用，我將在以后的學(xué)習(xí)過(guò)程中不斷加強(qiáng)這方面的學(xué)習(xí)，希望老師能簡(jiǎn)單介紹一下代碼，讓我也對(duì)它有個(gè)初步的'認(rèn)識(shí)，以后再加強(qiáng)學(xué)習(xí)也才會(huì)有所提高。

總體來(lái)說(shuō)，通過(guò)今次的對(duì)網(wǎng)頁(yè)設(shè)計(jì)的學(xué)習(xí)，有收獲也有遺憾、不足的地方，但我想，我已經(jīng)邁入了網(wǎng)頁(yè)設(shè)計(jì)的大門，只要我再認(rèn)真努力的去學(xué)習(xí)，去提高，憑借我對(duì)網(wǎng)頁(yè)設(shè)計(jì)的熱情和執(zhí)著，我將來(lái)設(shè)計(jì)出的網(wǎng)頁(yè)會(huì)更加專業(yè)，更完善。也希望老師在今后的日子里多指導(dǎo)。

h5設(shè)計(jì)心得體會(huì)篇15

通過(guò)這次實(shí)訓(xùn)，我收獲了很多。以下是我的實(shí)訓(xùn)總結(jié)。

在實(shí)訓(xùn)中除了學(xué)到了許多新的知識(shí)，還鍛煉了我做項(xiàng)目的能力，提高了獨(dú)立思考問(wèn)題、自己動(dòng)手操作的能力。實(shí)訓(xùn)中的項(xiàng)目作業(yè)也使我更加有團(tuán)隊(duì)精神。

一、繼續(xù)學(xué)習(xí)，不斷充實(shí)自我。

在實(shí)訓(xùn)中除了學(xué)到了許多新的知識(shí)，了解了關(guān)于HTML5的相關(guān)知識(shí)，對(duì)互聯(lián)網(wǎng)+有了新的認(rèn)識(shí)，對(duì)于未來(lái)工作的方向也多了一種選擇。

二、努力實(shí)踐，不斷提升自我。

只有將理論付諸于實(shí)踐才能實(shí)現(xiàn)理論自身的'價(jià)值，也只有將理論付諸于實(shí)踐才能使理論得以檢驗(yàn)。同樣，一個(gè)人的價(jià)值也是通過(guò)實(shí)踐活動(dòng)來(lái)實(shí)現(xiàn)的，也只有通過(guò)實(shí)踐才能鍛煉人的品質(zhì)，彰顯人的意志。這次跟隨老師實(shí)訓(xùn)完成了四個(gè)項(xiàng)目，和我的小伙伴們獨(dú)立完成了一個(gè)小項(xiàng)目，滿滿的激動(dòng)，未來(lái)還要更加努力。

三、完善總結(jié)，不斷深造自我。

實(shí)訓(xùn)，展現(xiàn)在自己面前的是一片任自己馳騁的沃土，耕種夢(mèng)想，成就未來(lái)。我將繼續(xù)學(xué)習(xí)，深入實(shí)踐，不斷提升自我，多反思，多總結(jié)，吸取經(jīng)驗(yàn)，為以后打下基礎(chǔ)。

可以說(shuō)這次實(shí)訓(xùn)不僅使我學(xué)到了知識(shí)，豐富了經(jīng)驗(yàn)；將會(huì)有利于我更好的適應(yīng)以后的工作。最后，我要感謝學(xué)院組織的這次十分有意義的實(shí)訓(xùn)，使我們學(xué)到了很多，也領(lǐng)悟了很多。