建立华丽 UI 的 7条规则 第二部分 (2019年更新)

这是这个系列的第二篇，第一篇这见 这里：

如下是这个系列的简洁 UI 的 7 条规则：

1. 光来自天空 (Light comes from the sky)
2. 黑白优先 (Black and white first)
3. 加倍你的空白 (Double your whitespace)
4. 学习在图像上叠加文本的方法 ( Learn the methods of overlaying text on images )
5. 使文本井井有条 ( Make text pop — and un-pop )
6. 只使用好看的字体 ( Only use good fonts )
7. 像艺术家同样借鉴 ( Steal like an artist )

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

4. 学习在图像上叠加文本的方法

在图像上添加吸引人文本方法只那么几种，这里介绍五种常规和一种额外的方法。

若是想成为一名优秀的 UI 设计师，必须学会如何以一种吸引人的方式将文本放置于图像之上。每一个优秀的 UI 设计师在这个方面都能作得很好，相反的糟糕的 UI 设计师都处理的不好，或者根本不处理。无论你是优秀仍是平庸的设计师，阅读这篇文章后，多多少少对你都有帮助。

方法一：将文本直接放置于图片上

我一直在考虑要不要把这个方法算进五种方法的一种，但设计上，直接将文字放置于图片上让视觉效果更好是可行的。

这种方法有各类各样的问题和须要注意事项:

1. 图像色调应该偏暗，而且竖直方向上不能有太大的色差。
2. 文本必须是白色的。
3. 测量不一样尺寸的屏幕或窗口以确保图像显示正常。

我想我历来没有在任何专业项目中直接在图像上使用文本，之因此提到它，是把它看作是一种应该掌握的技巧，就是说这种方法虽然可能能够产生很是酷炫的效果，但使用的时候须要当心

方法二：文本覆盖整个图像

将文本放在图像上最简单的方法就是用遮罩将图片整个覆盖，若是原始图像不够暗，能够在整个图像上添加半透明的黑色图层。

下图是一个时下流行的、用半透明黑色遮罩覆盖图片的示例。

若是打开发工具并删除覆盖层，将看到原始图像太亮，对比度太大，文本难以辨认。可是用黑色半透明的图层覆盖，看上去就没问题了!

这个方法用在缩略图和小的图片上一样好用。

虽然黑色覆盖是最简单和最通用的，固然也有用彩色覆盖。

方法三：盒模型中的文本

这种方法简单又可靠。试试把一个稍微透明的黑色长方形框里放上一些白色的文字。若是图片的不透明度（opaque）足够，你可使用任意一张图片，均可以保证文字的清晰可读。

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

方法四：模糊图片

使文本内容清晰的一个神奇的方法，是将背景图像的一部分变得模糊。

苹果确实让背景变得模糊了，尽管它是在 Windows 系统中最早实现的。

你也能够用照片的散焦（out-of-focus）部分来做为模糊区域。可是请注意 —— 这个办法并很差使。若是图片作了一点改变，就得确保这些文字位置在对应的模糊区域中。

请阅读下图中的子标题：

方法五：Floor Fade

Floor Fade 指的是图片靠近底部的地方逐渐变黑，而后接着把白字填在上面。这是个很是巧妙的办法，我不知道是谁发明的，在Medium使用它以前，我从未见过有人用它。

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

这种渐变效果确实很难看出来，但确实是有的，绝对改善清晰度。

还要注意的是，这几张缩略图使用了文本阴影来进一步加强可读性，这个作法真棒!

Medium达到了这样的境界：任何文字放置在任何图片上，都能得到良好的阅读效果。

哦，还有一件事——为何图像底部逐渐变暗? 关于这个问题的答案，上篇讲的规则1——灯光一般是从上面照下来的。为了让咱们的眼睛看起来更天然，图像的底部稍微暗一点，就像咱们所见过的其余事物同样。

更高级的作法，就是结合模糊化，这样的结合就是底部模糊化了。

额外的办法：纱罩

不管背景图像怎么变,Elastica blog的标题老是清晰易读的，这是怎么作到的？应该是这样：

• 并非特别黑的
• 有一点高对比度

然而，很难描述为何文本如此易读。 看一看：

答案是：纱罩。

纱幕是一种使光线更柔和的摄影器材。如今它也是一种视觉设计技术，用于软化图像，使叠加的文本更清晰。

在浏览器放大 Elastica 博客上，就能够更清楚地作了什么效果。

在这句标题 “145,000 Salesforce Users Come out to Celebrate…”有一个让透光度渐变的框。应该能够很简单的注意到高对比度的照片下这个深蓝色的背景。

这多是在图像上可靠地叠加文本的最微妙的方式，我在其余任何地方都没有见过(但它至关隐蔽)。不过要记下来，你或许在未来某些时候须要它。

