如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

之前匯總了 「iOS 11 最全面的設計通訊」相關的設計改動，接著分享下「iOS 11 設計理念和 3 個設計方向」，內容來自蘋果 2017 WWDC 的 Session 810，希望能給大家使用和理解 iOS 的設計思路帶來啟發。

Wayfinding / 尋路 / 空間導引

我們通過「標識系統」在街道，機場，停車場這些場所進行方向和位置的識別，這種導引指示系統被稱為「Wayfinding」，詞語來自「建筑領域」，由 Kevin Lynch 在 1960 年提出，中文名是「尋路」或「 空間導引」。

iOS 經過長期的發展，系統已經變得越來越復雜，加上部分 App 也同樣面臨類似的問題，蘋果設計團隊希望用戶在使用 iOS 過程中也能像物理世界中那樣有清晰的導引，所以把「Wayfinding」概念引入到設計中，試圖去解決這個問題。

用字體排印（Typography）的方式進行落地

既要能夠起到「Wayfinding」的作用，同時還需要遵循蘋果設計團隊的 2 個設計原則：

內容凸顯的第一原則

UI元素不與內容競爭，除非是幫助用戶去理解潛在功能的作用

蘋果選擇了使用「字體排印（Typography）」方式去解決這個問題。

在去年的時候 Apple Music 有一次改版，加入了「大標題」導航（見下圖），這次改版是被蘋果拿來做實驗用的，因為 Apple Music 是一個內容型 App ，適合用來驗證新設計是不是能提供明確位置和清晰路徑。

除了驗證「大標題」外，許多文字也增加字重，方便在幾個「同類型信息」中分辨，和切換「搜索」和「瀏覽」 2 個標簽時也快速感知位置。

驗證下來效果還不錯，于是便有了 iOS 11 的設計升級。

iOS 11 中主要的 3 個設計大方向

方向1：大標題導航欄

使用「大標題」導航欄能清晰表現當前的位置，也是這次 iOS 11 讓人印象最深的設計變化，如果想把這個風格沿用到自己的 App 中，可以參考這 3 個建議：

頂層是標簽欄結構的 App

一般有標簽欄的 App 內容會相應更多一些，使用「大標題」導航讓用戶在各個標簽欄切換中能夠快速查看到自己的位置，當用戶滑動屏幕時看到「大標題」導航也可以意識到回到了頭部。

內容豐富的 App 中使用

蘋果設計師們在內容豐富的 Apple Music 驗證了「大標題」的效果，所以對于內容豐富的 App 自然也是適用。內容豐富 App 有大量的頁面和各種深度的結構層級，用戶會沉浸其中，這時候「大標題」導航就可以起到導引作用。

在頁面內容&布局類似的 App 中使用

內容&布局相似的 App 一眼很難快速分辨，「大標題」導航可以起到明顯的指示作用，電話（Phone）App 里各個標簽欄的內容都是類似的信息，很適合使用「大標題」導航。

不建議：不適合用在內容功能互相平行獨立的App

時鐘（Clock）App 是一個不適合使用的案例，每一個標簽頁的界面都符合當前功能的界面，用戶可以快速分辨出來，若使用「大標題」導航，會讓大標題強過功能表現，違背蘋果的設計原則「UI元素不與內容競爭」，影響可用性，所以不適合。

方向2：提升文字設計的層次

清晰的層次可以幫助用戶減輕認知負擔，降低尋找信息時的腦力消耗，同時讓主次內容看起來更加協調整體，蘋果設計師推薦通過「重新組織字體字號」進行提升層次美，可以參考以下 2 種方式：

利用「先后位置」建立層次

位置可以表現重要性，像下圖中的 Lable1 和 Lable2 的位置，大部分人看到時都會推斷 Label1 比 Label2 更重要（有些場景也許有例外）。

利用「顏色/字號/字重」建立層次

深顏色 vs 淺顏色，大字號 vs 小字號，粗字重 vs 普通字重，這些在正常情況下都能很容易分辨出哪個 Label 更重要，可以利用這些方法疊加起來，讓元素之間有清晰的層次。

在 iOS11 中提升層次的案例

照片（Photo） App

照片是 App 中最重要的內容，iOS 10 中照片的章節標題與照片對比不清晰，不能凸顯照片，所以在 iOS 11 中，章節標題的主標題字體調大+增加字重，副標題字體調大+用灰色，改動后在下面對比圖中可以看到層次有明顯提升。

日歷（Calendar） App

基礎元素都加強了顏色，月份上用了更大字體+粗字重，在當前正在經歷的內容上用了紅色加強，對比 iOS10 的版本，層次清晰并且對當前場景的處理讓整個 App 的設計更符合邏輯和美觀。

天氣（Weather） App

全局調大了字體大小和間距大小，雖然犧牲了一些高度，但是可讀性上增加了很多，層次更清晰，變得更容易閱讀。

方向3：增強對比效果

隨著「大標題」和「文字層次」的提升，其他元素也要一起去平衡，讓所有元素之間都保證功能實用性和盡可能簡約，以下是改動的一些內容：

△  解鎖界面中填充了按鈕形狀和增大文字字重

△  搜索框中文字字號增加，增加高度

△  標簽欄文字的字重從默認(Regular)到中號(Medium)，對圖標也做了填充和加粗線條。

△  橫屏狀態下，把標簽文字移動到了圖標右側，縮短了標簽欄高度，和導航欄和工具欄的高度更匹配。

從「設計理念」到「設計趨勢」

很多設計師說到「設計趨勢」，會說扁平化，漸變，投影等元素，相信這次 iOS 11 中視覺風格最強烈的「大標題」也會成為一些設計師口中下一個「設計趨勢」。

我們回顧下蘋果設計團隊設計 iOS 11 過程：

發現 iOS 中存在位置不清晰的問題

找到建筑中「Wayfinding」的概念

找到「字體排印」的方式進行融合，并且遵守已有的設計原則

在 Apple Music 中做實驗并且驗證有效果

制定了設計方向（大標題，文字層次，對比）

落地并打磨設計

「大標題」的設計樣式并不是憑空而造的，基于發現一個問題和提出一個解決思路和一個全局的設計理念而得來的，特別是對于互聯網產品的設計，這點尤為重要。

不要成為「設計樣式」的追隨者，要知道什么是合適的。

藍藍設計( www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務