编辑导语：原型设计量化有助于更加清晰地输出信息，推动团队后续做出有效决策、并展示最终方案的设计成果及影响力。那么，我们应当从哪些角度切入进行原型设计的量化？本篇文章里，作者对原型设计量化问题进行了总结并解读，一起来看一下。

大家好，上一期我讲了“浅谈原型设计中配备的原型交互规格说明书（DRD）”，结合上期的内容，这期咱们以“原型设计具体量化问题的解读” 为课题来进行探讨。

很多产品经理或者设计师认为，设计是无法彻底被量化的。这很容易理解，设计本身包含了主观、情感、创意等人性化的东西，它们看起来和冷冰冰的数据难以直接联系起来。

更有人认为用数据量化设计是对设计的不尊重和不理解，因为设计这么深奥的事物，天然就该被用情怀去感悟，而非用理性粗暴的数字来衡量。

在以往“以用户为中心”的设计时代，这样认为无可厚非；但在现在这个追求高效的增长新时代，问题就来了。

管理大师彼得德鲁克说过一句至理名言：没有量化，就没有增长！

这次主要围绕什么是原型设计的量化、原型设计量化的切入点分析进行阐述。

最后会根据我原先所做的原型案例进行演示和简单的讲解。

从用户体验的角度，我们有很多方式去衡量设计合理与否。

• Google Analytics 事件、细分、路径、渠道视图；
• A/B test、增长实验测试；
• 问卷量化；
• Fakedoor testing；
• 定量可用性测试 （Benchmarking）；
• 偏好测试（Desirability Studies）；
• 卡片分类；
• 眼动实验；
• ……

有的时候即使得到了这些量化的数据，也会在必要时为业务让路。因为无法衡量商业影响，所以很容易一直妥协。今天想从广义的量化出发，着重从商业角度，谈一谈用户体验与商业目标的关联。

一、什么是原型设计的量化

为什么要量化设计呢？说白了就是让你的客户、上司、老板清楚地了解你做设计需要多少时间，为什么要这么多时间，值不值这么多钱。

就像软件开发们做CMMI一样，他们需要的是一个衡量的指标，一个可控的管理，而不是盲目地按照主观意识来评判。

所以说，我们要量化设计，最终目的还是为了说服他们，因为我们清楚地知道，设计更多的是一种脑力劳动，设计需要灵感、需要创意、需要自由的空间，设计很难通过什么来衡量。

设计是无止境的，设计的价值不只是通过工具操作的快慢来衡量。设计一枚图标，你可以用10分钟、10小时甚至10天，但产出的质量是相差甚远的。

所以，我们可以尝试进行“模糊式”的量化，通过收集以往工作的案例再加上工作经验的衡量，划分不同的设计级别，明确地告知客户、上司、老板，你需要的是哪种级别的设计。这样的话，我们能对设计做出一个最基本的“量化”。

设计中的某个部分或者说某个分支是可以量化的，像一些常规性的业务或是机械性的操作，比如Newsletter、EDM等等的工作，它们创意性的内容比较少，是有规律可循的，需要我们慢慢梳理和总结，最终通过规范性的文档和指南再结合设计人员自身的能力，我们能够找到一个合适的点。

通过分解设计进行各个击破，一个设计的组成必然是很多元素的组合，我一直认为设计应该是一个整体不能单独进行判断，但是为了将设计进行量化，我们可能不得不进行这样的分解工作，先将可以量化的进行处理，比如一个Banner或是一个图标，再对剩余的部分进行整体的衡量。虽然不可能达到完全量化，但是在一定层面上它是可行的，是有一定说服力的。

在互联网公司工作的产品经理和设计师，那么设计大多都是围绕商业目标来的。哪怕有些公司走着情怀路线，倡导以用户为中心的理念，宣传设计文化，也存在着隐性逻辑链：因为有了很好的文化，我们才能花更少的钱招到更优秀的人才，提高公司生产力。

现阶段科技界的价值观越来越趋近高压化，功利化，关注既得利益，我们总会被问到一个头秃的问题：你的设计做的那么好，该如何量化呢？

1. 原型设计量化的目的

上面那个例子就是A观众的主观态度太过强硬，基本逻辑无法将他说服，只能通过量化的手段，把铁一样的事实或者数据呈现在他面前，让他不得不抛开主观，面对事实。

设计的量化有对内和对外，对内是帮助自我迭代，对外是引导观众的认同。

