《h5設(shè)計與制作》 課件 模塊一：H5的前世今生

H5設(shè)計與制作修創(chuàng)意設(shè)計心法／練動效交互技法第一章H5的前世今生主

講：羅

玥/重慶工商職業(yè)學(xué)院／H5的基本概念課程內(nèi)容／H5的誕生之路H5的基本概念PART1聊幾個有關(guān)H5的問題H5Why——我們?yōu)槭裁匆鯤5移動傳播特性紙媒用戶／是單純的讀者信息傳播單向／被動接受／互動少PC用戶／通過跟帖與媒體進(jìn)行簡單互動移動用戶／通過微博、微信、QQ是內(nèi)容生產(chǎn)者，社交化傳播H5基于Web的產(chǎn)品形態(tài)強互動／可監(jiān)測／跨平臺／易傳播等優(yōu)勢為了傳播而生為了推廣宣傳內(nèi)容、活動或品牌而制作為了盡可能最大化地引導(dǎo)用戶分享和回流Who——用戶是誰70后-85后社交群體核心型用戶

85后-95后95后-00后成長型用戶

潛力型用戶

60%微信用戶（15-29歲）每個年輕人平均有100多個好友社交渠道

What——優(yōu)質(zhì)H5的評判標(biāo)準(zhǔn)需要具備以下特質(zhì)主題傳播性／熱點／點擊欲／信息有效／激發(fā)想象力視覺表現(xiàn)力／張力／吸引用戶在移動環(huán)境下停留產(chǎn)品形態(tài)及交互體驗創(chuàng)新點／簡單易用／獲得感／愉悅感／情感共鳴／分享意愿12010203第三層級能夠引發(fā)用戶情感共鳴，提升產(chǎn)品的品牌調(diào)性第二層級用戶的參與感強，分享意愿強第一層級信息傳播準(zhǔn)確有效到達(dá)、交互順暢舒適成功標(biāo)準(zhǔn)

How——怎么做一個H5產(chǎn)品策劃／用戶心理／視覺設(shè)計／動效運用／交互手段建立一個完整的H5設(shè)計思維體系確定制作方向后開始設(shè)計H5究竟是什么呢廣

義第5代HTML

解碼HTML瀏覽器HTML5簡化而來呈現(xiàn)內(nèi)容H5最顯著的優(yōu)勢在于跨平臺交

互圖

表音

頻文

字圖

片動

效插

畫視

頻H5H5的誕生之路PART2／H5發(fā)展前史課程內(nèi)容／H5為何產(chǎn)生／H5階段性發(fā)展“H5發(fā)展前史”90年代：前Flash時代的那些事一個不忍直視的網(wǎng)絡(luò)世界十幾年前：Flash來了視頻+音頻形式風(fēng)靡網(wǎng)絡(luò)幾年前：如日中天的Flash建站、媒體廣告，頁游不久以前：移動互聯(lián)網(wǎng)時代降臨Flash將何去何從?AdobeJustTookaBigStepTowardsEndingFlash.2015-12-1“H5何時產(chǎn)生”Newopenstandardscreatedinthemobileera,suchasHTML5,willwinonmobiledevices(andPCstoo).移動時代的新開發(fā)標(biāo)準(zhǔn)，如HTML5，將在移動設(shè)備（及Pc設(shè)備）上獲勝?！猄teveJobsApril2010喬布斯的偉大預(yù)言業(yè)界巨頭的聯(lián)合驅(qū)動Html5的定稿與修訂2014Html誕生2016Html5.1即將問世為什么是2014HTML5元年WiFi普及3G/4G發(fā)展“H5的階段性發(fā)展”純靜態(tài)頁面PPT放在／移動端播放易企秀等模版型第三方平臺制作1、最初階段——“視覺設(shè)計”婚禮邀請函

場景和故事直觀感受移動端碎片化2、發(fā)展階段——“視覺＋交互

”《史上最長夜班車》

長拉頁滑動交互引入游戲游戲腳本設(shè)定互動性加強3、引爆階段——“游戲引擎”《圍住神經(jīng)貓》

沉浸體驗式的范游戲類交互式微電影故事創(chuàng)作／影視制作