打造出色 UI 的 7 个法则(上)

序言

首先,明确一点,这篇文章并不适用于所有的人,而是为以下人群准备的:

  • 那些想要在开发产品时设计出好看UI的开发者。
  • 想要让自己的作品集更出彩的UX设计师,或是想要做出更精美的UI和UX的设计师。

如果你上过艺术学校,或者已经是一个UI设计师了,你可能会觉得这篇文章比较无趣,而且观点都是错的,甚至会让你感觉不舒服。没关系,你的批评没有错,把网页关掉继续做你的事吧。

我曾是一名不懂UI的UX设计师,我喜欢设计UX,但是没过多久我便意识到做出精美的界面是多么有必要:

  • 我的作品集看起来很糟糕,显得我的思考和工作过程很差劲。
  • 找我做UX咨询的客户更喜欢有能力呈现作品的人,而不是只会画方框和箭头的人。
  • 我能去给早期的创业团队工作吗?明显不能。

我也有一些理由来安慰自己:我不知道美学的糟粕是什么,我主修工程专业,因此做出来的东西很不美观也无可厚非。

最后,我学习了app的美学,同样我也学会冷静、努力地分析创意,而且毫不羞愧地去临摹好的作品。如果我在一个UI项目上花了10个小时,那么只有1个小时是有效的,其他的9个小时却是在失败中学习。我拼命地Google、Pinterest、Dribbble 里面找可以临摹的东西。

这篇文章就是这些失败所总结的“法则”。

因此,我想对那些新人说:我现在擅长UI设计,那是因为不断的分析,而不是突然领悟到美与平衡。

这篇文章不是理论研究,只讲实际的应用。文章里不会出现黄金分割,也不会提什么色彩理论,只有我从失败和不断的磨练中学到的东西。比如:柔道的发展源于日本武术和哲学思想。上柔道课时,除了过招,你还能学到能量、气息与和谐之类的东西。以色列格斗与此不同,它是由20世纪30年代的犹太人发明的,那时犹太人正处于纳粹人的压迫之中。其中没有艺术,在以色列格斗术的课上,你会学到怎么用笔和书本去袭击别人的眼睛。这就是荧屏上的以色列格斗术。

法则如下:

  1. 光线要由上往下
  2. 黑白优先
  3. 增加空白的空间
  4. 处理好图片上的文字
  5. 突出与淡化文本
  6. 只用优秀字体
  7. 像艺术家那样偷师

 

1:光线要由上往下

阴影对于我们所见到的UI元素意义重大。

或许这就是我们在学习UI设计的过程中最为重要的非明显事物。光线来自天空,光线总来自于天空,因此从下面产生的光就显得很诡异。

当光线来自于天空时,它会照亮食物的顶部,在下面产生阴影。上面部分颜色浅,下面部分颜色深。光纤由上到下照到脸上很自然,如果反过来话就很瘆人:

当然,UI设计也是如此。正如我们五官下都有些许阴影,在任何一个UI元素下方你都能找到阴影。我们的屏幕是平的,但是我们可以采用艺术手段让它看起来是3D的。

拿按钮来举例。即便是相对“扁平化”的按钮,依然能看到一些光线变化的细节:

  1. 未按下去的按钮底边更暗,光线没有照到那里。
  2. 这种未按下去的按钮上半部比下半部更亮,这是因为在它模仿了一个稍微弯曲的表面。当你将面前的镜子倾斜来看镜中的太阳时,表面会反射出比太阳投射还要多的光。
  3. 未按下去的按钮有微妙的阴影,在放大的图中可能会更清楚。
  4. 按下去的按钮虽然底部比上部更暗,但是整体都是暗的,这是因为它处于屏幕的平面上,阳光不容易照到。有人会说,在现实生活中按下去的按钮更暗,那是因为我们的手挡住了光线。

仅仅一个按钮就有4种不同的光线变化,重点就在这里。现在,我们将这种手法用到别的地方。

这里有一组ios6的“勿扰模式”和“通知”设置,现在来看看会有多少种光线的变化。

  • 在控制面板的上边缘有一小块阴影。
  • “开启”滑动槽也有阴影。
  • 在“开启”滑动槽的下半部分反射了光线。
  • 这些按钮是突出的,看到了在它们上半部分边缘的光线没?因为是与光源垂直的,接收了大量的光,折射到了你的眼睛里。
  • 因为光线角度问题,分割线处出现了阴影。

通常会内凹的元素:

  • 文本输入框
  • 按下的按钮
  • 滑动槽
  • 单选框(未选中的)
  • 复选框

通常会通常会外凸的元素:

  • 按钮(未按下的)
  • 滑动按钮
  • 下拉控件
  • 卡片
  • 被选中后的单选按钮
  • 弹出消息

了解了这些之后,你就会在很多地方发现这一法则。恭喜你入门了!

等等,那扁平化设计呢?

ios7引发了科技界对“扁平化设计”的追求。也就是说图标是扁平化的,不再模仿外凸或内凹,而是只有线条和单一颜色的形状。

我很喜欢,干净、整洁的风格,但我不认为这是一种长久的趋势。通过光纤的微妙变化来模拟3D的效果很自然,但是无法被完全取代。

在不久的将来,我们很可能会看到半扁平的UI(这也是我推荐你们要深入学习的设计)。我把它叫做“flatty design”,依然干净、简洁,但是会有一些阴影,有轻点、滑动和点击操作的提示。

现在,Google在各个产品上推行他们的Material Design语言,这是一种统一的视觉语言,其核心部分就是模仿物理世界。

Material Design的说明展示了它如何运用不同的阴影区表现不同的层次。

