如何實現像素完美的 iOS UI 設計

您可能已經無數次聽到“像素完美設計”這個詞，甚至沒有考慮它的含義，或者它應該意味著什麼。 最近幾個月，您可能聽說過像素完美設計概念的衰落，但這些說法存在一個小問題，尤其是在 iOS UI 設計方面。

也就是說，像素完美設計的定義並不像大多數 iOS UI 指南那樣一成不變。 人們以不同的方式解釋它，因此出現了問題——像素完美對某些人來說似乎已經過去了，但其他人將在未來幾年繼續使用該原則，儘管名稱不同。 這主要是一個命名問題。

什麼是像素完美的 UI 設計？

由於沒有對像素完美的明確定義，所以我對像素完美設計理念的理解是，一切都是為了最大限度地提高清晰度和保真度。 設計實施後，它在任何 iPhone 顯示器上看起來都是一樣的，沒有任何瑕疵或任何類型的問題。

創建像素完美的 iOS 應用程序 UI 意味著您正在創建一個考慮像素的設計，並在屏幕上實現完全相同的設計，直至參考設計上的每個像素，同時確保它能夠響應地適應其他設備。

但為什麼是像素完美的設計？

UI 設計師盡最大努力創建易於感知和交互的界面。 尊重設計者的工作並完全按照交付的方式實現接口是開發人員的職業職責。

對於非像素完美的應用程序，用戶不太可能遇到任何阻礙他們使用和享受應用程序的重大問題，但像素完美的應用程序肯定看起來更清晰、更清晰、更一致。

由於 Apple App Store 的競爭激烈，我們歡迎改進整體外觀和用戶體驗的每一點潤色。 它可能有助於區分您的應用程序並使其更顯眼，從而更有利可圖。

這個快速的 iOS UI 設計指南將從設計師和開發人員的角度帶您完成從基本設計階段到實施的整個過程。

創建 iOS UI 設計

讓我們開始吧。 像素完美的應用程序顯然是從像素完美的設計開始的，我們都知道現在這些是從哪裡來的。

必備的 iOS 界面設計工具

我認為我說 Sketch 已經成為 Web 和移動 UI/UX 設計師的事實標準是準確的。 雖然 Adob​​e XD 是一個新興的替代品，但它在受歡迎程度方面落後於 Sketch。

接下來，我們將選擇畫板大小。 如今，我們擁有不同屏幕尺寸和縱橫比的 iOS 設備，我們需要選擇一種尺寸來創建我們的設計。 由於自動佈局，它將無縫適應其他顯示尺寸。 如果需要，您可以為不同的Size Classes創建不同的佈局變體。

這裡唯一真正的問題是：設計師應該如何與開發人員分享有關為不同顯示器調整設計的信息？

幸運的是，沒有必要為每一個都寫下規範，因為 Sketch 的自動佈局插件會處理這些。 設計師只需要設置所需的自動佈局，通過點擊導出到不同的屏幕尺寸，開發人員將了解如何放置佈局約束並確保一切看起來都很好，無論是在 iPhone X 還是舊款 iPhone 5 上。

注意：從版本 44 開始，Sketch 團隊已經顯著改進了調整大小的控件，讓用戶在調整父級大小時對圖層的行為方式有更多的權力和控制。

設置您的設計

聽起來不錯，但我們還沒有選擇用於創建設計的尺寸。 根據 David Smith 的 iOS 統計數據，57% 的 iPhone 用戶依賴 4.7 英寸顯示屏，該顯示屏在 iPhone 6/6s 中引入，隨後用於 iPhone 7 甚至最近推出的 iPhone 8。

我相信你們現在都熟悉 Apple 的 4.7 英寸顯示器，但如果您不是數字人，我們談論的是每英寸 326 像素 (PPI) 的 750x1334 像素顯示器。 這是標準的 Retina 顯示屏，在代碼中我們將擁有一半的分辨率。 因此，我建議您從375x667像素開始。

接下來，我們需要確保我們的 iOS UI 設計最大限度地提高清晰度。 要達到這個目標，您需要打開像素擬合：

這是一個帶有和不帶有像素擬合的簡單矩形的示例：

編輯矢量對象時使用圓形：全像素：

這些顯然只是基礎知識，要仔細查看 Sketch 中像素完美的 iOS UI 元素，您應該查看官方教程。

隨意使用複雜的矢量動畫，因為開發人員可以使用 Lottie 庫輕鬆播放它。 您可以在移動設備上播放 Adob​​e After Effects 動畫，而不會受到任何縮放偽影的影響。 只需將 JSON 文件提供給開發人員即可。

盡可能使用 sRGB 顏色配置文件。 如果 sRGB 在廣色域顯示器上不夠用，您將需要提供顏色或圖形資源（一個 sRGB，另一個帶有嵌入的顏色配置文件）。 如果您需要，Apple 的 HID 指南中提供了有關顏色配置文件的詳細信息。

像素完美結果的自定義代碼

偉大的！ 現在我們知道的足夠多，可以創建像素完美的設計； 我們如何與開發者分享它？ 我們顯然需要進入我們的工具箱。

