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

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

会一点编程技术。

首先你就要会一点编程与软件开发技术，不然无法撰写开发所需察备前要的代码更不要提设计了。

首页设计初步流程如下：

1，自行创建一个image目录，image目录和pages目录是同级别的。

2，创建完毕后，右键单击image目录。

3，点击后就会找到image文件夹存放的位置，找一张图片，把它放在image文件夹里面大家把图片放在image文件滚档夹后，回到微信开发败清者工具里面，点击image目录，大家会发现目录下面出现了自己存放的图片，我们回到welcome.wxml文件里面，开始编写代码。

---