“5媚娘传奇”——H5总结大会

作者:KIKI
icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm33yJRIZcdEWUPewiaic7tP2QhuY6st4NWfZFyWzx1AGVibnIFSfUn0w6ib

去年JDC出了不少优秀的武媚娘...不,H5呢,大家都很拼哒,同时当然也是累计了一些经验和教训啦。今天就从字体,排版,动效,音效,适配性,想法这几个方向结合咱们的例子朕就关上门只跟你来好好聊一聊关于H5的设计吧~~

icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm33XdWTd6NoEWz9V12VyF15J0aICPN2hr2NY3C7W5MDasRXWhHF8NuL

icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3Gza3wt0l7QnAXG0EREzfnPab1gL896C1Ef78PHjNiad6tIiciazicZB1G

在有限的手机屏幕空间内,我们积累的经验告诉我们最好的效果是简单集中,最好有一个核心元素,中心元素不宜过多,突出重点为最优。icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3ib8C2k8CrYFblTOL0hS5wcI3IRN8ibFic3PDus13iaQSZUApZ23yyrmk5

比如JDC的“拍拍十二星座实用手册”的项目,只用了最简单的图形和文字居中摆放。icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3C4ib85iaUrVqiaHTib2cppY4wL0euqTUHiaY4jATWYqI0Ll0kTet2KFhH8

还可以以可口可乐的这个“我们在这 我们在乎”为例,相较而言,越左边的排版会越容易引起关注。这是因为我们懒惰的大脑里最初看到这种简洁排版会立刻出现“嗯 我可以马上看完不费劲”的潜意识信息而带着轻松的态度去阅读。

icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3M8zZWbQPF78ZK3WttKFyiapy3Ycjibxokz0fJWV8Bqs1bI1xMVOGDYM

icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3D0doHS7ib8W0XbpV69y4kzQzev1SjDgXI8fY3DUaG9DhbragXAZfqE

前期跟前端设计师进行沟通,讨论页面中元素的动效呈现。例如一些元素的位移,旋转,翻转,缩放,逐桢,淡入淡出,粒子效果,照片处理等等,还有3D展示效果。
icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3YXcVMia6ianoRHEk4lEmvPmBvY9ciassibX36dbqOzzA6tp1v8rh1AEO6

比如JDC出品的“京东HR招聘”里面就用了位移,缩放,淡入淡出的效果。而“京东微店七宗罪”的最慷慨这一屏则是用到了粒子效果,每个钱币翻转下落的速度不一样显得画面更真实。今年在朋友圈疯转的维多利亚和特斯拉的H5用的是擦除的效果,模糊的遮罩足够挑起人们的好奇心。
icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3orGhWV2c5nX2ia4sGRCyVIxALNBKrVcoiaZyN3GQfMoZ2z6cq78EJZW

背景动效其实比较推荐缓动效果,如“京东管培生招聘”的例子里星空中一闪而过的流星,间歇性出现不抢主角风头再好不过了.
icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3NkdbIWWtEpLgpO33G9tpzdATozdOicwWmvwjJYmwbCdvcS92JsTRB3

复杂多变的动效不一定是好的,要考虑到加载速度等用户体验问题。

icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3vmBYYnz2qXEI7ib6O8zSbVhxbAicWMKZ5HZibL1Gcv4JReqm9loN09W7

考虑到用户使用场景的多样性,那种介绍类的如果要加背景音乐,尽量不要太粗暴。有一点循序渐进最好,给用户留时间在骚扰别人之前可以关闭。

或者可以在开始时是关闭状态。但做游戏h5页面的时候,音乐可以没有关闭开启按钮,因为用户对接下来发生的事是有预知的。
icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3lJnUqsXF7FmKDkAeFvWHxdBtrU4AyOQIxNyOfy04GgltqhIxqbQBC

考虑每一页音乐按钮放置的明显性。如果能用其他页面元素去替代音乐符号作为按钮也是极好的。
icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3aD9Fqux2lIK3pT6PVLu0FrkMLUa4jBibdmibuPcnfQOtBu1nicUGH85j

给前端设计师的音乐文件:格式为mp3等 ,单轨,最好30秒以内 。为了加载速度,文件大小尽量控制在:100k以内最佳,可以用Adobe Audition等软件来压缩。作为无限循环的背景音乐,截取时一定要注意头尾得连接得上。

icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3bSic87cRic4ZvdLjaM3k3SvJhYFlor9slE1u0hicqe4HLHqXKvm97qRp

