PSD 稿还原再思考

problem solver

UI 设计师和前端工程师之间的分工边界，毫无疑问是存在问题的。两个方向

让 UI 设计师去标注每个地方用什么组件，这个路子很难。因为很多从 UI 设计师看起来是相同的东西，在实现的时候是用不同的组件来实现的。那有没有一个折衷的路数呢？我空想了一下

例如我们有如上的设计稿

我们可以把有内容的部分，用灰色的方块代替

从而我们可以在界面上只留下相对简单的“灰色”和“白色”部分。那么需要回答一个问题

“填充空白间隔”的原则是什么

这个问题要相对容易回答。比指定每个区块用什么 React 组件来承载要容易得多。比如

这个红框所标记的空白是谁提供的？我们可以给定一个“专门用来提供空白的组件”的列表做为清单备选，然后从这个清单里挑选提供者。就像

有大块的，有小块的。总是可以有一个原则来把“空白”和“空白提供者”对应上的。这个对应工作可以是手工标注，也可以是半自动化的机器辅助，也可以是AI。如果我们能够进一步限定

那么这个空白匹配的算法会很简单。

对于产出 React 代码来说，还差很远。但是多了这个 PSD 稿还原的中间步骤，可以用来重新调整 UI 设计师和前端程序员之间的分工边界，也许可以有一些新的玩法出来。

你会打开一个 svg 文件，然后说代码太乱么。只要 svg 图片看得效果好，谁管里面有多少个 element 呢。要的就是让人可以睁一只眼，闭一只眼。关键是睁哪只眼，闭哪只眼。

做为后端程序员，打开前端代码总是会觉得找不到头脑，觉得东西都写在一起了

最理想的是有办法可以让我们读一部分逻辑的时候，可以把另外两部分的逻辑给隐藏起来。这就需要有一种可强制的规则来做自动化检查。理论上来说

布局组件的数量 <<远小于<< 样式组件的数量 <<远小于<< 带分支循环和数据绑定的组件数量

布局模式就那么几种，遇到了不规则的留白，设计师又不让步，大不了就用 VSpace 和 HSpace 暴力填充呗。

Recommend