设自查设师常用的检验具,常以“自查表”形呈现,可以帮助我们快速遍历设计案,正遗漏或不。善用设计自查,不止可以避免在“设计评审”时被指出误尴尬,可以帮助设计师消除思考盲,系统化地锻炼与提升交互设计思维。
计查好多多,但谈起构建一个比较全面和完整的查表,多人顿千头万绪,因是交互计在产品中于一个交叉性非常的位置,功能性、UI细节、/备性、异常流程……方方面面都会涉及,构建交互计查表应该从哪些角度入呢?如何做全面、完整?
本文将以《智能小程序设计走查表》为例(以下简称《小程序走查表》),讲解基于品/项目特构交互设计自查表思路,希望能够帮助大家了解自查法,触类旁立自己“个专属”自查表。
整体的构建过程可总结4骤:“ 1. 搭结构 → 2. 填内 →3. 用起 → 4. 迭升级 ”
注:《小程序走查表》(如图,点击查看线版本)度小程序交互设团队过设实践总结,已团队内部推广使用,并官方文档中公提供给广发者;发布一多以过几次迭升级,获得了不错的反响。
一自查表常包含几十条各式各样的自查项,因此需搭建一易理解、好记忆的自查结构,便于我们对众多自查项留下印象,实际应用中能够速问题。
《小程序自查表》的大自查模结构设定,借鉴了一个通俗的日场景:“吃面”的步骤,方使者联想记忆:
首先,一碗面端上桌,我们首先有一个整的印象“面的种类对吗”“一印象是否合”,一步以对应小程序的整架构、流程;
然后,我们可能会仔细看看“碗里哪些食”,“颜色、各几分”,这一可以对应小程序的界面细节展,包括控件、数据、文案、表单;
最后,开始吃面了,过程中我们会感觉到“面嚼起来的口感”,或者发生特殊情形“汤滴到衣上”,这一步可对应小程序的交互过程与反馈,及各种特殊情形。
由此形成的“层→表层,整体→细节,态→边界”自查思路,与设计师产方案的思考路径保持一致,于对照参考。
案例粗浅意在抛砖引玉,大家以尽情挥,用自己的方式去搭建自查表结构,适合自己的才是最的。
设计自查具查什么,怎么查呢?《小程序走查表》的50个自查项,是基以下原则,在团长期的项目经验中沉淀得出的:
- 原则一:使设计符合基础设计论;
- 原则二:使设计符合产品的设计平台/设计对象特。
这分将通过官方的小程序showcase真实设计案例:减压工具小程序“减减鸭”,及一式政务务应“中国政务务平台”,讲解《小程序走查表》各模自查项的容及自查方法,供大参考。
第一部分. 信息架构与流程设计
主检查点
小程序即用即走的轻应用,需注意使用简洁的信息架构,使小程序的功能特色一目了然;使用顺畅的用户径,使用户手即用,无需学习本。
自查案例
“体信息架构是否晰易理解,可拓展?返回和下步是否符合用户预期?”
如下图,作一款轻型具应用,“减减鸭”的核功能很简洁,他可以用户分析压力况、并通过两小游戏帮用户调节、减轻压力;因此,减减鸭选用了扁平的1 字型信息架构,将三功能的入口排布首⻚首屏,用户可通过短径速触达内;用户入功能并结束使用流程后,减减鸭界面提供直返首页、以及入其他功能的捷通道,形径闭环。
第二部分. 界面呈现
控件
主要检查点。通对控件外观、控件之间关系的正确表达,以及相似任务横向一致的把控,引导小程序功能使用,进一步降低用户学习成。
自查案例。“界元素/控件关系是否表正确?控件样&交互为是否具有致性?”
如下图,减减鸭小程序页面内层次清晰,通过控件的面积、色彩对比突出用户需关注的操作区,并部分页面加以动效引导,使操作方法一目了然。此外,减减鸭3主功能模块内页面布局横向保持了较高一致性:操作区面积比例接近,且全部集中页面中下部。良好的一致性使用户便于操作,且降低了学习本。
数据与显示
主要检查。数据显示层,主要需关注数据格、单位、排序规则是否合理;以及各极值状态,如数据、数据不完时如何呈现
自查案例
“数据显示是否涉及权限与隐私?”
涉及权限与隐私数据需注意掩码、或隐藏处理。如下图,“国家务服务平台”其功能特殊性,多处涉及手号码或各个证件号码曝露,为保护用户隐私,小程序此类信息基于统规则进掩码处理(手号保留前3位后4位数,身份证件等保留后4位数),让用户用放心。
文案
主要检查点。文案应准确一致,符功能情景,符用户的常规认知和习惯。
查案例
“是否使用了生僻的专业术语?”
文案使用方面,程序其移动端应用则无异。在流程计中,需要预先遍历可能出现的支情况,铺符用户认知的反馈息,如“出错了,请稍后再”;避免直曝露回调息,如“DNS解析失败”。
选择输入
主要检查点。表输入过程的前、中、后,均需铺相应提示,如预置内容、输入提示、输入后反馈等,提示现在该做什、告知操作结果,防止用户“不知所措”。
查案例
“输入前、中、后是否提供了恰当的反馈?是否指定了键盘类型?”
如下图,“国家政服”程序的息查询流程,全程提供了各种形式的提示,辅助用户顺畅输入:
- 输前,通输框预置文案提示表单内容要求;
- 输入中,根据表内容配置对应的键盘类型,并在输入框失焦、表提交个节点置错误校验,及反馈错误;
- 输入完成、成功提交后,使用toast明确提示“提交成功”。
第三部分. 过程和特殊情形
交互过程与反馈
主检查点。小程序虽小,也需全面考虑交互过程中的各种异常状态,提供完备的错处理,如授权失败、外部应用插入、断网状况。
自查案例
“用户拒绝授权后如何提示/呈?”
如小程序功能必使用理置、相机、手机权限,需先通过授权面板提出申请,用户同意后方可常使用;反之,如用户拒绝,小程序需考虑涉及权限的内如何呈,同时恰当提示,引导用户自主启授权,避免用户因手误导致后续权限无法启。
如案例,“国政务务平台”小程序为了向户供“本地”的务容,在首页向户地位置授权申请,如户拒绝授权,页面将显示默认地区信息,并示授权失败;同时,户次进入页面时,弹供开启授权的路径。
系统特性
主检查点。智能小程序移动端度APP环境内运行的,因此需兼顾移动设备特性(单任务、触摸屏、iOS、Android端差异),以及智能小程序特性(小程序框架、基础库版本)。
自查案例
“否使用了配小程序&内展的顶部导航栏?”
除去基础顶导航样,小程序支持自定义顶导航背景色、元素,可按需选用。
如图,“政务服务平台”小程序的众多页面中,普通的数据录入页面选用基础顶导航,信息展清晰合理;首页、专题运营页性化需求较强的页面,则选用自义顶导航,配合整体插画背景、标题置制,形的视觉效果,以凸显小程序风格调性、营造场景沉浸感。
自查表建好之后,如何日常作里真“用起”,不三天度后就束之高阁?《小程序走查表》从2角度解决这问题。
1. 内 – 结构清晰
作轻型设检验具,自查表的结构从逻辑视觉呈,都应该方便速遍历,因此《小程序走查表》的全部自查项使用 50 句式一致的问句呈,使用者只需检查无问题的条目标记完,即可完走查。
2. 形式 – 随取随用
方便取用,《小程序走查表》提供线、线下2版本:外部发者可使用小程序文档平台公的线版本,支持线勾选;团队内部设师多使用线下版本,一张打印出的单面A4纸,无需翻页,还可以根据需行标注。
自查表构不是劳永逸,我们需要在日常工作结合项目踩坑经验,补充新内容,将经常犯内容标记,让自查表随着设计师成长而成长。
回忆我们入行第一项目时遇到的问题,或许今天已不再问题了,自查表也如此,不断升级阶自查表的终极目标,不再依靠自查表,希望今天的分享可以给家一点思,建立切实可用的自查表,早日达到“手无表,中表”的境界。
注作者的微信公众号:「百度MEUX」