展示型: 有很多种不同的交互方式,最常见的是翻页,这种方式制作起来相对简单,多用于展示一些新的产品,功能,或者活动介绍等。技术上现在市面上已经有H5在线生成器,基本上给图片和文字就可以帮你进行处理。

除了翻页以外,还有点击,输入文字,擦除屏幕,滑动屏幕等,玩法非常丰富。在“拍拍圣诞活动”里就用到了重力感应,摇一摇可以随机判断,让用户有了自己参与的乐趣。
icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3jicllzpwfGosJOBIibyfvRgbR97ARGzlp7fY5Ml26pDRje3UToVf243

游戏型:像是起初朋友圈红过的围住神经猫,或者是我们的“拍拍jump”这类需要计算逻辑,得出分数或者结论的小游戏。

产品型:有一些H5是作为一个长期运营的产品存在的,用户的访问可能会更固定,比如微信里的购物页面等。

icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3I44wSulZLezhIXbpLpCHOHicp8icMSsRg2PNsDv2BYwTVXbyeBHNAlX

手机端之间:一般我们先用640X1136进行设计,参考线会标在960高的地方,主要元素最好不要过高以适配各种机型。其他安卓机器前端切图时可以适当拉伸,变化不会太大就不用每个进行适配。

响应式Web设计(Responsive Web design):页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。

为不同电子设备单个布局,尽量使用纯色而非渐变

icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3Z0ztK598qGic8qkEKGBMgwwiasJw15jbgzuCrJxAvgLucia9LOFtV7p0

被大众主流乐于分享的信息大概有这么几种:

1.最直接的利益驱动,分享有奖或者需要众筹等;

2.对自己有用并且也对周围人也会有新鲜感的信息;

3.自己参与游戏或者测试得到的结果。

不管是分享给朋友或朋友圈还是QQ对话,让用户主动去分享你的带有很大性质的广告意味的信息在自己的社交群体中,此条信息与自己相关并且别人也能参与进来当然是最理想的。

icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3NJHxlUuhIp7Sk86FKx5De6E2zwQxwLicwRTUgPl4t52ddEgDlcrxTH

可口可乐北极熊求合影的例子就是一个很好的宣传方式,借由简单的合成照片技术让人们有意愿去分享自己努力创作的照片。还有UJEANS的设计延续了品牌的调性就是实用,在选择你的牛仔裤喜好时也同时穿插了商品的说明,显得不那么生硬,它比较符合理由3。

在我们设计一个H5页面时,很重要的一点就是站在自己的角度跳出来去看你做的东西,首先一点是你和你周围的人愿意转发分享这个东西吗?它有趣吗?它对其他人也是有用的信息吗?

icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3Xzu7esdxia6YAHu8P4FWIj12gzatefplDuu1zsYoGVY7YAtA6AiaFxU

在做“1212陪你一二到底”的时候,我们的设计师要在最后引出有优惠券领取这个信息,前面也用用尽了节操去设计文案和人物,在此体会一下文案的重要性,它是贯穿整个H5的灵魂。第二张图上的小字“海外大牌 足不出户购遍全球”是产品想说的硬广告台词,但在小小的手机屏幕里,碎片时间中,我们必须先抓人眼球,再抓住人心,所以”身体和快递,至少一个在路上“。

icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm3ctYAtl1I2DhKpQFalSiboQRp47xiatXmwJDMk3CJXHNbm7tpY9DicsBI

对于展示型和互动型H5来说最重要的还是想法。对于设计师来说,也许他们给到我们的只有几行文字,那时候前期构思这个H5的时间有可能比真正做的时间还要长。

比如拍拍网全球同步发售iPhone6的这个消息要做成H5,如果我们只是做一张炫酷的图片告诉大家我们这里有iphone6分享朋友圈有可能中奖,也会有利益驱动的诱惑让人去转发分享。但通过大家的脑爆,我们将这句话变成“关于Phone6的哥德巴赫猜想”,根据测试结果得出有趣的结论,这样转发的并不是赤果果的求中奖行为,还带着有趣的插图和自己测出来的杀马特范,是不是显得更含蓄更不经意呢。这样最终转发的理由上述1,2,3好像都有了呢。

icrwfZzFw6fYibian5X2H2rMfU5j9rZ4Hm34FR0c4rx4Fohe8YXFN7ib7SELMe9EaGLbrPdLMocWtZtp83yg9AWF1

H5和app比起来优势在于开发周期时间短,传播起来有效率,并且在更新迭代的成本上要小很多。特别在游戏上,未来H5会有更多的可能性。

