前言  

19年中旬至今，很荣幸主导了一个短期空间分析领域的B端产品设计改版工作，在这篇文章中与大家分享一些改版过程中的设计思路以及一些设计细节的思考，为保护工作单位的知识产权，对界面内敏感数据以及信息进行了改动与脱敏处理，本文仅讨论设计与交互层面的相关观点，文章主要涉及发现问题、解决问题（方案设计）、页面展示等阶段的代表性案例与大家讨论。

背景

CILAS是一款面向国内外企业，依托智能办公设备与空间传感器，通过可视化的图表与分析报告，使客户快速了解办公工位使用情况和办公空间的利用情况，从而减少工位闲置、增加空间利用率。有效降低运营成本，实现企业精细化管理的产品。

在19年下半年,公司把品牌升级作为一个重要的战略依据，产品层面仅仅满足基础数据分析需求的一款工具已经满足不了现阶段公司发展需求，现在需要我们更加注重功能的聚焦与真实场景的细分，交互层面保证使用者高效率、高流畅度的完成每一次操作，视觉层面要保证公司产品风格统一打出办公领域的品牌差异化，用高品质的视觉风格，顺应国际化这一需求，同时也要通过设计兼顾用户的情感化诉求。

因此，我们希望通过本次产品&品牌升级，能够从产品的功能架构、使用流程、视觉识别、用户体验、上下线推广等多维度来传递品牌核心价值，同时遵从“少即是多”的设计理念，形成一套完整统一的设计语言。

设计目标

经过团队多轮碰头会议的讨论，从“品牌功能”“描述性修饰语”“情感性修饰”三个维度，可以较为准确的确定了符合公司特色的设计目标，分别为 “更专业的信息服务、更国际化的视觉感受、更年轻充满活力” 

品牌功能：描述了产品或服务的性质，即品牌能够向用户提供的体验或益处的类型；

描述性修饰语：将进一步分类及明确品牌所传达出样貌之性质；

情感性修饰语：则解释了品牌的特性给用户带来的最直观感受是什么。

然后我们以三个关键点为方向，始终贯穿到整个设计的过程中。

发现问题

发现问题阶段主要从产品、交互、视觉三个方向进行刨析

产品层面可以拆分为新增功能、业务流程优化、核心功能点再梳理等方向去发现问题

交互层面可以拆分为检查现有交互流程是否顺畅、检查限制条件、各种状态、操作反馈信息是否完善、检查用户权限是否缺失等方向去发现问题

视觉层面可以拆分为 布局、文字、颜色、图标、控件等方向去发现问题

我所在的产品部门，组织国内外业务同事，把经销商、客户对产品还未设计的诉求以及设计过但有明显改进空间的诉求整理近产品 backlog，同时我们同步进行用户访谈、问卷调查、产品体验地图、线上数据反馈等方式，去挖掘用户诉求以及问题点，之后我们把得到的信息数据，进行甄别筛选，以文档的形式把问题对应到线上产品的具体页面，方便进行后续产品设计的排期工作。

为保证读者的阅读体验发现问题只说明过程以及思路，不具体展示页面问题，页面问题将会在下面方案设计模块统一展示，方便大家更直观的作出改版前后的对比。

方案设计

方案设计阶段要始终遵循上面提到的三个设计目标，在设计的过程中，要保证始终每一个设计改动都要有理可依，同时要把更多的精力放在节约设计生产成本，增加产品可用性提高使用效率上，下面我将通过几个具体案例来展示改版的思路。

案例一 设备状态页面

 设备状态页面是对设备的实时监控，使用户能够即时发现设备的使用情况，快速定位设备问题

旧版本中我们发现：

一：产品层面

1：目前展示的设备信息，对于用户“能够宏观看到不同类型设备状态，快速定位设备问题”这一需求来说功能还不够，因此切换到企业空间管理员这一视角，更希望增加每一种设备类型对应的具体属性，比如会议室需要增加目前使用人数，和各种状态下的使用时长。

二：交互层面

1：虽然是全部设备的总和，但数据太多会严重干扰用户决策与阅读效率，举个例子，真实情况下企业有可能有上百个工位类型的点位，几十个会议室类型的点位，全部在页面呈现，用户需要下拉很长时间才可以看到下面的信息，同时虽然是全部选项也应该区分出来不同功能的设备，帮助用户更加直观的掌握每种点位大致的情况，如下图所示

2:右上角显示信息与下拉菜单筛选字段重复

三：视觉层面

1.:页面布局

整体界面，第一眼看上去都是红绿色块，用户很难去聚焦信息内容，找到对他有用的数据，这是在框架层缺少对信息的归纳整理，所导致的页面布局不清晰的问题

2:颜色

颜色这一块,放在整体一起说比较合适，如图所示，平台整体以蓝色为主色，红绿双色代表数据颜色，首先两种颜色表示数据，很明显是不能满足多种类型的业务需求的，其次红绿色对有视觉缺陷的用户来说，大面积的红绿色是致命的，需要考虑到这部分用户的使用感受，再来，就是平台整体饱和度偏低，信息之间的颜色对比不够，拉不开视觉层次。

