Works at Zeabur
What is Zeabur?
Zeabur revolutionizes PaaS (Platform-as-a-Service), enabling developers to deploy services effortlessly. Our platform supports any programming language or framework. Say goodbye to deployment hassles. With Zeabur, bring your coding genius to life swiftly and smoothly.
在 Zeabur，我的工作涵盖了设计系统的建设与维护、用户体验设计（UX/UI）以及品牌宣传物料设计等方面。我还参与了一些前端开发相关的调整工作，确保设计与技术无缝对接。
设计系统
在加入Zeabur之前，Zeabur有一套从实践中总结出的组件与一套灰色色板。我重新重新设计与整理了组件库，补充与阔展了颜色系统。
基础
Zeabur 沿用了 Tailwind CSS 默认的配置，包括颜色、字体和图标。Tailiwnd 提供一套高质量的预设，同时也提供修改配置的选项。通过采用 Tailwind，团队可以很快的去进行设计与开发。
Before
在此之前，Zeabur 拥有一套紫色调灰色色板，该色板是在HSL色彩空间下进行设计。该套色板的问题在于在深色模式下950-800色号很难区分，同时随着亮度逐渐增加颜色变浅，颜色越发偏紫色，在浅色模式下几乎不可用。
新色板
Zeabur 使用 Tailwind 色板来作为主色板，新的色板添加了 Zeabur 品牌颜色与新灰色，分别为 violet、 orangered 与 gray。violet 一般作为 primary color，orangered 主要作为 destructive color。gray 作为中性色一般用于背景与文字，在Zeabur的设计环境中，需要更多的灰色来设计不同的层级，因此我们在950-700、300-50区间进行了更多的采样，来更好的满足设计需求。
新的 Zeabur 颜色色板在OKLCH色彩空间下进行制作。OKLCH能够使相同亮度（Lightness）的颜色肉眼感觉一致。在设计色板时，我们参考了 Tailwind 颜色的亮度排布，使得新添加的颜色亮度分布与Tailwind原本的色板保持了一致。
Design Token
作为一个初创团队，庞大且复杂的设计系统对于快速开发、试错、迭代是一种负担。针对这个问题，我们采用了一种渐进式的设计系统。在颜色系统上，Zeabur主要直接使用例如 slate/100 的 primitive 颜色命名方法，因为这提供了很高的灵活性。我们对于这种方式进行了一层封装，对于常用的背景、描边和文字，我们还使用了相对语意的命名方法。例如 surface/100，同样采用了数值命名的方式，但并没有具体指明 surface 或者 background 的具体场景（例如btn - background - hover），这是为了在灵活性与易管理之间取得平衡。
现在的语意命名分别有surface、text、stroke。 surface用于背景。text用于文本与图标。stroke用于描边。
颜色用法
Zeabur 色板按照 Tailwind 编号，同一色相从50-950由浅入深共11种颜色。灰色由于需要更为详细的分类作为背景色，共有15种颜色。除灰色外，500色号为solid color，饱和度最高，可以用来作为背景色。
灰色主要作为背景色与文本颜色。surface/100-200 一般用于面积比较大的背景。对于层级的表示，一般有两种方式，在100和200之间不断切换，或者是色值逐渐变高。
surface/300-500 一般用于面积比较小的背景，例如按钮。surface/300一般作为默认状态，400一般作为hover状态，500一般作为active或selective状态。对于不同状态例如hover的切换，一般是上移或下移一个值。例如button是surface/100，hover时变为surface/200。
排版
Zeabur 采用了 Tailwind 的排版系统，字体为Albert Sans。
组件
在 Zeabur，我利用 figma 的最新特性重新设计了一系列组件。正如之前提到的，我们采用了一种渐进式方案。我们在最开始只设计了最基础的组件。
并随着特性增加、从旧设计切换到新设计的过程中，逐渐增加必要的组件。
图案
我为 Zeabur 设计了一种新的图案风格——线性描边、立体、轮廓加粗，加以必要的动画，强调Zeabur的科技属性。
工具：Rhino、Ai、AE、Lottie、Figma
具体的工作流程我会先使用 Rhino 进行 3D 建模，Rhino能够到处 SVG 格式，导出之后我会使用Ai、Figma对导出的 SVG 进行必要修改，导入 Figma 后使用 Lottie Files 制作动画导出 GIF / JSON 。
UX / UI
我在 Zeabur 设计的 UX / UI项目包括几个完整项目与杂项。
定价页
Zerabur 的定价策略是基于订阅加用量的模式，即每月$5的订阅费用和根据实际使用的资源费用计算的额外费用。如果资源费用低于$5，则不会额外收费，因为有 $5 的免费用量额度。这是如何通过设计突出传达给用户的关键点。根据用户反馈，现有的定价介绍是许多用户取消订阅的原因之一。
整个页面分为4个 section：订阅卡片、收费策略介绍、预算功能、用量说明。整体的视觉风格采用Zeabur现有的暗色风格，同时在收费策略介绍与用量说明的卡片背景增加了渐变，使得用户在浏览时有一定的节奏感。在新版设计上线后，因为不理解收费方案退订的用户显著减少。
-
订阅卡片展示了Zerabur的三种方案：Serverless、开发者和团队方案。每个卡片介绍了包含的功能，并提供了一键订阅按钮。
-
收费策略部分通过两个费用相加来展示Zerabur的收费规则，同时用户可以通过与背后代表资源用量的图表进行交互，价格会相应变化。
-
预算功能是Zeabur的特点，因此需要在此处进行展示。与竞品平台相比，Zeabur可以设置预算额度，以避免高额账单。
-
初始的用量说明只是简单的图表展示，但由于表内只有四项内容，因此将其做成卡片形式并放大展示。
Dashboard
Zeabur 的旧 dashboard 比较简单，包括导航栏与项目卡片。项目卡片包含了项目名称、项目描述（可选）、项目图标（可选）、项目包含的各项服务。 主要问题有：
- 卡片与背景颜色相近，在白天难以清晰识别；
- 项目卡片的描述与图标是可选的，且描述高度为三行，但大部分用户不设置，导致大面积空白；
- 缺乏搜索栏等常用功能；
- 创建项目按钮位于卡片末尾，用户若有多个项目需翻至底部；
- 项目卡片展示的服务多达8个，但大部分用户仅部署1-4个服务，造成空间浪费。
最初尝试在项目卡片上展示更多服务信息，如运行状态、服务预览链接。但服务数量不确定，导致了项目卡片的高度不固定，如果这样设计，就需要采用瀑布式布局，而瀑布流布局更适合内容消费，这对于一款面向开发者的专业工具是不合适的。瀑布流布局不适用于开发者工具。经过团队讨论，决定仅展示与项目相关信息，服务详细信息需进入项目页面查看。保留服务运行状态展示。新的设计包括：
-
整体页面：我们在导航栏增加了常用链接的入口，同时增加了切换语言的选项。因为之前的语言切换入口太深，导致有国内用户询问是否支持中文。我们还在导航栏底部增加了搜索栏与排序按钮。同时也将新建项目按钮移动到了顶部。最后调整了背景的颜色。
-
项目卡片：我们只选取了与项目有关的信息，包括名称、描述、用量费用、服务器所在地与项目内部署的服务。我们将项目描述只显示一行，这样在不添加项目描述的情况下依旧不会存在太大空白。我们还将服务的图标进行堆叠处理，最多也能显示8个服务图标，但只需要一行。
Dedicated Server
Dedicated Server是指用户可以将自己的服务器绑定在Zeabur平台，享受 Zeabur 提供的一流开发体验。
浅色模式（未上线）
浅色模式是Zeabur社区呼声最高的需求，但由于之前的色板对于浅色模式几乎不可用，我重新设计了颜色系统。颜色系统完成之后，大大加快了浅色模式的设计速度。
其他工作
登录页
Zeabur最开始只支持Github登陆，为了增加邮件登陆的功能，重新设计了登录页。
old：
new：
Paywall
CMDK 模窗与服务部署流程
为了优化部署代码的体验，我们首先优化了部署面板与相应CMDK模窗的UI，有了更好的扩展性。同时在部署流程上，我们在部署前增加了预览与增加配置环境变量的步骤。对于有配置环境变量需求的用户，旧的流程是部署->部署完成->服务上线->增加环境变量->重启服务->服务上线->OK，新的流程是部署->增加变量->部署完成->OK。
自定义添加Docker服务表单
Zeabur 允许用户自己添加 docker 容器服务。旧的添加 docker 表单太过复杂，输入错误也没有具体的错误反馈。为了解决这个问题，我们首先进行了用户旅程分析，发现了一些问题。为了解决这些问题，我们采用了渐进式披露的方法，将多余表单收起，只有需要时才会显示。我们还为相应的错误进行提示、对输入内容进行检查。
侧边栏
404 / 502 页
物料宣传
贴纸
Blog/change log 封面
宣传手册
海报
