H5交互融媒體作品創(chuàng)作 課件 第3-5章 H5作品的素材查找與加工、H5作品的頁(yè)面設(shè)計(jì)、H5作品的交互設(shè)計(jì)與互動(dòng)效果制作

H5作品的素材查找與加工本章要點(diǎn)關(guān)鍵詞第3章1.了解查找H5作品多媒體素材的渠道。2.掌握H5作品中對(duì)于多媒體素材的文件大小與格式的要求。3.掌握多媒體素材的處理和壓縮方法。多媒體素材素材預(yù)處理靈感來(lái)源

圖片音頻

視頻

字體

其他工具查找&加工頁(yè)面加載超過(guò)5秒就會(huì)有74%的用戶離開頁(yè)面。加載時(shí)間HTML5作品基于網(wǎng)絡(luò)環(huán)境，受網(wǎng)絡(luò)加載速度的影響。素材設(shè)計(jì)的美觀程度，作品的動(dòng)畫效果。閱讀體驗(yàn)過(guò)大的資源走的不僅僅是流量，還有話費(fèi)……網(wǎng)絡(luò)資費(fèi)素材預(yù)處理20M10M3M5M報(bào)名賀卡類介紹類游戲互動(dòng)類大型專題報(bào)道簡(jiǎn)單活動(dòng)介紹、節(jié)日祝福，表單、圖片數(shù)據(jù)收集展示活動(dòng)專題、企業(yè)信息、新書內(nèi)容全面的介紹，圖文內(nèi)容量大，少量視頻。答題游戲、邏輯測(cè)試，含大量互動(dòng)內(nèi)容以及不同結(jié)果展示。兩會(huì)、國(guó)慶、紀(jì)念日、時(shí)事熱點(diǎn)突發(fā)事件的大型專題報(bào)道，大量圖文音視頻內(nèi)容。作品大小音頻Mp3格式200K以內(nèi)圖片PNG、JPG格式小圖：50K以內(nèi)中圖：100K以內(nèi)背景圖：200K以內(nèi)視頻MP4格式（H.264）20M以內(nèi)本地上傳的不宜過(guò)大或過(guò)長(zhǎng)可使用通用視頻代碼嵌入素材大小靈感來(lái)源Fotor懶設(shè)計(jì)：/Seeseed：/視覺me：http://www.shijue.me/UI中國(guó)：/飛屋博客：/blog凹凸實(shí)驗(yàn)室：https://aotu.io/數(shù)英網(wǎng)：/圖片查找&加工站酷：/優(yōu)設(shè)：/UEDNA：/Dribble：/千圖網(wǎng)：/昵圖網(wǎng)：/PhotoshopIlustrator美圖秀秀MIX濾鏡大師簡(jiǎn)拼音頻查找&加工站長(zhǎng)素材：/愛給網(wǎng)：/ADOBE素材庫(kù)：/en/na/audition/offers/audition_dlc.html云端剪輯：/桌面軟件：Audacity視頻加工Premiere會(huì)聲會(huì)影VUE小影字體查找字加工具方正飛翔數(shù)字版全面對(duì)接字加工具問題討論嘗試著用表格的方式總結(jié)一下,在H5作品中運(yùn)用到的素材種類、推薦格式與大小、素材查找渠道、素材處理工具,以及查找與加工過(guò)程中的相關(guān)注意事項(xiàng)。01第四章H5作品的頁(yè)面設(shè)計(jì)第一節(jié)表現(xiàn)型字體與功能型字體表現(xiàn)型文字？功能型文字？1.方正字跡-龍吟體2.方正俠客體3.方正工業(yè)黑4.方正有貓?jiān)?.方正精氣神體6.方正摩登體第二節(jié)如何選擇合適的字體？1.將要表達(dá)的信息配上“適當(dāng)”的感覺2.多傾聽讀者的心聲現(xiàn)在我們已經(jīng)為我們的設(shè)計(jì)配了完美字體，但仍然有個(gè)問題，并非所有人對(duì)同一種字體都有一樣的感覺?？赡苡幸蝗喝擞X得這款字體很新潮，另一群就覺得它過(guò)時(shí)，選擇了適合的字體后，我們也要確定它適合我們的觀眾。因?yàn)槿藗兛醋煮w的方式受到文化連結(jié)的影響，而文化又和年齡及地區(qū)有相當(dāng)大的關(guān)系。所以要對(duì)我們的目標(biāo)群眾有敏感度，如果對(duì)選擇的字體有所遲疑，不妨多問問H5的目標(biāo)用戶，分析目標(biāo)受眾的特性，不僅能夠幫我們選擇更合適的字體，還能讓你的文字排版效果更好。3.混排時(shí)中英文字體的匹配很多時(shí)候我們做H5時(shí)會(huì)遇到中西文混排的情況，漢字與拉丁字母的形體結(jié)構(gòu)是有差異的，漢字為方塊字，而拉丁文有上升線和下伸線。如果想要在中西文混排時(shí)兩種字體視覺大小近似，首先要選擇風(fēng)格接近的兩種字體，再根據(jù)選擇，通過(guò)調(diào)整拉丁字體大小來(lái)看設(shè)計(jì)效果。3.混排時(shí)中英文字體的匹配3.混排時(shí)中英文字體的匹配第三節(jié)文字與正文讓字型的尺寸搭配設(shè)計(jì)的內(nèi)容A.字重B.字號(hào)《設(shè)計(jì)中的邏輯》正文字體：方正蘭亭黑默認(rèn)字號(hào)17px可以試試14px17px14px第四節(jié)表現(xiàn)型與功能型字體推薦方正蘇新詩(shī)古印宋方正榜書楷方正字跡-驚鴻體方正字跡-勁顏體方正潤(rùn)扁宋方正粗金陵簡(jiǎn)體南京國(guó)子監(jiān)刻本《南齊書》方正字跡-龍吟體第五節(jié)通過(guò)版面率、圖版率合理安排H5頁(yè)面的層次留白是影響版面率的重要因素，一般來(lái)說(shuō):留白越多，版面率越低，H5頁(yè)面越顯得恬靜典雅；留白越少，版面率越高，H5頁(yè)面越顯得活潑熱鬧。留白少留白多圖版率高圖版率低一般來(lái)說(shuō)，當(dāng)圖版率為0時(shí)，讀者對(duì)H5的閱讀欲望會(huì)很低，會(huì)讓人覺得這個(gè)H5頁(yè)面非常單調(diào)乏味。對(duì)于陳述性信息較多的頁(yè)面，增加圖版率，恢復(fù)讀者的閱讀興趣，增加留白，讓整個(gè)版面重新充滿生機(jī)。除了增加圖片、插畫等元素，我們也可以通過(guò)色塊來(lái)增加圖版率。大家可以在具體設(shè)計(jì)時(shí)，思考如何將復(fù)雜冗長(zhǎng)的信息通過(guò)圖像的方式表達(dá)。H5作品的交互設(shè)計(jì)與互動(dòng)效果制作本章要點(diǎn)關(guān)鍵詞第6章1.掌握H5作品中交互設(shè)計(jì)的總體原則。2.了解H5作品中的不同交互類型及其分類。3.掌握使用方正飛翔數(shù)字版制作不同類型互動(dòng)效果的方法。交互設(shè)計(jì)

