桌面软件界面改版实践

界面视觉风格老旧。
- 与软件当前操作系统的风格脱节。
- 与竞品相比，视觉风格已经成为被吐槽对象。
- 影响到了用户体验。
界面布局逻辑与交互方式不符合业务发展。
- 界面布局不符合当前软件轻量化的需求。
- 业务功能累积，导致界面臃肿。
不符合界面风格流行趋势的发展
- 拟物–扁平化
不符合公司产品品牌形象的要求
- 为使品牌形象统一，公司各个软件之间界面风格与操作体验需要保持一致，需要对后加入的产品或者收购产品进行一定程度改造。
- 公司市场品牌形象升级的需求。

1.2 界面改版的时间间隔

操作系统平台改版时间间隔
- Windows：5年左右
- Mac OS：4-8年

Windows 1.01，1985
Windows 3.0，1990
Windows 95，1994
Windows 98，1998
Windows 2000，2000
Windows XP，2001
Windows Vista，2005
Windows 7，2009
Windows 10，2015
Windows 11,2021

System-1x，1984
A/UX 1x，1988
Mac OS 7.1，1992
Mac OS 8.1，1998
Mac OS 9.1，2001
Mac OS 10，2001
Mac OS 10.5，2005
Mac OS 10.10，2014
Mac OS 11，2020
Mac OS 12，2021

软件在界面改版的时间间隔
- AutoCAD：5年左右
- Photoshop：3-5年

AutoCAD 1x-dos，1984
AutoCAD R11，1990
AutoCAD R13，1994
AutoCAD 2000，1999
AutoCAD 2005，2004
AutoCAD 2009，2008
AutoCAD 2015，2014
AutoCAD 2020，2019
AutoCAD 2022，2021

Photoshop 0.63，1988
Photoshop 3.0，1994
Photoshop 4.0，1996
Photoshop 5.0，1998
Photoshop 6.0，2000
Photoshop CS，2003
Photoshop CS3，2007
Photoshop CS5，2010
Photoshop CS6，2012
Photoshop CC 2013，2013
Photoshop CC 2017，2017
Photoshop CC 2021，2021

无论桌面端、网页端、移动端的产品都有界面改版的需求，除了每年进行界面上的微调之外，在5-10之间界面都会有一个较大的改版重构。对于用户体验设计师、界面视觉设计师、产品经理而言、程序开发而言，软件界面的改版是不可避免的一部分。从软件生命周期上来看，一款产品从诞生开始直到不断发展程度的过程也必定会经历多次界面改版。

在过去两年间，我处理了3个软件界面改版，下文中将归纳总结3次改版实践中的整体流程和操作思路。

二、项目实践

2.1 项目背景

2.1.1 新界面框架-BNUF

新界面框架（BNUF，2022年后改名为GNUF）从2020年初进行开发。在功能迭代开发的同时，同步在建筑软件中进行集成，结构、机电软件也是在新界面框架的基础上进行迭代开发的。

在将新界面框架集成至其他产品前，新界面框架已经在建筑、结构、机电产品上应用，相对稳定并且涵盖了软件需要界面能力，所以新界面框架完全满足集成至其他软件产品的前提基础。

建筑GAP软件
结构GST软件
机电GMEP软件

2.1.2 集成新界面框架项目

所以从2020年10月开始至今，陆续启动了以下三个产品的新界面框架改版的专项任务。

“BIMMAKE”新界面框架改版——2020年10月-2021年6月
“构件编辑器”新界面框架改版——2020年11月-2021年6月
“路桥隧BIM设计软件”新界面框架改版——2020年10月-至今

BIMMAKE主界面设计稿
BIMMAKE主界面实现截图
构件编辑器主界面设计稿
构件编辑器主界面实现截图
路桥隧软件实现截图

2.2 如何做好界面改版升级

2.2.1 团队内部价值松土

改版项目开始前，团队内部沟通与价值松土至关重要。

