header_v0.7.31

两个H5作品的设计过程与思考

1年前发布

原创作品 / 网页 / 移动端网页
作品版权由小田仙人 解释, 禁止匿名转载;禁止商业使用;禁止个人使用。 临摹作品,同人作品原型版权归原作者所有。

由于自己工作规划的关系,开始尝试接触H5的设计。今天分享的两个H5的设计工作周期都大概在两周左右。其实整个过程与广告设计的区别还是非常大的。最主要的一点大概就是从与受众的弱相关变成了强相关。那种感觉就好像是美工背后站了一群领导来让你往上往下 调大调小。这种感觉是很不好适应的。其实这也是一个不是很懂交互的设计师的短板。所以在这一部分,仅自己推翻自己的改稿就有很多次,然而最后的效果依旧不理想。是的,最后还是挺不满意就匆匆上线了。不过这也让我对H5产生了很大的兴趣,希望以后能做出优秀交互的作品吧。

第一个H5的LODING页 同时引导用户将手机横屏
这个H5主要内容是新加坡F1(起点/终点/颁奖处)豪华包厢/包机/酒店客房的售卖

此处的头像与姓名可以获取用户信息,将微信头像与姓名导入H5 增强用户代入感

读过引导文字 在世界地图上会显示一些世界上特色的F1赛道地点,当用户触入新加坡自动跳转

接下来进入新加坡赛道地图界面。恩,最初长这样,放到手机上当然是啥都看不清楚。于是简化简化简化....

在此处我将交互方式设置为陀螺仪定位 当手持横屏手机在45度角的情况下,地图显示最中心画面【见下图】当我们手拿手机有任何角度的变化时,地图随轴坐标旋转+移动产生(伪)类似GPS效果

这个用电脑版的H5演示软件没有办法录屏(因为PC没有陀螺仪)所以我手机进入H5截屏(手残没有保持水平)所以有了一丝角度。恩,这就是这个陀螺仪交互的作用。

最后就是结尾了,可以诱导分享。土豪也可以点击进入详情页购买(貌似是49999)起

这些是切好的图片素材,整体文件 算音效大概2M左右吧。还是蛮小的。

接下来第二个H5追得是老九门的热点【大西轰~~二爷~~】
这里的LODING文字有小菜单【有玩炉的兄弟你们懂得】

吸取了上一个H5的经验,这一次我将主要的交互都放在了下面这个红色的按钮上,并且以按钮为中心,将按键效果,音效,光效做强。目的是降低用户的学习成本,并且通过按钮的真实交互感,提升用户体验(这些在做UI的盆友眼力显而易见的道理,对于我竟然这么难...)

557
1 2 3

作品信息

  • 创作时间

    2016/08/17

  • 创作工具

    戴尔 Inspiron 灵越台式机
相关作品 收录收藏夹 TA的主页
两个H5作品的设计过程与思考
意见反馈
没有新消息
密码登录
短信登录
微信二维码登录

提示文案

提示文案

提示失败
提示成功