互動(dòng)效果第

1

節(jié)

交互設(shè)計(jì)原則與方法20世紀(jì)七八十年代之交,舊金山灣區(qū)一群敬業(yè)而有遠(yuǎn)見的研究員、工程師和設(shè)計(jì)師正在忙于發(fā)明未來(lái)人們與電腦交互的方式。從施樂帕克研究中心(Xerox

PARC)到斯坦福國(guó)際研究院(SRI),最后到蘋果電腦公司,人們開始討論,為數(shù)字產(chǎn)品創(chuàng)造出可用、易用的“人性化界面”到底意味著什么。20世紀(jì)80年代中期,兩位工業(yè)設(shè)計(jì)師比爾·莫格里奇(BillMoggridge)和比爾·韋普朗克(BillVerplank)著手設(shè)計(jì)第一臺(tái)筆記本電腦GRiDCompass。他們?yōu)樽约核龅墓ぷ鲃?chuàng)造了“交互設(shè)計(jì)”一詞。盡管交互設(shè)計(jì)常常被看作為一門新興的設(shè)計(jì)學(xué)科,但實(shí)際上人類社會(huì)已經(jīng)有著很長(zhǎng)時(shí)間的交互設(shè)計(jì)歷史。作為一門從人機(jī)交互(Human

ComputerInteraction)領(lǐng)域分支并發(fā)展得來(lái)的新型學(xué)科,交互設(shè)計(jì)具有十分典型的跨學(xué)科特征,涉及范圍包括計(jì)算機(jī)科學(xué)、計(jì)算機(jī)工程學(xué)、信息學(xué)、美學(xué)、心理學(xué)與社會(huì)學(xué)等。●所謂交互設(shè)計(jì),是指在人與產(chǎn)品、服務(wù)及系統(tǒng)之間創(chuàng)建一系列對(duì)話,其更偏向于技術(shù)性的設(shè)定與實(shí)現(xiàn)過(guò)程。世界交互設(shè)計(jì)協(xié)會(huì)第一任主席雷曼(Reimann)對(duì)于交互設(shè)計(jì)做出了如下定義:“交互設(shè)計(jì)是定義人工制品(設(shè)計(jì)客體)、環(huán)境和系統(tǒng)的行為的設(shè)計(jì)?！薄駨募夹g(shù)層面而言,交互設(shè)計(jì)需要涉及計(jì)算機(jī)工程學(xué)、語(yǔ)言編程、信息設(shè)備、信息架構(gòu)學(xué)的運(yùn)用。從用戶層面而言,交互設(shè)計(jì)涉及人類行為學(xué)、人因?qū)W、心理學(xué)。從設(shè)計(jì)層面而言,交互設(shè)計(jì)還涉及工業(yè)設(shè)計(jì)、界面表現(xiàn)、產(chǎn)品語(yǔ)意及傳達(dá)?！駥?duì)于H5交互設(shè)計(jì)而言,在合理選擇了H5制作工具、輔助工具、設(shè)計(jì)工具后,我們需要重點(diǎn)思考的,是用戶使用你的H5作品時(shí)的體驗(yàn),因此需要結(jié)合用戶心理、操作習(xí)慣、視覺感受來(lái)做整體考量。一、視覺可見原則二、環(huán)境貼切原則三、一致性原則四、容錯(cuò)與及時(shí)反饋原則第

