2015最新微信新媒体视觉设计手册绝对干货!.ppt

,新媒体平台现阶段发展 以及视觉提升的重要性,1,one,new media platform development at present stage and the importance of visual ascension,据统计，截止2015年4月，中国手机用户已经超过12亿，其中有9亿在用手机上网。微信每月活跃用户已达到5.49亿。 微信公众平台自2012年8月开通以来已经有超过1000万个账号，随着公共账号的数量增多，读者对于账号的质量也要求越高。据统计，平均每人每天阅读的公众账号文章大约为58篇，良好的阅读体验也成为提高用户阅读和转发量的重要因素。与传统的pc或纸媒有所不同，移动端的阅读体验有着不同的标准。,公司2014年2月成立新媒体部后。目前运营城市经济导报、天地源、曲江新区、西咸信息产业园、西安演艺集团、西安经开区管委会6个西安主流微信公众平台。拥有粉丝数量接近30000人，目前这个数字正在不断快速增加。 2015年公司整合陕西各主流新媒体数字平台成立微陕联盟。目标构建陕西最大的新媒体数字传播平台。以达到聚合传播、互利共赢、定制服务、内容领先的行业理念。,此环境下 / 在现阶段,微信现有的视觉呈现已经 不能满足客户及公司发展需求,因此视觉中心应“转变传统视觉设计的表现形式，关注新媒体视觉设计的发展，拓展设计思路，把新媒体自由、多变、互动、视听的表现形式与平面设计语言结合，增强及巩固公司在新媒体领域的竞争力”。,从视觉的角度对微信公众账号进行深度剖析,2,two,micro letter to public accounts from the perspective of visual depth profiling,| 标题篇 |, 图文标题是提高用户阅读欲望的首要动力，标题越简洁，越能快速被用户解读，并转化为文章的阅读。,因为订阅号在显示过程中标题是被折叠起来的，折叠后能显示的文字非常有限，如果公众号标题很长，很有可能在订阅号预览页没办法直接显示标题，从而无法完全了解文章想要表达的意思。比如右边这三个文章标题，显然最短的那篇信息传达的更友好更清晰。, 标题字数要尽量控制在约13个字以内。,在图文中，标题会在封面图上方增加黑色遮罩，超出13字，换行会不同程度地遮挡封面图。同时，过长的标题也会加大读者对标题的理解难度。 当标题一行或两行时，封面内容还能清晰显示。如果，只是如果，你的标题很长，那么就会变成右图的样子：, 标题可添加“【】”来凸显关键字，或者是简洁的“ | ”（竖线）， 但不要有过于繁琐、奇怪的符号。,如右图，就凸显主题来说“【】”比较能有效的突出所表现的文字，而缺点是较为粗暴，没有格调。 用 “ | ”来表达突出与分隔。简洁、干净、有格调。缺点是相对来说视觉感较弱。,而我们经常也会看到不少账号在标题里加了许多奇怪的符号，或者字符表情，这样再谈文章的格调就太难了。, 小标题要尽量醒目并与正文在距离和大小上区分开来,一般区分方法有： 加大行间距区隔，一般在小标题和正文之间空一行； 改变小标题字体颜色； 改变小标题字号大小； 另外，如果小标题过长，可以将小标题断句折成两行分为主副标题。非常不建议使用过长的标题，一来难理解，二来不好看，尤其是手机的屏幕是狭长的，简短明快才是王道。,总结：标题是引起读者阅读兴趣的开始，简明扼要的标题能迅速吸引读者的注意，也能帮助用户快速找到文章的结构以及重点。需要注意的是文章标题尽量控制字数，简短醒目、易理解的标题往往更受读者的青睐。,| 图片篇 |, 封面图（头图封面+小图封面）,封面图尺寸900x500px；次图200x200px 配图尺寸严格按照这个来做图，可以保证出来的效果最佳，并且避免了因尺寸问题导致配图变形以及裁切。,一篇优秀的文章配图一定也很精彩，因为它会给提升文章的吸引力与魅力。微信中的图片一般包括，头图封面、小图封面、以及文章正文中的配图。这三种图片又各有不同，应该根据每种图片的特点进行挑选。, 封面图要尽量选择干净、色彩统一的图片。,在挑选图片时也要清楚品牌与文章的定位，应当挑选与品牌形象及文章内容相一致的图片。可对图片进行一定的简单设计，突出文章的主题，使读者感受到编者的用心。,杂乱颜色及主体过多的图片会使观者视觉疲劳产生烦躁的情绪，尤其是在图片质量不高，尺寸不大的时候。 而干净颜色统一的图片，使人一目了然，没有过多的视觉负担。所以看后产生轻松愉悦的感觉。, 封面图片的主要内容要尽量居中,因为在读者分享到朋友圈的时候，微信后台会自动截取封面图居中的正方形内容，只有主要内容居中，这样才保证图片的精彩内容更容易被读者看到。,右图中的封面采用的是居中构图，一眼看去没什么特别，但是分享到朋友圈的时候优势就明显了，位于正中央的图片会成为朋友圈图文封面的正中心。试想如果封面主体人物居左或者居右，很可能分享过去的就是半边身子的人了。, 正文配图,文章中的图片在挑选时要尽量选择与文章内容贴合的图片。在挑选这些图片时也要注意图片内容、色彩冷暖的一致性。并且正文图片一定要与文章封面图相呼应。,总结：图片看似无意，但实际在文章中扮演的角色是非常重要的。好的图片可以为文章增色不少。但是图片的选择种类也是花样繁多，这里只基本的选择方法。核心还是根据主题配图，在整篇文章中配图尽量协调统一。,| 正文篇 |,文章正文的字号最好在1418px之间，以16px最为合适。,文章篇幅较短，字体可以稍大一些（16-18px），可扩充版面。 比较偏“文艺范”的文章字体可以适当稍小一些（12-14px），显的文章更精致一些。 文章重点部分可用彩色文字凸显，但不要用荧光色（较扎眼），不要超过3种颜色。, 行间距：1.5-1.75倍的行距看起来会比较舒服。,行间距在1.0或者以下，文字显的较为拥挤。观看者在阅读过程中视觉没有有效的舒缓，在观看较长的文章时容易产生视觉疲劳。 而行间距在1.5-1.75时，观者在阅读过程中因为适当的间距留白，所以眼睛得到舒缓。, 建议移动端的文章无需首行缩进。,传统印刷以及pc端屏幕较大，较宽，为了方便识别出文章的开端，首行默认缩进2个字。而在移动端，由于屏幕比较狭长，首行缩进没有必要，而且会使段落看起来不整齐。 如果确实想在段落开头着重强调一下，可以使用首字下沉增大，这是传统平面媒体积累下的非常有效的办法，可以借鉴。, 正文一段不要超过一屏，正文段落之间建议空一行。,文章长短建议不要太长1500 3000字以内最为合适。太长的文章会使读者产生厌烦了情绪。 段落的长短尽量不要超过一屏幕，段之间空一行使读者产生视觉缓冲。并适当配图。, 文章配色,从文章配色上来讲，原则是一篇文章里出现的颜色绝对不要超过三种，一般来说：文字就用纯黑色，需要着重强调的文字可以使用红色，或者蓝色等，最好是与企业logo颜色相符。 再加上一些样式的颜色，总数不超过三种。有格调的文章都特别注意配色。 毕竟观者是在很近距离地看文章，如果很花，就给人一种很廉价的感觉，相信谁也不希望自己的文章是这样的感觉。,右边色板把最常见的颜色都囊括了，而且摆放上从中间向两边发散。在配色中遵循以企业标准色为主色调。以同色系或者临近色为辅助色（横向选色）。在需要特别突出的时候运用对比色系（纵向选色）。, 结尾关注引导图的设计,好的文章需要有好的结尾，关注引导图是在整个公众平台中统一的，它是一个品牌或企业在微信平台中的视觉形象，所以在整个微信视觉体系中非常重要。 一般结尾引导图在设计中遵循以下几点： 1、符合自身行业特点及企业文化，只有适合自己的才是最好的。 2、微信视觉的整体调性。切勿前后风格不统一，使引导图突兀，观者产生视觉错乱。 3、不要太过于花哨，颜色尽量统一。如同一公众平台但不同版块，可以使样式风格统一，颜色差异。,总结：正文是一篇文章的灵魂，舒适的阅读体验可以使整个文章增色不少。视觉设计是针对观看者的主观形式的表现手段和结果。通过合理的设计可以使观者在一个轻松愉快的氛围下读完一篇文章，并在这种心情下慢慢体会文章带给他的意境。,html5,3,three, 什么是html5 html5简称h5是一种高级网页技术，我们平时看到那些邀请函、小游戏都是html5网页，确切来说叫html5它跟我们平时上网看到的那些网页本质上没有任何区别。而html5通过移动端平台已经走进了我们的生活。 聚焦基于微信传播的h5页面的视觉设计，可通过一些行业内经典的案例分析来得出设计的思路与方法。, h5 4大功能 / a. 活动运营型,为活动推广运营而打造的h5页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同，如今的h5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信h5页面到最后落地到品牌app内部，如何设计一套合适的引流路线也颇为重要。 案例： 大众点评为电影狂怒设计的推广页便深得此道。复古拟物风格的视觉设计让人眼前一亮，富有质感的旧票根、忽闪的霓虹灯，配以幽默的动画与音效，恨不得每个选项都点一遍。围绕“选择”这个品牌关键词，用引人入胜的测试题让用户把人生当作大片来选择，选到最后一题引出“大众点评选座看电影”，一键直达app购票页面。即使明知是软文也忍不住带着“矮油不错”的心情点击了分享。, h5 4大功能 / b. 品牌宣传型,不同于讲究时效性的活动运营页，品牌宣传型h5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。 案例 伴随着浪漫的钢琴旋律，首草先生的情书是以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草滋阴圣品，爱妻首选”的宣传语。设计上采用回忆般的黑白色调，简单的照片加文字，配以花瓣掉落、水面涟漪等轻动画，渲染出唯美优雅的气氛。“首草”这个全新的高端养生草药品牌，用h5打出了一副走心的情感牌，让用户记住了“半生只为你”的爱妻品牌形象。, h5 4大功能 / c. 产品介绍型,聚焦于产品功能介绍，运用h5的互动技术优势尽情展示产品特性，吸引用户买买买。 案例 这一类型的h5页面多见于汽车品牌，lexus nx（雷克萨斯 nx）是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。, h5 4大功能 / d. 总结报告型,自从支付宝的十年账单引发热议后，各大企业的年终总结现也热衷于用h5技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。 案例 京东的十大任性用10张横屏页面讲述了京东在2014年的十大成就，视觉设计上采用简洁的扁平风插画，加入纸面质感复古卡片拼贴。不同页面间通过手指滑动实现流畅的视差滚动效果，最后还有刘总这个小彩蛋。一口气看完后大概就了解2014年京东都干了哪些大事。, 表现形式为功能服务,在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。如何有针对性的进行设计，需要考虑到具体的应用场景和传播对象，从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。以下4种是常见的h5专题页表现形式：,a 简单图文,b 礼物 贺卡 邀请函,c 问答 评分测试,d 游戏, 表现形式为功能服务 / a. 简单图文,简单图文是最常见、最典型的h5专题页形式。“图”的形式千变万化，可以是照片、插画、gif等。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容和讲故事的能力。 案例1 滴滴打车这个案例就是典型的简单图文型h5专题页，用几张照片故事串起了整套页面。视觉简洁有力，采用整屏黑白照片，点缀以滴滴的品牌橙色。每切换一张图片，文字就渐隐浮现，没有其他互动形式，让观众聚焦于内容，通过陌生人之间的真情联系来塑造品牌的正能量形象。, 表现形式为功能服务 / a. 简单图文,案例2 也有不甘平淡的精彩案例。在除夕夜全国人民疯狂抢红包的时刻，微信推出了从此看尽中国人的名与利这样一个专题页。第一眼就被镇住了，好亲切的rmb每个页面都是一张人民币风景局部放大图，创作者加入巧妙的创意元素与微动态进行细腻刻画，带观众走进了人民币的微观世界。每一张钞票图案配合发人深省的文案，在推广微信红包的同时呼吁人们重新审视人情与名利的奥义。, 表现形式为功能服务 / b. 礼物/贺卡/邀请函,每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种h5形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物，那创意和制作便是重要的加分项。 案例1 akqa创意营销公司在圣诞之际献上了一份厚礼梦幻水晶球。通过移动手机，镜头从水晶球外不断摇晃推近，渐渐走进水晶球的微观世界里。通过手机环顾四周，可以360度欣赏水晶球里的全景，摇一摇雪花便漫天飘洒。写下你的祝福并分享给朋友，相信一定会惊艳到对方。这个h5页面使用了重力感应、3d等技术，文字与画面的配合十分讲究，给用户带来了完美的互动体验，值得细细品味。,案例2 evernote（印象笔记）在过年期间也别出心裁地推出语音贺卡，通过公众号引导用户对其发送一条语音消息，然后把这条祝福语音结合中国风动画做成一张独一无二的语音贺卡发送给朋友。整体色调也是以evernote品牌色为主，同时蕴含着一丝优雅的年味，十分讨巧。, 表现形式为功能服务 / b. 礼物/贺卡/邀请函, 表现形式为功能服务 / c. 问答/评分/测试,问答形式的h5页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了。 案例 这是一个大众点评的项目，为姜文的电影一步之遥做持续推广，让用户为姜文的代表作评分。视觉设计依旧出彩，开脑洞的创意和动画设计令人叫绝。延续了怀旧大字报风格，字体、文案、装饰元素等细节处理也十分用心。, 表现形式为功能服务 / d. 游戏,从 “围住神经猫”、“看你有多色”等单纯小游戏再到腾讯新闻推出的我的英雄我的城 等品牌植入式小游戏，h5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播，需要在玩法和设计上多下点功夫。 案例 same在圣诞节推出了一款名为圣诞老人拯救计划的h5小游戏，操作非常简单，只需用手指交替上滑，把角色的脖子向上拉到无限长，游戏会记录你拉的最高距离，跟朋友比一比谁比较长。界面清新可爱，与same的招牌画风一致，游戏角色也是same的品牌角色，通过幽默恶搞的游戏向用户传达same独到有趣的产品文化。, 为设计加分的4个要点,一个h5页面设计品质的出众与否，会直接影响其传播效果，甚至影响到用户对品牌形象的认知。 在这里总结出以下的设计要点：,a 细节与统一,b 注重配色,c 讲个好故事引发共鸣,d 合理 运用技术, 为设计加分的4个要点 / a. 细节与统一,要成就高品质的用户体验，必须考虑到细节与整体的统一性。如果视觉是复古的风格，那字体就不能过于现代；如果风格是幽默调侃的调调，那文案措辞就不能过于严肃；打情感内容牌的，动效就不能过于花哨。 案例 大众点评姜文电影推广系列的九步之遥h5专题页便牢牢抓住了这一点。从二维码入口内页，再到最后分享提示的设计，包括文案措辞和背景音效，无不与整体的戏虐风保持一致，给到用户一个完整统一的互动体验。, 为设计加分的4个要点 / a. 细节与统一,细节决定你的成败。在设计的过程中给观看者一些小小的惊喜，往往会起到意想不到的效果。 尤其关注“分享提示”这个细节设计，比起一个简单的箭头和一句冷冰冰的“点这里分享”，用心的细节设计带来的高品质和好感度是显而易见的。, 为设计加分的4个要点 / b. 注重配色,在颜色学中，颜色是传达特定信息给用户的一个重要因素。我们的眼睛在观察颜色，视觉消息将发送到我们大脑，然而这个信号的释放会导致我们情绪和情感的波动，并且最终导致我们的行为结果。科学告诉我们，颜色引起我们对一件事物的基础感知。 在h5 的设计中如何配色是一门学问。对于每个人来说，每种颜色都意味着些什么，尽管这些意义取决于我们个人的喜好和文化背景。但在基础的大环境中人们对颜色的理解还是有一个统一的认知。, 为设计加分的4个要点 / b. 注重配色,在设计一个h5页面，这个页面只有一种颜色这是不可能的，除非你打算用纯单色。所以你应该考虑整体的配色方案和使用的每个色彩，以及它们的统一性。另外还要考虑颜色对用户的影响，以及如何让主色和辅助色相匹配。 考虑到这一点,你应该会关心怎样混搭颜色能匹配并且能够帮你解决页面颜色问题。那么有三种颜色混合的基本方法。,a 三角色彩,b 复合色 （互补色）,c 近似色,这是一个基本的，并且稳定平衡的方法。原理是使用了色彩的活力和互补特性。使用这个12项色环，你可以选择任何三种颜色，这三种颜色的位置关系是彼此是120度的距离。,三角色彩,这个方法仅侧重于同类色，能较好的强调画面基调与产品属性。当决定你采用这种配色时候，你要注意颜色前后及面积上的搭配。它强调了选择颜色的活力，当这些色彩被完美组合的时候，会在画面长产生一种立体的感觉。,第二种方法的概念是运用两色或者四种颜色，即一组或者两组对比色（色环上两个180度的补色也可是冷暖的对比色）。它能有效的强调你想表现的信息。同时因为是对比的关系，在心理上起到平衡作用。,互补色或者冷暖色,近似色,三角色彩案例 拍拍圣诞活动h5主题页，这个颜色较为丰富，但整体以三角颜色为基础进行配色。 红色，黄色及绿色或蓝色组成页面的主体颜色，保持一种颜色的平衡感。同时符合圣诞主题。, 为设计加分的4个要点 / b. 注重配色, 为设计加分的4个要点 / b. 注重配色,复合色（互补色）案例 京东船员号招募h5主题页，内容和画面的设计相对简单。采用冷暖对比的表象形式。在一篇深蓝的画面中凸显红色文字。使视觉不由自主集中