重庆微信小程序开发公司-窝瓜网络

重庆小程序开发哪家好?重庆窝瓜网络是一家重庆小程序开发企业,为想做重庆微信小程序开发的客户提供一站式服务!

看微信小程序设计指南如何指导图文排版


上周末微信官方推出了微信小程序设计指南,其设计规范都是微信团队经过大量开发和设计经验,同时结合数据统计分析得出的结论。每个知识点都非常简洁实用,可以用在我们的图文排版上。☟

重庆微信小程序


1. 友好礼貌


为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示程序提供的服务,友好地引导用户进行操作。

2. 重点突出

每个页面都应有明确的重点,以便于用户每进入一个新页面的时候都能快速地理解页面内容,在确定了重点的前提下,应尽量避免页面上出现其他干扰项影响用户的决策和操作。


此页面的主题是查询,却添加了诸多与查询不相关的业务入口,与用户的预期不符,易造成用户的迷失。操作没有主次,让用户无从选择。





3. 清晰明确


一旦用户进入我们的小程序页面,就有责任和义务清晰明确告知用户身在何处、又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷失,这样才能为用户提供安全的愉悦的使用体验。

1

图文排版本身也是一种设计,他们的本质都是在传达与表达。


排版,大家常挂在嘴边却极少有人理解其中具体含义。排版作为平面设计中的一种具体的手段,其本质是对于画面中元素的关系的处理。(画面中的元素包括构图、颜色、字号等。而关系,则指的是他们之间的距离,从色彩搭配等)


失败的设计/图文排版,一定是违背了这两点:

要么,是设计师/作者完全没经过思考,从构图、用色、字号选择方面过于随意,导致画面完全不符合人们的视觉标准。

要么,对于想要传达的内容怎么通过排版形式去表达时含糊不清,导致看后不知所云。

 

排版不仅为了好看,更为了减少大家获取信息的压力,帮助读者理清思路。

简单说:排版就是要让大家更好的看懂你的文章在讲什么。


给大家举两个反例,比如下面这样的文章


它的确经过了排版。但很多人在看这些信息的时候就会有一种视觉的压迫感,扫过一遍之后也很难记住他讲了什么。


图文排版和微信小程序设计指南里描述的相通之处,他的排版有没有减少获取信息的压力,有没有帮助读者理清思路?答案很显然这是一个失败的排版。



那怎么样的图文排版在视觉上给人感觉才是清晰明确的呢?让我们先看看正面的例子:


在排版时统一格式、风格,包括配图、配色、排版的样式等格式、风格的统一,可以增加大家公众号的辨识度,让别人一看就能印象深刻。


深夜发媸的配色则以粉色、暗红色为主题色,凸显女人味。

就比如行动派的风格一直以扁平化为主,配色都选用黄蓝这类的亮色,给人以清新明快的感觉,9月26号起行动派的风格做了一些调整,配色都以黄色为主,更加活力积极,传递着just do it,如同它的名字一样。


2

好的文字排版又可以突出文章重点,清晰明确的将作者想要传达的意思给到读者。现在文字的排版比较普遍的有两种:一种是两端对齐的排版,还有一种是居中对齐的排版。


两端对齐的属于深阅读型排版,适合一些偏向干货类的文章,比如i排版、微互动、罗永浩、可能吧等。

一句话占一行的居中排版,属于浅阅读型排版,一般适合娱乐型、文艺类或以图片/视频为主的文章,比如:深夜发媸、顾爷、JustMoment等。




一些从视觉规范里得到的关于微信图文小启发:


➤ 通过小程序视觉规范我们得到在微信图文中的一些小启发:从标题20pt-按钮18pt-界面主要描述16pt联系到微信图文里对于字号的安排是异曲同工的,随着字号大小的变化,提示着该部分对于文章的作用。


➤对于字体的使用与所运行的系统保持一致同样体现在微信图文只可以使用默认字体,这样可以保证不管在任何手机显示里读者的阅读视觉是统一的,对于作者来说更有利于让读者将注意力集中在内容本身而不是眼花缭乱的字体上。


➤固定图标使用则是可以在文章里给读者养成一种习惯,当看到某种图标时能快速作出反应,作者要提醒注意的内容。


1. 字体规范

