创建华丽UI的7条规则( Part1)

这篇文章讲的并不是理论。本文是纯应用程序。你不会看到黄金比例。我甚至没有提到颜色理论。只有我从坏习惯中学习到的,然后有意识地练习。

不妨这样想:柔道是在日本数百年的武术和哲学传统的基础上发展起来的。你上柔道课,除了战斗,你还会听到很多关于能量、气流和协调的说辞。诸如此类。

另一方面,马伽术是一些强硬的犹太人发明的,他们在20世纪30年代的捷克斯洛伐克街头与纳粹分子作战。没有艺术可言。在马伽术的课程中,你学习如何用钢笔刺穿别人的眼睛,然后把它写下来。

我要讲的就是界面版的马伽术。

2019年7月7日

首先也是比较重要的,先说明点这篇指南并不适合所有人,主要适合以下从业者:

1.希望在必要的时候自己设计出好看的UI的开发人员。

2.用户体验(UX)设计师–他们希望自己的作品集比呆板的PPT更好看,或者想通过绚丽的UI包装传达更极致的用户体验,也同样适用。

如果你上过艺术学校,或者认为自己已经是一名UI设计师,你可能会发现这篇指南是无聊的,错误的,恼人的。我不会介意的,你们所有的批评都是对的。关了这个,去读点别的吧。

或者,还是我告诉你你到底能在这篇文章中学到什么吧。

首先,我曾是一名完全不懂视觉设计的用户体验设计师。我真心热爱用户体验设计,但当我意识到,我可以找到一大堆理由来支持自己去学习——如何设计一个看上去不错的界面的时候,就放弃了单纯的UX设计:

 

我的作品集看起来像垃圾,完全没有反映出我的工作和思考过程

如果能提供更多专业的意见,而不仅仅是画几个方框和箭头这么简单,我的咨询客户肯定更愿意为此买单。

说不准某天我会考虑加入一个早期的创业项目?最好能成为工作中的全能王。

我有我的理由,我对美学一窍不通。我是个工程学的学士——最值得骄傲的地方,大概就是能把某个东西制造的奇丑无比。

“我只是个工程学的学士–最值得骄傲的地方大概就是能把某个东西制造的奇丑无比。 ”

最后,我学到了应用程序的美学,就像我学到了任何创造性的东西一样:冷静、认真的分析。而且只要能用的上,我不以“抄袭”为耻。我会花10小时来搞定一个设计项目,但实际的设计工作只有1小时,另外9个小时是在疯狂的学习。拼命地搜索谷歌google、Pinterest和Dribbble,寻找可以借鉴的东西。

以下的“规则”是那些时间里总结归纳出来的。

所以,告诉那些书呆子们:如果我现在擅长设计UI,那是因为我已经分析过东西了——而不是因为我对美感和平衡感有了直观的理解。

这篇文章讲的并不是理论。本文是纯应用程序。你不会看到黄金比例。我甚至没有提到颜色理论。只有我从坏习惯中学习到的,然后有意识地练习。

不妨这样想:柔道是在日本数百年的武术和哲学传统的基础上发展起来的。你上柔道课,除了战斗,你还会听到很多关于能量、气流和协调的说辞。诸如此类。

另一方面,马伽术是一些强硬的犹太人发明的,他们在20世纪30年代的捷克斯洛伐克街头与纳粹分子作战。没有艺术可言。在马伽术的课程中,你学习如何用钢笔刺穿别人的眼睛,然后把它写下来。

我要讲的就是界面版的马伽术。

规则如下:

1.光来自天空

2.先用黑白来检验设计

3.留空白的地方放大两倍

4.学习在图像上叠加文本的方法(参见第2部分)

5.使文本弹出-和非弹出(参见第2部分)

6.只使用好的字体(参见第2部分)

7.像艺术家一样借鉴(参见第2部分)

让我们开始吧。

规则一:光来自天空

