Nocalhost 云原生开发工具

Nocalhost 是一个由我设计的  开源云原生开发工具 ，2021 年成为 CNCF（云原生计算基金会）Sandbox 项目。

Nocalhost 一词源于 No Localhost，使用 Nocalhost 能够对 Kubernetes 环境下的微服务应用进行快速开发，有效缩短开发循环反馈，让云原生开发回归原始而又简单。

Nocalhost - 基于 IDE 的云原生开发工具

Nocalhost 提供实时的云原生应用开发体验，使用 Nocalhost 开发云原生应用时，任何代码更改都可以立即在远程端生效，免去了提交、构建和推送镜像等步骤 ...

新标签打开

Nocalhost 官网

Nocalhost 于 2020 年底发起，我以设计师身份加入其中，负责全部的产品与视觉设计，同时参与了官网前端开发。后期迭代转交给其它设计师。

品牌设计

Nocalhost Logo 以四个基础图形层叠形成，其中包含一个由“聚光灯”联想而来的特殊图形，作为品牌的主要识别符号。Logo 字体部分也将字母 o 设计得与该符号呼应。

Logo 主体设计周期约为两周，后续在网站设计时对其进行了图形与色彩优化。

Nocalhost Logo - 横版

此外还为 Logo 设计了 第二种形态，以文字为主，图形进行点缀。也可以将图形用在普通文本中的 Nocalhost 名词下，在大段文本中提升品牌名字的辨识度。

Nocalhost Logo - 文字为主的形态

当时的设计方案列表：

Nocalhost Logo 设计方案展示

Nocalhost 在 CNCF Landscape Application Definition & Image Build 中，从众多 Logo 中脱颖而出：

Nocalhost 在 CNCF Landscape 中

官网设计

Nocalhost 并不复杂，官网需要呈现的内容不多。首页用不规则的复杂背景吸引大家的眼球，精致的插图和易懂的内容带领大家理解产品，简单的内容不简单的设计。

首页 Hero 部分使用可交互的 3D Logo 作为模型，鼠标 hover 时模型从暗变亮，呼应了 Nocalhost 是一个 “聚光灯” 的概念。推荐稍后打开官网体验一下此处的交互动效。

Nocalhost 首页 - Hero

在 “What is Nocalhost?” 板块中，使用四张精致的插图生动的介绍产品概念。

Nocalhost 首页 - What is Nocalhost

Localhost 开发模式与 Nocalhost 开发模式对比

Nocalhost 首页 - 对比 Localhost 与 Nocalhost

用表格形式展示 Nocalhost 优势

Nocalhost 首页 - Nocalhost 优势

网站第一版上线后，网站设计由其它设计师跟进，现在线上版本与我的设计会有差异，点击下方链接查看我设计的 初版官网存档：

Nocalhost - 第一版官网存档

Nocalhost 初版官网由我设计并参与开发，本链接中的网站为初版上线时的代码，代码可在我的 GitHub 主页中查看。

新标签打开

Nocalhost 第一版官网存档

官网开发

通常设计师和前端同学合作最容易遇到两个问题，一个是设计的很好，前端实现困难就直接拒绝；另一个是响应式适配细节太多了，设计和前端反复优化细节非常耗时。

在 Nocalhost 官网开发过程中就暴露了这两个问题。

首页设计的复杂层叠背景，和 Hero 中 3D 交互动效，对前端同学来说比较陌生缺少经验。层叠背景的实现还需要根据图片素材进行计算，对齐偏移最大值最小值等，对前端同学的理解和还原能力有很大的挑战。

在完成设计后我就参与了首页的开发工作，基于前端同学实现的框架做了大量的调整。

主要工作：

• 使用 border-image-slice 特性实现了可拉伸的层叠背景
• Hero 中的 3D 模型与交互则使用当时刚开始 beta 测试的 Spline 工具直接导出到前端，并将依赖文件本地化
• 优化了大量响应式细节，完美适配各类终端

我参与开发的官网前端效果也请看上方 初版官网存档，官网在后续经历了一次静态网站生成工具变更，代码被开发重写了一遍，产生了大量问题。

其它参与内容

Nocalhost 产品早期以 VSCode、JetBrains IDE 的扩展插件形态存在，我也参与了插件的设计。

之后 Nocalhost 开发了一套集群与开发空间的管理面板，我以评审者的身份参与了部分重要迭代。