Complexion Reduction - 這種極簡的設計語言為什麼不一定是趨勢（上）

這是一篇谷兜原創的文章。

▍我們想跟大家討論一下近兩年來出現的一種新的設計風格——Complexion Reduction。關於這種特別的設計風格，將會有兩篇文章在谷兜中發布，從Complexion Reduction的形成、典型實例、對產品的影響和我們對此的結論——來討論這種設計趨勢。

▍設計的更多可能性

在討論Complexion Reduction之前，我想跟大家簡單聊聊設計的樂觀性（inherent optimism）。這個概念源於在1966年開始的Anti-Design運動，目的是希望設計能夠給人帶來啟發和思考。Anti-Design警告設計師們避免掉入設計樂觀性的怪圈——即相信只要付出時間和精力去設計，那麼設計就一定是能解決某一個問題或者朝好的方向發展。這種樂觀性忽略了設計過程的系統複雜程度和不確定性。長話短說，在那個轟轟烈烈的設計運動中，先驅者們留下了三個的忠告：

• 它希望設計師重新審視他們的樂觀精神，把盲目樂觀的部分剝離出來；
• 它希望設計師「停下來」思考那些懶得梳理的關係和邏輯，重新尊重系統的複雜度；
• 它希望設計師想像其他「可能性」。『谷兜：關於這裡說到的可能性，推薦閱讀Dunne&Raby夫婦的A/B宣言』

為什麼我想跟大家分享這些看似枯燥的理論呢？回到Complexsion Reduction來，在寫這篇文章之前，我發現對於這種已經出現並在一些優秀的產品之間流行了兩年的設計語言，很難找到一個切入點去討論它——事實上，目前線上可以看到的大部分文章，都出自Medium的設計博主Michael Horton的一篇文章Complexsion Reduction: A New Trend in Mobile Design。這就奇怪了，一方面CR被包括蘋果官方應用在內的一眾標杆產品支持，一方面後續追隨這種設計語言的產品和設計師看起來卻寥寥無幾。經過谷兜幾位作者友好而熱烈地討(Si)論(Bi)後，我們理清了一些頭緒。

Complexion Reduction的確是一種被很多優秀產品採納的設計語言，但並不是萬全之策，更不是界面設計的萬金油。谷兜會分為上下兩篇文章，從Complexion Reduction的形成、著名實例、對產品的影響和我們對此的結論——來討論這種似遠似近的設計趨勢。

▍什麼是 Complexion Reduction

如果你還記得Instagram在2016年5月的那次大改版，就不會對CR的起源感到陌生。除了Instagram之外，還有Facebook, Airbnb, Apple Music一眾對設計潮流非常敏銳的產品都不約而同地採取了同一種設計語言在移動端應用上——一種精進的，後來被稱之為Complexion Reduction的設計語言。他們在用戶界面上呈現出一些相似的特徵。

Complexion Reduction的說法來自於Michael Horton——一位紐約數字設計公司SWARM的UX設計師。兩年前他在Medium的文章中通過對Airbnb、Instagram、Medium和Apple Music(iOS10)的線上版本的觀察，嘗試總結出了這種潛在的設計趨勢，並（自顧自地）命名為Complexion Reduction『谷兜：甚至連Complexion這個詞都是他現造的，但是稀里糊塗地這種說法也一直被各路大神沿用下來了』，用它來描述這種出現在移動端設計領域的，基於扁平化設計和極簡設計的新風潮。其實它和「漸進式簡約」有一些相似之處，但相比於簡單地簡化設計元素，Complexion Reduction對於界面的改進的嘗試，要具體的多。

『谷兜：我們之前在這篇文章中討論過漸進式呈現——它屬於漸進式簡約的一種應用實例。漸進式簡約(Progressive Reduction)則泛指』UI界面中隨著用戶對產品熟悉程度的增加而進行漸進式的簡化改良。這背後的理念十分簡單，可用性是一個動態的目標，用戶對應用的理解程度將隨時間逐漸加深，因此用戶界面也必須依次實時更新。』(Eloise@墨刀, 2016)』。

