英文：TOPE
作者：星夜暮晨
网址：http://www.jianshu.com/p/88263196fdf0
设计师们似乎拥有着我们这些开发者所没有的“魔力”，他们知道如何让一个应用的界面看起来非常得舒适，以至于有时让我们有了迫不及待将其复现的冲动。
然而，几天过去了，我们仍然还停留在设计稿的第一个界面，写下大段大段的代码，可是界面却不是我们想要的那个样子，这无疑是非常让人恼火的一件事情。
好消息是设计师们的“魔力”并不是我们想象中的那么神奇，有一些关于设计的小技巧。只要掌握了它们，我们就能够以最小的代价让用户界面变得好看起来。
今天，我将会给大家展示其中的一些小技巧，我更乐意将它们称之为“图片标记技巧”，大意就是如何在一幅图片上放文字会更加好看。我们在我们的iOS模板中使用了这些技巧，这也是我们为何能够搭建出色用户界面的诀窍之一。
这些设计理念也可以用在表视图单元格(Table View Cell)和集合视图(Collection View)当中。
我们并不能直接将文字扔到图片上面，然后指望它Duang地一下出现那个Feel。不过，跟随以下6条小技巧就能够实现我们的目的了：
1：加文字
嗯，我不会忘记我说过，直接将文字扔到图片上面并不能让它变得号看起来。不过有些时候我们或许会走狗屎运，就像下图这个例子一样。这种设计看起来很赞，是因为标题比其他文字元素要显得更大一些。
并且，这种效果一般只会发生在文字在图片的深色部分上面。如果不是这种情况，那么就会像下面这个例子一样。现在我们换了一个有其他封面的文章，啊偶，GG。
好吧，怎么办？
2：加图片遮罩
我们可以直接在图片上加一个遮罩，技巧就是通过这个遮罩让图片变得更暗、更透明，或者直接刷上颜色，就像Yahoo新闻做的那样。
好的，在这个例子中，由于底色是蓝色，文字颜色是白色，所以看起来效果很赞。
下面这个例子是我们目前正在制作的项目截图，接下来就是我们实现这个效果的代码：
func addFullOverlay(){
let overlayView = UIView(frame: CGRectZero)
overlayView.translatesAutoresizingMaskIntoConstraints = false
overlayView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
self.view.insertSubview(overlayView, aboveSubview: coverImageView)
let topConstraint = NSLayoutConstraint(item: overlayView, attribute: .Top, relatedBy: .Equal, toItem: self.view, attribute: .Top, multiplier: 1, constant: 0)
let leftConstraint = NSLayoutConstraint(item: overlayView, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1, constant: 0)
let rightConstraint = NSLayoutConstraint(item: overlayView, attribute: .Right, relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1, constant: 0)
let bottomConstraint = NSLayoutConstraint(item: overlayView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: 0)
view.addConstraints([topConstraint, leftConstraint, rightConstraint, bottomConstraint])
}
不过这个效果不是很理想，因为图片现在的颜色很阴暗，文字就特别突兀，不过这个效果或许就是您追求的效果。通过给遮罩添加一下着色，我们就可以像instagram那样，给图片加个“滤镜”的效果，就像下图所展示的那样。
我们只需给这个半透明的遮罩加上颜色就可以了：
overlayView.backgroundColor = UIColor(red: 0.5, green: 0.2, blue: 0, alpha: 0.5)
3：加文字背景
某些人并不喜欢遮罩这个做法，因为他们可能想让图片保持“原汁原味”。这样的话，我们就要使用这个技巧了，就如“Funny or Die”所做的那样。
那我们的项目来距离，我们可以给文字加上背景。通过文本的NSAttributed属性，我们可以轻易地完成这项操作。
实现这项效果的代码如下：
func addBackgroundColorToText() {
let style = NSMutableParagraphStyle.defaultParagraphStyle().mutableCopy() as! NSMutableParagraphStyle
style.firstLineHeadIndent = 10.0
style.headIndent = 10
style.tailIndent = 0
let attributes = [NSParagraphStyleAttributeName : style]
let attributedTitleText = NSAttributedString(string: "Supplier woes suggest Apple Watch sales aren't great", attributes: attributes)
titleLabel.attributedText = attributedTitleText
let textbackgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.6)
titleLabel.backgroundColor = textbackgroundColor
authorLabel.backgroundColor = textbackgroundColor
dateLabel.backgroundColor = textbackgroundColor
}
4：加有颜色的背景
呃，和上面那个效果类似，如果您不喜欢黑色的话，那么可以更换文字背景的颜色，这样就有了“有颜色的文字背景”。至于如何实现这个效果，就留给您去尝试了O(∩_∩)O~。关键在于找到图片的主色，然后将其设置为背景颜色。
5：加毛玻璃
这是我最喜欢的效果，没有之一。通过iOS 8提供的UIVisualEffectView类，我们可以轻松地实现这个效果。我们在Newsstand例程中使用了这项效果。通过将文本下方的图片加上毛玻璃效果，可以让文字变得更加易读。
以下是实现这个效果的代码：
func addBlurView(){
let effect = UIBlurEffect(style: .Light)
let overlayView = UIVisualEffectView(effect: effect)
overlayView.translatesAutoresizingMaskIntoConstraints = false
self.view.insertSubview(overlayView, aboveSubview: coverImageView)
let topConstraint = NSLayoutConstraint(item: overlayView, attribute: .Top, relatedBy: .Equal, toItem: self.titleLabel, attribute: .Top, multiplier: 1, constant: -30)
let leftConstraint = NSLayoutConstraint(item: overlayView, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1, constant: 0)
let rightConstraint = NSLayoutConstraint(item: overlayView, attribute: .Right, relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1, constant: 0)
let bottomConstraint = NSLayoutConstraint(item: overlayView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: 0)
view.addConstraints([topConstraint, leftConstraint, rightConstraint, bottomConstraint])
}
6：加暗色渐变
这是我第二喜欢的效果，有些时候甚至比毛玻璃还要好看一些。
这个效果是通过在文本下方加上一个“暗色渐变”(gradient fade)的图层，颜色从半透明的黑色渐变到不透明的黑色，看起来效果很赞。
这个效果用在了很多应用上面，比如说Flipboard以及许多博客应用上发。我们也可以发现在Hotel Tonight应用中也应用了这个效果。
要实现这个效果，您可以使用以下代码：
func addGradientOverlay(){
self.view.insertSubview(gradientView, aboveSubview: coverImageView)
gradientLayer.frame = gradientView.bounds
let opaqueBlackColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1.0).CGColor
let transparentBlackColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.0).CGColor
gradientLayer.colors = [transparentBlackColor, opaqueBlackColor]
gradientView.layer.insertSublayer(gradientLayer, atIndex: 0)
gradientView.translatesAutoresizingMaskIntoConstraints = false
self.view.insertSubview(gradientView, aboveSubview: coverImageView)
let topConstraint = NSLayoutConstraint(item: gradientView, attribute: .Top, relatedBy: .Equal, toItem: self.titleLabel, attribute: .Top, multiplier: 1, constant: -60)
let leftConstraint = NSLayoutConstraint(item: gradientView, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1, constant: 0)
let rightConstraint = NSLayoutConstraint(item: gradientView, attribute: .Right, relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1, constant: 0)
let bottomConstraint = NSLayoutConstraint(item: gradientView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: 0)
view.addConstraints([topConstraint, leftConstraint, rightConstraint, bottomConstraint])
}
下载示例项目
是不是很喜欢这些效果呢？现在您已经知道如何实现，那么就可以在您的应用中使用它们了。点击此处(http://www.appdesignvault.com/downloads/FontOnImages.zip)来下载示例项目，这样可以看到所有已实现的效果。
关于更多设计技巧相关的内容，可以参阅Medium网站上的文章。如果您有更好的想法，请与我联系。