首页 > 网页教程 > 设计分享 > UI设计分享:用户界面设计的10个小技巧

UI设计分享:用户界面设计的10个小技巧

时间:2019-10-04    来源:Aa设计专题

我们大多数人开始接触 UI 设计的时候,只是知道很少或者根本不懂任何设计理论。尽管万事开头难,我们还是需要通过许多设计类的书籍和文章来学习如何配色、排版、布局等。

设计不是简单可以用颜色,形状和文字表示的,应该是一个「言之有物」的过程,即每当我们改变字号、添加阴影或改变颜色时,一定要有必须这样做的理由。在本文中,我将分享一些我在设计用户界面时学到的东西,以及我在学习过程中的新发现。

用颜色和字重来设计层级,而不只是字号的大小

当面对需要信息层级结构的内容时,放大字号表示强调和重要性通常不能解决问题,如下图所示:

信息层级并不仅仅是不同尺寸字体的组合,而是由字体尺寸,字重,字体颜色形成对比的正确组合。对比差异越大,层级关系表现越明显。

1. 如何创建更好的对比度?

不要仅用大小不同,但是字重相同的文字来创建对比度和层次结构。

主要内容使用更粗更黑的字体样式,次要内容使用更小更细的字体样式。

从深到浅创建三种不同的文字颜色(参见下图的示例)。

通常我使用我的基色作为正文的文字颜色。

在设计中敢于运用大的字间距(比如标题24px,正文16px,标签文字10px等)。

更大的间距=更好的对比度

查看https://www.modularscale.com/,这是一个用来创建更好的字体层次结构的在线计算器。

对比度=尺寸+字重+颜色

最后,请务必检查其对比度。

不要创建多种色调的黑色

我们都知道使用黑色文本颜色会导致读者眼睛疲劳,所以我们的解决方案是创建更黑的变体作为替代。我们可以使用不同的不透明度的黑色作为解决方案,而不是选择 3 个或更多的颜色值。

在下图的例子中,我使用黑色作为主要颜色(000),并根据应用的位置(即主要内容、次要内容等)降低了不透明度。

运用数学原理理解颜色

我们大多数人都不太擅长选择正确的颜色组合,每当我们看到具有精心配色的设计时,我们都会问自己:「他们是怎么做到的?」

直到我了解到在色相、饱和度、亮度(HSB)上进行简单的加法和减法就能发挥魔法,在这个公式里我们将使用 HSB 的色彩模式,而不是 RGB 模式。你可以轻松摆脱彩色背景上无聊的白色,并把它变成毕加索的作品。(如下图)

1. 那么HSB中的加法和减法怎么算呢?

实际上有两种方法,如下图,两种方法都具有相同的基色#B9F4BC(圆形背景色),但图标中文件夹和装饰条的颜色则不同。在我们开始时,记住第一个字母相当于色相,其次是饱和度,然后是亮度。

方法A

在方法A中,我们可以看到在整个图形(圆形背景,文件夹,装饰条)中,色相H值保持 123 不变,而饱和度S和亮度B是变化的。

现在,当我们关注基色的饱和度S值是 24,亮度B值是 96 时,当我们为文件夹创建更深的绿色时,这两个值都会改变。饱和度从 24 变为 40(增加+16),亮度从 96 变为 82(减少-14),这表明为了形成良好的对比度,饱和度的变化需要与亮度成反比例调整。装饰条也是一样的,使用文件夹的饱和度S值和亮度B值作为基础值,饱和度从 40 移动到 44(增加+4),亮度从 82 变为 75(减少-7)。因此,我们得到了这个公式:

  • 较暗的颜色值=饱和度增加,亮度减少
  • 更亮的颜色值=饱和度减少,亮度增加

每当我想知道我的设计应该使用什么样的正确颜色时,这个公式帮助了我。我了解到最好的起点是有一个基色,然后以基色为基础,保持色相值相同,调整饱和度和亮度的值。

方法B

在方法B中,同样的原理(上面的公式)依然适用,但是色相H值发生了变化。我们之前在各种设计材料中使用的颜色模式 RGB 和 CMY 现在对我们来说很有用。

RGB 分别代表红色、绿色和蓝色,而 CMY 代表青色、洋红色和黄色。我刚开始设计时并不了解这两种颜色模式的重要性,直到我无意中发现可以将 RGB 和 CMY 进行颜色组合。

现在在方法B中,如果想要在基色的基础上有一个较暗的变化,我们需要在调色板中将颜色选择器往靠近 RGB 的方向移动,反之将颜色选择器往靠近 CMY 的方向移动选择较浅的颜色。如下图:

由于我们想要在文件夹图标中使用比基色#B9F4BC(圆形背景)更深的颜色,我们需要将颜色选择器移动到最靠近的 RGB(本例为蓝色)的位置。如果想要一个颜色较浅的文件夹,把选择器移动到左边靠近 CMY(本例为黄色)的位置。

RGB 导致颜色变深,CMY 导致颜色变浅的情况比较多。

通过移动颜色选择器得到我们想要的颜色后,基于方法A中的公式,我们得到以下的颜色公式:

  • 红色,绿色,蓝色(RGB)+方法A公式=颜色变深
  • 青色,洋红色,黄色(CMY)+方法A公式=颜色变浅

相关推荐
20个精致漂亮的视频播放器界面设计欣赏及点评
视觉设计:页面构建的审图与细节
15个超棒的无线移动终端UI设计案例赏析
响应式网页设计正成为移动互联网大势所趋
浅谈界面设计中的结构设计
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
国外精彩网页界面设计案例赏析
Photoshop教程:提高IOS设计效率的30个要诀分享
网站专题页面的视觉设计及结构布局要点分享
另眼观看用户界面扁平化设计的不足之外
产品视觉设计与用户心理的有趣现象
10个漂亮实用并附带源码的Web设计教程分享
优秀移动APP应用图标设计指南
在视觉设计中对像素的深度解析
什么是扁平设计?如何创建扁平化设计风格?
色彩情感对用户体验设计的影响
换汤不换药?看应用们如何“为iOS 7设计”
高效UI设计秘笈 Photoshop CC使用技巧图文教程
界面设计教程:如何做好扁平化设计之交互篇
移动应用图标配色诀窍 APP界面配色设计教程
产品设计教程:提升用户使用黏性的6个诱惑手段
扁平化:回归真实的设计
iOS7用户界面设计的10个准则分享
UI设计师自学记:抄袭别人,超越自己
Windows Phone 8 UI设计指南分享
APP设计经典:Pinterest的交互细节
从引导页设计说起 谈谈如何提高产品体验
游戏网站设计案例分享:聊聊那些让页面更加出彩的设计
8个评价UI设计作品好坏的标准
20个最火爆的Behance网页设计及UI案例解析
大开眼界!2014年最逆天的UI设计
界面设计必备:全方位科普常用的字体规范
手机屏幕尺寸扩展如何影响用户体验设计?
那些丑丑的应用图标 设计的人是怎么想的
产品设计:FEEDLY创始人再聊改版实战经验

精彩推荐

热门教程