大脑在理解我们看到的界面时,影子是至关重要的因素。

这可能是关于 UI 设计最重要又容易被忽视一个内容:光来自天空。 光线来自天空,从上往上,以至于从下往上的光让人看起来很怪异。

当光从天空而来时,它照亮事物的顶部,并在其下方投射阴影,物体的顶部比较亮,底部比较暗。

你不会希望人们的下眼睑都特别的黑吧,所以,如果我们在这些恶魔般的眼睛上面多加一些光亮,突然间他们就变成了你家门前的魔鬼女郎。

是的,这个真理同样适用于UI。就好像在我们的面部特征中总能看到阴影处于下方,当你看遍那些UI元素,你会发现他们的下方同样有阴影存在。屏幕虽然是平的,但我们花了大量心血,造就了平面上也可以显现三维效果的艺术。

这张图中我最喜欢的部分是右下角的手指图标。

比如这个按钮。即使有了这个相对“平”的按钮,还是有一些与光线相关的细节:

未按下的按钮(顶部)底部边缘较暗,那里没有阳光。

未按下的按钮在顶部比底部稍微亮一些。这是因为它模仿了一个稍微弯曲的曲面。就像你需要把面前的镜子向上倾斜才能看到里面的太阳一样,向上倾斜的表面会把更多的阳光反射到你身上。

未按下的按钮会产生一个微妙的阴影——也许在放大的部分更容易看到。

按下的按钮,虽然底部比顶部更黑,但整体上更黑——这是因为它在屏幕的平面上,太阳无法轻易照射到它。有人可能会说,我们在现实生活中看到的所有按钮都是黑色的,因为我们的手挡住了光线。

这只是个按钮而已,就已经呈现了4个细微的光线效果。这就是其中的教训。现在我们把它应用到所有东西上。{图}

iOS 6已经过时了,但它在轻度行为方面提供了一个很好的案例研究。

这里有一对iOS 6设置按钮——“请勿打扰”和“提醒”。”。这没什么了不起的,对吧?

但看看有多少光的效果起到了作用。

内嵌控制面板的上部投射出一个小阴影

滑动按钮“打开”的边缘也有一些阴影

“打开”滑块轨道是凹的,底部反射更多的光

图标设置了一些凸起。看到顶部明亮的边框了吗?这代表了一个垂直于光源的表面,因此接收了大量的光,因此反射了大量的光到你的眼睛里。

分栏凹槽在与太阳成一定角度的地方被阴影遮挡,反之亦然{图}

又一个分栏凹槽的样式,来自我的一个旧概念。

通常嵌入的元素:

文本输入字段

按下按钮

滑动轨道

单选按钮(未选中时)

勾选框

通常是开始的要素:

按钮(未选中时)

滑动按钮

下拉控制面板

卡片

选定单选按钮的按钮部分

弹出窗口

现在你知道了,你会发现它无处不在。欢迎入门,孩子。

等等,平面设计怎么样?

我们已经进入“平面设计”的潮流5年了,这正是它听起来的样子。平面设计是一种视觉风格,其中的元素缺乏模拟缩进或突出。它们只是纯色的线条和形状。”{图}

我和其他人一样喜欢干净简单,但我不认为这是一个长久的趋势。在我们的界面中对三维的微妙模拟似乎太直观了,我们很难完全放弃。

 

更有可能的是,我们会在不远的将来看到更多半扁平化的设计。(这也是我建议你尽快掌握的设计风格)。 我会称这种风格为 “扁平化设计”。依然干净,依然简洁,但是当你敲击,滑动,点击的时候,还是能看到阴影和曲线 。{图}

OS X Yosemite— 扁平化,但不扁平。

就在我写这篇文章的时候,Google基于旗下不同产品推出了他们的“Material Design”语言。这是独树一帜的视觉语言,它的精髓就在于,追求模仿物理世界。

这是Material Design上面的一个图示,示意如何通过不同的阴影来表示不同的深度。

