前端程序员要懂的 UI 设计知识

前端程序员要懂的 UI 设计知识

疯狂的技术宅 前端先锋

翻译：疯狂的技术宅
做者：Per Harald Borgen
来源：freecodecamp
正文共：1401 字
预计阅读时间：5分钟

做为一个前端工程师，若是你对 HTML 和 CSS 有基本的了解，并但愿在浏览器中建立美观的用户界面，那就别处处乱找资料了！在本文中，你将经过了解如下七个基本知识来提升 UI 设计技能：

• 留白
• 对齐
• 对比
• 比例
• 板式
• 颜色
• 视觉层次
  让咱们开始吧！

留白

咱们要研究的第一个设计基础是空间留白，也被称为负空间。顾名思义，它是页面上元素之间的空间。

被压缩在没有留白的页面上的元素不只看起来没有吸引力，并且难以浏览和阅读。

能够经过多种方式调整留白，包括填充、边距和行高。经过查看下图了解有效留白带来的不一样。

调整留白先后

对齐

接下来是对齐。这是确保每一个元素相对于其余元素正确放置的过程，例如经过对其列在页面上保持向下对齐。

从下图中能够看到，第一页的元素在许多不一样的列中（弱对齐）远没有第二页的吸引力和可读性好，而第二页具备很强的对齐性：

页面对齐不良

页面高度对齐

对比

在构建页面或应用程序时也要考虑对比度，这一点很重要。对比度是页面上相邻显示的颜色之间的差别。

从该示例能够看出，对比度差的页面很难阅读，而且元素也不突出。

对比度差的页面
具备良好对比度的页面（以下面的页面）不只看起来更好，并且更加用户友好和具备高可访问性。

高对比度示例
为了帮助你正确地得到对比度，WCAG（Web内容可访问性指南）建议最小（AA）对比度至少为 4.5:1，对于大文本，则为 3:1，或者加强（AAA）对比度为 7:1 或 4.5:1（大文本）。有不少插件或网站能够帮你进行检查。

比例

比例 也是用户界面的重要组成部分，因此请仔细考虑每一个元素的大小。例如元素相对于页面应该足够大（所以没有大的间隙）。一样，标题等有较高重要性的元素应大于重要性较小的元素。

查看下面的先后图像，并注意正确调整后页面的外观。

页面比例不佳

很好的例子

版式

版面设计对 UI 也有很大的影响。有不少方法能够调整这个设置，包括字体选择、字体大小、对齐方式、字母间距、行高、字体样式、颜色和对比度等。

一般，在一个页面上使用不超过 2 个字体系列，并确保不一样的方面能够协同工做，以创建重要性的顺序。这就是所谓的视觉层次结构，咱们将在下面详细介绍。

若是遵循这些提示，则页面外观将以下所示：

良好的排版案例
而不是使人困惑和难以理解，像这样：

排版不佳的页面

颜色

最早影响用户体验的 UI 设计是颜色。颜色心理学认为着每种颜色都对某些人产生了意义——例如红色能够表示危险，而白色能够表示清洁和宁静。

可是要注意颜色。含义会由于文化差别而改变，所以在选择颜色时，请务必进行研究并考虑目标受众。

一样要记住，太多的颜色会形成不良的 UI，而且你选择使用的颜色应该互补。根据经验，将相同色调的较浅或较暗的变体彼此相邻，通常不会出错。只需看看下面两张图的对比，是否是第一张很辣眼睛！

颜色选择不佳的页面

善用色彩

视觉层次

咱们列表上的最后一项是视觉层次。UI 的某些元素比其余元素更重要。视觉层次结构使咱们能够确立这种重要性。

能够用位置、对比度、颜色、比例、样式或以上各项的组合来完成此操做，以下面的第二个图像所示，它有比第一个图更好的视觉层次。

视觉层次不佳的页面

使用字体和颜色创建视觉层次

总结

在本文中，咱们介绍了七个主要的设计基础：留白，颜色，对比，比例，对齐方式，版式和视觉层次。它们对于 UI 都一样重要——若是缺乏这些元素中的任何一个，都会损害整个用户体验。

原文连接

https://www.freecodecamp.org/news/learn-ui-design-in-5-minutes-tutorial/