Design Pattern 实例 - 用户通知与中断

Design Pattern 实例 - 用户通知与中断

5key5key

前面几期我们将 Design System 中最重要的几个概念都分别介绍讲解了一遍,这些也是与设计最有关联的部分,所以我也顺便对前面的内容做了一些总结。

这一个多月来也陆续收到了不少会员同学的反馈,其中对于功能 Pattern 部分问题最为突出。

而在功能 Pattern 方面疑问最多在如何去定义一个解决问题的 Pattern , 思考角度如何出发,应该以什么样的方式去展现 Pattern 的方案。

正如我们在 Pattern 那期(94期)所聊到的,Pattern 的创建是建立在对问题的总结和对方法的抽象上的,这确实需要我们很多的前期思考和准备才能开始。

所以本期周刊我们将找一个具体的实例进行展开,详细的讲解如何去定义一个解决问题的 Pattern。


发现问题

Pattern 是建立在问题的基础上的,在 94 期中我们用 Confirmation & Acknowledgement (确认与知会)作为案例讲解了功能 Pattern,为了保持延续我们今天继续以这个案例来进行展开。

Confirmation & Acknowledgement (确认与知会),最通俗的理解系统告知用户信息或者请求用户进行操作。

说到这一点相信每个设计师都能说出一些具体的解决方案。比如下图中的 Pop Layer、Alert 、Toast 等…

当我们将它挪到一个具体的产品使用场景中,问题就出现了:

  • 在产品设计中对于用户的信息告知与操作请求有好多种展现形式,我当前的这个需求应该选哪一个?
  • 有两个类似的 pop layer 设计形式,第一个能点击空白区域关闭,第二个不能,我应该选哪一个?
  • 现有的设计形式都不满足我的这个需求,我是不是再增加一个?

这些在日常设计工作中的问题还会给我们带来更多实际的影响,各种不同的设计让用户每次都需要一定的学习成本,开发团队也在不停的为新功能重新开发一遍,设计师、工程师、用户都会很难受。

有经验的同学在这里可能已经发现,上面这些现状的出现可能其实并不在需求本身,而是对应支持的这部分底层设计并没有一个清晰的逻辑和通用解决方案。

所以想要真正的解决这个问题,我们还需要先回到最开始,先去找寻问题的本质。


识别问题本质

我们在之前有提到过,Pattern 是一系列 Components 或 Patterns 的组合,为一系列问题提供全局通用的解决方案。

所以这里所提到的问题本质并不是业务上的某个具体需求,而是基于它们进行抽象所得出的问题本质。

我们先找一个真实的情境进行一次还原。当我们需要银行办理业务时,我们会与柜台上的工作人员有一次沟通。

整个沟通过程会有若干次给予用户的信息反馈,有些是告知用户、有些是需要用户进行确认或是密码输入。

对于银行这样一个有严格制度的行业来说,这些询问、确认的步骤显然不是工作人员随意的行为,这背后会有一张逻辑清晰的表格对信息的重要度进行分级以及对应的操作行为。

沿着 Perceptual Patterns 的思路,我们可以继续将产品比作一个“人”,它要和用户传递什么信息、要求用户做什么操作也是可以像银行一样进行一次抽象和梳理的。

回到 Confirmation & Acknowledgement (确认与知会)本身,我们其实要解决的是一套基于信息整理、重要度划分以及对应设计方案提供的整体解决思路。

将所有可能出现的信息类型进行归纳并对应到不同的重要度优先级中,每一个优先级对应一种(或多种)设计解决方案,对于每个解决方案提供相应的展现形式及可提供的交互操作。这一整套设计方案就是我们针对「用户信息的确认与知会」的 Design Patterns。


思路推导

基于这个思路,我们可以将产品系统中相关的具体实例找出来进行一次归纳总结,最终我们可能会得到这样一张表格。

在完成思路的推导之前,我们这里先不去讨论具体的设计形式,继续保持关乎在问题的本质上。 站在全局的角度上来看,无论什么具体的信息,我们都能对它进行一个等级的划分,这里的高、中、低三挡基本已经能够满足大部分产品的需求。

在前面银行的案例中,如果我们要取钱,工作人员一定会核对你的密码信息,否则该流程就无法继续进行。

对应到我们的思路中也一样,如果用户在非登录状态下决定下单购买一个商品,那么系统一定会要验证用户的账号信息。

由于这是流程继续的必须前置条件,所以在“力度”层面上,系统会强制插入一个界面中断用户当前的流程且不能被忽略。

依照这个逻辑,我们将业务场景中需要传递给用户的信息类型归入到这三个不同的重要度优先级中。以后每次有新的需求我们都可以先参考一下这张表格,看看它应该属于哪一档。

以上是 Design System 系列的第 6 期的节选内容,在余下的全文内容中(付费部分)我们将开始针对不同述求进行设计方案的选型及使用的规则定义,推导解决「用户通知与中断」这个问题的整体设计 Pattern。

加入 PinDesign 会员,获取本期主题「Design Pattern 实例 - 用户通知与中断」的全文内容及本系列前 2 期周刊的赠送。

Design System 是 PinDesign 周刊的一个新系列,基于「Design Systems」这本书结构框架的读书笔记和经验总结。希望将自己的感受和经验分享给大家,辅助大家的阅读。

点击领取 PinDesign 会员计划 50 元优惠券

Design System 系列已更新:

5key:什么是 Design Systemzhuanlan.zhihu.com图标5key:Design Systems 02 - 什么是 Design Principleszhuanlan.zhihu.com图标5key:Components 与 Patterns 究竟有什么区别zhuanlan.zhihu.com图标5key:你该为产品设计怎样的气质zhuanlan.zhihu.com图标5key:Design System 中的 Design Tokenzhuanlan.zhihu.com图标5key:Design Pattern 实例 - 用户通知与中断zhuanlan.zhihu.com图标5key:Design Pattern 组合实例 - 列表页设计思考zhuanlan.zhihu.com图标

点击下方链接,了解 PinDesign 会员计划详细信息:

PinDesign 互联网产品设计周刊wap.youzan.com

文章被以下专栏收录
还没有评论