《H5玩法设计汇总》由会员分享，可在线阅读，更多相关《H5玩法设计汇总（2页珍藏版）》请在金锄头文库上搜索。
1、世界工厂网线上生态学院 H5玩法设计汇总伴随手机移动端的出现，互联网普及到了更多的用户。html5的发布让移动端web增添了很多新的能力，这些能力给我们带来了很多新的玩法，不知你知道了多少呢？小编整理了一些H5的玩法技巧设计，一起来了解一下吧。一、基于传感器这种依靠手机传感器实现的玩法在设计时要结合业务本身选用相关的合适的传感器，不要随意搭配或随意叠加多个传感器，避免画蛇添足。常见的传感器有陀螺仪、gps、摄像头、麦克风、震动传感器、光线传感器、距离传感器等。1.陀螺仪、重力感应这类交互在体感游戏中比较常见，如控制射箭的方向、挥剑、打乒乓球等，而在H5中则可用于摇一摇、控制赛车左右前进、检查手
2、机是否平躺/竖直、全景图/AR转换角度等，也可以用于制造视差效果，使画面富有层次感。2.地理位置这类H5结合用户所处的位置，可以提供比较方便的周边生活服务，如查找附近的摩拜单车、获取附近的餐饮信息和前往路线；也可以与运动结合，如记录用户的跑步轨迹。如果用于办公，则可以做上班打卡功能、外勤人员的工作监控等。如果用于游戏，则可以创造出类似pokemon go的玩法，在用户的位置附近散落奖品，让用户走到目的地收集奖励。3.人脸识别用人脸和H5进行互动，玩法有根据人脸猜测年龄、猜情绪，测试与明星脸的匹配度，将人脸和游戏电影人物相结合，将人脸变成小时候的样子，根据人脸的动作做出反馈（如张嘴时从嘴里飞出企
3、鹅、眨眼睛拍照）等，通常跟AR和图片合成技术搭配使用。这类方式比较适合用于游戏电影宣传、个性化用户样貌、图片类产品推广的场景。合成的图片可以在边角加上活动二维码，使得其他用户看到这张图片时也可以参与活动。二、基于触摸屏操作如单屏滚动、手势操作、全景交互及多屏互动等都是基于触摸屏的操作，在设计此类操作时要符合用户的正常习惯，例如滑动屏幕可以翻页、移动场景，双指拉开表示放大操作。此外，可操作区域也要弄大些，方便用户操作。1.单屏滚动这是一种很常见的交互形式。如幻灯片一样，网页上的每一页内容都是占满全屏的。当用户滑动屏幕翻下一页后，当前整个屏幕的内容都会翻走，然后再展示下一页全屏的内容。翻屏时可以加
4、上一些转换的动画，如渐入渐出，使得翻页效果生动不单调，也可以加上重力感应，让手机在转动时产生视差效果。2.手势操作我们和屏幕交互，除了有点击、滑动外，还有很多手势操作，如拖拽、双指拉开放大、双指画圈旋转物体，画图形表示某个动作等。手势操作可用于放大查看图片、对图片进行拖拽/放大/旋转等编辑、手势解锁、也可以用于游戏上，如拼图游戏时拖拽、旋转拼图碎片。三、基于画面呈现这类玩法一般就是展现一段比较酷炫有趣的画面内容，如视频、动画、特效，给用户带来视觉上的感官享受，用户也可以通过与画面内容互动，看自己想看的内容。1.视频/动画展示这个玩法的主要制作方式有：视频。这种方式需要前期拍摄、后期使用专门的视
5、频软件（如AE）制作，能制作出很炫的效果，但成本较高，用户通常只能被动地观看完整段视频；使用canvas制作，这种方式可以制作出像以前的flash一样的动画，效果没视频酷炫，但这类动画既可以看，又可以在播放途中自然地添加交互，相关组件有createjs、egret等；使用H5+css3制作，这种方式也能像canvas一样制作出动画，但制作难度和复杂度都比方式2大，而且也有可能带来性能问题。2.全景交互全景交互指将用户置于一个360度环绕的图片/视频环境下进行沉浸式的体验，用户可以通过转动手机或滑动屏幕来看这个环境里不同角度的内容并进行交互。如果将内容分成左右两个屏，带上VR眼镜，则可以进行VR体验。3.多屏互动多屏互动指在多个屏幕上体验活动，各自的操作会同时反应到其他屏幕上，一般以双屏互动为主。玩法有多人合作完成任务/互相竞技、你画我猜、一问一答、情侣互动小游戏、线下与现场观众互动、多个屏幕拼起来看视频等，也可以把手机屏幕当成控制器，用大屏幕来显示。总结：H5的出现使我们有更多的空间去创作和策划，企业应该把握这个机会，设计出符合自己品牌及产品定位的优秀H5页面。世界工厂网线上生态学院：制造企业开展线上业务的加油站