5. 使文本井井有条

让文本看起来美观和合适一般作法的是以对比的方式设置样式 - 例如，更大但更轻。

在我看来，建立一个漂亮的用户界面最困难的部分就是文本的样式 - 固然不是由于不熟悉这些属性。 若是你刚小学毕业，那么你极可能已经使用了一种方法来引发注意或远离咱们看到的文本：

• 尺寸(大或小)
• 颜色（反差较大或较小；色彩鲜明）
• 字重（加深或者变轻）
• 拼写（小写，大写和标题的格式）
• 斜体
• 字母间距
• 边距

还有一些其作法能够引发别人的注意，一般不经常使用也不推荐使用：

• 下划线 --下划线默认表示连接，除了连接外也不必用它。
• 文本的背景色 -- 不常见，但37 signals的网站曾使用它作为连接的样式。
• 删除线 -- 90年代的CSS用法了

根据个人我的经验，当我发现一个我彷佛没法找到合适的文本样式时，并非由于我忘了尝试使用边距或更暗的颜色 - 而是由于最好的解决办法是同时设置几组“相矛盾的（competing）”属性。

Up-pop and down-pop

能够将设计文本的全部方式分为两组：

• 增长文本可见性的样式。大号字体、粗体、大写的等等。
• 下降文本可见性的样式。小号字体，对比度小的，边距小的，等等。

咱们会这些叫作 "up-pop" 和 "down-pop" 的样式，以记念 favorite adjective。

“Material Design” 的标题有不少“up-pop”。大字号，强烈对比，粗体。

底部的元素就是“down-pop”的。字体小，对比度低，而且字体较细。

如下是很是重要的内容。

这个页的标题是仅有的用上了全部 up-pop 方法的文本。 对于全部别的东西，你须要 up-pop 而且 down-pop。

若是须要强调一个网站的内容元素，那么就同时使用“up-pop”和“down-pop”。这是为了防止元素过于突兀，将不一样元素限制在它们应有的视觉重要性以内。

完美设计的 Blu Homes 网站有一些大标题，可是须要强调的单词都是小写的——过多的强调看起来会让人看不到重点。

Blu Homes 网站上的这些数字以它们的大小、颜色和对齐方式吸引你的眼球，可是请注意，它们同时被淡化了，字体很轻，低对比度的颜色。

然而，数字下面的小标签虽然是灰色和小字体的，但也是大写字重大的。

这一切构成了平衡。

Contents Magazine 是一个 up-pop 和 down-pop 很不错的案例分析。

• 文章标题基本上是唯一的非斜体页面元素。在这种状况下，缺少斜体字会更有效地吸引眼球(特别是结合粗体的字体)
• 在 by 的这一行里的做者名字是被加粗的 — 让它和日常字重的 "by" 分别了开来。
• 小的、低对比度的“已通过时”文本不会碍手碍脚——可是因为它的大写类型、大的字母间距和大的空白，你能够在查找时当即看到它。

选中和鼠标停留样式

被选中和鼠标停留的文本样式是另一回事了——而且很难。

一般，改变字体大小、大小写或字体权重会改变文本占用的区域大小，这种变化能够限制住悬浮效果。

因此还有哪些属性能够更改呢？

• 字段颜色
• 背影颜色
• 阴影
• 下划线
• 轻微的动画 - 升高，下降等

一个实用的办法:尝试将白色元素变成彩色，或者将彩色的元素变为白色，可是文本的背景色要选用深色。

设计文本的样式是很难的。

最后我仍是要告诉你，给文本加样式是很难的。

若是你想学习更多关于文本样式的知识，请查看学习UI设计，在这里有更多的详细介绍。

6. 使用好看的字体

有些字体不错，使用这些字体。

本节没有策略或内容须要学习，只列出一些不错的免费字体供你下载和使用。

这份学习指南是给学习者的，外面有超多免费的字体，因此就让咱们用吧。

我建议你们如今就去下载它们，而后使用它们来对你的项目进行可视化设计。

如下推荐字体跟级别没有关系：

1. Work Sans

有时候正在设计一些须要现代，干净字体的东西，可是还要有一点乐趣。 Work Sans 很是适合这种场景。

下载地址：没包含斜体的 有包含斜体的。

2. Roboto

一种极好、干净的、通用的字体。虽然它是 Android 的默认字体，但对于 iPhone 和 web 应用程序来讲，仍然没有获得充分的使用主要仍是免费的!

谷歌地图有用到该字体

下载地址请点击这里。

3. Montserrat

我曾经犹豫是否推荐 Montserrat 字体，由于它没有斜体字，字距怪异，并且厚得很难看)。但这个项目一直很活跃，Montserrat 变成了一种难以想象的字体。

它最有名的多是最受欢迎（和精心设计的）Proxima Nova 的最佳免费替代品。

