從iOS 11看未來扁平化設(shè)計(jì)趨勢

北京時(shí)間6月6日凌晨1點(diǎn)，蘋果在加州圣何塞McEnery（麥克恩利）會議中心召開了第28屆WWDC 2017全球開發(fā)者大會。

 

 

此次大會發(fā)布了一系列硬件新品，包括Macbook、Macbook Pro、iMac、iMac Pro和iPad Pro等。此外，大會還公布了最引人關(guān)注的macOS High Sierra和iOS 11，由于它們尚未正式發(fā)布，須等到秋季新品發(fā)布會時(shí)才揭曉，因此現(xiàn)在我們只能在官網(wǎng)上看到一些細(xì)枝末節(jié)——但我們還是能從中捕捉到一些重要信息，那就是蘋果主導(dǎo)的未來的設(shè)計(jì)趨勢。

 

蘋果設(shè)計(jì)向來都是設(shè)計(jì)趨勢的風(fēng)向標(biāo)，從最早的擬物化設(shè)計(jì)到今天的扁平化設(shè)計(jì)，從面形圖標(biāo)到線框圖標(biāo)，我們始終踏著巨人的腳步向前邁進(jìn)。

 

 

今天，B哥就帶領(lǐng)大家從iOS 11中對未來扁平化設(shè)計(jì)趨勢作出預(yù)測，它也許正在發(fā)生著。

為什么這樣說？因?yàn)樵缭趦蓚€(gè)月以前，在我的《進(jìn)階版零基礎(chǔ)學(xué)UI》（出版中，預(yù)計(jì)9月發(fā)售，和蘋果秋季新品發(fā)布會差不多時(shí)間）一書中就對扁平化設(shè)計(jì)模式進(jìn)行了整理和概括，其中就包括了本篇我所要講的扁平化設(shè)計(jì)趨勢，許多App都已經(jīng)開始了這些設(shè)計(jì)風(fēng)格。

 

一起來看看吧。

 

1.面形2.0圖標(biāo)替代2px線形圖標(biāo)

 

 

我們都知道，自iOS 7開始，蘋果就規(guī)范了2px的線框圖標(biāo)，這樣的圖標(biāo)精致輕巧，具有一致的設(shè)計(jì)語言——2px線框。細(xì)心的設(shè)計(jì)師可能發(fā)現(xiàn)，在iOS 10中，系統(tǒng)音樂等應(yīng)用放棄了線框圖標(biāo)設(shè)計(jì)，而是一種輕量化的面形圖標(biāo)，帶有較圓潤的外觀，更加有親和力，我們暫且稱之為面形2.0圖標(biāo)。在標(biāo)簽欄上，線形圖標(biāo)的選中態(tài)為背景填充樣式，而在最新的iOS 11中選中態(tài)和非選中態(tài)只有顏色上的區(qū)分。

 

2px線框圖標(biāo)

 

 

2.0面形圖標(biāo)

 

這樣的改變在未來的iOS 11中被延伸到更多應(yīng)用，例如系統(tǒng)照片應(yīng)用和全新改版的App Store，以及其他應(yīng)用。

 

 

2.卡片化更進(jìn)一步

 

 

在iOS中，控制面板等控件采用了不通欄的大圓角卡片設(shè)計(jì)，它不像Material design的小圓角卡片那樣呆板，大圓角讓iOS的視覺更輕快。而在應(yīng)用內(nèi)，則采用了通欄的卡片設(shè)計(jì)。在iOS 11中，卡片化的設(shè)計(jì)越來越多地出現(xiàn)在圖文排版中。

 

 

3.大投影，比大更大

 

 

哈哈我模仿了蘋果風(fēng)格的標(biāo)題。大投影，或是微投影，是指輕微的、若有似無的投影，它不易被立刻察覺到，因?yàn)椴粫o人厚重的寫實(shí)感，反而增加了設(shè)計(jì)元素的深度，更好地表現(xiàn)了扁平化操作層級。在iOS 11全新的App Store中就使用了大投影的卡片設(shè)計(jì)，它令設(shè)計(jì)元素更加獨(dú)立醒目，極好地抓住用戶的注意力。

 

 

36Kr和最新改版的天貓也都采用了大投影的卡片設(shè)計(jì)，還有DAKA也是。其實(shí)，這種設(shè)計(jì)風(fēng)格很早就在Dirbbble上流行開來。

 

 

4.留白

 

 

設(shè)計(jì)元素和元素之間保持足夠的間距，可以減少用來區(qū)分層級關(guān)系的不必要裝飾元素，例如分割線、邊框等，利用元素的排版、文本的對比和色彩的搭配建立一種更加簡單的設(shè)計(jì)風(fēng)格。大間距的設(shè)計(jì)能讓界面具有呼吸感，大量的留白可以增加或減少元素的易見性，元素周圍的間距越大，元素和元素之間的獨(dú)立性就越強(qiáng)，每一個(gè)元素就越顯得醒目突出，有助于用戶把視覺聚焦在內(nèi)容本身。

 

 

Airbnb是極佳的范例，它采用了一種既不是列表設(shè)計(jì)也不是卡片設(shè)計(jì)的極簡設(shè)計(jì)，大標(biāo)題文本包含一組帶有圖片和描述的元素，組元素和組元素之間保持較大的間距，既保證了它們互不干擾，又不會令界面看上去顯得松散，因而帶給用戶非常輕松的瀏覽體驗(yàn)。

 

 

5.粗標(biāo)題，粗了又粗

 

iOS 10系統(tǒng)音樂應(yīng)用的粗標(biāo)題肯定被設(shè)計(jì)師們吐槽過，那猶如大字報(bào)的粗黑標(biāo)題著實(shí)醒目。在扁平化設(shè)計(jì)中，文字排版影響著信息層級展示的清晰與否，通過文字的字號、字重、顏色等的對比去建立清晰的信息層級，而不用太多的裝飾元素。

 

 

同樣的，Airbnb也采用了粗標(biāo)題設(shè)計(jì)。

 

 

粗標(biāo)題在iOS 11中重新優(yōu)化并大量使用，甚至我們從蘋果官網(wǎng)設(shè)計(jì)中也能看出這一設(shè)計(jì)風(fēng)格將成為蘋果的重頭戲，它所有的標(biāo)題都從以前的纖細(xì)字體變成厚重的粗體。

 

 

以上，就是通過iOS 11目前的信息所能窺探出來的關(guān)于未來扁平化設(shè)計(jì)趨勢的一些粗陋的看法，如有說錯(cuò)，還請指正。

 

其實(shí)，如果你熟悉Material design，就會發(fā)現(xiàn)iOS和Android在設(shè)計(jì)上慢慢地靠攏，iOS繼續(xù)保持著輕量化的設(shè)計(jì)并不斷改善，而Android固守著材質(zhì)化設(shè)計(jì)語言不放，不用站隊(duì)爭論孰好孰壞，我們身為設(shè)計(jì)師應(yīng)積極地吸取它們的優(yōu)勢，創(chuàng)作出更多優(yōu)秀的設(shè)計(jì)作品。

 

-

 

昨晚熬夜看完發(fā)布會便開始寫這篇文章，一夜未睡。因?yàn)榻裉焐衔缫ス鹆?，待會還要趕飛機(jī)，所以寫得比較倉促，見諒～

文章作者：tiah