从UCloud控制台，看B端产品体验设计

让用户熟悉的控制台

您据说过平均脸的概念吗？人类学家弗朗西斯•高尔顿（Francis Galton）偶然发现，将许多的人像合成后，看起来会比任何一张更友善。越是对一张脸感受熟悉，那么在认知过程当中大脑所需的处理资源就越少， 也就越没有负担，容易亲近。

图片来源：http://faceresearch.org/

随着公司业务的不断发展，UCloud的产品已经跨过了单纯知足用户功能需求的阶段，用户对于控制台使用体验上的要求在不断提升。正如大部分B端产品同样，云产品控制台的本质是一种工具。工具的意义在于帮助用户达到最终想要的结果，无关乎流量、使用时长，甚至用户粘性。所以，在视觉上须要减小对于用户的负担和干扰。体验良好的控制台UI就如同平均的脸,围绕这一想法，咱们在设计过程当中重点关注了三个层面的问题，尽可能在视觉上作到简单、熟悉。

色彩

国人受文化和习惯的影响，更适应浅色的界面。在总体色彩上咱们选择了以白色为主的设计。但因为色彩比较淡，在测试过程当中，一些用户会产生视觉疲劳的问题，咱们又专门对文字和背景颜色的对比度进行了优化。

优化后的版本 优化前的版本

在总体配色较浅的基础上，为了更加美观，咱们还对核心操做按钮等位置进行了优化，使用了高饱和度的品牌色。就比如平均的脸只耐看，第二性征强的脸更吸引人。高饱和度的按钮就好像女性的长睫毛、男性的高鼻梁同样，可以提高界面的吸引力。也帮助这些高频操做更容易被辨识。

布局

在布局方面，因为云计算产品的展现内容较多，各产品的操做逻辑也不相同，老版本上用户可能须要对每一个产品独立进行学习，形成了额外的学习成本。新版借鉴了用户熟悉的标签、卡片（画框）和文件路径等概念，尽可能将全部产品的操做方式归入到同一体系内。

以云主机页面为例，全部功能均可以保持相同的页面体结构，且每一个页面的交互方式都是一致的。

过程当中也经历了反复的测试与迭代。例如在标签设计的过程当中，本来标签头部和主体内容的背景是分离的。但在测试中发现，有些用户没法将分离的头部和内容联系起来，故在后续方案中作了调整。

内容

内容的展现上，咱们也围绕减轻认知负担作了有许多优化和定义。以文字来讲，或许你们据说过前两年的一则趣闻：咱们在学生时代都曾为印刷得密密麻麻的试卷而头疼过，而杭州的一所小学，在某次五年级的数学考试中放大了试卷的字号和行距，学生的考试成绩也随之提升了。

图片来源：http://news.sina.com.cn/s/wh/2017-11-23/doc-ifypathz5329709.shtml

温馨的字体和间距比例可以减小大脑在加工信息时的负担，在美国甚至有专门的国家标准（ANSI/HFS 100-1988）。但文字也不是越大越好，访问UCloud控制台的终端屏幕分辨率并不高，很大一部分还处于720P的水准，但这些用户仍但愿可以在一屏内显示更多的数据。为了回应用户需求，兼顾阅读体验，咱们制定了本身的字体规范。

其它

除了总体的色彩、布局和内容外，咱们还对许多细节和超过60个控件进行了更新。例如，老版本的时间选择控件须要分开选择起始和结束时间，时间选择上也不够灵活。同时每次选择完成后须要点击三次确认按钮。新版本中优化了这一问题。

让同事轻松的控制台

在设计领域有许多以用户为中心作设计（UCD——User Centered Design）的方法论，但对如何服务商业目标鲜有考虑。如同一篇很棒的设计文章中说的同样，UCD和BCD（Business Centered Design / 以商业为中心的设计）彷佛是矛盾的两个方向。就好像技术出众，但少有问津的产品家常便饭。而设计出色，叫好不叫座的产品也很多。不兼顾体验与商业的设计很难成功。