『下文中用CR代替Complexion Reduction』

▍CR的特徵和發展

目前普遍認為，CR最為突出的特徵有三個：

· 更大的字型大小和更重的字體，尤其是標題類內容；

· 簡化和層級統一的icon；

· 收斂的色彩；

在2016年第二季度，從Instagram的界面改版開始（也有一說是Medium首先採用），很多著名的App採用了這種風格。

例如Instagram，最明顯的是頂部藍色的橫條換成了跟背景一致的白色，底部黑色的導航欄底色也變成了白色，並使用了更扁平（solid）的圖標。要知道，在之前的版本中那個擬物化的Insta相機icon以及上藍下黑的設計已經成為了Instagram最強的視覺標示，這樣的改動可以說是十分巨大的。從某種角度上說，它要比iOS7開始全面流行的「扁平化設計」更加扁平。

『谷兜：其實蘋果官方甚少使用Flat來形容iOS7以後的這種設計風格，在Windows那裡叫做Metro Style，在Google那裡則叫Material Design，谷兜認為，Flat/Metro/Material這些詞除了指擬物元素的精簡和圖標的圖形化，更多指的是簡化設計元素這層意思』

CR甚至捨棄了顏色的變化，捨棄了豐富的卡片或者按鈕的設計，讓一切元素平鋪在純白的手機屏幕上，依靠字體的變化，布局的變化和元素灰度的變化，完成整個產品的界面設計。

在接下來的三個月中，矽谷的這些明星產品先後對自己的移動端應用進行了相似的改版。直到當年6月在WWDC上iOS10被發布，與之一起更新的蘋果官方應用Apple Music上亦使用了相似的設計語言，CR的風潮如火如荼地展開了。CR的風格其實是以矽谷互聯網圈為中心的設計師們對UCD的一種嘗試——你說它是用戶為中心驅動也好，功能導向型設計也好，在這種理念下，設計師們嘗試以更簡單，更快速和更清晰的界面幫助用戶快速完成預期任務。他們不再過多地關注美學的細節部分，而是著眼整體，為用戶打造一個好用的產品。

▍CR的更多實例

下面，我們挑幾個產品來講講。現在的CR設計語言中，被廣泛採納並行之有效的一些特性。

Airbnb

我們可以看到，Airbnb的移動端App非常契合我們提到的CR的幾個特徵。

• 更大和更重的文字有利於突出內容本身——Airbnb正是把這種布局用在了需要標題引導用戶和劃分內容層級的頁面上。此外，隨著屏幕PPI的提高，界面設計標準字型大小的增大已經成為一種趨勢。更大的字體和更高的灰度對比，更有利於閱讀。這些都是這個電商/內容型產品需要的。關於提高可讀性的更多討論，推薦閱讀 @Angelaaa 的這篇文章。
• Icon的簡化也是為了突出內容本身。這跟收斂的用色是呼應的，把視覺重心都留給圖片，或者沒有圖片的時候，留給灰度很高的文字內容。
• 除此之外，Airbnb的界面還有一個很明顯的特徵是使用了較多的留白，谷兜認為，對於首頁來說，留白的增加和線條的刪減為用戶減輕了視覺上的負擔，也可以更好地凸顯布局上的秩序感。『谷兜：Airbnb使用了三種不同比例的卡片來容納不同類型的內容，這種完全靠容器尺寸和布局來規劃內容的手法非常巧妙』
• 值得注意的是，即使是Airbnb這麼典型的CR界面，也並沒有把黑大粗標題放在首頁，最重要的位置還是繼承了老版本的搜索欄。對於住宿OTA來說，搜索欄永遠都是最重要的內容入口。（可以參考Booking.com, Agoda, Hostelworld, 或者…途家）

Apple Music