对于软件产品的管理者和开发来说，新界面改版这件事听上去就像是换个皮肤，但是又要消耗大量的开发资源，影响产品任务的开发进度，又没有用户抱怨这点，所以为什么要花时间做这事呢？

说服团队并传递界面改版的价值至关重要，在推进界面改版专项前期需要做充分工作。把握以下三点：

1.抓住当前现状

老界面框架的瓶颈与问题：

老界面框架是第三方框架，对于应用层面来说是一个黑盒，功能上不具有改造提升的空间，无法适应软件业务需求发展。—-迟早要换，晚换不如早换。
老界面框架操作体验不佳，布局不合理，画布绘制空间小。—-老界面框架过于久远，不符合设计师操作需求。
老界面框架视觉风格自定义的空间非常小，只能沿用第三方默认的界面样式，提出修改界面样式调整需求，要不不能实现，要不就是工作量巨大无比。—-老界面样式太老，不符合现代设计工具风格。

2.强调改版价值

界面改版是具有实际价值和意义的，当站在以下角度去看待时，这是一个值得投入成本去做的事情：

提升产品品牌形象
提升产品体验好感度
保持数字设计BG产品交互与视觉一致性

此外，新界面框架本身还有以下优势：

新框架已有的新特性是即拿即用的。
新界面框架还在不断成长。不仅能够支持软件当前功能，还能为后续产品功能需求的扩展提供支持。
新界面框架有专属开发团队维护。并且接收使用新界面框架软件产品所提出的需求。

3.宣讲成功案例

刚才提到新界面框架的开发完善的同时，已经同步集成到了建筑、结构、机电设计软件中，这就是一个现成的成功样板，对于后续集成的软件有较大说服力，不用担心自己是实验的小白鼠了。

这点在BIMMAKE推动界面改版的过程中打消了开发团队的疑虑，随着后续BIMMAKE、构件编辑器、路桥隧等产品完成新界面框架后，拥有多个成功的新界面集成案例后，就更具说服力。

4.其他

内部拉通时需要注意产品团队内部的干系人，以下人员需要进行重点沟：

产品负责人
开发负责人/架构师
产品经理负责人
其他人员：测试经理、负责市场的经理可能也知晓

作为执行者，去推动界面改版的落实执行总有力不从心的感觉。即使前期部门领导之间已经达成过初步认知，但实际推进过程中还是会有得不到响应或者优先级过低等情况。我们需要对产品开发团队内部的困难表示理解，但是如果真遇到无法推进的情况，可以请求用户体验部门领导出面帮忙把项目向前推动或者扫除障碍。

在界面改版项目开始前，提前进行用户调研与竞品对比分析，通过调研和分析报告向团队输出当前产品的不足，让团队关键人员认识并明确所存在的差距，也是一个非常好的方法。

站在更高的全局视野，从公司品牌形象，产品体系的角度考虑，界面风格改版也是必须进行的。

4.价值松土案例

2.2.2 用户调研访谈

对于调研访谈，以下几点是需要把握的：

1.访谈目的

针对当前软件进行用户访谈，访谈有以下目的

了解用户对软件旧界面反馈。
了解用户对软件新界面改版的反馈。
沟通初版改版方案和界面功能特性。
用户对软件界面改版的接受度。

2.访谈用户选择

被访谈用户需要选择相对资深的软件使用用户，最好挑选已经将当前软件用于实际项目中的用户，这是最理想的访谈对象。

因为在实际项目中应用软件，所以这类用户对软件整体操作或某一功能模块比较熟悉。并且因为已经在实际项目中应用了，这部分目标用户也是软件界面改版后对他们造成影响最大的，会影响实际利益与工作时间投入的。他们也会反馈实际使用中切实的痛点。

另一个原因，这一部分用户是对改版最敏感的，也是改版软件产品负责人最在意的。如果这类用户不满意改版后结果显然会让软件项目负责人有很大的压力，所以采集这部分目标用户的建议和对于改版的接收程度至关重要。

不同于资深用户，小白用户或者初学者用户还未在软件上投入太多的学习成本，对于软件如何改版无所谓，无论如何改版都不会造成很大印象。