常用字号为20,18,17,16,14,13,11(pt),使用场景具体如下:

微信类字体的使用与所运行的系统字体保持一致,以导航为例,iOS与Android对应字体如下:

2.字体颜色

主内容Black黑色,次要内容Grey灰色;时间戳与表单缺省值Light灰色;大段的说明内容而且属于主要内容用Semi黑;

蓝色为链接用色,绿色为完成字样颜色,红色为出错用色Press与Disable状态分别降低透明度为20%与10%;

3. 图标使用原则


3

说到字号,配色,无外乎是大家都比较熟知的那些老生常谈:


正文的字号最好在14—18px之间。

设置字号大小通常遵循以下规律:

标题>小标题>正文>小标注

一般来说,如果文字字数较多(大于等于1500字),我们一般采用14px作为正文大小,而如果字数较少(小于1500字),整篇文章比较稀疏,则可采用16px的正文,并以此类推。


同一屏内不要出现3种以上的字号;一篇文章里的颜色不宜超过三种。

一直以来总有一些的同学会问:为什么非要是16px 、14px字;我怎么就不能用四、五种颜色或艳丽的颜色?

文章的开始我们已经说过了,图文排版本身就是种设计,而现在我们是可以从上面的视觉规范里了解不同的字号用在不同的场景需要里。

比如:标题作为文章的线索提示,情节围绕这一线索展开的作用,会使用较大的18px/20px字号。小标题用在说明各个段落,让文章有层次,这里就需要使用比大标题稍小一点的字号(18px/16px)  以此类推正文则使用16px或14px。看到这里,你就会发现,由于使用了不同的字号去排版,文章马上就有主有次,结构清晰起来。



那么什么类型的文章需要什么字号呢?

16号字体有着较高的辨识度,适合新闻类的公众号。公众号主要群体是中老年人,为了方便其阅读字体可以稍大一些(16-18px)。有调查显示40岁以上人群对移动端14号以下字号表示阅读需要用力,呈现排斥性。而对40岁以下人群对照14和16号字则表示没区别,这就是年龄差异中的细节。


如果你想比较偏“文艺范”的文章字体可以适当小一些(14px),那么14号字体会显的文章更精致一些,整体美观一些。对于一些注释,比如说标明图片的来源信息等等,大家可以尝试使用12号字体。


10、11px太小,无法看清;而24、36px则基本只在一些特殊的排版中用到。




4

经常有小伙伴问沙师弟,可不可以改字体?为什么我大段大段的文字不可以使用彩色?


我们从上面微信小程序设计指南给出的视觉规范里看到这样一句话:微信类字体的使用与所运行的系统字体保持一致。

这就可以解释为什么微信后台默认字体为微软雅黑,并且不允许修改(这也是为什么i排版不提供字体修改)。实际上,微软雅黑本来就是很多专业设计人员眼中几乎无可挑剔的字体——无衬线,读起来不累;兼容好,任何设备都能打开。


而由于微信推送阅读界面是纯白色的,如果我们将字体颜色设置为纯黑色,会造成视觉上的突兀,黑白的对比会影响阅读。


除了正文使用黑色以外,灰色作为小提示的颜色,另一种颜色自选。一个长期稳定运营的公众号,一般应选用一种颜色作为主题色来强化自己的品牌辨识度,比如深夜发媸的徐老师,采用红褐色作为主题色,凸显女人味;


“小黄人科技”“i排版”,用黄色作为主色,一来黄色代表着智慧、阳光健康、创造力互动的;二来是和LOGO亲切健康阳光的小和尚形象统一,传递品牌理念,提供更互动性的服务工具,体验至上、设计至上、互动至上。


比如“i排版”“小黄人科技”文章的字体色都有黄色、灰色、黑色。

  • 黑色:正文颜色。

  • 黄色:公众号主题色,用在标题。

  • 灰色:图片说明、简介。





颜色越是鲜艳,传递出的情绪也就越强,太过激烈对于读者都会造成压迫感,因此也要尽可能避免使用过于鲜艳,纯度过高的颜色,比如灰色几乎能与任何颜色搭配而不显得突兀。另外,不要使用一些颜色很难看清,比如你能看到写的是什么吗?



cache
Processed in 0.013577 Second.