|
|
发表于 2022-12-23 14:56:59
|
显示全部楼层
从2017年1月9日微信第一批小程序正式上线，到后来全民大众玩跳一跳，在至微信对广大开发者的支持。各大巨头开始布局，2018年4月12日百度也上线了小程序，小程序已成为近期炙手可热的一个趋势，那么对于PM来说设计小程序应注意什么，下面以微信为例记录一二。
设计时减少无关的设计元素对用户的干扰，礼貌的向用户展示程序提供的服务，友好的引导用户进行操作。
每个页面设计时都有明确的重点，便于用户快速理解，避免出现其它与用户的决策和操作无关的干扰因素。
用户在进行某一操作流程时，应避免出现目标流程之外的内容打扰用户
明确告知用户身在何处，又可去哪儿，确保用户在页面中游刃有余的穿梭
微信在小程序内不提供统一的导航栏样式，开发者可自定义，建议，所以的次级页面在左上角提供返回上一级页面操作。另外，iOS可以右滑返回，安卓可以通过物理键返回
1 、小程序菜单 ：微信会在右上方放置官方的小程序菜单，固定位置，开发者不可对其内容自定义，但可以选择深浅两种配色，要预留出该区域空间
2、页面内导航
开发者添加标签分页Tab导航，标签分页栏可固定在页面顶部或底部。标签不得少于2个，不多于5个
小程序首页可选择微信提供的原声底部标签分页样式，仅供首页使用。可自定义图标样式，标签文案及文案颜色
顶部标签分页栏颜色可自定义，务必注意保持分页栏标签的可用性，可shi性和可操作性。
页面过长加载会引起用户不满，但是加载等待不可避免，要及时反馈以缓解用户等待的不良情绪
启动页将突出展示小程序的品牌特征和加载状态。除品牌标志展示外，页面上的其他元素如加载进度，均由微信统一提供，不能更改
微信小程序内，微信提供标志的页面下拉刷新及加载能力和样式，无需自行开发
用户可自定义页面内容的加载样式，不过应尽量简洁，并使用简单动画告知用户加载过程； 模态加载，除了在某些全局性操作下不要使用
局部加载反馈只在触发加载的页面局部进行反馈，这样的反馈机制是微信推荐的
全局加载反馈，可参考下图，使用标题栏提示加载小程序页面内容的过程。
注意：1、若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。
     2、载入过程中,应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。 
  3、不要在同一个页面同时使用超过1个加载动画。
除了在用户等待的过程中需给予反馈外，对操作结果页需要给予明确的反馈.
4.1 局部页面操作，可在操作区域直接反馈，如点击多选控件
4.2 页面全局操作， 图标型弹出提示 ，1.5s自动消失，并不打断流程，适用于不需要强调的操作提示； 文字型弹出提示 ：适用于轻量化用文字解释当前状态或提醒不严重的错误； 模态对话框 ：对于需要用户明确知晓的操作结果状态可通过模态对话框来提示
结果页：用于操作结果已经是当前流程的终结情况，最为强烈和明确告知用户操作已完成
在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。
要杜绝异常状态下，用户莫名其妙又无处可去，停滞在某一个页面的情况。上文中所提到的模态对话框和结果页面都可作为异常状态的提醒方式。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。
1、减少输入
手机键盘区域小，输入困难而且容易引起输入错误，应尽量减小用户输入，利用现有接口或其他一些易于操作的控件来改善用户输入体验。
如下图，在添加银行卡时，采用摄像头识别接口来帮助用户输入。可利用微信对外开放的例如地理位置等接口
让用户在不得不手动输入的情况下，尽量让用户做选择而不是键盘输入，如：在用户搜索时提供搜索历史课帮助用户快速进行搜索
2、避免误操作
考虑点击热区，避免可点击区域过小或密集而造成误操作
3、利用接口提示性能 |
|