3.访谈内容

访谈问题应当围绕访谈目的设置，包括以下部分：

被访用户的基本情况、使用习惯、常用软件等
当前软件中的问题，用户的期望的优化方式，考察是否能够能够通过新界面改版解决此类问题。
新界面改版的概念设计稿介绍讲解，强调新界面改版后的优势与对用户的价值，并收集用户对新界面改版的反馈，以便后续详细设计深化方案时纳入考虑范围。如：
- 界面功能模块的布局逻辑是否足够清晰？
- 功能命令的操作动线是否足够流畅？
- 旧版本软件中的重要能力是否都涵盖？
- 界面视觉风格是否有不适？
更直接的方式，如果有可以展示体验的类似产品可以远程让被访用户使用体验一下，看下用户的实际使用情况。
明确问用户是否支持新界面改版以及刚刚展示的概念设计。

4.问卷反馈

访谈过程中全程录屏，并做好访谈记录，方便会后整理访谈小结。

结束访谈后，发送一个访谈问卷让用户进行投票，可以将访谈内容中你最为关心的问题放到问卷中，让用户通过问卷再次投票。这么做的好处：

直接，通过问卷中量表题的设置可以得到最直接答案。
客观，用户直接填写的问卷不存在加工演绎的成分。
清晰，结果呈现清晰，投票反馈相比访谈纪要更加具有说服力。

访谈结果收集后，进行汇报和分享，新界面改版得到资深用户的支持，可以继续向前推进，并将访谈的建议意见在设计深化时纳入考虑范围，或作为BUG/任务/用户故事收录至Jira库中。

5.访谈案例

2.2.3 初步沟通项目安排

1.共识改版范围

控制范围，分阶段进行。
- 界面的初版改版可以针对可发现性较高、必经流程的界面进行优化改版工作。如软件主界面、欢迎界面、启动界面等。
- 第二阶段改版再考虑隐藏较深的二级界面，对话框等界面的改版工作。理由如下：
  - 对话框散布在软件各处，有些层级较深，不易被发现，沿用老界面对整体界面感受影响不大。
  - 对话框中插入的多为表单控件，替换任务较为琐碎，且关联业务逻辑比较深，可以先不做改动。
任务聚焦，界面改版每个阶段需要有任务的聚焦
- 建议新界面改版时可以优先处理界面UI视觉上的优化。
- 当前软件中存在的交互和体验问题、命令分类分组、操作动线等需要开发额外花费时间，或者产品经理额外花费时间处理的问题可以先暂时搁置。
  - 一方面有聚焦，项目推进起来更加清晰
  - 另一方面，这些问题与产品业务或者老框架能力边界高度相关，如果这种能力不是新界面框架中就默认包含的，会造成任务范围不可控，一个微小的界面拖动行为或者控件的替换可能就需要花费大量的开发工作量去处理。
非开发任务
- 整体工作量的大致评估，可能不仅包括界面改版开发工作量，其他的日志，自动测试脚本，帮助文档，已有视频教程，培训PPT等一系列工作都要花费大量时间，也需要明确是否在改版范围内。

BIMMAKE改版范围
构件编辑器改版范围
路桥隧改版范围-第一阶段
路桥隧改版范围-第二阶段

2.确定改版节奏

改版的范围确定后，可以确定改版节奏，给出大致里程碑的时间节点。
根据时间节点确定各个岗位工作任务的时间节点。
- 用户体验团队详细设计工作的时间节点。
- 开发评估新框架。
- 具体开发工作的时间节点。
  - 根据界面改版范围拆分开发任务。
  - 评估开发工作量。
- 留有时间给测试与优化调整。
- 非开发工作项目安排：日志、测试脚本、帮助文档、视频资料等。
指定负责对接的开发人员，方便后续事项对接。

3.注意事项

作为项目负责的设计师，主动给出改版的范围与节奏的方案建议，并在会上讨论共识。