2

節(jié)

互動(dòng)效果的分類H5的互動(dòng)效果種類繁多,實(shí)際上對(duì)H5互動(dòng)效果的分類并沒有統(tǒng)一的說(shuō)法和分類標(biāo)準(zhǔn),這里僅提供一種筆者認(rèn)為分類標(biāo)準(zhǔn)比較明晰的、按照H5互動(dòng)效果功能來(lái)源的分類方式,即市面上H5的互動(dòng)效果可以分為三類:基于傳感器的互動(dòng)效果、基于觸摸屏操作的互動(dòng)效果以及基于融媒體展示的互動(dòng)效果?；趥鞲衅鞫ㄎ粩z像頭麥克風(fēng)01基于觸摸屏操作單屏滾動(dòng)手勢(shì)操作虛擬現(xiàn)實(shí)增強(qiáng)現(xiàn)實(shí)02基于畫面呈現(xiàn)視頻動(dòng)畫特效互動(dòng)03一、基于傳感器的互動(dòng)效果er，ea，’－’市仰的·’·n·，，噸幽守?！埃裆帷ぁぁぁぁ惨?‘··－a’，電.-.鄉(xiāng)、..:tJ:_日在兄袖』”

回』=-y占ansmh‘，俏“，‘－旬．仇．”．，．?dāng)偽?/p>

