前端开发人员的 5 个基本设计概念

作为一名平面设计师，深入编程确实有点令人畏惧。我的编程流程则有所不同。我喜欢先从客户的角度来构思项目。这样，我就能确定应用的主题，并确定可以添加哪些功能。之后，我会创建一个线框图。线框图让我能够看到应用的布局。之后，我开始编程。我会先构建功能，然后进行测试，看看是否一切正常。最后，我开始编写前端代码，并使用不同的 CSS 框架来设计我的应用。

以下是我应用于我的设计的概念。

1.线框

这个术语指的是用最少的细节勾勒出按钮、图片和文本的位置。这能让你直观地思考最终产品的外观。这也能让你直观地看到可能需要在代码中构建多少页面或元素。

2. 构图

构图是指将元素排列成特定的样子。你应该熟悉的一个概念是网格系统。它与大多数 CSS 框架（例如 Bootstrap 和 Foundation）一起使用。使用大小和颜色进行对比，有助于信息更好地流动。让你的作品看起来更有意义的最佳方法是找到一个焦点。阅读此博客，更好地理解构图。

3.重复

重复意味着在整个设计中重复使用相同或相似的图像/或样式。例如，如果您在表单上使用圆形按钮，则无论何时在页面上出现该按钮，圆形按钮的样式都应该保持一致。

4. 颜色

始终为您的作品准备一个配色方案。这有助于您的作品看起来具有凝聚力、经过深思熟虑，并且视觉上赏心悦目。市面上有很多工具/网站可以生成配色方案。我通常使用Color Mind或Coolors。
提示：最多使用三种颜色。一种原色、一种辅助色和一种强调色。使用 60-30-10 规则。60% 应该是您的品牌色，30% 应该是辅助色，10% 应该是强调色。

5.排版

排版是指将字体排列得更清晰、更赏心悦目，同时又能传达信息的艺术。您在代码中看到的一些基本排版元素类型如下：

<h1> This would be the largest text. </h1>
<h2> This would be the second largests text. </h2>
<strong> This would be bold. </strong>
<p> This would be the smallest size of font. </p>

这时，文章的排版就派上用场了。首先，你需要了解你希望用户看到的最重要的信息是什么。对于这类信息，你很可能会使用 h1 标签，或者将文本加粗，使其从其他内容中脱颖而出。

另一种运用字体排印的方法是将两种不同的字体组合在一起，形成对比。最常见的搭配是无衬线字体搭配衬线字体。以下是一些示例：

图片取自此处
San-serif 对的示例：

衬线配对示例：

衬线配对示例：

希望以上内容能帮助你更好地理解设计。练习得越多，你就越精通。现在就来看看这些资源吧。

以下是需要查看的资源列表：

避免使用
BootStrap 模板博客
CSS 网格指南 MDN
Google 字体的颜色组合