重力感應(yīng)裝置是硬件接口，除非客戶端給你開放了這樣的接口，不然你不可能實現(xiàn)的
創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、成都網(wǎng)站建設(shè)、塔河網(wǎng)絡(luò)推廣、小程序開發(fā)、塔河網(wǎng)絡(luò)營銷、塔河企業(yè)策劃、塔河品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供塔河建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com
一、首先從功能與設(shè)計目標來看， H5專網(wǎng)頁主要有以下4大類型：
1.活動運營型
為活動推廣運營而打造的H5頁面是最常見的類型，形式多變，包括游戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態(tài)廣告圖片傳播不同，如今的H5活動運營頁需要有更強的互動、更高質(zhì)量、更具話題性的設(shè)計來促成用戶分享傳播。從進入微信H5頁面到最后落地到品牌App內(nèi)部，如何設(shè)計一套合適的引流路線也頗為重要。
2.品牌宣傳型
不同于講究時效性的活動運營頁，品牌宣傳型H5頁面等同于一個品牌的微官網(wǎng)，更傾向于品牌形象塑造，向用戶傳達品牌的精神態(tài)度。在設(shè)計上需要運用符合品牌氣質(zhì)的視覺語言，讓用戶對品牌留下深刻印象。
3.產(chǎn)品介紹型
聚焦于產(chǎn)品功能介紹，運用H5的互動技術(shù)優(yōu)勢盡情展示產(chǎn)品特性，吸引用戶買買買。
這一類型的H5頁面多見于汽車品牌，LEXUS NX是其中的優(yōu)秀代表案例。精致和極富質(zhì)感的建模、細膩的光效營造出酷炫的視覺風格。用手指跟隨光的軌跡切割畫面揭開序幕，通過合理優(yōu)雅的觸碰、摩擦、滑動等互動形式帶領(lǐng)用戶一同探索產(chǎn)品的7大特性，宏觀和微觀都照顧周全。
4.總結(jié)報告型
自從支付寶的十年賬單引發(fā)熱議后，各大企業(yè)的年終總結(jié)現(xiàn)也熱衷于用H5技術(shù)實現(xiàn)，優(yōu)秀的互動體驗令原本乏味的總結(jié)報告有趣生動了起來。
二．形式為功能服務(wù)
在確定了專題頁的功能目標之后，接下來就是關(guān)鍵的設(shè)計階段了。如何有的放矢地進行設(shè)計，需要考慮到具體的應(yīng)用場景和傳播對象，從用戶角度出發(fā)去思考什么樣的頁面是用戶最想看的最會去分享的。
1.簡單圖文
簡單圖文是早期最典型的H5專題頁形式。“圖”的形式千變?nèi)f化，可以是照片、插畫、GIF等。通過翻頁等簡單的交互操作，起到類似幻燈片的傳播效果?？简灥氖歉哔|(zhì)量的內(nèi)容本身和講故事的能力。
2.禮物/賀卡/邀請函
每個人都喜歡收到禮物的感覺，抓住這一心理，品牌推出了各種H5形式的禮物、賀卡、邀請函，通過提升用戶好感度來潛移默化地達到品牌宣傳的目的。既然是禮物，那創(chuàng)意和制作便是重要的加分項。
3.問答/評分/測試
問答形式的H5頁面也屢見不鮮了，利用用戶的求知欲和探索欲，一路選選選，看最后到底是什么成績。一條清晰的線索是必要的，最后到達的結(jié)果頁也需要合理不突兀，如果能輔以出彩的視覺和文案，弱化答題的枯燥感那就再好不過了。
4.游戲
從 “圍住神經(jīng)貓”、“看你有多色”等單純小游戲再到杜蕾斯“一夜N次郎”（即山寨版“別踩白塊兒”）等品牌植入式小游戲，H5游戲因為操作簡單、競技性強，一度風靡朋友圈，但創(chuàng)意缺乏和同質(zhì)化現(xiàn)象導(dǎo)致用戶對無腦小游戲逐漸產(chǎn)生了厭倦。品牌要在游戲上做到成功傳播，需要在玩法和設(shè)計上多下點功夫。
三．為設(shè)計加分的4個要點
一個H5頁面設(shè)計品質(zhì)的出眾與否，會直接影響其傳播效果，甚至影響到用戶對品牌形象的認知。在這里總結(jié)出以下的設(shè)計要點：
1.細節(jié)與統(tǒng)一
要成就高品質(zhì)的用戶體驗，必須考慮到細節(jié)與整體的統(tǒng)一性。復(fù)古擬物的視覺風格，那字體就不能過于現(xiàn)代；幽默調(diào)侃的調(diào)調(diào)，那文案措辭就不能過于嚴肅；打情感內(nèi)容牌的，動效就不能過于花哨。
2.緊跟熱點，利用話題效應(yīng)
想要你的H5專題頁一夜爆紅，第一時間抓住熱點并火速上線，借機進行品牌宣傳也不失為一條捷徑。
3.講個好故事，引發(fā)情感共鳴
不論H5的形式如何多變，有價值的內(nèi)容始終是第一位的。在有限的篇幅里，學會講故事，引發(fā)用戶的情感共鳴，將對內(nèi)容的傳播形成極大的推動。
4.合理運用技術(shù)，打造流暢的互動體驗
隨著技術(shù)的發(fā)展，如今的HTML5擁有眾多出彩的特性，讓我們能輕松實現(xiàn)繪圖、擦除、搖一搖、重力感應(yīng)、擦除、3D視圖等互動效果。相較于塞入各種不同種類的動效導(dǎo)致頁面混亂臃腫，我們更提倡的是合理運用技術(shù)，用心專注于為用戶提供流暢的互動體驗。
結(jié)語
隨著手機硬件的升級、HTML5技術(shù)的發(fā)展以及微信平臺的開放，HTML5的跨平臺、低成本、快迭代等優(yōu)勢被進一步凸顯，這對身處于移動互聯(lián)網(wǎng)大潮的企業(yè)主、品牌、設(shè)計師和開發(fā)者來說，都將是一個最好的時代。
H5是Html5的縮寫”，這恐怕是很多人的一個錯誤認知。事實上，二者并不是一個意思。
H5確實涉及HTML5諸多規(guī)范，想做H5頁面或多或少都要利用到HTML5很多內(nèi)容。但二者只是有聯(lián)系，并非對等。
隨著H5的火爆，同時也引起了技術(shù)陣營與營銷陣營的定義爭鋒，當時在互聯(lián)網(wǎng)上兩方大打口水之戰(zhàn)，對定義展開了一場博弈，結(jié)果雖然是技術(shù)陣營妥協(xié)，但也有利的證明了HTML5和H5根本不是一個層面的東西！
除了把H5誤認為是Html5的縮寫外，還有一些人存在另一種誤區(qū)，那就是“H5=微信網(wǎng)頁”。事實上，這也是不對的。
從切身體驗來說，H5似乎是基于微信的網(wǎng)頁，但實際并非如此。大多數(shù)情況下，我們是通過朋友圈和微信群觀看H5的，但實際上我們利用任何瀏覽器都可以觀看H5，不管是 PC端還是平板端。跳出朋友圈，H5依然可以被瀏覽，它的特效和演示甚至比你在微信看會更加流暢！
原來是因為微信集成了移動端瀏覽器，離開微信，H5照樣可以正常運行，只是因為人們習慣了通過朋友圈打開H5來觀看網(wǎng)頁。所以，H5并不是微信網(wǎng)頁，它是一個更大的概念，只是因為微信巨大的用戶群，讓H5集中于微信，讓人們覺得這個頁面就是微信獨有的，也讓H5和微信朋友圈成為了代名詞。
H5到底是什么意思，其實真的很難把它用概念的形式來講清楚。因為H5更像是國人制造的一個專有名詞，就像是我們喜歡把“蘋果 7”說成是“腎7”一樣。但H5就壞在它看上去像是個英文縮寫，似乎是某種尖端技術(shù)，實際上國外根本沒有這個說法，老外都不知道這個H FIVE是什么東西。
H5所涵蓋的范圍其實很大，它不是 HTML5、不是微信網(wǎng)頁、不是移動PPT。相反，從某種意義上來說，它是這些東西的母級，H5所指的就是移動網(wǎng)頁本身，它能夠包含所有這些分支。
如果你對H5感興趣的話，戳出這里：網(wǎng)頁鏈接，海量H5免費視頻教程任你挑！
對于學習前端有任何不懂的可以隨時來問我，我給你提供一個非常不錯的前端交流學習qun：前面是一一四，中間是一八八，后面是四九三一。有問題就在里面問我，這樣你可以少走很多彎路，做起來有效率，記得多跟有經(jīng)驗的人交流，別閉門造車。
不知道呢，聽人說可以對HTML5的全景播放器進行代碼干預(yù)，能讓蘋果設(shè)備上使用重力感應(yīng)（陀螺儀）控制瀏覽。
var?con?=?document.getElementById("con");
(function(){
//?監(jiān)聽運動傳感事件，查看是否支持硬件運動
if?(window.DeviceMotionEvent)?{
window.addEventListener('devicemotion',?deviceMotionHandler,?false);
}?else?{
alert("您的設(shè)備不支持硬件調(diào)用");
}
//?變量初始化
var?x?=?0,
y?=?0,
z?=?0,
lastX?=?0,
lastY?=?0,
lastZ?=?0,
curTime?=?0,
lastTime?=?0,
diffTime?=?0,
speed?=?0;
//?設(shè)置一個閥值
var?SHAKE_THRESHOLD?=?800;?//?設(shè)定搖晃的閾值為600?運行相應(yīng)操作
/*
*?功能：測算三個方向重力加速度，達到一定值進行相應(yīng)操作
*?作者：HTML5學堂、劉國利、陳能堡
*
*/
function?deviceMotionHandler(eventData){
var?acceleration?=?eventData.accelerationIncludingGravity;
//?獲取當前時間
curTime?=?new?Date().getTime();
//?計算時間差，當這個差值大于一定值執(zhí)行計算三個方向的速度
if?((curTime?-?lastTime)??100)?{
//?記錄上一次的時間
diffTime?=?curTime?-?lastTime;
lastTime?=?curTime;
//?獲取當前三個方向的值
x?=?acceleration.x;
y?=?acceleration.y;
z?=?acceleration.z;
//?計算速度，為了防止出現(xiàn)負數(shù)，進行絕對值
speed?=?Math.abs((x?+?y?+?z?-?lastX?-?lastY?-?lastZ)?/?diffTime?*?8000);
if?(speed??SHAKE_THRESHOLD)?{
alert("我實現(xiàn)搖一搖了");
};
//?記錄上一次三個方向的值
lastX?=?x;
lastY?=?y;
lastZ?=?z;????????????????????
};
}
})();
資料來源HTML5學堂。
1、點擊屏幕交互
點擊是最常用的手勢，經(jīng)常用于頁面切換。點擊引導(dǎo)可以作為注釋，用戶可以理解H5內(nèi)容，使用戶能夠按照H5的節(jié)奏操作。例如，在《帶上希望的種子去北京》中，用戶可以點擊手勢“檢查”行李箱，詳細查看H5設(shè)計的內(nèi)容。
2、連續(xù)點擊交互
連擊交互在游戲類中的應(yīng)用比較多。在游戲類H5中，通常由連續(xù)點擊生成的數(shù)值關(guān)聯(lián)積分排名，具有競技性質(zhì)的H5可以進一步吸引用戶參與。例如，《漫威電影十周年》的“揍”滅霸小游戲，用戶繼續(xù)點擊屏幕，10秒內(nèi)的點擊次數(shù)就會計算出整個網(wǎng)絡(luò)排名。
3、長按交互
長按是用戶根據(jù)H5引導(dǎo)長時間觸摸頁面。長按交互用戶需要保持手指靜止狀態(tài)，并在設(shè)計時提示H5播放進度參考，以避免乏味。例如，從騰訊公益的《敦煌未來博物館》設(shè)計的風化過程來看，用戶點擊手機即可看到壁畫隨著年份推移逐漸風化的場景，還可以喚醒用戶心中的文化保護意識。
4、滑動交互
拖拽交互必須在長按交互的基礎(chǔ)上滑動，從一個點拖動到另一個點可以讓用戶自行控制速度。適合圖片展示類的H5。例如，在《睡姿大比拼》中，用戶可以拖動角色肢體來創(chuàng)建各種有趣的睡眠姿勢。
5、重力交互
重力交互是一個非常直觀的表達形式，用戶可以輕松get到H5獲得樂趣，這意味著手機硬件能升級給H5設(shè)計帶來了更多的可能性。利用重力感應(yīng)、陀螺儀、速度加速器等硬件，對H5的玩法進行創(chuàng)新，提高用戶的代入感。例如，安裝在《一“陸”狂飆，極速挑戰(zhàn)》上的賽車游戲是通過手機重力傳感來調(diào)整小車的方向。
6、全景交互
全景交互在屏幕中以360度展現(xiàn)所有場景，用戶可以通過滑動移動場景。這種H5格式(如VR)需要關(guān)注整個場景的設(shè)計，邊界連接要足夠順暢，全景加載內(nèi)容較大，一定要注意用戶等待和屏幕卡頓的問題。例如，華為出品的《我的榮耀5G世界》中全景互動展示了未來豐富多彩的5G世界。
以上幾種就是現(xiàn)目前比較常見的H5交互元素，如有幫助請采納~
重慶分公司
重慶分公司
