介绍
好的，首先要做的事情。本指南并非适合所有人。这个指南是谁？
希望能够在紧要关头设计自己的美观UI的开发人员。
用户体验设计师希望他们的产品组合看起来比五角大楼PowerPoint更好。或者知识产权设计师，他们知道他们可以在漂亮的UI包中更好地销售出色的用户体验。
如果你去艺术学校或者认为自己已经是一个UI设计师了，你可能会发现这个指南的一些组合：a。无聊，b。）错误，c。）刺激性。没关系。你所有的批评都是正确的。关闭标签，继续前进。
让我告诉你在本指南中你会发现什么。
首先，我是一名没有UI技能的用户体验设计师。我喜欢设计用户体验，但在我意识到学习如何使界面看起来很好之前我有很多理由之后我就没有这么做了：
我的投资组合看起来像废话，反映了我的工作和思考过程
如果他们的专业知识不仅仅是草绘盒子和箭头，那么我的UX咨询客户宁愿购买某人的技能
我是否想在某个时刻为早期创业公司工作？最好是清扫工
我有我的借口。我不知道关于美学的废话。我主修工程学 - 这几乎是构建看起来很糟糕的东西的骄傲徽章。
“我主修工程学 - 这几乎是
构建看起来很糟糕的东西的骄傲徽章。”
最后，我学习了应用程序的美学，就像我学习任何创造性的努力一样：冷酷，难以分析。并且无耻地复制有效的东西。我在一个UI项目上工作了10个小时并且为1付费。其他9个是学习的疯狂。拼命搜索谷歌，Pinterest和Dribbble，以便从中复制。
这些“规则”是那些时间的教训。
对于书呆子这么说：如果我现在擅长设计UI，那是因为我分析了一些东西 - 不是因为我通过对美和平衡的直观理解而走出了滑槽。
这篇文章不是理论。本文是纯粹的应用程序。你不会看到有关黄金比例的任何信息。我甚至没有提到色彩理论。只有我从坏的方面学到的，然后刻意练习。
可以这样想：柔道是基于几个世纪的日本武术和哲学传统而发展起来的。你参加柔道课程，除了战斗，你会听到很多关于能量，流动和和谐的知识。那种东西。
另一方面，Krav Maga是由一些在20世纪30年代捷克斯洛伐克街头与纳粹作战的强硬犹太人发明的。它没有艺术。在Krav Maga课程中，您将学习如何用笔刺伤别人的眼睛并预订。
这是屏幕的Krav Maga。
规则
他们来了：
光来自天空
黑白第一
加倍你的空白
了解在图像上叠加文本的方法（参见第2部分）
我们来吧。
规则1：光来自天空
阴影是告诉人类大脑我们正在看什么用户界面元素的无价线索。
这可能是了解UI设计最重要的非显而易见的事情：光来自天空。光线来自天空如此频繁和一致，以至于从下面来的它实际上看起来很怪异。
WoooOOOooo
当光线来自天空时，它照亮了物体的顶部并在它们下面投下阴影。东西的顶部较轻，底部较暗。
你不会认为人的下眼睑特别阴影，但是对那些吸盘有些启发，突然之间它就是你前门的恶魔女孩。
嗯，UI也是如此。正如我们在所有面部特征的所有底面上都有小阴影一样，在您可以找到的几乎每个UI元素的下侧都有阴影。我们的屏幕是平的，但是我们投入了大量的艺术品来制作它们上面的所有东西看起来都是三维的。
这张照片中我最喜欢的部分是右下方的扑克手指。
拿按钮。即使使用这个相对“平坦”的按钮，仍然有一些与光有关的细节：
未按下的按钮（顶部）具有深色底边。儿子，太阳不亮了。
未按下的按钮在顶部比在底部略亮。这是因为它模仿了略微弯曲的表面。正如你需要倾斜在你面前的镜子倾斜以观察其中的太阳一样，向上倾斜的表面反射出更多的阳光照射到你身上。
未按下的按钮投下一个微妙的阴影 - 在放大的部分可能更容易看到。
按下的按钮虽然底部比顶部更暗，但总体上更暗 - 这是因为它位于屏幕的平面上，太阳不能轻易击中它。有人可能会争辩说，我们在现实生活中看到的所有按钮都是较暗的，因为我们的手阻挡了光线。
那只是一个按钮，然而这里有4个小灯光效果。这是我们的教训。现在我们只将它应用于一切。
iOS 6有点过时了，但它在轻松行为方面做了很好的案例研究。
这是一对iOS 6设置 - “请勿打扰”和“通知”。NBD，对吧？但看看它们有多少光效。
插入控制面板的上唇投下一个小阴影
“ON”滑块轨道也会立即设置
“ON”滑块轨道是凹形的，底部反射更多光线
图标设置了一下。看到它们顶部周围的明亮边框？这代表垂直于光源的表面，因此接收大量光线，从而将大量光线反射到您的眼睛中。
分隔器凹口被遮挡在远离太阳的角度，反之亦然
分频器缺口的特写镜头。从我的老Hubster概念。
通常插入的元素：
文本输入字段
按下按钮
滑块轨道
单选按钮（未选中）
复选框
通常开始的元素：
按钮（未按下）
滑块按钮
下拉控件
牌
所选单选按钮的按钮部分
弹出窗口
既然你知道，你会发现它到处都是。孩子，你很受欢迎。
等等，平面设计怎么样，Erik？
iOS7因其“平面设计”而在科技界引起轰动。这就是说它确实是平的。没有模拟的突起或凹痕 - 只有纯色的线条和形状。
我喜欢干净和简单，就像下一个人一样，但我不认为这是一个长期的趋势。在我们的界面中对3-D的微妙模拟似乎太自然而不能完全放弃。
更有可能的是，我们将在不久的将来看到半平面UI（这是我建议您精通设计的）。我要继续称它为“扁平设计”。仍然干净，仍然很简单，但你会有一些阴影和提示点击/滑动/点击。
OS X优胜美地 - 扁平，不平坦。
在我写这篇文章的时候，谷歌正在推出他们的“Material Design”语言。它是一种统一的视觉语言 - 其核心 - 寻求模仿物理世界。
“材料设计”指南中的插图显示了如何使用不同的阴影传达不同的深度。
这是我看到的那种东西。
它使用微妙的现实世界提示来传达信息。关键词，微妙。
你不能说它不模仿现实世界，但它也不是2006年的网络。没有纹理，没有渐变，没有光泽。
我想，Flatty是未来的发展方向。平面？Psh，只是过去的事情。
那个平面设计现在看起来很热！
规则2：黑与白第一
在添加颜色之前进行灰度设计简化了视觉设计中最复杂的元素，并迫使您专注于间距和布局元素。
UX设计师现在正在设计“移动优先”。这意味着您可以在想象它们的数字像素Retina显示器之前考虑手机上的页面和交互如何工作。
这种约束很棒。它澄清了思考。你从更难的问题开始（在一个小小的屏幕上可用的应用程序），然后采用解决方案来解决更容易的问题（在大屏幕上可用的应用程序）。
那么这是另一个类似的约束：首先设计黑色和白色。从使用各种方式使应用程序美观和可用的更难的问题开始，但没有颜色的帮助。最后添加颜色，即使这样，只有目的。
Haraldur Thorleifsson的灰度线框看起来和较小的设计师完成的网站一样好。
这是让应用程序看起来“干净”和“简单”的可靠而简单的方法。在太多的地方有太多的颜色是一个非常简单的方法来搞砸清洁/简单。B＆WF迫使您首先关注间距，尺寸和布局等内容。这些是清洁简单设计的主要关注点。
优雅的灰度。
在某些情况下，B＆WF并不那么有用。具有强烈特定态度的设计 - “运动型”，“华丽”，“卡通”等 - 需要能够非常好地使用颜色的设计师。但大多数应用程序没有特定的态度，除了干净和简单。那些确实难以设计的东西。
Julien Renvoye（左）和Cosmin Capitanu（右）的华丽和充满活力的设计。比它看起来更难。
剩下的就是B＆WF。
第2步：如何添加颜色
最简单的颜色是一种颜色。
在灰度网站上添加一种颜色可以简单有效地吸引眼球。
你也可以迈出一步。灰度+ 两种颜色，或灰度+单色调的多种颜色。
实践中的颜色代码 - 即等待，什么是色调？
网络大体上谈论颜色为RGB十六进制代码。忽略这些是最有用的。RGB不是着色设计的好框架。更有用的是HSB（与HSV同义，与HSL类似）。
HSB优于RGB，因为它符合我们对颜色的自然思考方式，您可以预测HSB值的变化将如何影响您正在查看的颜色。
如果这对你来说是新闻，这里有一篇关于HSB颜色的好的入门读物。
来自Smashing Magazine的单色金色主题。
来自Smashing Magazine的单色调蓝色主题。
通过修改单个色调的饱和度和亮度，您可以生成多种颜色 - 黑暗，灯光，背景，重音和捕捉眼睛 - 但它并不会让人眼前一亮。
使用来自一个或两个基色调的多种颜色是在不使设计混乱的情况下强调和中和元素的最可靠方法。
Kerem Suer的倒数计时器
关于颜色的一些其他注释
颜色是视觉设计中最复杂的领域。虽然很多颜色的东西是钝的，并且不适合在你面前完成设计，但我已经看到了一些非常好的东西。
一个小工具箱：
学习UI设计。无耻的插件：这是我创建的一门课程，它包含3小时的关于彩色设计的视频（以及在UI设计中其他主题的13小时以上）。在learnui.design上查看。
UI设计中的颜色：（实用）框架。如果您喜欢这一部分，但想要了解更多关于颜色（而不仅仅是黑色和白色），这是您的文章。猜猜是谁写的！
永远不要使用黑色（伊恩风暴泰勒）。谈论完全平坦的灰色几乎从未出现在现实世界中，以及如何使灰色阴影饱和 - 尤其是深色调 - 为您的设计增添视觉丰富感。此外，饱和灰色更接近现实世界，这是它自己的美德。
Adobe Color CC。一种用于查找，修改和创建颜色方案的绝佳工具。
Dribbble按颜色搜索。找到适用于特定颜色的另一种很棒的方法。谈实用。如果你已经决定了一种颜色，那么来看看世界上最好的设计师正在做什么/与那种颜色匹配。
规则3：加倍你的空白
要使外观设计的UI，增加大量的喘息空间。
在规则2中，我说B＆WF迫使设计师在考虑颜色之前考虑间距和布局，以及这是一件好事。那么，是时候讨论间距和布局了。
如果您从头开始编写HTML，那么您可能已经熟悉HTML默认布局在页面上的方式。
基本上，一切都被砸到了屏幕的顶部。字体很小; 线条之间绝对没有空间。有一个biiit的段落之间的空间，但并不多。段落只是延伸到页面的末尾，无论是100 px还是10,000 px。
从审美角度来说，这太糟糕了。如果你想制作看起来设计的 UI ，你需要增加很多喘息空间。
有时是一个荒谬的数额。
空白，HTML和CSS
如果你和我一样习惯于用CSS格式化，默认情况下没有空格，那么就该把自己弄清楚那些坏习惯了。开始将空白视为默认空间 - 所有内容都以空格开头，直到您通过添加页面元素将其删除。
声音禅？我认为这是人们仍在勾画这些东西的一个重要原因。
从空白页开始意味着从空白开始。你从一开始就想到了边距和间距。你绘制的所有东西都是有意识的去除空白的决定。
从一堆无格式的HTML开始意味着从内容开始。间距是事后的想法。必须明确说明。
这是Piotr Kwiatkowski的说明性音乐播放器概念。
请特别注意左侧的菜单。
左菜单
菜单项之间的垂直空间完全是文本本身高度的两倍 。您正在查看12px字体，其上方和下方的填充量相同。
或者看看列表标题。单词“PLAYLISTS”和它自己的下划线之间有15px的空格。这不仅仅是字体本身的上限高度！这就是说清单之间的25个像素。
顶部导航栏中有更多空间。“搜索所有音乐”文本是条形高度的20％。图标的比例相似。
左侧边栏显示文本行之间的宽松间距等等。
Piotr很认真地在这里增加了额外的空间，并且得到了回报。虽然这只是他为了它的乐趣而放在一起的概念（据我所知），就美学而言，它足以与最好的音乐UI竞争。
好的，慷慨的空白可以使一些最混乱的界面看起来像邀请和简单的论坛。
论坛设计概念由Matt Sisto
或维基百科。
维基百科设计概念由AurélienSalomon设计
你可以找到很多论据，比如，维基百科的重新设计遗漏了使用该网站的关键功能。但你不能说这不是一个好学的方法！
在你的线之间放置空间。
在元素之间放置空格。
在元素组之间放置空格。
分析什么有效。
好的，这包装了第1部分。感谢您的坚持！
在第2部分中，我将讨论最后4条规则：
4.了解在图像上叠加文本的方法
5.使文本弹出和不弹出
6.只使用好的字体
7.像艺术家一样窃取
如果您学到了有用的东西，请阅读第2部分。
仍然不能得到足够的？介绍...学习UI设计
在过去的11个月里，我一直在努力创建最全面的在线视频课程，用于学习界面设计的实用技巧。
学习UI设计涵盖了各种主题：
颜色。选择好的颜色，在界面中为不同的目的调整它们，开发调色板，阻止颜色碰撞等等。
排版。选择字体，样式文本，配对字体等。
设计基础。间距，对齐，照明，阴影等。
用户界面元素。按钮，文本框，摄影，表格和列表（对于移动应用程序设计非常重要）等等。
这里有一个关于有多少内容的想法。您已经听过的主题 - 灯光，灰色和间距 - 每个都有自己的视频，总共1小时52分钟。
有一吨在本课程的内容：16+小时的视频在30多个视频课程。
在几乎每个视频中，你都会看到我在Sketch中的设计。这个很重要。我这里没有教授一些理论框架。相反，我向您展示的是我每天用来设计界面的提示，技巧和框架。把它想象成看着我的肩膀，因为我教会了你所知道的一切。
三米工作室“大吉大利”小组的每周优质设计文章汉化计划13篇--《How to Conduct a Usability Test in Six Steps from Start to Finish（如何从开始到结束的六个步骤进行可用性测试）》。
Medium英文原文链接https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