也可以这样表述，设计量化有两种目的，一个是引导决策，一个是展示结果和影响力。

1）引导决策

引导决策表现在通过一系列方法得出一些纯粹的数据或信息，依靠个人或者团队达成的一致，有效地做出决策，推动项目前进。

例如说可用性测试的评估，不同类型用户对产品可用性进行打分，直观得出不同方案的好坏，选择最优解。但类似的量化只对内部决策的效用更大。

“内部”指的是什么呢，内部是一群建立了共同价值观或者设计原则的人：你们有共同的语言，你们对可用性有着广泛的接受，你们心中承认一系列设计方法的重要性。

问题是，我虽然把体验做到了极致，可用性上升了，然后呢，能给公司带来什么？如何说服非专业的人？如果用户体验的价值观没有被提升上来，我们总会面临着被挑战的风险。

所以整个科技界似乎达成了一个共识——数据。通过数据发现问题，找到原因，提供解决方案，带动商业影响，似乎成为了一个万金油逻辑。数据驱动也是近年来一个决策引导的趋势。

2）衡量最终成果和影响力

设计的方案要有始有终，在衡量结果影响力的时候，我们为了把成绩表达地干脆有力，会在“专业度价值”和“商业指标”上下功夫，经常被衡量的维度有：

• 帮助公司挣了多少钱；
• 对社区有什么影响力；
• 用户满意度提升了多少；
• 是否增进了团队的设计资产；
• 其他核心指标提升了多少。

强调“范式”一样的“专业度价值“，是产品经理和设计师这个工种与生俱来的价值体现，例如你对accessibility、localization理解等等。别人要是拿这个跟你杠那就是杠精了，你大可以让它 Shut up 不奉陪了。专业度价值可以通过自己的专业技能和上文中的一系列UX评估方法获得。

在商业指标方面，其实在项目刚开始，健康的流程里团队已经确定了什么是北极星指标、次要指标、相反指标。作为产品经理和设计师，我似乎只要支持业务就好了。但是很多纯用户体验上的决策，我该怎么推动，产品体验被各个业务方夹击搞得支离破碎我该怎么办，如何让你的设计向商业指标靠拢呢，这是一个让人头疼的问题。

2. 原型设计的量化主要建立一些观点

1）建立基准

如果要很好地通过数据衡量设计价值，那么方案一定不可以草草上线。从数据分析的角度，确保当前产品有一个干净的基准（baseline）。

举个例子来讲，我最近设计了一个全新的流程，面向的用户有A，B，C三种，设计直觉告诉我其中群组A可能需要特殊对待，于是我想快速把它个性化。

和分析师交流后，我们对群组A的个性化没有100%的信心，所以决定先把统一的体验展示给所有用户，当作一个基准，下一步再进行有针对性地优化。如果一开始就有差别对待，那么最后得出的数据也没有什么价值，也无法衡量A组个性化的设计是否合理。

2）建立因果性

作为设计师，设计是你的专业价值，认为UX优化很重要，但为什么就是没人重视呢？大家都告诉你要有商业头脑，不要太理想。

大家都告诉你要有商业头脑，在设计方面不要太理想。这样的想法很容易让自己陷入自闭。体验在贡献商业价值上被远远低估了，是因为我们没有建立一种用户体验和商业贡献的因果关系，所以这些直觉上需要改进的东西从未提上日程。

3. 量化中的精益闭环方法

对于原型设计因为无法被彻底量化，导致我们很难具体评估设计的好坏、很难证明设计对公司的影响及价值、自身也很难取得实质的成长。在这种情况下，经验与眼花缭乱的方法论逐渐成为了证明自身能力的砝码，限制住了很多有潜力有灵气的产品经理和设计师。

其实设计真的不能被量化吗？不是不能，而是非常的难！仅仅一个简单的界面，都会涉及到数不清的因素（文案、排版、颜色、样式……每一个因素都会对最终的数据表现产生影响），更别提一个完整的流程或是一套改版方案。

就好像大象难以被称量体重，不是因为技术的原因，而是现成的体重秤负荷不了这样大的体量，但我们又没有必要为了称量大象而做一个专门的体重秤。

既然体重秤不能变大，我们就只有把大象“变小”。曹冲就是因为把大象“分解”成一堆等重量的石块，聪明的解决了称量大象体重这个看似不可能的问题。也就是说，设计增长的核心在于量化，量化的核心在于分解。而“分解”是精益闭环方法中的重要组成部分。

