北京時間6月6日凌晨1點，蘋果在加州圣何塞McEnery(麥克恩利)會議中心召開了第28屆WWDC 2017全球開發(fā)者大會。
此次大會發(fā)布了一系列硬件新品，包括Macbook、Macbook Pro、iMac、iMac Pro和iPad Pro等。此外，大會還公布了最引人關(guān)注的macOS High Sierra和iOS 11，由于它們尚未正式發(fā)布，須等到秋季新品發(fā)布會時才揭曉，因此現(xiàn)在我們只能在官網(wǎng)上看到一些細枝末節(jié)——但我們還是能從中捕捉到一些重要信息，那就是蘋果主導的未來的設(shè)計趨勢。
蘋果設(shè)計向來都是設(shè)計趨勢的風向標，從最早的擬物化設(shè)計到今天的扁平化設(shè)計，從面形圖標到線框圖標，我們始終踏著巨人的腳步向前邁進。
今天，B哥就帶領(lǐng)大家從iOS 11中對未來扁平化設(shè)計趨勢作出預測，它也許正在發(fā)生著。
為什么這樣說?因為早在兩個月以前，在我的《進階版零基礎(chǔ)學UI》(出版中，預計9月發(fā)售，和蘋果秋季新品發(fā)布會差不多時間)一書中就對扁平化設(shè)計模式進行了整理和概括，其中就包括了本篇我所要講的扁平化設(shè)計趨勢，許多App都已經(jīng)開始了這些設(shè)計風格。
一起來看看吧。
-
我們都知道，自iOS 7開始，蘋果就規(guī)范了2px的線框圖標，這樣的圖標精致輕巧，具有一致的設(shè)計語言——2px線框。細心的設(shè)計師可能發(fā)現(xiàn)，在iOS 10中，系統(tǒng)音樂等應(yīng)用放棄了線框圖標設(shè)計，而是一種輕量化的面形圖標，帶有較圓潤的外觀，更加有親和力，我們暫且稱之為面形2.0圖標。在標簽欄上，線形圖標的選中態(tài)為背景填充樣式，而在最新的iOS 11中選中態(tài)和非選中態(tài)只有顏色上的區(qū)分。
2px線框圖標
2.0面形圖標
這樣的改變在未來的iOS 11中被延伸到更多應(yīng)用，例如系統(tǒng)照片應(yīng)用和全新改版的App Store，以及其他應(yīng)用。
-
在iOS中，控制面板等控件采用了不通欄的大圓角卡片設(shè)計，它不像Material design的小圓角卡片那樣呆板，大圓角讓iOS的視覺更輕快。而在應(yīng)用內(nèi)，則采用了通欄的卡片設(shè)計。在iOS 11中，卡片化的設(shè)計越來越多地出現(xiàn)在圖文排版中。
-
哈哈我模仿了蘋果風格的標題。大投影，或是微投影，是指輕微的、若有似無的投影，它不易被立刻察覺到，因為不會給人厚重的寫實感，反而增加了設(shè)計元素的深度，更好地表現(xiàn)了扁平化操作層級。在iOS 11全新的App Store中就使用了大投影的卡片設(shè)計，它令設(shè)計元素更加獨立醒目，極好地抓住用戶的注意力。
36Kr和最新改版的天貓也都采用了大投影的卡片設(shè)計，還有DAKA也是。其實，這種設(shè)計風格很早就在Dirbbble上流行開來。
-
設(shè)計元素和元素之間保持足夠的間距，可以減少用來區(qū)分層級關(guān)系的不必要裝飾元素，例如分割線、邊框等，利用元素的排版、文本的對比和色彩的搭配建立一種更加簡單的設(shè)計風格。大間距的設(shè)計能讓界面具有呼吸感，大量的留白可以增加或減少元素的易見性，元素周圍的間距越大，元素和元素之間的獨立性就越強，每一個元素就越顯得醒目突出，有助于用戶把視覺聚焦在內(nèi)容本身。
Airbnb是極佳的范例，它采用了一種既不是列表設(shè)計也不是卡片設(shè)計的極簡設(shè)計，大標題文本包含一組帶有圖片和描述的元素，組元素和組元素之間保持較大的間距，既保證了它們互不干擾，又不會令界面看上去顯得松散，因而帶給用戶非常輕松的瀏覽體驗。
-
iOS 10系統(tǒng)音樂應(yīng)用的粗標題肯定被設(shè)計師們吐槽過，那猶如大字報的粗黑標題著實醒目。在扁平化設(shè)計中，文字排版影響著信息層級展示的清晰與否，通過文字的字號、字重、顏色等的對比去建立清晰的信息層級，而不用太多的裝飾元素。
同樣的，Airbnb也采用了粗標題設(shè)計。
粗標題在iOS 11中重新優(yōu)化并大量使用，甚至我們從蘋果官網(wǎng)設(shè)計中也能看出這一設(shè)計風格將成為蘋果的重頭戲，它所有的標題都從以前的纖細字體變成厚重的粗體。
以上，就是通過iOS 11目前的信息所能窺探出來的關(guān)于未來扁平化設(shè)計趨勢的一些粗陋的看法，如有說錯，還請指正。
其實，如果你熟悉Material design，就會發(fā)現(xiàn)iOS和Android在設(shè)計上慢慢地靠攏，iOS繼續(xù)保持著輕量化的設(shè)計并不斷改善，而Android固守著材質(zhì)化設(shè)計語言不放，不用站隊爭論孰好孰壞，我們身為設(shè)計師應(yīng)積極地吸取它們的優(yōu)勢，創(chuàng)作出更多優(yōu)秀的設(shè)計作品。
以上就是上海APP開發(fā)——海淘科技為你整理的《從iOS 11看頁面扁平化設(shè)計趨勢》全部內(nèi)容。如果想要觀看網(wǎng)站建設(shè)案例：移動端H5制作案例，以及其他精彩的企業(yè)自媒體運營可直接點擊查看。
