“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

相关推荐

  • 交互案例分享-Spring音乐播放器

    在设计流程的过程中,我们往往会把流程设计的越短越好,最好一步完成,这样用户在流程中停留的时间越短,流程的转化率越高。 最近在试用一款叫「Spring」的音乐播放 App,它根据要你要进行的运动类型,节奏频率,偏…

    2014-09-16
  • 邀你参与丨2018中国用户体验行业调研

    什么是用户体验设计?往小了说,它包括视觉设计、交互设计、用户研究等,宽泛一点讲,产品、文案、服务流程的设计也是用户体验的一部分。用户体验不是一个独立的岗位,它应该是整个团队的一种思考维度。而在其中,你又扮演着什么样的角色呢?在行业中你的专业能力和知识储备在什么层次?用户体验行业的未来,将会往何处发展?自2013年以来,IXDC已连续开展了5次用户体验行业调研,回收了上万份从业人员的反馈,并总结出调研报告,以全局角度俯瞰,了解行业现状与存...

    2018-04-19
  • 任务优先级的重要性:为核心任务设计

    作为一个交互设计师,在日常的设计工作中经常会问自己或者产品经理最多的问题就是,“这个功能用户用得多吗?用户主要在什么场景下用这样的功能?他用这个功能的目的是什么?等等”,问这类问题的主要目的是判断功能的优先级,在确定了优先级后再根据它去想办法去简化任务流程以及界面设计。

    2017-05-28
  • 如何避免交互设计中的「刻板印象 」

    之所以有“刻板印象”,是因为有categorical thinking(类别型思维),它往往使我们产生对事物的固有看法和理解,是在看到某些特定人、事、物时第一时间想到的,这些就形成了“刻板印象”。那到底该如何避免它的消极作…

    2017-08-01
  • 什么是交互设计?

    这是我在知乎上的「什么是交互设计?」的一篇回答,重新梳理了一下逻辑,分享给大家。(长文预警 : 阅读时间 15 分钟)如果我们问,交互设计是什么?从网上各种定义中似乎能很快就能知道答案。交互设计,又称互动设计(Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面。—— 来自 I...

    2018-02-03
  • 网页设计的未来隐藏在建筑设计史之中

    如果你想知道网页设计下一步的路在哪里,只要看看建筑行进到哪里就明了了

    2016-08-29
  • 【STARCAST】用Sketch表现不了的"孝敏"清纯日常画报

    ——还没关注?点击上方蓝字——大家好。STARCAST的家族们!!!!!!我们孝敏终于携Sketch回归了,这是她的第4次STARCAST!如果觉得我们孝敏已经展示了她的全部,那你就错了!她还有很多都没有展示给大家哦!今天就为大家送上,脸也没法用Sketch来表现,身材也没法用Sketch来表现的孝敏隐藏的一面,就像日常生活一样的画报,就像画报一样的日常生活照!这个秘密只告诉STARCAST 家族的大家哦,不是秘密>.大家已经开始紧张了...

    2018-03-02
  • 还原产品的基础属性问题——用户体验

    您真正的了解用户吗?找项目的时候是不是会遇到各种各样的坑?你“以为”和“现实”中究竟有什么区别?我们会不会就是所谓的自嗨型创业者?如何解决以及避免?今天我们即将揭晓!三人行茶学空间打造和谐空间,共享茶文化平台,精准交友,合作共赢。本周日特别邀请我们的会员嘉宾进行主题分享,一起共同成长!本周分享嘉宾:刘岱伦岱伦总2008年创办第一家o2o项目——洗车。到家!2013 年曾创下淘宝细分类目自然搜索排名第一!2015年自主研发无线充电车载净化...

    2018-04-19
  • 交互设计师必备的9种能力(下篇)

    让我们继续来跟着大饼哥来看交互设计师必备的9种能力。

    2017-05-15
  • 关于用户故事地图的7 种用法

    《用户故事地图》不仅仅是讲述什么是用户地图、怎么使用用户地图,也讲了很多团队协作的tips,并且给出了很多实例。我这里直接从这本书的其中一个角度——“怎么使用用户地图”为内容,然后结合一些自己的想法,来写这篇读书笔记。聚焦于成果,即产品发布后用户能使用和感知的东西,切分发布计划应该以成果为导向。  ——《用户故事地图》P56

    2017-04-30