上周公开课通过直播分享了一个桌面端软件交互设计的过程和思路，目前录播已经上传，感兴趣的同学可以抓紧时间查看（过阵子会下架）。

但有些细节内容用直播是不好展示的，以及一些细节没有做完。

所以今天用图文的形式，完整整理一篇案例分享出来。

首先介绍这次的案例，是我键盘上屏幕的专用控制软件，用于控制屏幕的启动、关闭，以及主题、展示数据等等。

软件本身包含的东西不多，主要3个独立的窗口组成，如下图：

再进一步解释，这个屏幕和展示的内容，是用于展示电脑机箱的硬件数据，比如CPU的当前频率、显卡的温度、内存占用率等等。至于具体要展示哪些硬件和数据，可以在这个软件中设置。

也可以在这个软件中使用主题编辑器，根据自己的喜好和创意制作一款全新的主题，包括自定义背景图，展示数据，展示文字信息等。

这些功能其实一点也不复杂，但是软件本身的交互却非常的难用，操作起来非常的痛苦，初次使用很难理解这些操作的逻辑和作用（具体要看录播里的演示，不然讲不完）。

既然要对它进行重构，那么重点就不是用专业的思路来分析现在的交互有什么问题，也不是直接打开设计软件画原型，而是把它当一个新的产品来设计。那么就要根据一个新产品的交互设计流程来走。

其中，需求分析是所有交互设计中最重要的一步，我们要搞清楚产品中包含的具体功能有哪些，以及包含哪些关键的字段数据，还要总结可以收集到的所有产品逻辑出来。

所以第一步，就是整理产品的功能地图和产品地图，理解这个产品中主要的功能有哪些，以及目前的信息和结构层级。

在我的课程或建议中，都建议不管产品经理自己有没有画这些思维导图，你都得自己重画一遍。重要的并不是你画完的结果，而是画它的过程，就是加深对产品本身理解的过程，你会发现很多光靠看别人画好的思维导图绝对发现不了的细节。

而这个产品中，最重要的信息内容就是要展示的数据，且这些数据内容不少。原设计中在主题编辑器的设备和子项可以找到这些信息，要先选择设备然后再查看对应的子项，整理得即不合理又不直观。

所以为了便于后续的方案推进，就要重新梳理一遍包含的核心字段内容。在原来的划分中，设备的条状图、弧形图其实就是统计图表中的百分比条形图和环形图，对数据的展示可以只展示文本，也可以展示图表格式。所以对字段的格式整理不需要用数据库的格式，而是整理在表现层的格式。

主要包含：百分比值、整数、小树、条形图、环形图、时间、文本，七种展示样式。对应的字段和大致规则如下表格所示。

进一步了解产品的逻辑：

- 每个字端在展示中只能添加一次，但是很多电脑中硬件对象不是唯一的，所以需要指定具体硬件

- 屏幕运行需要推送主题数据到硬件，所以运行过程中不能实时更改参数和关联硬件

- 软件不能直接生成导出主题文件，所以即使创建新主题也要从老主题中打开后重新编辑

- ……

然后，再做出一定的用户研究分析。还是那句话，很多前期分析的用户研究，不一定有条件做大范围的真实调研和统计，没那个时间也没那个精力。

你必须根据自己对产品的理解去构建用户的目标和使用场景，然后分析用户的痛点在哪里。还在草案中的产品要靠经验自己脑补，而可以直接用到的产品是最容易的，因为你自己就可以以用户的身份来带入到使用场景中。所以我总结了三种用户的使用场景和相关诉求：

再根据这些场景总结目前的操作流程：

这些信息的整理分析虽然不是直接上手做交互，但是是后续输出交互方案的必要条件，交互要解决的就是怎么把这些信息组织起来并让用户有效的操作。

下面，我们就可以进入具体的交互设计阶段了。

制作交互方案时，有个非常重要的标准，就是你能不能脱离原来的界面（不看它），或者不找任何参考可以完成需求中所需的交互。如果做不到，就证明要不然你对需求的分析不够彻底，不知道自己应该做什么，另一方面就在与你的交互基础过于薄弱，连最基础的交互方式、组件应用都没办法应用出来。