新界面改版项目的发起与组织者是用户体验团队或设计团队，我们在项目正式启动前应当尽可能承担起多种角色，包括项目前期验证、推进、进度安排等等。因为这件事情是我们想要去做、去推动的。不能寄希望于其他同事帮忙协调、给出安排。给出我们的期望与建议，然后再与各方协商达成一致。

当然还有部分工作是需要非常强专业能力，我们无法承担的，比如：

具体开发任务拆分、工作量评估等。可在项目正式启动后交由开发负责人安排。
功能命令图标的业务含义、功能命令的分组等。详细设计过程中如涉及到这类问题后请求产品经理协助处理。

1.界面布局

界面改版产品自身需求，如：
- 顶部通栏的文件命令放置位置
- 工具栏页签
- 浏览停靠面板和属性面板的排布
- 支持多文档
某些模式下的特殊布局需求。如：
- BIMMAKE可视化模式下界面变化
- 路桥隧启动拉坡模式下的界面变化
新老框架的差异点，特别注意新框架有哪些能力是老框架所不支持的，如：
- 平铺视图
- 工具栏二级分组名称
利用新框架的优势

2.界面样式

对于界面样式处理比较简单，新界面框架已经在建筑、结构、机电软件中完成了集成，并且有成熟完整的设计规范。在针对改版软件做详细设计深化时，直接套用即可，没有需要特殊考虑之处。

3.图标重绘

图标是主界面重要的组成部分，改版过程中大量时间也花费在图标整理与调整上。

整理当前软件中图标和以及图标对应的功能含义。
提交给图标绘制外包或由自己绘制，按新框架视觉风格重新绘制图标。
- 尽量分批提交，分批绘制。
- 每批提交给外包数量不要过多。
  - 如果一批图标为100个或者200个数量级那就太多了，沟通过程较长也不利于质量把控。
  - 每批图标50个左右比较合适，业务属性较强的图标给外包交底需要花费较长时间，按实际经验，60个左右图标光给外包讲解交底就要花费1.5小时左右。
图标外包管理
- 明确最终提交时间。预估外包图标绘制时间，控制好图标最终提交时间。
- 需求交底。业务复杂的命令图标需要与外包进行充分详尽的需求交底，可请求产品经理协助，但设计师自己也必须对功能命令图标有较强的理解。
- 中间过程肯定会有反复。根据经验，在外包提供图标初稿后，往往还有1-3次的修改调整过程，需要把这段时间考虑在内。
- 考虑外包的工作负荷。外包需要同时处理我们提交过去的多个产品的图标绘制需求，其他产品高优先级的图标需求会挤占外包工作时间。

图标绘制管理案例

4.图标替换

图标会来回反复，是一个漫长的过程。
- 数量多，BIMMAKE涉及600多个图标文件，无法一次性到位。
- 查漏补缺，需要来回调整多次和补充绘制。
- 业务深度较大，含义模糊的图标往往拖到最后才能确定一个妥协方案。
图标目录结构与开发同学一起确认。
- 按一定逻辑对图标进行分类。
- 确保一个功能命令的图标大家都能知道位于哪个命令夹下面。
- 后续替换放置图标时，大家能够放置在正确位置，降低后续维护成本
图标文件的命名与开发同学一起确认。
- 图标文件命名方式、名称也是开发同学关心的，图标目录路径和图标名称都会被程序引用。
- 图标文件命名一旦确定确定下来后，后续不再修改。
- 使用符合开发习惯的命名方式。根据与开发负责人的商量，BIMMAKE和路桥隧采用了不通过命名方式。
图标替换操作方案
- 图标可以等开发收尾阶段整体替换，所以开始时未绘制图标先用占位符，使用一个显眼的纯色图片作为占位符，这样后续走查不会遗漏。
- 图标的目录结构和图标命名和开发共识敲定，没有特殊原因是不会改变的，开发同学代码直接引用正确图标路劲即可，如果图标文件有改动，可以直接覆盖素材替换，而不需要修改代码。
- 为了方便开发覆盖替换图标，使用图标整体文件夹覆盖的方式，这样当你调整修改多个图标后，开发不需要去一个一个寻找图标目录位置，只需要完全覆盖整个图标文件夹即可。（这么做可以减少很多琐碎的沟通和查找替换等工作量，注意在界面优化的过程中图标反复会有很频繁，每次又有多个或十几个图标需要替换，完全覆盖的方式可以大大减少开发琐碎工作）

