2.2 个性设计是建立在官方规则要求基础上的

对于小程序的页面设计，微信官方提出了一些要求，如图2-3所示，其为“微信小程序设计指南”的部分内容。有需要的小程序自媒体电商运营者可以前往“微信小程序设计指南”的“设计”版块查看。小程序自媒体电商运营者可以将其视为设计自身小程序电商平台的官方规则，即便是打造个性电商平台，也需要以这些规则为基础。

2.2.1 操作要畅通无阻

【内容导读】

畅通无阻的操作体验，即用户在使用微信小程序的过程中，不应该被突如其来的无关内容所打断。

【技巧解读】

要做到操作的畅通无阻并不容易，因为有的运营者经常会好心做坏事。比如，有的小程序自媒体运营者为了增强对用户的吸引力，会在用户的操作过程中弹出如图2-4所示的抽奖活动页面。

虽然运营者这么做是为了给用户发福利，但是，面对突然出现的抽奖页面，许多用户并不会因为获得抽奖机会而欣喜，相反，可能因为操作被打断而对该页面，甚至对小程序产生反感。因此，为了使用户获得畅通无阻的操作体验，运营者应减少抽奖、广告和提醒类信息。

【温馨提示】

需要特别说明的是，如果提醒信息与小程序的服务内容直接相关且不可跳过，那么，此信息对于用户来说便是必要的信息，即使可能暂时打断用户的操作，也必须进行设置。

比如，当用户进入“孕期提醒”这个小程序之后，页面中会跳出如图2-5所示的“请设置预产期”提醒。因为该小程序中的内容都是根据怀孕的时间提供的，不同的怀孕时间，呈现的内容可能会有较大的差异。所以，为了让用户获得更加准确的信息，设置预产期这一步是不可或缺的。因此，此时的设置提醒便具有了必要性。

2.2.2 导航要清晰明确

【内容导读】

对于用户，特别是对于初次进入小程序自媒体电商平台的用户来说，导航栏起到的是地图的作用，而明确的页面导航则可让用户迅速找到自己需要的内容，减少不必要的搜索时间，增强小程序的便利性。

【技巧解读】

在笔者看来，小程序自媒体电商平台中的导航栏主要有三个作用：一是告诉用户其所处的位置；二是给用户提供返回渠道；三是对用户的操作进行引导。其中，操作引导既是对用户最具实用价值的内容，也是运营者可以充分利用的部分。如果运营者需要达到某一目的，便可以通过导航栏的一步步引导来实现。

比如，在电商购物类小程序中，自媒体电商运营者为了让用户快速完成购物，可以通过明确的导航让用户快速找到自己需要的产品，此时，如果再提供便利的购买途径，那么，在其引导之下，用户通常更容易下单完成购买。

以“拼多多”小程序为例，如图2-6所示为该小程序的“首页”界面。可以看到，在“首页”界面，用户可以对包括“男装”“年货”“手机”等类别的商品进行选择。

而在首页选择“男装”界面，进入该界面之后，导航栏下方又出现了“男装”“男裤”“休闲裤”等下一级的导航栏，如图2-7所示。

如果用户选择“男裤”选项，页面将转至如图2-8所示的“男裤”界面。另外，点击某一商品之后，即可进入如图2-9所示的“商品详情”界面。而在该界面中又为用户提供了购买途径。用户只需点击页面下方的“单独购买”按钮，或“一键开团”按钮，便可对产品进行购买。

【温馨提示】

大部分用户并不会对随处可见的导航栏感到厌烦，相反，还会觉得运营者在设计小程序时充分考虑到自己的感受，因为导航栏很好地充当了地图的作用，使当前页面中可以查询的内容变得一目了然。

2.2.3 重点要突出显示

【内容导读】

每个微信小程序的页面中都有一个主题，小程序自媒体电商运营者需要做的就是将主题内容作为重点进行突出显示。在重点呈现的同时，让用户更好地把握页面中相对重要的内容。

【技巧解读】

如图2-10所示为部分小程序查询页面的内容，在该页面中，运营者分别在页面上、下方放置了两个广告，而“查询”按钮下方的词条大小一致显得没有重点，这种查询设置显然是错误的。

既然有错误的设置，就有正确的示范。那么，正确的查询页面该怎么设置呢？笔者认为，可以从两个方面进行考虑。

