如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

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

Wayfinding / 尋路 / 空間導(dǎo)引

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

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

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

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

內(nèi)容凸顯的第一原則

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

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

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

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

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

iOS 11 中主要的 3 個設(shè)計大方向

方向1：大標(biāo)題導(dǎo)航欄

使用「大標(biāo)題」導(dǎo)航欄能清晰表現(xiàn)當(dāng)前的位置，也是這次 iOS 11 讓人印象最深的設(shè)計變化，如果想把這個風(fēng)格沿用到自己的 App 中，可以參考這 3 個建議：

頂層是標(biāo)簽欄結(jié)構(gòu)的 App

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

內(nèi)容豐富的 App 中使用

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

在頁面內(nèi)容&布局類似的 App 中使用

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

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

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

方向2：提升文字設(shè)計的層次

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

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

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

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

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

在 iOS11 中提升層次的案例

照片（Photo） App

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

日歷（Calendar） App

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

天氣（Weather） App

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

方向3：增強對比效果

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

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

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

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

△  橫屏狀態(tài)下，把標(biāo)簽文字移動到了圖標(biāo)右側(cè)，縮短了標(biāo)簽欄高度，和導(dǎo)航欄和工具欄的高度更匹配。

從「設(shè)計理念」到「設(shè)計趨勢」

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

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

發(fā)現(xiàn) iOS 中存在位置不清晰的問題

找到建筑中「Wayfinding」的概念

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

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

制定了設(shè)計方向（大標(biāo)題，文字層次，對比）

落地并打磨設(shè)計

「大標(biāo)題」的設(shè)計樣式并不是憑空而造的，基于發(fā)現(xiàn)一個問題和提出一個解決思路和一個全局的設(shè)計理念而得來的，特別是對于互聯(lián)網(wǎng)產(chǎn)品的設(shè)計，這點尤為重要。

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

藍藍設(shè)計( m.hengshangtqd.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)