因为，很多设计在做交互方案的时候往往一直盯着老版，或者产品经理的原型来做，这样做出来的东西肯定还在原来的框架里打转，导致原来的问题完全没被解决。要不然就是花大量时间找参考，又找不到一模一样的，然后陷入死循环。

所以我对交互设计技能入门的核心评判标准，就是 —— 根据需求可以独立输出完整可行的交互方案。

下面，就来分享下交互的制作过程，首先是启动主页：

我将页面拆分成左右两个大的模块，将原来的设置窗口合并到左侧区域，预设独立做到做上交，作为操作中使用最频繁，且最重要的控件，将亮度调节和旋转进行右移，让屏幕操作本身和预览区域关联更紧密，更符合亲密逻辑。

左上角的主题选择交互做了一定的调整，就是展开后选择主题窗口不自动关闭，需要点击确认按钮才能实现主题的切换。原因就是如果为了预览主题效果（和切换字体看效果类似），打开下拉菜单选择后关闭再打开重复的操作是非常低效且麻烦的，最好的做法是无缝一个个切换过去，选中自己想要的再关闭。

第二就是为主题的设置做分类，分类标题可以选择展开或者收起。因为自定义信息数量自定义，更多设置包含的内容也不少，所以左侧的空间可以进行上下的滚动。

接着优化主题编辑页面，原设计中，主题编辑页默认为空，需要导入主题后才可以进行编辑。

所以首先优化流程，点击必须先选择要打开的主题文件，然后才能进入编辑模式。同时将编辑页改成左中右三个模块。

因为在编辑状态中，基本的逻辑就是选中并展示对应的字端，然后调整它在画布中的位置，修改它的属性值，这和我们日常用的设计软件很接近。

将内容进一步完成以后，效果如下。

其中左侧就是要展示的字端列表，将原本折叠且非常不直观的字端内容一次性罗列出来，方便我们挑选要放的数据，以及检查哪些已经启动了。

选中后右侧的属性设置会根据字端的类型做出对应的变化。字段的设置包含文本、条形图、环形图三种类型差异，而原设计中把所有属性参数全部罗列出来，不管当前字段包不包含这些设置。同时，将原本显示和隐藏的按钮改成多选框，勾选即显示，反之隐藏。

在原设计中，选中左侧的数据类型画布不会有选中的提示，所以这里也要做出调整，让选中的数据可以在画布中高亮标识出来。

最后就是保存主题的流程，原有设计中的保存主题需要在表单中填写主题名，而优化中把主题名的输入放在点击保存后的弹窗中，通过在弹窗内输入保存完成主题的创建。

这些基本的样式创建完成后，就要对整体的交互方案进行自查，有没有操作的漏洞，或者逻辑的错误。而最重要的，就是有没有满足前面提到的用户在不同场景中的诉求（痛点）。

检查完成后，就可以输出具体的交互说明文档了。

这种简单的项目就要用简单的方式输出，不需要写一份很复杂的文档出来。尤其是作为设计师的话，交互方案确认后要立马展开视觉部分的设计。

还要额外提一点，就是所有交互方案的最佳展现形式，是要以最终设计稿为标准的。前期交互方案用原型是为了做的快，输出起来简单。但是最终的设计稿不一定和原型的布局、交互完全一致，在设计过程中调整方案是非常普遍的情况，如果最后设计稿和交互说明不能完全匹配，那么原来的交互文档就失去阅读价值。

最后，再看看前后版本的对比。

结尾

以上就是本次交互输出过程的对应展示，特地挑选一个非典型的案例做讲解，就是为了让大家更好的理解交互方案是怎么从前期分析到完整输出的。

如果从图例无法理解原产品交互问题和缺陷的话，建议看一看视频前期的操作解析。

目前我们在下一期B端课程还会重点优化交互部分的课程，进一步强调如何在B端中完成交互方案的输出，提高作为B端设计师的竞争力。

想要变强的同学可以扫描下方二维码咨询课程了。

我们下篇再贱～