首先，与查询无关的内容，如广告信息，应该全部去掉。其次，在提供搜索词条时可考虑用户的使用习惯，将“最近搜索”的词条用不同大小的字体有差别地显示，具体如图2-11所示。

【温馨提示】

虽然小程序中可以放置广告，但是，小程序自媒体电商运营者最好还是尽量少在页面中放置广告，因为广告在页面中会显得很突兀。而且在大多数情况下，广告都是不招人待见的，毕竟用户使用小程序不是为了看广告。

2.2.4 主次操作要分清

【内容导读】

小程序自媒体电商运营者在进行操作选择设置时，需要做到主次分明，帮用户分清主要操作和次要操作，而不能同时提供多种分不清主次的操作，让用户陷入难以选择的处境。

【技巧解读】

图2-12所示为错误的操作选择设置，之所以说它是错误的设置，就是因为该页面给用户提供了“操作一”“操作二”“操作三”。这3个操作的选择，除了文字略有差异之外，其他内容完全相同，可以说是完全看不出主次的。在这种情况下，用户该怎么选择呢？

对此，运营者不妨直接将操作名称命名为“主要操作”“次要操作”，并给其配备不同的背景色，如图2-13所示。这样一来，主次有别，用户自然也就不用再因选择而为难了。

【温馨提示】

让操作主次清晰主要有两种方法，一种是直接写明，另一种则是减少选择项。所以，如果在不好分别设置操作的情况下，小程序自媒体电商运营者还可以适当减少操作的选择项。如果实在要让用户选择，可以分几次进行。

2.2.5 页面规范要遵守

【内容导读】

虽然小程序的功能是吸引用户的主要因素，但是，小程序自媒体电商运营者需要明白一点，很多人都是“颜值控”。如果一个小程序自媒体电商平台只有功能，却不注重视觉效果，有的用户在看了一眼之后，可能会觉得设计太low了而选择离开。这样一来，势必会造成用户的大量流失。

【技巧解读】

因此，为了增强微信小程序电商平台的视觉效果，微信从字体、列表、表单、按钮和图标这五方面制定了规范。

1．字体

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

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

其实，即便是完全相同的内容，如果手机系统不同，其选择的字体也可能会出现一些差异。比如，同样是导航栏的中文字体，在iOS系统中，需要选择苹方或PingFang SC字体。而在Android系统中，需要选择思源黑体。

这是因为不同系统对字体的要求不同，所以为了让小程序相关内容与系统字体一致，微信小程序电商运营者需要根据系统对字体进行具体的选择。

2．列表

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

3．表单

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

4．按钮

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

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

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

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

5．图标

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

【温馨提示】

设计规范不仅可以增加小程序的页面效果，还可以提高小程序审核通过率。当运营者按照微信官方给出的设计规则设计小程序时，审核人员会觉得运营者遵循了规则，这样给审核人员留下的印象自然会好一些。

2.2.6 异常情况要解决

【内容导读】

当用户操作不当时，微信小程序页面可能会出现一些异常情况。虽然这不是小程序自身的过错，但是异常仍是一个必须解决的问题。因此，自媒体电商运营者在设计小程序页面时，必须要做好对异常问题的处理。具体来说，解决异常需要做好两个方面的内容：一是告知异常，二是提供解决方案。

【技巧解读】

图2-24为微信官网给出的表单报错示例，可以看到在示例的图片中，明确指出显示“卡号格式不正确”。经过这一处理，用户便能清楚地获知具体异常情况，并找出对应的解决方案。

除了表单报错之外，运营者还可以通过提示对话框的设置帮用户解决异常。如图2-25所示为某小程序中的提示对话框，在该对话框中，明确指出“支付密码有误”，与此同时还提供了解决的方案，即“重试”。这样一来，用户在看到该对话框之后便可自行解决异常情况，而不至于因为无法进行下一步而感到无助。

【温馨提示】

因为遇到异常情况之后，用户多少会感到有些无助，如果小程序自媒体运营者不能为用户提供解决方案，那么，用户很可能会由于无法正常使用某些功能而退出，甚至是删除小程序。所以，在设计小程序页面时，自媒体运营者一定要充分考虑可能出现的异常情况，并提供解决方案。