工具设计框架搭建的思路是怎样的？

酷家乐用户体验设计 2023-08-08 21:05:33

前言

在设计一个全新的产品时，经常会遇到很多问题，用户是谁？这个模块应该占界面中多大的区域，用户的操作流程是如何的？在遇到较为复杂的交互模式和行为的工具型产品时，设计师可能一开始就陷入某个功能的设计细节中，这往往到了产品后续迭代中会产生一些因前期设计框架的思考不足，导致了产品后续迭代过程中需要从框架层面进行一些调整，可能会带来一些不可逆的伤害。

工具设计框架搭建思路

所以别着急展开功能设计，将这些问题暂时先放一放，梳理一下思路从更加底层开始思考，思考整体的产品框架。《About face》提到的设计框架（Design Framework）为设计人员梳理设计框架提供了一些思路。

经过梳理大致可以分为需求场景、人物模型、产品目标、界面设计、用户行为5个部分。本文着重探索在交互框架设计阶段底层组织原则开始至功能交互阶段 4 个设计阶段过程中的一些案例和经验分享。

工具设计框架搭建思路

一、产品的底层组织原则

产品的底层组织原则会深远的影响整个产品的姿态、载体、交互方式，它是对用户模型、用户需求和情景进行深刻的梳理总结后的成果。一般可以分为交互的载体和限制条件、产品的姿态、用户与产品的交互方式。

如 2019 年 Microsoft Design 团队开始研究移动办公的人群，例如车间工人，他们是如何在没有电脑的情况下完成工作。从而推出了「Office for Mobile」为人们提供在手机或平板电脑上高效、直接地完成工作的产品。

工具设计框架搭建思路

但很多时候用户情景不是唯一会影响产品交互载体的唯一因素，有时候可能是产品的载体不同也会让产品呈现有着很大的区别。如「Sketchup for Web」与「Sketchup Pro」因载体的不同发展出两种设计思路的产品。

工具设计框架搭建思路

同时交互载体也会带来一些限制因素如输入方式，如大多数的 PC 有键盘和鼠标，但没有可触控的屏幕，手机有触控屏可以通过虚拟键盘进行输入但相较于实体键盘有明显的劣势。但手机又可以通过摄像头结合图像算法进行更高效率的输入。

「酷空间」是 3D 设计型产品，在定义产品的输入方式时我们需要调研目标用户的设备情况来决定我们是否考虑三键滚轮鼠标输入方式，（三键滚轮鼠标在建模时能够轻松旋转、缩放和精确定位）。因此在探索产品交互载体与输入方式时需要考虑用户的使用情景，用户现有工作中所使用的设备来决定产品的底层原则。

此外产品的姿态对产品的设计框架至关重要。产品的姿态是一个比较宽泛的概念，在工具设计领域，产品姿态一般分为工具型产品和轻交互型产品，在我看来酷家乐、Photoshop、Sketchup 都属于工具型产品，因其都需要用户较长时间的投入（一般 30 分钟以上）、高密度的交互行为、交互模式服务于效率。

在对于工具型产品的设计原则上我非常赞同 Microsoft Design 团队在 2021 发布的《Four Principles for the Future of Design》文章中提到的新设计原则 “Built for focus”该原则引导产品成为用户能够按照自己的意愿进行工作。产品尽可能减少视觉元素和信息的干扰让用户保持专注、平静和自信。就如同 Sketch在多次版本迭代之后的 UI 风格逐渐趋于和谐安静。

酷空间的设计团队在设计清单领域产品时曾经就因为单元格内发生的错误提示采用 Popover dialog（系统触发，但比 dialog 阻断要弱一些）还是 Information Card（用户主动 Hover 触发）展开过一些讨论，最后达成一致的结论是我们认为 Popover dialog 对用户的打断会更强，在实际的用户使用流程中，处理错误单元格的数据不一定是第一优先级的事情，所以选择了Information Card + Status Bar 由用户的主动行为触发提示来告知用户这个单元格发生的事情。

但如果这是一个中后台的管理系统，用户在创建一份订单的表单，我们就需要及时的指出错误，避免让用户发生不必要的损失。因此要在框架设计阶段要弄清楚目标用户是需要一个什么姿态的产品，用户对该产品的潜在投入程度等问题会决定后续设计过程中选择哪种交互模式。

