项目实战复盘！WPS Office 移动端全新改版项目总结

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

金山 WPS Office 移动端是金山公司打造的、运行于多平台上的全方位全功能办公软件，国内同类产品长期排名领先，支持查看、创建和编辑各种常用 Office 文档。用户在手机和平板上可以随意切换使用，满足用户随时随地办公的需求。

改版背景

1. 改版的原因是什么？

在这次改版前，WPS Office 移动端由于平台项目多年发展方向不同，在 Android 和 iOS 系统平台下是截然不同的，功能操作和视觉风格都存在很大的差异。我们不是做一个工具，而是做一个办公品牌。当向用户介绍、推广 WPS 产品的时候，拿出各端界面一致的产品，品牌归属感更强。

根据内部统计数据了解到，每天有数万用户是有跨平台使用的习惯，即有在两个平台下打开和编辑文档的需求。用户群数量不算少，而两端不统一的问题会给这批用户造成困扰，使用的学习成本变高。

两端的不一致除了给用户造成使用上的困难外，内部设计师对于同一个功能也需要针对两端的风格进行设计，无论从风格和尺寸上都存在差异，大大降低设计师的工作效率。而随着近几年「设计系统」的普及，我们逐渐有意识地思考和探索设计资源的整合和统一的可能性。移动端进行了一次全新视觉体验的大版本迭代，对用户和内部来说，都是势在必行的。

2. 设计目标

改版的最终目的是为了让用户更低门槛、更低学习成本地跨端使用。用户在 PC 上的使用习惯，在移动端也受用，跨端使用更顺畅。而根据我们挖掘的各项问题，最终得出改版的核心目标。

• 风格统一。将两端从交互到视觉的方式进行梳理与整合，提供用户一致的功能操作和视觉体验。
• 资源复用。建立统一资源库，内部设计师使用同一套控件资源库，避免同一个功能出现多套资源的情况。
• 提高效率。配备完整的规范，使新风格的设计有理有据，以文档传阅的方式，提高设计师与产品开发等工作流程的沟通效率。

在开始改版前，我们就将整个改版的流程以及所需要的产出内容，提前梳理了出来。这样有利于我们在后续的工作中把控时间和产出，也方便与产品开发沟通时间节点，明确流程目标，加大设计在改版过程中提高效率的作用。

确定方向

WPS Office 是一款全功能办公软件，里面包含了非常多编辑和查看文档的功能，所以设计的期望是给用户一种简单、高效的使用体验。在考虑设计的过程中，我们将这两个特点作为切入点，加入到我们的探索方向中，作为重要的考量因素。

1. 回归最纯粹的浏览体验

在分析旧版本中，我们会发现两端的首页都有不同的内容颜色占比，比如 Android 版本中头部的红色导航栏，iOS 版本中的应用入口。让用户第一眼无法关注到真正想查找的文档区域。

而用户使用 WPS Office 的首要目的就是查找和编辑文档，所以我们将首页中的非关键位置的颜色存在感降到最低，把原本容易造成干扰的导航栏统一成浅灰色，用户可以把注意力集中在文档列表中，快速找到需要被打开的文档。

同时把品牌颜色放在用户常用操作上，在用户需要时，也能快速定位到关键功能上，提升浏览效率。

2. 提高文档辨识度

四大组件，文字、表格、演示和 PDF，是用户日常使用最多的文档格式。用户点击进入文档后，我们希望用户可以在第一时间知道自己处于哪个文档，便于用户识别。

WPS Office 功能非常丰富与强大，因此也有容易造成用户理解上的难度，所以我们对所有操作功能都配上了专属的图标，搭配文字后尽可能让用户感知到该功能的作用。

3. 提高内容阅读效率

稻壳（Docer）是金山办公旗下专注办公领域内容服务的平台品牌，为各行业用户提供专业的原创模板、办公文库和职场课程，为稻壳用户不断创造多样化、个性化的优质办公内容资源及服务。

视觉上，我们将原本金刚位的图标进行更新，在纯色的基础上增加了金黄色的细节点缀，丰富会员的尊贵感。

页面结构上，应用了组件化思维，将版块中的不同内容进行了拼合，如版块由标题 - 标签 - 内容三个模块拼合，组成新的版块。这样除了能让用户有统一的视觉感受，还能减少创建不必要的样式，降低了设计师和程序员的开发成本。

资源统一

1. 格式图标

文档图标在两个平台中并不统一，是两个截然不同的风格，Android 是扁平简约风格，iOS 为写实风格，文档格式的颜色块和标识偏小，一眼不容易分辨。

在设计新风格图标之前，我们对原有文档格式的图标色彩进行梳理，发现色彩的使用没有太多的参考。根据用户每日打开文档数作为数据参考，经过简单分析，就可以清楚地发现用户每日打开的常用文档类型。

在新版本中，将主要文档格式定义出专属的颜色后，将用户使用率较低的文档颜色统一成一致的颜色，这样用户可以快速识别出常用的文档。

我们调整了图标的结构和范围，提高图标的辨识度。

通过多项规则的定义，最终产出新风格的文档图标样式。

2. 操作图标

WPS Office 作为国内最强大的文档处理软件，组件内的每个操作都会配有图标作为辅助图形，让用户快速寻找所需操作。而在旧版本中，两个平台的操作图标很多存在同一个功能，出现在两端的图标风格各异的情况（尺寸，圆角等问题），对设计师和用户都容易造成混淆。

统一操作图标的风格是很有必要的工作，我们对所有操作图标进行梳理，汇总近千个图标，定义新的视觉样式规范，进行整体的绘制。

虽然这项重绘工作量很大，但是统一资源后，两端使用同样的样式，并且有专属的分类命名，使用起来不再出现混淆，减少资源库的容积。

3. 缺省页插画

梳理两端的缺省图，形式比较单调，缺少趣味性，因此在这次改版中也针对情感化的插画进行调整。我们将插图的构图以主体 + 背景 + 点缀小人物拼合的方式，增加插图的场景感。

插画师还给不同场景绘制了数十个不一样的人物动作，来模拟用户不同场景下的人物特征。

配色上将原本的单色图增加了多个颜色，给用户更丰富的视觉感受。

经过几次风格探索后，最终选定当下流行的插画风格，面型图形表示内容，搭配小人物元素，丰富场景，乐趣满满，等你来发现。

设计系统

我们创建了针对文字和图层样式的样式库，方便设计师和开发快速地沟通，规范化可以避免出现特殊样式的情况。

为了让设计系统更易于推广，还撰写了详细的设计规范，将所有涉及到新风格的设计样式、布局尺寸和使用说明都记录下来，方便跟开发沟通，降低来回沟通的成本和出错次数。

总结

这次改版最终有明显的成效，两端控件和样式统一后，大大降低了设计师的设计成本，把跨端设计成为一种可能性，体验上降低了的用户学习成本。为了让用户可以感受到一个更整体统一的应用，把很多精力放在了设计上。项目时间紧急的情况下，还有很多优化点没有实现，都作为以后继续优化的方向，希望给用户提供更好的体验感受，享受到方便快捷的办公方式。

进阶方法！可能是最全面的组件设计完全手册

后台系统中，存在大量的组件，合理的应用是做出良好产品的基本功。

欢迎关注「MU设计团队」公众号：