2015最新微信新媒体视觉设计手册 绝对干货!(完整版)

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
► 封面图(头图封面+小图封面)
封面图尺寸900x500px;次图200x200px
配图尺寸严格按照这个来做图,可以保证出来 的效果最佳,并且避免了因尺寸问题导致配图 变形以及裁切。
► 封面图要尽量选择干净、色彩统一的图片。
在挑选图片时也要清楚品牌与文章的定位,应当挑选与品牌形象及文章内 容相一致的图片。可对图片进行一定的简单设计,突出文章的主题,使读 者感受到编者的用心。
► H5 4大功能 / D. 总结报告型
自从支付宝的十年账单引发热议后,各大企业的年终总结现也 热衷于用H5技术实现,优秀的互动体验令原本乏味的总结报告 有趣生动了起来。
案例 《京东的十大任性》用10张横屏页面讲述了京东在2014年的十 大成就,视觉设计上采用简洁的扁平风插画,加入纸面质感复 古卡片拼贴。不同页面间通过手指滑动实现流畅的视差滚动效 果,最后还有刘总这个小彩蛋。一口气看完后大概就了解2014 年京东都干了哪些大事。
► 结尾关注引导图的设计
好的文章需要有好的结尾,关注引导图是在整个公众平台中统一的,它是一个品牌或企业在微信平台中的视觉形象,所以 在整个微信视觉体系中非常重要。
一般结尾引导图在设计中遵循以下几点: 1、符合自身行业特点及企业文化,只有适合自己的才是最好的。 2、微信视觉的整体调性。切勿前后风格不统一,使引导图突兀,观者产生视觉错乱。 3、不要太过于花哨,颜色尽量统一。如同一公众平台但不同版块,可以使样式风格统一,颜色差异。
因为订阅号在显示过程中标题是被折叠起来的, 折叠后能显示的文字非常有限,如果公众号标题 很长,很有可能在订阅号预览页没办法直接显示 标题,从而无法完全了解文章想要表达的意思。 比如右边这三个文章标题,显然最短的那篇信息 传达的更友好更清晰。
► 标题字数要尽量控制在约13个字以内。
在图文中,标题会在封面图上方增加黑色遮罩, 超出13字,换行会不同程度地遮挡封面图。同时, 过长的标题也会加大读者对标题的理解难度。
聚焦基于微信传播的H5页面的视觉设计,可通过一些行业内经典的案例分析来得出设计的思路 与方法。
► H5 4大功能 / A. 活动运营型
为活动推广运营而打造的H5页面是最常见的类型,形式多变,包括游戏、邀请函、 贺卡、测试题等形式。与以往简单的静态广告图片传播不同,如今的H5活动运营页 需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微 信H5页面到最后落地到品牌App内部,如何设计一套合适的引流路线也颇为重要。
ONE 1 新媒体平台现阶段发展 以及视觉提升的重要性
NEW MEDIA PLATFORM DEVELOPMENT AT PRESENT STAGE AND THE IMPORTANCE OF VISUAL ASCENSION
据统计,截止2015年4月,中国手机用户已经超过12亿,其中有9亿在用手机上网。微信每月 活跃用户已达到5.49亿。
总结:图片看似无意,但实际在文章中扮演的角色是非常重要的。好的图片 可以为文章增色不少。但是图片的选择种类也是花样繁多,这里只基本的选 择方法。核心还是根据主题配图,在整篇文章中配图尽量协调统一。
| 正文篇 |
►文章正文的字号最好在14—18px之间,以16px最为合适。
文章篇幅较短,字体可以稍大一些(16-18px), 可扩充版面。
杂乱颜色及主体过多的图片会使观者视觉疲 劳产生烦躁的情绪,尤其是在图片质量不高, 尺寸不大的时候。
而干净颜色统一的图片,使人一目了然,没 有过多的视觉负担。所以看后产生轻松愉悦 的感觉。
► 封面图片的主要内容要尽量居中
因为在读者分享到朋友圈的时候,微信后台会自动截取封面图居中的正方形内容, 只有主要内容居中,这样才保证图片的精彩内容更容易被读者看到。
比较偏“文艺范”的文章字体可以适当稍小一些 (12-14px),显的文章更精致一些。
文章重点部分可用彩色文字凸显,但不要用荧光 色(较扎眼),不要超过3种颜色。
► 行间距:1.5-1.75倍的行距看起来会比较舒服。
行间距在1.0或者以下,文字显的较为拥挤。观 看者在阅读过程中视觉没有有效的舒缓,在观看 较长的文章时容易产生视觉疲劳。
► 表现形式为功能服务 / A. 简单图文
简单图文是最常见、最典型的H5专题页形式。“图”的形式千变万化,可以是照 片、插画、GIF等。通过翻页等简单的交互操作,起到类似幻灯片的传播效果。考 验的是高质量的内容和讲故事的能力。
案例1 滴滴打车这个案例就是典型的简单图文型H5专题页,用几张照片故事串起了整套 页面。视觉简洁有力,采用整屏黑白照片,点缀以滴滴的品牌橙色。每切换一张图 片,文字就渐隐浮现,没有其他互动形式,让观众聚焦于内容,通过陌生人之间的 真情联系来塑造品牌的正能量形象。
总结:正文是一篇文章的灵魂,舒适的阅读体验可以使整个文章增色不少。 视觉设计是针对观看者的主观形式的表现手段和结果。通过合理的设计可以 使观者在一个轻松愉快的氛围下读完一篇文章,并在这种心情下慢慢体会文 章带给他的意境。
THREE 3 HTML5
► 什么是HTML5
HTML5简称H5是一种高级网页技术,我们平时看到那些邀请函、小游戏都是HTML5网页,确 切来说叫HTML5它跟我们平时上网看到的那些网页本质上没有任何区别。而HTML5通过移动 端平台已经走进了我们的生活。
而行间距在1.5-1.75时,观者在阅读过程中因为 适当的间距留白,所以眼睛得到舒缓。
► 建议移动端的文章无需首行缩进。
传统印刷以及PC端屏幕较大,较宽,为了方便识别出文章的开端,首行默认缩进2个字。而在移动端,由于屏幕比较狭长, 首行缩进没有必要,而且会使段落看起来不整齐。
如果确实想在段落开头着重强调一下,可以使用首字下沉增大,这是传统平面媒体积累下的非常有效的办法,可以借鉴。
► 正文一段不要超过一屏,正文段落之间建议空一行。
文章长短建议不要太长1500 ——3000字以内最为合适。太长的文章会使读者产生厌烦了情绪。 段落的长短尽量不要超过一屏幕,段之间空一行使读者产生视觉缓冲。并适当配图。
► 文章配色
从文章配色上来讲,原则是一篇文章里出现的颜色绝对不要超过三种,一般来说:文字就用纯黑色,需要着重强调的文字 可以使用红色,或者蓝色等,最好是与企业LOGO颜色相符。
2015年公司整合陕西各主流新媒体数字平台成立微陕联盟。目标构建陕西最大的新媒体数字传 播平台。以达到聚合传播、互利共赢、定制服务、内容领先的行业理念。
此环境下 / 在现阶段
微信现有的视觉呈现已经 不能满足客户及公司发展需求
因此视觉中心应“转变传统视觉设计的表现形式,关注新媒体视觉设计 的发展,拓展设计思路,把新媒体自由、多变、互动、视听的表现 形式与平面设计语言结合,增强及巩固公司在新媒体领域的竞争 力”。
当标题一行或两行时,封面内容还能清晰显示。 如果,只是如果,你的标题很长,那么就会变成 右图的样子:
► 标题可添加“【】”来凸显关键字,或者是简洁的“ | ”(竖线), 但不要有过于繁琐、奇怪的符号。
如右图,就凸显主题来说“【】”比较能有效的突出所表现的文字,而缺 点是较为粗暴,没有格调。
用 “ | ”来表达突出与分隔。简洁、干净、有格调。缺点是相对来说视觉 感较弱。
总结:标题是引起读者阅读兴趣的开始,简明扼要的标题能迅速吸引读者的 注意,也能帮助用户快速找到文章的结构以及重点。需要注意的是文章标题 尽量控制字数,简短醒目、易理解的标题往往更受读者的青睐。
| 图片篇 |
一篇优秀的文章配图一定也很精彩,因为它会给提升文章的吸引力与魅力。微信中的图片一般包括,头图封面、小图封面、 以及文章正文中的配图。这三种图片又各有不同,应该根据每种图片的特点进行挑选。
而我们经常也会看到不少账号在标题里 加了许多奇怪的符号,或者字符表情, 这样再谈文章的格调就太难了。
► 小标题要尽量醒目并与正文在距离和大小上区分开来
一般区分方法有: 加大行间距区隔,一般在小标题和正文之间空一行; 改变小标题字体颜色; 改变小标题字号大小;
另外,如果小标题过长,可以将小标题断句折成两行分为主副标题。非常 不建议使用过长的标题,一来难理解,二来不好看,尤其是手机的屏幕是 狭长的,简短明快才是王道。
► H5 4大功能 / C. 产品介绍型
聚焦于产品功能介绍,运用H5的互动技术优势尽情展示产品特性,吸引用户买买买。
案例 这一类型的H5页面多见于汽车品牌,LEXUS NX(雷克萨斯 NX)是其中的优秀代 表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随 光的轨迹切割画面揭开序幕,通过合理优雅的触碰、摩擦、滑动等互动形式带领用 户一同探索产品的7大特性,宏观和微观都照顾周全。
微信公众平台自2012年8月开通以来已经有超过1000万个账号,随着公共账号的数量增多,读 者对于账号的质量也要求越高。据统计,平均每人每天阅读的公众账号文章大约为5—8篇,良 好的阅读体验也成为提高用户阅读和转发量的重要因素。与传统的PC或纸媒有所不同,移动端 的阅读体验有着不同的标准。
公司2014年2月成立新媒体部后。目前运营城市经济导报、天地源、曲江新区、西咸信息产业 园、西安演艺集团、西安经开区管委会6个西安主流微信公众平台。拥有粉丝数量接近30000 人,目前这个数字正在不断快速增加。
► H5 4大功能 / B. 品牌宣传型
不同于讲究时效性的活动运营页,品牌宣传型H5页面等同于一个品牌的微官网,更 倾向于品牌形象塑造,向用户传达品牌的精神态度。在设计上需要运用符合品牌气 质的视觉语言,让用户对品牌留下深刻印象。
案例 伴随着浪漫的钢琴旋律,《首草先生的情书》是以一位男士的口吻娓娓道来在成长 历程中对妻子的爱与愧疚,最后引出“首草——滋阴圣品,爱妻首选”的宣传语。 设计上采用回忆般的黑白色调,简单的照片加文字,配以花瓣掉落、水面涟漪等轻 动画,渲染出唯美优雅的气氛。“首草”这个全新的高端养生草药品牌,用H5打出 了一副走心的情感牌,让用户记住了“半生只为你”的爱妻品牌形象。
再加上一些样式的颜色,总数不超过三种。有格调的文章都特别注意配色。
毕竟观者是在很近距离地看文章,如果很花,就给人一种很廉价的感觉,相信谁也不希望自己的文章是这样的感觉。
右边色板把最常见的颜色都囊括了,而且摆放上从中间向 两边发散。在配色中遵循以企业标准色为主色调。以同色 系或者临近色为辅助色(横向选色)。在需要特别突出的 时候运用对比色系(纵向选色)。
右图中的封面采用的是居中构图,一眼 看去没什么特别,但是分享到朋友圈的 时候优势就明显了,位于正中央的图片 会成为朋友圈图文封面的正中心。试想 如果封面主体人物居左或者居右,很可 能分享过去的就是半边身子的人了。
► 正文配图
文章中的图片在挑选时要尽量选择与文章内容贴合的图片。 在挑选这些图片时也要注意图片内容、色彩冷暖的一致性。 并且正文图片一定要与文章封面图相呼应。
TWO 2 从视觉的角度对微信公众 账号进行深度剖析
MICRO LETTER TO PUBLIC ACCOUNTS FROM THE PERSPECTIVE OF VISUAL DEPTH PROFILING
| 标题篇 |
► 图文标题是提高用户阅读欲望的首要动力,标题越简洁,越能快速被用户解读,并转化为文章的阅读。
► 表现形式为功能服务
在确定了专题页的功能目标之后,接下来就是关键的设计阶段了。如何有针对性的进行设计,需要考虑到具体的应用场景 和传播对象,从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。以下4种是常见的H5专题页表现形式:
A
B
C
D
▼ 简单图文
▼ 礼物 贺卡
邀请函
▼ 问答 评分
ห้องสมุดไป่ตู้测试
▼ 游戏
案例: 大众点评为电影《狂怒》设计的推广页便深得此道。复古拟物风格的视觉设计让人 眼前一亮,富有质感的旧票根、忽闪的霓虹灯,配以幽默的动画与音效,恨不得每 个选项都点一遍。围绕“选择”这个品牌关键词,用引人入胜的测试题让用户把人 生当作大片来选择,选到最后一题引出“大众点评选座看电影”,一键直达App购 票页面。即使明知是软文也忍不住带着“矮油不错”的心情点击了分享。
相关文档
最新文档