设计师似乎拥有我们开发者所没有的“魔力”。他们知道如何让应用程序的界面看起来如此舒适，以至于有时我们会迫不及待地重现它。然而几天过去了，我们还是卡在设计稿的第一个界面，写了一大段代码，界面却不是我们想要的，这无疑是一件很烦人的事情。好消息是，设计师的“魔力”并没有我们想象的那么神奇，设计上还是有一些小技巧的。只要我们掌握了它们，我们就可以用最小的成本让用户界面好看。今天，我将向您展示其中的一些技巧。我更喜欢称它们为“图片标记技巧”，这基本上是指如何在图片上放置文字以使其看起来更好看。我们在[iOS模板]中使用这些技巧，这是我们能够构建出色用户界面的技巧之一。这些设计概念也可以用在表视图单元格（TableViewCell）和集合视图（CollectionView）中。我们不能只是把文字扔在图片上，就指望Duang表现出那种Feel。但是，请遵循以下6个技巧来实现我们的目标：1：添加文本好吧，我不会忘记我说过将文本直接放在图像之上并不能使图像看起来更好。但有时我们可能会很幸运，就像下图中的例子。这个设计看起来很棒，因为标题看起来比其他文本元素大。而且这种效果一般只出现在图片上文字较暗的部分。如果不是这样，那么就会像下面的例子。现在换个封面的文章啊，GG。那么，怎么办？2：添加图片遮罩我们可以直接在图片上添加遮罩，技巧就是利用这个遮罩让图片更暗更透明，或者直接涂上颜色，就像雅虎新闻一样。好的，在这个例子中它看起来很棒，因为基色是蓝色而文本颜色是白色。下面的例子是我们目前正在做的项目的截图，下面是我们实现这个效果的代码：funcaddFullOverlay(){letoverlayView=UIView(frame:CGRectZero)overlayView.translatesAutoresizingMaskIntoConstraints=falseoverlayView.backgroundColor=UIColor(red:0,绿色:0,蓝色: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])}但是这个效果如果不是很理想，因为图片的颜色很深，文字很突兀，但是这个效果可能就是你想要的效果。通过给mask上色，我们可以给图片添加一个类似instagram效果的“滤镜”，如下图。#p#我们只需要为这个半透明蒙版添加颜色：overlayView.backgroundColor=UIColor(red:0.5,green:0.2,blue:0,alpha:0.5)3：为一些不喜欢蒙版的人添加文本背景他们可能想让图像保持“真实”。在这种情况下，我们将使用这个技巧，就像“FunnyorDie”那样。那么我们的项目来自远方，我们可以给文字加上背景。我们可以使用文本的NSAttributed属性轻松地做到这一点。实际发现此项有效的代码如下：funcaddBackgroundColorToText(){letstyle=NSMutableParagraphStyle.defaultParagraphStyle().mutableCopy()as!NSMutableParagraphStylestyle.firstLineHeadIndent=10.0style.headIndent=10style.tailIndent=0letattributes=[NSMutableParagraphStyle=letattributed:letattributed:"SupplierwoesssuggestAppleWatchsalesaren'tgreat",attributes:attributes)titleLabel.attributedText=attributedTitleTextlettextbackgroundColor=UIColor(red:0,green:0,blue:0,alpha:0.6)titleLabel.backgroundColor=textbackgroundColorauthorLabel.backgroundColor=textbackgroundColorback4textbackgroundColorback4:添加彩色背景呃，效果和上面那个差不多，如果你不喜欢黑色，可以把文字背景换成颜色，这样就有了“彩色文字背景”。至于怎么实现这个效果，留给大家自己试试O(∩_∩)O~。关键是找到图片的主色，设置为背景色。5：毛玻璃这是我最喜欢的效果，没有之一。通过iOS8提供的`UIVisualEffectView`类，我们可以轻松的实现这种效果。我们在Newsstand例程中使用了这种效果。通过向文本下方的图像添加磨砂玻璃效果，可以使文本更具可读性。下面是实现这个效果的代码：(item:overlayView,attribute:.Top,relatedBy:.Equal,toItem:self.titleLabel,attribute:.Top,multiplier:1,constant:-30)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,乘数:1,常量:0)letbottomConstraint=NSLayoutConstraint(item:overlayView,attribute:.Bottom,relatedBy:.Equal,toItem:self.view,attribute:.Bottom,multiplier:1,constant:0)view.addConstraints([topConstraint,leftConstraint,rightConstraint,bottomConstraint])}6：添加深色渐变这是我的第二个最爱效果，有时甚至比磨砂玻璃还要好。这个效果是通过在文字下方添加一个“渐变淡入淡出”层来实现的，颜色从半透明的黑色逐渐变成不透明的黑色，看起来很棒。许多应用程序都使用了这种效果，例如Flipboard和许多博客应用程序。我们还可以在HotelTonight应用程序中找到这种效果。要实现这个效果，您可以使用以下代码：funcaddGradientOverlay(){self.view.insertSubview(gradientView,aboveSubview:coverImageView)gradientLayer.frame=gradientView.boundsletopaqueBlackColor=UIColor(red:0,green:0,blue:0,alpha:1.0).CGColorlettransparentBlackColor=UIColor(red:0,green:0,blue:0,alpha:0.0).CGColorgradientLayer.colors=[transparentBlackColor,opaqueBlackColor]gradientView.layer.insertSublayer(gradientLayer,atIndex:0)gradientView.translatesAutoresizingMaskIntoConstraints=falseself.view.insertSubview(gradientView,aboveSubview:coverImageView)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)view.addConstraints([topConstraint,leftConstraint,rightConstraint,bottomConstraint])}下载示例工程你喜欢这些效果吗？现在您已经知道如何实现它，是时候在您的应用程序中使用它们了。单击此处下载示例项目，以便您可以看到所有实现的效果。
