工具类产品如何设计？大厂高手总结了5个要点！

云办公和在线协作已经成为目前互联网工作的主要形态和重要趋势，各种工具类产品也成了互联网工作的“基建设施”。优秀的工具能帮助效率获得极大提升。那如何设计好用的工具产品呢？下面是个人一点浅薄的经验和大家分享。

相关设计干货：

各种工作涉及到的工具产品各不相同，具体的工作流、产品逻辑、交互逻辑和视觉细节也有各自的特殊要求。如何设计好一款好用的工具产品，涉及到的内容会非常多。篇幅有限，我自己概括一些通用的要点，主要有以下 5 点：环境（Environment）、用户（Users）、呈现（Present）、易用性（Usability）、云协作（Cooperation）。

一、环境 Environment

主要区分硬件环境和软件环境

1. 硬件环境：主要影响来源于操作外设和显示器尺寸。不同外设带来不同的操作方式，不同的操作方式由于其人体耗能、协调性（主要指手眼协同）不同，带来的操作体验也完全不同。

上面罗列了常见的办公外设，针对每一种外设各自的特点，我总结了工具设计时需要注意的点，能够帮助提效以及提升体验。

鼠标：市面常见主要是滚轮式和触摸式鼠标，其滚动和触摸的方向和屏幕展示的滚动方向是否一致，在工具的默认配置、更改设置等方面，需要特别考虑。

键盘：快捷键能够极大程度的降低耗能，提高使用效率。设置快捷键要考虑用户的学习成本和记忆成本，同类型的操作最好设置为市面上已有的使用率最高的配置。如果没有用户广泛接受的快捷键组合，自定义配置的时候需要考虑组合按键的数量和按键之间的距离，降低每次操作的成本。选择键盘上面的字母按键时，对于带有明确含义的操作，可以考虑其英文首字母，降低用户学习和记忆成本。

注意：在配置所有官方快捷键操作，一定要规避掉系统级别的通用快捷键。

触摸板：触摸板在大多数场景下和鼠标的作用相同，但是其多点触控的能力，增加了更多操作方式的可能性，在设计手势操作时，其对象运动规则需要和鼠标的运动规则保持逻辑一致。设置快捷操作的基本思路和键盘快捷键一样。

触摸屏：触摸屏大大小小，种类繁多。触控媒介也分为手指触控和其他电容设备，最常见的就是电容笔。具体会在下面展开。

顺带一提，键盘、鼠标、触摸板等耗能都比较低，但协同性也较低。触摸屏的协同性很高，但是随着屏幕尺寸的增大，其人体耗能会大幅增加，不适合长时间使用。

此外，随着 VR，全息投影等设备的普及，这些设备进入协同办公场景的可能也在增加，不过其物理反馈和高耗能操作是亟待解决的问题。

前面提到的，触摸屏随着屏幕尺寸的增加，耗能也会增加，通俗来说就是用着会累，尤其屏幕在竖直方向的时候。在使用触摸屏的时候，需要关注一下误触操作的可能性，尤其设备需要两只手持的时候，当然大部分误触判断的问题在系统和硬件层面就会解决。最后，关注一下完成这个动作是不是会要用到设备实体按键。

触摸屏常见的操作是二维的，但是也有一些屏幕会有压感，另外电容笔的压感和角度识别，这些都增加了在更多维度进行功能设计的可能，如果你有需要的话都可以考虑。

2. 软件环境：主要影响来源于操作系统和窗口尺寸。不同的操作系统会使用户形成不同的使用习惯，如果你的产品是跨平台、跨系统的，需要考虑这一点。

了解你的用户常用设备，常用系统之后，接下来就需要了解他们的常用设备尺寸，这对整体布局来说非常重要，这里提供的网站可以按地区、时间查询用户屏幕的分辨率，帮助你定位合适的「基准尺寸」。

操作系统除了操作逻辑有差别，屏幕分辨率带来的显示效果差别也是主要影响用户体验的原因。举个例子：Windows 设备常见的系统分辨率等比缩放，会使得原本产品针对高清大屏的布局变得混乱和局促。

在我们确定了基准尺寸，完成了工具的基本框架之后，需要考虑用户的使用场景会不会有经常改变窗口尺寸的可能？会不会有跨系统协作的可能？会不会有跨平台适配的可能？如果有，上下限在哪里？针对这些问题我们要确定相应的适配策略。我常用的设计方法列出了以下三种：模组化，响应式布局，针对设备/系统分别设计。每一种方式都有各自的适用场景，根据你的产品特点选择，这里就不展开了。

