為 iOS 而設(shè)計

iOS 表現(xiàn)了以下三大設(shè)計原則：

• 遵從(Deference)：UI 應(yīng)該有助于用戶更好地理解內(nèi)容并與之交互，并且不會分散用戶對內(nèi)容本身的注意力。
• 清晰(Clarity)：各種尺寸的文字清晰易讀；圖標應(yīng)該精確醒目，去除多余的修飾，突出重點，以功能驅(qū)動設(shè)計。
• 深度(Depth)：視覺的層次感和生動的交互動畫會賦予 UI 新的活力，有助于用戶更好地理解并讓用戶在使用過程中感到愉悅。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/1.jpg" alt="" />

無論你是重新設(shè)計現(xiàn)有的應(yīng)用，還是重新開發(fā)一個新應(yīng)用，請基于下列方法進行設(shè)計考慮：

• 首先，去除掉 UI 元素讓應(yīng)用的核心功能突顯出來，并明確之間的相關(guān)性。
• 然后，使用 iOS 的主題來定義 UI 并進行用戶體驗設(shè)計。完善細節(jié)設(shè)計，以及適當(dāng)合理的修飾。
• 最后，保證你設(shè)計的 UI 可以適配各種設(shè)備和各種操作模式，使得用戶在不同場景下都可以享受你的應(yīng)用。 在整個設(shè)計過程中，時刻準備著推翻先例，質(zhì)疑各種假設(shè)，并以內(nèi)容和功能視為重點來驅(qū)動每個細節(jié)的設(shè)計。

設(shè)計跟隨內(nèi)容

盡管清新美觀的 UI 和流暢的動態(tài)效果都是 iOS 體驗的亮點，但內(nèi)容始終是 iOS 的核心。

這里有一些方法可以確保你的設(shè)計既可以提升功能體驗，又可以關(guān)注內(nèi)容本身。

充分利用整個屏幕。系統(tǒng)天氣應(yīng)用是這個方法的絕佳范例：用漂亮的全屏天氣圖片呈現(xiàn)現(xiàn)在的天氣，直觀地向用戶傳遞了最重要的信息，同時也留出空間呈現(xiàn)了每個時段的天氣數(shù)據(jù)。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/1_1.jpg" alt="" />

重新考慮(盡量減少)擬物化設(shè)計的使用。遮罩、漸變和陰影有時會讓 UI 元素顯得很厚重，導(dǎo)致影響到了對內(nèi)容的關(guān)注。相反，應(yīng)該以內(nèi)容為核心，讓用戶界面成為內(nèi)容的支撐。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/2_1.jpg" alt="" />

用半透明 UI 元素樣式來暗示背后的內(nèi)容。半透明的控件元素(比如控制中心)可以提供了上下文的使用場景，幫助用戶看到更多可用的內(nèi)容，并可以起到短暫的提示作用。在 iOS 中，半透明的控件元素只讓它遮擋住的地方變得模糊——看上去像蒙著一層米紙——它并沒有遮擋屏幕剩余的部分。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/3_1.jpg" alt="" />

保證清晰

確保你的應(yīng)用始終是以內(nèi)容為核心的另一個方法是保證清晰度。這里有幾種方法可以讓最重要的內(nèi)容和功能清晰可見，且易于交互。

使用大量留白。留白可以使重要的內(nèi)容和功能更加醒目、更易理解。留白還可以傳達一種平靜和安寧的心理感受，它可以使一個應(yīng)用看起來更加聚焦和高效。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/4_1.jpg" alt="" />

讓顏色簡化 UI。使用一個主題色——比如 Notes 中用了黃色——高亮了重要區(qū)塊的信息并巧妙地用樣式暗示可交互性。同時，也讓應(yīng)用有了一致的視覺主題。內(nèi)置的應(yīng)用使用了同系列的系統(tǒng)顏色，這樣一來，無論在深色或淺色背景上看起來都很干凈，純粹。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/5_1.jpg" alt="" />

通過使用系統(tǒng)字體確保易讀性。iOS 的系統(tǒng)字體(San Francisco)使用動態(tài)類型(Dynamic Type)來自動調(diào)整字間距和行間距，使文本在任何尺寸大小下都清晰易讀。無論你是使用系統(tǒng)字體還是自定義字體，一定要采用動態(tài)類型，這樣一來當(dāng)用戶選擇不同字體尺寸時，你的應(yīng)用才可以及時做出響應(yīng)。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/6_1.jpg" alt="" />

使用無邊框的按鈕。默認情況下，所有的欄(bar)上的按鈕都是無邊框的。在內(nèi)容區(qū)域，通過文案、顏色以及操作指引標題來表明該無邊框按鈕的可交互性。當(dāng)它被激活時，按鈕可以顯示較窄的邊框或淺色背景作為操作響應(yīng)。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/7_1.jpg" alt="" />

用深度層次來進行交流

iOS 經(jīng)常在不同的視圖層級上展現(xiàn)內(nèi)容，用以表達層次結(jié)構(gòu)和位置，這樣可以幫助用戶了解屏幕上對象之間的關(guān)系。

對于支持 3D 觸控的設(shè)備，輕壓(Peek)、重壓(Pop)，以及快捷操作(Quick Actions)能讓用戶在不離開當(dāng)前界面的情景下預(yù)覽其他重要內(nèi)容。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/8_1.jpg" alt="" />

通過使用一個在主屏幕上方的半透明背景浮層，這樣文件夾就能清楚地把內(nèi)容和屏幕上其他內(nèi)容區(qū)分開來。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/9_1.jpg" alt="" />

如圖所示，備忘錄(Reminders)以不同的層級展示內(nèi)容條目。用戶在使用備忘錄里的某個條目時，其他條目會被集中收起在屏幕下方。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/10_1.jpg" alt="" />

日歷具有較深的層級，當(dāng)用戶在翻閱年、月、日時，增強的轉(zhuǎn)場動畫效果給用戶一種層級縱深感。在滾動年份視圖時，用戶可以即時看到今天的日期以及其他日歷任務(wù)。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/11_1.jpg" alt="" />

當(dāng)用戶選擇了某個月份，年份視圖會局部放大該月份，過渡到月份視圖。今天的日期依然處于高亮狀態(tài)，年份會顯示在返回按鈕處，這樣用戶可以清楚地知道他們在哪兒，他們從哪里進來以及如何返回。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/12_1.jpg" alt="" />

類似的過渡動畫也出現(xiàn)在用戶選擇某個日期時：月份視圖從所選位置分開，將所在的周日期推向內(nèi)容區(qū)頂端并顯示以小時為單位的當(dāng)天時間軸視圖。這些交互動畫增強了年、月、日之間的層級關(guān)系以及用戶的感知。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/13_1.jpg" alt="" />