长文解析｜九类交互状态的自查与设计

了解用户在各种场景下可能面对的交互状态，是UX设计师日常工作中的一项重要任务。

对这些状态进行全面、清晰的预判，对设计师尤其是新人设计师有两个方面的优势。

一个是有助于确保方案交付的完整，使产品更具可用性、易用性。登录前后或者不同网络环境下的体验诉求肯定是不同的，设计师需要关注到这些状态的存在，才能做出全面的设计布局，帮助用户从容应对多变的体验状况。

再一个，当产品开发完毕，进入走查环节，对各种交互状态的掌握，能够快速查漏补缺，发现潜在问题并进行修复，避免产品带着问题上线。尽管这些状态可能并非产品的核心功能，但这些琐碎的设计细节，对整体体验感知起到非常重要的兜底作用。及时、友好的状态设计，可以有效的降低用户负面情绪，逐渐建立起对产品的信任和信心。

以下，为大家全面梳理了9个大类下的共38个状态细节，并对每个交互状态的设计思考点进行了简单阐述，同时结合实际案例加深理解：

一、角色

1. 未登录/已登录

• 未登录：如何进行登录引导，判断哪些页面不可见、功能不可用

• 已登录：如何退出，入口放在哪，是否需要提示?

• 引导形式：气泡、内容模块、整页、弹窗、Snackbar

• 登录形式：弹窗、半浮层、整页

2. 新用户/老用户

• 新用户如何降低学习成本、快速上手？新手引导的形式，是否分步？如何退出？

• 是否需要收集用户信息，为内容推荐提供初始来源。用户标签收集信息有哪些？分几步？如何顺利完成，降低跳过率？

• 功能是否可以自定义？如何回到默认状态？

• 老用户如何体验更高效？是否需要提供快捷、个性化操作，快速进入任务状态？

3. 游客账号

• 游客身份下是否保存相关记录？保存的时效性？

• 什么时候引导用户注册/登录正常的帐号？如何引导？

• 登录后游客身份的资料信息如何处理？

4. 第三方账号

• 支持哪些平台的帐号？

• 与本地帐号整合时如何提示？帐号合并后资料信息如何处理？如何提示？

• 如何与平台账号解绑？

5. 普通用户/高级会员

• 普通用户与会员的差异是什么？流程、功能还是服务？

• 会员身份如何体现？（标识、颜色、文案等）

• 会员服务如何与普通服务区分？

• 如何引导转化？策略是什么？入口放在哪？

6. 内网/外网账号

• 需要向用户说明当前所处内外网环境

• 访问权限是依据用户账号还是访问地址？

• 外部用户可否访问？访问内容范围是什么？如何提示？

• 是否支持申请？申请流程如何设计？

7. 管理员账号

• 是否支持身份切换？入口放在哪？

• 身份标签如何展示？

二、网络

1. 网络中断

• 由于信号端、应用端等非用户原因，或主动关闭信号、切换至飞行模式等用户原因导致的网络中断

• 根据内容状态、内容类型选择合适的、反馈清晰的通知方式

2. 大流量消耗

• 看视频、玩游戏等大流量消耗场景，正式开始前进行提示

• 确认是否支持在平台内对流量提醒进行设置

3. 信号不佳/不稳定

• 信号不稳定不代表网络中断，只是较弱或连接不稳定，时连时断，对该状态进行提示

• 尤其是在线会议、观看视频等持续消耗流量的场景，用户需要对情况及时了解并做出反应

4. 流量形式切换

• 从wifi流量切换至移动数据时，进行toast提示

• 切换至WiFi时是否提示，可自行判断

三、内容

1. 没有内容

• 给出解释

• 避免中断用户体验，可进行操作引导

2. 敏感/违规内容

• 确定敏感、违规内容的范围，并按照相关规则、平台属性进行分类、定义

• 从产品各关联方进行考虑，如内容提供者、内容消费者、平台方

• 用户输入敏感词或违规内容时，是否需要提示？如何提示？

• 用户发布、分享的内容涉嫌违规时，如何进行提示？如有违规惩罚机制可一并告知

• 是否需要对内容违规部分进行精准提示？

• 用户浏览敏感内容、违规内容时如何进行提示？是否支持继续浏览？

3. 站外内容

• 跳转链接为站外内容，进行免责告知

四、设备

1. 横竖屏

• 适合横屏浏览的内容，进行友情提示，或为用户提供一键横屏操作

• 告知用户如何退出

2. 分辨率

• 是否有相应的适配规则

• 大概几种方式：保持页面不变，简单拉伸适配；居中显示，两边留白；保持页面框架，调整模块内的样式；重组页面布局

• 确定边界值、缩放内容，固定区域等信息

3. 清晰度

• 对分辨率切换状态进行告知

• 如果分辨率领先竞品，或是会员权益的一部分，可以对最高画质进行水印常驻提示

4. 不同版本

• 产品是否存在新旧版本、不同的模式（青少年模式、无障碍版/关怀版、听筒模式等）？

• 如果存在，差异点是什么？

• 对于较低版本的应用，如何进行升级引导？页面中是否需要提供升级的快捷入口？

• 升级后是否支持退回旧版本？有必要对升级情况进行提示

• 是否支持用户切换版本？如支持则提供切换的入口。另外切换时是否需要某种权限？避免误操作

• 不同系统间的版本差异

5. 硬件调用

• 场景：蓝牙、定位、相机、话筒、存储

• 是否需要获取权限？获取那些权限？

• 提示如何触发？（被动、主动）

• 调用状态是否需要实时显示？

6. 硬件联动

• 告诉用户接下来的操作需要与硬件进行联动、连接，并提供入口

• 连接过程中需要进行的操作？分步or单页or弹窗

• 连接状态如何？如何取消联动？

