不可否认（浓雾，黑帕云这样的商品几乎采用了所有类型 B 端模块。

由于目标公司结构设计天然资源有限，所以在保有了模块库、结构雕塑家定下了结构导则后，做为商品副经理就直接能手撸结构设计稿了。

做为两个长大成人了的商品副经理，有时没天然资源给你做可视化没天然资源给你画 UI 的，你要自己专业委员会自给。

那个系列产品就是做为商品副经理的我，在这一年中“自给”做结构设计的许多归纳与辨认出。

自给的大前提是，前面说的模块库和结构导则，即保有一个结构设计管理体系（Design System）。

01 什么是结构设计管理体系？

关于结构设计管理体系的表述和内容每家都不同，我找出来了下列事例附注。

Tilio（两个诗歌创作和讲义应用）联合创办人，有二十年 UX 结构设计经验的塔拉·克尔马托娃在《结构设计管理体系：位数商品结构设计的体系化方式》一书中这么表述：

结构设计管理体系是为了实现位数商品的目地而组织起来的两套互相关连的商业模式和共享资源课堂教学。商业模式指的是介面中那些多次重复的基本要素：使用者业务流程、可视化方式、按键、类型信息、工具栏、色调、排印、美术设计，等等。课堂教学则是我们如何建立、捕捉、共享资源和采用那些商业模式，尤其是在项目组协同时做那些事情的方式。

书上将结构设计管理体系分为下列几个部分：结构设计目地、结构设计原则、模块库、式样手册，以及用于提高结构雕塑家和开发者沟通交流工作效率的工作业务流程和VirtualDub。

重新整理后，能参照右图：

2. Salesforce：Lightning Design System

能辨认出，以上结构设计管理体系无论如何表述概念，都是由结构设计原则+结构设计手册+许多基础的元素（比如 Design Token、Material Foundation、Icons）+模块库+其他天然资源工具构成。

形成那些内容的目地都是为了给自己商品建立两套保证结构设计质量、提升结构设计决策、提升沟通交流工作效率的“工具包”，从而让商品形成自己的符合结构设计原则的风格。

所以结构设计管理体系是什么不重要，重要的是如何在遵循结构设计原则下，能够高效做出高质量的结构设计。

02 结构设计原则（Design Principes）

两个开源结构设计原则和方式的网站 Design Principle这样表述结构设计原则：Design Principles are a set of considerations that form the basis of any good product.

译为“结构设计原则是构成任何好商品的两套基础考虑因素。”

比如 Salesforce 的结构设计原则是：清晰、高效、一致、美观。并且优先级由前到后。

能理解为 Salesforce 会追求清晰大于高效、一致、美观，比如在商品结构设计中，让使用者清楚的看到、理解、自信地去操作要比任何事情都要重要。

那个准则很容易理解，能推论出 Salesforce 在度量体验时，将“易用性”放在了第一位，即做为两个 SaaS 商品，不能有任何让使用者产生疑惑的地方。如果在结构设计上的美观而要牺牲清晰，这就是不可取的。

03 模块库

有了结构设计原则后，下一步是需要两个模块库。这里说的模块库囊括了无论是原子化的颜色、字体、阴影、Icon 那些基本的元素，还包括了已经封装好的模块，如 Button、Alert、Toast、Text Input。

关于为什么要模块化，也不多说了，之前看过一篇阅文体验结构设计 YUX 的《模块化思维—— 适应并推动业务及商品变革的结构设计事例》写得非常清楚。

接下来我通过 Minecraft 那个游戏来归纳了模块库。

玩过生存模拟类游戏大家都知道，在游戏中会有许多能靠双手劳动得来的基础材料，比如砍树砍来的木头、地上捡的石头、挖矿挖的燧石。那些基础材料能合成许多简单处理过的材料，比如把木头合成为木板。然后能再把半成品进一步加工，比如木棍。

在 Minecraft 那个游戏中，如果玩家要制造两个弓箭，需要两个弓和两个箭。弓和箭的合成又需要许多半成品和成品或者原材料来加工制作，如右图：

对应在结构设计模块库中能对照查看，两个完整的页面是能通过许多元素、控件、模块、大模块组成：

04 适用人群

关于 「B 端结构设计归纳」这一系列产品，主要是我个人在已有了我们的结构导则和模块库后，“自给自足”的情况下探索出来的许多模块采用规则，更偏向商品副经理或者可视化结构雕塑家来参照。

所以系列产品中不会写结构导则，比如说字号、颜色、间距等等那些属于结构导则中内容。而是基于已有的规范，归纳之前我们功能中涉及到的该采用哪些模块，也能称之为狭义上的结构设计手册（Design Guidelines）或者结构设计商业模式（Design Patterns）。

05 结构设计原则 Design Principes