說(shuō)恰已·忽地也刻”’

－.舍嗡

”相宜本草

《鄉(xiāng)音祝?！?/p>

HS圖5-2-2,itti

鄉(xiāng)古祝福二、

基于觸摸屏操作的互動(dòng)效果圖5-2-4《溫戚電影十周年》

HS三、

基于融媒體展示的互動(dòng)功能圖5-2-7《穿越宇宙的邀請(qǐng)函》

HS方正飛翔數(shù)字版V8.3除了41種預(yù)設(shè)動(dòng)畫外，新增路徑動(dòng)畫、形變動(dòng)畫、形變路徑三種可自定義的動(dòng)畫功能，用戶可根據(jù)內(nèi)容設(shè)計(jì)創(chuàng)造自己獨(dú)有的動(dòng)畫效果。動(dòng)畫方正飛翔數(shù)字版V8.3新增自定義按鈕動(dòng)作。在之前的版本中，一個(gè)按鈕只能添加一個(gè)動(dòng)作，現(xiàn)在按鈕可以設(shè)置多個(gè)動(dòng)作同時(shí)觸發(fā)，并增加了雙擊、長(zhǎng)按的動(dòng)作，以及邏輯條件。按鈕畫廊功能有三種不同的樣式，分別是走馬燈、按鈕式、導(dǎo)航式。走馬燈無(wú)需按鈕滑動(dòng)切換圖片；按鈕式如右側(cè)案例，點(diǎn)擊按鈕顯示對(duì)應(yīng)圖片；導(dǎo)航式是點(diǎn)擊導(dǎo)航鍵進(jìn)行前后畫面的切換。畫廊自由拖拽自由拖拽可以實(shí)現(xiàn)圖片在版面中的任意移動(dòng)，方正飛翔數(shù)字版V7.2.2增加了更多自由拖拽的可控性，可以限制范圍、限制操作。圖像掃視圖像掃視可以實(shí)現(xiàn)在局部范圍內(nèi)通過(guò)手勢(shì)滑動(dòng)，查看高清大圖的效果，可模擬鏡頭移動(dòng)、物品搜尋等場(chǎng)景效果。圖像對(duì)比圖像對(duì)比可以實(shí)現(xiàn)兩張圖片橫向或縱向的對(duì)比，通過(guò)拖動(dòng)分界線可以改變兩張圖片的顯示占比。擦除

Update!類似擦玻璃或刮刮樂的效果，可設(shè)置擦除半徑和自動(dòng)消失百分比。支持對(duì)擦除設(shè)置邏輯事件，可在擦除時(shí)、擦除動(dòng)作結(jié)束時(shí)、擦除對(duì)象消失時(shí)設(shè)置觸發(fā)動(dòng)作。邏輯事件、自定義按鈕動(dòng)作支持根據(jù)擦除百分比進(jìn)行判斷觸發(fā)動(dòng)作。合成圖片合成圖片常用于強(qiáng)交互的H5作品中，作品會(huì)引導(dǎo)用戶完成一系列操作，并將得到的最終結(jié)果保存成一張圖片供用戶分享傳播。動(dòng)感圖像動(dòng)感圖像主要運(yùn)用于H5背景，通過(guò)隨機(jī)生成的運(yùn)動(dòng)軌跡形成飄散的效果，飄散的數(shù)量、大小區(qū)間、擺動(dòng)區(qū)間均可進(jìn)行設(shè)置。數(shù)據(jù)服務(wù)數(shù)據(jù)服務(wù)功能包括文本、單選、復(fù)選、列表、照片、微信頭像昵稱等功能，主要用于收集或展示用戶信息。豐富的加載頁(yè)樣式方正飛翔提供6種加載頁(yè)樣式，可以自定義背景、logo、進(jìn)度條前背景色等。計(jì)時(shí)器常被應(yīng)用于測(cè)驗(yàn)和游戲中，可以記錄答題、通關(guān)時(shí)間，或在計(jì)時(shí)結(jié)束后