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

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

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

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

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

用字體排印（Typography）的方式進(jìn)行落地

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

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

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

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

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

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

驗(yàn)證下來效果還不錯(cuò)，于是便有了 iOS 11 的設(shè)計(jì)升級(jí)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

利用「顏色/字號(hào)/字重」建立層次

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

在 iOS11 中提升層次的案例

照片（Photo） App

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

日歷（Calendar） App

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

天氣（Weather） App

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

方向3：增強(qiáng)對(duì)比效果

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

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

△  搜索框中文字字號(hào)增加，增加高度

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

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

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

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

我們回顧下蘋果設(shè)計(jì)團(tuán)隊(duì)設(shè)計(jì) iOS 11 過程：

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

找到建筑中「Wayfinding」的概念

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

在 Apple Music 中做實(shí)驗(yàn)并且驗(yàn)證有效果

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

落地并打磨設(shè)計(jì)

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

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

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