原文链接: http://t.cn/RZnHzZD  

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/3481/

(0)
Smiler李想Smiler李想
上一篇 2015-01-26
下一篇 2015-01-27

相关推荐

  • 画交互原型方案前,你应该思考的三个点

    一个优秀的交互设计师,一定要从用户目标出发,了解用户的核心痛点,满足用户的需求,只有这样才能打造一个好的产品。

    2017-04-29
  • 静电的SKETCH教室,全套教学视频免费分享下载。

    “静电的sketch设计教室”教学视频,对于新手自学来讲非常的合适,感谢静电,讲解的非常的清晰明了,视频就在这儿,剩下的就需要你付出时间去学习咯,祝大家学有所成!链接: https://pan.baidu.com/s/1iIbE-DI_yHLayj7wue49yQ 密码: mw25·—END—·

    2018-04-18
  • 《用户体验要素》读书笔记:要理解为何这样做产品

    《用户体验要素》是一本实用类书,试图回答如何以用户体验为中心进行产品设计。作者通过构建自下而上的五层模型:战略层,范围层,结构层,框架层,表现层;来将以用户体验用户需求为中心的设计方式层次清晰的表达出来。并指出;一开始对战略层的深思熟虑,会帮助我们在整个产品设计中节约大量的时间。作者这本书写于pc时代,大多案例都是网站的建设。但是整个思考产品的思路,直到今天;都没有过时。一、 以用户体验为中心设计产品用户体验是指产品如何与外界发生接触,...

    2018-04-08
  • 阿里国际UED小二亲授“有效”视觉传达 — 新零售时代,打好2018年内容营销的开局基础!

    如今商业已经进入新零售时代,流量红利已经过去。要让消费者感兴趣并购买商品,不能再靠简简单单堆叠商品信息和低价促销吸引消费者,而是要在内容上精耕细作,达到信息的有效传达。而人获取的信息八成是来自于“视觉”,所以可想而知,在如今内容爆炸的时代,视觉营销能有效帮助商业提升转换效果,成就更好的销售额。阿里巴巴国际ued团队欣频据第三方预测,2018年,84%的营销内容都是以视觉图像的方式来呈现。我的个人观点,未来品牌的视觉营销会呈现情感化、个性...

    2018-01-31
  • 仍停留在1999年水平的通知功能,何时能更智能?

    20年过去了,一切都在发展,唯独通知还停留在1999年的水平。——@mikeindustries20年过去了,一切都在发展,唯独通知还停留在1999年的水平。——@mikeindustries

    2017-05-25
  • 交互大厨的私房书单!10本「交互模式」的好书帮你进阶学习!

    这些交互设计 必备书籍,但你也许都没读过;初次接触交互设计 ,这11本书,刚好够读一年,你的技能将会有质的飞跃。

    2017-05-26
  • Axure RP 7.0软件安装教程

    如何在软件屋下载软件?目录查询编号首页回复编号点击链接输入密码提取文件点击查看详细步骤Axure RP 7.0安装资源下载地址:链接:https://pan.baidu.com/s/1rafwH1U密码:m6fo安装中有任何问题请咨询软件屋私人微信:wei-c-q-186软件介绍:Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。...

    2018-03-04
  • 内部教程!超实用6步透视网易设计规范(附完整PDF下载)

    这是一份不可多得的网易干货资料,更是一份非常标准的设计规范准则!产品经理&视觉设计必看!

    2016-08-29
  • 考研是工作的理想国 | 同济大学设创交互设计考研分享

    打造最优质的设计教育有趣·专业·创新上次发了那篇跨专业考研的分享之后,小编收到了很多小伙伴的后台留言说,能不能多多分享一些考研的心得,为了保持我们有求必应的优良传统,今天的推文也是一篇干货分享帖~此次的分享,来自一位考上同济的在职小姐姐,一起来听听她是怎么平衡工作与考研之间的压力吧~张 炜15年毕业于山东财经大学的数字媒体技术专业,因为爱好也因为工作上遇到的瓶颈,希望能通过考研取得进步,并顺利考入同济设创院的交互设计方向。(即在职又跨专...

    2018-04-25
  • 【笔记】从活泼的C端产品到严肃的B端产品设计,我是如何自如切换的——交互篇

    2016年11月5日,UXRen社区联合网易杭州主办“用户体验者的自我提升”主题讲座,本文网易资深交互设计师大饼的现场分享:《 从人性到人文的设计思维转变》整理而成。   嘉宾介绍: 杨杰(大饼,资深交互设计师,UEDC交…

    交互专题 2017-08-07