腾讯云控制台的设计改版思考

本文授权转自： CE青年Youthce （ID：youthce ）

云产品，一直以来都是 B 端设计当中较为难啃的骨头，也是很多设计师很想去挑战的产品。在去年我们聊过阿里云的控制台设计改版，里面学习到了很多设计思路，然后就一直很期待相关的竞品也能去做相应的跟进。没想到时隔一年，阿里云的竞争对手腾讯云出手了！

首先给大家简单科普一下目前云产品整体的构成。国内前五名主要是：阿里云、华为云、天翼云、腾讯云、AWS。

由于阿里云本身技术实力过硬，再加上整体起步时间早，因此在国内一直有着不错的市场份额；而华为云、天翼云，本身就有着稳定的受众，也能够在市场中占有一席之地；紧随其后的 腾讯云与 AWS 由于起步较晚、技术落后又或者是政策原因，还是处于第二梯队。不过腾讯云整体的交互，在行业当中有着较高的认可度，而距离腾讯云控制台大版本的迭代，也过去了至少 3 年，期间一直是修修补补的状态，但这一次迭代整体的设计亮点非常的多，今天我们就来聊聊腾讯云控制台新版的设计思路。

首先我们先说一下什么是控制台。控制台本身就和 B 端产品的工作台类似，主要起到信息分发的作用，是系统当中的暂留页面，同时大多数用户进入到系统中就会访问这个页面，因此会非常重要。

我们先看下产品的前后对比，给大家 5 秒钟时间对比看看

视觉调整与信息优化

大家对于云产品的整体认知就是 科技、商务，在视觉风格上也要延续相同的品牌调性。

但旧版本的控制台会给我一种 商务、严肃，但是十分混乱。而 B 端设计，混乱其实是非常致命的，因此这次优化会着重在这方面下功夫。

减少页面层级

这是一张经典的图，我们已经用过很多次。当前 B 端设计较大的趋势就是减少层级，所使用的视觉技法则是将页面中的 投影、色块分割，使用线条的方式将其进行呈现，从而降低对用户的视觉干扰。

存在这一设计趋势，我猜测是对老旧的 Material Design 设计思想的优化，因为目前很少会使用投影的方式来表达页面层级，同时大家对于页面层级有一个基础的认知后，通过线条、描边的方式 来解决页面布局的划分，这也是后续整体的设计趋势，大家可以多加关注。

同时在视觉上，通过间距的方式将卡片内的内容进行划分，使用 8px、16px、20px、24px，每一类间距都对应着元素间的亲密性，这也是基础设计师值得去学习的地方。

图标风格改变

之前腾讯云使用的都是线性图标，优点是图标整体的维护成本很低，有新产品上线会较为简单快速的做好其支撑，物料海报上也能够快速实现；但缺点也相同明显，因为考虑到整体的统一性，所以在控制台页面也使用了线性图标，导致这部分模块的关注度并不会很高，容易造成视觉不平衡。

而新版本的做法是将控制台重要的图标进行重绘，并且使用 3D 的方式进行呈现，这样整体页面风格才会更为协调。同时页面插画部分，也使用了质感较强的 3D 风格，能够形成明确的前后呼应。

这种风格是我非常推荐的，能够适应大多数的 B 端产品。

内容信息优化

在内容信息的呈现上，我们作为交互设计，对于内容信息的优化无外乎就只有 4 种方式：组织、删除、隐藏、转移。

在控制台设计上，首先将很多无效信息进行隐藏。比如个人卡片中的标签，因为确实不太重要所以将其进行隐藏；由于产品费用归属于资源管理模块，所以将费用的部分重新组织，单独拆分为一个卡片放置左侧。同样的例子还有很多，就不一一介绍。

最后在整体的布局上，你会发现在默认视图当中，个人信息都会放在右侧，而云产品当中的资源内容将其放在左侧，这样的布局优化也能够为用户建立一个明确的信息认知，便于后续更为方便的寻找内容。

新型导航结构

导航结构调整是腾讯云在新手引导中，介绍篇幅最大的模块。整体来看，你会发现它提供了一种全新的思路。

云产品导航的问题

首先云产品的产品线很广，数量基本在 100+ ，因此导航设计会非常头疼。

在行业中常见的做法都是将所有的产品，聚合到一个入口，通过下拉菜单的呼出让用户自行寻找，但是这样很难做到 高效、易用。

同时在云产品中还会包含不同的产品线，无论是导航的广度与深度，都是非常棘手的一个问题。为了理解腾讯云的设计思路，我们先来看看其他产品 对于导航究竟是如何处理的。

其他产品的解决方式

火山引擎使用 全局导航+快捷导航 的方式。全局导航整体与腾讯云基本相同，快捷导航则更强调一些个性的需求。

但快捷导航目前只能在控制台使用，也就是用户跳出控制台页面后，其实是无法正常进行使用。

华为云将导航菜单放置在左侧，下方使用锚点导航来对用户的目录进行快速跳转，同时用户也可以收藏自己喜欢的云产品，从而进行快速跳转。

这里华为云也在最近做了修改，不过整体感觉新颖的交互不多，大家可以结合截图简单看看。

我们这几年在阿里云中，在上一次的更新中，它去掉了快捷导航，取而代之的是 全局导航+最近访问 两个模块来承担导航工作，你会发现，大量的数据还是需要依靠全局导航进行分发。

