赞助商
立即赞助

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

UI设计3年前 (2021)发布 流光
3.8K 0 0

金 WPS Office 移动端是山公司打造、运于多平台上全位全功能办公软件,国内类品长期排名领先,支持查看、创和编辑各常用 Office 文档。用户在手和平板上可以随意切换使用,满足用户随时随地办公需求。

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

改版背景

1. 改版的因是什?

在这次改版前,WPS Office 移动端由于项目多年发展方向不同,在 Android 和 iOS 系统下是截然不同的,功能操作和视觉风格都存在大的差异。不是做一个工,而是做一个公品牌。当向用户介绍、推广 WPS 产品的候,拿出各端界面一致的产品,品牌归属更。

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

根据内部统计数据了解,每有数万用户是有跨使用的习惯,即有在个下开和编辑文档的需求。用户群数量不算少,而端不统一的问题会给这批用户造成困扰,使用的学习成本变高。

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

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

2. 计目标

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

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

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

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

在开始改版前,我们就将整个改版的流程以及所需要的产出内容,提前梳理出来。样有我们在续的工中把控时间和产出,也方便与产品开沟通时间节点,明确流程目标,加大设计在改版程中提高效率的用。

确定方向

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

WPS Office 是款全功能办公软件,里含了常多编辑和查看文档功能,所以设计期望是用户简单、高效使用体验。在考虑设计过程,我们将这两个特作为切入,加入到我们探索,作为要考量素。

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

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

在分析旧版本中,我们会发现两端的首页都有同的容颜色占,如 Android 版本中头的红色导航栏,iOS 版本中的应入口。户第一眼无法注到真正想查的档区域。

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

而户使 WPS Office 的首要目的就是查和编辑档,我们将首页中的非键位置的颜色存在感降到最低,把原本容易成干扰的导航栏统一成浅灰色,户可把注意集中在档列表中,快速到需要被打开的档。

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

同时把牌颜色放在户操作上,在户需要时,快速定位到键功上,升浏览效率。

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

2. 提高文档辨识度

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

四组件,文字、表格、演示 PDF,用户日常使用多的文档格式。用户点击入文档后,我们希望用户可以第一时间知道自己处于哪文档,便于用户识别。

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

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

3. 提高内阅读效率

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

稻壳(Docer)是金办旗下注办领域内容服务的平台品牌,为各行业用户提供业的原创模板、办文库和职场课程,为稻壳用户不断创造样化、个化的优质办内容资源及服务。

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

视上,我们将原金刚位的图标进行更新,在纯的基础上增加金黄的细节点缀,富的尊贵感。

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

页面结构上,应用组件化思,将版块中的不同内容进行拼合,版块由标题 – 标签 – 内容三个模块拼合,组成新的版块。样除能让用户有统一的视感受,还能减少创建不必要的样式,降低设计师和程序的开成。

资源统一

1. 格图标

文档图标在两个平台并不统,是两个截然不风格,Android 是扁平简约风格,iOS 为写实风格,文档格颜色块和标识偏小,眼不容易分辨。

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

在设计新风格图标前,我们原有文档格图标色进梳理,发现色使用没有太多参考。根据用户日打开文档数作为数据参考,经过简单分析,可以楚地发现用户日打开常用文档类型。

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

在新版本,将主要文档格定义出专属颜色后,将用户使用率较低文档颜色统成致颜色,这样用户可以快速识出常用文档。

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

我们调了图标结构和范围,提高图标辨识度。

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

过多项规则定义,最终出新风格文档图标样。

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

2. 操作图标

WPS Office 作为国最强大的档处软件,组件的每个操作都会配有图标作为辅助图形,户快速寻需操作。而在旧版本中,两个平台的操作图标很多存在同一个功,现在两端的图标格各异的情况(尺寸,圆角等问题),对设计师和户都容易成混淆。

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

统一操作图标的格是很有必要的工作,我们对有操作图标进行梳,汇总千个图标,定义的视觉样式规范,进行整体的绘制。

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

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

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

3. 缺页插画

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

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

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

插画师还给不同场景绘制了数十不一样的人动作,模拟用户不同场景下的人特征。

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

配色将原本的单色图增加了多颜色,给用户丰富的视觉感受。

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

过几次风格探索后,终选当下流行的插画风格,面型图形表示内,搭配小人元素,丰富场景,乐趣满满,发。

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

设计系统

我们创建针对文字和图样式的样式库,方便设计师和开快速地沟通,规范化以避免出现特殊样式的情况。

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

为让设计系统更易推,还撰写详细的设计规范,将所有涉及到新风的设计样式、局尺寸和使用说明录下来,方便跟开沟通,降低来回沟通的成和出错次数。

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

总结

这改版最终有明显成效,两端控件和样统后,大大降低了设计师设计成本,把跨端设计成为可能性,体验上降低了用户学习成本。为了让用户可以感受到个更体统应用,把很多精力放在了设计上。项目时紧急情况下,有很多优化没有实现,都作为以后继续优化,希望用户提供更好体验感受,享受到便快捷办公。

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

注「MU设计团队」公众号:

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

任何面对用户的产品在这个日新月异的市场上必须保持现代和新潮,redesign 对于网站、APP 和任何与各种用户、利益相关者们交互...
改版设计
网易UEDC – 李宁 :设计作品源于设计师的自我发现、情感和创造,在日常工作中我们加入字体、颜色、空间准则来让我们感性的表...
情感化设计
@青沼鸣  :2018年,阿里巴巴斥巨资拿下俄罗斯世界杯直播权,成为阿里进入体育产业的起点。世界杯直播战役后,集团加足马力投...
优酷体育
百度UXC:如何做改版设计?百度网盘的实战案例肯定能让你学到很多! 一. 改版背景 百度网盘在2013年诞生之际以备份文件功能走...
App改版
编者注:本文腾讯设计师用「云游敦煌」的小程序设计实战案例,为你揭秘大厂的产品构思方法、设计历程等。 缘起 在工作中遇到...
云游敦煌
各位好,我又来讲故事了:一个平静的夏日打开了QQ音乐,开屏视频(背景音乐100分)映入眼帘:「奇怪形状」的ip与粉白背景可可...
QQ音乐
@苏大牙牙牙 :从明确产品方向,到设计团队如何赋能到产品,最终传递给用户更好的服务感知,百度网盘做了全新的服务升级。 项...
改版设计
@途家UED:途家网,全球民宿预订平台,为用户提供公寓、别墅、树屋等各式新奇住宿。 为了更好的贴近及满足用户体验,设计团...
实战案例