Worktile是企业协作办公平台，解决 30-1000 人规模公司的协作、办公和管理痛点，帮助企业实施项目管理、规范流程、搭建知识库以及辅助管理决策。主要功能包括：项目管理、 目标管理、消息、任务、日历、网盘、工作汇报、审批、CRM等应用 。

产品自身功能比较多，改版也比较复杂。我们需要有一个整体的思路，改版主要分为两部分：视觉和功能。视觉部分可以整体修改，功能则根据业务需求逐一迭代优化。我将期间想法做了个总结，不成熟的地方请大家指正…此次项目总结我会将一些设计稿放出来，实际效果以线上为准。

一、项目背景

我通过调研得到以下改版原因：战略调整、品牌升级、用户体验差、规范不一致；

二、设计目标：

1、功能调整

战略调整后产品聚焦“项目”，调整产品左侧导航功能展示，为用户提供更加丰富、精准的内容和服务；

2、品牌升级

调整产品主色，从而在原有用户体验上增加益于品牌的内容；

3、体验优化

交互不合理导致用户流失，通过体验优化提升用户留存率；

交互层问题梳理

体验升级

4、统一规范

梳理旧组件库，统一页面规范，减少后期设计维护成本

以上四点大致可用下图概括

三、执行

围绕四大设计目标，我将这次执行层面细分为：

 

1、颜色

2、栅格

3、布局

4、字体

5、Icon

6、按钮

7、导航

8、表单

9、表格

10、组件搭建

11、后续工作

1、颜色

颜色是改版第一步要解决的问题。产品的颜色不同，带给我们的情绪也截然不同。颜色作为设计的基础，提早定下可以奠定后面的设计风格，提升设计效率。通过用户调研发现，蓝色比绿色更适合作为B端产品的主色。

1.1 选定主色

绿色代表健康、活力、生命、安全、同意。绿色具有自然属性，因此常常被用在健康、自然相关行业，常用在C端产品中，例如、美团买菜、爱奇艺、青桔、星巴克、链家等。

蓝色代表冷静、商务、未来、科技、安全。由于蓝色沉稳的特性，大多选用蓝色当标准色、企业色。在商业设计中，蓝色强调科技、效率或企业形象，例如：钉钉、腾讯文档、Trello、Jira、ONEs等。

综上，蓝色比绿色更适合作为B端产品的主色。

1.2 产品色调

很多小伙伴在产品设计中经常选用黑白灰（中性色）作为产品的色调，我觉得纯黑色（或纯灰）没有生命力，久看会造成视觉疲劳，让用户产生焦虑情绪。

我在设置“中性色”的时候尝试在色彩中加入一些色相，这样既让整个产品页面统一色调，也不会让页面看上去死气沉沉。

在产品主色基础上，我衍生了一系列其他颜色，重新定义了视觉规范；

2、栅格

存在问题

1、旧版设计尺寸偏大：在浏览器适配上，画面存在一定误差；

2、间距存在基数情况，最小网格单位没有遵循偶数原则；

解决方案

首先要确立画板尺寸，根据调研数据，得知主流屏幕分辨率的尺寸为：1920*1080，1366*768，1440*900.

对于屏幕适配，我采用1440*900，因为它更容易兼容且更为主流相对误差较小。

但是在实际设计过程中，显示器的分辨率并不能代表我们的实际设计尺寸，大多数B端产品以浏览器作为呈现方式。我们都知道浏览器的顶部内容会占据一定高度，（这里以谷歌浏览器为主）它的顶部由页签栏、搜索栏、书签栏三部分组成，大概占100px的高度，最终我将画板的尺寸定为：1440*800.

然后根据新画板尺寸，重新定义栅格系统，常见的有12栅格体系、24栅格体系，这里我以12栅格体系为例。

最后确定最小网格单位，对于目前市场桌面设备屏幕而言，4是整除率最高的一个原子，以4px 为单位符合“偶数原则”，这样做的目的：避免页面在缩放过程中像素出现小数的情况。

我将左侧导航由之前的70px调整为60px,然后通过“grid.guide”这个工具计算出栅格所需的参数。

根据自己的需求，选择合适的参数。我们就轻松地将页面栅格化，如下图；

3、布局