指标与产品核心价值相关，指标可以进行量化，驱动指标提升，方向清晰，提升原因明确，成果可复制，可持续提升，驱动创新。

4. 具体如何分解

如果把设计对象比喻成一个房子，那么我们优化流程时可以根据场景把完整的流程拆分成若干段（横向分解）。

优化信息结构时可以拆分成若干个模块（纵向分解）。

优化单一页面时可以拆分成若干个变量（平面分解）。

拆分的颗粒度取决于产品所处的成长阶段以及设计方案的体量。

拆分后你就会发现，整体的数据也许不好（毕竟谁也无法保证每次设计优化后数据都能提升，也无法保证数据可以持续不断地提升），但是某一部分的数据也许还不错，而另一部分数据不好，导致整体没什么变化。这样我们就可以针对数据不好的那部分进一步改进提升。

这就好像曹冲称象，如果你一下子解决不了一个很大的问题，那我们就把它拆解成一个个小问题，逐个击破。这样就可以保证持续性的增长！

首先把页面分解成不同区域，逐个优化，其它部分保持不变，通过AB测试看效果，转化率立刻提升了30%。

紧接着我们又把页面进行更细的拆分，逐个优化变量（文字、颜色、图标等），转化率提升8%。

通过这种方式，不仅数据可以持续提升（传统的方式也许可以提升，但很难做到长期持续提升），且由于每次都在做变量测试，所以优秀的结果是可以复用的，比如垂直的布局方式更好，蓝色比红色好，大字比小字好……这样大幅提升了效率！

二、原型设计的量化问题分析

当今互联网产品涉及社会生活的方方面面，各行各业在长期的社会服务过程中也逐渐形成了独有的商业模式和行业特征。

由于行业中的企业属性（如服务地区、企业规模、发展方向、业务规则等）不同，即便是相同的产品形态，也会存在各种差异化的需求。并且这些企业在其所在领域经营多年，对用户的影响力是极其长远的。因此我们在处理这些行业产品设计的过程中，并不是一味地去颠覆原有的产品形态或模式，而是需要找到解决差异化带来的设计问题。

既然差异化有其存在的合理性和必然性，在设计时我们就不可避免地会遇到诸如“需求看起来很像但又不完全相同”“难以找到一种方案解决多个相似需求”的问题，致使设计周期变长，而过程中的重复性工作片段又很多，设计效率不高。

原型设计的量化的核心是“分解”，我们可以通过模块化的设计思维来解读“分解”的意义，这样利用模块化设计就可以在差异化和高效率之间寻求一个平衡点的方式。

1. 什么是模块化设计

广义上的模块化设计是指在对一定范围内的不同功能或相同功能不同性能、不同规格的产品进行功能分析的基础上，划分并设计出一系列功能模块，通过模块的选择和组合构成不同产品的设计方法。

模块化设计已广泛应用于工业制造及计算机软件行业内。如大众汽车的MQB平台是典型的模块化设计应用，通过通用模块复用及不同模块的互换组合，大大节省了不同车型的制造成本。大众高尔夫和奥迪TT都可以共线生产，共享部件。

对于产品体验设计而言，模块化设计可以将产品流程、信息结构、交互方式、表现形式等产品组成要素模块化。

模块不是死板的、一成不变的，而是在一定的合理阈值范围内可以完整表达一个产品要素或者产品要素的集合。

一个功能可以称为一个模块，一个系统也可以称为一个模块。

通过相同模块的复用，可减少再设计成本；而通过模块间的组合及互换，可以满足差异化的需求。在保障良好的体验延续性的同时，缩短设计周期，提高设计效率。

2. 模块化设计方法

模块化设计方法主要分为“模块划分—模块设计—模块组合”3个设计阶段，对应产品视角从宏观到微观，再回到宏观的发展过程。

1）模块划分

将完整的用户路径进行拆分，并按照解决的用户问题进行重新归类。

拆分归类，实质上是帮助我们摆脱固有业务模式带来的束缚，进而从更接近用户本身诉求的角度出发，对需求进行二次解构的过程。

2）模块设计

接下来我们就需要根据每个模块所需要实现的用户目标或传达的信息内容，分别进行设计。

3）模块组合

如果说模块的划分和设计是播种生长的话，那么模块的组合就是最后的收获了。

通过通用模块，我们可以搭建出产品的核心结构。

这可以保证用户核心体验的一致性。

3. 模块的划分描述