五、加载

1. 加载类型

全屏加载

• 一次性加载完所有数据后再显示内容

占位符加载

• 先加载框架，再加载框架内的内容

• 提前让用户知道整个界面的架构

• 降低用户的等待感

上拉加载

• 手势上拉，信息自动加载

• 加载形式：文字？icon？文字&icon

• 加载完成后是否需要提示？是否需要提示具体加载的结果？

• 每次加载多少？加载到最后时如何提示？

下拉加载

• 下拉后，整个页面重新加载刷新

• 加载形式：文字？icon？文字&icon？进度条？

• 刷新后是否需要提示？是否需要提示具体加载的结果？

局部加载

• 无需整页加载，仅局部进行加载

智能加载

• 判断当前网络环境，如网络较差，耗流量内容通过占位符展示，等网络变好后重新加载

• 判断当前网络环境，如为蜂窝网络，显示占位符，如为wifi，直接加载内容，帮助用户节省流量

2. 加载节点

加载前

• 确定加载策略，如上划至某个位置触发加载、上划至底部触发加载、点击按钮触发加载等

• 确定提示文案

加载中

• 提示形式：纯文字、文字+icon、纯icon

加载后

• 加载结束后是否需要提示？

• 如进行提示，是否需要对具体加载数进行说明？

• 提示位置

六、中断

1. 没有电

• 电量恢复后，是否支持恢复关机前相关页面？

• 是否需要对页面非正常关闭进行说明？

• 对未完成任务进行告知，提供快捷操作

2. 低电量

• 如当前功能对电量有一定要求，为保证体验效果，提醒用户及时充电

• 如有低电量模式服务，需要确定模式转化策略，什么情况变为低电量模式，什么时候取消？

• 低电量模式下，如何展示模式状态

• 是否支持设置服务自动关闭，避免手机电量过度消耗

3. 加载失败

• 加载失败的原因是什么？提示文案是什么？

• 尽可能提供重试的操作

4. 服务器异常

• 确定提示形式，弹窗or页面

• 如为页面提示，则提供刷新操作或回到首页/上一步等

5. 安装/下载/发布/连接等失败

• 确定提示文案

• 确定提示形式

• 不要中断用户体验，提供相应的跳转操作

七、特殊

1. 深色模式

• 梳理现有内容类型，确定显示策略，如降低信息与背景的对比度，对图片/图标进行遮罩

• 模式间如何切换？是否支持用户设置？跟随系统or手动选择

2. 沉浸模式

• 需要用户长时间聚焦浏览的信息，为了保障信息呈现的效率、效果，考虑是否提供沉浸模式选项

• 确定进入沉浸模式的策略，手动选择or系统自动

• 是否需要提示用户如何退出？

• 进入/退出如何平滑过渡？

3. 存在广告屏蔽插件

• 判断当前产品是否以广告作为主要收入来源，如果是，则要针对AdBlock等广告屏蔽插件设计相应的提示策略

八、操作

1. 输入

• 是否存在提示文案或默认值

• 如何处理不同输入状态，输入前、输入中、输入后、输入正确、输入错误、未填写

• 是否需要进行输入提示

• 确定键盘调起策略，自动触发输入后弹出or手动触发输入后弹出

• 如何处理键盘对内容的遮挡

• 输入内容是否需要保存？保存策略？

2. 点击

• 如何处理不同点击状态，默认、hover、点击、禁用、加载中

• 基于不同的作用，确定不同的按钮样式

3. 反复点击/恶意操作

• 为确保产品安全，确定防刷机制

• 判断哪些操作需要？如验证码、下单等反复提交

• 什么情况下进行限制？如控制点击次数、提交次数、点击日期等

• 如何进行提示？页面提示、toast提示等

4. 误操作

• 如果用户误操作会导致一定后果，则需要考虑如何避免误操作

• 提升操作成本，该方式需要慎重考虑，但仍然适用于某些“危险”场景

• 进行二次确认

• 用户实时录入的内容进行自动保存，避免丢失

• 支持撤销操作

九、限制

1. 极值

• 最大、最小、最多、最少等极值范围如何提示？

• 极限情况下的内容如何展示？

• 达到极值时是否需要进行提示？

2. 边界

• 判断产品与用户的互动过程是否存在边界限制？

• 边界如何提示或引导？

• 超过显示边界时如何处理？

3. 时间

• 时间要素是否存在限制，如何提示？

• 是否需要设置默认时间，最新or从零开始or中间值

• 是否需要预判用户所选时间的合理性，并进行提示

4. 地域

• 服务范围是否存在地域限制，如何告知？

• 当前位置是否在服务范围内，如果不在，如何提示？

以上就是九大类交互状态以及延伸出的38个状态细节，希望这份清单能为大家提供一些有价值的设计参考。其中每个状态下的设计思考点想到哪里就写到哪里，肯定是有遗漏的。这有待于大家深入设计场景，真实的去感受，通过不断的设计实践，形成完善的思考逻辑和应对策略。

此外，我建立了各大城市的产品交流群，想进群小伙伴加微信：chanpin626  我拉你进群。（加过微信：chanpin628或yw5201a1的别加，分享内容一样，有一个号就行）

视频号推荐

关注微信公众号：产品刘 可领取大礼包一份。

··················END··················

今日报告：中国信通院  发布《具身智能发展报告（2024年）》，下载报告去公众号：硬核刘大  后台回复“具身智能”，即可下载完整PDF文件。

申明：报告版权归 中国信通院 独家所有，此处仅限分享学习使用，如有侵权，请联系小编做删除处理。

RECOMMEND

推荐阅读

这种公司一开始就不要去！

分享一个数据产品经理的PRD

手把手教你做AI产品经理

面试一对一辅导

点击“阅读原文”

查看更多干货