從iOS 11看未來扁平化設計趨勢

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

 

 

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

 

蘋果設計向來都是設計趨勢的風向標，從最早的擬物化設計到今天的扁平化設計，從面形圖標到線框圖標，我們始終踏著巨人的腳步向前邁進。

 

 

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

為什么這樣說？因為早在兩個月以前，在我的《進階版零基礎學UI》（出版中，預計9月發(fā)售，和蘋果秋季新品發(fā)布會差不多時間）一書中就對扁平化設計模式進行了整理和概括，其中就包括了本篇我所要講的扁平化設計趨勢，許多App都已經(jīng)開始了這些設計風格。

 

一起來看看吧。

 

1.面形2.0圖標替代2px線形圖標

 

 

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

 

2px線框圖標

 

 

2.0面形圖標

 

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

 

 

2.卡片化更進一步

 

 

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

 

 

3.大投影，比大更大

 

 

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

 

 

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

 

 

4.留白

 

 

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

 

 

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

 

 

5.粗標題，粗了又粗

 

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

 

 

同樣的，Airbnb也采用了粗標題設計。

 

 

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

 

 

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

 

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

 

-

 

昨晚熬夜看完發(fā)布會便開始寫這篇文章，一夜未睡。因為今天上午要去桂林，待會還要趕飛機，所以寫得比較倉促，見諒～

文章作者：tiah