金山文档全新升级-界面篇

时间：2023-06-04 17:00:01 | 来源：网站运营

时间：2023-06-04 17:00:01 来源：网站运营

金山文档全新升级-界面篇：

产品背景 Product Story

云服务时代的到来

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

链接各端数据的金山文档

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







金山文档是什么？

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

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

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







为什么要进行改版？

金山文档（旧版）界面

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

现存主要问题

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

新版设计规范

设计目标 Target Analysis

里应外合

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

两大设计方向




走进更具体的场景去思考

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




对于设计方向的讨论

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




全面且强大的功能环




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


不同场景下的设计原则




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

公共模块情绪板




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

公共模块界面概览




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

编辑模块情绪板




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

三大编辑组件界面首页（文字、表格、演示）







谁在使用我们的产品？




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

大家都是如何使用金山文档的（人物个人信息为虚构）

设计细节 Showcase

颜色

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

新版颜色规范







图标

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

新版文件格式图标




插画

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

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







为专注而克制

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







1、清新




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

客户端组件界面

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

金山文档组件界面







2、玲珑




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




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

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

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

框架层级简单示意







3、轻盈




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

反馈样式的区别




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

按钮与控件相关规范




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







细腻优雅的投影（效果图）

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




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










打造设计系统

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

MU Cool设计系统概览

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