模块拆分的时候往往会出现一些疑惑的问题，比如应该怎么拆，要拆多细？我们在设计中经常会沉淀一些“设计规范、设计控件”，那么模块与控件有什么区别？

设计控件通常是以页面基础元素作为粒度，如字体、按钮、输入框等，主要是保障这些基础元素的表现层一致性。而模块的粒度没有固定的说法，一般会比控件来得更大，可以是一组控件的组合，也可以是一组页面的组合，并赋予其解决某一问题、实现某一功能的能力。

控件与模块的粒度关系又是怎样的呢？等等，这些问题的接踵而来往往让我们不知所措，不知道该怎么做，下面咱们来具体地分析一下。

1）模块划分标准

• 单一性：模块粒度需要尽可能小，一个模块以解决用户的一个需求为主。
• 完整性：单一模块应该具备完整性，内部流程上应当是一个闭环，信息流上提供足够支撑用户达到目标所需。
• 独立性：模块之间应该维持一种弱耦合关系，将模块对其他模块的依存关系降到最低，以便与不同模块组合时具备良好的适配能力，扩大模块通用性和复用能力。

2）模块划分方式

模块的划分方式根据产品的不同形态，大致可以分为以下两类。

① 流程类产品的划分

流程类产品通常是由一个明确的用户目标，通过一系列线性的任务阶段最终达成目标的产品闭环。因此这类产品的模块划分是一个拆解用户目标、层层具象化的过程。

• 分析业务需求及用户目标。
• 制定用户达成目标所需完成的任务流程（TASK FLOW）。
• 根据任务阶段划分第一层级任务模块。
• 根据模块内功能特性的多少，决定是否划分子模块，使模块的功能尽量单一。反之，业务逻辑紧密相关的，一个变动了，另外多个关联元素也必然改变，应合并成为一个模块。

信用卡即属于流程类产品，其还款模块划分。

② 内容载体类产品的划分

内容载体类产品，不是以某一具体目标为主体，而是多为以内容聚合为主的框架，相比流程类产品分层级划分的方式，更加注重以内容信息的分类、排序、筛选的划分方式。

• 对全量信息内容进行穷举。
• 确定分类的纬度，并对内容进行筛选、排序，形成第一层级模块。
• 对信息内容较多的模块进行分析，判断是否合并或再次拆分。

4. 模块的设计简述

在模块设计的这个过程中，需要注意模块设计的一些基本规则。

1）复用性

模块的复用性是提高产品设计效率最重要的特性。复用模块可减少用户在相似场景下的学习成本，快速上手；也可以在快速产出的同时，保证用户体验的一致性和延续性。

可复用模块占比越高，产品的稳定性越好，因此在设计时需要尽可能提高关键流程的可复用程度。

例如，在手机充值类业务中，通过对商品选项模块的抽象及复用，使话费充值和流量充值在使用体验与信息传达上保存了高度的一致性。

2）延展性

在通常情况下，对于同一功能模块，由于需求或业务的差异，需要在设计时考虑到一定的可扩展能力，以便兼容一定范围内的差异性。这个延展性包括了对信息的多少、内容的参数、视觉表现等方面的宽容度，这个宽容度应当是基于对业务内容的合理预估。

例如，在票面选择的功能模块交互设计案例中，方案A采用横向滑屏的方式进行票的选择、信息布局和交互形式都比较舒适，但忽视了一个问题，当票面数量超过一定量的时候，滑动的效率变得非常低，从第一张到最后一张需要多次滑动，时间和用户的交互次数都会随之增加。

在分析了一定量的同类型展会票面数量后，按照2～3种票价×2～5天的变量，票面的数量可以预估为在4～15张的区间内，由此对模块进行了重新设计（方案B），采用纵向列表，一次可以浏览更多票面，上滑操作具备快速和连续的优势。

3）互换性

有可复用模块，就有不可复用的模块。即使用户目标相同，但因为业务差异，无法通过简单复用已有模块，或者增加模块的延展性来满足。这些模块可能会采用完全不同的交互形式或内部信息结构，信息内容也有所差异。

在设计这类模块时需注意对外信息结构的一致，以保证在和其他模块组合时，不在全局信息结构上发生变化，实现快速互换，而不用调整其他模块构成方式。好比乐高积木，无论单个积木的形状如何，都能够很好地衔接。