正式开始之前，想重新整理两个合格的结构设计应该有哪些方面的考量因素，这样能够帮助我们在做结构设计时，尽大可能地保证结构设计的质量。

在前言中提到结构设计原则，采用了 Salesforce 做为事例介绍了他们的结构设计原则是：清晰、高效、一致、美观。

但这更像是宏观层面的品牌原则，不仅是结构设计，而是覆盖在方方面面传递给使用者的感知。

而国内的结构设计项目组，会把结构设计原则落实在细节。这也更通用、更加能指导结构设计执行。

比如腾讯云的 Element UI 的结构设计原则是：

京东的 LEGAO Design 的结构设计原则是：一致性、可控性、秩序性、提高工作效率、及时反馈、简洁美观、宽容性。

这两个结构设计项目组给出的结构设计原则都包含了一致、反馈、工作效率、可控，LEGAO Design 在基础上增加了秩序性、简洁美观和宽容性。

在 LEGAO Design 的结构设计原则中有非常详尽的举例和说明，在此就不搬运了，建议像我一样没结构设计基础的商品副经理同学仔细学习。

说点儿不同的。

其中 Element Design 和 LEGAO Design 的“可控”稍有不同，Element Design 的可控包含两个方面：

LEGAO Design 在此基础上将“使用者决策”和“结果可控”结合在一起，认为在危险操作或者破坏性操作需要提前告知使用者，并且应该要提供撤销、回退和终止等操作。

另外还对“可控”增加了“进度可控”：清晰地告知使用者当前处在系统的什么位置，从哪里来，能到哪里去。比如提供清晰便捷的导航方式，非必要条件下导航各个标签权重保持一致，不要因为差异化对使用者产生选择性干扰。

此外， LEGAO Design 在可控的基础上，格外增加了“宽容性”，声明应当允许使用者犯错：

结构设计应该是帮助使用者避免犯错，当危险发生时能保护使用者免受伤害。宽容性结构设计是通过约束和良好的功能可见性来防止错误的发生，能提示潜在的危险，当某一选择能带来伤害时会要求先确认后执行。宽容性结构设计允许错误发生时的动作可逆性操作。

在《可视化结构设计精髓中》也单独列了一章来讲“防止错误，通知决定”。

没人能够保证所有的结构设计都是“清晰”（Salesforce 的 Design Principe）的，即便是结构设计是清晰的，也会有意外的情况。所以好的结构设计应该是清晰，并且允许使用者犯错的。

容错处理能够在心理上暗示鼓励使用者安心地多去探索你的商品。

而在许多情况上，容错处理有较大的成本，还来不及进入开发，这时应该换一种思路：我们需要尽可能地拦截错误的发生（这一部分见文末的小节「危险提示 Danger Alert」）。

结构设计原则说的差不多了，下面开始那个系列产品的正文。

06 逻辑系统框 Modal

在写什么是逻辑系统页面（Modal Dialog）之前，先来写写逻辑系统框（Modal）和页面（Dialog）。

逻辑系统框一词最早是从技术同事那听来的，因为我那会儿一直管那些叫弹框，事实也确实是如此。

在维基百科中这么表述：

In user interface design for computer applications, a modal window is a graphical control element subordinate to an application’s main window.

A modal window creates amodethat disables the main window but keeps it visible, with the modal window as achild windowin front of it. Users must interact with the modal window before they can return to theparentapplication. This avoids interrupting theworkflowon the main window. Modal windows are sometimes calledheavy windowsormodal dialogsbecause they often display adialog box.

不专业地翻译一下：

在应用程序的可视化结构设计中，逻辑系统窗口是两个从属于主窗口的图形控制元素。

两个逻辑系统窗口建立后，主窗口就失效了，但仍然保持可见。逻辑系统窗口能够做为两个子窗口在主窗口的前面。此时使用者必须先与逻辑系统窗口进行可视化，才能返回到父窗口。这避免了中断主窗口的工作业务流程，逻辑系统窗口有时也被称为重窗口（？）或者逻辑系统页面，因为他们经常以页面形式展示。

在两个 React UI框架 Material-UI中这么描述逻辑系统框：

“逻辑系统框”（Modal）那个词有时也被用来指代“页面”，但是这种用法属于误用。逻辑系统框的窗口描述了 UI 的一部分。如果两个元素阻挡了使用者与应用的其它部分的互动，那个元素就是逻辑系统的。

简单归纳就是：当那个逻辑系统框被打开后，当前的所有进程都被阻断了，直到那个逻辑系统框关闭。

基于上述的表述，归纳逻辑系统框常见的类型能有下列几种：

注意：那些类型不代表只属于逻辑系统，也能以非逻辑系统形式存在。

07 页面 Dialog

第一次接触“Dialog”那个词还是在《可视化结构设计精髓》中，书中给了很明确的概念：页面以对话的方式让采用者参与进来，在页面中它给出消息或要求输入。