腾讯云的优化方案

首先，在腾讯云的旧版本中，整体的思路与其他竞品基本相同。

1.使用全局导航，对所有导航进行快速分发。

2.由于内容过多，因此增加收藏的功能，能将其展示在页面左侧，快捷访问处。

3.控制台内使用最近访问，展示用户常用的数据信息。

但新版本中明显对设计进行了一系列的优化。

1.视觉信息优化：视觉上减少内容的干扰项，将图标去掉，收藏变小，字体调大，间距优化。整体想要让用户更为快速的寻找数据。

2.结构层级调整：将全局导航分为云产品、资源、访问页面，同时将最近访问的产品模块放在整体的顶部，但同样会按照三列排布，这样信息更为整齐。

3.内容数据下钻：在设计上，保留了之前用户收藏过后的快捷访问入口，并且基于现有的内容容器，对层级进行拓展，当用户 hover 到对应产品后，可快速访问其二级导航，这样能够减少用户的交互步长，实现快速跳转。

4.双层导航使用：对于双层导航的使用，我认为是设计师基于当前用户场景分析的一个结果。

假设我是产品经理，平常会轻度使用腾讯云，主要以浏览方式查看云产品。因此，将重要的2-3个产品固定在顶部导航上，同时优化搜索入口，方便浏览调研为主的用户能快速找到想要的云产品

假设我是运维，平常会重度使用腾讯云，会有多个产品需要管理，对于导航希望能满足更快速的选择。因此，将运维认为重要的产品呈现在导航下方，这样能“量大管饱”。

我认为这个方案好的地方不仅仅是呈现形式的优化。而是设计师真正站在导航的角度去思考应该如何优化。比如上面提到的很多竞品，其实他们的优化方式都是在给控制台增加负担，让它承载更多的流转任务，但用户一旦跳转到其他页面后，这样的问题还是没有解决。

交互统一

在导航细节后三个，统一了 hover 呈现的形式。在改版之前整个 hover 信息较为混乱，有的模块不能呼出，有的呼出形式又不够统一。

改版过后，搜索的导航模块 hover 都会给出对应的展示，部分为 Tooltips 的信息提示，一部分则为聚焦状态前的视觉引导，甚至是我 hover 到腾讯云 logo 时，都会给我提示“前往腾讯云官网” ，这样交代让我感觉非常明确，大多数产品都可以在这部分重新进行优化。

搜索功能优化

在使用之前版本的搜索时，明显感觉体验不够优秀，因为改版之前的搜索我搜不到想要的结果，比如我更关注搜索出来的产品入口，而旧版本却给了我“共找到 XX 条结果”；我更关注产品的帮助文档，但是展示的文档信息又过于的少... 诸多因素的叠加，这搜索非改不可。

快捷键方式呼出

腾讯云新版本中，可以通过 “斜杠/”的快捷键，将上搜索框进行聚焦，这也是目前行业中较为常见的做法，大多数的 B 端产品都可以借鉴这样的思路。

关于快捷键的部分，可以查看我之前写过的快捷键文章

优化搜索结果

优化信息呈现：由之前的单列信息变为双列信息，极大的提高了信息展示的效率

快速访问分类：通过前置的分类入口，能够快速将搜索关键词与分类进行匹配，从而的到更为精准的搜索结果

视觉细节优化：搜索关键词匹配高亮、智能推荐结果样式优化、整体内容分割，会让你感觉这个页面的阅读的效率更高。

个性化配置
自定义页面

在控制台当中，由于使用的角色较多，作为系统方我们无法对于其需求做精准的分类，因此用户能够自定义页面视图，提供 30+ 个卡片给到用户，让其自定义配置进而实现千人千面的效果。

同时在页面配置的交互上，行业中也会有几种不同的做法。比如 ONES 是在页面中点击添加，进行页面卡片内容的添加；而腾讯云则是采用左侧开关的方式，用户可以将自己关心的卡片打开，从而呈现内容。

这两者本质上还是会有差异，大家可以思考一下具体的区别，我们在评论区里讨论讨论~

自定义配置

在讲了那么多改版过后，你会发现这次迭代的内容很多。为此腾讯云的设计师也贴心将全局配置的功能统一收起，放在顶部导航右侧，并且打开后每一个配置都有图形化的解释，便于我们快速理解降低使用门槛。

这里不得不说一下，腾讯云给出的混色模式其实还挺不错的，很多偏商务型的产品都可以去参考参考，还挺有借鉴意义的。

我们回顾完腾讯云设计思路，你会发现他们不是在做大的迭代改动，更多还是加法，没有颠覆用户习惯，更多还是对现有模式的优化。

比如导航模块 单层双层导航、搜索结果的呈现、信息设计的处理，亮点很多，你也会发现设计师是下足了功夫去做交互挖掘，这也是我们未来 B 端设计师所要去做的，那大家可以根据腾讯云的整体页面，自己再尝试去做分析，如果在文章中有不懂的地方，建议大家都打开腾讯云的官网去做查看。

文章转载： CE青年Youthce ，版 权归原作者所有

https://mp.weixin.qq.com/s/tt2ki9FFX2nnH44tK30kiA

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：18802086168

联系电话：18802086168

编辑 | 梁芊芊

终审 | 苏 菁

点这里，学习更多设计知识！