iOS 設計包含了以下幾個關鍵點
http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/weather_app_7_2x.png" alt="" />
無論你正在重新設計一個現(xiàn)有的 App 或是開發(fā)一個新 App,在設計的過程中請嘗試考慮下列方法流程:
首先,透過 UI 元素去考慮應用的核心功能,思考如何強調(diào)其相關性。
其次,直接使用 iOS 的系統(tǒng)主題來設計應用的 UI 和交互,在此基礎上細致地增加細節(jié),但注意避免不必要的修飾,這樣能給用戶統(tǒng)一的視覺感受。
最后,保證你設計的 UI 可以適配各種設備和不同操作模式,這樣在不同場景下用戶都能舒適地享用你的應用。
在整個設計過程中,請時刻準備著推翻一些范例,提出假設問題,并以重點內(nèi)容和功能(為目標)來驅(qū)動每個細節(jié)設計。
雖然明快、美觀的 UI 和流暢的動態(tài)效果是 iOS 體驗的亮點,但內(nèi)容始終是 iOS 的核心。
這里有一些方法,確保你的設計能夠提升應用的功能體驗并時刻關注內(nèi)容本身。
充分利用整個屏幕。 天氣應用是一個很棒的例子:漂亮的界面充滿全屏,為用戶呈現(xiàn)所在地當前天氣情況這一最重要的信息的同時,也留出了呈現(xiàn)每個時段氣溫數(shù)據(jù)的空間。
http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/weather_focus_2x.png" alt="" />
慎重使用擬物化設計。斜面板、漸變和陰影有時會讓 UI 元素顯得很厚重,分散了用戶對內(nèi)容的注意力。因此設計時,應當以內(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="" />
嘗試使用半透明底板。 半透明的控件——比如控制中心——關聯(lián)了使用場景,它幫助用戶看到了更多可用的內(nèi)容,并起到了短暫的提示作用。在 iOS 中,透明的控件只讓它遮擋住的地方變得模糊——使得視覺上像蒙著一層米紙一樣——但屏幕剩余的部分并沒有變得模糊。
保證清晰度是另一個確保應用始終以內(nèi)容為核心的方法。以下幾種方法可以使得最重要的內(nèi)容和功能清晰可見,易于交互。
http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/use_white_space_2x.png" alt="" />
使用大量留白。留白可以讓重要內(nèi)容和功能顯得更加醒目,更加易于理解。此外,留白可以傳達一種平靜和安寧的視覺感受,使你的應用看起來更加聚焦和高效。
讓顏色簡化 UI。一個主題色——如在記事本中使用的黃色——讓重要區(qū)域更加醒目并巧妙地突顯了整個 App 的交互性。這同時也給了一個應用一個統(tǒng)一的視覺主題。iOS 的內(nèi)置應用多使用家族化的系統(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)字體確保易讀性。為了保證用戶在閱讀時,無論使用何種大小的字號的文本都清晰易讀,iOS 的系統(tǒng)字體能夠自動調(diào)整行間距和行的高度。無論你是使用系統(tǒng)字體或是自定義字體,都請務必使用可以自動調(diào)整的動態(tài)型,這樣在用戶選擇不同字號時,你的 App 都能做出相應的應對和調(diào)整。
使用無邊框的按鈕。默認情況下,所有 bar 上的按鈕都是無邊框的。在內(nèi)容區(qū)域,無邊框按鈕以文案、顏色以及操作指引標題來表明按鈕功能。當某一按鈕處于激活狀態(tài)時,該按鈕會以呈現(xiàn)一條高亮的淺色細邊框或是以改變背景的顏色來表示操作響應的一種狀態(tài)。
http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/contact_card_2x.png" alt="" />
iOS 經(jīng)常在不同的層級上展現(xiàn)內(nèi)容,用以表達分組和位置,幫助用戶了解屏幕上的對象之間的關系。
例如,通過使用一個在主屏幕上方的半透明背景浮層來區(qū)分文件夾和其余部分的內(nèi)容。
http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/folder_2x.png" alt="" />
如圖所示,備忘錄以不同的層級展示各個條目。當用戶在使用備忘錄里的某個條目時,其他的條目就會被收起在屏幕下方。
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="" />
日歷使用了較深的層級變換來向用戶提示不同視圖間的層級和深度關系。當用戶在翻閱年、月、日的時候,增強的交互動畫給用戶一種層級縱深感。在滾動年份視圖時,用戶可以即時看到今天的日期或操作其他日歷任務。
當用戶選擇某一月份時,年視圖放大出現(xià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="" />
用戶選擇一個日期時也會出現(xiàn)類似從年過度到月的動畫:月份視圖從所選位置被分開,將當前的周日期推向屏幕頂端并翻轉出以小時為單位的當天時間視圖。這些動畫加強了日歷上年月日之間的層次關系。