例如在生活缴费案例的设计中，由于机构业务模式的差异，存在预付费、后付费、选择付费等多种业务模式，通过将缴费金额设计成可变模块，在不改变页面信息结构和其他模块的情况下，可实现快速互换，满足不同业务模式的差异需求。

5. 模块的组合简述

在这个基础上，通过可选模块间的互换，可以从容应对需求中差异化的部分，快速变化出各种产品的变形以及进阶形式。

模块的组合不是简单地将所需模块堆砌在页面上，而是需要让它们各司其职，成为一个整体。

要达到这一目标，我们在运用时需要遵循以下几个原则。

1）明确主次

每一个页面中都需要有一个，且仅有一个主要模块，它是用户在当前页面最迫切需要解决的问题，也是页面信息的重心所在。

因此我们在组合模块时需要突出主要模块的信息或操作，当其他模块可能会影响到主要模块的时候，我们就需要考虑是否减少不必要的模块，或是降低其他模块的信息强度，以减少对主要模块的干扰。

2）避免冲突

由于每个模块都是一个小的闭环，单独拿来看它一定是具有完整性的，但多个模块组合在一起时，难免会出现一些冲突的地方，比如，信息的重复、交互方式的不一致、逻辑的矛盾等。

这个时候我们就要通过对模块的微调来避免这些页面上的冲突点，如合并重复信息、减少页面的交互方式等。

6. 如何做产品的模块化

1）功能模块化

产品功能有哪些块组成，尽量颗粒度细分。比如p2p-投资流程、投资确认、充值、提现、认证、已投、登录注册、获奖提示或获奖列表等。

2）页面区域模块化

l根据信息优先级，信息层次、信息可操作性，去设计可以的页面布局，核心信息清晰可见且与视觉重点重合，业务与目标操作区域便于发现和操作。

3）交互规范化

各个信息层级重要的交互样式，不同操作反馈的样式规范等。

4）信息框架化

页面内不同业务表达的信息规范化，形成样式。

7. 产品模块化的具体设计思维

模块化设计等同于前端H5所定义的组件化设计，只不过一个用于编程，另一个则用于设计，其实两者的用法是很相近的，一言以辟之，都是秉着组件化设计模式能让我们不管是在研发还是在设计方面，都能够快速地研发和设计，这样做不仅易于维护，易于拓展，多屏适配，而且便于多人协作和提高整个团队的工作效率和质量。

那么产品模块化的具体设计思维是什么呢？

本质上，模块化设计就是将UI界面合理地划分为更小的、更易于管理的单元，并予以命名。这些小单元分为六个层级。

1）基调

首要确定的就是UI界面的整体基调。我们需要确定产品的核心标志性元素，包括字体、版本、主色调等。这些都需要谨慎而精心挑选，然后贯穿于整个产品界面设计。

2）元素

元素是UI界面可复用的最小单元。一些经典的元素有按钮、超链接、输入框、下拉菜单等。我们需要设计好这些元素，包括它们不同的状态，比如hover、focus、disabled等。我们的准则是，设计一次，贯穿始终。

3）组件

再上一层就是组件。UI界面中很多成块区域都是组件。只要是几个元素的组合，都可以称之为组件。卡片、头像、导航栏都是经典的组件。但是，组件并非一定要视觉上看起来是成块的。

我们考虑屏幕的适配问题，同时设计多个版本。这样就很好地避免了返工的可能性。当然，屏幕的适配情况要事先与需求方商量好。

4）合件

再上一层是合件。合件顾名思义就是一些组件的集合，它规定了组件之间的位置关系。下图所示的列布局，就是个非常简单的合件。它只由空白间距的多少、标题的样式，以及组件的排开方式组成。

5）布局

第5层是更加抽象和通用的布局设计。定义好栅格系统，内部间距以及外部表现之后，让其他设计师参与进来设计风格一致的UI界面就很容易了。

6）页面

最高一层就是实际的页面呈现。每个页面都包含了组件和合件的排列组合。

所有个性化的需求都定义在页面层级。比如说，市场部要求联系页的背景必须是蓝色。那么，我们只要在页面层级添加即可。

8. 模块化设计的一些优点

1）保持输出一致性

在设计中，如果一个项目同时由多个设计师负责，那么同样的模块就会出现多种样式，这显然不合理。

所以建立相应的视觉和交互规范是必不可少的工作环节，同时对于一些复用性较高的组件，我们就可以将其模块化。这样不管哪个设计师去设计，都调用这个模块，从而保证交互和设计风格的一致性。

2）提高设计效率

