纯净与活力，打造云端工作美学

现今，工具效率型产品已经不仅仅只强调功能升级，而是更注重用户的感官和体验感受，这一方面既是常伴手边的温度感，也是产品价值的完整塑造和呈现策略。在线代码编辑器/云端 IDE 平台，是云端工作平台的新星，而目前业界的在线编辑器在结构、功能层面混合了终端产品的设计理念，虽然是新产品，但延续着旧体验。当前市面上相似产品的功能叠加，品质和设计也日趋同质化，无论是在品牌 UI 等视觉层面，还是在产品体验感上都已经难以满足用户在云端工作的效率和对品质的预期。

  本文约 2550 字

预计阅读时间：7 分钟

Cloud Studio 是腾云扣钉面向开发者推出的一款在线 IDE 平台，在上一个版本中，由于缺乏更合理的设计系统和语言，无法建立用户的品牌和体验心智。我们基于业界产品的背景和研究，确定了一个关键的突破口：从情感化角度出发，确定「品牌优化」和「界面应用」两个方向，打造开发者云端工作美学。

1. 设计理念的诞生

我们围绕着「以开发者云端工作为中心」开启了一次全新的体验升级：追求纯粹、极客、有温度感的设计理念，精心打造极致的开发A体验；寻找工程师的文化特质转化为设计语言。

2. 应用新的设计语言

首先，我们基于官网首页应用落地新的设计语言“PURE，DYNAMIC，THINKING”，抽取了纯净和思考这两个核心理念，分两步做了应用和塑造，先官网，后平台，这也为后续的界面应用提供根基与延展性。

2.1-具备交互引导性的动效设计

官网首页 Banner 是最直接、最具感染力的视觉传达路径，我们希望用户在进入（https://cloudstudio.net/）即刻感受到开发者纯粹、极客和有温度感的个人工作场景，观看完动效，即可开启工作桌面，这是一个实用和简洁的演示逐帧动画；背景上，通过 Slogan 传达产品价值，同时背景抽象的「CS」图形的浮动，试图传达云端工具所带来的轻量轻松的体验感受。

2.2-LOGO 设计

之前品牌标志以纯文字呈现，视觉锤太弱，同时蓝底白字的搭配显得过于高冷。所以我们在颜色上选择了多彩的高饱和渐变色增加温度感，用圆圈这个基础图形来表达简单纯粹的理念，同时运用了布尔运算法切割「CS」字母，科学巧妙地构成 Logo 图形。以情感化细节设计拉近产品与用户的距离，既强化了平台形象，也增加了品牌记忆点。

2.3-色彩

我们选择用以下几种颜色作为品牌色。

以高饱和、高明度的颜色为基调，是因为在线 IDE 产品界面大多是深色为主；品牌色以红黄蓝为主，整体鲜活明亮，打破常规的 IDE 官网的单调风格，暗黑色调衬托出眼前一亮的极客酷炫氛围。

辅助色为品牌色的邻近色，增强视觉的和谐度，彰显品牌个性。

同时，我们在 CODING 侧的运营页面也运用了这些色相的色彩系统。

2.4-标准字

新版首页保留了 Logo 中字体基因，页面标题选择了 Inter 字体；Roboto_Mono 作为数据类字体，代码属性符合产品调性；各楼层的标题和正文调整为苹方，棱角分明，干净利落，具有品质感。

2.5-栅格体系 

旧版页面模块布局割裂，屏效低，缺乏产品调性，造成产品缺少品质感，从而也降低了用户的信任度。本次的品牌视觉升级重新定义了栅格系统，希望通过骨骼重构赋予各个视觉元素以秩序感，在提升屏效的同时，使页面布局更加有规律可循。

我们以兼容性较高的最小单位 8px 出发，由于网页内容信息量不算太大，所以最终确定为 12 栅格体系，让内容呼吸感更强。在运营页面设计中，一般我们采用通用的 1920px 宽作为 Web 端的设计稿基准；iPad，iPhone 则分别是 768px 和 375px 的宽度。通过栅格公式计算，得出以下参数：

根据栅格的参数，我们运用到全站的运营页面，搭建平衡且具有秩序感的版面并间接提高用户浏览体验。

2.6-点阵

点阵来源于表格和标尺，是代表精密和细节的设计元素，在一开始，我们就以此切入和理解研发文化，从而提出相关设计语言，以此代表工程师文化，追求极致、精准的态度，潜移默化激发用户的认可。“点阵”是我们品牌化 UI 优化中最重要的元素之一。

点阵运用了两种不同的排列方式呈现，他们的共同点在于圆点直径和圆心的间距都基于最小单位 8 而设定，使栅格系统的设计语言也能规范其他环节，相辅相成。

方式一：我们更偏向以装饰元素的属性而去丰富视觉效果。

方式二：利用等轴侧形成的点阵图起到辅助 2.5D 插画，使其更加精准和整齐，目前多数出现在页面的 Banner 图设计中，配合主视觉图形。

点阵也运用在 Cloud Studio 解决方案的电路设计过程中，对于开发者文化来说，严谨性是非常重要的，这也影响到了设计方案的表达，比如这里的一件趣事：当时初稿的电路图被好眼力的同学发现缺少了开关功能，差点造成人为短路。前期灯泡的颜色也比较抢眼，导致整个主视觉的纵深感较弱；在终稿里，我们对此进行优化并丰富了细节，最重要的是加上了开关，形成完整的电路图。

3. Dashboard 界面应用

3.1-改造前

旧版 Dashboard 界面跟业界的风格、布局大同小异，未达到「围绕开发者为中心」的核心理念，导致无法在众多的竞品当中脱颖而出；业界高冷、单一的色调无法给用户感观体验带来温度，从而拉近用户与产品的距离感。

3.2-改造后

核心页面

极力打造开发者在互联网的工作场景氛围，以“云端桌面感“的设计加强沉浸式体验，诠释极客工作理念和文化信仰。

设计语言贯穿全局，从产品体验，到点阵、品牌色，再到栅格系统的沿用和扩展，形成里外呼应，规范性地达到统一且有规律可循的产品。

新版本新增了开发者协作的功能，在邀请页面的布局中，我们遵循信息的逻辑顺序进行展示，让用户高效获取信息内容；点阵背景即传达了设计语言又构建出纯净的风格，使用户更聚焦信息，免去过多的元素干扰。

在 Dashboard 的工作空间信息中展现了协同者的面孔，强调情感化，让开发者不再是一人孤身作战的感受，而是增强了云端协作的温度感。

边际页面和元素设计

在 Cloud Studio 空状态、出错状态和登录页等设计中，我们增加了轻透的毛玻璃质感元素，结合立体图形和品牌颜色等设计语言，传递开发者云端工作美学的语调，让整体画面轻盈、丰富，也带来了颜色情感化的视觉感知。

新版上线后，得到用户的较高好评：

总结

通过大量国内外优秀开发者的在线编辑器的竞品分析，确定了云端工作美学的设计目标，运用纯粹、极客和温度感的情感化设计理念，从动效、Logo、颜色、字体、布局等几个维度完成优化升级，以高感知完成新旧版本的视觉体验提升，以高价值实现云端工作美学的品牌效应传达。随着业务、产品、设计流行趋势发展，我们会持续更新优化，让设计语言更好地服务于业务和产品，长远、持续地输出价值，探索开发者云端工作美学。

最后，感谢 Jason 的开发团队和 Cocoo Studio 腾云扣钉设计工作室的共同协作。

- END -