工具设计框架搭建思路

二、定义功能与数据元素

在定义产品的功能与主要的数据元素阶段整个产研团队都会行动起来，这个阶段的主力是产品经理但不意味着设计师只能等待产品调研成果再进行设计。先来看看功能与数据元素是如何理解的，他们之间是如何相互影响？

1、功能

功能可以理解为在考虑用户模型及产品目标后对数据元素的操作工具、数据元素的视觉和结构化的管理方式。定义功能的过程可以简单的拆成需求、数据元素、功能三个部分，需求决定数据元素个体的信息内容、交互的访问、信息间的主次和关联性。

功能则是数据元素的操作工具、数据元素的视觉和结构化的管理方式。三者之间存在比较明确的上下游联系，并且在不同的部分需要有一些关注的信息，如下图所示：

工具设计框架搭建思路

在需求阶段设计团队可以与产品团队共同对用户的使用场景和意图进行调研和分析，随着调研深入此阶段可以逐渐丰富用户模型的信息，同时着手建立用户故事，注意此时不要忽略收到的任何信息，注意细节，可以是用户在不同工作流之间的流转所传递的信息、或者用户在工作流中是否被打断之类发生的事件很可能会影响后续设计的功能和交互。

此时 Customer Journey Map 客户旅程地图依然是一个非常值得推荐的工具。

工具设计框架搭建思路

酷空间产研团队在开发「清单领域产品」时曾对于采用 Airtable 的关系型数据库型的模式还是Excel 自由单元格模式时展开了多次讨论以及策略的调整，因为采用 Excel 自由单元格的交互模式会带来更多研发成本并且对当前的技术水平有一定的挑战。

最后我们从用户的 Excel 工程文件找到了答案，用户的大部分数据是接近于关系型数据库的模式，但在一些引用和汇总时又接近 Excel 自由单元格模式，所以最后我们结合了两者的优势设计出自由转化的清单单元格交互模式。在对单元格交互模式的设计过程中，我们尊重用户过去经验，依然保留 Excel 最常用的交互模式。

工具设计框架搭建思路

2、功能元素的布局

在确定底层组织原则和功能与数据元素后进入草图阶段前，先着手思考这几个问题：

哪些元素需要大片的区域，哪些不需要？
功能间的组织结构？
交互组件间如何组织才能提高工作效率？
哪些元素在使用时存在关联性，哪些不是？
关联性的元素使用时的顺序如何？
哪些数据元素能帮助用户做决策？（注意不同用户模型的决策因子）
采用何种交互模式？

3、竞品分析

在此阶段做竞品分析对解决上述关于布局、工作流、数据元素、交互模式问题有很大的帮助，一方面可以吸取竞品的长处，一反面可以以批判性的进行横向对比我们与竞品之间的优劣，我们与竞品间的差异性是什么。

下图为酷空间设计团队在搭建清单算量布局时调研的竞品工具创建一份工程清单可能会使用到的功能，以及工作流中上下游是如何配合。看看竞品定义的数据元素是什么。

工具设计框架搭建思路

这是一个比较细致的工程，但整个过程中会有不少以外收获，如竞品的一些创新性的交互模式，一些杀手级的功能。竞品是如何组织信息架构，将我们的用户模型和用户故事带入到竞品的功能中是否所有的需求都被很好的照顾到，有哪些是竞品做的有待优化空间的地方，我们可以学习超越的地方。

以及我们的产品至少要做到什么样的程度才能有竞争力。就如同我们在调研的过程中发现竞品的主要客户是一些建筑、市政工程之类的大型工程承包商，因此竞品软件服务费用较为昂贵，这其实与酷家乐为中小型企业服务的策略存在差异，因此我们可以与竞品展开差异性竞争。（PS：如果有条件的话，可以研究竞品的用户是如何使用竞品的，他们最常用最认可的功能/体验是哪些，哪些是影响他们的体验的设计，这对产品后续是否能够取得成功有很大帮助）

除了上述提到的用户群、产品功能、产品框架、交互流程、页面布局之外还可以收集竞品视觉风格、发展历史相关的信息。