学习UI必备之HTML5微信专题网页设计
从点燃朋友圈子的H5游戏“围绕神经猫”到dianping H5特殊页面“我们之间只有一个单词”，颠覆了传统广告，自2014年下半年以来，已经出现了各种H5游戏和特殊页面。从HTML5简化的词汇“ H5”正在通过移动社交平台微信进入更多人的愿景。本文重点介绍基于微信的HTML5页面的视觉设计，并使用一些案例分析来讨论设计思想和方法。我希望与您沟通和讨论。
功能和目标
首先，从功能和设计目标的角度来看爱游戏登录入口网页版平台，H5特殊页面主要具有以下四种：
1。事件操作类型
为事件推广和操作创建的H5页面是最常见的类型，形式各不相同，包括游戏，邀请，贺卡，测试问题等。与过去的简单静态广告图像传播不同，今天的H5事件操作需要更强互动，更高质量和更具局部设计，以促进用户共享和通信。从进入微信H5页面最终降落到品牌应用程序，设计合适的交通转移路线也非常重要。
Dianping由电影“ Raging”设计的促销页面很清楚。复古的模拟视觉设计使人们发光。纹理质地的旧票存根，闪烁的霓虹灯以及幽默的动画和声音效果使您想单击每个选项。为了关注品牌关键词“ Select”，我们使用引人入胜的测试问题使用户选择自己的生活作为大片。最后一个问题导致“选择座位看电影”，然后直接访问App Ticket购买页面。即使我知道这是一篇柔和的文章，但我忍不住单击以与“短油很好，此页有点diiao”的心情分享。
2。品牌促销
与强调及时性的活动操作页面不同，品牌促销的H5页面等同于品牌的微官方网站，并且更倾向于塑造品牌形象，以将品牌的精神态度传达给用户。在设计中，您需要使用符合品牌气质的视觉语言，以使用户对品牌印象深刻。
伴随着浪漫的钢琴旋律，“舒尔卡先生的情书”在男人的语气中表达了他对妻子的爱和内gui，最后导致“舒尔卡” - 宁静的圣洁产物妻子的首选新的高端健康草药品牌与H5一起玩了一张令人心动的情感卡，使用户可以记住他们心爱的妻子的品牌形象“只有一生只适合您”。
3。产品简介类型
专注于引入产品功能，利用H5的交互式技术的优势充分展示产品特性并吸引用户购买。
这种类型的H5页面在汽车品牌中更为常见，雷克萨斯NX是一个很好的代表性案例。精致，纹理的建模和微妙的光效果创造了一种很酷的视觉风格。用手指沿着光线轨迹切割屏幕始于序曲，使用户通过合理且优雅的互动（例如触摸，摩擦和滑动）来探索产品的七个主要特征。宏观和微观都被考虑。
4。摘要报告类型
由于支付宝的十年法案引发了激烈的讨论，因此主要公司的年终摘要现在热衷于使用H5技术。出色的互动体验使最初无聊的摘要报告有趣而生动。
“ JD的十大故意”使用10个水平页面来讲述2014年JD的前十个成就。视觉设计采用简单的平面插图，并添加纸质纹理以形成复古卡片拼贴感。在不同页面之间滑动手指，以达到光滑的视差滚动效果，最后是小复活节鸡蛋刘先生。一口气一口气后，我可能会了解JD在2014年所做的主要工作。
二。表格是功能服务
在确定主题页面的功能目标之后，下一步是关键设计阶段。如何以目标方式设计需要考虑特定的应用程序方案和通信对象，并从用户的角度思考用户想要看到的最多和共享的内容。以下是几个常见的H5主题页面表达式：
1。简单的图片和文字
简单的图片和文本是早期最典型的H5主题页面形式。 “图片”的形式可以是照片，插图，gif等。通过简单的交互（例如页转弯），它可以具有幻灯片般的传播效果。哪些测试是高质量的内容本身和讲故事的能力。
Didi出租车的情况是典型的简单图形H5特殊页面，它使用一些照片和故事将整个页面组合在一起。视觉效果简单且功能强大，黑白照片的整个屏幕都用Didi的品牌橙色装饰。每次切换图片时，文本都会逐渐出现，并且没有其他互动形式，从而使观众通过陌生人之间的真诚联系，将注意力集中在内容上，并塑造品牌的积极能量形象。
也有不愿意变得普通的奇妙案例。在整个国家在除夕夜疯狂地抢夺红色信封的那一刻时，微信发布了一个特别的页面，例如“从现在开始看中国人的名望和财富”。一见钟情，我很震惊，因此友好的rmb〜每一页都是RMB风景的部分扩大图片。创作者添加了聪明的创意元素和微动力学来仔细描绘它们，将观众带入了RMB的微观世界。每种钞票模式都与发人深省的文案相结合，在宣传微信红信封时，人们呼吁人们重新审视恩惠，名望和财富的奥秘。
2。礼品/贺卡/邀请信
每个人都喜欢接收礼物的感觉。掌握了这种心理学，该品牌已经推出了各种H5形式的礼品，贺卡和邀请函，以通过增强用户优惠性来巧妙地实现品牌推广的目的。由于它是礼物，因此创造力和生产是重要的加点。
AKQA创意营销公司在圣诞节期间赠送了一份慷慨的礼物 - 梦想的水晶球。通过移动手机，镜头不断摇动并从水晶球外部靠近，逐渐进入了水晶球的微观世界。通过手机环顾四周，您可以在360度的水晶球中欣赏全景，雪花将落在整个天空中。写下您的祝福并与您的朋友分享，我相信他们一定会互相惊讶。此H5页面使用重力感测，3D和其他技术，并且文本和BGM的使用也非常特别，为用户带来了完美的互动体验，值得一提。
在农历新年期间，Evernote还巧妙地推出了一张语音贺卡，引导用户通过官方帐户向他们发送语音消息，然后将这种祝福的声音与中国风格的动画相结合，以创建一张独特的语音贺卡，以发送到朋友们。整体颜色主要基于Evernote品牌的颜色，它还包含一个优雅的新年气氛爱游戏ayx官网登录入口，非常令人愉悦。
3。问答/评分/测试
H5页面中的H5页面也很常见。利用用户对知识和探索的渴望选择并查看最终结果。需要明确的线索，您到达的最终结果页面需要合理而不是突然。如果可以补充出杰出的愿景和文案，以削弱回答问题的无聊感，那就更好了。
就像本文的开头一样，这也是一个荒谬的项目。这次，这是江温电影《一步之遥》的持续晋升，以允许用户对江恩的代表作品进行评分。视觉设计仍然很出色，打开思想的创意和动画设计令人惊叹（必须扫描并体验它！）。它延续了怀旧的大字幕海报风格，并且诸如字体，文案，装饰元素之类的细节也非常小心。在相关的H5页面中实现这一目标和答案格式是一个很大的问题。
4。游戏
从简单的迷你游戏（例如“周围的神经猫”和“查看您有多少颜色”）到品牌植入迷你游戏，例如durex“一夜n jiro”（即，模仿版本，“不要踩白色块”） ，H5游戏是因为它易于操作和高度竞争，并且曾经在朋友圈子中很受欢迎，但是缺乏创造力和同质性导致用户对无脑游戏越来越厌倦。为了成功地传播游戏，品牌需要在游戏玩法和设计中付出更多的精力。
同样在圣诞节推出了一款名为“圣诞老人救援计划”的H5迷你游戏。操作非常简单。只需交替滑动手指，然后将角色的脖子向上拉，以达到无限的长度。游戏将记录您拉的最高点。距离是与更长的朋友竞争。该界面是新鲜又可爱的，与同一标志性风格保持一致。游戏角色也是同一品牌角色，通过幽默和欺骗游戏将同一独特且有趣的产品文化传达给用户。
三。 4个要增加设计点的关键点
H5页设计的出色质量将直接影响其沟通效果，甚至影响用户对品牌形象的看法。以下是以下设计点：
1。细节和团结
为了获得高质量的用户体验，必须考虑细节和整体需求的统一性。在复古客观化的视觉风格中，字体不应太现代。在幽默和荒谬的语气中，文案不应该太严重。在情感内容卡中，动画效果不应太花哨。
Dianping Jiang Wen的电影促销系列“九步”的H5特别页面牢牢抓住了这一点。从QR码入口到性感加载页面，再到最后的共享技巧的设计，包括文案措辞和背景音效效果，所有这些效果都与整体戏剧和虐待一致，为用户提供了完整而统一的互动体验。
请特别注意“共享技巧”的详细设计。与简单的箭头和冷“单击此处共享”相比，仔细的详细设计带来的高质量和偏爱是显而易见的。还有一些令人兴奋的案例：
2。跟上热门话题并利用主题效果
如果您希望您的H5特殊页面在一夜之间流行，则可以抓住热点并尽快上网，借此机会推广您的品牌也是捷径。
Photo Pian Tiantian抓住了Wu Zetian流行的广播的机会，并推出了Mei Niang的化妆，该化妆在国内外很受欢迎。同时，还尽快推出了“ Cos Wu Mei Niang”的H5交互式页面。它易于操作且易于使用。您可以立即单击上传照片。婆婆，PK与成千上万的美丽女士，娱乐公众并推广产品。
Netease Entertainment在Wu Meiniang乳房剪刀的最前沿发布了一个名为“ Wu Meiniang被乳房切割的真相”的H5特别页面。她放下道德上的完整性，并用粗略的想象力向观众“恢复”了真相。它疯狂地转发了一段时间，而Netease Entertainment也随着流程而促进了自己的发展。
3。讲一个好故事并触发情感共鸣
无论H5的形式多么多样化，宝贵的内容总是首先出现的。在有限的空间中，学习讲述故事将引起用户之间的情感共鸣，并将大大促进内容的传播。
Levi的新年促销活动特别页面使用了一个简单但活泼的新年，当时他还是个孩子，而他长大后的富裕而无聊的新年，并使用手绘风格营造出友好的怀旧气氛。最后，这导致了品牌促销的口号：“这个新的一年，满足了压力和约束，充满新鲜的眼光，并共同生活。”毫无疑问，这个故事无疑是分享的推动力。
4.合理地使用技术来创造平稳的互动体验
随着技术的开发，当今的HTML5具有许多出色的功能，使我们能够轻松实现诸如绘画，擦除，摇动，重力感应，擦除，3D视图之类的交互式效果。与引起不同类型的动画效果的争夺相比，这会导致页面的混乱和腹胀，我们主张对技术的理性使用，并专注于为用户提供平稳的交互式体验。
一个典型的情况是TAOBAO在Double 12上发布的销售前促销H5特殊页面。在浏览过程中，我只使用了刷新手势爱游戏app官方网站登录入口，并且页面的效果就像平滑的动态GIF。设计师巧妙地使用图形设计和组合来在滑动过程中产生丰富的视差滚动效果。掩盖，单个图形元素的旋转和整个页面的动态动量非常默认匹配。
结论
随着手机硬件的升级，HTML5技术的开发和微信平台的开放，HTML5的跨平台，低成本和快速迭代的优势进一步突出了在移动互联网潮流中的开发人员。对于那些感兴趣的人，这将是最好的时代。将来肯定会出现更多出色的H5页面，让我们拭目以待。用户体验是UI设计师学习的重点。如何设计在用户中流行的产品是UI设计学习者始终需要考虑的一个问题。设计师的设计质量和设计水平直接影响用户是否购买。目前，CGWANG是著名的国内UI设计培训基础，在全年的不同时间开设了UI设计培训课程，以完全满足UI设计爱好者在不同阶段的专业技能提高需求。
