008 注重视觉效果

虽然小程序的功能是吸引用户的主要因素，但是，如果一个小程序只有功能，却不注重视觉效果，仍有可能造成用户的大量流失。因此，为了增强小程序的视觉效果，微信从字体、列表、表单、图标和按钮这5个方面制定了规范。

1.字体

从字体来看，“微信公众平台|小程序”的“微信小程序设计指南”界面对字号和字体颜色分别制定了规范。首先，对于页面中各内容的字号，微信给出了统一的规范，具体如图1-28所示。

除了字号之外，微信官方还对字体颜色表示的意义及使用标准制定了规范，并明确指出：“主内容Black黑色，次要内容Grey灰色；时间戳与表单缺省值Light灰色；大段的说明内容而且属于主要内容用Semi黑。蓝色为链接用色，绿色为完成字样色，红色为出错用色，Press与Disable状态分别降低透明度至原来的20%与10%。”具体字体颜色规范内容如图1-29、图1-30所示。

其实，即使是完全相同的内容，如果手机系统不同，其选择的字体也可能会出现一些差异。这是因为不同系统对字体的要求不同，所以，为了让小程序相关内容与系统字体一致，运营者需要根据系统对字体进行具体的选择。比如，同样是导航栏的中文字体，在iOS系统中，需要选择苹方或PingFang SC字体。而在Android系统中，却要选择思源黑体。

2.列表

作为页面内容的重要组成部分，列表的呈现效果也会直接影响到用户的视觉感受。所以，为了统一列表格式，让用户获得较好的视觉感受，“微信公众平台|小程序”的“微信小程序设计指南”界面制定了图1-31所示的列表视觉规范。

3.表单

表单由表单标签、表单域和表单按钮组成，而表单域包含了文本框、多密码框、隐藏域、复选框、单选框和下拉选择框等诸多内容，因此，为了统一表单格式，微信小程序制定了图1-32所示的表单视觉规范。

4.图标

在微信小程序中，最为常见的图标主要有3类：一是表示完成的图标，二是表示错误提示或警示的图标，三是表示提醒的图标。为了统一图标，让用户更快获知图标代表的意义，“微信小程序设计指南”界面针对上述3种图标制定了使用规则，具体如图1-33所示。

5.按钮

根据高度的不同，微信小程序中常见的按钮可分为大按钮、中按钮和小按钮3种。其中，大按钮的固定高度为94px（47pt），它表示的是当前页面的即时操作，因此它必须是有效且能够满足用户实际需求的按钮。大按钮的具体使用原则如图1-34所示。需要特别注意的是，一个页面中只能出现一次主操作按钮。

中按钮的固定高度为70px（35pt），它表示的是重要程度不高或者不鼓励用户操作的按钮。当然，如果使用大按钮会扰乱用户浏览信息，也可用中按钮代替。中按钮的具体使用原则如图1-35所示。

小按钮的固定高度为60px（30pt），它表示的是页面中某项内容的操作或选择。与大按钮不同，小按钮可以重复出现。小按钮的具体使用原则如图1-36所示。

除了上述3种按钮之外，微信小程序中还可能出现两类按钮：一类是表示按钮已经失效，还有一类是表示按钮正在加载。“微信小程序设计指南”界面对这两类按钮的使用原则进行了相关的规定，具体如图1-37所示。