本文編譯自 Swarm UX/UI 設計師 Michael Horton 發布在 Medium 上的文章《Complexion Reduction: A New Trend In Mobile Design》，文章解剖了正風靡硅谷科技圈的 UI 設計美學新風潮——Complexion Reduction，并給出了如何打造一款「Complexion Reduction 」美學風格 App 的終極指南。墨刀有幸獲得作者授權翻譯了這篇文章。
作者：Michael Horton
原文：https://medium.com/swarm-nyc/complexion-reduction-a-new-trend-in-mobile-design-cef033a0b978#.frctlhzw1
譯文：
如果你對設計美學足夠敏銳，你會發現似乎又有一種新的設計風潮正在硅谷設計圈蔓延發酵。不僅僅是 Instagram，Airbnb ，連 Apple Music 也開始擁抱這種設計風格，證據就是這幾款明星 APP 改版后的用戶界面呈現出一些相同的特質：更加簡化的界面顏色，更大更突出的標題字體，以及更簡化的圖標。而這種風格就是被 Swarm UX/UI 設計師 Michael Horton 稱作 「Complexion Reduction」 的設計美學風潮。
改版后的 Instagram，Airbnb 和 Apple Music UI 界面風格：更簡化的界面顏色，更大更突出的標題字體，以及更簡化的圖標。
「Complexion Reduction 」到 底 是 什 么 鬼？
也許你會問，「Complexion Reduction 到底是什么鬼？我怎么從來沒聽過？」其實這是 Michael Horton 生造的一個詞，用來描述最近出現在移動設計領域的新風潮，姑且翻譯成膚色簡約。它和大熱的扁平設計不同，也不是指極簡風，當然更談不上是 「漸進式簡約」 。
注：漸進式簡約，英文為 Progressive Reduction，它是指 UI 界面設計中，隨著用戶對產品的熟悉程度增加而進行漸進式地簡化改良。這背后的理念十分簡單， 可用性是一個動態的目標，用戶對應用的理解程度將隨時間逐漸加深，因此用戶界面也必須依此即時更新。(圖：creo.co.uk)
有人認為 Complexion Reduction 是極簡設計風格在移動端的延伸演化，但 Michael 認為，顯然這種風格有著更加鮮明的特征，即更簡化的界面顏色，更大更突出的標題字體，以及更簡化的圖標。最終導致很多應用在風格上越來越趨同，不知道的還以為是同一家出品的呢。
Michael 第一次注意到這種風格是在 Instagram 發布了新的UI。
對比以上兩個頁面，我們發現，新版中去掉了原來頂欄、底欄的深藍、黑灰背景色，并簡化了圖標。新版只保留黑白兩色，粗體字標題，突出了內容和功能，一目了然。
這樣清新簡潔的界面設計顯然更受人喜歡，不由得讓人想起另一個黑白色系的網站 Medium。從 2012 年上線以來，Medium 就一直是走黑白色系，之后的每一次改版都在做減法。現在回想起來，Medium 應該是踐行 「Complexion Reduction 」 的祖師爺，不過當時還沒形成風潮，也沒有這個詞。
說到這里，插一則安利，向大家推薦一個網站——greatappstimeline。在互聯網科技行業的新生態之下，產品的迭代和演化速度變得越來越快，每一次改版幾乎都是“大手術”，在這樣的背景下，出現了greatappstimeline這樣一個網站，通過記錄互聯網現存優秀產品的外觀設計，讓我們看盡互聯網產品更迭變遷史。
greatappstimeline 網站截圖
然后我們再來看 Airbnb 的改版，有一次打開的時候忽然發現，咦，怎么這么熟悉，好像在哪里見過。這不就跟 Instagram 一樣嘛。
仔細看看，確實能從中看出一些相似性。比較上面兩個頁面，新版中字體加大、加粗，去掉了不必要的圖片和顏色，簡化了圖標，更加好認。黑白色 UI，凸顯內容，功能清晰。
最后再來看看 Apple Music 的設計改版，雖然改版涉及 UX 更新和其他新功能，但設計師最關注的還是設計美學方面的。正如 Macworld 的記者 Caitlin McGarry 說的那樣，全新的 look，巨大的卡片，加大加粗的字體，簡潔干凈的白色背景，讓唱片封面凸顯出來。
是不是聽起來很熟悉？是的， 前面講的 Instagram 和 Airbnb 的改版關鍵詞也是加大加粗的字體、黑白 UI、簡潔干凈的背景、以及功能和內容的凸顯。
這 意 味 著 什 么？
和時尚圈一樣，科技圈也是一個追趕潮流，相互影響的行業。這意味著繼這 3 家明星設計公司之后，我們猜測將會有越來越多的 App 將會積極擁抱這種新的設計風潮，不久你會發現各種亮色系 icon 像馬賽克一樣充斥你的 iPhone 首屏。
無論你是支持還是反對，無疑，這將是設計領域涌起的一股具有前瞻性的新風潮。產品設計流程正擺脫從前那種單一、各司其職的設計思路，向真正以用戶為中心的整體性設計流程方向發展，這是一種更加健康的思路。
以前的產品設計流程一般是這樣的，UX 設計師或者產品經理畫完流程圖，丟給 UI 設計師，讓他「整個漂亮的。」然后就是設計師花時間為界面添加、去除，調整顏色...然而，最佳方案可能只需要一個原型圖，就能清楚無誤地把自己的需求和想法傳達給無論是產品經理、UI 設計師還是其他人。在當今更加注重整體性的設計流程的趨勢下，UX 和 UI 設計師的界限變得越來越模糊，設計師不再關注細節部分，而是著眼整體，為用戶打造最佳的產品。
「Complexion Reduction 」美 學 的 終 極 指 南
如何打造一款「Complexion Reduction 」風格的 App 呢？請看「Complexion Reduction 」美學的終極指南：
1，請克制用色
黑白色之外，最多只能多加一種顏色，用來引導用戶進行操作。最好是能讓 App 的內容本身來為產品增加亮色。
2，標題字號「大」、「黑」、「粗」
如同上面圖例中顯示的一樣，標題字體增加 20 到30 的像素，那樣看起來會有一種厚重 feel。
3，圖標 look 三要素：簡潔、纖瘦和好認
圖標不要加顏色，從左至右圖標排序最好為：HOME 鍵、搜索、主操作鍵盤、二級操作鍵、個人資料。
4，大面積的留白區域。
三倍甚至是四倍的留白。
5，閃閃發亮的 App 圖標
與眾不同的圖標才是展現個性和品牌的地方，因此，在圖標上加一些亮色的元素能讓你的產品更加出眾。
那么，該如何打造一款「Complexion Reduction 」風格的 App 呢？有道云筆記的設計師，拿他們最新的6.0版本做了一次試驗，看起來效果不錯。
先看一下有道云筆記之前的設計風格：
有道云筆記6.0之前的版本
其實個人覺得有道云筆記的舊版設計風格也還行，不至于丑，但是仔細看也會發現幾個問題：
首先，顏色太多了，細數一下，藍（主色）、紅、黃、綠、灰、紫、粉，簡直像一個彩色花板，這樣的問題在于視覺上容易花，不易集中，特別是對于一個工具類產品來說，這樣的多色系并不有益。
其次，模塊太多了，大量的分割線、每一篇筆記里還有圖片、還有藍色塊灰色塊，看上去顯得很亂，也不干凈。
有道云筆記的設計貌似也意識到了這些問題，同時參照著Complexion Reduction的美學精神，對產品UI進行了脫胎換骨的改變，新版6.0的UI是這樣的：
有道云筆記6.0
看完新版設計，第一個感覺是——干凈了，而且筆記的內容得到了很好的突出。
如果把前后的UI對比看：
從上面的對比，可以看出，有道云筆記新版6.0至少遵循了下面幾點原則：
1、新版基本只用了黑白色，而且去掉了大量的藍色塊和分割線（Complexion Reduction美學第1點：克制用色）
2、大面積留白，相比以前的填滿式界面，增強了呼吸感（Complexion Reduction美學第4點：大面積的留白區域）
3、字體明顯變得更粗，突出標題的內容（Complexion Reduction美學第2點：標題字號「大」、「黑」、「粗」）
4、此外，新版依然巧妙的保留了藍色的主色，但只用在新增筆記的“＋”上。
內行看門道，外行看熱鬧。從專業的設計角度來看，有道云筆記新版6.0的確很好的踐行了Complexion Reduction美學精神，作為國內最先“吃螃蟹”的產品，的確有意想不到的效果。對于普通用戶來說，很多用戶覺得“說不出哪里好了，但很舒服”“感覺一下變高級了”。
實際上，每個產品都有實際的特殊屬性，一種設計風格也很難滿足所有產品的需求。但就有道云筆記而言，Complexion Reduction 看上去的確很適合。主要有以下三點：
1、克制用色，讓注意力在內容本身之上。有道云筆記本身的知識產品屬性，用戶更希望聚焦于知識的吸收和沉淀，不被分散精力，因此一切與會打擾用戶的圖標、色彩、模塊都要抹掉。
2、字體要放大和加粗，讓一切與內容本身得以突出。
3、增加留白，使用有道云筆記用戶多為在辦公場景下，一般工作強度高、精神
緊繃，而留白可以潛意識讓用戶情緒放松，增加呼吸感即是這個目的。