存在问题

1、页面内外间距不是偶数，

2、调整页面间距；

解决方案

1、重新定义页面间距，引入了盒子模型，带着研发思维去考虑页面布局，调整Padding和Margin的参数。

我们在检查研发落地效果时，时常打开代码看下参数，如下图。

4、字体

存在问题

1、目前系统中数字字体和其他字体都是苹方，在某些场景下不适用。

例如：苹方在数字字符上，不同数字宽度不一致，导致千分位分隔符不在同一直线上。

2、合理使用字重强调重点；

解决方案

1、将“Helvetica Neue”字体运用在数字场景中；

Helvetica Neue等宽，数值上下对比的时候，相同位置的数字在同一直线上，易于比较。

（下图红色虚线表明Helvetica Neue字体更适合展示数字）

2、在标题中，使用PingFang_Medium字体，标题和内容层级更明显。

总结：

5、Icon

存在问题

目前系统icon视觉不统一；

 

解决方案

1、首先确定图标的设计尺寸，在此基础加一个安全边距，只在设计区域内部绘制；

2、然后使用Material Design的网格系统，参考面积相等原则绘制图标；

3、如果出现绘制完成的图标在视觉上多少会有不协调的情况，就需要凭借自己的主观判断对图标进行微调；

左侧icon中间的对号其实是居中对齐的，但是视觉上给人偏左的感觉。所以我主观将其进行微调，得到右侧icon；

6、按钮

存在问题

1、系统中“半圆按钮”不仅影响视觉美观，而且导致操作区域减小；

2、旧版是设定按钮宽度，这样会导致按钮Padding值不合理；

解决方案

1、将半圆按钮改成小圆角按钮；

在同等尺寸下的按钮中，小圆角的按钮明显比大圆角的按钮更容易操作。

在实际场景，圆角按钮对于下拉菜单的适配也会相当突兀。

2、重新定义按钮规范，固定Padding值。

以“确认”按钮为例：假设字体大小为14px，左右Padding为20px，那么按钮宽度为：68px。

至于多个文字的按钮的长度，我们只需要设定统一的Padding值，然后研发就可以自动计算出按钮的长度。

7、导航

继续沿用左右布局的方式，将导航栏固定在页面左侧。左侧导航优点：扩展性强，快速定位。

存在问题

1、导航承载的内容不满足现有业务需求，调整导航结构需求迫切；
2、导航视觉陈旧；

解决方案

1、功能：将导航分为两部分：主要功能区，次要功能区，另外强化主要功能，弱化次要功能；简化交互方式，“icon+文字”直观展示功能。

2、视觉：调整导航设计宽度，修改导航背景色，优化应用间距，遵循“7+2”的原则使导航承载更多功能。

3、每个应用支持二级导航展开/关闭的功能，让内容区域展示更多的数据；

8、表单

这次优化只针对模态弹窗中的表单。

存在问题

1、表单标签和Input框左右展示，会存出现标签左侧无法对齐的情况，最终影响页面舒适性；
2、按钮靠左侧展示，违背用户的阅读习惯；

解决方案

1、将标签和Input框改成上下布局；

2、根据“古腾堡法则”将表单中的底部按钮靠右展示；

通过上面那张图我们可以看到：用户整个阅读方式由左向右前进，用户倾向关注整个页面的开始与结束区域，至于段落的起始与结尾则较少被关注到，也就是闲置区。尊重用户的使用习惯，提升用户对产品的好感度。

表单的最终呈现样式：

9、表格

表格形式比较单一，但其涵盖功能多而全。对于B端用户，表格的主要功能是对数据进行查看和编辑，细分功能包括：数据展示、保存、筛选、排序、对比、搜索等。这次我将表格的改版分为两部分：视觉样式改版、功能改版。

1、存在问题

1.1、视觉样式陈旧
1.2、现有功能不满足业务需求

2、解决方案

2.1、视觉：将新的视觉规范同步到表格设计中；
2.2、根据业务需求升级表格的功能；

3、绘制表格（基础表格为例）

3.1、组成

在绘制表格前，我们首先需要了解表格由哪些元素组成：标题、表头、单元格、分页、工具栏（新增、筛选、搜索、视图...)

3.2、行高

