前往首页
Product DesignBrandingFrontend

Nocalhost 云原生开发工具

开始于2020年, 结束于2021

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

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

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

品牌设计

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

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

Nocalhost Logo - 横版

Nocalhost Logo - 横版

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

Nocalhost Logo - 文字为主的形态

Nocalhost Logo - 文字为主的形态

当时的设计方案列表:

Nocalhost Logo 设计方案展示

Nocalhost Logo 设计方案展示

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

Nocalhost 在 CNCF Landscape 中

Nocalhost 在 CNCF Landscape 中

官网设计

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

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

Nocalhost 首页 - Hero

Nocalhost 首页 - Hero

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

Nocalhost 首页 - What is Nocalhost

Nocalhost 首页 - What is Nocalhost

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

Nocalhost 首页 - 对比 Localhost 与 Nocalhost

Nocalhost 首页 - 对比 Localhost 与 Nocalhost

用表格形式展示 Nocalhost 优势

Nocalhost 首页 - Nocalhost 优势

Nocalhost 首页 - Nocalhost 优势

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

官网开发

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

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

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

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

主要工作

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

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

其它参与内容

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

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

如果你也有一个开源项目正在寻找产品设计师的话,欢迎与我联系。