成为更优秀的前端开发人员的 5 个可行步骤

编写代码并构建一个按预期运行的用户界面，让你成为一名前端开发人员。当你交付了功能后，你的工作就完成了。

如果你的目标只是“足够好”，那么你可以就此打住。但如果你想脱颖而出，更进一步，交付高质量的作品，那就按照以下步骤操作吧。

1. 编写可重用的组件。重复的代码会导致不一致。

有时你会想：“这只是几行代码。我只需要复制粘贴就行了，因为创建新组件需要时间。” 然后你就会遇到这样的问题：

• 有些按钮有悬停效果，有些则没有。
• 您的边框使用了不同的灰色。
• 按钮标签和图标之间的间距略有不同。

听起来没什么大不了的，对吧？

这些细微的不一致之处会随处可见。它们累积起来，最终会让你的网站看起来“不对劲”，不够整洁。

2.创建样式指南。

样式指南是网站设计的文档。它包含组件及其变体列表、排版样式、图标、调色板以及其他可重复使用的内容。它可以帮助您在整个网站上实现一致的外观。

如果你已经创建了可复用组件，但不知道哪些组件已经存在，那还有什么意义呢？最终你得到的还是同一个组件的不同版本。

你可以像星巴克一样，打造 100% 专属于你自己的专属体验，也可以使用Storybook来加速。Storybook 允许你通过 UI 更改组件的参数，而无需你花费时间设计自己的页面。

以下是GitHub 不同按钮的概览。您也可以查看不同的尺寸。GitHub的 Storybook 和许多其他按钮一样，都是公开的。

3.注意间距。

如果设计师多次让你“向右移动 5 个像素”，别翻白眼🙄。他们这么做是有原因的。几个像素的差异可能看起来不是什么大问题，但却可能决定着最终效果是“不对劲”还是恰到好处。记住，积少成多。

这是来自《重构 UI》的一个关于不良间距与良好间距的示例。在这个例子中，元素之间的间距太大。你也可能得到相反的结果，让布局变得过于拥挤。

这是改进版。好多了！

这些评分被紧密地分组在一起，这表明它们是相关的。现在，这些评分也更接近标题“50 条顾客评论”，因此您知道该标题指的是其下方的评分。它们应该归为一类。“评论此产品”和“分享您的想法”也被分组在一起。

他们在《重构UI》一书中更深入地探讨了间距（以及更多设计主题）。这是一本很棒的“面向开发人员的设计”书，而且读起来非常轻松！

4.学习设计。

作为前端开发人员，你将与设计师紧密合作。良好的设计意识和对设计的兴趣将帮助你更好地完成工作。

设计师不会提供你所需的 100% 细节。他们可能会提供移动版、桌面版，有时还会提供平板电脑版，但中间的那些断点怎么办？所有不同的状态怎么办？

理想情况下，你会掌握大部分信息。但现实是，你必须填补空白，做最有意义的事情。这不仅关乎美观，也关乎功能实现。

如果您对设计没有真正的兴趣，那么您不必沉迷于设计，但如果有，那么请公开您的兴趣，并告诉您的设计师队友您的一些想法或您遇到的很酷的设计。

作为回报，他们也会更愿意与你分享想法。携手合作，你们可以提升整体用户体验，打造出一款让彼此都感到自豪的产品。

5.添加微妙的过渡。

我只想说第三遍……积少成多。你可以对网站做一些小改进。它们很细微，也很容易实现。

例如，在更改按钮的背景颜色时，添加一个简单的过渡效果。这是我从 Tailwind 复制过来的一个过渡效果。

transition-property: color,background-color;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;

您还可以在悬停时添加阴影，并将元素向上移动几个像素，就像在Rachel 的作品集网站中一样。

或者当您的汉堡菜单图标变成关闭图标时，或者当您的箭头图标改变方向时添加动画。

概括

前端开发不仅仅是编写代码和让系统运行。为了提供出色的用户体验，需要注重细节、一致性和良好的设计感。

从其他网站汲取灵感。当你遇到一个喜欢的网站时，想想你为什么喜欢它，以及如何在未来的工作中运用它。持续学习，享受学习的过程！

你还有什么建议吗？请在下方评论区分享！