iOS7系統棄用了諸如皮革、木質一類的偽3D擬真效果,取而代之的是更加簡潔輕量的設計路線,其中文字排版成了重頭戲,另外在某些方面也受到了扁平化設計的影響。在iOS7的這些變化當中,哪些與設計師們最為相關?蘋果公司在轉變了自身的設計思維之后,又會希望這些應用設計者們將哪些新東西體現到自己的應用當中?
1.三大設計主題
依從:UI要幫助用戶對內容進行理解和互動,但絕不能與內容產生競爭關系。
清晰:任何字號的文字都要清楚易讀,圖標要精細且含義明確,裝飾性元素要少而精,且使用得當;聚焦于功能性的實現,并以此激發設計的進行。
縱深:視覺外觀的層次以及逼真的動畫效果可以傳達出界面的活力,使界面更容易被理解,并提升用戶的愉悅度。
可以看看蘋果是怎樣在iOS7內置的日歷應用當中貫徹這一點的。新的日歷應用在界面上極大的簡化了,去除了一切不必要的設計元素,并使用了干干凈凈的白色背景,完全以內容為中心。
2.動態字體
iOS7使用了全新的動態字體系統,以改善文字內容在任何字號下的易讀性。 動態字體可以自動調整任何字號下的文字粗細、字間距和行距。它同時支持字體風格,使你能夠為內容標題、正文和按鈕當中的文字設置不同的樣式。
新的天氣應用為我們展示了新的字體以及清晰的文字排版在使用了動態背景的全屏視圖當中的表現。
3.導航元素的半透明化
iOS7當中最重要的設計變化之一就是在界面中引入了透明與半透明化。
狀態欄(status bar)能夠以完全透明的形式呈現,導航欄(navigation bar)、標簽欄(tab bar)、工具欄(tool bar)和其他一些控件也采用了半透明化的處理方式。因此,你可能需要調整內容視圖在縱向上的實際尺寸,以便在半透明控件的下方將內容上下文隱約地展示給用戶。
另外你也要考慮到全新的控制中心(control center),用戶可以在這里快速訪問到一些常用功能,例如開啟藍牙、調整屏幕亮度等等。控制中心是一種模態視圖(modal view),它會隨著用戶的手勢從屏幕底部向上展開,并覆蓋在系統界面或當前應用界面之上;用戶可以透過其半透明毛玻璃背景看到下方界面中的內容環境。
4.按鈕去掉了邊框
iOS7里的按鈕不再有邊框和背景。這使得按鈕中的標題文字可以使用相對大一些的字號,但對于那些經過自定義設計的按鈕來說,你需要重新考慮它們的樣式能否適用于新的系統風格。
蘋果在iOS7當中加入了右滑切換界面的手勢。切換過程中,導航欄會展現出精巧的界面覆蓋疊加效果。如果你為導航欄中的按鈕使用了自定義設計的背景圖片,那么現在你需要創建一個蒙版圖片來確保這種動畫效果的實現。詳見iOS7 UI過渡指南之Bars and Bar Buttons一節。
iOS7的標簽欄和工具欄也有了全新的外觀,對于其中的圖標,你可能需要重新繪制一套更簡潔、更線條化的圖片了。你可以在iOS7自帶的短信應用當中看到最官方的按鈕使用示例,包括導航欄中的新消息按鈕、返回到消息列表的按鈕、聯系人按鈕、發送按鈕等。
5.屏幕上更多的可用空間
透明的狀態欄,移除了左右邊距和邊框的界面,這些新風格體現出蘋果正在鼓勵設計師們將界面中的內容擴展至屏幕邊緣。
例如系統鍵盤一類的模態視圖都采用了半透明的風格,使得它們底部的內容元素可以被用戶感知到,即使模糊不清,也可以傳遞出縱深的含義。系統內置的天氣、照片和相機應用都非常好的展示了怎樣使用全屏風格展示內容。
6.向擬物化說不
根據“依從”原則所提倡的,蘋果在設計規范中進一步強烈建議設計師們“避免仿真和擬物化的視覺指引形式”。用戶界面應該是一種圍繞著內容而存在的支持結構,不要喧賓奪主。
簡單的說,這意味著蘋果不再愿意看到3D質感的按鈕,以及漸變、投影等其他擬物化的設計元素,因為這樣的元素會導致“UI元素過重,以至于壓倒內容”。雖然交互元素要輕量化,但44像素的最小點擊區域規則依然有效,你不能寄希望于用戶能夠精準的點擊到小于44像素見方的界面元素。
關于移除擬物化風格的設計方式,可以參考iOS7內置的Game Center、日歷和Podcast應用。
7.通過深度傳遞層次
iOS7最吸引人的設計之一就是系統界面當中由加速計驅動的3D效果。隨著設備在物理空間當中的移動,圖標與背景圖片會展示出視差效應。這是iOS7三大設計主題當中的第三點的典型示例:縱深—視覺外觀的層次以及逼真的動畫效果可以傳達出界面的活力,使界面更容易被理解,并提升用戶的愉悅度。
自然,蘋果也希望應用設計師們采用相同的方式,通過半透明及動畫效果來展示界面和元素之間的層級關系。這是應用設計理念的一次重大飛躍,而且隨著iOS7的發布和普及,這些效果很快就會成為用戶期望當中的一部分。
8.從零開始重新設計應用
在iOS7設計規范當中,蘋果建議,在iOS7框架下重新設計應用的最佳方式,就是剝離你已有的界面,將應用的核心功能呈現出來,重新確認它們之間的相關性。
一旦你確認好功能方面的核心要素,就需要通過iOS7的設計主題將界面和交互模式重新構建起來。舉個簡單的例子,蘋果的指南針應用采用了最小化和功能優先的設計方式,通過重新設計過的、更注重細節的形式來展示關鍵信息。
9.大量的留白
iOS7的應用界面通過大量的呼吸空間來確保可讀性和易用性。在官方的設計規范中,蘋果明確指出,他們希望設計師們通過留白傳達出平靜和穩定的感覺,使應用看上去更加專注和高效。不要將所有東西都緊緊的塞到界面當中,通過留白讓你的內容呼吸起來。你可以通過App Store等界面來看看蘋果自己是怎樣做的。
10.啟動畫面out了
最后一點從技術角度上講不是新東西了,但在iOS7設計規范中,蘋果再次提醒設計師們,要避免使用那些無意義的、主要用來展示品牌信息的啟動畫面,或是任何妨礙用戶使用應用完成任務的界面。我們的目的是要用戶盡可能快速的獲取內容或使用功能,所以除非你有充分的理由,否則不要使用歡迎界面。