产品背景 Product Story


云服务时代的到来


万物上云、智慧互联,百万级服务器组成的云端计算时代已经到来,过去困扰个人电脑的效率、安全及规模化问题已不复存在。


金山文档历史版本记录(金山文档全新升级-界面篇)(1)

链接各端数据的金山文档


万物皆可上云,而云文档,即是在云端服务器存取的文档,具备安全可靠、多端协同的优势。


金山文档是什么?


金山文档作为一款在线协作文档,依托云服务,致力让处理文档从原来传统的打开编辑保存,达到多人同时编辑并且即改即同步一种全新的办公方式。


金山文档历史版本记录(金山文档全新升级-界面篇)(2)

用户正在进行远程协作办公


当下正是4G向5G的过渡期,这意味着未来的金山文档将更快的接入世界,给用户提供更简化流畅的办公体验。


为什么要进行改版?


金山文档历史版本记录(金山文档全新升级-界面篇)(3)

金山文档(旧版)界面

旧版金山文档最早是随着各端“文档上云”的趋势,主要是作为一个通用型功能诞生的,但由于长时间的项目流转、无系统型设计维护等原因,导致了许多设计资源丢失,更新迭代乏力,而且当初并未承载太多的功能,模块层级长时间简单堆砌,导致延展艰难,加之红色品牌色在颜色心理学的特殊暗示等原因,组件规范扩展困难,所以决定彻底重新推翻重制。


金山文档历史版本记录(金山文档全新升级-界面篇)(4)

现存主要问题


随着近两年“Design System设计系统”与“设计中台”的流行,我们的体验设计团队也希望借着颠覆式重设计的机会,从底层开始重新梳理“设计理念”和“系统能力”,赋予金山文档更一致、更完整、更有温度的形象。


金山文档历史版本记录(金山文档全新升级-界面篇)(5)

新版设计规范


设计目标 Target Analysis


里应外合



金山文档作为一款平台级的产品,不光会有来自内部视觉优化的压力,也会有来自更多外部组件接洽、延展的挑战,因此对于重设计,我们除了关注产品本身的设计语言和品牌的重塑和打磨,也将大量的时间用于了设计系统的搭建,目标是打造一个对外部用户、对内部产品团队都能极大提升工作效率的产品堡垒。


金山文档历史版本记录(金山文档全新升级-界面篇)(6)

两大设计方向


走进更具体的场景去思考


结合不同的的功能与流程特色,我们从更具体的使用路径和场景去重新思考。


金山文档历史版本记录(金山文档全新升级-界面篇)(7)

对于设计方向的讨论


金山文档为了给用户提供更精细化的服务,其实细分为了“云文档管理”和“云协作编辑”两大模块。


金山文档历史版本记录(金山文档全新升级-界面篇)(8)

全面且强大的功能环


由于用户在使用产品时的心流状态的不同,在保证全局规范大体一致的基础上,我们也同样将细分设计原则为【云文档管理-高效】和【云协作编辑-专注】两个大的方向,希望通过更微妙的设计,让用户更愉悦地完成目标。


金山文档历史版本记录(金山文档全新升级-界面篇)(9)

不同场景下的设计原则


刚进入到金山文档进行文档管理的时候,我们希望用户是心情愉悦、放松地面对一天崭新的工作,从而达到高效的状态,因此整体的设计风格是偏“简洁”、“轻快”、“放松”的。


金山文档历史版本记录(金山文档全新升级-界面篇)(10)

公共模块情绪板


在用色上,即便是黑白灰色里,也加入了淡蓝色的氛围色,而蓝色是一种最容易让人产生好感、放松心情的颜色,加上整体界面以蓝白为主,并在很多流程中定制了“童趣蜡笔笔触风格”的引导插画,为使用者提供一个开阔、清凉、愉悦的直观感受。


金山文档历史版本记录(金山文档全新升级-界面篇)(11)

公共模块界面概览


而当使用者开始打开文档进行在线编辑或协作的时候,我们希望用户能快速进入专注的工作状态,不应该被界面UI过多地打扰,因此在专注模式下的风格是“淡雅”、“宁静”和“平稳”。


金山文档历史版本记录(金山文档全新升级-界面篇)(12)

编辑模块情绪板


并做了许多交互类措施,如:尽可能降低了各种反馈的力度、减少了功能的视觉层级、克制地使用高亮色等,为使用者打造一个专注、理性、沉浸工作的微观体感。


金山文档历史版本记录(金山文档全新升级-界面篇)(13)

三大编辑组件界面首页

(文字、表格、演示)


谁在使用我们的产品?


金山文档的用户来自于各行各业,用户年龄跨度较大,用户基数较多,大多分布在18~40岁之间,因此设计风格避免过于前卫、新潮、炫彩,应尽量以稳定、易用为主;对不同的业务有不同的使用需求和各具特色的使用方法,这也同时提醒我们设计的时候需要提供简单的交互与视觉,一切以效率为优先,并且保证较高的体验一致性来降低用户的学习成本。


金山文档历史版本记录(金山文档全新升级-界面篇)(14)

大家都是如何使用金山文档的

(人物个人信息为虚构)


设计细节 Showcase