3:图标

该页最大的问题是没有图标，页面设备的不同类型，可以用图标的形式进行展现，目前信息区分不明显

4:文字

文字这里也是基于平台整体描述，经过设计走查发现平台内的字体没有形成字体规范，各种字号字体混乱运用，不符合交互设计中一致性原则，如果具有相同功能属性的模块运用了不同大小的字体，会给用户造成不必要的困扰。

5:控件

检查每一个页面相同功能的控件样式是否一样，比如这里加载更多的按钮的字体为18号，但小弟翻山越岭，苦苦寻找整个平台，加载更多这个18号字体基于按钮也只出现在了这一处。但任何一种表现形式都，要有理论依据，我们可以整体的对功能进行分级，然后根据功能属性与优先级，调用不同的按钮样式。

新版本我们的解决办法：

一：产品层面

1:增加了客户几个，较为关注的功能（前期用户访谈，问卷调研得出的结论），例如工位类型点位增加使用时长，站坐高度、站坐状态等会议室类型的点位增加了会议室人数、使用时长等。

二：交互层面

1：在框架层与表现层对信息进行了归纳分类，每一种点位类型，默认展示20条数，在20条数据的底部增加加载，更多按钮，下拉页面超过一屏的位置，增加返回页面，顶部的功能让用户快速返回顶部，增强对产品的操控感。

2：点位信息，本身可以作为可点击按钮进行筛选，这样在流程上减少了一步操作.

三：视觉层面

1:页面布局

在设计页面之初就要根据产品属性，定义一套统一完整的栅格系统，考虑到该产品页面信息复杂，应用场景多，我们在内容区进行了24栅格的划分，Gutter设定了固定的值（24px），即页面在自适应屏幕尺寸的时候，栅格的Column宽度会进行改变，但Gutter的宽度恒定不变。且对于页面中所有元素之间的间距始终都要遵循4n原则。

再来就是需要对页面内信息的优先级进行定义，该突出的突出，该弱化的弱化，就好像当年画画，如果一个页面全部都是重点，那么就没有了重点，要做到有的放矢，突出信息的层级，使使用者阅读更清晰，操作更方便。

2:颜色

基于颜色我们调研了许多竞品，并且对竞品的视觉风格进行投票，最终大家高票聚焦到了两家平台身上，这里发生了比较有意思的事情，两种平台的视觉风格有明显差异，一个是明度高，饱和度高，整体给人的感受，年轻有活力，另外一个配色，饱和度低，明度适中，整体给人的感觉严谨，便于对数据阅读，我们通过AB test的方式，各抽离出一个主色，然后再根据主色，调配出数据可视化颜色和通用功能色，最终根据反馈的数据以及品牌特征，采取了现在这版配色的方案，主要解决了，数据颜色单一，整体颜色对比度拉不开，识别性不强的问题。

2:图标

如图把具体功能如会议室、点位以图标的形式进行展现，增强信息的可视化

同时，因为我们想让企业更关注员工的站立情况，所以对正在站立的点位进行了样式上的突出，增加了站的状态icon，背景为当前点位状态的不透明度即强调了站立，又与整体画面不冲突。

4:控件

我们要习惯创造属于自己平台的控件库，好处网上一搜一大堆，这里就不重复赘述了，控件不是仅仅搭建起来就完成了这么简单，最重要的是熟悉每一个控件背后的含义，控件的使用要符合本身产品的业务逻辑，好多刚入行的小伙伴会没有方向，上来起手就做控件规范，但缺少建立控件库的方法论做出来的很可能会很局部与片面，我简单介绍一下我创建组建库的分类方法，按照页面内功能模块，进行宏观的抽象，组成一个平台的母模块，大致可以分为六个大类 导航、反馈、数据录入、数据展示、数据可视化，通用，同时根据业务需要，看平台是否有深色版本的需求，然后每个母模块下都会有许多子模块，如下图所示。具体每个母模块包含哪些子模块，建议大家去antdesign、饿了么、谷歌、苹果等官方规范去看他们都包含哪些控件，我们根据业务需要进行取舍就可以了。

同时，在做全局性的规范时，我们也可以，针对复用性强的页面，进行组件化处理，如下图所示，这种方式真的极大的解放了设计生产力。

案例二 分析类数据图表展示页面

 分析类数据图表页面，通过时间段内数据的趋势变化，可按月度 、周度 、不同时段自由选择 ，可统计分析最高、平均、最低空间的使用率，助力空间规划。      

旧版本中我们发现：  

一：产品层面

（1）现在的页面内容组成是把所有关于该模块的信息图表都放在了一个目录中，导致页面信息过载，页面很长，浏览效率大打折扣。

   图片

（2）根据真实场景客户使用流程，目前的业务架构是混乱的，产品架构不清晰，各个功能点相对独立，由点连不成线。

二：交互层面

（1）模块一之前的条件筛选是在页面顶部单独陈列出来的，时间筛选是在每个图表的右上角单独筛选，如下图所示，这里通过调研得出结论，80%的用户都希望有一个，统一的筛选入口，进行全局性的筛选，方便进行全局操作。

