2017-8-16 用心設(shè)計
如果您想訂閱本博客內(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)容競爭,除非是幫助用戶去理解潛在功能的作用
蘋果選擇了使用「字體排?。═ypography)」方式去解決這個問題。
在去年的時候 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è)計( paul-jarrel.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://paul-jarrel.com