赞助商
立即赞助

项目实战复盘!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 移动端全新改版项目总结

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

相关文章

本期译文,是一篇 App 改版干货,有具体步骤,方法,分析,最后还有结论,值得学习。 我热爱旅行,就和千千万万踏上旅行的人...
App改版
一个产品从起步到日趋成熟通常要经历多次迭代。在这个过程中,对于视觉设计师而言,如何在不断变化的产品中保持设计的延续,...
品牌升级
UI 设计师面试的终极杀手锏 前面写了面试我们要准备什么/ 如何在面试中秀出你的作品集,相信大家也感觉到想要获得最好的面试...
产品优化
「红袖读书」2018年全新改版,打造更轻的阅读体验,更适合女性阅读的读书APP。 一、项目背景 「红袖读书」APP 原名「红袖添香...
实战案例
@途家UED :从前期调研、需求分析、设计提案、设计定稿到设计还原最终项目上线,本次案例为你复盘途家APP 的用户中心改版设计...
实战案例
万能螺丝刀也拧不开眼镜框上的螺丝。如同万能螺丝刀一样,QQ 也是一个通用的沟通工具,在针对游戏、粉丝、家校等垂类场景下,...
QQ家校群
一套完整且比较优秀的移动端交互文档,我认为可以包含以下部分: 业务背景、产品目标、用户人群和用户目标 业务规则定义...
交互文档
@C7210 :这是一篇来自 Google Translate 团队设计师的改版经验分享。 Google Translate改版经验谈 2018 年底,我们上线了...
Google Translate