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

点赞 30
收藏 98
继续阅读相关文章

发表评论 已发布 4

还可以输入 800 个字
 
 
载入中....
4 收藏