KISS原则：SaaS产品设计最重要的原则（下）
KISS原则：SaaS产品设计最重要的原则（下）
KISS原则是SaaS产品设计中最重要的指导原则之一，它强调保持简单、直观和一致性的用户体验。在前面的文章中，我们已经讨论了结构层的二化（菜单路径场景化与实体关系解耦化）和控制层的三化（功能要素抽象化、产品规则透明化、产品能力配置化）。本文将重点介绍表现层的三化，包括交互设计一体化、页面结构模块化和设计表达对象化。
一、表现层：交互设计一体化
一个系统通常由多个子系统/模块以及N个页面组合而成，就像一栋几十层的办公楼一样，如果每层的电梯、楼梯、厕所、窗户、走廊等朝向与布局一致，用户在熟悉一个楼层后，即使偶尔去其他楼层也不会迷路。这种一致性设计不仅降低了用户的认知负担，还提高了系统的整体效率。
1.1 案例分析
以下是三个不同的交互设计方案：
方案1
- 菜单结构：
- 子系统间菜单：采取顶部一级横向菜单（解决子系统之间的切换问题）；
- 子系统内菜单：采用一级+二级菜单的方式（解决页面导航问题）。
- 列表页面：
- 第一类：以考勤子系统为主，不可定制字段列。顶部左边是按钮区，右边是筛选区；
- 第二类：以员工子系统为主，采取可定制字段列。顶部左边是筛选区，右边是按钮区。
- 详情页：以右边抽屉式页面为主（无论是详情编辑、显示，或是新建页面）。
方案2
- 菜单结构：与案例1基本一致。
- 列表页面：与案例1基本一致。
- 详情页：
- 第一类：以新增（或编辑与查看）考勤组页面为例。采取的是二级详情页面+左侧步骤型设计；
- 第二类：以新增（或编辑与查看）班次或员工为例。采取的是居中弹窗页面的方式；
- 第三类：以自定义员工花名册列表的字段列为例。采取的是右侧抽屉式页面的方式。
方案3
- 菜单结构
- 子系统间菜单：隐藏式侧边抽屉栏的模式（解决子系统的切换问题）
- 子系统内菜单：与案例1、2基本类同（即依然是采取一级+二级菜单的模式），区别是二级菜单与页签模式混用（以考勤/员工的设置相关页面为例）。
- 列表页面：不同子系统之间不是特别统一，有的可自定义列，有的采取页签+列表；有的采取左边列表式筛选，有的采取左边标签式筛选等；
- 详情页：不是非常统一，但主要是三类：
- 第一类：以新增（或编辑与查看）考勤方案为例。采取的是二级详情页（内容居中）；
- 第二类：以新建（或编辑与查看）入职方案为例。 采取的是二级详情页+顶部步骤型设计；
- 第三类：以编辑（或查看）入职信息字段配置为例。采取的也是二级详情页+左侧页签切换式设计。
1.2 解析
- 一致性：方案1的详情页基本都采取抽屉式页面，比较一致。而方案2和方案3都有3种以上不同样式。
- 页面空间利用率：方案1的顶部一级横向菜单导航+左侧一级和二级菜单+中间内容区，结合右侧抽屉式详情页的方式，把一整个屏幕有效进行块状切分与分层，结构清晰，层级明确，利用率高。反观，方案2和方案3的方案（尤其是详情类页面），总会出现大片空白的无效区域，不美观的同时，也浪费了对应页面空间。
1.3 经验分享
交互设计规范与原则是基础，更重要的是顶层抽象设计。例如，WorkDay将所有线下的操作统一抽象为流程，并基于流程可进行节点的个性化配置，所有数据围绕业务对象进行查看、编辑、删除、流转、处理以及存储。
交互设计的核心是一体化与场景化。例如，菜单设计需要区分场景应用，列表页需要考虑自定义列、排序以及筛选，详情页建议新建、编辑、查看一体化设计。
二、表现层：页面结构模块化
页面结构模块化与功能要素抽象化、产品规则透明化（控制层），三者目的一致（即让用户高效完成任务），相辅相成。简单可理解为：功能要素抽象化是基础、是内在结构，产品规则透明化是规则、是外化信息，而页面结构模块化是呈现、是外在皮肤。
2.1 案例
以考勤HR设置加班规则为例，以下是三个不同的模块化设计方案：
方案1：核心分三大模块：基础设置、核心加班规则、更多规则设置。采取直铺核心模块+隐藏辅助模块的方式，直接帮用户决策模块的优先级；
- 基础设置：名称、适用范围、负责人
- 核心加班规则：区分三种加班类型的同时，又拆分成若6个子模块：允许加位置、计算方式、允许加班时间、最小加班时长、休息时间、补偿方式；
- 更多规则设置：加班时长单位、加班时长取整、加班步长、日时长折算、加班预警；
方案2：核心分三大块：基础信息、加班类型、更多设置。模块拆分与方案一几乎一致，但采取的方式，却选择的是按模块分步骤的方式。
方案3：核心分四大块：基础设置、计算规则、核心加班规则以及高级设置。同样是采取直铺核心模块+隐藏辅助功能的方式。
2.2 解析
- 用户视角：方案2采取步骤式的模块化设计方式，初始就提供了用户进度条，让用户有一种掌控感。同时，每个步骤只专注于当前模块的任务，相对而言，效率更高；
- 产品视角：每个核心模块都有自己的【全页面】，充分利用PC端页面空间的同时，便于后续不同模块的扩展。
2.3 经验分享
- 一定要做页面模块的用户优先级。例如，基础设置、加班规则、更多规则/高级设置，从模块的命名上已经明确了优先级。
- 一定保证页面模块之间的独立性，避免同一个要素可属于多个模块的情况。同一个要素，一定不能模棱两可，好像属于哪个模块都行，否则就要考虑模块分布的合理性。
- 每个页面模块下的要素数量，一般不超过7个。否则要么需进一步细分子模块，要么思考再新独立一个模块。
三、页面层：页面设计对象化
产品设计时，需要站在用户的角度，使用用户能理解的语言和表达方式，增强产品的易用性和亲和力。
3.1 案例
以考勤HR设置上下班时间和打卡范围为例，以下是三个不同的设计方案：
方案1：不区分固定时间与弹性时间上班，默认只需设置上下班时间，给你选择是否自定义打卡时间范围。最后再问你是否需要弹性上班。
方案2：区分固定与弹性上班，明确标识字段名称，并想象你对考勤时间是明确的，给出一种“偷懒式”的打卡规则设置。
方案3：区分固定时间与弹性时间上班，需手动输入上下班卡的时间范围。
3.2 解析
- 方案2比1好的地方在于，提前让你做关键决策，避免认知负担。例如，方案2初始让你选择班次类型（即固定时间班次，还是弹性时间班次），既可以隐藏不相关信息，同时，提前决策，避免设置规则时，一直心存疑虑。
- 方案1跟2都是站在你的角度，多为你计算和思考了一层，减轻你的决策负担。例如，打卡时间的设置，方案1是“上班前/后x小时打卡”，方案2是“最早可提前X分钟打卡”，“晚于Y分钟打卡记为迟到”，你无需基于上班时间计算从几点到几点，你也非常清晰知道设置的是允许打卡的范围；
- 方案1跟2的语言体系更清晰，更有说话的对象感。例如，“最早可提前X分钟进行打卡、晚于X分钟打卡计为迟到”，相比方案3的“上班打卡绝对时间以及豁免X分钟来说，更具有对话感，更清晰表达意思，减少不必要的歧义。
3.3 经验分享
- 提前明确设计对象，且一定要真实、具象。产品设计时，脑海里一定要有一个清晰的用户（真实用户最佳），可以从你调研的用户中选择（一位即可）。想象TA在（利用你的产品）完成任务时，会怎么思考，怎么决策，哪里有疑惑，有疑惑时怎么办等。
- 不要一味追求设计的简洁，更重要的是表达的清晰与完整。千万别因为追求简洁而放弃文字描述的方式（简洁有效的文字也是简洁设计）。
总结
KISS原则在表现层主要体现在三个方面：
- 交互设计一体化：解决复杂系统的子系统或子模块之间的设计一体化，保证全系统体验对用户的一致性，减少使用摩擦力。
- 页面结构模块化：与功能要素抽象化、产品规则透明化（控制层），三位一体，帮助用户高效完成任务。
- 设计表达对象化：解决系统的细节体验问题。即站在用户视角，用其语言体系，采用对话的形式，让系统设计“说人话”，避免信息模糊、不清晰而导致的“不好用”类用户心声。
本文来源于woshipm.com，这是一个专业的产品经理社区，因此需要在文末标注引用的媒体来源，以增加内容的可信度。此外，文章中有一些个人化的表达，如"我猜"、"如果你是用户"等，这些内容可以适当调整为更客观的表述，以保持文章的专业性。