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

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

我們通過「標(biāo)識系統(tǒng)」在街道，機(jī)場，停車場這些場所進(jìn)行方向和位置的識別，這種導(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è)問題。

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

既要能夠起到「Wayfinding」的作用，同時(shí)還需要遵循 iOS 中的 2 個(gè)設(shè)計(jì)原則：

1. 內(nèi)容凸顯的第一原則
2. UI元素不與內(nèi)容競爭，除非是幫助用戶去理解潛在功能的作用

蘋果選擇了使用「字體排?。═ypogrphy）」方式去解決這個(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ì)升級。

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è)建議：

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

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

建議2：內(nèi)容豐富的 App 中使用

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

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

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

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

時(shí)鐘（Clock）App 是一個(gè)不適合使用的案例，每一個(gè)標(biāo)簽頁的界面都符合當(dāng)前功能的界面，用戶可以快速分辨出來，若使用「大標(biāo)題」導(dǎo)航，會讓大標(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ì)師推薦通過「重新組織字體字號」進(jìn)行提升層次美，可以參考以下 2 種方式：

方式1：利用「先后位置」建立層次

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

方式2：利用「顏色/字號/字重」建立層次

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

在 iOS 11 中提升層次的案例：

（1）照片（Photo） App

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

（2）日歷（Calendar） App

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

（3）天氣（Weather） App

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

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

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

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

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

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

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

從「設(shè)計(jì)樣式」到「設(shè)計(jì)理念」

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

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

1. 發(fā)現(xiàn) iOS 中存在位置不清晰的問題
2. 找到建筑中「Wayfinding」的概念
3. 找到「字體排印」的方式進(jìn)行融合，并且遵守已有的設(shè)計(jì)原則
4. 在 Apple Music 中做實(shí)驗(yàn)并且驗(yàn)證有效果
5. 制定了設(shè)計(jì)方向（大標(biāo)題，文字層次，對比）
6. 落地并打磨設(shè)計(jì)

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

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

以上就是關(guān)于 iOS 11 的設(shè)計(jì)理念的一些整理。

注：圖片引用至 WWDC 官方文檔，部分稍作修改。

Session 810：What’s New in iOS 11
https://developer.apple.com/videos/play/wwdc2017/810#

作者：icojump

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@餓了么UED，作者@icojump

題圖來自 Pexels，基于 CC0 協(xié)議