（2）模块二图表区域存在着大量双y轴情况，在《用数据讲故事》一书中强调，图表中要尽量避免使用双y轴，因为会造成阅读压力，同时书中也提到了解决双y轴的方案，下面解决问题部分再做详细解答。

（3）图表的图例是可以点击的，现在看上去只是图例，操作感不强

三：视觉层面

1.:页面布局

（1）模块一的排版布局有明显的问题，因为平台有多语版本，英文字段是比中文字段要长的一但英文字段过长，就会出现UI Bug，左信息右icon的形式也不利于阅读信息。

（2）接下来说模块二，在线上真实平台中办公分析模块下是不仅仅这一个图表的，我测量了大多数图表的显示范围、元素间距、文字大小、等发现图表并没有统一的布局规范与图表内自适应显示规则的规范，没有自适应显示的规则就会出现下图问题，当选择较多数据时，会出现数据堆叠在一起的UI Bug。

（3）模块三，排行榜的所有元素都是单独排列算间距的，这样就会导致前端开发时还原率会大打折扣。

2:图标

图标的样式比较陈旧，没有记忆点。

新版本我们的解决办法：

一：产品层面

1:我们从新梳理了功能架构，把原先只有一级导航包揽所有内容的形式进行了按照场景的细分，细分到了三级导航，使用户看数据更有逻辑性和调理，迅速定位模块。

二：交互层面

（1）模块一，琐碎的功能既不利于操作，又不利于阅读，把它们进行了整合，增加了全局筛选按钮。

（2）模块二解决了双y轴问题，左图是用数据讲故事给出的解决方案，我采用的是方案一

（3）对图例的样式进行了改进，现在可点击感很强，视觉上又不会抢图表内容 。

三：视觉层面

1.:页面布局

（1）模块一换了一种排版方式，通过颜色、间距、大小，突出了主要信息，这种排版方式，解决了英文字段显示过长的UI Bug。

（2）模块二数据图标区域，规定了统一的数据可视化设计规范，同时还有图表筛选时间后柱形图、条形图的间距大小怎么显示，下方横轴时间颗粒度怎样显示的逻辑规范，这一块真的钻研了许久，市场上没有一篇介绍该逻辑规范的文章，在这里立一个flag，下半年找一个时间把这个坑填了，规定了一套图表显示逻辑之后，很好的解决了统一性与自适应问题，老板再也不用担心出现适配bug的问题了呢

（3）模块三，排行榜这一块，之前的数据都是在同一视觉层级下的，新版排行榜，强调了前三名，弱化了后面的数据，增加了用户hover时，颜色和前三保持一致这一交互效果

2:图标

给图标进行了一次升级，丰富了一些细节，把品牌基因，植入了图标中作为背景，同时在创作图标的过程中也要保持冷静克制，要符合B端特性。

案例三 列表页

列表页是方便客户对产品功能进行增删改查的重要页面，这里想简单谈一谈工作中对列表页的一些思考。

旧版本中我们发现：

一：交互层面

1：记得看IOS用户界面指南时，有一条印象蛮深刻，进入通讯论里面点击列表内容，交互形式是左边进入，点击加号创建联系人页面从底部进入，这里其实就按照功能，区分了使用形态，创建是当前页面的一个动作，更像是网页版的弹窗，所以从页面底部弹出，而列表是进入到一个新的页面，所以会左翻页弹出，在浏览平台时，发现了一些类似这样的问题，有的模块点击新建是弹窗的形式，有的模块点击新建是弹出了新页，这会给用户造成困扰。

二：视觉层面

1.:页面布局

1:如图开发出来之后，列与列之间的间距把控的很差，没有明显规律，会对信息的识别造成干扰

2:控件

1：如图弹窗的高度超过了一屏的位置，缺少对弹窗的高度限制

新版本我们的解决办法：

一：交互层面

统一全平台，基于操作-弹窗，跳页-新页面的这一交互逻辑

二：视觉层面

1.:页面布局

1:这里不建议设计师去规定具体列的宽度参数，这里可以提前与研发沟通，列于列的宽度都是要基于n（整数）的倍数，根据字段长短研发可自己判断列宽，然后开发出来后基于页面有明显视觉问题的地方进行调整，这样大大节约了双方彼此的时间、劳动成本，可以把精力放在更重要的事情上。

2:控件

1：对弹窗的高度进行了基于大、中、小屏幕的高度限制，超过高度，固定底部操作区域，增加滑动功能。

页面展示

结束语

这次平台的改版，自己收获了许多，感谢优秀的团队我们一起成长变强，在改版的过程中也更加发现UI设计师，并不能只满足视觉层面的美丑，简单的排排版，而是要深入到业务中，了解经销商和客户，了解终端产品的使用人群，时刻以商业的视角去思考设计，甚至要往自己的上游-“产品设计师”“交互设计师”去合并，才能运用严谨科学设计手段为产品提升附加值，同时让用户真正感受到“爽”。

Powered by Froala Editor