7大规则:非科班如何做好UI设计的7大规则(Part 2)

0 评论 5033 浏览 50 收藏 16 分钟

如果你是一名UX设计师,请在绘制线框后绘制一个漂亮的模型;如果你是一个开发者,那就把你的下一个项目做成是好看的。

前言

今天这篇文章是《非科班如何做好UI设计的7大规则》第二部分,第一篇《非科班如何做好UI设计的7大规则(Part 1)》

原文来自西雅图的独立UI/UX设计师Erik D. Kennedy,他在用户体验和视觉设计方面有很丰富的经验。同时他还运营了一个设计网站,Learn UI Design,他会在上面分享自己学习的心得,也会发布一些视频教程。有兴趣的朋友可以关注一波。

因为是英文佳作,能力有限,所以找了英语专业的小伙伴来帮忙,如果有发现什么纰漏,emmmm,我们改……

本文是系列文章的第二部分,建议你先看看第一部分的内容,第一篇非科班如何做好UI设计的7大规则(Part 1)》

我们正在讨论的是设计简洁干净UI的规则:

  1. 光来自天空(Part 1);
  2. 黑与白第一(Part 1);
  3. 加倍你的留白(Part 1);
  4. 了解在图像上叠加文本的方法;
  5. 使文本弹出和不弹出;
  6. 只使用好的字体;
  7. 像艺术家一样窃取;

规则4:了解在图像上叠加文本的方法

如果你的目标是成为一名优秀的设计师,那您必须学习如何以吸引人的方式,将文本放在图像上。

这是每一个优秀的设计师都应该做好的事情,当然,这也是很多初级设计师都会遇到的问题!

方法1:直接将文本应用与图像

什么?这也叫一种方法?

不得不说,这是最基本也是最有效的方法之一,这也是为什么我把它放在第一条的原因。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

Otter Surfboards.嘻哈和instagrammy,但是有点难以阅读

在使用此方法需要主意的问题:

  • 图像和文本有一定的明暗对比度,一般情况下,图像应该是整体暗色调的,文字以白色为主;
  • 在多种屏幕尺寸下,都保证文字都可读性;

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

Aquatilis网站 – 绝对值得一游。

我曾经在很多项目里面都使用了这个方法去添加文字,它也能够给观这呈现一个很酷都画面,但在实际使用过程中,也要控制使用量。

方法2:覆盖整个图像

将文本放在图像上最简单的方法就是直接覆盖图像。如果原始图像颜色不够深,则可以用半透明但黑色覆盖整个图像。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

Upstart网站拥有35%不透明黑色滤镜。

如果你看到这个原图的色调,你会发现原始图像太亮并且对比度太高,使得文本难以辨认。但是覆盖一个黑色的半透明图层,那就不存在这个问题了。

此方法也可以适用于缩略图或小图像。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

来自慈善机构的网站缩略图:water site

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

尽管黑色覆盖层是最简单和最通用的方法,有时候使用彩色覆盖层,也会得到意想不到的效果。

方法3:文本框

这个方法更简单,也会更可靠。

使用一个温和透明的黑色矩形,在上面添加白色的文字。如果叠加层不够透明,不管下面是什么图像,都可以保证文字的清晰可读。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

MiguelOlivaMárquez的现代檀香山iPhone概念

当然也可以使用一些颜色,只是在选择色彩时候要有依据。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

MarkConlan

方法4:模糊图像

当我们把底层图像模糊处理之后,上面当文本清晰度令人惊讶。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

Snapguide中的大量模糊叠加。请注意,模糊区域也变暗。

苹果从iOS 7开始的背景变得模糊不清,ie浏览器也使用它起到了很大的作用。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

还可以直接在照片的非聚焦区域作为模糊图层部分,这对图像和版式布局的切合度要求更高。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

Teehan + Lax

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

我们要保证文本始终位于模糊之上,这样,你就可以很清晰的阅读文字部分了。

方法5:底图褪色

把底层图像的某部分巧妙的淡化为深色,然后在其上面放置白色文字。这是一个巧妙的办法,在很多网站都有应用这个方法。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

对于上面的图像,你可能会觉得就是直接在图像上放置了白色的文字,其实不然,你仔细看,你会发现其实是一个由0%不透明度到20%不透明度渐变的矩形框。

这个操作非常的微妙,在不影响整体美观但前提下,确保了易读性。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

规则5:使文本弹出和不弹出

这里的弹出和不弹出指的是文本的吸引度,也就是如何让我们想要让观者看到的部分突出,其它部分层级降低。

