作者：Per Harald Borgen翻译：疯狂的技术宅
原文：https://www.freecodecamp.org/...
未经允许严禁转载
作为一个前端工程师，如果你对 HTML 和 CSS 有基本的了解，并希望在浏览器中创建美观的用户界面，那就别到处乱找资料了！在本文中，你将通过了解以下七个基本知识来提高 UI 设计技能：
- 留白
- 对齐
- 对比
- 比例
- 板式
- 颜色
- 视觉层次
让我们开始吧！
留白
我们要研究的第一个设计基础是空间留白，也被称为负空间。顾名思义，它是页面上元素之间的空间。
被压缩在没有留白的页面上的元素不仅看起来没有吸引力，而且难以浏览和阅读。
可以通过多种方式调整留白，包括填充、边距和行高。通过查看下图了解有效留白带来的不同。
对齐
接下来是对齐。这是确保每个元素相对于其他元素正确放置的过程，例如通过对其列在页面上保持向下对齐。
从下图中可以看到，第一页的元素在许多不同的列中（弱对齐）远没有第二页的吸引力和可读性好，而第二页具有很强的对齐性：
对比
在构建页面或应用程序时也要考虑对比度，这一点很重要。对比度是页面上相邻显示的颜色之间的差异。
从该示例可以看出，对比度差的页面很难阅读，并且元素也不突出。
具有良好对比度的页面（如下面的页面）不仅看起来更好，而且更加用户友好和具有高可访问性。
为了帮助你正确地获得对比度，WCAG（Web内容可访问性指南）建议最小（AA）对比度至少为 4.5:1，对于大文本，则为 3:1，或者增强（AAA）对比度为 7:1 或 4.5:1（大文本）。有很多插件或网站可以帮你进行检查。
比例
比例 也是用户界面的重要组成部分，所以请仔细考虑每个元素的大小。例如元素相对于页面应该足够大（因此没有大的间隙）。同样，标题等有较高重要性的元素应大于重要性较小的元素。
查看下面的前后图像，并注意正确调整后页面的外观。
版式
版面设计对 UI 也有很大的影响。有很多方法可以调整这个设置，包括字体选择、字体大小、对齐方式、字母间距、行高、字体样式、颜色和对比度等。
通常，在一个页面上使用不超过 2 个字体系列，并确保不同的方面可以协同工作，以建立重要性的顺序。这就是所谓的视觉层次结构，我们将在下面详细介绍。
如果遵循这些提示，则页面外观将如下所示：
而不是令人困惑和难以理解，像这样：
颜色
最先影响用户体验的 UI 设计是颜色。颜色心理学认为着每种颜色都对某些人产生了意义——例如红色可以表示危险，而白色可以表示清洁和宁静。
但是要注意颜色。含义会因为文化差异而改变，因此在选择颜色时，请务必进行研究并考虑目标受众。
同样要记住，太多的颜色会造成不良的 UI，并且你选择使用的颜色应该互补。根据经验，将相同色调的较浅或较暗的变体彼此相邻，一般不会出错。只需看看下面两张图的对比，是不是第一张很辣眼睛！
视觉层次
我们列表上的最后一项是视觉层次。 UI 的某些元素比其他元素更重要。视觉层次结构使我们可以确立这种重要性。
可以用位置、对比度、颜色、比例、样式或以上各项的组合来完成此操作，如下面的第二个图像所示，它有比第一个图更好的视觉层次。
总结
在本文中，我们介绍了七个主要的设计基础：留白，颜色，对比，比例，对齐方式，版式和视觉层次。它们对于 UI 都同样重要——如果缺少这些元素中的任何一个，都会损害整个用户体验。
本文首发微信公众号：前端先锋
欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章：
- 深入理解Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13个帮你提高开发效率的现代CSS框架
- 快速上手BootstrapVue
- JavaScript引擎是如何工作的？从调用栈到Promise你需要知道的一切
- WebSocket实战：在 Node 和 React 之间进行实时通信
- 关于 Git 的 20 个面试题
- 深入解析 Node.js 的 console.log
- Node.js 究竟是什么？
- 30分钟用Node.js构建一个API服务器
- Javascript的对象拷贝
- 程序员30岁前月薪达不到30K，该何去何从
- 14个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩展插件
- Node.js 多线程完全指南
- 把HTML转成PDF的4个方案及实现
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。