当采用模块化设计时，我们对于项目当中的模块，我们就可单拿出来设计。通过模块化的设计，不但在当前项目可以更理智的分析各种状态，避免遗漏，同时在使用时，我们直接将这些卡片进行组合即可。

另外，在下一个类似项目时，可以直接复用，界面根据产品实际需要重新进行组合和对模块的调整即可。

3）便于查错和维护

设计过程中总会出现问题，不断修改和优化，采用模块化设计如果页面上出现问题，就可以找出相关模块进行检查并拔除，直到恢复正常。

4）便于协助

这和设计师协作的道理相同。如果两个开发同学都在制作带有弹层的页面，这部分工作只要交给其中一人就行了。他做好之后封装成模块，另一位开发在自己的页面中加载就行了。

9. 模块化设计的过程总结

模块化设计本身，就是设计师在行业设计中所累积的经验的一种转化，并利用已有经验，来降低设计风险，提高设计效率和质量。因此需要在模块的复用过程中，不断对模块进行验证和优化，以适应用户需求的变化趋势。

产品设计初期，在设计实例中逐渐提炼摸索，重点在于提炼产品可复用的模块，优先满足共性需求。

随着案例的丰富及需求的多样，差异化模块随之增加，设计重点应转向模块的纵向，即更符合业务特点的精细化方向发展。

对于已有的模块，在反复的运用过程中，应审视设计的合理性，不断更新模块。

对于新增的功能，视其通用性、选择性的沉淀为模块。

模块化设计方法一方面可以作为自己在设计中的思考足迹，以更全面的视觉审视设计。

另一方面也可以在产品高速发展阶段，提高设计效率，同时为多个设计师共同设计打下良好的基础。

三、原型设计量化相关的事项

那么，怎么保证设计的一致性和提高设计效率就是我们必须要考虑的问题。

对设计团队来说，最大的挑战是如何通过提高产品的用户体验一致性，来帮助用户高效完成任务，我将结合一些项目案例，从多角度深入细节去解析组件库，总结的一些方法和思考分享给小伙伴们，也希望大家从更多的角度跟我一起探讨。

1. 设计中最常见的功能组件

• 导航：帮助你更好的查找什么样的架构是一个好架构，能让用户知道放在哪里，好的架构的载体就是我们的导航，导航起到的作用就是“查”。
• 数据录入组件：主要作用是“增和改”， 以及数据展示类组件，像是表格和列表、小气泡标签、以及可视化图表等等 。
• 反馈类组件：用来满足设计规范的反馈原则。
• 业务组件：类似于学生端直播上课、服务类的看板、OA看板类的应用，比如预约会议室、日程 teambition 项目和业务拖拽。

2. WEB端&APP端功能组件组合过程

制作组件库的过程中应用到了两个概念原子化设计理论、结构细分。

结构细分其实就是将各个独立的模块（组织）进行打散（原子）、细化、整合、重组。

在结构细分时，需要先从项目中筛选岀满足复用性和拓展性的可拆解的模块，对于产品来说我们在筛选的时候根据旧版本內容，把页面穷举罗列岀来，分析相似性和可替换的模块，然后利用思维导图的方式罗列岀可组件化的内容，做成可替换的组件，使毎个原子可独立变化和替换。

3. 模块化设计过程中需要遵循的一些原则

1）一致

在同一个产品中，产品内部的导航方式、相同功能的命名方式、类似元素的视觉呈现、操作行为的交互准则等方面要保持一致性。

• 与现实生活一致 ：与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念；
• 在界面中一致：所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。

2）反馈

• 控制反馈：通过界面样式和交互动效让用户清晰的感知自己的操作；
• 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

3）效率

• 简化流程：设计简洁直观的操作流程；
• 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
• 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

4）可控

• 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
• 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

4. 模块化设计的多个显著特征

前文通俗地还原了软件模块化设计的原貌，下面总结一下软件模块化设计的5个显著特征。

1）层次分明

可以简单理解为设计一个结构合理的树状菜单。

2）抽象与细分

• 抽象：只考虑要解决的问题（用户需求），不考虑实现方法；
• 细分：强调对需求的逐步分解，分解时仅较上一部分增加少量的细节。

例如，用户想要实现在线报销的功能，那我们就给他做一个“报销软件”，这个“报销软件”就是抽象出来的实体。

接下来要对“报销软件”进行第一次分解：报销信息填写、发票识别与验真、审批。