例如产品经理但愿尽可能减小研发和设计的投入，快速拼搭一个有品质保障的MVP（最小可行产品）进行市场验证。若是新的控制台UI框架可以让设计、前端和产品的同事使用起来更轻松、高效，就能够快速且持续地缩短产品开发周期，抓住稍纵即逝的商业机会并下降研发成本。

为了兼顾商业考量，咱们在提高体验的基础上，引入了原子设计的概念。并配合实际状况，作了必定调整。UCloud的控制台UI框架分为了四个层次，依次为：原子、组件、模块和页面。

原子

原子层包含有颜色、字体、阴影、间距等基本样式。拿颜色举例来讲，设计过程当中严格限制颜色的使用，全部颜色不以具体色值定义，而使用有限的颜色代号。如此一来，全部页面元素使用统一而规范的颜色代号，须要对色彩进行调整时，仅须要改变代号对应的色值便可，无需分别替换修改。

组件

组件层顾名思义，是各种组件的集合。为了适应公司内部的组织架构，加强灵活性，咱们将组件分为通用组件和业务组件两类。因为云计算产品五花八门，时常须要用到一些特殊组件。而公司用户体验中心（UEC）资源有限，若是全部组件都须要UEC设计和测试，会对产品开发和上线的时间产生影响。故对于特定产品的特殊组件，能够交给该产品团队自行设计，待有更多使用场景且打磨优化后再归入通用组件中，交给UEC统一维护和管理。

同时在组件设计的过程当中，咱们重点考虑了组件的通用性问题。好比文本组件，看似无需专门设计，但除了原子层的样式定义外，咱们还对于文本的换行逻辑、隐藏逻辑、最大行数等作了定义。这一考量可以让组件的使用者没必要纠结于展现效果的问题，将精力放在业务自己上。在多语言适配的工做中也能够大幅节省开发成本。

模块

模块便是前文中提到的卡片。是基于实际使用场景产生的组件的集合。这些集合包裹在拥有统一规范和标准的卡片内，有相同的展现逻辑。

页面

即为整合后的页面。全部页面的结构是一致的，可分为全局导航、页内导航和容器视图三个部分。容器便是卡片的容器。

Sketch插件

配合原子化设计概念，为了方便设计师和产品经理的使用，咱们还提供了一套基于sketch的插件工具，并按期与规范以及前端代码同步。

UI框架、平衡与利他

基于上述思想，通过屡次的迭代与改进，全新的UCloud控制台UI框架已日臻完善。该框架是一个二合一的系统。既是一套成体系的视觉和交互设计规范，又是一套基于React的前端开发组件库。

UCloud控制台UI框架是平衡了体验设计和商业后的天然结果。它可以适配各类功能和使用场景，不因内容变化而产生额外的适配工做。设计师和产品经理都能独立拼装出高质量的页面，也便于开发者的开发和维护。该设计规范符合用户的理解，操做线性、尽可能减小逻辑分支，提供了良好的视觉感觉和操做体验。也收获了用户的好评。

而对于内部开发效率的提高一样显著，交互、视觉、前端都免去了大量的重复性消耗。

过程当中，咱们也深入感觉到了利他思考的重要性。“Deep experts hate nothing more than politicking”——这是体验设计专家Jakob Nielsen对于B端产品用户的评价。若是要给B端产品用户（特别是技术产品用户）画像，那么这句话必定是用户画像的核心。B端设计是利他的。利他便是利己。

写在最后

UCloud控制台UI框架并非一蹴而就的，也经历了许多困难与反复，在此须要特别感谢前端团队的付出，这一项目也是双方共同努力的结果。

微信公众号 「云计算总动员」 分享云计算领域的技术洞见、行业资讯以及一切你想知道的相关讯息。欢迎提问&求关注 o(////▽////)q~若有其余问题须要咨询，欢迎添加运营小妹微信Likekids，感谢你们支持！