赞助商
立即赞助

大厂经验!四步教你打造「专属」交互设计自查表!

交互设计3年前 (2021)发布 流光
2.1K 0 0

什么是「设计自查」?

设自查设师常用的检验具,常以“自查表”形呈现,可以帮助我们快速遍历设计案,正遗漏或不。善用设计自查,不止可以避免在“设计评审”时被指出误尴尬,可以帮助设计师消除思考盲,系统化地锻炼与提升交互设计思维。

如何打造「专属」交互设计自查表

计查好多多,但谈起构建一个比较全面和完整的查表,多人顿千头万绪,因是交互计在产品中于一个交叉性非常的位置,功能性、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

大厂经验!四步教你打造「专属」交互设计自查表!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

如何为创意插上理性的翅膀,滴滴设计师和你一起回顾春节地图小车 icon 换装的设计全过程。 前言 新年刚过,元宵即临,开工...
交互设计
工程师法尔曼创造了第一个表情符号,使文字信息更准确的传达情绪,表情现已经成为了互联网沟通中不可或缺的元素。百度APP用户...
滑稽表情
你知道吗?按钮位置的设计会影响用户完成任务的速度。更快地完成任务会带来更满意的用户体验。如果你也想带给用户更满意的用...
交互设计
一、需求挖掘理论 需求挖掘是产品生命周期的启始阶段同时也贯穿了整个生命周期,一般包含了内部和外部挖掘。 1. 内部挖掘 ...
交互设计
什么是用户体验设计?有人说是可用性、易用性,有人说用户体验本质是实现商业价值,有人说是以用户为中心,解决用户需求问题...
Facebook 设计
现在,当你打开 Instagram、Airbnb、Apple Music、Twitter、Dropbox 这些应用的时候,乍一看很难区分清楚彼此的区别:带有圆...
App设计
写在前面 你们在日常工作中是否会有这样的思考,设计能给业务带来多大的价值?或者你从现在的工作中能够感受到多少价值?难道...
ui设计
移动端设计的质量好坏,其实并不难度量。当用户可以流畅轻松地使用,不用耗费精力便可以完成各种任务,这就说明APP或者网站的...
交互设计