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

金 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设计团队」公众号：