iOS 11 設計徹底指南

扁平化設計在過去 5 年中已經普及了，但在 iOS 7 以前並不常見，這種轉變造成了當前的設計趨勢。但扁平化設計並非一成不變的，iOS 的設計已經適應了更大的屏幕。一開始扁平化設計仍是擬物化設計的對立面，但如今卻變得更加細緻入微，走上了漸變、陰影和卡片式設計之路。

iOS 進化史

讓咱們從頭開始，下圖是擬物化設計，在 2007 年你們都不瞭解在口袋裏有一臺超級計算機是什麼感受，因此使用這種強有力的比喻是很是有效的。

接下來，以下圖所示，咱們擺脫了全部的裝飾，轉而採用扁平的色彩、漂亮的排版以及高分辨率的內容。因爲大部分人日益習慣智能手機，所以再也不須要藉助大量的裝飾來進行設計。

下圖是 iOS 11 的界面。標題加粗了許多，加強了可讀性。因爲屏幕更長了，如今底部導航也變得更加常見（Tab bar）。

如今的設計師必須根據多種分辨率和像素密度來調整佈局。不過好消息是咱們有了更棒的工具，例如 Sketch 和 Xcode 來適應這些最新的技術。

大標題

iOS 11 正在迴歸本源。處處都是加粗的字體。標題又黑又大。因爲如今的屏幕幾乎是最初的兩倍長，因此大標題就很是有意義了。大字體還有一個緣由是輔助功能，天天有來自各年齡段的數十億人在使用手機，讓內容儘量清晰和易讀變得很是重要。輔助功能讓用戶能夠把支持此功能的 app 的字體設置得很是大。蘋果在 iOS 11 中的全部自帶 app 都支持這個選項。因此你會發現如今用戶對此功能的期待度愈來愈高了。

卡片

更大的屏幕意味着內容有了更多空間。在大屏 iPhone 以前，不該使用任何容器以便給內容留出最大的空間。但有了 iPhone X 和 8，狀況則不一樣了。能夠藉助狀態欄、導航欄和 tab 欄讓導航更加容易，而且使用卡片來更好地管理區域。圓角卡片可讓內容看起來更有觸感、更友好。可使用模糊的背景和陰影來爲設計增長深度和上下文。

iOS 設計的狀態

設計如今簡單了許多，從而讓咱們能夠專一在動畫和功能上，而不是錯綜複雜的視覺細節。
在 iOS 7 以前，我天天的設計工做有一大部分都花在設計錯綜複雜的紋理上，例如木頭、皮革和電鍍表面。如今，我把這些時間花在了動畫和代碼上。再也不是靜態設計，而要讓一切動起來，在更深的層次上去吸引用戶。這也是爲何本專欄是設計與編程指南，而不只僅是視覺設計指南。 從技術的角度來看，動畫和代碼從沒有變得如此重要並可行。這也是爲何咱們幾乎每週都能看到一款新的原型工具和代碼框架。設計變得很是普遍，同時和許多學科聯繫在了一塊兒。設計師若是可以更好地理解每一個學科的技術，就可以獨自創造一款產品，同時也會和工程師更好地合做。

有不少人問過我如何開始學設計，以及如何成爲更優秀的設計師。雖然並無什麼點石成金的祕訣，可是在 iOS 設計方面有不少技巧和規則能夠廣泛地影響你的設計方式。

即便你在爲另外一個平臺進行設計，設計概念依然是相同的，同時也能夠把學到的技術應用到 Web 和印刷中。iOS 是一個以設計爲本的平臺，讀起來就像一本現代雜誌，擁有漂亮的排版和簡單的佈局。本專欄的內容會極好的服務於你，讓你在任何地方都能設計出最好的產品。

核心哲學

咱們來複習一下基礎知識。iOS 由三個核心理念驅動：聽從（deference）、清晰（clarity）和深度（depth）。受這些設計原則的啓發，我把它們的含義分解爲可執行的操做，這樣相比於《iOS 人機界面設計指南》就更加簡單和更加直觀。

聽從

