H5交互融媒體作品創(chuàng)作 課件 第六章 H5作品的交互設(shè)計與互動效果制作

H5作品的交互設(shè)計與互動效果制作本章要點關(guān)鍵詞第6章1.掌握H5作品中交互設(shè)計的總體原則。2.了解H5作品中的不同交互類型及其分類。3.掌握使用方正飛翔數(shù)字版制作不同類型互動效果的方法。交互設(shè)計

互動效果第

1

節(jié)

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

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

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

2

節(jié)

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

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

說恰已·忽地也刻”’

－.舍嗡

”相宜本草

《鄉(xiāng)音祝福》

HS圖5-2-2,itti

鄉(xiāng)古祝福二、

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

HS三、

基于融媒體展示的互動功能圖5-2-7《穿越宇宙的邀請函》

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

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

Update!曾經(jīng)的接力數(shù)據(jù)在方正飛翔數(shù)字版V8.3中升級為接力計數(shù)，升級后不僅支持按照瀏覽量顯示數(shù)據(jù)，還能夠通過按鈕控制調(diào)整計數(shù)，可用于各種