為 iOS 而設(shè)計(jì)

iOS 設(shè)計(jì)包含了以下幾個(gè)關(guān)鍵點(diǎn)

• 遵從：UI 能夠幫助用戶理解內(nèi)容并與之互動(dòng)，但卻不會(huì)分散用戶對(duì)內(nèi)容的注意力
• 清晰：每種大小的文字都必須是易讀的，界面中的圖標(biāo)醒目且無多余的修飾，在功能上有突出的重點(diǎn)，很好地突顯了設(shè)計(jì)理念。
• 深度：視覺層次和生動(dòng)的交互操作賦予了 UI 生命力，不僅能夠幫助用戶更好的理解 UI，還能讓用戶在使用過程中感到驚喜

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/weather_app_7_2x.png" alt="" />

無論你正在重新設(shè)計(jì)一個(gè)現(xiàn)有的 App 或是開發(fā)一個(gè)新 App，在設(shè)計(jì)的過程中請(qǐng)嘗試考慮下列方法流程：

首先，透過 UI 元素去考慮應(yīng)用的核心功能，思考如何強(qiáng)調(diào)其相關(guān)性。

其次，直接使用 iOS 的系統(tǒng)主題來設(shè)計(jì)應(yīng)用的 UI 和交互，在此基礎(chǔ)上細(xì)致地增加細(xì)節(jié)，但注意避免不必要的修飾，這樣能給用戶統(tǒng)一的視覺感受。

最后，保證你設(shè)計(jì)的 UI 可以適配各種設(shè)備和不同操作模式，這樣在不同場景下用戶都能舒適地享用你的應(yīng)用。

在整個(gè)設(shè)計(jì)過程中，請(qǐng)時(shí)刻準(zhǔn)備著推翻一些范例，提出假設(shè)問題，并以重點(diǎn)內(nèi)容和功能（為目標(biāo)）來驅(qū)動(dòng)每個(gè)細(xì)節(jié)設(shè)計(jì)。

內(nèi)容是核心

雖然明快、美觀的 UI 和流暢的動(dòng)態(tài)效果是 iOS 體驗(yàn)的亮點(diǎn)，但內(nèi)容始終是 iOS 的核心。

這里有一些方法，確保你的設(shè)計(jì)能夠提升應(yīng)用的功能體驗(yàn)并時(shí)刻關(guān)注內(nèi)容本身。

充分利用整個(gè)屏幕。 天氣應(yīng)用是一個(gè)很棒的例子：漂亮的界面充滿全屏，為用戶呈現(xiàn)所在地當(dāng)前天氣情況這一最重要的信息的同時(shí)，也留出了呈現(xiàn)每個(gè)時(shí)段氣溫?cái)?shù)據(jù)的空間。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/weather_focus_2x.png" alt="" />

慎重使用擬物化設(shè)計(jì)。斜面板、漸變和陰影有時(shí)會(huì)讓 UI 元素顯得很厚重，分散了用戶對(duì)內(nèi)容的注意力。因此設(shè)計(jì)時(shí)，應(yīng)當(dāng)以內(nèi)容為核心，讓 UI 成為內(nèi)容的支撐。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/restrain_visual_indicators_2x.png" alt="" />

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/embrace_translucency_2x.png" alt="" />

嘗試使用半透明底板。 半透明的控件——比如控制中心——關(guān)聯(lián)了使用場景，它幫助用戶看到了更多可用的內(nèi)容，并起到了短暫的提示作用。在 iOS 中，透明的控件只讓它遮擋住的地方變得模糊——使得視覺上像蒙著一層米紙一樣——但屏幕剩余的部分并沒有變得模糊。

清晰度

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

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/use_white_space_2x.png" alt="" />

使用大量留白。留白可以讓重要內(nèi)容和功能顯得更加醒目，更加易于理解。此外，留白可以傳達(dá)一種平靜和安寧的視覺感受，使你的應(yīng)用看起來更加聚焦和高效。

讓顏色簡化 UI。一個(gè)主題色——如在記事本中使用的黃色——讓重要區(qū)域更加醒目并巧妙地突顯了整個(gè) App 的交互性。這同時(shí)也給了一個(gè)應(yīng)用一個(gè)統(tǒng)一的視覺主題。iOS 的內(nèi)置應(yīng)用多使用家族化的系統(tǒng)顏色，使得它們無論在深色或是淺色背景下，看起來都非常的干凈，純粹。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/notes_color_2x.png" alt="" />

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/mail_message_fonts_2x.png" alt="" />

通過使用系統(tǒng)字體確保易讀性。為了保證用戶在閱讀時(shí)，無論使用何種大小的字號(hào)的文本都清晰易讀，iOS 的系統(tǒng)字體能夠自動(dòng)調(diào)整行間距和行的高度。無論你是使用系統(tǒng)字體或是自定義字體，都請(qǐng)務(wù)必使用可以自動(dòng)調(diào)整的動(dòng)態(tài)型，這樣在用戶選擇不同字號(hào)時(shí)，你的 App 都能做出相應(yīng)的應(yīng)對(duì)和調(diào)整。

使用無邊框的按鈕。默認(rèn)情況下，所有 bar 上的按鈕都是無邊框的。在內(nèi)容區(qū)域，無邊框按鈕以文案、顏色以及操作指引標(biāo)題來表明按鈕功能。當(dāng)某一按鈕處于激活狀態(tài)時(shí)，該按鈕會(huì)以呈現(xiàn)一條高亮的淺色細(xì)邊框或是以改變背景的顏色來表示操作響應(yīng)的一種狀態(tài)。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/contact_card_2x.png" alt="" />

用深度來體現(xiàn)層次

iOS 經(jīng)常在不同的層級(jí)上展現(xiàn)內(nèi)容，用以表達(dá)分組和位置，幫助用戶了解屏幕上的對(duì)象之間的關(guān)系。

例如，通過使用一個(gè)在主屏幕上方的半透明背景浮層來區(qū)分文件夾和其余部分的內(nèi)容。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/folder_2x.png" alt="" />

如圖所示，備忘錄以不同的層級(jí)展示各個(gè)條目。當(dāng)用戶在使用備忘錄里的某個(gè)條目時(shí)，其他的條目就會(huì)被收起在屏幕下方。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/layered-reminders_2x.png" alt="" />

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/cal_year_2x.png" alt="" />

日歷使用了較深的層級(jí)變換來向用戶提示不同視圖間的層級(jí)和深度關(guān)系。當(dāng)用戶在翻閱年、月、日的時(shí)候，增強(qiáng)的交互動(dòng)畫給用戶一種層級(jí)縱深感。在滾動(dòng)年份視圖時(shí)，用戶可以即時(shí)看到今天的日期或操作其他日歷任務(wù)。

當(dāng)用戶選擇某一月份時(shí)，年視圖放大出現(xiàn)月視圖。而今天的日期仍會(huì)在這個(gè)月視圖上被高亮出來，同時(shí)，年份信息也顯示在左上角的返回按鈕上。這樣一來用戶可以非常清楚地知道自己所處的層級(jí)，也知道是從哪一個(gè)界面跳轉(zhuǎn)而來，如何返回。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/cal_month_2x.png" alt="" />

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/cal_day_2x.png" alt="" />

用戶選擇一個(gè)日期時(shí)也會(huì)出現(xiàn)類似從年過度到月的動(dòng)畫：月份視圖從所選位置被分開，將當(dāng)前的周日期推向屏幕頂端并翻轉(zhuǎn)出以小時(shí)為單位的當(dāng)天時(shí)間視圖。這些動(dòng)畫加強(qiáng)了日歷上年月日之間的層次關(guān)系。