今天開個新坑。其實老早就想做這事兒了。記得前一兩年,蘋果官方還會在開發者中心提供中文的HIG(Human Interface Guideline),后來給沒了;網上能夠找到的中文版本不知是官方還是同行的自發翻譯,總之要看最新的內容還是需要拿來官方的英文文檔,估計多數朋友也是這樣的。
那么就趁著iOS 7剛剛發布測試版本的時機,開始做這件事吧。之前一周里,到處都在傳閱官方發布的新版設計文檔,越來越多的人在自己的設備里安裝了測試版本,可見大家的關注程度;所以說我愛這一行呢,有點大事小情的大家都能在第一時間反應起來。關于系統本身,毀譽參半吧,東西都擺在那里,建議自己玩玩看;我個人來說,只是覺得視覺風格太娘了;又能怎樣呢,反正看看如今的世界,哪里不是漫山遍野的一派娘炮。扯遠了。第一篇走起吧;先做著,回頭整理出框架,也和《iOS Wow Factor全書自發編譯》一樣扔到側邊欄去做個固定的欄目好了。
重要:這是針對于正在開發中的API或技術的預備文檔(預發布版本)。雖然該文檔在技術精確度上經過了嚴格的審核,但并非最終版本,僅供蘋果開發者計劃的注冊會員使用。蘋果提供這份機要文檔的目的,是幫助你按照文中描述的方式對技術的選擇及界面的設計開發進行規劃。這些信息有可能發生變化,屆時,你的設計開發方式需要基于最終版本的操作系統及文檔進行相應的調整和測試。該文檔或許會隨著API或相關技術在未來的發展而進行更新。
譯文最后更新時間:2013-06-15
iOS7涵蓋了以下3個方面的設計主題思想:
- 依從:UI要幫助用戶對內容進行理解和互動,但絕不能與內容產生競爭關系。
- 清晰:任何字號的文字都要清楚易讀,圖標要精細且含義明確,裝飾性元素要少而精,且使用得當;聚焦于功能性的實現,并以此激發設計的進行。
- 縱深:視覺外觀的層次以及逼真的動畫效果可以傳達出界面的活力,使界面更容易被理解,并提升用戶的愉悅度。
天氣應用,左圖為iOS7,右圖為iOS6。
無論你是在重新設計一款已有應用,還是在創建新產品,請考慮按照蘋果官方重新設計內置應用的方式來進行你的工作:
- 首先,剝離所有的UI元素,使應用的核心功能呈現出來,并重新確認它們的相關性。
- 然后,使用iOS7的設計主題去重新構建UI與用戶體驗。
- 自始至終,要做好挑戰傳統慣例、質疑各種臆測的準備;將注意力聚焦在內容和功能上,以此來推動每一個設計決策的制定。
依從于內容
雖然明快而漂亮的UI以及流暢的動畫效果是iOS7當中的體驗亮點,但內容才是其真正的核心。
下面這些方法將確保你的設計能夠提升界面的功能性,并使其更好的依從于內容。
充分利用全屏空間
斟酌嵌入式結構及可視化的界面框架的用法,考慮能否將內容直接擴展至屏幕邊緣。天氣應用就是個很好的例子:通過漂亮的全屏方式呈現當前的天氣情況,用戶能夠立即發現最重要的信息,而且每小時的氣象數據也有充分的空間得以展示。
慎用擬物化的視覺元素
浮雕效果、漸變、陰影,這類視覺表現形式有時會使UI元素過于沉重,進而在視覺上喧賓奪主,壓倒內容。要聚焦于內容,讓UI扮演輔助支援型的角色。
讓半透明的視覺元素透露其背后的內容
半透明的視覺形式可以體現出當前操作對象周圍的環境背景,使用戶知道有更多的內容可用。
提供清晰的視覺效果
提供清晰的視效,這是確保使內容處于核心地位的又一種方式。下面這些方法可以使最重要的內容及功能清晰易讀、便于操作。
充分運用留白
留白可以使重要的內容及功能更加突出。同時,留白還可以傳達出一種平靜和穩定的感覺,使應用看上去更加專注和高效。
通過色彩簡化UI
一種關鍵的顏色——例如備忘錄應用中的黃色——可以突出重要信息,并巧妙的暗示出元素的可交互性。同時,它也可以為應用帶來具有一致性的視覺主題。
使用系統字體,確保清晰易讀
iOS7中的系統字體可以自動調整字間距及行高,使文字內容更加易讀,在用戶所選擇的任何字號下都表現良好。
擁抱無邊框的按鈕
與以往依靠浮雕效果暗示元素可交互性的方式不同,在iOS7中,我們可以選取含義準確的標題文字,搭配一種關鍵色或系統色,來表達這是一個可交互的UI元素。新的通訊錄應用使用了系統提供的藍色來告訴用戶,屏幕上的多數內容是可以對交互動作做出響應的。
利用縱深進行溝通
iOS7會在不同的層面上顯示內容,以體現內容間的層級和位置關系,這有利于用戶理解屏幕上各種元素之間的關聯。
文件夾在視覺表現形式上采用了半透明背景,并懸浮于主屏幕之上,這能使其中所包含的內容與屏幕上的其他元素得以區分開來。
當用戶在使用提醒事項應用中的某個條目時,其余的條目都會排列在界面底部的不同層面上。要查看所有條目,用戶需要展開這些層面,如下圖所示。
新的日歷應用當中使用了增強的動畫過渡效果,可以在用戶切換年、月、日視圖模式時帶來到明顯的縱深感。在下圖所示的年份滾動視圖中,用戶可以立刻看到今天的日期,并能夠執行其他的相關操作。
當用戶選擇了某個月份后,年份視圖會自動放大擴展,而月份視圖則會從它的后面呈現出來。
類似的動畫效果還會發生在月份與日期的切換當中:月份視圖向外擴展,呈現出日期視圖。