这就是我看到的那种东西。

它使用微妙的现实世界线索来传达信息。这一点至关重要,只是细微的。

也不能说它不模拟现实世界,但它也不是2006年的web风格。没有纹理,没有渐变,只有纯粹的装饰。

我认为扁平化是未来的趋势。至于扁平的?估计很快就要成为过眼云烟。{图}

那个平面设计现在看起来很流行!

规则2:以黑白效果起步

颜色是最为复杂的设计元素,在增加颜色之前,设计只是灰度的,这更容易让你关注元素之间的空间和布局。

用户体验设计师最近真的很关注“移动优先”。这意味着你得想象页面上的交互在一个手机上是否行得通,即使你面对的是一台超高分辨率的Retina显示器。

这种约束条件很好。这有助于澄清思想。您从较难的问题(在小屏幕上可用的应用程序)开始,然后采用较容易问题的解决方案(在大屏幕上可用的应用程序)。

这里还有另一个类似的约束:首先设计黑色和白色。让应用程序在没有颜色帮助的情况下,以各种方式变得漂亮和可用,这是一个更难的问题。最后添加颜色,即使这样,也要有目的性。{图}

Haraldur Thorleifsson的灰度线框图看起来和少数设计师的成品网页设计还好。

这就是让应用看上去“干净”“整洁”的最靠谱方法。如果你在每个地方都使用了很多颜色,那会让设计看上去很糟糕。黑白效果会强迫你优先专注于空间,大小和布局,而这才是让页面看起来干净简洁的更深层次的原因。{图}

经典灰度设计

在某些情况下,B&WF并没有那么有用。比如为了这几个明确的目标进行设计的时候——“运动感”、“浮华感”、“卡通感”等等——需要一个能很好地运用色彩的设计师。但大多数应用程序都没有一个特定的态度,只要做到干净和简洁就够了。诚然,那些能够做到的设计难度要大得多。由Julien Renvoye(左)和Cosmin Capitanu(右)设计的华丽而充满活力的设计。这些设计要比看起来难得多。

黑白效果,无处不在。

第二步:如何添加颜色

最简单的颜色使用方法就是添加单色。

为一个灰度的网页设计增加单色可以简单有效地吸引眼球。

你也可以更进一步。灰度+两种颜色,或灰度+单一色调的多种颜色。

颜色代码在实践中——等等,什么是色调?

大多数情况下网页中的颜色都是使用RGB16进制代码来实现的。大多数情况下网页中的颜色都是使用RGB16进制代码来实现的。RGB不是一个好的着色设计框架。更有用的是HSB(它是HSV的同义词,与HSL相似)。

HSB比RGB更好,是因为它符合我们自然地考虑颜色的方式,并且您可以预测HSB值的变化将如何影响您正在查看的颜色。

如果这对你来说是一个新闻,这里有一个很好的HSB颜色入门。

单一色调的黄金主题来自Smashing杂志。

单一色调的蓝色主题来自Smashing杂志。

通过修改单一色调的饱和度和亮度,你可以生成多种颜色——黑、光、背景、重音、吸引眼球的东西——但这不会让眼睛感到压力过大。

在设计中强调或者中和某种元素时,最靠谱的方法是使用基于统一色调(或两种色调)的多种颜色,这能避免将整个设计搞得乱七八糟。

Kerem Suer设计的倒计时器,颜色的使用很有亮点

根据我的经验,根据UI调用的用例调整主题颜色是使用颜色最重要的技巧,我在这里编写了一个实用指南。

还有一些关于颜色的注释

色彩是视觉设计中最复杂的领域,颜色是最为复杂的。所以当你开始手头的设计工作时,很多关于颜色的工具都低效或者并不实用,但我要介绍几个真心给力的好工具。

一个小的工具箱:

