7大规则：非科班如何做好UI设计的7大规则（Part2）

　　如果你是一名UX设计师，请在绘制线框后绘制一个漂亮的模型；如果你是一个开发者，那就把你的下一个项目做成是好看的。
　　前言
　　今天这篇文章是《非科班如何做好UI设计的7大规则》第二部分，第一篇《非科班如何做好UI设计的7大规则（Part1）》。
　　原文来自西雅图的独立UIUX设计师ErikD。Kennedy，他在用户体验和视觉设计方面有很丰富的经验。同时他还运营了一个设计网站，LearnUIDesign，他会在上面分享自己学习的心得，也会发布一些视频教程。有兴趣的朋友可以关注一波。
　　因为是英文佳作，能力有限，所以找了英语专业的小伙伴来帮忙，如果有发现什么纰漏，emmmm，我们改
　　本文是系列文章的第二部分，建议你先看看第一部分的内容，第一篇《非科班如何做好UI设计的7大规则（Part1）》。
　　我们正在讨论的是设计简洁干净UI的规则：
　　光来自天空（Part1）；
　　黑与白第一（Part1）；
　　加倍你的留白（Part1）；
　　了解在图像上叠加文本的方法；
　　使文本弹出和不弹出；
　　只使用好的字体；
　　像艺术家一样窃取；
　　规则4：了解在图像上叠加文本的方法
　　如果你的目标是成为一名优秀的设计师，那您必须学习如何以吸引人的方式，将文本放在图像上。
　　这是每一个优秀的设计师都应该做好的事情，当然，这也是很多初级设计师都会遇到的问题！
　　方法1：直接将文本应用与图像
　　什么？这也叫一种方法？
　　不得不说，这是最基本也是最有效的方法之一，这也是为什么我把它放在第一条的原因。
　　OtterSurfboards。嘻哈和instagrammy，但是有点难以阅读
　　在使用此方法需要主意的问题：
　　图像和文本有一定的明暗对比度，一般情况下，图像应该是整体暗色调的，文字以白色为主；
　　在多种屏幕尺寸下，都保证文字都可读性；
　　Aquatilis网站绝对值得一游。
　　我曾经在很多项目里面都使用了这个方法去添加文字，它也能够给观这呈现一个很酷都画面，但在实际使用过程中，也要控制使用量。
　　方法2：覆盖整个图像
　　将文本放在图像上最简单的方法就是直接覆盖图像。如果原始图像颜色不够深，则可以用半透明但黑色覆盖整个图像。
　　Upstart网站拥有35不透明黑色滤镜。
　　如果你看到这个原图的色调，你会发现原始图像太亮并且对比度太高，使得文本难以辨认。但是覆盖一个黑色的半透明图层，那就不存在这个问题了。
　　此方法也可以适用于缩略图或小图像。
　　来自慈善机构的网站缩略图：watersite
　　尽管黑色覆盖层是最简单和最通用的方法，有时候使用彩色覆盖层，也会得到意想不到的效果。
　　方法3：文本框
　　这个方法更简单，也会更可靠。
　　使用一个温和透明的黑色矩形，在上面添加白色的文字。如果叠加层不够透明，不管下面是什么图像，都可以保证文字的清晰可读。
　　MiguelOlivaMrquez的现代檀香山iPhone概念
　　当然也可以使用一些颜色，只是在选择色彩时候要有依据。
　　MarkConlan
　　方法4：模糊图像
　　当我们把底层图像模糊处理之后，上面当文本清晰度令人惊讶。
　　Snapguide中的大量模糊叠加。请注意，模糊区域也变暗。
　　苹果从iOS7开始的背景变得模糊不清，ie浏览器也使用它起到了很大的作用。
　　还可以直接在照片的非聚焦区域作为模糊图层部分，这对图像和版式布局的切合度要求更高。
　　TeehanLax
　　我们要保证文本始终位于模糊之上，这样，你就可以很清晰的阅读文字部分了。
　　方法5：底图褪色
　　把底层图像的某部分巧妙的淡化为深色，然后在其上面放置白色文字。这是一个巧妙的办法，在很多网站都有应用这个方法。
　　对于上面的图像，你可能会觉得就是直接在图像上放置了白色的文字，其实不然，你仔细看，你会发现其实是一个由0不透明度到20不透明度渐变的矩形框。
　　这个操作非常的微妙，在不影响整体美观但前提下，确保了易读性。
　　规则5：使文本弹出和不弹出
　　这里的弹出和不弹出指的是文本的吸引度，也就是如何让我们想要让观者看到的部分突出，其它部分层级降低。
　　文本的表现在很多地方都以对比的形式来呈现。只要你接触过设计，你就一定知道如何来控制文本的层级：
　　尺寸对比（更大或更小尺寸）
　　颜色对比（明度对比最为显眼）
　　文字字重（粗字体和纤细字体）
　　字间距（通过距离来区分块）
　　当然还有一些其它的，如文本斜体、边距、下划线等等。
　　我们想要突出或者降低某个部分视觉层级，往往不是通过某一种样式来达到的，都是多种样式的组合表现。
　　图片中页脚部分的文字体积小、对比度低、字体重量就显得不那么大。
　　BluHomes是一个设计的无可挑剔的网站，它有一些很棒的标题，但强调的字体是小写的。如果此处用大写字体，则过分强调看起来过于强烈。
　　规则6：只使用好的字体
　　在设计过程中，字体的选择有时候足以影响到整个画面的效果，而我们的策略就是，找到好的字体，只使用它们。
　　这个部分没有什么要研究字体的好坏，只是列出一些不错的免费字体，供大家在设计的时候选择。
　　设计一些具有非常独特个性的网站时，可以使用一些非常不同的字体，但对于大多数UI设计来说，只需要简洁明了的东西。
　　Ubuntu（上图）。很多字重，比某些应用程序所需的更有特色。
　　OpenSans（上图）。易于阅读，流行的字体。适合身体复印。
　　BebasNeue（上图）。很棒的字体，全部大写。
　　Montserrat（上图）。只有两个字重，但足以做到层次风割。
　　Raleway（上图）。常用于标题部分，对于正文可能有点多。
　　Cabin（上图）。
　　Lato（上图）。
　　PTSans（上图）。
　　规则7：像艺术家一样窃取
　　在我第一次坐下来尝试去设计一些应用元素的时候，一个按钮、一个表单、一个图标，无论如何，这是我第一次意识到，我对如何使该元素看起来更好知之甚少。
　　但是幸运的是，我还没有发明任何新的UI元素。这意味着我总能看到其他人如何做到这一点，并且从最佳状态中挑选出来。
　　但是如何去选呢？以下是我在为客户设计的时候发现的最有用的资源：
　　1。Dribbble
　　这个一个仅限邀请的“为设计师展示和讲述”的网站，你可以在这里找到几乎所有东西的好例子。
　　WorkbyVictorErixon，FocusLab，andCosminCapitanu，respectively
　　事实上，你可以在这里看到我所有的工作内容。以下是推荐您可以关注的人：
　　VictorErixon。拥有非常鲜明的个人风格，而且非常棒。美观，干净，扁平的设计。他已经是7年的设计师，并且已经成为游戏的佼佼者。
　　FocusLab。。这些家伙是“聪明的名人”，他们的工作不辜负声誉，真的很多样化，永远是一流的。
　　CosminCapitanu。一个很棒的设计师。他制作的东西看起来很疯狂，没有花哨的未来感。颜色真的很好。
　　2。Pinterest
　　我不知道“warmarc”是谁，但他设计的电话用户界面的样式图，对于我的某些工作项目真的非常有用。
　　3。Pttrns
　　下面是一个移动应用截图的目录。关于Pttrns的好处是整个网站布局统一，这使得它每一个页面都处理的非常好，无论是登录页面，用户配置文件，搜索结果等。
　　我坚信每个艺术家都应该成为一只鹦鹉，直到他们懂得如何去模仿最好的。然后去寻找自己的风格，发明新的设计趋势。在此之前，让我们像盗贼一样去“窃取”好的创意。
　　小结
　　我写这篇是因为我希望我能够在很早之前看到这些，我希望它对你有所帮助。
　　如果您是一名UX设计师，请在绘制线框后绘制一个漂亮的模型。
　　如果你是一个开发者，那就把你的下一个项目做成是好看的。
　　我不希望UI看起来像是需要神奇的艺术学校技能才能做得体面。我们只是观察，模仿，并告诉你的朋友怎么去使用。无论如何，这正是我迄今为止所学到的，而且我始终是初学者。
　　如果你还在关注这我，你已经阅读了两篇总共超过5000字的文章，并看过很多插图和截图。但我还没停止，所以还没结束。
　　相关阅读
　　《非科班如何做好UI设计的7大规则（Part1）》