為什麼上線的App沒有Sketch裡的設計稿好看？

yice發表於2018-05-22
APP

本文翻譯自Nathan Gitter 的文章 原文連結

發現不同

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

為什麼上線的App沒有Sketch裡的設計稿好看？
仔細看，你就會注意到細微的差別，右邊的圖片：

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

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

為什麼上線的App沒有Sketch裡的設計稿好看？
如你所見，把設計稿轉換成真實的程式碼時，一些細節就會丟失。接下來我會深入探討這些細節並告訴你如何做才能避免資訊的丟失。

為什麼要關注細節？

設計對於一款應用的成功與否至關重要，尤其在iOS系統中，因為使用者會更喜歡使用流暢和好看的App。

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

App沒有設計原稿好看有很多原因，我將探討最微妙的原因——Sketch和iOS有不同的渲染方式。

為什麼上線的App沒有Sketch裡的設計稿好看？

轉化中丟失的資訊

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

  • 字型
  • 陰影
  • 漸變

1、排版

字型和排版可以用很多方式實現，本文中我使用UILabel進行測試驗證（Sketch中用的是“Text”，iOS中用的Label）。

讓我們看一個例子：

為什麼上線的App沒有Sketch裡的設計稿好看？
上面例子中最大的區別是換行的位置。第三段的文字在Sketch中是從“25”開始斷行，而在app中則從“point”斷行。同樣的問題也出現在文字段落中——斷行不一致。

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

下面的動圖可以更清楚地看到兩張圖片的差異：

為什麼上線的App沒有Sketch裡的設計稿好看？
使用其他的字型會怎樣呢？用Lato（另一種常用的免費字型）替換掉San Francisco會得到下面結果：
為什麼上線的App沒有Sketch裡的設計稿好看？
好多了！

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

怎麼解決？

造成以上問題的原因，一部分是由於iOS的預設字型：San Francisco，當iOS渲染系統預設字型時，系統會自動的調整字間距，可以在蘋果官網上找到，如果你的設計字型採用了SF,強烈推薦SF Font Fixer的Sketch外掛Sketch plugin 可以解決這個比較煩人的問題。

小貼士：在設計時，儘量讓Text box適配文字所佔的大小，不要用過大的Textbox，並且可以設定自動對其，然後再裁剪text的寬度，如果textbox有著較多的冗餘寬度，則非常容易造成其他的還原錯誤。

2、陰影

不同於字型排版有著通用的設計規則，陰影的設計則因人而異。

為什麼上線的App沒有Sketch裡的設計稿好看？
例如上圖的圖片，iOS中的預設陰影比較大，這使得上面的例子中矩形的頂部邊緣的差異最大。

陰影的設定也是有小技巧的，iOS和Sketch的陰影引數也有著一些差異，主要的原因是由於iOS中的CALayer中沒有 “spread”的概念，儘管可以通過增大包含陰影的layer的大小來解決這個問題。

為什麼上線的App沒有Sketch裡的設計稿好看？
Sketch給出的設計稿與真實的應用中的陰影差異有可能是非常大的，甚至有些在Sketch上看著很不錯的陰影效果，但是在裝置上執行時，卻幾乎看不到。
為什麼上線的App沒有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
複製程式碼

當然，隨著大小、顏色以及形狀的不同，引數的改變也是不一樣的，這裡我們僅僅需要做有限的幾處改動。

3、漸變

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

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

為什麼上線的App沒有Sketch裡的設計稿好看？
在設計稿中，橙色的漸變色更加偏向於水平方向的漸變，但是在iOS中卻更偏向於垂直漸變，因此整體來說，應用的顏色看起來要比設計稿中更暗。

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

為什麼上線的App沒有Sketch裡的設計稿好看？

怎麼解決？

因此，在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中的漸變是如何渲染的，如果你想深入瞭解的話，可以認真研究下這篇文章。

更多資訊

文中所提到的iOS與Sketch的差異，我都通過Demo的方式進行展示，包括插圖中的每個例子，以及原始的Sketch檔案，通過Demo,你可以更直觀瞭解到這些差異。你可以展示給你的團隊，這種方式可以更好的理解設計與開發區別，從而開發出更好的應用。

Demo的地址為:github.com/nathangitte…

為什麼上線的App沒有Sketch裡的設計稿好看？

小貼士

永遠不要迷信相同的值會有著相同的結果，儘管數字相同，但其視覺表現是不同的。 最後，每個好的設計都是在不斷的迭代中產生的，開發哥哥和設計小姐姐的良好協作，也是保證高質量產品的關鍵。

相關文章