|
如果你想成为一个优秀的UI设计师，你肯定得学会如何在图片上添加文字，并且它们变得更加吸引人。关于这一点，每一个优秀UI设计师都可以做得非常好，但是一般的UI设计师就差一点——或者根本就做不到。也许你做的真的很差，但是你掌握了以下的这六种方法后，你就会有很大的进步。
虽然我很不喜欢这种简单粗暴的方法，但是它确实是一个在技术上很容易实现的方法，而且看上去也不赖。 Otter Surfboards.看起来时尚，值得收藏，但是阅读上有困难。
这种方法有必要的使用条件：
1. 图片要暗，而且不能有太多的对比色。 2. 文字必须是白色的——我估计你可能会努力地找同样简洁的反例，但是这种例子真的太少了，真的。 3. 给和屏幕一样大小的图片上加文字的时候，应该把文字居中放置，这样可以保证它的易读性。
学会了吗？非常好。千万别擅自更改规则，现在你已经入门了。
我做专业项目的时候，从来不会像这样简单粗暴的直接把文字摆在图片上，即使它真的是一个非常好操作的方法。也就是说，还可以有更好的方法，但是会更难。
Aquatilis——非常值得参考的网站
最早在图片上加文字的方法应该就是给图片加一个通透的颜色图层了。如果原始图片太亮了，你可以试着给整个图片加一个半透明的黑色图层。
这有一个流行的例子以供参考 Upstart网站在图片上面加了一层35%不透明度的黑色图层。
如果你使用Firebug（一款火狐浏览器插件）移除黑色覆盖层，你可以看到原始的图片非常亮，而且图片和文字在颜色方面有太多冲突，这些都让文字变得很难阅读。但是如果加上覆盖层，一切的问题就都消失了。
这个方法对小图同样好用。 来自于charity:water网站的小图
另外，虽然黑色的覆盖层非常好用，适用的图片范围也很广，但是你也可以尝试去使用其他颜色的覆盖层。
这个方法非常简单也非常好操作——在一个大小适中的黑色矩形框上添加白色的文本。如果你的覆盖层和文本颜色的对比度足够，那你也可以直接在图片的下方添加文字。 Miguel Oliva Marquez设计的Modern Honolulu在iPhone上的客户端。
你也可以加点颜色，但是要加的恰当。 Mark Conlan设计的Now in pink
这是一个给图片上添加文字，并且能够保证可读性的一个另辟蹊径的好方法——模糊图片的下半部分。 Snapguide上不仅有大片的模糊覆盖层，而且放置文字的地方同样降低了明度。 OS7把背景模糊了，Visita系统也一样，效果都很好。 你也可以把照片视觉焦点之外的部分模糊掉。但是要注意，这个方法不够灵活。如果你的图片改变了，记得确保你的文本不在模糊的范围之内。 Teehan+Lax 尝试阅读下面的副标题
当你把你的图片从上到下巧妙的渐变到黑色之后，可以在黑色的下方加上文字。这是一个非常具有独创性的方法。据我所知，在Medium上之前没有人使用过这种方法，我也是才知道这种方法。
对于非专业的旁观者来说，这些Medium作品都是把一些白色的文本贴在画面上，对于这种说法，我只能说——大错特错。它们从中间部分（黑色不透明度0%）到底部（黑色不透明度大概为20%）都有一些非常精细的、轻微的倾斜。
很难发现，但是真的存在，而且确实能提高易读性。
在Medium作品合集缩略图中同样可以发现文本有很轻的投影，这同样可以增加文字的可读性——这些设计师真的非常棒！
因为是使用显示屏观看，所以Medium可以为任何图片上的任何文字分层，这就让文字的可读性有了很大的提高。
哦，还有一点是——为什么图片要渐变到黑色呢？想知道答案吗？去看准则（上）里第一条规则中的——光总是从上投射到下吧。为了让我们看起来觉得自然，图片的下部应该稍暗一点，就像我们在生活中所看到的一切事物一样。
再多说一句：模糊和渐变搭配使用效果更好。
SnapGuide就把模糊和渐变搭配使用了，看，效果多好，就像没有覆盖层。
小窍门：选择好的背景布为什么Elastica博客上方的大标题在每一张不同的图片上可读性都这么强？因为这些图片都有共同的特点：
图片明度不是特别低 图片内容阅读方向区别于普通的纵向，变成了横向
你好像还是没有明白为什么它的文本可读性这么强，那么来看看例子吧：
关键词是：背景布
背景布是让光变的柔和的摄影工具。现在也是视觉传达设计中一种让图片柔和，以便凸显文本的方法。
如果我们的浏览器可视范围比Elastica博客的主页面要宽，那么我们就可以清晰地看到背景布。
标题“145,000 Salesforce Users Come out to Celebrate...”放在首屏中一个像阴影的盒子中。对比于蓝色实底的背景，它显得非常突出，比放在横向的照片上更突出。
这可能是最微妙的提高文本在图片上可读性的方法了，我之前从来没有在除了这里之外的任何地方看到过，因为它实在太具有技巧性了。把它记下来吧，因为往往在你需要它的时候，你总是想不起来。
第五条：让文本之间有对比想让文本更大、更显眼，还想设计出恰到好处的时尚感，这是很难的。
就我而言，UI设计中最难的就是设计文本，因为你越熟悉的东西越难完全掌控。UI设计老手都会通过设计以下文本样式来设计文本：
图中的元素有彩色的实线条，大写单词以及间距——来自于Workjon的孩子。当然，Workjon本人的设计也非常棒。 还有一些方法也可以吸引读者目光但是并不经常使用：
下划线：是如今连接句子的惯用方法，但是我认为没必要特别去使用 文本背景色：并不常用，但是37signals网站曾经把它作为链接样式使用过一段时间。 删除线：上个世纪九十年代的CSS文本装饰样式，早就淘汰了。
根据我个人的经验来说，当我有一段待设计的文本段落，我不会马上去套一些“好”的样式。这并不是因为我不记得这些所谓的规则，只是我觉得更好的成长方法是不断地去尝试、比较，直到你真正的把规则了然于胸，操作起来得心应手。
主次分明你可以把所有的文本样式归为以下两类：
主要的文本：大、粗、大写等等 陪衬的文本：小、少对比、小间距等等
我们可以把这两类文本称为主文本和辅助文本——这是设计师最喜欢的形容词。我们不会说它们是视觉重点，因为它真的很单调。
以学习一下hugeinc网站标题的例子
很多主文本就像这个“Material Design”标题一样，很大，对比很强烈而且非常粗。
看它下面的文本，和标题相反，非常的不明显——小、低对比度而且很纤细。
现在要说最重要的规则了
页面的主标题是唯一必须非常显眼的文本，而页面里其他的文本都需要主文本和辅助文本的搭配。
（如果某个网站元素需要加以强调，那么可以使用用对比来呈现。）这样可以防止元素过大或者过小，但是同时要保证所有元素的可读性。
一个视觉平衡的例子
Blu Homes网站设计无可挑剔，有一些大标题，但是要强调的文字都是小写——强调的有点过头了。
这些Blu Homes网站上的数字因为它们的大小、颜色和排列的突出吸引了用户的视线，但是注意相比于深灰色的那些字来说，它们使用了看起来似乎轻描淡写的轻巧的字体、弱对比的颜色。
那些数字下面的小标签虽然字号又小颜色又浅，但同时使用了大写全拼还加粗了字体。
这都是平衡的方法
Contentsmagazine.com 一个不变的建议：保证背景稍暗的情况下可以尝试文字彩色和白色的转换。
挑选的图标无论是有色还是白色，都和背景保持高度对比。
我认为设计文本是非常难的，所以每当我觉得“或许这个文本已经足够美观”的时候，其实都是不对的。我应该让它变得更好，为了变得更好，我必须继续尝试。
我可以告诉你：如果你的文本不好看，别灰心，当你以后设计能力提升的时候，自然可以将它设计的更好。但是，前提是你得变得更好。
去使用一些不错的字体吧
注意：在这条规则里没有固定标准，我只是告诉你一些你可以下载来用的好的字体。
在网页设计中，网站为了追求个人，会使用有特色的字体。但是对于大多数UI设计来说，你只是想把它们做的简洁。为了达到这个目的，小伙伴们，去下载Wisdom Script字体吧。
给你提供一些资源：
Beautiful Google web fonts：这是一个非常好的展示Google Fonts里好看字体的网站。我经常去这个简单的页面汲取灵感。
FontSquirrel：一个免费的搜集优秀商业用途字体的网站。
Typekit：如果你使用Adobe Creative Cloud（也就是PS.AI等等 ），那么你可以在这里免费得到很多好的字体。当然，Proxima Nova也在里面。
第七条：像艺术家一样寻找灵感我第一次尝试设计App元素（按钮、表格、图表、弹出框等等）的时候，我意识到，对于如何将它们设计的好看，我知道的太少了。
但幸运的是，我还没有到不得不设计新UI元素的时候。这意味着我可以多看看别人是怎么做的，从好的里面再看更好的。
哪里有最好的呢？我这里有一些非常实用的资源网站供你参考：
1.Dribbble这是一个邀请制的网站，上面展示的作品都出自非常优秀的设计师之手。这个网站可以说是UI产品展示网站中的翘楚。你想要的几乎都可以在这里找到。
事实上，你也可以在这个网站上关注我。这里还有一些非常优秀的设计师推荐给你：
Victor Erixon：他的作品有非常鲜明的个人特色——好看、干净、扁平。他有三年的设计龄，现在已经是这个圈子里的顶级设计师了。
Focus Lab：这些小伙伴们是“Dribbble名人”，他们的作品风格多变、设计一流，在圈子里享有盛誉。
Cosmin Cpitanu：一个非常棒的流行设计师。他的作品看上去非常具有未来感但是没有过分装饰，在颜色运用的非常好。但是他没有专注在UX上——这也是Dribbble上对他的批评。
分别是Victor Erixon,Focus Lab和Cosmin Capitanu的作品
2.Flat UI Pinboard
我之前完全不知道Warmarc是谁，但是他的手机UI界面给了我耳目一新的感觉。
3.Pttrns一个移动端App的指导性截图。它的优点是整体在UX的部分非常统一，这让你能够非常快的找到正需要的页面。这是它的一些登陆页面、用户作品集、搜索结果页面等等。 我坚定的相信每一个艺术家在他们足够优秀之前都是一个模仿者。在你临摹学习足够了之后，你就可以去探索你自己的风格了。但在这之前，就像他们一样去临摹吧。
还有，这个章节的灵感来源，也就是标题“像艺术家一样寻找灵感”是从我之前读到过的《Eponymous Book》中摘录的，原因是因为我觉得这句话可以概括这一章节的中心思想。
总结
我写这篇文章是因为在一段时间之前我也喜欢看这种的文章，希望能对你有帮助。如果你是一个UX设计师，你可以在你画好线框图之后就做一个模型出来。如果你是一个开发人员，把你的下一个项目做的好看一点。我不奢望你的界面设计的水平一日千里，你只要去观察、去模仿，然后还能给你的朋友一点建议就足够了。
不管成为设计师多少年，还是应该一直学习设计。 永远站在设计潮流 的风口浪尖上 |
|
|