第二次分解“发票识别与验真”：发票信息录入、发票真伪性验证、发票是否已用验证。

第三次分解“发票是否已用验证”：历史已用发票查询、历史已用发票编号对比……

3）组成独立

在软件工程领域也被成为“信息隐蔽”，意思是在设计和确定模块时，使一个模块内包含信息（流程或数据），对于不需要这些信息的其他模块来说是不能访问的。

也就是说，除了必要的接口，尽量减少模块间、分系统、子系统间的逻辑依赖，这样在后期维护升级时，就可以避免干涉其他不相关的部分。

例如：“报销单”包含单据编号、单据类型、单据金额、提交人、提交日期等信息，但“财务分析”模块只需要用到单据金额、提交日期两项数据，那么就只允许“财务分析”模块通过接口调用的方式访问这两项数据，其他数据一概不能访问。

4）面向数据结构（面向接口）

软件系统一般由逻辑（算法）和信息两部分构成，信息又分为内容和数据；逻辑是构建软件功能的骨架，内容和数据是血肉，其中以数据尤为重要。

假如要实现软件模块化且模块之间相互独立，必须要先抛弃逻辑（实现方法），因为有逻辑就代表这两个模块谁也离不开谁，就不能称之为独立。

如果这两个模块必须要关联在一起，但又不允许它们在逻辑上互相干涉，那么最好的办法就是为它们内部包含的数据进行抽象化，形成标准化接口，以数据调用的形式实现两个模块间的互相协作。

5）高内聚，低耦合

这里要解释一下，其实“高内聚，低耦合”才是软件开发的内在要求，“模块化设计”只是实现“高内聚，低耦合”的其中一种方法。

• “高内聚”最精准的体现是“面向对象开发”，它的意思是从功能角度来衡量模块间的联系，也就是说一个好的内聚模块应当只做一件事；
• “低耦合”的精准体现是“面向接口开发”，意思是从软件结构角度衡量各个模块之间的联系，耦合强弱取决于模块间接口的复杂程度、进入或访问一个模块需要调用的接口数量和次数；极端的低耦合是不需要任何接口，但一般很少见。

“高内聚，低耦合”是判断软件设计好坏很重要的一个标准，关于如何达到这一要求，本文不作重点介绍，大家可以自己查查资料简单了解一下。

5. 模块化整合的具体步骤分析

设计进行了模块化，那么怎么才能够将模块化的东西整合成能够在任何项目中都能够使用且类似于前端组件化一样的组件库呢？

下面先说一下什么叫做模块化整合呢？

模块化整合就是在现有的元素中找出他们之间存在的共性，分类排列整齐，就和家里需要把不同东西收纳整齐是一个道理。那么来说一说具体怎么实施呢？

1）模块化整合的优点

l从用户的角度看，把所有相似类目的集合起来，更容易寻找出来，从视觉上感受到页面元素的统一性，更加耐看一些。对于UI设计师而言，这不仅对于交互和视觉上，也让页面信息具有模块化。

2）模块化整合的具体步骤

① 对原型内容有一个清晰的认知

取得原形，人们必须搞清楚每一个原素存有的目地用意，并与需求方确立下列关键点：

• 信息内容等级通过沟通交流确定页面最关键和主次的信息内容，先后推导。有利于融合控制模块信息内容全过程中兼具视觉表述。
• 文本信息内容和字符长短哪些文本能够省去，哪些不可以？要是没有确立，可以依据视觉显示信息实际效果再给出提议。
• 按键确立是不是有引导转化的要求、按键注重的高低等。
• 页面预估一部分原形服务提供者会对页面有自身的设想和预估。思索是不是能够实行、成本费等等。假如不能，必须提早沟通交流并和另一方达成一致。

② 对各元素分析，整合

我们面对合并出来的版目，要学会质疑，并不是每一个原型都是没有缺陷的，那么青藤酱建议用三种方法来整理元素和各类信息。

• 考量每个元素的重要性，如果不必要，就可以借用知识点来认证自己的想法，并提出建议。
• 从所有元素中找出同类，把同类事物归结成一个整体来看。
• 分层思考，按键、点击入口还有模块之间是否有层级关系。可以按顺序整理收纳。

③ 构建可能性的结构与布局

前期的准备工作就说到这里，设计师可以先用手稿大概描述出来结构和布局，分布的位置，还有交互的元素种类等。这个是十分重要的步骤，在此期间，还更应该考虑设计的延展性，因为下个版本要增减字段或者功能，设计就要大改，之前的布局方案就要重新思考了。