• 與iOS10一起發布的Apple Music也對用戶界面進行了大幅地改版（相比於之前的iTunes），不難從中發現一系列CR的特性。我們試圖從設計師的出發點分析，這樣的設計可能是考慮到提供音樂售賣/試聽服務的Apple Music包含了非常多專輯和藝術家的圖片，CR設計語言極度簡潔的特性可以更好地突出這些內容。『谷兜：2017年iOS11的版本中，加入了帶有漸變色的導航欄，對此谷兜感到摸不著頭腦。附上2016年iOS10的Apple Music供大家參考。』
• 相比於上文提到的Airbnb，Apple Music採用了更緊湊的布局，分隔符的使用和更少的留白帶來了瀏覽的壓力。同時Apple Music的卡片尺寸比例也稍顯混亂。在CR樣式的界面中，如果不能更好地建立內容的體系，很容易讓用戶喪失繼續發現新內容的興趣。
• 在谷兜看來，很難說Apple Music的這次改版是經過深思熟慮的。首先出現的問題就是導航欄。自iOS誕生起，導航欄（Navigation Bar）就在整個系統中扮演了相當於路標的角色，它時刻告訴用戶處在整個App中的什麼位置，這對他們來說是至關重要的信息。正因為這樣，導航欄是獨立於內容層的。在iOS10的Apple Music中，導航欄在很多頁面里會隨著滾動缺失，例如藝術家、專輯和播放列表頁面。這個問題在iOS11中有所改進，但是蘋果又在頁面頂部加入了我們大概可以把它認為是Apple Music廣告的帶有漸變的圖層，干擾了原有的導航欄體系。

Medium

最後我們再來看一看Medium的iOS端版本。Medium在這次CR的浪潮中很特殊，是因為其實仔細看Medium的Timeline並沒有一個明顯的改版的過程。自誕生起，Medium就秉承了CR中體現的一些特性。我們可以看到，它的界面中用色是非常謹慎的，除了頭像和文章配圖，幾乎沒有使用其它大面積的色塊。在icon方面，Medium一律使用了描邊樣式，這也跟CR的設計風格不謀而合。谷兜認為，Medium之所以選用這樣的風格，從根本上說是因為它的「閱讀」特性。與Airbnb和Apple Music不同的是，Medium的主體內容是文字，這意味著它必須更加簡潔才能將用戶的注意力引導到內容上。從這幾個角度來說，Medium的界面設計是成功的。

• 在布局方面，Medium採用了卡片+通欄模塊結合的樣式。卡片代表路徑入口，通欄則是文章的入口，因為這個產品的內容構成相對簡單，所以設計師在布局上要更遊刃有餘一些。
• 同樣地，Medium只使用了極少的間隔符，主要由文字樣式和間距來完成對內容的規劃。在這樣的內容背景下，現在線上的界面設計是經過了很多次調教的。這並不容易。想要查看這款產品的更多版本，大家可以訪問一些App TImeline的網站。

上面的三款產品，我們列舉了改版的成功的、改版的不怎麼成功的和一直繼承下來的三款產品對CR各自的詮釋。除了這幾款產品，在Facebook，Youtube，Twitter 等一眾明星產品的迭代中，我們總會或多或少的見到CR的影子。特別是以iOS10的Apple Music為起點拉開的大幕，到iOS11中類似設計語言在更多蘋果官方應用中的擴展，象徵了蘋果官方對這一設計潮流的肯定和支持。

▍然鵝

奇怪的是，CR並不像Flat Design或者是Material Design那樣一誕生就備受矚目，甚至沒有人正式宣布CR的出現。但是，這種風格又確實影響了很多產品。不難發現，似乎CR的潮流在移動端產品的設計中走的不是一帆風順的。可能也正是因為這樣，CR從未被正是定義成一種設計標準，而只是作為一種設計語言存在，甚至都不是一種共有的設計語言——因為顯然大家對它的理解和詮釋都不太一樣。在國內，嘗試它的產品更是少之又少。『就谷兜所知，似乎Keep在嘗試使用它的一些特性』

除此之外，大家應該也能感覺到，CR這種風格並不是適合所有產品的。在下面的一篇文章中，我們將與大家進一步探討CR的利弊端，可能會適合使用這種設計語言的產品，以及我們的一些建議。