內容纔是主角，其它東西都是次要的。使用元素對其進行補充，同時避免與其造成競爭關係，從而致使分散了內容的視覺效果。例如，使用漂亮的動畫，從一個界面優雅地轉移到另外一個界面，從而確保用戶不會一頭霧水。模糊的背景能夠保持上下文，同時可讓用戶專一在前景的內容上。若是不明白，能夠從官方提供的模板開始設計。

簡潔

用戶界面應該被剝離到只剩下核心美學設計。每當想添加一個新元素的時候，捫心自問一下：真的有必要嗎？除非你的 app 是一款遊戲或是特定主題，不然不要使用大量紋理、3D 效果和多層陰影。相反，專一於功能性顏色，和諧的漸變和漂亮的排版。

內容最大化

內容應該填滿整個屏幕，給內在元素提供最大的空間。避免嵌套容器，同時最大化滾動區域以容許更多的交互空間。

顏色

用顯眼的顏色來表示可點擊的或須要強調的元素。你的設計是否成功都取決因而否選擇了正確的顏色以及是否使用了中性色調。藍色用於按鈕和選中狀態會很保險。另外，建議一開始使用白色或淺灰色背景搭配黑色文字。這樣會提供極高的對比度，可讀性極佳。

排版即內容

因爲用戶界面的簡化和對內容的聚焦，因此排版將會佔據屏幕的50%-90%。
因此，最重要的是選擇一款漂亮的字體，而後設置它的粗細程度、行高和顏色，這樣美觀同時又能完美適配全部尺寸下的閱讀。推薦使用默認的 San Francisco 字體 ，由於這款字體的設計初衷就是爲了易讀性。蘋果在其全部 app 中都使用的這款字體。

負空間

使用負空間（negative space）以便讓內容更專一。看到的東西越少，就越能專一在某幾件事情上。負空間給予了更多的呼吸空間（breathing room）。不要用太多的結構或沒必要要的視覺元素撐滿屏幕。若是不肯定就用 Xcode 默認的邊距。蘋果一向使用 8 到 16pt 的邊距。

清晰

讓一切更明顯。按鈕應該不言而喻（self-explanatory），排版應該大且可讀性強，而且擁有溫馨的間距。內容應該能清楚代表 app 的用途。例如一款咖啡 app，就應該用咖啡豆、濃縮咖啡和咖啡色來提醒用戶。

讓文字更易讀

標題應該大且對比度鮮明。說明應該簡短、便於速讀。正文應該有良好的間距，每行不要太長，避免閱讀疲勞。

正文的大小應該至少有 11pt。最適合閱讀的大小是 17pt 到 19pt。屏幕標題應該在 34pt 及以上，正文裏的標題則應該在 20pt 到 30pt 之間。將文本和其餘元素對其，便於掃視。最後，使用黑色或深灰搭配淺色背景來得到最佳對比度。

使用醒目的圖標

圖標不該該模棱兩可；它們應該清楚地代表符號的含義。儘量用文字來配合圖標。若是你在某個地方使用了個一個圖標，就不要再在其餘地方使用這個圖標或是該圖標的變體了，由於這會混淆用戶。一樣，不要使用「返回」或「提交」這種通用文字，而應明確說明：「回到主頁」或是「註冊新帳戶」。設計清晰的矢量化圖標，以便適應屏幕的不一樣像素密度。確保你的 assets 適用於 1x，2x（retina）和 3x（super retina）屏幕。

描述性界面

每個界面都應該清楚地說明其功能。慎重地選擇表示區域的圖片。

有意義的顏色

顏色具備意義。紅色、綠色、藍色和中性色分別表示破壞性行爲、確定行爲、連接和非活躍狀態，明智得使用他們。不要把這些顏色用於其餘目的以防混淆用戶。例如，不要在「刪除」按鈕上使用綠色。

爲觸屏設計

按鈕應該容易點擊。寬度介於 30-60pt 之間。最佳尺寸是 44pt。在極少數狀況下，文本里面的連接會設置爲 22pt，但這樣很難點擊，因此要謹慎使用。即便是文字按鈕也要有至少 30pt 的可點擊區域。打開圖片時，確保包含雙指縮放功能而且充分利用滑動手勢來單手返回到上一個界面。

