h5设计说明文案怎么写?
点击是最常见的手势之一,可用于页面过渡。这种交互手势一般需要设置点击引导。
指导可以作为评论,帮助用户了解H5,让用户跟随H5的想法,促进剧情发展。符合主题的个性化引导设计能迅速将用户带入情境。
比如在红网的“把希望的种子带到北京”,用户可以点击行李传送带上的行李进行“拆包检查”,查看代表们的建议,听听他们的故事。
H5用行李箱作为一个点击按钮,为用户构建一个去北京的场景。即使不能亲自到现场,也可以“参与”会议,了解会议内容。
点击手势也常用于测试H5,用户点击屏幕选择不同的选项,并生成独家测试结果。
网易的《测测你的哲学气质》《欢乐颂测测你是谁》《喂食手册》都是测测H5,只需点击互动即可完成。
02组合互动
连击互动主要用于游戏H5。持续点击屏幕节奏感强,点击量和积分排名的相关性会有竞争性,可以激发分享,吸引更多人参与。
这种单一的互动模式操作起来比较简单,所以会结合限时和限时的玩法。
网易的“漫威漫画电影十周年”H5设计了一个“击败”灭霸的链接,用户需要点击屏幕记录10秒内“击败”灭霸的次数。10秒后,用户可以看到combo的数量及其在全网的排名。
守护你的幸运足球属于H5,没有连击次数的限制。为了精确而不求数量,你需要点击屏幕来控制足球的高度。不能“飞”得太高撞到鸟和石柱,也不能掉到地上。
《穿越中国70年》是网易为庆祝新中国成立70周年制作的视频《H5》。
其中“为祖国点赞”链接要求用户双击屏幕,每点击一次计一分。combo时产生的爱情特效会变色,画面会给用户新鲜感。
赞的创意来源于短视频赞,交互手势是用户熟悉的形式,有利于带动为祖国“呐喊”的正面情绪,提升体验感和沉浸感。
03长按互动
长按需要用户根据引导长时间触摸H5页面中的一个按钮,以保证画面的连续播放和平滑过渡。
因为长时间的按压需要用户的手指保持静止的暂停状态,所以用户可能会感到厌烦。在设计时,最好能提示H5的播放进度,在时长上给用户一个参考。
长按交互经常以镜像的形式用于H5。经常考验故事的衔接和镜头的转换。使用得当可以给用户带来良好的体验,让用户更加专注,从而提高播放率。
通过长按动作,用户可以自由观看画中画形式的所有内容。
《武林外传》和《仙剑奇侠传》
04长像视差互动
长画面的视差互动经常以滑动手势进行,这驱使H5连贯地播放。
视差动画由于与主视觉画面的运动速率不同,具有更鲜明的空间层次感。
这样可以增加画面的新鲜感,缓解高密度内容带来的视觉疲劳。减轻阅读长篇图文的厌烦,协助H5从画面效果中平稳过渡。
网易的《自白》就是用这种方式把故事往下滑,把主角的变化呈现给用户。使用滑动手势控制故事播放,让用户更有参与感。
“你要的都是好的,我们尽力做好”以滑动长图+视差动画的形式,带领用户从1988到2018,串联起兴业银行30年的发展历程。
童话里遇见你的时候用的是长画面,滑动的时候会在场景中插入一些小元素,让整个H5看起来很酷很丰富。
05拖放交互
拖动不同于滑动。你需要抓住屏幕,从一个点拖动到另一个点。移动速度由用户控制,适合策划图片展示或叙事等专题。
网易的“睡姿大赛”H5采用骨骼动画技术,用户可以拖动小人的四肢,在床上DIY自己的睡姿。
除了选择场景和人物,H5还在床上提供小物件进行搭配,可以放大或缩小来装饰卧室。
06双指变焦交互
双指交互要求用户同时用两个手指触摸屏幕,例如滑动屏幕来放大或缩小某些东西,也常用于图片过渡。
这种交互需要手势的微操作,玩法有些复杂。但是交互比单指点击滑动更强更有趣。
网易新闻的H5《坚持比新闻更接近真相》采用了穿越时空的设定,设计了两指放大手势进入下一页。单击按钮查看当前页面的详细信息。每个页面上统一的手势很容易让用户理解。
07语音交互
除了触觉交互,还有听觉交互。语音交互比较少见,多与录音有关。按照H5指导,录一段,DIY生成专属音频。
网易云音乐的“有故事的单曲直播”就是让用户录音,讲述自己的故事,创建录音文件。录制完成后,会生成一张带有副本的定制海报。
用声音控制H5也可以表现为自选的音乐片段,DIY成一首完整的歌曲。
网易云音乐的“放音乐,我从来没有害怕过”允许用户从几个音效中选择自己喜欢的风格,然后对原曲进行调音,生成个性化的音乐。
DIY制作的音乐代表个人喜好,具有一定的社交属性。
08写作互动
书写交互是一种自由度很高的交互方式,用户可以根据提示自由创作文字和图片。
通过绘画创造的图像是独特的,并反映了用户的情绪。面对自己画的人物,用户可以更用心地投入到H5中,流失率往往不高。
网易的《里约大冒险》给了用户一些指导,根据提示画出了小人、绳子、降落伞的形象。
虽然这些图像的线条略显粗糙,运动与背景形成鲜明对比,但由于是原创人物,用户对画面的包容性更强。
文本部分的写作交互常用于测试类H5。用户根据提示输入姓名或想说的话,生成海报得到测试结果。
网易新闻的H5“保护你名字中的汉字”可以输入你自己的名字,找到需要你自己保护的濒危汉字。
H5测试产生了日常生活中很少使用的生僻字。“守护”汉字的主题,既能让用户了解这些濒危汉字,又能赋予他们使命感,积极分享传播。
09重力相互作用
模拟现成的物理规律,可以大大降低理解的门槛,增加规划的趣味性。
移动电话为硬件技术的发展提供了许多可能性。使用重力传感器,陀螺仪,速度加速器和其他硬件设备可以创新H5游戏,增加代入感。
当摇晃手机时,H5会自动判断手机的倾斜角度。因为是技术性的,重力交互经常用在特定的页面。
网易新闻的《时空恋办公室》就是利用手机的重力传感器晃动手机唤醒主角,开始剧情。
10三维空间互动
3D交互主要利用3D技术构建三维场景,突破了平面屏幕的限制,强调层次感。
然而,这种交互模式在开发和设计中难度较大。考虑到用户的使用习惯,3D交互玩法相对简单,往往结合点击、滑动等基础手势,3D作为H5的一大亮点出现。
“我的龙猫在线扭蛋游戏今天开放!“拧蛋器”“金币”等元素为3D,正常比例的原创动漫角色为q版。
拧鸡蛋是一个动态的过程。如果使用二维图像,交互效果并不明显。3D物体强调用户的存在感,还原扭蛋的未知乐趣,H5玩起来更逼真。
11全景互动
在360°全景形式下,用户可以上下左右滑动。
这款H5以类VR的形式承载整个画面交互,更注重H5场景的设计,立体感强,要求画面360°边界平滑衔接。
但由于加载内容多,H5体积大,播放时很可能会出现画面卡顿等问题。