我最近读了一下《微信小程序设计指南》,发现该指南提供了一种界面设计范本,这种指南不仅仅适用于微信小程序,还能为其他产品的界面设计提供一种思路。以下是提取出来的摘要,供界面设计时参考。
- 友好礼貌
- 重点突出——减少无关目标对用户的干扰,尽量避免页面上出现其它与用户的决策和操作无关的干扰因素
建议:
(1)减少焦点
(2)操作有主次 - 流程明确——避免出现无关内容打断用户
- 重点突出——减少无关目标对用户的干扰,尽量避免页面上出现其它与用户的决策和操作无关的干扰因素
- 清晰明确
- 导航明确,来去自如——当前在哪、可以去哪、如何回去
建议:
(1)移动端设计时,建议所有的次级页面左上角提供返回上一级页面操作;iOS用户可通过界面边缘向右滑动操作,返回上一级;安卓用户通过物理返回键返回上一级。
(2)提供简单清晰的导航样式:标签导航介于2~5个之间,一般不要超过4个;导航颜色要清晰可见、便于区分。 - 减少等待
等待和加载期间,考虑以下情况,并保持简洁:
(1)启动页加载——突出品牌,提供加载进度
(2)页面下啦刷新加载
(3)页面内加载反馈
(4)模态加载(覆盖整个页面)——谨慎使用,仅用于全局性操作
(5)局部加载反馈(如按钮操作加载)——推荐
(6)全局加载反馈——建议在标题处提供反馈
加载反馈设计建议:
(1)载入时间较长时提供取消操作,使用进度条显示载入的进度。
(2)加载时保持动画效果。
(3)1个页面仅出现1个加载动画。 - 反馈及时
结果反馈样式的参考:
(1)页面局部操作结果反馈(常用的控件,如复选框、单选框)
(2)页面全局操作:图标型弹出提示——用于不需要强调的操作题型,如成功提示;切勿用于错误提示
(3)页面全局操作:文字型弹出提示(诸如安卓Toast)——适用于轻量化文字提示、不严重的错误
(4)页面全局操作:模态对话框——需要用户明确知晓的操作结果状态,可附带下一步操作指引
(5)页面全局操作:结果页——最为强烈、明确的结果,可提供下一步操作指引 - 异常可控,有路可退——在用户沮丧、需要帮助时,提供黄台提示,并告知解决方案,时期有路可退
例如表单出错:告知错误原因吧,并标识出错误字段,提示用户修改
- 导航明确,来去自如——当前在哪、可以去哪、如何回去
- 便捷优雅
- 减少输入——减少使用键盘输入
设计建议:
(1)需要输入时,可选择利用接口输入,如摄像头识别、定位、语音输入
(2)尽量减少用户手动输入,尽量让用户选择,如搜索历史记录 - 避免误操作——组件设计时,考虑页面点击效果和不同屏幕的适配
- 利用接口提升性能
- 减少输入——减少使用键盘输入
- 统一稳定——留意不同页面之间的统一性和延续性,尽量使用一致的控件和交互方式,以便减少学习成本
发表回复