爲何上線的App沒有Sketch裏的設計稿好看？

時間 2019-11-15

標籤爲何上線 app 沒有 sketch 設計好看简体版

原文原文鏈接

本文翻譯自Nathan Gitter 的文章原文連接ios

發現不一樣

你能看出這兩張圖的差異嗎？ git

仔細看，你就會注意到細微的差異，右邊的圖片：

陰影範圍更大；
漸變的顏色更暗；
段落中文字的第一行有一個單詞「in」；

左邊的圖片是Sketch中的設計稿的截圖，右邊的圖片是在iOS中的還原。這些差別會在圖像渲染時出現，儘管兩張圖中用了徹底相同的字體、行間距、陰影半徑、顏色和漸變屬性。github

如你所見，把設計稿轉換成真實的代碼時，一些細節就會丟失。接下來我會深刻探討這些細節並告訴你如何作才能避免信息的丟失。

爲何要關注細節？

設計對於一款應用的成功與否相當重要，尤爲在iOS系統中，由於用戶會更喜歡使用流暢和好看的App。bash

若是你是一個移動端app的設計師或者開發者，你就會知道細節對於用戶體驗的重要性。高質量的軟件來自於開發者對於每一個細節的深度考慮。app

App沒有設計原稿好看有不少緣由，我將探討最微妙的緣由——Sketch和iOS有不一樣的渲染方式。
測試

轉化中丟失的信息

幾種UI元素在Sketch和iOS中有顯著的差別：字體

字體
陰影
漸變

一、排版

字體和排版能夠用不少方式實現，本文中我使用UILabel進行測試驗證（Sketch中用的是「Text」，iOS中用的Label）。spa

讓咱們看一個例子：插件

上面例子中最大的區別是換行的位置。第三段的文字在Sketch中是從「25」開始斷行，而在app中則從「point」斷行。一樣的問題也出如今文本段落中——斷行不一致。

另外一個細微的差異是Sketch中的行距和字間距會稍微大一些。翻譯

下面的動圖能夠更清楚地看到兩張圖片的差別：

使用其餘的字體會怎樣呢？用Lato（另外一種經常使用的免費字體）替換掉San Francisco會獲得下面結果：

好多了！

雖然他們的行距和字間距依然有差異，但這些差異很是細微。可是也要注意，若是文本須要與其餘元素（例如背景圖片）對齊，這些差別在視覺上就會被放大。

怎麼解決？

形成以上問題的緣由，一部分是因爲iOS的默認字體：San Francisco，當iOS渲染系統默認字體時，系統會自動的調整字間距，能夠在蘋果官網上找到，若是你的設計字體採用了SF,強烈推薦SF Font Fixer的Sketch插件Sketch plugin 能夠解決這個比較煩人的問題。

小貼士：在設計時，儘可能讓Text box適配文字所佔的大小，不要用過大的Textbox，而且能夠設置自動對其，而後再裁剪text的寬度，若是textbox有着較多的冗餘寬度，則很是容易形成其餘的還原錯誤。

二、陰影

不一樣於字體排版有着通用的設計規則，陰影的設計則因人而異。

例如上圖的圖片，iOS中的默認陰影比較大，這使得上面的例子中矩形的頂部邊緣的差別最大。

陰影的設置也是有小技巧的，iOS和Sketch的陰影參數也有着一些差別，主要的緣由是因爲iOS中的CALayer中沒有「spread」的概念，儘管能夠經過增大包含陰影的layer的大小來解決這個問題。

Sketch給出的設計稿與真實的應用中的陰影差別有多是很是大的，甚至有些在Sketch上看着很不錯的陰影效果，可是在設備上運行時，卻幾乎看不到。

怎麼解決？

調節陰影參數，將其還原的與設計稿一致的小技巧:把陰影的圓角下降，同時提升陰影的不透明度，代碼以下：

// old  
layer.shadowColor = UIColor.black.cgColor  
layer.shadowOpacity = 0.2  
layer.shadowOffset = CGSize(width: 0, height: 4)  
layer.shadowRadius = 10  

// new  
layer.shadowColor = UIColor.black.cgColor  
layer.shadowOpacity = 0.3  
layer.shadowOffset = CGSize(width: 0, height: 6)  
layer.shadowRadius = 7
複製代碼

固然，隨着大小、顏色以及形狀的不一樣，參數的改變也是不同的，這裏咱們僅僅須要作有限的幾處改動。

三、漸變

漸變的還原也是一個使人頭痛的問題。

下面三個漸變圖中，只有橙色（上面）和藍色（右下角）與設計稿是有差別的。

在設計稿中，橙色的漸變色更加偏向於水平方向的漸變，可是在iOS中卻更偏向於垂直漸變，所以總體來講，應用的顏色看起來要比設計稿中更暗。

這種差別在藍色中更加明顯，iOS中的漸變動偏向於垂直方向。藍色的漸變是由三種顏色定義而成，左下角爲淺藍，中間爲深藍，右上角爲粉色。

怎麼解決？

所以，在iOS中的，若是發現漸變的角度與還原的不一致，須要將起始點和終點進行調整，能夠將CAGradientLayer的startPoint和endPoint進行微調，調節設計稿與還原之間的差別。

// old  
layer.startPoint = CGPoint(x: 0, y: 1)  
layer.endPoint = CGPoint(x: 1, y: 0)  

// new  
layer.startPoint = CGPoint(x: 0.2, y: 1)  
layer.endPoint = CGPoint(x: 0.8, y: 0)  
複製代碼

固然，這裏其實也沒有一個通用的魔法公式，都是須要親自手工的不斷調整並將差別縮小。

Jirka Třečák 發表了一篇很棒的文章，解釋了在iOS中的漸變是如何渲染的，若是你想深刻了解的話，能夠認真研究下這篇文章。