Worktile 8.0 服务升级的设计思考

2019年11月16日，Worktile 8.0 正式上线。随着产品的升级，我们的设计体验也随之升级。整个产品耗时近一年，从最初的一个组件、一个界面、一个产品、到最终四个产品的呈现，我们的设计团队付出了比以往更多的时间和精力，每一点都精雕细琢，精益求精，我们希望能给用户最好的产品体验。

首先，我们对整体的设计体验进行了梳理，相较于 7.0 而言，Worktile 8.0 的产品定位等方面发生了很大的改变。我们所有的改变主要围绕以下几点元素：

产品定位的改变：从专注于企业协作到智简研发

用户群体的改变：从所有企业成员到研发人员（包括产品，设计，研发）

开发成本：考虑到产品整体的开发成本、组件的复用率、用户的学习成本等，我们对整体的视觉体验进行了升级。

产品目标：Worktile 8.0 希望能实现基于敏捷的需求规划与迭代，无缝支持Scrum，链接用户故事到代码，测试，缺陷，设计和工时，助力企业研发效能，更快更好的交付产品。

接下来我们将通过模块化的方式展示产品中主要页面的背后思考。

01.色彩的应用

颜色是用户感知界面内容及产品特性的直观方式和媒介，合理且和谐的颜色搭配能够提高界面的可用性，为我们的界面带来统一且可识别的一致性，提升用户体验和感知，所以我们再品牌色和产品内部颜色的使用上都做了比较大的升级。

首先，在品牌色的选择上，我们经过多轮尝试和讨论后，决定选用蓝色作为品牌色。 Worktile 8.0 作为一款工作软件，用户是需要长时间、沉浸式使用的，产品调性应是简洁明快的，不宜让视觉效果喧宾夺主。因此在做产品的整体视觉设计时，没有使用过于强烈的色彩和过于刺激的设计感，尽量减少了干扰用户的细节，使用户专注于工作内容本身。并且，蓝色的色彩含义为“理性”“沉稳”，不会过于张扬，更适合 Worktile 的产品特性。

其次，在选择产品内部颜色时，我们希望它是纯粹、经典、理智的，所以我们抛开了丰富的彩色系，选用无彩色的黑与白，左侧导航栏为黑色，内容区域为白色，黑白极致对比的明显。同时，可以让用户不再受到色彩的影响，更多可以聚焦到有价值的操作区域和重要的内容区域，回归到内容的本质。

02.整体布局优化

在整体布局上，我们希望整个界面简洁明了，因此去掉了toc的右侧二级导航，调整了每个内容区块上下左右的间距，使内容区块更聚焦，展示信息更全面。下图是toc导航列表和现在8.0项目列表的对比，在两个项目列表中寻找同样题目为【wt-bug】时，很明显在 8.0 的项目列表会更好找。

03.表格组件设计

我们通过对表格显示字段类型的划分来整体规划字段内容所在区域的宽度大小，使内容展示更加规整。

并且，我们基于 7.0 的表格对宽度和高度进行了适当的调整，使内容更聚焦，还在表头新增了快捷排序和对表格的拖动功能，用户可以更快更方便的进行操作。

04.详情模块设计

不同类型下的工作项详情所包含的table是有一定变化的，在敏捷开发的过程中每个类型的工作项承担的作用是有所不同的，所以它所关联的信息及工作项的种类也不同，因此任务界面也会有所不同。

在任务详情页面，我们做了以下几点调整：

1、放大了任务详情界面，并把“评论”移到了左侧的位置，用户在阅览评论能更加直观，而且评论与左侧工作项的详情两者之间更好的协调兼顾。

2、任务标题及任务字段进行了交互体验上的优化，用户的每一步操作都能得到及时明确的反馈。

3、对关联工作项的视觉进行了调整，我们把类型的icon、编号、标题以及状态在一个维度上横向表达出来，使界面更规整，工作项更清晰的得以展示。

05.任务板设计

任务板的作用是可以实现用户在不同的视图下快速且明确清晰的看到当前迭代中我们的任务进度。在整个任务板的设计中最大的难点在于任务板可以自定义列，并配置每列映射的关系，就会出现同一列下会存在多种状态、不同工作项的状态也会不同等一系列复杂的问题，所以在交互的处理上需要对他们之间的关系有一个清楚的梳理，而可视化和灵活度也就成为整个任务板视觉及交互设计的重中之重。

以上，是 Worktile 8.0 服务升级的设计思考过程。我们从前期调研到中期的产品交互设计及视觉输出，再到解决后期研发中出现的实际问题，每一步都耐心打磨，最终呈现出的全新服务体验的8.0升级。所做一切，都是为了给用户持续提供更好的体验。

// WDC团队
// 2019-11-28