页面又能分为逻辑系统（Modal）和非逻辑系统（Modeless）两种类型。

逻辑系统框在前面已经描述过了，与之相反的就是非逻辑系统：当非逻辑系统页面被打开后，使用者能运行其他事情。

关于为什么要采用逻辑系统页面这种类型，简单快速地能采用这样的决策原则：有重要的信息需要来阻断当前的进程，希望使用者必须完成操作后才能继续往下进行。

08 逻辑系统页面 Modal Dialog

这篇文章主要写我们常用的逻辑系统页面。

在《可视化结构设计精髓》中，将逻辑系统页面按照“目地导向”分为五种类型：

因为书中也没具体举例，所以我接下来会按照这五种类型列举在黑帕云中的页面示例。

属性页面常见在许多设置、详情中，比如电脑的系统设置、黑帕云的小模块配置。

那个页面通常由许多复杂的设置项构成。这种页面适用于许多不太频繁的操作。

功能对话框通常在菜单或者某个具体的按键打开，页面中有许多对接下来那个功能事件的设置，这种页面通常都会有两个[下一步]或者[确定]的主按键（Primary Boutton）用来确认设置、关闭页面并且执行功能。

另外成对出现的还会有[取消]按键。

这种页面向使用者表明正在忙于某些内部的功能，其他处理能力可能会降低。

在许多耗时较长的进度页面中，还应该有下列信息：

上图的例子中，macOS 软件更新中的取消进程是在 hover 进度条时出现了“×”，代表能取消下载。

黑帕云中批量编辑由于耗时较短（通常情况下小于 10 秒），在使用者等待感知的范围内，只需告知操作正在进行中，一切正常即可，无需提供详尽的进度信息。

常见的有通知中心页面，处理完成某个操作的告知等等。

公告页面也是由程序自动启动的。包含三种类型：错误、警告、确认。

这种页面通常不会要求使用者填写什么，只会询问你“真的要进行吗？”或者告诉你一件事情。

所以在这种页面上，一般只会有只有[取消]和[确认]，或者[OK]。

这种页面比较特殊，因为没一般页面的 Header 和关闭按键。 的框架，他们把这种类型的页面直接做成一种模块，命名为警告页面（Alert）。

我之前犯的错误就是用这种页面承载了两个功能性的操作页面。

当时是在做“复制应用”那个功能，需要两个页面来承载复制的应用时是否复制应用中的数据。能理解为，复制两个文档时，只复制那个文档的目录结构做为模板，还是连同文档内容一起复制。

当时不了解功能页面和公告页面的区别，所以直接用 Alert 模块这样画图：

09 危险提示 Danger Alert

前面在结构设计原则中提到了“容错处理”，在这一小节也详细写一写曾经被教育过的经历。

在很多破坏性的操作都会二次进行提醒，让使用者确认操作，比如说删除操作。在删除之前都会询问使用者“你真的要删除吗？”

想一想……你在看到那些提示的时候，是不是眼疾手快地按下那个[确认]按键？

在《可视化结构设计精髓》中有一节把这样的行为叫“大喊‘狼来了’的页面”。

所以这种页面在没容错处理时，非常容易被我们这种无脑按[确认]的使用者酿成大错。比如我手贱只是试试那个删除，然后就把某个表几千条辛苦写了两个月的数据删掉了。

所以，如果没撤回或者回收站之类的功能的话，我会非常崩溃……然后联系商品的客服人员找某个倒霉的运维大哥帮我在数据库恢复数据。

你看容错处理多重要，有效帮助运维大哥延年益寿。

如果商品本身已经具备了容错能力，听起来喊“狼来了”的危险提示似乎不是必要的？

是的。我们在 macOS 中删除文件时，没任何提示，直接被删掉。在邮箱删除邮件时，一样没任何提示。

因为你知道能在用 CMD+Z 进行撤回，也能在回收站找到它们。

但是，如果商品还来不及做回收站或者撤回时，你不得不想点别的办法让删除确认变得不那么“狼来了”。

两个傻瓜但是有作用的办法是让删除确认增加一点成本：

自从我们研发老哥哥花了 5 分钟做了那个输入验证的功能后，误删应用、误删业务表的使用者来找我们的次数直接断崖式下降到了 0。

10 写在最后

那个系列产品会写的比较随意，大概会按照我觉得哪些容易写就会先写。

在完结后，再根据常见的结构再进行梳理。

下一篇不出意外的话会写输入和选择控件（Entry&Selection Control），包含常见的文字输入（Text Input）、选择输入（Select Input）、日期输入（Date Input）、单选输入（Radio Input）、多选输入（CheckBox Input）、开关输入（Switch Input）。

责任编辑由 @高拉 原创发布于人人都是商品副经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是商品副经理平台仅提供信息存储空间服务。