为没有设计背景的开发人员提供初学者提示。

说实话，刚开始开发网站的时候，设计界让我感到畏惧。早期的大多数项目我都坚持简洁的极简主义，因为我太害怕尝试更大胆的设计了。

我们并非人人都是平面设计专家。然而，作为前端开发者，我们至少应该能够识别出优秀的设计。今天，我将分享一些我最喜欢的、易于记忆和实践的设计技巧和见解。希望你们中的一些人也能分享你们自己的设计！

对用户体验 (UX) 基础知识有充分的了解。

如果要我从这份清单中挑选一件事来深入每个人的大脑，那一定是这个。如果用户难以与之交互，那么再美观的设计也毫无意义。

首先，你的组织希望（但我再强调一遍——并非总是如此）拥有一支由用户体验设计师和研究人员组成的团队来处理大多数重大设计决策。那么，你为什么要学习它呢？
它能让你更轻松地与设计师和研究人员沟通，让你更好地理解设计架构决策，并帮助你在开发产品时始终将最终用户放在首位。

你需要能够制作出精美的原型吗？当然不是。但了解低保真原型（即在纸上勾勒出草图）会让你比想象中走得更远。它能帮助你理解为什么要以某种方式放置元素。

这似乎是常识，但我曾与许多开发人员、Scrum 主管和产品所有者合作过，他们不知道良好用户体验的价值，而且这一点显而易见。

为了快速学习，我建议前往YouTube或Google Developers。

你觉得空白够了吗？那就加倍吧！

没有什么比空白更能让页面更美观、更易于阅读。

它不仅能让网站看起来更美观，还能提升导航体验、提高可读性、增强内容参与度，以及更明显的号召性用语。它也不仅仅关乎填充和边距。您是否曾经使用过非常漂亮的字体，但就是看起来不太对劲？不妨尝试调整行高或字母间距，留出一些喘息空间。 

我收到的最好的设计建议之一就是不要想着添加空白；养成习惯，认为你添加到网站上的每个元素都会移除空白。这将帮助你在布局和组件使用方面做出明智的决定。

选择一种字体搭配并坚持下去。

网站不应该使用不一致的字体——这意味着应该坚持使用两三种能够良好协作的字体。然而，字体设计的世界浩瀚无垠，即使你只关注谷歌字体，也可能让你感到不知所措。

最重要的是要记住可读性。你选择的字体是否易于阅读？更重要的是，时间紧迫的人能否快速浏览长段落并仍然获得必要的细节？你的选择很棒。
如果听起来我在这里谈论的是可访问性问题，那我的确是在谈论。确保网站视觉效果最简单的方法是选择易于阅读的字体并合理设置行距。我在上文关于留白的部分中提到的所有关于提高可读性和更有意义的内容参与度的内容，也适用于字体。

幸运的是，如果你感到力不从心，还是有一些地方可以参考的。在谷歌搜索“字体搭配”就能找到很多文章、生成器和设计指南。根据你的创作内容，你可能需要参考不同的网站。

对于文本量很大的网站和博客，我喜欢使用Fontpair，它有很多很棒的字体组合，并且针对可读性进行了优化。Canva的字体搭配终极指南也是另一个很棒的资源。它提供了一系列建议，涵盖了从体育网站到简历等各种用途。如果你想了解如何让你的字体更易于访问，请查看Fathom UX 博客上的“无障碍排版的四个特点” 。

请记住，如果其他一切都失败了：蒙特塞拉特。

使用调色板。

除非你拥有艺术或设计学位，否则我们大多数人都无法自然而然地掌握色彩和谐。坚持使用合适的颜色确实能提升网站或应用的品质。

我刚开始设计网站的时候，有人建议我使用颜色生成器，这样我的网站就能一直看起来很棒。当然，颜色生成器的作用远不止于此，但这是一个很好的开始。就像字体搭配一样，有很多工具可以提供帮助。我个人最喜欢的是Coolors，它提供了看似无穷无尽的选择。

随着时间的推移，您将形成自己的喜好并学会识别哪些颜色搭配在一起看起来最合适。

不要害怕探索深度。

扁平化设计和 Material Design 之间的争论在设计师圈子里愈演愈烈。如果你不知道两者的区别，首先，我不会责怪你。本质上，扁平化设计（最著名的代表是苹果）刻意避免使用 3D 渲染。渐变、阴影或纹理之类的元素并非苹果的风格。而 Material Design 则让交互更加直观，其边缘、阴影和接缝看起来更加真实，更像非数字产品。

这对用户体验设计的影响可能看起来很小，但这里有一个重要的观点：

扁平化设计非常适合那些高度适应数字交互的用户，而Material Design则更注重对用户操作的响应。Material Design在设计沟通能力方面更进一步。（来源）

虽然直接采用扁平化设计可能很诱人（毕竟这样做更容易，加载速度也更快），但在采用之前请先考虑一下您的用户是谁。

Material Design 的设计初衷是为了展现用户操作的预期响应。因此，它对于不太熟悉电子设备的用户来说也更加直观。例如，一个小的 box-shadow 就能轻松吸引用户对按钮的注意力。

如果您是 CSS 新手，理解渐变和 box-shadow 之类的元素可能会有点困难。但目前流行的“半扁平化”设计风格或许才是用户的最佳选择，具体取决于您的产品。因此，花点时间阅读 Google 的Material Design文档，加深理解或许是值得的。这样，您才能为用户做出正确的选择。

经常研究并向他人学习

设计的世界瞬息万变。如果可以的话，每个月花些时间研究一下 Codepen、Dribble 以及个人设计师作品集上的内容。

在我们继续讨论之前，我想花一点时间说一下，我真的不提倡盗窃设计。

但是，借鉴他人的经验并从中汲取灵感也是有好处的。既然好东西，何必去破坏它呢？优秀的设计往往并非独一无二。如果 Material Design 适合你的项目，那就用它吧。即使其他应用都在用它，也没关系：它绝对是快速完成设计的万无一失的方法。

我最喜欢的启动项目的方式是看看类似领域的已有经验。这有助于理解特定网站和应用的通用惯例（从而确保更好的用户体验），也可能给你一些不错的UI设计灵感。

如果您喜欢某个网站的外观，请打开开发工具，看看他们是如何实现设计技巧的。如果您想了解更多关于网站设计背后的理念，请联系制作它的开发者或设计师！请记住，如果您直接从其他开发者那里借鉴了某些内容，则必须注明出处。但如果您使用的是广泛使用的动画或字体，请记下来以备后用。加入您自己的创意，人们很快就会从您的项目中汲取灵感。

说到这儿，别忘了从自己身上偷点东西！每个项目里都会有你喜欢的部分。回顾一下你的代码，并重复使用/回收它们。 

在评论中分享您的技巧和窍门。

我很想听听你有哪些万无一失的技巧和资源。你在职业生涯中都积累了哪些经验？请在下方分享！