学习UI设计。无耻的宣传:这是我创建的一门课程,它包含了3个小时的彩色设计视频(以及超过20个小时的UI设计主题视频)。去learnui.design看看吧。

UI设计中的色彩:一个(实用的)框架。如果你喜欢这个部分,但是想要了解更多关于颜色的信息(而不仅仅是黑白),这就是你的文章。猜猜是谁写的!

永远不要使用黑色(伊恩·斯托姆·泰勒)。谈论如何在现实世界中几乎不出现完全平坦的灰色,以及如何饱和您的灰色阴影—特别是您的深色—为您的设计增加视觉丰富性。此外,饱和灰更接近真实世界,这是它自己的优点。

Accessible Color Generator。一个方便的工具,为一个颜色(你的主题颜色,标志颜色等),并把它变成一个整体,可访问的调色板。

Dribbble按颜色查找 。另一种很棒的方法是找到适合特定颜色的颜色。让颜色的运用有据可查。如果你已经决定了一种颜色,来看看世界上最好的设计师是如何搭配这种颜色的。

规则3:让留白加倍

为了让UI看起来更有设计感,需要添加大量的呼吸空间。

在规则2中,我说过黑白效果会迫使设计师在考虑颜色之前先去考虑间距和布局, 这种思考模式非常好。好吧,接下来的时间我们好好聊聊空间和布局。

如果您从头开始编写HTML,那么您可能熟悉默认情况下HTML在页面上的布局方式。

基本上,所有的东西都被砸向屏幕顶部。字体很小;行与行之间几乎没有空间。段落之间有一点点空间,但是远远不够。段落一直延伸到页面的末尾,无论页面宽度是100px还是10000px。

从美学上讲,这很糟糕。如果你想让UI看起来更有设计感,你需要添加更多的呼吸空间。

有时候需要增加的空间多到近乎荒谬。

空格、HTML和CSS

如果您和我一样习惯于使用CSS来控制页面的布局(默认情况下没有空格),那么是时候改掉这些坏习惯了。在一开始就将空白视为默认值——所有内容都以空白开始,直到通过添加别的页面元素来替代这个位置。

听起来很有禅意?我觉得这正是大多数人直接忽略这件事的原因所在。

从空白页开始意味着从空白开始。从一开始就考虑边距和间距。无论你在页面上面画些什么东西,都会慎重考虑其对空白区域的影响。

从一堆没有样式的HTML开始布局,也意味着你会更关注页面和内容的关系。空间和留白是后续考虑的事情,这一点必须明确。

这是一个音乐播放界面的概念设计,来自Piotr Kwiatkowski.

特别注意左边的菜单。

左菜单

菜单项之间的垂直空间是文本本身高度的两倍。你看到的是12px的字体,上面和下面都有同样多的填充。

或者看看列表标题。在单词“播放列表”和它自己的下划线之间有一个15px的空间。这比字体本身的高度还要高,这还不包括列表之间的25个像素。

顶部的导航条有更多的空间。文字“搜索音乐”占了整个导航条高度的20%。图标也使用了类似的高度。

左边栏的文字之间留出了比较充裕的空间,甚至更多。

Piotr很认真地在这里添加了额外的空间,并且得到了回报。虽然这只是他为了好玩而提出的一个概念(据我所知), 但因为在美感上下足了功夫,能够和市面上最好的音乐播放器UI界面相提并论。

 

好吧,充分的留白可以让最乱的界面看上去简洁和诱人——像Forum一样。

Forum的概念设计,来自Matt Sisto

或者Wikipedia.

Wikipedia概念设计,来自Aurélien Salomon

你会发现对此有很多争论,比如,有人指出Wikipedia的再设计从理念上完全忽略了使用网站时的功能性。但是我们也不能说这不是个好设计,完全不值得学习!

在你的行间留出空间。

在元素之间留出空间。

在元素组之间留出空间。

分析怎么样才是最有效的。

好了,这就是第1部分。谢谢你留下来!

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注