二、用户 Uesrs

前面提到关于软硬件的设计要点，其实和用户人群息息相关。这里我想要介绍的是关注视觉细节的一些点。常见的 B 端工具大部分还不用做适老化设计，但是我们需要关注弱视群体，通用型的办公软件可能会有很多近视，色弱人群使用。还要关注用户会不会长时间使用，会让他们的眼睛不舒服么？

1. 用户人群的视力：前面提到确定产品框架的「基准尺寸」，那内容的「基准尺寸」呢？默认字号和间距给定多少合适？你的用户能不能看清楚这是一个很重要的问题，当然这可能需要调研和测试。对于一般的工具，合适的大小可以参考市面的主要竞品，没有竞品也可以扩大范围，参考其他工具产品，后续关注反馈在迭代中摸索。如果你很了解你的用户人群一般视力情况，则可以做偏小/偏大的整体设计。

2. 用户人群的辨色力：你的用户是不是有可能出现色盲或者色弱。如果你的产品是一个通用型的工具，在使用特定含义的颜色时候会不会对他们造成困扰。假设颜色的分辨会有带来一定的操作困难，后果的风险有多少，这些是需要评估的，根据评估结果来确定视觉表达的信息密度，颜色不足以传达信息的时候可能要增加图形、文字、声音或其他形式来增强信号。

主题色：如果你的用户不需要考虑上面的情况，那你需要关注颜色的表意。用户对基本颜色有共识，合理利用这点可以帮助有效信息传递，例如你的产品如果和金融相关或者有很多的数据趋势展示，在确定品牌或主题色尽量需要规避掉红/绿，如果不这样做，后续你的系统设计起来将会非常麻烦。

背景色：在一定程度上能起到整体提升/降低画面亮度的作用，对视觉疲劳也会有很大影响。

如果你的产品需要适配黑夜模式，可以考虑以下两种色彩调校方法。

3. 视疲劳：如果你的用户需要长时间使用你的产品，那你需要保证他们的眼睛相对舒服，减少高对比的颜色刺激，可以多选用黄绿色彩倾向的主基调，适当降低整体的饱和度和对比度。在视觉纵深上面也可以多做减法，减少层级关系带来的注意力疲劳感。

三、呈现 Present

在一个确定面积的窗口内，如何平衡工具承载的信息量和展示的功能？我总结了 4 个需要关注的方向

1. 共享空间：简单的说就是当信息过载时，采用折叠/切换/显隐/遮盖/位移等方式展示用户当前关注的功能内容。

2. 用户自定义：我们在实际项目中发现，很多新的功能没有成熟的产品可以参考，但是又无法确定哪一种方案更好，而且对于功能越多，越复杂的工具产品，这种情况出现的概率越高，对此我们可以将定义配置的权限开放给用户，收集好数据帮我我们迭代产品。

3. 静态表达：经常利用的是色彩、图形、样式、文字等的组合，以下是经常出现的方法组合，可以参考制定你的设计规范。

4. 动态反馈：下面列出的是我经常使用的方法，可供参考。

四、易用性 Usability

这个问题很具体，但是在项目中，我个人总结的一个基本原则是“平等的对待用户，不要教育用户”。工具是帮助用户解决问题的，让用户会使用即可，不要试图把产品逻辑都教给用户，让用户精通工具那是产品说明书的工作。

此外，在系统层面要给用户兜底。帮助用户遇见可能的风险和损失，在对应的位置设置拦截/撤销机制。考虑定时或实施存储。考虑历史版本。

五、协作 Cooperation

在线协作办公已经成为最主流的趋势，其中：

轻量化的工具更容易获得用户，最核心的功能往往能满足大部分人的全部工作场景。

跨端/跨平台/跨系统：用户不受限于硬件设备和软件系统，能获得更一致的体验。

云存储与云计算：你的终端只需要和云端链接就能享受超级的存储和算力，对终端性能要求大大降低，不卡了，效率高了，体验自然更好了。

同时，你需要关注一些细节，这只是其中一小部分，更多的内容需要在具体产品中慢慢挖掘。

最后 Finally

我个人想说，做好一款工具是一件长期的事。要时刻关注你的用户反馈。要经常使用你自己的产品，你会有很多发现。

欢迎关注「JellyDesign」的小程序：