关闭

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

时间: 2020-02-13阅读: 461标签: 设计

作为一个前端工程师,如果你对 htmlcss 有基本的了解,并希望在浏览器中创建美观的用户界面,那就别到处乱找资料了!在本文中,你将通过了解以下七个基本知识来提高 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/
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7658

关闭

Javascript面向对象的程序设计

这篇文章是关于Javascript的面向对象的程序设计,主要从三个方面来介绍,1. 理解对象属性; 2. 理解并创建对象; 3. 理解继承

网站导航的设计细节

在快速建站中,每一个细微的方面都会影响网站的优化效果。因此,在做营销网站时,有必要充分考虑并优化每个细节。今天,我们将与您分享一个在实践中容易被忽略且非常重要的细节,即网站导航的设计。

别让这九个闹心的套路毁了你的网页设计

模式化的设计套路之所以为广大网页设计师所喜爱,很大程度上是因为它们具备有良好的可用性和可访问性,在转化率和用户留存率上有着不错的数据表现。但是这些通过数据来体现的设计模式,在用户的视角里,可能并不那么理想。

解密 Design System

设计系统的产生是为了某领域内产品在不同平台和设备上都保持设计和交互风格的统一。既然是一个系统 ,那必须具有相应的完整性,它为产品设计,产品内容等方面提供相应的指导

优秀网页设计_优秀Web设计的69条设计原则

好的设计能够帮助企业提升数据,同时还可以提供用户一个良好的使用体验。不过今天讨论的重点并不是付费报告,而是这69条设计原则。

设计师常用的几个资源网站分享

如果你是一名设计师,你的电脑上可能存储了很多的设计网站,但是对于一些新手小白来说,刚接触设计的时候应该怎样进行绘制呢?难道要自己去一笔一笔的进行绘制吗?下面给大家分享几个设计网站

纯CSS Material Design风格按钮

其实Material Design的扁平化icon按钮,这类型的按钮往往只利用几何色块的变化,就能抓住使用者的眼光,并且从几何形状中明白按钮的含意,这也是Material Design非常强调的设计理念和精髓。

网页设计需要学那些东西?

初次接触或者想要进入网页设计行业的朋友会经常分不清楚web前端与网页设计之间的区别,不知道网页设计要学什么,web前端要学什么,因此感到很迷茫?

网站设计如何提高用户营销转化率?

用户获取是确定网站成功的核心指标,没有活跃的用户会花费大量资金投入,在获得用户之后,网参与和保留是两个指标,可真实地洞察网站的成功,较低的网站参与度和保留率是导致网站失败的一个因素,而高度参与和保留则相反

设计逻辑的细致和严密问题

我们从工程上的精确和准确来引申我们的概念。测量一段距离的长度,得到结果是0.34米,我们可以提高测量的水平,得到一个更好的结果,比如0.342377946米。后者比前者具有更高的精确度(或者简称精度)。我们说后者比前者更“精确”

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!