## 1.1 為iOS而設計（Designing for iOS） [TOC=3,3] **iOS**表現了以下三大設計原則： * **遵從**（**Deference**）：UI應該有助于用戶更好地理解內容并與之交互，并且不會分散用戶對內容本身的注意力。 * **清晰**（**Clarity**）：各種尺寸的文字清晰易讀；圖標應該精確醒目，去除多余的修飾，突出重點，以功能驅動設計。 * **深度**（**Depth**）：視覺的層次感和生動的交互動畫會賦予UI新的活力，有助于用戶更好地理解并讓用戶在使用過程中感到愉悅。 [](http://isux.tencent.com/wp-content/uploads/2015/10/2015102117064336.jpg) 無論你是重新設計現有的應用，還是重新開發一個新應用，請基于下列方法進行設計考慮： * 首先，去除掉UI元素讓應用的核心功能突顯出來，并明確之間的相關性。 * 然后，使用iOS的主題來定義UI并進行用戶體驗設計。完善細節設計，以及適當合理的修飾。 * 最后，保證你設計的UI可以適配各種設備和各種操作模式，使得用戶在不同場景下都可以享受你的應用。 在整個設計過程中，時刻準備著推翻先例，質疑各種假設，并以內容和功能視為重點來驅動每個細節的設計。 ### 1.1.1 設計跟隨內容 (Defer to Content) 盡管清新美觀的UI和流暢的動態效果都是iOS體驗的亮點，但內容始終是iOS的核心。 這里有一些方法可以確保你的設計既可以提升功能體驗，又可以關注內容本身。 **充分利用整個屏幕。**系統天氣應用是這個方法的絕佳范例：用漂亮的全屏天氣圖片呈現現在的天氣，直觀地向用戶傳遞了最重要的信息，同時也留出空間呈現了每個時段的天氣數據。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161354587.png) **重新考慮（盡量減少）擬物化設計的使用。**遮罩、漸變和陰影有時會讓UI元素顯得很厚重，導致影響到了對內容的關注。相反，應該以內容為核心，讓用戶界面成為內容的支撐。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161347236.png) **用半透明****UI****元素樣式來暗示背后的內容。**半透明的控件元素（比如控制中心）可以提供了上下文的使用場景，幫助用戶看到更多可用的內容，并可以起到短暫的提示作用。在iOS中，半透明的控件元素只讓它遮擋住的地方變得模糊——看上去像蒙著一層米紙——它并沒有遮擋屏幕剩余的部分。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161332324.png) ### 1.1.2 保證清晰 （Provide Clarity） 確保你的應用始終是以內容為核心的另一個方法是保證清晰度。這里有幾種方法可以讓最重要的內容和功能清晰可見，且易于交互。 **使用大量留白。**留白可以使重要的內容和功能更加醒目、更易理解。留白還可以傳達一種平靜和安寧的心理感受，它可以使一個應用看起來更加聚焦和高效。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161350996.png) **讓顏色簡化****UI****。**使用一個主題色——比如Notes中用了黃色——高亮了重要區塊的信息并巧妙地用樣式暗示可交互性。同時，也讓應用有了一致的視覺主題。內置的應用使用了同系列的系統顏色，這樣一來，無論在深色或淺色背景上看起來都很干凈，純粹。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151021162313271.png) **通過使用系統字體確保易讀性。**iOS的系統字體(San Francisco)使用動態類型(Dynamic Type)來自動調整字間距和行間距，使文本在任何尺寸大小下都清晰易讀。無論你是使用系統字體還是自定義字體，一定要采用動態類型，這樣一來當用戶選擇不同字體尺寸時，你的應用才可以及時做出響應。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161314104.png) **使用無邊框的按鈕。**默認情況下，所有的欄(bar)上的按鈕都是無邊框的。在內容區域，通過文案、顏色以及操作指引標題來表明該無邊框按鈕的可交互性。當它被激活時，按鈕可以顯示較窄的邊框或淺色背景作為操作響應。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161310540.png) ### 1.1.3 用深度層次來進行交流 （Use Depth to Communicate） iOS經常在不同的視圖層級上展現內容，用以表達層次結構和位置，這樣可以幫助用戶了解屏幕上對象之間的關系。 對于支持3D觸控的設備，輕壓（Peek）、重壓（Pop），以及快捷操作（Quick Actions）能讓用戶在不離開當前界面的情景下預覽其他重要內容。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151021162648184.png) 通過使用一個在主屏幕上方的半透明背景浮層，這樣文件夾就能清楚地把內容和屏幕上其他內容區分開來。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161335961.png) 如圖所示，備忘錄（Reminders）以不同的層級展示內容條目。用戶在使用備忘錄里的某個條目時，其他條目會被集中收起在屏幕下方。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161339644.png) 日歷具有較深的層級，當用戶在翻閱年、月、日時，增強的轉場動畫效果給用戶一種層級縱深感。在滾動年份視圖時，用戶可以即時看到今天的日期以及其他日歷任務。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161328758.png) 當用戶選擇了某個月份，年份視圖會局部放大該月份，過渡到月份視圖。今天的日期依然處于高亮狀態，年份會顯示在返回按鈕處，這樣用戶可以清楚地知道他們在哪兒，他們從哪里進來以及如何返回。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161306786.png) 類似的過渡動畫也出現在用戶選擇某個日期時：月份視圖從所選位置分開，將所在的周日期推向內容區頂端并顯示以小時為單位的當天時間軸視圖。這些交互動畫增強了年、月、日之間的層級關系以及用戶的感知。 [](http://isux.tencent.com/wp-content/uploads/2015/10/20151019161325202.png)