iOS開發>學無止境 - 6個iOS圖片文本設計的小技巧

標籤：

英文：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網站上的文章。如果您有更好的想法，請與我聯絡。

iOS開發>學無止境 - 6個iOS圖片文本設計的小技巧