在选择任何字体时，最好查看大写、句子大小写和全部的字重。你永远不知道何时稍微不一样的设置会成为你想要的风格。比较上面的两个镜头——一样的字体，两种不一样的感受。

下载地址点击这里。

4. Source Sans Pro

我喜欢 Source Sans 的一件事是当你想要使用使人难以置信的过分使用的 Open Sans 或 Lato 时，它是一个很好的选择。

Source Sans与 Open Sans或 Lato - neutral 字符有许多相同的优势，只是有一点人性化(而不是冷冰冰的、生硬的几何字体)，并且对于用户界面很是有用。

能够在 Google Fonts 上找到

5. IBM Plex Sans

去年，IBM 发布了本身的字体 Plex。

Plex Serif 和 Plex Mono 轻松配对。

能够在 Google Fonts 上找到

6. Feather Icons

虽然许多流行的图标集（ahem，Font Awesome）具备过于圆润和起泡的形状，但与简洁的设计不能很好地搭配，可是 Feather Icons 是一种很是不受欢迎的解决方案。

做者尚未把它打包成图标字体，可是有人在 Github 上放了一个字体版本，能够很好地跟踪原始设置（若是你只使用了套装中的10或20个图标，没有必要加载整个包）。

下载地址：SVG set, partial icon font

有一些资源：

• Beautiful Google web fonts。这个网站很是棒得展示出 Google Fonts 能有多好看。做者从它那找了好多好屡次灵感。
• FontSquirrel。一组最好的字体可供商业使用，并且彻底免费。
• Adobe Fonts。若是你使用的是 Adobe Creative Cloud（ 即订阅 Photoshop 或Illustrator等 ），那么能够免费访问大量专业字体。甚至比我上面推荐的还要好：Proxima Nova，Adelle Sans，DIN，Freight Text 等等。
• Learn UI Design。寻找更好的字体？做者的用户界面设计课程有一个字体推荐列表，包含超过 60 种免费，涵盖全部类型的字体（衬线，平板，等宽字体，手写等），并包括每一个字体的注释 字体效果最好。

7. 像艺术家同样借鉴

我第一次尝试设计一些应用程序元素 - 按钮，表，图表，弹出窗口 - 这是我第一次意识到我对如何让这些元素好看而知之甚少。

但幸运的是，我尚未发明任何新的 UI 元素。这意味着我总能看到别人是如何作到的，并从中挑选最好的。

可是咱们要从哪里挑呢？这里有：

1.Dribbble

这个特邀的“给设计师展现”网站有网络上最好质量的 UI 设计做品。你能够在这里找到几乎最好的网站。

事实上，你能够在 Dribble 关注个人里面的做品，这里还有一些人你也能够关注:

• Jamie Syke。基本上天天都发布新的UI，一些流行的东西回归丰富的经验和设计。我能说什么呢？关注就对咯。
• Balkan Brothers。彷佛是一个老生常谈的说法，设计师越接近俄罗斯，他们就越擅长颜色。 这些克罗地亚设计师很是棒，保持平淡有趣。 老是很棒的渐变，颜色和阴影。
• Elegant Seagulls。若是你曾经想过“天哪，我怎么作比标准网格更有趣的事情？”，浏览他们的一些照片，这里有你想要的答案。
• Cosmin Capitanu。一个很是厉害的多面手。他作得东西将来感十足，但又不过于高调。他很是善于使用颜色，然而他并不十分注重 UX 的东西 — 固然这个批评也针对 Dribbble 这个网站。

分别来自 Balkan Brothers 和 Cosmin Capitanu。

分别来自 Elegant Seagulls 和 Jamie Syke。

2.Flat UI Pinboard

我不知道“warmarc”是谁，可是他的手机UI的pinboard让我找到了许多漂亮的UI。

3. Pttrns

一个移动app屏幕截图的汇总。Pttrns 的好处是整个网站都是由用户体验模式来组织的。这使得快速研究目前正在使用的任何界面，不管是登陆页面、用户配置文件、搜索结果等等，都很是方便。

我坚信每一个艺术家都应该像鹦鹉同样去模仿，直到他们擅长模仿最好的。而后去寻找你本身的风格，发明新的潮流。

在这期间，让咱们都先当一个模仿者吧。

总结

我写这篇文章是由于我但愿本身在之前能够读到这篇。但愿对你有帮助。若是你是一个用户体验设计师，画好线框图后作一个漂亮的模型。

若是你是一名开发人员，那就把你的下一个次要项目作好。我不想UI只有专业的人才能作的很好。就是观察、模仿和记录有用的东西。

不管如何，这就是我到目前为止所学到的，同时我永远都是一个学生，会不断向别学习！

你的点赞是我持续分享好东西的动力，欢迎点赞！

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。