文本的表现在很多地方都以对比的形式来呈现。只要你接触过设计,你就一定知道如何来控制文本的层级:

  • 尺寸对比(更大或更小尺寸)
  • 颜色对比(明度对比最为显眼)
  • 文字字重(粗字体和纤细字体)
  • 字间距(通过距离来区分块)

当然还有一些其它的,如文本斜体、边距、下划线等等。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

我们想要突出或者降低某个部分视觉层级,往往不是通过某一种样式来达到的,都是多种样式的组合表现。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

图片中页脚部分的文字体积小、对比度低、字体重量就显得不那么大。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

Blu Homes是一个设计的无可挑剔的网站,它有一些很棒的标题,但强调的字体是小写的。如果此处用大写字体,则过分强调看起来过于强烈。

规则6:只使用好的字体

在设计过程中,字体的选择有时候足以影响到整个画面的效果,而我们的策略就是,找到好的字体,只使用它们。

这个部分没有什么要研究字体的好坏,只是列出一些不错的免费字体,供大家在设计的时候选择。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

设计一些具有非常独特个性的网站时,可以使用一些非常不同的字体,但对于大多数UI设计来说,只需要简洁明了的东西。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

Ubuntu(上图)。 很多字重, 比某些应用程序所需的更有特色。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

OpenSans(上图)。 易于阅读,流行的字体。 适合身体复印。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

Bebas Neue(上图)。 很棒的字体,全部大写。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

Montserrat(上图)。 只有两个字重,但足以做到层次风割。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

Raleway(上图)。 常用于标题部分,对于正文可能有点多。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

Cabin(上图)。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

Lato(上图)。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

PT Sans(上图)。

规则7:像艺术家一样窃取

在我第一次坐下来尝试去设计一些应用元素的时候,一个按钮、一个表单、一个图标,无论如何,这是我第一次意识到,我对如何使该元素看起来更好知之甚少。

但是幸运的是,我还没有发明任何新的UI元素。这意味着我总能看到其他人如何做到这一点,并且从最佳状态中挑选出来。

但是如何去选呢?以下是我在为客户设计的时候发现的最有用的资源:

1. Dribbble

这个一个仅限邀请的“为设计师展示和讲述”的网站,你可以在这里找到几乎所有东西的好例子。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

Work byVictor Erixon,Focus Lab, andCosmin Capitanu, respectively

事实上,你可以在这里看到我所有的工作内容。以下是推荐您可以关注的人:

@Victor Erixon。拥有非常鲜明的个人风格,而且非常棒。美观,干净,扁平的设计。他已经是7年的设计师,并且已经成为游戏的佼佼者。

@Focus Lab.。这些家伙是“聪明的名人”,他们的工作不辜负声誉,真的很多样化,永远是一流的。

@Cosmin Capitanu。一个很棒的设计师。他制作的东西看起来很疯狂,没有花哨的未来感。颜色真的很好。

2. Pinterest

我不知道“warmarc”是谁,但他设计的电话用户界面的样式图,对于我的某些工作项目真的非常有用。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

3. Pttrns

下面是一个移动应用截图的目录。关于Pttrns的好处是整个网站布局统一,这使得它每一个页面都处理的非常好,无论是登录页面,用户配置文件,搜索结果等。

「佳作翻译」非科班如何做好UI设计的7大规则(Part 2)

我坚信每个艺术家都应该成为一只鹦鹉,直到他们懂得如何去模仿最好的。然后去寻找自己的风格,发明新的设计趋势。在此之前,让我们像盗贼一样去“窃取”好的创意。

小结

我写这篇是因为我希望我能够在很早之前看到这些,我希望它对你有所帮助。

  • 如果您是一名UX设计师,请在绘制线框后绘制一个漂亮的模型。
  • 如果你是一个开发者,那就把你的下一个项目做成是好看的。

我不希望UI看起来像是需要神奇的艺术学校技能才能做得体面。我们只是观察,模仿,并告诉你的朋友怎么去使用。无论如何,这正是我迄今为止所学到的,而且我始终是初学者。

如果你还在关注这我,你已经阅读了两篇总共超过5000字的文章,并看过很多插图和截图。但我还没停止,所以还没结束。

相关阅读

《非科班如何做好UI设计的7大规则(Part 1)》

 

原文作者:Erik D. Kennedy

原文链接:https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda

本文由 @设计师日记 翻译发布于人人都是产品经理 ,未经许可,禁止转载

题图来自 Unsplash,基于CC0协议。

给作者打赏,鼓励TA抓紧创作!
4人打赏
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!