这也是我所认同的类型。

它使用了真实世界的元素来传达信息,关键在于:细微。

你不能说它没有模仿现实世界,但它也不是2006年的网页风格。没有纹理,没有梯度,没有光泽。

我认为“Flatty”是未来的方向。扁平化?早晚会过时的。

2:黑白优先

在上色前用灰度模式可以简化大多数视觉设计的复杂元素,还能让你专注于空间和元素的布局。

UX设计师现在都喜欢“移动优先”,这就意味着你要先考虑如何在手机上显示页面,然后再考虑在超清Retina显示屏上的显示效果。

这种限制很好,它能理清思路。先解决复杂的问题(在小屏幕上显示),然后再解决简单的问题(在大屏幕上的可用性)。

有个类似的限制:设计黑白优先级。先从复杂的问题入手,使app美观易用,但不要借助颜色,最后再有目的地上色。

这种方法能让app保持“干净”、“简洁”。加入过多的颜色会使丢失干净、整洁的效果。“黑白优先”的原则能促使你关注空间、尺寸和布局的问题。这些是在设计干净、简洁的页面时首要考虑的问题。

下面来看“黑白优先”法则不适用的几个例子。比如运动、卡通等具有鲜明特色设计就需要一个能够将颜色运用到极致的设计师。然而大部分app并没有这样鲜明的特点,只要保持干净和简洁就好。那些色彩绚丽的颜色被公认是很难的。

所以,还是用“黑白优先”原则。

第二步:如何上色

最简单的上色方法是只加一种颜色。

给灰度模式增加一种颜色可以简单快速地吸引注意力。

你可以进一步,灰色基础加上两种颜色,或是同意色调的多种颜色。

实践中的颜色是什么色调?

网页中主要用的是十六进制RGB表。最好不要管这些,RGB不是好的颜色设计框架。大多数采用的是HSB模式(相似的有为HSV或HSL)。

HSB比RGB更符合我们平常看待颜色的方式,而且你也可以预测HSB的变化是如何影响我们所看到的颜色的。

如果你对此不熟悉,可以参考《设计师配色宝典!教你从零开始学配色》

通过调整单一色相的饱和度和亮度,你可以生成多种颜色——深色、浅色、背景色、强调的地方和吸引人的地方,但是这不会扎眼。只用一种或两种色调的颜色是强调和淡化元素却不把设计搞得一团糟的最好方法。

关于颜色的其他建议

颜色是视觉设计中最复杂的部分。从负复杂的理论和长期的实践中,我得出了一些好的建议:

小贴士:

  • 不要使用纯黑色,在现实世界中是几乎没有纯黑色的,调整不同的饱和度,尤其是阴影部分的饱和度,能够给你的设计提高丰富程度。此外,饱和的灰色更加接近现实世界。
  • Adobe Color CC:寻找/调整和创建颜色组合的最佳工具。
  • Dribbble通过颜色搜索:寻找与某颜色搭配的最好方法,实用性比较好。如果你已经决定了使用一种颜色,可以看看世界顶级设计师是如何给那种颜色配色的。

 

3:增加空白空间

留出一些空间,使UI看起来由设计感。

在法则2中,我提到“黑白优先”的原则能促使设计者先考虑空间和排版,再考虑颜色和美观。现在就来看看空间和排版吧。

如果你编写过HTML,那么你就会对HTML在网页上的默认排版比较熟悉。基本上所有的东西都会堆在屏幕上,字体、行距都很小,在段落之间小的间隔,但不是很多。段首至段尾也就100px或是10000px的距离。

从美学上来讲,这很难看。如果你想设计一个好看的UI,你就需要留出大量的空间,有时可能更多。

留白空间,HTML和CSS

如果你和我以前一样,习惯用CSS来调整布局的话,那么你应该从此改正过来,因为这种方法下留白空间不是默认状态。要试着把留白空间作为默认状态,添加各种页面元素。

我认为这是人们依然在素描的重要因素。

从空白页面开始意味着从留白空间开始。

从一开始就想好边距和间距,从未修饰过的HTML页面开始意味着从内容开始。

注意左侧的菜单栏。菜单条目的行间距是文字的两倍,字号是12px。再看看列表项,在文字“PLAYLISTS”和下划线之间有15px的空白。它比字体本身都还要高!也就是说,在列表之间有25px的距离。侧边栏的文字之间也有很大的空间,我们会很自觉就留意到这个多余的空间,将不同的元素有机的组合在一起。

 

 

 

 

 

 

 

 

 

 

 

很显然,留白的空间能够将混乱的节目做得美观简洁,比如论坛

或是维基百科。

有很多人认为,维基百科的新页面删除了很多功能,但是你不能否认这是我们学习的一个好的案例。

  • 在行之间留出空间。
  • 在元素之间留空间。
  • 在各组元素之间留空间。

分析一下哪些是可行的。

好了,以上就是第1部分的内容,感谢阅读!

第2部分我将讲解剩下的4条法则。

4.处理好图片上的文字
5.突出与淡化文本
6.只用优秀字体
7.像艺术家那样偷师

如果你学到了有用的东西,可以继续学习第2部分

1 2 收藏 3 评论

关于作者:木木的乔安娜

简介还没来得及写 :) 个人主页 · 我的文章 · 10

相关文章

可能感兴趣的话题



直接登录
最新评论
  •   2015/04/22

    我今年35岁了,以前做酒店管理的,没接触过ui设计,但我对界面设计很感兴趣,我现在开始学转行,能行吗?能做一辈子设计吗?

跳到底部
返回顶部