基于微信客户端的 web 交互设计
由于依托微信庞大的用户群体，加以 web 产品灵活、适合快速开发验证 以及 微信提供了功能丰富的 SDK；基于微信客户端的 web 产品越来越受开发者的欢迎。
接下来，笔者将从交互设计角度分享自己近段时间来的心得，欢迎交流 :-)
主要内容
- 基本原则
- 导航
- 操作
- 数据录入
- 数据展示
- 反馈
1. 基本原则
- 符合预期
用户在使用产品时往往会事先形成自己的预期（例如购买商品时提交支付密码即可完成支付）如果产品没有按照用户的预期进行工作就可能带来不好的体验，所以在产品设计前应该研究用户的心智模型在产品设计中设计出符合用户预期的体验。
（1） 功能可见
“可操作的对象在用户看来是可操作的，反之亦然”
在扁平化设计趋于主流的今天，功能可见性显得尤为重要
分享引导
除了有强引导性的页面主按钮之外，一些弱文字链的功能可见性也不容忽视
使用"可点击色"暗示文字链可点击
（2）视觉流畅
整齐划一的布局使页面元素出现的位置符合用户预期从而创造较好的浏览体验
对齐的文本框标题与提示
（3）一致性与标准化
用户使用产品或外界产品后，会产生一定的使用预期；例如下拉可以刷新、点击状态栏或导航栏可以快速回到顶部。
这就要求开发者需要注意自己管理的多个产品的交互一致性，不能出现同样的元素或组件表意、操作结果不同的情况出现；还要注意自己的产品与外界的交互规范达成统一、标准化。
- 减少打扰
系统与用户交互应该在保证任务达成的前提下尽可能的降低甚至消除对用户的打扰
（1）局部反馈
相比模态弹窗这类高阻断的全局反馈形式，局部反馈仅在反馈对象上或用户的关注点上进行反馈，可以减少对用户的打扰更清晰的表述系统当前的状态。
加载中...
（2）阶段展示
隐藏页面内次要的内容，仅当用户需要时向用户展示
点击“查看详细配置参数”
展示详细信息
（3）适时出现
系统应该仅在需要时执行必要的操作，例如尽量不要在用户刚进入系统时要求用户授权个人信息等隐私权限
点击“微信登录”后弹出提示窗
2. 导航
开发者无需也无能力自定义微信浏览器自带的导航栏（除页面标题外）
传统 app 能搭载在导航栏上的功能按钮（主要是对页面进行操作）将无法通过微信浏览器导航栏搭载，
所以在基于微信平台进行设计时，首先要解决应用导航和对页面进行操作的问题。
- 快速回到首页
由于 H5 页面的性能限制，在面临了多层级跳转时，频繁的页面加载会使用户感到烦躁
当前页面距离产品首屏 >= 2 个层级时,需要提供快速返回产品首屏的功能
点击回到首页
快速前往其他模块
- 使用 js 页面层和弹出框，减少页面跳转
这不但提高效率给用户带来了更好的体验，同时也能提高产品的业务达成率减少流失
使用弹出框的方式帮助用户进行输入，减少页面跳转
-
减少导航控件对页面内容区域的占用
微信浏览器自带的导航已经占用了部分屏幕空间，当开发者不得不增加导航时，通过给自制导航栏背景增加透明度可以减少页面空间的压迫感。或者选择微信官方推荐的底部标签栏。 -
单页 Web 程序
单页 Web 应用（single page web application，SPA），就是只有一张
Web 页面的应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。——百度百科
单页 Web 程序的操作与内容展示都由 JavaScript 执行，与服务器的交互由 AJAX 执行，体验上接近原生 APP 的体验，流畅、快速响应。此技术可大大提升 Web 应用程序的使用体验。
体验接近原生 APP 的「知乎Live」Web APP
3. 操作
传统 APP 通过导航栏放置针对当前页面可进行操作的功能按钮
作为“搜索”、“更多”功能载体的微信导航栏
作为“侧拉菜单”、“下拉菜单”、“搜索”功能载体的微博国际版导航栏
受微信浏览器导航栏自定义许可范围的限制，我们需要考虑对当前页进行操作的载
体，以及如何平衡载体与页面内容显示空间之间的占用屏幕位置的矛盾
- 新增
轻芒杂志
点击图中的“新增”按钮后，会在按钮之后、最新的数据之前增加一条新的数据，此种方式上下文更有逻辑关系，与其他内容一体性更强。当所需要添加的内容较为私人时，可以考虑这样的设计形式。此种方式占用空间大，不适合数据数量多的场景(例如论坛发帖)
当前页面的核心任务以浏览为主并且发布的内容公开时，页面主操作按钮可以参考谷歌的设计规范使用悬浮按钮，至于右下角）
悬浮按钮对用户的行动召唤力更强
知晓程序”的悬浮按钮
当你的产品的核心内容是发布内容时，你也可以将发布内容按钮放置于底部 tab 栏，
用户希望输入的数据不多时，使用弹窗
使用弹出框的方式帮助用户进行输入，减少页面跳转
- 编辑和删除
一般使用 2 种处理方式
（1）通过点击行内操作按钮显示对数据项的编辑、删除等操作
行内操作按钮触发行动菜单
（2）通过编辑栏放置“编辑”按钮，点击“编辑”后进入编辑态，此时编辑栏上显示“删除”等操作按钮
删除按钮需要使用警告色(一般为红色)引起用户注意以防止误操作
-
搜索栏
放置于页面顶部，方便用户快速找到目标
4. 数据输入
- 尽量减少键盘录入
提供合理的默认值减少用户输入、选择的次数
默认值——中国
使用选项或滑块代替键盘录入
单选框和复选框
善用JSSDK
使用微信提供的 JSSDK 获取用户个人信息、地址、定位等数据减少键盘录入
- 提供格式说明
提供准确的格式说明帮助用户完成录入操作
“需多于 5 个字”
5. 数据展示
移动设备的使用场景复杂且极其不稳定,用户使用移动设备的时间较为碎片化,用户在移动设备上浏览内容的方式是"扫"而不是"阅读
- 垂直列表
便于用户逐条浏览
垂直列表
- 横向列表
支持左右滑动查看，节约屏幕空间，便于图片展示与比较
京东
- 突出重点信息，删除或弱化次要信息
- 空白页的设计
产品在首次被使用时往往会出现无数据的情况，此时需要注意空白页的设计；空白页需要告知用户当前的情况“当前页面无数据”，并且告知用户什么时候当前页面才会出现数据以帮助用户在需要时回到当前页面查看数据
“还没有参与过 Live”
一部分页面的数据来自用户的手动添加，此时在空白页除了告知用户当前情况，还可以引导用户进行添加数据操作，
6. 反馈
用户使用产品时，希望知道系统做了什么，正在做什么以及即将做什么（系统状态可见性）
局部反馈
在需要进行反馈时，局部反馈是一个不错的解决方案,他回答了用户对于"系统正在做什么"的疑问
正在提交
正在加载页面内容
局部反馈是一种清晰、简洁、易懂、有逻辑的反馈方式，它只在用户的关注点进行工作，通常是用户进行某种操作之后进行的反馈，所以局部反馈更多地用于系统的加载状态，也就是「系统正在做什么」
- toast
toast 是一种较轻的反馈方式，可以用来描述用户的操作结果或简单地描述系统状态。
描述操作结果
描述系统状态
- dialog
dialog 是一种强阻断的反馈方式。
在用户进行重要的操作时可以用来描述“系统即将做什么” ，比如常见的删除操作告诉用户即将删除重要资料帮助用户进行二次确认以防止误操作。
在用户使用产品遇到问重要题时也可以使用 dialog 向用户反馈「系统做了什么」，比如「网络连接中断」、「 密码不正确」等
dialog 也经常用来反馈系统的当前状态提供提示和指引、询问用户系统该如何工作。
dialog 是一种强阻断的反馈形式，需要谨慎运用
weui 给出的 dialog 文案说明建议
好的反馈形式往往是在清晰反馈信息给用户的同时最大限度的降低对用户的打扰和负担
局部反馈 < toast < dialog （按打扰程度进行排序）
防止过度反馈,当操作结果在页面可见时(例如成功添加一条信息或删除一条信息，页面自然会新增或减少一条信息),则无需再进行反馈。
比起用户操作后给予提示，更优雅的方式是:灰化或隐藏不可操作的对象
反例
参考资料
蚂蚁设计
《简约至上 交互式设计 4 步骤》
