UI设计的7条规则 - 第2部分
新手阅读指南
一共分为两部分，这是第二部分。你应该先阅读第一部分。
我们正在讨论设计干净简单UI的规则。
光影（见第1部分）
黑白优先（见第1部分）
你的空白留白（见第1部分）
了解在图像上叠加文本的方法
使文本弹出和不弹出
只使用好的字体
像艺术家一样窃取
规则4：了解在图像上叠加文本的方法
如果您想成为一名优秀的UI设计师，您将必须学习如何以吸引人的方式将文本放在图像上。这是值得每一个UI设计师注意的，你会阅读本节之后有一个巨大的帮助！
方法0：直接将文本应用于图像
我甚至不愿意包括这个，但技术上可以将文本直接放在图像上并让它看起来不错。
使用此方法存在各种问题和注意事项：
该形象应该是统一的，而不是有很多的对比
该文本必须是白色的
在每个屏幕/窗口大小测试它，以确保它清晰可辨
我不认为我曾经在任何专业项目的图像上直接使用过文本，这里真的提到它是一种“控制”方法。话虽这么说，它可以做到真正冷却效果 - 但要小心。
方法1：覆盖整个图像
将文本放在图像上的最简单方法可能是覆盖图像。如果原始图像不够深，则可以用半透明的黑色覆盖整个图像。
这是一个带有深色覆盖层的时尚图像。
如果您跳转到开发工具并移除叠加层，您将看到原始图像太亮并且对比度过高，文本难以辨认。但是有一个黑色覆盖，没问题！
此方法也适用于缩略图或小图像。
虽然黑色覆盖层是最简单和最通用的，但您也可以找到彩色覆盖层。
方法2：文本框
这很简单，非常可靠。掀起一个温和透明的黑色矩形，并在一些白色文字上起泡。如果叠加层不够透明，您可以使用下面的任何图像，文本仍然完全清晰。
你也可以投入一些颜色 - 但是，一如既往，要明智。
方法3：模糊图像
使叠加文本清晰的令人惊讶的好方法是模糊底层图像的一部分。
Apple确实让背景变得模糊，尽管它首先出现在Windows中（如图所示）。
您还可以使用照片的离焦区域作为模糊。但要注意 - 这种方法不是那么动态。如果您的图像发生变化，请确保文本始终位于模糊位上。
我的意思是，试着阅读下面的副标题。
方法4：深色蒙版
是指你的图像在底部巧妙地淡化为黑色，然后在其上面写着白色文字。这是一个巧妙的方法，我不知道在Medium之前是谁做的，但那是我第一次注意到它的地方。
对于不经意的观察者来说，似乎这些中等收藏品是通过在图像上涂抹一些白色文字来显示 。从中间（黑色0％不透明度）到底部（黑色可能约为20％不透明度），有一个非常微妙的渐变。
很难看到，但绝对存在，并且肯定会提高易读性。
另请注意，缩略图使用轻微的文本阴影来进一步提高易读性。
哦，还有一件事 - 为什么图像底部会变黑？对于答案，请参阅规则1 。为了让我们的眼睛看起来最自然，底部的图像必须稍暗，就像我们所见过的其他东西一样。
高级移动：将模糊与地板边缘融为一体。
蒙版渐变
如何在弹性曲线博客对每一次动态图像的顶部可读标题？图像是：
不是特别黑暗
对比度的种类
然而，很难描述为什么文本如此易读。看一看：
稀松布是一种使光线更柔和的摄影设备。现在它也是一种软化图像的视觉设计技术，因此重叠的文本更清晰。
如果我们浏览器缩小Elastica博客，我们可以更清楚地看到发生了什么。
“145,000名Salesforce用户出来庆祝......”标题周围有一个渐变不透明的框。对于纯蓝色背景比在其上方的对比度照片上更容易注意到。
这可能是最微妙的可靠覆盖在图像上的文字在那里的方式。但请记下来。你永远不知道什么时候需要它。
规则5：使文本弹出和不弹出
样式文本看起来美观和合适通常是以对比的方式设置样式 - 例如，更大但更轻。
在我看来，创建一个漂亮的用户界面最困难的部分之一是造型文本 。你可能已经使用了一种方法来引起注意或远离我们看到的文本：
尺寸
颜色
字体重量
大写
斜体
字母间距
边距
还有一些其他选项可以引起您的注意，但没有特别使用或推荐：
强调。下划线意味着现在的链接
文本背景颜色。
删除线。
根据我的个人经验，当我发现一个我似乎无法找到“正确”造型的文本元素时，并不是因为我忘了尝试大写或更暗的颜色 - 这是因为最好的解决方案通常是正确的组合“竞争”属性。
上流式和下流式
您可以将样式文本的所有方式分为两组：
提高文本可见性的样式。大，大胆用色，大写等
样式会降低文本的可见性。体积小，对比度低，边距少等
为了纪念设计师最喜欢的形容词，我们将这些称为“流行”的风格。
很多关于“材料设计”标题的流行音乐。它很大 ; 这是高对比度 ; 它非常 大胆。
另一方面，这个页脚中的项目是弹出的。它们体积小，对比度低，字体重量不那么大胆。
现在重要的一部分。
页面标题是全方位流行风格的唯一元素。
对于一切，流行的统一。
如果网站元素需要强调，请应用up-pop和down-pop样式。这样可以防止事情变得无法控制，但允许不同的元素具有应有的视觉重量。
设计无可挑剔的Blu Homes网站有一些大的头衔，但强调的字眼是小写的 - 过分强调看起来过于强烈。
Blu Homes网站上的这些数字大小吸引眼球，颜色和对齐 - 但请注意，它们同时使用非常轻的字体重量和低对比度的颜色而不是深灰色。
该数字低于小标签，然而，尽管灰色小，也都是大写的和非常大胆。
这都是关于平衡的。
内容杂志是一个很好的案例研究。
该文章标题基本上是唯一的 非斜体的 页面元素。在这种情况下，缺乏斜体更有效地吸引眼球（特别是与粗体字体重组合）
该作者的名字在署名粗体-使其成为“由”从正常体重脱颖而出
小巧，低对比度的“ ALREADY OUT ”文字不受影响 - 但是它的大写字母，宽大的字母间距和大的边距，你可以在它寻找的那一刻看到它
选定和悬停的样式
通常情况下，改变字体大小，情况下，或字体重量会发生多大变化的区域中的文本占用了，从而导致抓住悬停效果。
这让你怎么做？
文字颜色
背景颜色
阴影
下划线
轻微的动画 - 提升，降低等
选择一种：尝试添加颜色，或转将颜色变为白色，改变它们的背景。
我我会告诉你：造型文字是很难。
但每次我想：我只需要变得更好。为了变得更好，我只能继续努力。
所以我给你提供了一些安慰：如果它不好看，不要担心 - 让我们继续努力让自己变得更好。
规则6：使用好字体
有些字体很好。使用这些字体。
注意：本节中没有可供学习的策略或事项。我只是列出一些不错的免费字体供你下载和使用。
具有非常独特个性的网站可以使用非常不同的字体。但对于大多数UI设计，您只需要干净简单的东西。这是对的，伙计。
另外，我只推荐免费字体。为什么？这是对正在学习的人的指南。
我建议您立即下载它们，然后在启动项目的可视化设计时浏览下载的字体。
没有特别的顺序：
1. Sans
有时候，你设计的东西，需要一个现代化的，干净的字体，但需要一点乐趣。Work Sans非常适合这项法案。
它的宽字体意味着它甚至可以在非常小的尺寸下工作 - 这是任何移动应用字体的绝佳属性。
在野外看到它：设计师Matt D. Smith的网站。
2. Roboto
一种令人难以置信，干净，通用的字体。虽然它是 Android的默认字体，但它仍然未被充分利用（并且免费！）用于iPhone和网络应用程序。
美丽，无处不在，并配有一个巨大的重量。
在看它：谷歌地图
3. Montserrat
我曾经犹豫过推荐蒙特塞拉特。项目一直保持活跃，蒙特塞拉特变成了令人难以置信的字体。
它最有名的可能是最受欢迎（和精心设计的）Proxima Nova的最佳免费替代品。
专业提示：在选择任何字体时，最好先看看大写，句子和整个重量范围。你永远不知道什么时候稍微不同的设置只是你想要的风格。比较上面两张照片 - 相同的字体，两种不同的感觉。
4. Source Sans Pro
我喜欢Source Sans的一件事是当你想要使用令人难以置信的过度使用的Open Sans或Lato时，它是一个很好的选择。抵制冲动！
Source Sans与Open Sans或Lato中性角色有很多相同的优势，只是一点点人性（而不是冷酷的几何字形），它非常适合用户界面。
为了便于配对，请查看：Source Serif和Source Code Pro。
5. IBM Plex Sans
IBM发布了自己的字体Plex。
和Plex Serif和Plex Mono可以轻松配对。
6.线性图标
虽然许多流行的图标集（ahem，Font Awesome）具有过于圆润和起泡的形状，但与简洁的设计不能很好地搭配，线性图标是一种非常不受重视的解毒剂。
创作者还没有把它打包成图标字体（还是🤞），但是有人在Github上放了一个字体版本，可以很好地找到原始设置。
得到它：SVG设置，部分图标字体
给你一些资源：
漂亮的谷歌网页字体。这是一个很棒的展示Google Fonts的外观。我已经回到这个简单的页面寻找灵感至少十几次了。
FontSquirrel。可用于商业用途的最佳字体集合，完全免费。很高兴有人在谷歌字体之外组建一个好的，免费的选择。
Adobe字体。如果您使用的是Adobe Creative Cloud（即订阅Photoshop或Illustrator等），那么您可以免费访问大量专业字体。甚至比我上面推荐的还要好：Proxima Nova， Adelle Sans， DIN，货运文本等等。
规则7：像艺术家一样
我第一次坐下来尝试设计一些应用程序元素 - 按钮，表格，图表，弹出窗口等等 - 这是我第一次意识到我对如何使该元素看起来很好而知之甚少。
但幸运的是，我还没有发明任何新的UI元素。这意味着我总能看到其他人如何做到这一点，并做最好的选择。
但是应该在哪里挑选？以下是我在为客户设计时发现的最有用的资源。按降序列出：
1.借鉴
这个仅限邀请的“展示和告诉设计师”网站没有在线的最高质量的UI工作。你可以在这里找到几乎所有东西的好例子。
事实上，你可以 在这里跟随我的工作。以下是您可以关注的更多人：
Jamie Syke.基本上每天发布新的UI。一流的东西。丰富的经验和设计。我能说什么？。
Balkan Brothers.似乎是这种奇怪的真理，设计师越接近俄罗斯，他们就越擅长颜色。这些克罗地亚设计师非常棒，保持平淡有趣。总是很棒的渐变，颜色和阴影。
Elegant Seagulls.如果你曾经想过“男人，我怎么做比标准网格更有趣的事情？”，浏览他们的作品。有你的答案。
Cosmin Capitanu.一个很棒的通配符。他让那些看起来很疯狂的东西 - 没有花哨的未来派。颜色真的很好。虽然他并没有真正专注于用户体验 - 这也是对借鉴的批评。
2.平面UI画板
收集资料，在网上可以找到很多很多漂亮的UI样式图，各种板式的设计及平面知识的运用。
3. Pttrns
移动应用截图的目录。关于Pttrns的好处是整个站点都是由 - 等待它 - UX模式组织的。这使得快速研究您当前正在处理的任何界面非常好，无论是登录页面，用户配置文件，搜索结果等。
我坚信每个艺术家都应该成为一只鹦鹉，直到他们擅长模仿最好的。然后去寻找自己的风格; 发明新趋势。
与此同时，让我们像艺术家一样。
结论
我这样写是因为我很想在不久前看到这个。我希望它对你有所帮助。如果您是一名UX设计师，请在绘制线框后绘制一个漂亮的模型。如果你是一名开发人员，请参加你的下一个项目并让它看起来很好。我不希望UI看起来像是需要神奇的艺术学校技能才能做得体面。只是观察，模仿和记录什么有效。
无论如何，这就是我到目前为止所学到的，而且我一直都是初学者。
