设计师们似乎拥有着我们这些开发者所没有的“魔力”，他们知道如何让一个应用的界面看起来非常得舒适，以至于有时让我们有了迫不及待将其复现的冲动。
然而，几天过去了，我们仍然还停留在设计稿的第一个界面，写下大段大段的代码，可是界面却不是我们想要的那个样子，这无疑是非常让人恼火的一件事情。
好消息是设计师们的“魔力”并不是我们想象中的那么神奇，有一些关于设计的小技巧。只要掌握了它们，我们就能够以最小的代价让用户界面变得好看起来。
今天，我将会给大家展示其中的一些小技巧，我更乐意将它们称之为“图片标记技巧”，大意就是如何在一幅图片上放文字会更加好看。我们在我们的iOS模板中使用了这些技巧，这也是我们为何能够搭建出色用户界面的诀窍之一。
这些设计理念也可以用在表视图单元格(TableViewCell)和集合视图(CollectionView)当中。
我们并不能直接将文字扔到图片上面，然后指望它Duang地一下出现那个Feel。不过，跟随以下6条小技巧就能够实现我们的目的了：
嗯，我不会忘记我说过，直接将文字扔到图片上面并不能让它变得号看起来。不过有些时候我们或许会走狗屎运，就像下图这个例子一样。这种设计看起来很赞，是因为标题比其他文字元素要显得更大一些。
好吧，怎么办？
我们可以直接在图片上加一个遮罩，技巧就是通过这个遮罩让图片变得更暗、更透明，或者直接刷上颜色，就像Yahoo新闻做的那样。
好的，在这个例子中，由于底色是蓝色，文字颜色是白色，所以看起来效果很赞。
下面这个例子是我们目前正在制作的项目截图，接下来就是我们实现这个效果的代码：
funcaddFullOverlay(){
letoverlayView=UIView(frame:CGRectZero)
overlayView.translatesAutoresizingMaskIntoConstraints=false
overlayView.backgroundColor=UIColor(red:0,green:0,blue:0,alpha:0.5)
self.view.insertSubview(overlayView,aboveSubview:coverImageView)
lettopConstraint=NSLayoutConstraint(item:overlayView,attribute:.Top,relatedBy:.Equal,toItem:self.view,attribute:.Top,multiplier:1,constant:0)
letleftConstraint=NSLayoutConstraint(item:overlayView,attribute:.Left,relatedBy:.Equal,toItem:self.view,attribute:.Left,multiplier:1,constant:0)
letrightConstraint=NSLayoutConstraint(item:overlayView,attribute:.Right,relatedBy:.Equal,toItem:self.view,attribute:.Right,multiplier:1,constant:0)
letbottomConstraint=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)
某些人并不喜欢遮罩这个做法，因为他们可能想让图片保持“原汁原味”。这样的话，我们就要使用这个技巧了，就如“FunnyorDie”所做的那样。
那我们的项目来距离，我们可以给文字加上背景。通过文本的NSAttributed属性，我们可以轻易地完成这项操作。
实现这项效果的代码如下：
funcaddBackgroundColorToText(){
letstyle=NSMutableParagraphStyle.defaultParagraphStyle().mutableCopy()as!NSMutableParagraphStyle
style.firstLineHeadIndent=10.0
style.headIndent=10
style.tailIndent=0
letattributes=[NSParagraphStyleAttributeName:style]
letattributedTitleText=NSAttributedString(string:"SupplierwoessuggestAppleWatchsalesaren'tgreat",attributes:attributes)
titleLabel.attributedText=attributedTitleText
lettextbackgroundColor=UIColor(red:0,green:0,blue:0,alpha:0.6)
titleLabel.backgroundColor=textbackgroundColor
authorLabel.backgroundColor=textbackgroundColor
dateLabel.backgroundColor=textbackgroundColor
呃，和上面那个效果类似，如果您不喜欢黑色的话，那么可以更换文字背景的颜色，这样就有了“有颜色的文字背景”。至于如何实现这个效果，就留给您去尝试了O(∩_∩)O~。关键在于找到图片的主色，然后将其设置为背景颜色。
这是我最喜欢的效果，没有之一。通过iOS8提供的UIVisualEffectView类，我们可以轻松地实现这个效果。我们在Newsstand例程中使用了这项效果。通过将文本下方的图片加上毛玻璃效果，可以让文字变得更加易读。
以下是实现这个效果的代码：
funcaddBlurView(){
leteffect=UIBlurEffect(style:.Light)
letoverlayView=UIVisualEffectView(effect:effect)
lettopConstraint=NSLayoutConstraint(item:overlayView,attribute:.Top,relatedBy:.Equal,toItem:self.titleLabel,attribute:.Top,multiplier:1,constant:-30)
6：加暗色渐变
这是我第二喜欢的效果，有些时候甚至比毛玻璃还要好看一些。
这个效果是通过在文本下方加上一个“暗色渐变”(gradientfade)的图层，颜色从半透明的黑色渐变到不透明的黑色，看起来效果很赞。
这个效果用在了很多应用上面，比如说Flipboard以及许多博客应用上发。我们也可以发现在HotelTonight应用中也应用了这个效果。
要实现这个效果，您可以使用以下代码：
funcaddGradientOverlay(){
self.view.insertSubview(gradientView,aboveSubview:coverImageView)
gradientLayer.frame=gradientView.bounds
letopaqueBlackColor=UIColor(red:0,green:0,blue:0,alpha:1.0).CGColor
lettransparentBlackColor=UIColor(red:0,green:0,blue:0,alpha:0.0).CGColor
gradientLayer.colors=[transparentBlackColor,opaqueBlackColor]
gradientView.layer.insertSublayer(gradientLayer,atIndex:0)
gradientView.translatesAutoresizingMaskIntoConstraints=false
lettopConstraint=NSLayoutConstraint(item:gradientView,attribute:.Top,relatedBy:.Equal,toItem:self.titleLabel,attribute:.Top,multiplier:1,constant:-60)
letleftConstraint=NSLayoutConstraint(item:gradientView,attribute:.Left,relatedBy:.Equal,toItem:self.view,attribute:.Left,multiplier:1,constant:0)
letrightConstraint=NSLayoutConstraint(item:gradientView,attribute:.Right,relatedBy:.Equal,toItem:self.view,attribute:.Right,multiplier:1,constant:0)
letbottomConstraint=NSLayoutConstraint(item:gradientView,attribute:.Bottom,relatedBy:.Equal,toItem:self.view,attribute:.Bottom,multiplier:1,constant:0)