为开发者设计
开发者往往忽视设计。设计师往往忽视代码。这种脱节会扼杀产品质量。
我游走于两者之间。我热爱简洁的 CSS 和优美的排版。这种双重视角帮助我打造更好的产品。
这种割裂带来的问题:
- 设计师制作的视觉稿在移动端屏幕上会错位。
- 开发者为了节省时间而删减视觉细节。
- 最终产品失去了灵魂。
我使用设计系统(design systems)来解决这个问题。我将设计系统视为一种契约。
我不使用“蓝色”或“16 像素”。我使用 Token。
- 颜色变成了 "primary-500"。
- 间距变成了 "space-4"。
当设计师在 Figma 中更改一个 Token 时,开发者只需在 CSS 中更新一个变量。整个产品就能保持一致。这减少了手动工作并降低了错误率。
我在约束条件下进行设计。我不会假装约束不存在。我会与工程师讨论权衡(trade-offs)。我会提出既能保持良好的用户体验,又不会让代码编写过于困难的方案。设计变成了一种协作伙伴关系,而非简单的交接。
品牌身份不仅仅关乎视觉。它始于个性。
- 品牌是大胆的还是内敛的?
- 是俏皮的还是严肃的?
这些词汇引导着每一个选择。它们决定了字体、照片和语调。视觉效果只是将那种个性转化为像素的过程。
无论你是在构建仪表盘还是品牌,你的流程都至关重要。截图仅仅是表象。人们需要看到你工作背后的语境和逻辑。
设计永无止境。我发布、观察并不断优化。
一个今天就能上线的优秀设计,胜过一个永远无法上线的完美设计。利用真实的反馈,一次迈出一小步进行改进。
来源:https://dev.to/visionapi/designing-for-developers-how-i-bridge-code-and-creativity-2kgf