把大象塞进冰箱需要几步?

01 始末缘由

在工作中不可避免地会处理不够明确的需求。过去,我习惯于清楚地列出待确认的问题清单,并找到上游或更高层次的统一确认,以方便下一步工作的完成。

在确认细节再开始实施。我暗暗喜欢这种做事方式可以减少设计返工,迫使业务方思考,审核真伪需求,但在这个过程中会错过更多:

  • 依靠他人的思考和结论,很难深入理解主体,不利于系统思维的形成;
  • 基于高精度内容创作,失去创新的可能性;
  • 等待反馈的过程本身降低了工作推广的效率。

就像面对把大象放在冰箱里需要几步才能完成的问题一样,根据我通常的处理方法,我会首先列出把大象放在冰箱里的困难,比如是否必须确保大象的生存?你能使用其他工具吗?冰箱能承受高负荷吗?在回答后开始设计计划。

跳出局限,事实上,把大象放进冰箱,只需要打开冰箱,放进大象,关闭冰箱这三个步骤。至于细分步骤和后续困难,我们不会跳出这三个步骤的框架。这就是解决这个问题的想法,我称之为大象冰箱。到目前为止,我已经开始将其应用于交互设计。

02 案例1:在表单中添加多个数据

配置页面是B端产品很常见。如果数据功能需要添加到同一系统的多个信息配置表中,字段数量、输入规则和用户偏好都不够清晰。如何设计?

1. 定义步骤框架

添加数据也可分为三个步骤:选择添加功能、输入数据和确认添加。对于这三个步骤,是否需要手动触发添加功能,数据输入是输入、选择还是查询,逐一确认或统一确认添加,是否支持删除修改,如何操作。

2. 搜索交互模式

下一步是围绕上述三个步骤找到既定范围内可供参考的设计模式,通常按照原系统中现有组件、历史方案和竞争产品用例的顺序进行。添加多个数据可以有以下模型:

  1. 直接输入,逐一确认添加:输入和添加操作方便;但修改需要删除或增加表格编辑状态,实际上增加了操作成本或开发成本;
  2. 同时添加多个数据:适合高级用户高效批量输入数据;但提示信息多,学习成本略高;
  3. 首先触发添加操作,然后输入数据,统一确认:增加和更改集成,添加和编辑非常快,适用于更多的数据输入操作;但统一提交数据容易造成数据查询和保存的压力;
  4. 触发添加操作后逐一添加:通用型最强,功能扩展方便;但触发Dialog或Popover生成支线任务,增加步骤;

把大象塞进冰箱需要几步?

3. 确认最佳方案

组件本身确实有自己的优缺点,但在特定阶段的不同使用场景中选择最佳。

结合产品的生命周期阶段、性质和团队现状,分析了组件最关键的三个维度:用户操作效率、前端开发成本和组件功能扩展。因此,最合适的解决方案是上述第四类需要添加数据时,触发操作,逐个添加,显示输入项目,并支持删除。

03 案例2:为支线任务选择交互组件

  • 弹窗套弹窗合适吗?
  • 浮层操作区这么小,容易误操作吗?
  • “提交成功总要有提示,跳个新页面吧。”
  • 弹出窗口打破了业务流程,用户最好在页面上完成所有任务。
  • “……”

最常被讨论的问题之一是弹出窗口系列。事实上,归结为如何在生成分支任务时设计人机交互界面。当有人问我如何处理这些问题时,我总是要详细询问需求的原因和后果、使用场景、观众特征等。为什么不试试大象冰箱的想法呢?

在Web在端系统中,如果有分支任务,通常可以使用浮动层/气泡卡、对话框、抽屉或打开新页面,弹出窗口和抽屉分为模式和非模式状态。这些交互模式的一般特征如下:

1. 气泡卡片

一般来说,它可以容纳较少的信息量,但轻量级的风格和交互模式对主任务干扰较弱,适用于信息提示、简单确认和操作的扩展内容。

2. 对话框

对话框一般是覆盖模式弹出窗口,需要重点完成子任务,如填写表格和电子邮件。弹出窗口的内容相对自由,弹出窗口的大小可以根据信息量进行调整。

3. 抽屉

抽屉可以是模式或非模式。当需要与原始页面进行比较和检查或操作时,可以选择非模式;当需要沉浸式完成分支任务时,选择模式抽屉。抽屉占据较大的页面空间,适用于填写和安排大量信息。

4. 新页面

分支任务的权重等于甚至大于主任务,分支任务的操作更多。您可以考虑打开新页面,并提供面包屑或返回按钮返回原始任务。例如,新的营销活动包括多个步骤的长表格。

对几种常用模式的特点和应用场景了然于胸时,便可以整理出一份使用策略单。

把大象塞进冰箱需要几步?

  • 当支线任务权重较大时,可考虑新页面处理。
  • 一般情况下,气泡、对话框或抽屉可根据支线任务内容选择。
  • 抽屉可以包含更多的信息,需要与上级页面进行比较。
  • 当需要关注分支任务本身时,可以使用对话框和模型抽屉,并考虑产品设计的一致性。建议选择抽屉,因为抽屉可扩展性更强,支持多层抽屉,解决弹出窗套弹出窗的问题。

04 最后

通过碎片化的信息内容,不仅可以挖掘更深层次的需求本体,还可以制定战略方向,培养系统思维。设计规范和交互组件库是利用这种思维方式将文本、icon、从分子、控件和业务组件到最小颗粒原子的颜色定义。

细节不容小觑。打开模式,看清本质尤为重要。有句话叫从行业的角度看行业,从行业的角度看企业,这就是意思。

相关新闻

联系我们

联系我们

888-888-8888

在线咨询:点击这里给我发消息

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部