颜色



配合设计系统的打造,我们在制定颜色规范之初,便与开发一同制定好了“变量库”来管理颜色,每个颜色都有对应的变量,这样不仅便于管理和沟通,同时为以后的“深色模式”或更多的“主题模式”打下基础。


金山文档历史版本记录(金山文档全新升级-界面篇)(15)

新版颜色规范


图标


因旧版文档格式图标风格过时,且覆盖不全,所以此次也将文档格式图标全部重置与扩展,并制定相关图标规范


金山文档历史版本记录(金山文档全新升级-界面篇)(16)

新版文件格式图标


插画



随着近两年,来自Dribbble的2.5D轴侧、矢量无脸人、渐变等插画风格同质化严重,我们也在摸索让人眼前一亮的新风格,在插画师“牛奶虫“的不断探索下,最终敲定使用“童趣蜡笔笔触风格”的插画作为引导和缺省页面的配图。


金山文档历史版本记录(金山文档全新升级-界面篇)(17)

童趣风格的引导/缺省配图


为专注而克制



由于编辑模式的特殊性,每个组件都有属于自己的主题色,因此针对“专注”的设计原则,我们还进行的深化的细节调整


金山文档历史版本记录(金山文档全新升级-界面篇)(18)


1、清新



不难看出,在传统客户端中我们的各大组件都有属于各自的主题色,按照以往的设计经验,通常都会在界面里大量使用主题色,来营造组件氛围,强化品牌感,清晰地告知用户当下的环境。


金山文档历史版本记录(金山文档全新升级-界面篇)(19)

客户端组件界面


但由于金山文档的特色与传统客户端不同,虽然宏观规范是大体一致的,但是细节上金山文档是以“轻“、“云服务”、“协作”为主,我们更希望强化的重心和力度放在多人协作的相关功能上,因此弱化了传统编辑部分的UI,将高亮色的使用面积降低,以此来营造一个小清新的氛围。


金山文档历史版本记录(金山文档全新升级-界面篇)(20)

金山文档组件界面


2、玲珑



金山文档作为一个云上轻办公的产品,区别于客户端的明显特征便是“小巧轻便”,因多年来WPS在专业文档处理领域的深度耕耘,客户端的功能可谓是星罗棋布,但同时也为视觉设计带来了一定的难度。


由于金山文档风格较轻,恰巧可以在某种程度上给予我们简化视觉的机会,根据场景的差异,做了适当的简化调整。


金山文档历史版本记录(金山文档全新升级-界面篇)(21)

客户端(左)与金山文档(右)的工具栏对比


在信息层级上,以往大量的功能交互主要是以弹框形式呈现的,为了降低这种操作的纵向层级割裂感,将大量功能的具体操作放置于右侧边栏中,与编辑区同层,大量减少层级,让产品更加玲珑敏捷。


金山文档历史版本记录(金山文档全新升级-界面篇)(22)

框架层级简单示意


3、轻盈



最后,“专注”的另一个体现,就是在于各种反馈样式和投影的设计中;一般网页产品界面中按钮的反馈有两大类型,一是将按钮文字主体变为高亮,另一种则是在按钮底板上做简单变色。


金山文档历史版本记录(金山文档全新升级-界面篇)(23)

反馈样式的区别


我们当然毫不犹豫地选择了后者,由于黑白灰的场景多种多样,我们也希望在变量参数中尽可能地做减法,因此,除高亮色反馈序列以外的常规区域,制定了一套在本色基础上叠加透明度灰块的方式,来体现轻盈的反馈样式。


金山文档历史版本记录(金山文档全新升级-界面篇)(24)

按钮与控件相关规范


而对于投影的参数的选择,也是经过了设计团队在多个设备上长期的测试和雕琢,遵循着淡雅的方向确定的,具体的感官感受,欢迎在线上体验我们的产品。


金山文档历史版本记录(金山文档全新升级-界面篇)(25)

细腻优雅的投影(效果图)


金山文档历史版本记录(金山文档全新升级-界面篇)(26)

设计师们反复打磨着投影参数


更多的设计规范的细节尚在完善中,相信不远的将来会给大家公开完整的规范文档。


打造设计系统



金山文档的未来,将会是一个非常宏大的在线办公平台,届时将会有各式各样的功能组件和产品矩阵入驻,借着颠覆式改版的契机,不光从外部视觉层面重新打造产品,我们也将能极大提升内部设计效率的“设计系统思维”融入了此次的优化,通过制作设计规范、中台组件库、在线变量库和产品样例库等工具型设计文件,为“设计师”、“产品”和“开发”打造了一个高效的内部生产环境,也为后续的新组件延展提供简单的指引。


金山文档历史版本记录(金山文档全新升级-界面篇)(27)

MU Cool设计系统概览


基于Sketch的设计系统功能,在简单的设计规范的基础上,又增加了“工具化”和“工程化”的部分能力,我们制作了完善原子型“组件库”、“样式库”、“变量库”、“样例库”和“知识库”,利用NAS本地局域网 云文档 蓝湖的形式,形成了一个简单的本地设计中台,这一部分的内容将会在后续的“设计系统篇”详细讲解。

,