橫屏模式

用戶在使用 iPad 或大屏 iPhone 時常常會使用橫屏模式。在這種模式下，app 的狀態欄會消失，導航欄和 tab bar 也會變小。有時會在左側展現一條額外的菜單，就像 iPad 上那樣。自適應佈局是根據屏幕尺寸來調節佈局的一種方式，如今是一種常規作法。感謝 Xcode 裏的 Auto Layout 和 Size Classes，基於設備朝向來修改佈局變得至關簡單。因此不用擔憂在設計中採起這種方式。

深度

深度也許是最難理解的部分。這個概念很是抽象，但又強大且獨特。深度的意思是全部東西都應該是情境式的、過渡式的。在現實世界裏，從一個房間走到另外一個房間，可以感受到前進和距離。這樣就不會迷路了。用戶界面也應該採用相同的概念。

對人們和他們所處的現實的漠視是設計中惟一的過失。——迪特·拉姆斯

過渡性界面

iOS 最棒、最獨特的一個方面就是它的動畫。每一個界面都從一個過渡到另外一個。主屏幕放大到某個文件夾，而後再放大到某個 app。動畫曾經很難實現，但感謝 Xcode 9，讓動畫變得更好作了。實際上你會在後面的 Swift 章節中學習到這些技巧。

模糊的背景

保持背景 UI 的上下文並不會有損內容的清晰度。模糊的背景不只能夠保持其本來的色彩，還能讓前景更加聚焦。模糊不是什麼新奇的發明，而是在現實生活中隨處可見的東西；當你專一在某個東西上時，其它全部東西都會變得模糊。

你的創造應該比你認爲人們所須要的好十倍，只有這樣他們纔會永遠記住它，不然就不會留下什麼印象。

動畫

動畫不只用於從一個界面過渡到另外一個界面，還能夠給你的設計增長趣味性和樂趣。它能夠強調某個本會被用戶忽略的元素。動畫還可讓通知更明顯，天氣應用的背景有雨落下時會更容易被理解。

雖然鼓勵使用動畫，但不要濫用。動畫不該分散用戶對內容的注意力，或是讓用戶暈頭轉向。沒必要要的、強制的動畫會淹沒用戶。相反在用戶處理內容時讓動畫變得顯而易見，或是使用動畫來優雅地將用戶的注意力引導到某個正在進行的操做。

最後，動畫的展現方式要真實一些。從底部滑上來的模態窗口，也應該從屏幕的底部消失。這樣用戶會喜歡上這些元素的物理屬性，即便它們都是虛擬的。

手勢

隨着大屏時代的到來，返回按鈕已經變得過高了，大拇指很難按到。因此手勢雖然沒有肉眼可見的按鈕來得明顯，但它能夠用於延伸已經可視化的交互。尤爲是對於資深用戶來講會更加方便。全部人都在變成資深用戶，因此咱們須要更少的視覺提示以及更有用的功能。

3D TOUCH

3D Touch 可讓用戶在 app 內部或外部快速訪問某些選項。把 3D Touch 想象成 Mac 上的快捷鍵——可讓用戶更快的完成重複操做。你須要設計快捷鍵以便讓資深用戶變得更有生產力。但就像快捷鍵同樣，基本功能不該該只存在於 3D Touch 中，即便沒有 3D Touch，用戶也應該可以正常使用 app。

例如，用戶能夠用力按壓 App Icon 來找到經常使用項目。在 app 內部用能夠迅速一瞥郵件或連接而不用進入全屏狀態。

聲音

聲音在 app 裏用的很少，但播放聲音能夠把普通的操做變成真正有價值的體驗。在推送通知等場景用戶不用看手機均可以認出你的 app。若是聲音給了用戶的正確的印象就事半功倍。

好設計是通用的。不須要解釋或長篇大論，用戶天然會明白。

延伸閱讀

蘋果寫的更抽象的 Human Interface Guidelines，一直保持更新，功能列表很是詳盡。但由於它太詳細了，因此個人建議是至少粗略的看一遍，而後只閱讀你須要的部分。

移動開發 移動設計 Xcode 設計 UX UI Sketch Objective-C