图标目录结构和图标命名确定后，将会一直沿用，后续不做修改。这一工作可以开发完成，也可以由设计来完成。

由于之前工作中处理图标一直碰到以下问题：

图标目录文件中所有图标平铺放置，没有分类。
很多僵尸图标，完全不知道图标有没有用在软件中。
图标命名方式太多、太随意，无法和命名名称建立起对应，只能到软件界面上一个个对应着找。
图标数量的增长对于图标管理成本的影响是指数级上升的。

再考虑到在整个界面集成过程中图标会持续反复，所以我认为图标目录结构和图标命名的确认和整理工作由设计师来做也是值得，花费1-2天左右时间，一个清晰图标目录结构和图标名称会大大减少界面改版过程中替换图标、维护图标的成本。

图标替换操作案例

5.界面能力提升

当然除了界面框架提供的已有能力之外，各个产品还会提出自身需要的特殊需求，比如：

BIMMAKE：
- 平铺视图
- 多文档能力
构件编辑器：
- 属性面板表单中带有按钮的控件
路桥隧：
- 属性面板表单中数值控件根据鼠标定位位置同步更新变化
- 左侧资源浏览器停靠面板支持用户自定义拖拽
- 支持资源浏览面板分页之间不同面板的数据联动

对于这一类界面能力提升的界面需求，我们要区分：

哪些是产品端可以实现的（特有的），由产品部门的开发负责实现。
哪些是框架需要支持的（通用的），由界面框架开发负责实现，然后产品端再集成。

如优先级不高可以暂缓实现，先将目标聚焦于界面框架已有能力的集成，避免分散开发资源。

2.3 界面改版开发落地

2.3.1 开发推进

如上文说，界面改版任务分阶段渐进，每个阶段中拆分开发任务至每个迭代。比如：
- 图标替换是一个阶段性任务
- 软件内对话框，或者隐藏较深的一些界面是一个阶段性任务
- 新框架能够做的交互优化项目是一个阶段性任务
- 确保每个阶段保证能够有针对性
部分设计任务可以与开发任务同步开展。
开发任务错开，不影响正常功能的开发。
需要倒排发版时间，除了界面开发的任务，还需预留新界面框架集成后的其他处理事项
- 日志
- 帮助文档
- 视频
- 培训教材

2.3.2 集成后测试

在软件集成基本完后后，有条件的情况进行多轮测试：

设计走查与QA测试。在界面集成过程中按迭代集成进度对成果进行测试。由于QA资源紧张所以界面改版项目可能不配备QA，那么质量把关就需要设计多承担一些。发现问题迭代中尽快处理。
用户体验团队自测。一定阶段完成后可以邀请用户体验团队成员进行小范围的群测。邀请熟悉界面框架的设计、有能力使用改版软件的设计，进行自测可以设置一个简单的任务，使用软件按步骤完成任务。发现问题反馈整理至开发团队。
产品团队群测测试。此时主要功能基本集成完毕，软件已经相对稳定，可以邀请产品团队的产品、开发、测试成员一同进行一轮规模略大的群测。群测中会发现和反馈更多问题。挑出优先级高、严重程度高的BUG和需求，修复后，就有信心给外部用户测试了。
外部用户试用。挑选资深外部用户，进行新界面改版软件的试用体验。此时还是会发现很多问题，整理收集，排除高优先级BUG和需求后，安排开发任务。这个阶段结束，基本已经扫除了各种重大BUG。问题修复后就基本能达到发版要求了。

BIMMAKE的改版实践中是按这个步骤进行的，BUG修复和软件稳定也是需要一个过程的，2021年1月基本完成集成之后，至2021年5月使软件稳定达到正式发版的要求。