微信小程序产品设计应注意的几点

从2017年1月9日微信第一批小程序正式上线，到后来全民大众玩跳一跳，在至微信对广大开发者的支持。各大巨头开始布局，2018年4月12日百度也上线了小程序，小程序已成为近期炙手可热的一个趋势，那么对于PM来说设计小程序应注意什么，下面以微信为例记录一二。

设计时减少无关的设计元素对用户的干扰，礼貌的向用户展示程序提供的服务，友好的引导用户进行 *** 作。

每个页面设计时都有明确的重点，便于用户快速理解，避免出现其它与用户的决策和 *** 作无关的干扰因素。

用户在进行某一 *** 作流程时，应避免出现目标流程之外的内容打扰用户

明确告知用户身在何处，又可去哪儿，确保用户在页面中游刃有余的穿梭

微信在小程序内不提供统一的导航栏样式，开发者可自定义，建议，所以的次级页面在左上角提供返回上一级页面 *** 作。另外，iOS可以右滑返回，安卓可以通过物理键返回

1 、小程序菜单 ：微信会在右上方放置官方的小程序菜单，固定位置，开发者不可对其内容自定义，但可以选择深浅两种配色，要预留出该区域空间

2、页面内导航

开发者添加标签分页Tab导航，标签分页栏可固定在页面顶部或底部。标签不得少于2个，不多于5个

小程序首页可选择微信提供的原声底部标签分页样式，仅供首页使用。可自定义图标样式，标签文案及文案颜色

顶部标签分页栏颜色可自定义，务必注意保持分页栏标签的可用性，可shi性和可 *** 作性。

页面过长加载会引起用户不满，但是加载等待不可避免，要及时反馈以缓解用户等待的不良情绪

启动页将突出展示小程序的品牌特征和加载状态。除品牌标志展示外，页面上的其他元素如加载进度，均由微信统一提供，不能更改

微信小程序内，微信提供标志的页面下拉刷新及加载能力和样式，无需自行开发

用户可自定义页面内容的加载样式，不过应尽量简洁，并使用简单动画告知用户加载过程； 模态加载，除了在某些全局性 *** 作下不要使用

局部加载反馈只在触发加载的页面局部进行反馈，这样的反馈机制是微信推荐的

全局加载反馈，可参考下图，使用标题栏提示加载小程序页面内容的过程。

注意：1、若载入时间较长,应提供取消 *** 作,并使用进度条显示载入的进度。

     2、载入过程中,应保持动画效果 无动画效果的加载很容易让人产生该界面已经卡死的错觉。 

  3、不要在同一个页面同时使用超过1个加载动画。

除了在用户等待的过程中需给予反馈外，对 *** 作结果页需要给予明确的反馈.

4.1 局部页面 *** 作，可在 *** 作区域直接反馈，如点击多选控件

4.2 页面全局 *** 作， 图标型d出提示 ，1.5s自动消失，并不打断流程，适用于不需要强调的 *** 作提示； 文字型d出提示 ：适用于轻量化用文字解释当前状态或提醒不严重的错误； 模态对话框 ：对于需要用户明确知晓的 *** 作结果状态可通过模态对话框来提示

结果页：用于 *** 作结果已经是当前流程的终结情况，最为强烈和明确告知用户 *** 作已完成

在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。

要杜绝异常状态下，用户莫名其妙又无处可去，停滞在某一个页面的情况。上文中所提到的模态对话框和结果页面都可作为异常状态的提醒方式。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。

1、减少输入

手机键盘区域小，输入困难而且容易引起输入错误，应尽量减小用户输入，利用现有接口或其他一些易于 *** 作的控件来改善用户输入体验。

如下图，在添加yhk时，采用摄像头识别接口来帮助用户输入。可利用微信对外开放的例如地理位置等接口

让用户在不得不手动输入的情况下，尽量让用户做选择而不是键盘输入，如：在用户搜索时提供搜索历史课帮助用户快速进行搜索

2、避免误 *** 作

考虑点击热区，避免可点击区域过小或密集而造成误 *** 作

3、利用接口提示性能

一.注册账号

第一步当然是注册账号了。有两种注册方法：

如果你有已认证的企业类型公众号：进入自己的公众号后台，点击小程序管理- 快速注册并认证小程序，之后按照提示不停“下一步”，就注册成功啦。

（2）普通流程注册：

第一步：在微信公众平台右上角点击“立即注册”，选择账号注册类型：【小程序】。

按要求填写小程序账号信息，包括邮箱、密码等等，填写完后，系统会发送你一个邮件，登陆相应邮箱激活账号即可。

激活后，选择好主体类型，个人就选个人，企业会需要提交一些资料。一切做好后，这就注册完成了。

使用小程序账号密码登入小程序后台。在【设置】里设置小程序的头像、名字、服务类目（这个一定不要乱写）等信息，提交后等待微信审核。

这样，你的小程序账号就注册好了。

二．生成小程序

虽然已经有了一个小程序账号，但是还没有一个真正的小程序实体，空有名字，而不知道它到底长什么样子。这当然需要你自己去设计啦。那么到底小程序怎么制作和发布呢？前面我说过了目前市面有很多第三方小程序开发工具，我们可以用它们来做。这里我以「上线了」小程序开发工具为例，给大家示范下如何制作一款自己的小程序。

1.选择模板

首先，进入到「上线了」官网后台，选择创建小程序，你会看到以下界面，选择一个你需要的小程序类型，这里我选了“电商”，你也可以选别的。

然后挑选一个你喜欢的模板，开始编辑。

（1）直接点击“添加新的商品”，就可以把自己的产品都上架了。如果商品较多，别忘了在【商店设置】里设置好商品分类。

（2）风格设计

在【通用风格】里选择喜欢的主题颜色和导航栏，也可以自定义颜色。

在【分页设计】里，添加或删除各种板块。一个小程序商城就是由各种板块组成的：轮播图、快捷按钮、滑动布局、优惠活动等等。

你还可以在导航中添加文章，拉近和顾客的心里距离。在编辑后台点击【添加其他模块】-文章，就可以开始创作。这也是「上线了」比较特色的功能，有了文章，能更贴心地给顾客介绍店铺的一切，培养自己的粉丝。

一个属于你自己的文章小程序就制作完成了。再点击左下角的立即发布，授权给你刚刚在微信公众平台注册的小程序账号，就一切搞定！

---