今天開個新坑。其實老早就想做這事兒了。記得前一兩年，蘋果官方還會在開發者中心提供中文的HIG(Human Interface Guideline)，後來給沒了；網上能夠找到的中文版本不知是官方還是同行的自發翻譯，總之要看最新的內容還是需要拿來官方的英文文件，估計多數朋友也是這樣的。

那麼就趁著iOS 7剛剛釋出測試版本的時機，開始做這件事吧。之前一週裡，到處都在傳閱官方釋出的新版設計文件，越來越多的人在自己的裝置裡安裝了測試版本，可見大家的關注程度；所以說我愛這一行呢，有點大事小情的大家都能在第一時間反應起來。關於系統本身，譭譽參半吧，東西都擺在那裡，建議自己玩玩看；我個人來說，只是覺得視覺風格太娘了；又能怎樣呢，反正看看如今的世界，哪裡不是漫山遍野的一派娘炮。扯遠了。第一篇走起吧；先做著，回頭整理出框架，也和《

重要：這是針對於正在開發中的API或技術的預備文件(預釋出版本)。雖然該文件在技術精確度上經過了嚴格的稽核，但並非最終版本，僅供蘋果開發者計劃的註冊會員使用。蘋果提供這份機要文件的目的，是幫助你按照文中描述的方式對技術的選擇及介面的設計開發進行規劃。這些資訊有可能發生變化，屆時，你的設計開發方式需要基於最終版本的作業系統及文件進行相應的調整和測試。該文件或許會隨著API或相關技術在未來的發展而進行更新。

譯文最後更新時間：2013-06-15

iOS7涵蓋了以下3個方面的設計主題思想：

• 依從：UI要幫助使用者對內容進行理解和互動，但絕不能與內容產生競爭關係。
• 清晰：任何字號的文字都要清楚易讀，圖示要精細且含義明確，裝飾性元素要少而精，且使用得當；聚焦於功能性的實現，並以此激發設計的進行。
• 縱深：視覺外觀的層次以及逼真的動畫效果可以傳達出介面的活力，使介面更容易被理解，並提升使用者的愉悅度。

天氣應用，左圖為iOS7，右圖為iOS6。

無論你是在重新設計一款已有應用，還是在建立新產品，請考慮按照蘋果官方重新設計內建應用的方式來進行你的工作：

• 首先，剝離所有的UI元素，使應用的核心功能呈現出來，並重新確認它們的相關性。
• 然後，使用iOS7的設計主題去重新構建UI與使用者體驗。
• 自始至終，要做好挑戰傳統慣例、質疑各種臆測的準備；將注意力聚焦在內容和功能上，以此來推動每一個設計決策的制定。

依從於內容

雖然明快而漂亮的UI以及流暢的動畫效果是iOS7當中的體驗亮點，但內容才是其真正的核心。

下面這些方法將確保你的設計能夠提升介面的功能性，並使其更好的依從於內容。

充分利用全屏空間

斟酌嵌入式結構及視覺化的介面框架的用法，考慮能否將內容直接擴充套件至螢幕邊緣。天氣應用就是個很好的例子：通過漂亮的全屏方式呈現當前的天氣情況，使用者能夠立即發現最重要的資訊，而且每小時的氣象資料也有充分的空間得以展示。

慎用擬物化的視覺元素

浮雕效果、漸變、陰影，這類視覺表現形式有時會使UI元素過於沉重，進而在視覺上喧賓奪主，壓倒內容。要聚焦於內容，讓UI扮演輔助支援型的角色。

讓半透明的視覺元素透露其背後的內容

半透明的視覺形式可以體現出當前操作物件周圍的環境背景，使使用者知道有更多的內容可用。

提供清晰的視覺效果

提供清晰的視效，這是確保使內容處於核心地位的又一種方式。下面這些方法可以使最重要的內容及功能清晰易讀、便於操作。

充分運用留白

留白可以使重要的內容及功能更加突出。同時，留白還可以傳達出一種平靜和穩定的感覺，使應用看上去更加專注和高效。

通過色彩簡化UI

一種關鍵的顏色——例如備忘錄應用中的黃色——可以突出重要資訊，並巧妙的暗示出元素的可互動性。同時，它也可以為應用帶來具有一致性的視覺主題。

使用系統字型，確保清晰易讀

iOS7中的系統字型可以自動調整字間距及行高，使文字內容更加易讀，在使用者所選擇的任何字號下都表現良好。

擁抱無邊框的按鈕

與以往依靠浮雕效果暗示元素可互動性的方式不同，在iOS7中，我們可以選取含義準確的標題文字，搭配一種關鍵色或系統色，來表達這是一個可互動的UI元素。新的通訊錄應用使用了系統提供的藍色來告訴使用者，螢幕上的多數內容是可以對互動動作做出響應的。

利用縱深進行溝通

iOS7會在不同的層面上顯示內容，以體現內容間的層級和位置關係，這有利於使用者理解螢幕上各種元素之間的關聯。

資料夾在視覺表現形式上採用了半透明背景，並懸浮於主螢幕之上，這能使其中所包含的內容與螢幕上的其他元素得以區分開來。

當用戶在使用提醒事項應用中的某個條目時，其餘的條目都會排列在介面底部的不同層面上。要檢視所有條目，使用者需要展開這些層面，如下圖所示。

新的日曆應用當中使用了增強的動畫過渡效果，可以在使用者切換年、月、日檢視模式時帶來到明顯的縱深感。在下圖所示的年份滾動檢視中，使用者可以立刻看到今天的日期，並能夠執行其他的相關操作。

當用戶選擇了某個月份後，年份檢視會自動放大擴充套件，而月份檢視則會從它的後面呈現出來。

類似的動畫效果還會發生在月份與日期的切換當中：月份檢視向外擴充套件，呈現出日期檢視。