UI设计的7条规则
对新人的一点建议
简介
好的，首先要明白的事情是：本指南规则并非适合所有人。这个指南适合谁？
希望能够在紧要关头设计出漂亮UI的人员。
用户体验设计师希望他们的产品组合看起来更好。或者是设计师，他们希望可以在漂亮的UI中包含更好的用户体验。
如果你去艺术学校或者认为自己已经是一名UI设计师了，你可能会发现这本指南有一些无聊、错误、过激。没关系，你所有的批评都是正确的。请忽略这些，继续前进。
让我告诉你在本文会学到什么。
首先，我是一名用户体验设计师。我喜欢设计用户体验，我意识到有些好的理论运用起来会使用界面更加的美观。
设计阐述，是反应工作和思路最好的表达
用户体验设计不仅是草图和交互箭头指向
是一个循序渐进的枯燥工作
我学习应用程序的美学，头脑风暴，冷静分析。并且无耻地复制有效的东西。我在一个UI项目上工作了10个小时并且为1付费。其他9个是学习的疯狂。拼命搜索谷歌，Pinterest和Dribbble，以便从中复制。
这些“规则”是那些时间的教训。
对于书呆子这么说：如果我现在擅长设计UI，那是因为我分析了一些东西 - 不是因为我通过对美感和平衡的直观理解而走出滑铁卢。
这篇文章不是理论。本文是纯粹的经验吐槽。你不会看到有关黄金比例的任何信息。我甚至没有提到色彩理论。只有我从以前工作中学到的，然后刻意练习。
可以这样想：柔道是基于几个世纪的日本武术和哲学传统而发展起来的。你参加柔道课程，除了战斗，你还会听到很多关于能量，流动和和谐的知识。
另一方面，马伽是由一些在20世纪30年代捷克斯洛伐克街头与纳粹作战的强硬犹太人发明的。
规则
他们来了：
光影
黑白第一
加倍你的留白
了解在图像上叠加文本的方法（见第2部分）
使文本弹出 - 取消弹出（见第2部分）
只使用好的字体（见第2部分）
学习艺术家（见第2部分）
规则1：光影
光影是用户界面元素的无价线索。
这可能是了解UI设计最重要的事情：光影运用合理。
光，它照亮了物体的顶部并在它们下面投下阴影。东西的顶部较轻，底部较暗。
你不会认为人的下眼睑特别阴影，但是会对那些吸盘有所启发，突然之间它就是你前门的恶魔女孩。
UI也是如此。正如我们在所有面部特征的所有底面上都有小阴影一样，在大量 UI元素的底面上有阴影。我们的屏幕是扁平的，但我们投入了大量的艺术品来制作它们上面的许多元素看起来都是三维的。
按钮。即使使用这个相对“平坦”的按钮，仍然有一些与光有关的细节：
未按下的按钮（顶部）有一个黑暗的底边。
未按下的按钮在顶部比在底部略亮。
未按下的按钮投下一个微妙的阴影 - 在放大的部分可能更容易看到。
按下的按钮虽然底部比顶部更暗。
那只是一个按钮，但是这里有4个小灯光效果。这就是我们的教训。
这是一对iOS 6设置 - “请勿打扰”和“通知”。
嵌入式控制面板的上唇投下一个小阴影
“ON”滑块轨道也会立即设置
“ON”滑块轨道是凹形的，底部反射更多光线
通常插入的元素：
文本输入字段
按下按钮
滑块轨道
单选按钮（未选中）
复选框
通常开始的元素：
按钮（未按下）
滑块按钮
下拉控件
选择的按钮部分
弹出窗口
既然你知道，你会发现它到处都是。
等等，平面设计怎么样，嗯？
平面设计是一种视觉风格，其中元素缺少模拟压痕或突起。它们只是纯色的线条和形状。
我喜欢干净简单，但我不认为这是一个长期的趋势。在我们的界面中对3-D的微妙模拟似乎太过直观而不能完全放弃。
五年前，预测“扁平设计”的兴起，至少在2019年，这就是我们所处的位置 - 平面外观的元素，阴影的运用。
我们生活在一个黄金时代，在这个令人愉快的媒介中，在难以获得的正确的特征和可用性挑战的平面设计之间。扁平仍然干净，仍然很简单，但你会有一些阴影和线索来点击/滑动/点击。
或者，另一个扁平设计的例子：谷歌的Material Design语言。
它使用微妙的提示来传达信息。关键词，微妙。
我想，扁平是未来的发展方向。平面？只是过去的事情。
规则2：黑白优先
在添加颜色之前进行灰度设计简化了视觉设计中最复杂的元素，并迫使您专注于间距和布局元素。
UX设计师现在正在设计“移动优先”。这意味着您可以在想象它们在数百万像素Retina显示器上之前考虑手机上的页面和交互如何工作。
这种约束很棒。它澄清了思考。你从更难的问题开始（在一个微小的屏幕上可用的应用程序），然后采用解决方案来解决更容易的问题（在大屏幕上可用的应用程序）。
那么这是另一个类似的约束：首先设计黑色和白色。从困难的问题开始，使应用程序美观，最后添加颜色。
这是让应用程序看起来“干净”和“简单”的可靠而简单的方法。在太多的地方有太多的颜色是非常容易搞砸干净/简单。B＆WF迫使您首先关注间距，尺寸和布局等内容。这些是干净简单设计的主要问题。
在某些情况下，B＆WF不那么有用。具有强烈特定态度的设计 - “运动型”，“华丽”，“卡通”等 - 需要能够非常好地使用颜色的设计师。但大多数应用程序没有特定的态度，除了干净和简单。那些确实难以设计的东西。
对于所有其他人，有B＆WF。
第2步：如何添加颜色
最简单的颜色是一种颜色。
在灰度网站上添加一种颜色可以简单有效地吸引眼球。
你也可以迈出一步。灰度+ 两种颜色，或灰度+单色调的多种颜色。
网络大体上谈论颜色为RGB十六进制代码。忽略这些是最有用的。RGB不是着色设计的好框架。更有用的是HSB（与HSV同义，与HSL类似）。
HSB优于RGB，因为它符合我们对颜色的自然思考方式，您可以预测HSB值的变化将如何影响您正在查看的颜色。
如果这对你来说是新闻，这里有一篇关于HSB颜色的好的入门读物。
通过修改单个色调的饱和度和亮度，您可以生成多种颜色 - 暗部，高光，背景，重色，捕捉眼睛 - 但它并不会让人眼花缭乱。
使用来自一个或两个基色调的多种颜色是在不使设计混乱的情况下强调和中和元素的最可靠方法。
根据我的经验，调整主题颜色以适应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个像素。
左侧边栏显示文本行之间的宽松间距等等。
Piotr认真考虑在这里增加额外的空间，并且得到了回报。虽然这只是他为了它的乐趣而设计的概念稿，就美学而言，它足以与最好的音乐UI竞争。
慷慨的空白可以使一些最混乱的界面看起来像邀请和简单的论坛。
或维基百科。
你可以找到很多论据，比如，维基百科的重新设计省去了使用该网站的关键功能。但你不能说这不是一个好学的方法！
在你的线之间放置空间。
在元素之间放置空间。
在元素组之间放置空间。
分析什么有效。
好的，感谢您的阅读！
我们在第2部分中，我将讨论最后4条规则：
4.了解在图像上叠加文本的方法
5.使文本弹出和不弹出
6.只使用好的字体
7.像艺术家一样窃取
如果您在第1部分中学到了有用的东西，请阅读第2部分。