④ 执行——采用可行性方案兼顾思考视觉表达

在所有方案中，选出一个或者两个可行的方案，在输出内容的同时，还得关注视觉的表达形式，比如按键是否使用线框、是否使用填充、卡片是否可以使用投影、是否使用底色、多种颜色组合使用，是否让布局看起来不协调。经过一系列的摸索，选择一个最合适的方案。

⑤ 最后的成品

检查做得越多，千万不要丢掉初心。阶段性的反思和回顾能让设计更贴合需求的目标，设计完成之后，做一个小结，不好的东西加以改正。模块设计要是做的很优秀，就可以再使用相似的样式，这样可以更方便处理。

一个优秀的UI设计师离不开模块化整合，快按照步骤行动起来吧!希望各位设计师都能设计出令人满意的作品。

6. 顺便提一下标准化设计

开展的适用范围比较广泛的设计，适用于技术上成熟，经济上合理，市场容量充裕的产品设计，以下是标准化的的6个实现形式。

1）简化

简化是在一定范围内缩减对象的类型数目，使之在一定时间内足以满足一般需要的标准化形式。

简化只是控制不合理的多样性，而不是一概排斥多样性。通过简化消除多余的低功能的品种，使产品系列的构成更精练、合理,从而提高了系列的总体功能。

2）统一化

将两种以上同类事物的表现形态归为一种或限定在一定范围内的标准化形式。统一化是消除由于不必要的多样化而造成的混乱，为人类的正常活动建立共同遵守的秩序。

3）系列化

产品的系列化通常是在简化的基础上进行的，是简化的延伸。系列化是为防止盲目的品种泛滥而预先作出的科学安排。

4）通用化

通用化是在互换性的基础上，尽可能地扩大同一对象的使用范围的一种形式。

通用化的对象有两大类：一是物，如标准件或自制通用件。二是事，如检验方法,检定规程。

通用化的目的是最大限度地减少零部件设计制造过程中的重复劳动，以缩短生产周期，降低生产成本。

5）组合化

是按照标准化的原则，设计并制造出一系列通用性很强且能多次重复应用的单元，根据需要拼合成不同用途的产品的一种标准化形式。

当通用件的通用性达到一定程度的时候，就可以把那些通用性很强的零部件从具体的产品中分化出来，变成独立的、标准的组合单元。

6）模块化

模块通常是由元件或子模块组合而成的，具有独立功能的、可成系列单独制造的标准化单元，通过不同形式的接口与其他单元组成产品，且可分、可合、可互换。模块化是以模块为基础，综合了通用化、组合化、系列化的特点，解决复杂系统类型多样化、功能多变的一种标准化形式。

综上所述，标准化具有一定的可复制性，能减少管理、提高效率、减少错漏，保证产品质量和服务水平的稳定性，同时能有效降低人力资源成本，减少对于人的依赖，最重要的是具有快速迭代优化升级，提供更好质量和服务的能力。因此，设计标准化工作具有非常重要的积极意义，对于公司如此，对于个人自我提升也有着非常积极的意义。

下面举几个例子：

• UE设计中有一个“就近原则”，就是对相关控件进行直观分组，创建一个更少混乱、更有组织的布局，使用户在一个区域只进行一类操作。
• 页面设计中的树状菜单和“面包屑”元素，代表着分层分级。
• 每个页面只进行固定的、少量的几个相关性较强的功能操作，比每个页面进行很多个操作学习成本更低，更容易上手使用。
• B端客户的定制化需要相对比较高，而ToB产品往往都做得又大又全，有的客户可能仅仅只需要部分功能模块，这时就需要为拆分后的功能模块进行单独定价，最终报价按照客户选用的模块进行汇总。
• 采用模块化设计的软件产品，可以结合客户行业特点或公司产品规划，针对性地对某个模块进行优化升级，使之单独成为一款产品参与市场竞争，并且不会对原系统造成影响。

所以，模块化设计并不只是为了提高软件开发效率、适应快速变化，它在一定程度上也代表了最优的用户体验和市场需要。

本次关于原型设计量化的分享就到此结束了，希望能够给大家带来一些帮助，里面有不足的地方也请大家指点出来，欢迎大家与我交流，咱们共同进步。

下一期我会针对于怎么才能正确地打开用户故事来和大家再一次进行交流，并对原先的一些案例进行展示和讲解。