小程序界面设计原则四:统一视觉规范

每当学校组织广播体操活动时,都会要求队伍排列整齐,一是为了做操时有足够的活动空间,二是为了塑造一种视觉上的规范感,有利于展现出学生们良好的精神面貌。毕竟整齐和谐的队伍总会让人赏心悦目。

与做操队伍要排列整齐一样,开发者在做小程序界面设计时同样需要关注小程序视觉上带给用户的和谐感。统一、规范的界面设计容易给用户留下良好的印象和使用体验。

小程序的视觉规范包含三方面内容,分别为字体规范、列表视觉规范、表单输入视觉规范。开发者做好这三方面内容的设计,小程序视觉上的规范感就基本上可以保证。

文字是人们获取信息的主要和直接来源,公众号的推文、小程序的界面导航等几乎都是以文字呈现出来的,使用者只要看到具体的文字,就能基本知道它所表示的是什么意思。

人们通过文字来获取信息的方式是阅读文字—眼看、口读。所以若想要用户能够快速、准确地通过阅读文字来获取小程序上的信息,那么开发者就需要注意设计过程中小程序界面的字体规范。字体规范包括字体字号和字体颜色。

在微信体系中,字体字号会和系统字体保持一致,11pt, 13pt, 14pt, 16pt,17pt,18pt,20pt这些由小到大依次排列的字号均是小程序的常用字号。11pt—般用来说明一些用户并不需要关注的文本信息,如通常位于页面最下方的“版权信息”;13pt一般用来说明页面中的一些辅助信息,如网页的链接地址;14pt一般用来说明页面中的次要描述文本,如列表摘要;16pt一般用来说明页面中的主要描述文本,如正文内容;17pt一般用来说明页面中的首要层级文本,如消息气泡和列表标题;18 pt一般用来表示页面中的大按钮;20pt一般用来表示页面中的大标题,如结果页面等单一页面。

根据不同的文本信息来设置字体字号,形成字号规范,有助于用户区分信息的主次地位,明确知道哪些是主要内容,哪些是次要内容。这样的设置时间一久,用户便能依据小程序的字号来辨别主次信息,形成一种阅读习惯。

字体颜色是字体规范中的另一个注意点。小程序的字体颜色选择通常有五种,分别为黑色(Black)、灰色(Grey)、蓝色(Blue)、红色(Red)、绿色 (Green)。小程序中的主要信息一般会用黑色字体表示;次要信息一般会以灰色字体表示;表单缺省值和时间戳一般用浅灰色(Light Grey)字体表示;内容较多且为主要文本内容的说明性信息一般用中度黑(Semi Black)字体表示;小程序页面中的链接则一般为蓝色字体;绿色字体一般表示已完成的内容;出现错误的内容一般用红色表示。

对于用户在小程序上的阅读体验来说,其字体的字号大小以及颜色深浅都是影响因素。字号过大不利于用户在单个页面上获取到较多的信息,字号过小则需要用户凑近手机阅读,不易阅读且有损视力。字体颜色的选择则会影响用户视觉上的清晰度。

所以,开发者在设计小程序界面时要注意字体字号的大小设置,做到以字号大小来区分页面中的主次信息,且字号要符合用户的正常阅读习惯;界面的字体颜色则要确保用户在使用小程序时能将页面内容看清楚、看明白。

除字体规范以外,小程序开发者在设计时还需注意列表视觉规范和表单输入视觉规范。

左图表示列表视觉规范,右图表示表单输入视觉规范。

小程序开发者可以按照图4—11所示的数据来设置小程序页面中的列表视觉规范和表单输入视觉规范。

总之,字体规范、列表视觉规范、表单输入视觉规范这三者都需要小程序开发者在设计过程中尤加注意。因为对于小程序用户来说,将小程序页面中的字体、列表、表单等设置成统一的规格,并以规范统一的最终页面展示出来,用户才会在使用小程序的过程中不仅感到视觉上的赏心悦目,还有整个使用体验上的赏心悦目。




(本文内容及图片收集于网络,如有侵权,请联系我们删除。)