選擇正確的工具

有一些非常有用的工具可以與開發人員分享設計師的作品 - Zeplin。 只需使用它，開發人員將獲得幾乎所有必要的信息，以確保您的 UI 設計正常工作：圖形資源、設計中使用的字體和顏色、文本等等。 設計師此時可能需要提供的幾乎唯一的東西就是字體文件，以防他們使用了 iOS 中不包含的字體。

另一個很酷的工具是 PaintCode，它可以從矢量圖像生成代碼。 PaintCode 使用您的 SVG 路徑和顏色數據來生成 Swift 或 ObjC 類。 使用 PaintCode，您可以使用表達式、變量等來創建按鈕的被動/主動狀態、向上/向下狀態、動態文本、來自變量的動畫等等。

您顯然需要依賴 Xcode 和一些標準的 iOS 開發工具，但我們稍後會談到。

如果您必須僅動態更新設計資產的特定部分，例如更改聊天圖標上漸變背景的基色，這將非常有用。 而且，作為一個方便的獎勵，您的應用程序將減輕重量。

好的，開發者終於擁有了他們需要的一切，那麼我們如何完美地實現像素完美的設計（請原諒雙關語）？

設置和同步您的工具

使用 Zeplin，只要設計人員正確設置所有內容，您幾乎可以獲得所需的一切。 如果某些事情被忽略或不清楚，Zeplin 提供了有效的評論功能，讓設計人員和開發人員能夠快速識別和解決潛在問題。 即使一切都正確完成，評論也可用於反饋和小改進。

然而，眾所周知，事情並不總是按計劃進行，因此有時開發人員需要選擇一種顏色，即使設計師提供了應用程序中使用的調色板。

要正確執行此操作，您需要同步您的工具：

• 將顯示顏色配置文件設置為 sRGB：轉到System Preferences - Displays - Color並選擇sRGB IEC61966-2.1 。

• 在Digital Color Meter或任何其他顏色選擇器工具中，選擇以sRGB顯示。

• 檢查 Xcode 調色板中的顏色配置文件是否設置為設備 RGB。

注意：圖像可以具有嵌入的顏色配置文件。 如果是這種情況，如果您想從該圖像中獲取正確的顏色，則需要使您的工具適應該配置文件。 幸運的是，這應該是一個例外，你不應該經常遇到這種情況。

在 Xcode 9 中，請記住在需要時保留矢量數據。 雖然它會增加應用程序的大小，但這也將允許您將圖像用於任何顯示尺寸。 但是，在 iOS 10 和更早版本的 Apple 移動操作系統上，圖像不會使用額外的矢量數據進行放大。

相反，較舊的操作系統版本將使用舊的縮放機制，並且在超出原始大小時會給您留下模糊的圖像。 您可以查看 Apple 的官方文檔以獲取有關此特定問題的更多信息。

最後，開發人員需要確保尺寸和距離盡可能與原始設計相匹配。 如果 Zeplin 中存在任何可疑信息，您可以通過屏幕規則的變化來測量不同 iOS UI 組件之間的距離。 其中之一是 xScope，一個具有許多實用功能的屏幕標尺。

讓您的 iOS UI 設計栩栩如生

在實現 iOS UI 設計時，有幾種方法可供選擇：Storyboard、XIB 和自定義代碼。

• 故事板- 可視化屏幕和它們之間的導航，但沒有選項可以從一個控制器繼承另一個控制器的設計。

• XIBs - 可視化一個屏幕或其部分，易於繼承。 在 Xcode 9 之前，沒有使用頂部/底部佈局指南的選項，而在 Xcode 9 中我們可以使用Safe Area 。

• 代碼- 迄今為止最靈活的選項，但不提供即時可視化。

對於故事板，您需要將設計拆分為流，例如 LoginFlow.storyboard、SettingsFlow.storyboard 或 NewsFeedFlow.storyboard。 這樣，您將保持故事板的輕量級。

將 UI 元素分組到塊中。 這簡化了對所有約束的支持。 不要偷懶，按順序放置命名視圖，因為它們從上到下出現在屏幕上。 請記住，底部將顯示在頂部上方。 這將幫助您更快地找到不同的視圖。

有關未分組和分組的元素，請參見以下示例：

如果您有多個左/右對齊的對象，請不要將它們與偏移的邊緣對齊。 更好的方法是對齊前一個元素或實現一個特殊的 _ffset view_with 寬度約束。 如果您將來需要更改偏移量，這將使它更容易一些。

要在 IB 中使用顏色，您可以在 Xcode Color Picker 的底部準備一個調色板。

注意：如果您的應用的最低 iOS 版本為 11，您可以使用 Asset Catalog 中的“命名顏色”選項。

包起來

而已。 現在我們只需要將結果發送給 QA 團隊，檢查一切是否正常，瞧！ 我們像素完美的應用程序已準備就緒。

本文的目的是提供一個線性且簡單的像素完美 iOS UI 設計示例，在盡可能短的時間內獲得最佳結果。 UI 設計師和開發人員之間的協作並不總是那麼簡單和順暢，但這是另一篇文章的問題。