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

从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、利用接口提示性能

看了 bang 的博客对微信小程序的技术方案有了更深入的理解：

微信小程序必须要符合两个刚需： 管控 & 体验

（1）DLS：想要对开发者进行管控，最好的方法就是自己设计一套框架，让开发者按照自己框架的规范进行编码，利用这套DLS（针对某一特定的领域设计的计算机语言）可以更好的针对不同的需求去优化。

（2）JS环境：写过小程序的开发者都了解，小程序中是无法调用任何DOM API的，为什么呢？是因为小程序实现了js的运行环境与浏览器分离，运行在单独的js引擎上，脱离了浏览器，一切DOM *** 作在你的JS中是无法 *** 作的，而小程序的核心JS是运行在浏览器中的，这样做的 好处 和 坏处 是什么呢？

（1）因为小程序是寄生在原生下的应用，通过native接口，我们可以用js调用一些原生的组件和方法，做出一些H5无法完成的任务和体验。

（2）退出小程序后，小程序后，小程序可以在后台运行5分钟，用户再次打开时，不需要重洗渲染小程序。

（3）同时得益于在原生环境下，小程序可以预加载多个WKWebView，可以省去WKWebView加载时间，提高用户体验。

以上是通过bang的博客以及自己的理解记下的。

以下是自己最于最近的现象的一些见解唠叨：

（1）微信小程序平台的管理机制：小程序的管控机制其实很大程度上是效仿苹果对于旗下应用的管控机制。苹果对自家的应用或者语言的监控可谓是家长对于孩子般的照顾了，当然这和其自身利益和自身价值是分不开的，对于前阶段苹果对于混合开发的动作（当然这和安全隐患有着关系，如JSPatch调用私有API），大家可以搜索一下2016年之前和2016年之后Object-C和Swift的语言排行，相信可以看到一下原因。所以对旗下产品的管控对于其自身利益又着很大的作用。

（2）支付宝小程序和微信小程序：支付宝小程序刚推出时，我看了一下它的文档，确实和小程序很像，抄袭理念也是自然的了。这个我不考虑，只是写一些对与两个超级平台的不同看法（纯属个人见解，欢迎一起分享讨论），两个小程序确实存在着竞争，但是我认为（不考虑两个巨头对于市场的战略竞争），两个不同的平台都拥有着自己不同优势产品细分领域下的深层的挖掘，比如说，在微信小程序上，我们可以对其社交进行不同的细分，这种场景对于支付宝来说并不合适的，但是在支付宝小程序中，金融类领域相对于微信来说是其优势，在支付宝中对其进行深层次的挖掘也会带来不一样的效益。其实关键在于两家超级平台对于旗下优势产品的大数据层次的开放程度，这些数据对寄生或者共存在其生态下的商户来说是可遇不可求的。这些数据和资源足可以再次创造多个的美团和饿了么了，对于小公司的吸引力是很大的。所以个人认为支付宝和小程序胜出关键在于对数据的开发和不同时间节点的营销了，不同时间节点的营销同样是很重要的，这个就是天时了。一个产品的成功，不仅仅靠的技术，理念，甚至体验，因为这些都是可以改变的，但是天时足可以影响一个产品的成败。天时，地利，人和才是其成功的关键。关于两个超级平台的发展，我们只能静静地观察了，因为对于吃瓜群众的我而言，现在只能说说理解，发发牢骚（其实很多人都是了），但是我感觉这对个人的成长也是有很大的好处的。

关于小程序开发方案，目前主流的有两种：小程序定制开发、小程序模板开发。

1、小程序定制开发

小程序定制开发，顾名思义，就是根据客户的需求来定制开发小程序。针对有特殊的功能需求的客户而言小程序定制开发是一种选择，因为小程序模板开发满足不了。但是小程序定制开发需要耗费较长的时间、人力、物力，不过开发出来的小程序是完全满足客户需求，与业务紧密相关，并且正规的小程序定制开发公司在小程序开发项目完成之后会交付源代码等，确保安全。

2、小程序模板开发

小程序模板开发则是套用现成的小程序模板，将功能组合起来成为一个模板小程序。小程序模板是标准化产品，因而只有标准化的小程序功能需求才能满足使用。小程序模板由于是已经开发好的，因而无需再花费时间去开发，基本上开通账号就能直接使用，因而价格方面对比小程序定制开发会有很大差异。

小程序模板开发价格一般是按年收费，价格从几千块到上万块一年不等，具体看功能需求而定；而小程序定制开发价格一般都是3万元起步，5万-8万比较常见，当然功能需求复杂的上十万的也是有的，具体的价格也是需要根据具体功能需求来评估。

以上就是小程序开发方式以及两种开发方式的主要区别。【点击了解更多加盟项目】

---