单行文本的表格，建议行高为字体高度的2~3倍；多行文本的表格，建议内容到上下边的间距小于文字的高度（分组和交叉式表格等特殊情况除外）
这次我将表格中的字号设置为14px,文字行高为22px,表格行高则定为44px（旧版本的行高为55px），改版后同等页面能展示更多的数据。

3.3、列宽

表格在列宽的实现方式一共有两种：固定列宽、百分比宽度。

在实际设计中，我们要根据实际需求设定列宽。接下来我举例说明：

案例一：固定列宽

表格中所有列宽都固定的情况比较少。首先要满足的条件就是固定表格显示区域，不能像页面中的表格适配不同分辨率的屏幕。例如弹窗中的表格，这种场景下的表格字段信息承载量比较少，可以根据实际内容将表格列宽固定，字段信息较多时，我们可以采用"..."省略，鼠标hover时tooltips展示；也可以换行展示，实际情况可根据客户需求调整。

案例二：百分比宽度

这种方式一般用在表格字段比较少的页面中，假设一表格只有3个字段，如果我们固定表格宽度就无法适配不同的分辨率，这时设置百分比就比较满足实际使用场景。

以上两个案例都是在列宽单一的场景中使用，遇到比较复杂的场景就不能满足需求。

案例三：组合使用

这种方式满足的场景比较多，适用面也比较广泛。话不多说，直接看效果图。

3.3、对齐

旧版表格对齐方式：表头在单元格中居中对齐，内容左对齐。

通过分析竞品，我发现其他产品（钉钉、Trello、Jira、ONEs）表格对齐方式几乎是左对齐，为了不违背用户使用习惯，我将表格统一左对齐（金额数据右对齐）展示。

金额右对齐

带金额的字段右对齐的目的是便于用户阅读，让我们通过一张图直观的展示金额右对齐的优点。

10、组件搭建

组件的优势：利于多人协作、便于修改、提升效率

 

存在问题

1、历史组件陈旧、功能不完善，不能满足平时工作需求；

2、组件名称不规范；

解决方案

1、根据新的应用场景，丰富原有组件库；

2、统一组件命名逻辑:   分类 / 模块 / 组织 / 分子 / 原子，命名依次是从大到小；

 

案例：创建按钮组件

1、在画板中创建一个96*36px的矩形，圆角设为4px。去掉描边，随意给个填充色。

再加个14px的文字，行高设为22px，文字与矩形居中对齐；

2、点击创建控件，修改组件名称“Button/primary button/M/normal”，选择布局方式“水平居中对齐”，然后点击确定。这样一个组件就创建好了；

3、使用时，我们直接再打开sketch中的控件拖动使用即可；

以上是最基础的组件创建，复杂的组件就是将多个组件组合在一起，根据不同使用场景，搭建相应的组件即可。

复杂的组件使用情况：

11、改版后的工作

1、输出研发

在确定新设计规范后，我们就需要将设计稿重点部分标注好，交互细节也需要在设计稿中体现，一定要将本职工作做好，然后移交研发。

2、测试

研发将设计落地后会在测试环境发布一个版本（此前研发会先测），设计师和市场部的同事会进行测试。

测试分为：功能测试、UI样式测试、交互逻辑测试。有的公司内有专职的测试，但是对于UI细节问题，还是需要设计师去走查。如果没有，那设计师的测试工作就需要更加严谨。此期间遇到问题时，我们要做好记录。我们公司内部会有专门记录缺陷的系统，便于后期管理。没有这类工具的同学可以将缺陷记录在语雀和石墨文档上，word文档也可以，缺陷要描述清楚，截图一定要有。最关键一点：不能遇到一个缺陷就去找研发处理，要将缺陷整理好统一交给研发。

一定要把握这段时间，如果上线后遇到问题，占用的还是大家的时间。虽然这种情况无法避免，但是在设计师所负责的环节一定要控制好。

3、市场检验

经历测试，研发修改缺陷后，最后终将迎来上线这一刻。通过市场检验后，市场部同事会将用户数据和意见反馈回来。产品会针对这些意见进行筛选，评估，最后将其放在新的迭代中。

 

到这里，改版的工作才算告一段落。后期的迭代优化是一个漫长的过程。