PlanetScale 的产品设计是如何工作的
在 PlanetScale，我们的产品设计流程相较于许多公司更加轻量化和协作化。我们没有严格遵循的一套规则，也没有产品经理。我们只做必要的设计探索工作，以确保对方向有信心。最有趣的是，我们不进行所谓的设计“交接”，而是直接与团队中的工程师一起编写代码。
保持轻量化的规划
公司的发展路线图由领导团队与工程和产品设计团队共同制定。路线图中的工作包括推动公司愿景、展示 Vitess 的强大功能，以及解决客户反馈。项目会按优先级进行排序，随后产品设计开始探索可能的解决方案。对于更大规模或定义较不明确的功能，使用纸或者 iPad 绘制草图通常是找到合适方向的最有效方式。
低保真设计草图：部署请求和模式回滚
从原型开始
一旦方向逐渐清晰，我们会转向在 Figma 中制作高保真模型。有时候，使用 Codepen 对某个具体元素进行实验会很有帮助。对于更复杂的用户流程，我们发现使用 Figma 制作原型分享给团队成员非常有用。通过 Figma 的原型制作功能，可以轻松创建一个真实的用户体验，包括长时间运行的操作、状态变化和 UI 转场。设计师还可以观察其他人在原型中的导航过程，常常能发现需要改进的摩擦点。
模式回滚功能的早期原型
尽快进入代码阶段
我们不会花时间去制作所有可能的 UI 状态模型。如果相关成员对设计的核心部分感到满意，我们就会转向代码阶段，并继续在代码中完善 UI。从这一步开始，流程就与工程团队密切协作。
我们的产品设计师能够编写 HTML/JSX 和 **CSS**，并帮助开发 Next.js/Typescript 应用中的基础组件。我们尽量处理所有的结构和样式部分，以能给工程师提供类似“填空式”的开发基础。以下是一段带有 TODO 注解的 React 组件代码示例：
return (
<>
{true /* TODO: 如果部署队列中有内容 */ && (
<div className='rounded-b border-t px-3 py-2'>
<p>
{true /* TODO: 如果队列长度为 1 */ && <>有一个部署正在排队等待部署</>}
{false /* TODO: 如果队列长度大于 1 */ && (
<>有 {/* TODO: 队列长度 */} 个部署正在排队等待部署</>
)}
({/* TODO: 循环队列，链接用逗号分隔 */}
<Link href={/* TODO: 部署请求链接 */}>
<a>#{/* TODO: 部署请求编号 */}</a>
</Link>)
</p>
</div>
)}
</>
)
功能开发的启动与交付
我们通常会通过在 API 和前端中添加必要的功能开关和检查来启动功能开发。这些开关允许我们为特定人员和团队启用新功能。随后，整个团队和早期访问的客户可以使用这些功能，最后在全面发布之前测试迭代。
我们的员工之间拥有高度的信任，以及在解决问题、实施解决方案和交付成果方面的自主权。由于我们的产品设计师能够编写代码，我们可以避免传统的设计交接流程。根据我们的经验，这减少了团队之间的摩擦，并为客户带来了更好的产品。
关注公众号：程序新视界，一个让你软实力、硬技术同步提升的平台
除非注明，否则均为程序新视界原创文章，转载必须以链接形式标明本文链接
