H5页面的设计思路和方法

世界工厂网线上生态学院 世界工厂网线上生态学院：制造企业开展线上业务的加油站 世界工厂网企业线上生态学院课程目录一、企业线上生态分析二、团队建设与管理三、企业线上总部建设四、国内外贸易五、品牌互动营销1.视频营销2.事件营销3.公关传播4.社会化营销5.品牌包装a.品牌包装设计的思路和技巧b.如何做好品牌包装设计？c.好的包装设计是怎么做出来的？6.预算控制7.整合营销世界工厂网线上生态学院 世界工厂网线上生态学院：制造企业开展线上业务的加油站 六、企业线上线下融合世界工厂网线上生态学院 世界工厂网线上生态学院：制造企业开展线上业务的加油站 H5 页面的设计思路和方法“H5”，这个由 HTML5 简化而来的词汇，在微信这个移动社交平台，快速走进了更多人的视野。H5 界面与过往简单的广告图片不同，如今的宣传页面需要更强的互动、更好的质量、花费低的设计来促成用户分享传播。好的产品依托 H5 让用户发现并体验，H5 交互页面凭借着精美的设计风格、新鲜的交互体验使用户产生极强的分享驱动力，在移动社交环境中得到传播。一功能与目标1、活动运营型为活动推广运营而打造的 H5 页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同，如今的 H5 活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信 H5 页面到最后落地到品牌 App 内部，如何设计一套合适的引流路线也颇为重要。大众点评为电影狂怒设计的推广页便深谙此道。复古拟物风格的视觉设计让人眼前一亮，富有质感的旧票根、忽闪的霓虹灯，配以幽默的动画与音效，恨不得每个选项都点一遍。围绕“选择”这个品牌关键词，用引人入胜的测试题让用户把人生当作大片来选择，选到最后一题引出“大众点评选座看电影”，一键直达 App 购票页面。即使明知是软文也忍不住带着“矮油不错，这个页面有点 diao 噢”的心情点击了分享。2、品牌宣传型不同于讲究时效性的活动运营页，品牌宣传型 H5 页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。世界工厂网线上生态学院 世界工厂网线上生态学院：制造企业开展线上业务的加油站 伴随着浪漫的钢琴旋律，首草先生的情书以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草滋阴圣品，爱妻首选”的宣传语。设计上采用回忆般的黑白色调，简单的照片加文字，配以花瓣掉落、水面涟漪等轻动画，渲染出唯美优雅的气氛。“首草”这个全新的高端养生草药品牌，用 H5 打出了一副走心的情感牌，让用户记住了“半生只为你”的爱妻品牌形象。3、产品介绍型聚焦于产品功能介绍，运用 H5 的互动技术优势尽情展示产品特性，吸引用户买买买。这一类型的 H5 页面多见于汽车品牌，LEXUS NX 是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的 7 大特性，宏观和微观都照顾周全。4、总结报告型自从支付宝的十年账单引发热议后，各大企业的年终总结现也热衷于用 H5 技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。京东的十大任性用 10 张横屏页面讲述了京东在前几年十大成就，视觉设计上采用简洁的扁平风插画，加入纸面质感形成复古卡片拼贴感。不同页面间通过手指滑动实现流畅的视差滚动效果，最后还有刘总这个小彩蛋。5、贺卡邀请函型每个人都喜欢收到贺卡或邀请的感觉，抓住这一心理，品牌推出了各种 H5 页面形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的，在邀请的同时也展示了自己的产品与品牌，可以一举多得！二、H5 页面设计法则世界工厂网线上生态学院 世界工厂网线上生态学院：制造企业开展线上业务的加油站 1、视觉页面的完美平衡在设计中突出重点是第一要务，把多余的、拖沓的、无用的元素删除掉，保持视觉画面的单纯性，寻求加与减、形与意之间的完美平衡。由减而简，添之以饰；自内而外，显之以形。“简”为减法，“饰”为加法；“形”为外在，“意”为内涵。通过对设计的形做减法，对设计的理念做加法，来达到设计的平衡。而这一过程，往往是相互制约、相辅相成的关系。设计界面的第一步，就是要“简形”。首先，建立信息框架，始终把重点要素放在第一位置，时刻提醒自己任何其他的辅助信息不要超越主要内容，以避免喧宾夺主；其次，主要内容本身更是要精简，多余的元素不要！说白了就是一句话能说明白的不要用三句话来说。另外就是“饰意”，巧妙的点缀，使得页面产生节奏感和视线引导上的变化，小元素影响整体的氛围，达到画龙点睛的效果。2、文案设计具有足够吸引力文案写作也是设计内容的一部分，因为它影响着用户阅读，一个好文案既要有品质，又容易被理解。构思一款H5，除了好的画面以外，另外一点就是 H5 文案了。这里的文案除了 H5 本身的内容之外，还有很重要很重要的：标题、描述。你和一款传播百万的 H5 的距离，可能只差一个标题。当我们第一次见到一个新鲜的 H5 时，能吸引我们打开的一个可能就是，标题足够吸引。总结：无论 H5 是基于企业宣传、生活娱乐还是游戏互动，无论它以任何形式传播，都要落到用户身上，所以，品牌如果想要和自己的潜在用户一起玩耍，就必须注重用户体验。做好 H5 界面，需要以人为本，以用户为本。好的设计师应该是能让用户更准确、更高效、更便捷的获得传达的内容，用户的情感、习惯、价值等都是设计师要参考的设计因素。设计师的追求应该是使设计在功能完备的前提下实现艺术价值和商业价值