Complexion Reduction，這種風靡矽谷的UI設計新風潮到底長啥樣？

本文編譯自 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 圖標

與眾不同的圖標才是展現個性和品牌的地方，因此，在圖標上加一些亮色的元素能讓你的產品更加出眾。

「墨刀」，可能是最易上手的原型設計工具，讓你 10 分鐘設計一款 App。

你的讚賞是我堅持原創的動力