上個(gè)月的法蘭克福車(chē)展上，寶馬首次對(duì)外發(fā)布了經(jīng)過(guò)扁平化處理的單色LOGO，并將傳承百年的經(jīng)典配色調(diào)整為黑白色。據(jù)悉這個(gè)新LOGO專(zhuān)為旗下高端的“精英”車(chē)型使用。新logo的簡(jiǎn)約和純粹更加凸顯了德國(guó)品牌的悠久歷史和引以為傲的奢華品質(zhì)。 

▲寶馬高端車(chē)型新logo

這樣大膽的改變和最新發(fā)布的ios11不謀而合。蘋(píng)果引以為傲的ios系統(tǒng)一直以高端、精致、體驗(yàn)好著稱(chēng)，是界面設(shè)計(jì)的典范。新版ios11的設(shè)計(jì)中同樣加重了黑白的用色對(duì)比。粗重的文字和大面積留白，讓頁(yè)面顯得簡(jiǎn)潔通透，也讓內(nèi)容更加突出。 

▲ios11界面

是什么樣的動(dòng)力讓的傳統(tǒng)品牌作出如此突破性的嘗試？又是什么樣的緣由讓ios的扁平風(fēng)更加極致？這其實(shí)是一種新的設(shè)計(jì)風(fēng)格在界內(nèi)的醞釀和發(fā)酵。

近年來(lái)硅谷一大批主流App設(shè)計(jì)，例如 Instagram，Airbnb，都開(kāi)啟了新一輪的改版。和寶馬的新logo一樣，他們都用黑白的強(qiáng)對(duì)比覆蓋了以前的標(biāo)準(zhǔn)色運(yùn)用。而這種風(fēng)格就是被Swarm UX/UI設(shè)計(jì)師 Michael Horton稱(chēng)作「Complexion Reduction」的設(shè)計(jì)美學(xué)風(fēng)潮。 

▲ ins新版設(shè)計(jì)對(duì)比——左（舊版）右（新版） 

▲airbnb新版設(shè)計(jì)對(duì)比——左（舊版）右（新版）

從以上的界面設(shè)計(jì)中， Michael Horton總結(jié)了Complexion Reduction風(fēng)格最核心的幾大要素。

1、克制用色

黑白色之外，最多只能多加一種顏色，用來(lái)引導(dǎo)用戶(hù)進(jìn)行操作。最好是能讓 App 的內(nèi)容本身來(lái)為產(chǎn)品增加亮色。

2、標(biāo)題字號(hào)「大」「黑」「粗」

如同上面圖例中顯示的一樣，標(biāo)題字體增加 20 到30 的像素，那樣看起來(lái)會(huì)有一種厚重 feel。

3、圖標(biāo) look 三要素：簡(jiǎn)潔、纖瘦和好認(rèn)

圖標(biāo)不要加顏色，從左至右圖標(biāo)排序最好為：HOME 鍵、搜索、主操作鍵盤(pán)、二級(jí)操作鍵、個(gè)人資料。

4、大面積的留白區(qū)域

三倍甚至是四倍的留白。

5、閃閃發(fā)亮的 App 圖標(biāo)

與眾不同的圖標(biāo)才是展現(xiàn)個(gè)性和品牌的地方。因此，在圖標(biāo)上加一些亮色的元素能讓你的產(chǎn)品更加出眾。

 

國(guó)內(nèi)App的新風(fēng)格試水

互聯(lián)網(wǎng)行業(yè)帶來(lái)了快節(jié)奏的時(shí)代，你不得不感嘆流行蔓延的速度。新風(fēng)格剛剛開(kāi)始興起， 就能在手機(jī)百度（以下簡(jiǎn)稱(chēng)手百）的改版中初見(jiàn)端倪。

作為國(guó)內(nèi)互聯(lián)網(wǎng)巨頭BAT中的一員，手機(jī)百度7月份發(fā)布的9.0版本率先嘗試了使用Complexion Reduction設(shè)計(jì)風(fēng)格，這一大膽嘗試在產(chǎn)品的視覺(jué)表現(xiàn)上也算是可圈可點(diǎn)。

1、色彩精簡(jiǎn)提取

手百在新版本改版中將整個(gè)界面清零重組，大面積減少了非必要色相，采用黑白的主要配色，來(lái)彰顯內(nèi)容的精品化。只在關(guān)鍵功能點(diǎn)綴了標(biāo)準(zhǔn)藍(lán)色，強(qiáng)調(diào)品牌性。 

▲左（舊版）右（新版） 

▲左（舊版）右（新版）

▲左（舊版）右（新版）

 2、更舒適的內(nèi)容排版

利用更大更粗的標(biāo)題和小字正文，增加留白，拉開(kāi)對(duì)比差異和節(jié)奏，保持頁(yè)面的透氣和呼吸感。搜索結(jié)果頁(yè)也去掉了原來(lái)紅綠藍(lán)的搭配，用純粹的黑色文字來(lái)呈現(xiàn)內(nèi)容，保證用戶(hù)瀏覽的沉浸感和舒適度。

▲     左（舊版）右（新版）

▲左（舊版）右（新版）

3、減少裝飾，凸顯內(nèi)容

由于手百是一個(gè)偏工具類(lèi)型的軟件，設(shè)計(jì)中的復(fù)雜圖形本就不多。而更新之后的手百則更加極致的省略了所有冗余的設(shè)計(jì)元素，將諸多界面中的分割線(xiàn)，button外形，都簡(jiǎn)化去掉，降低理解和閱讀成本，讓用戶(hù)從繁瑣的界面裝飾和復(fù)雜的交互邏輯中解放出來(lái)。 

▲左（舊版）右（新版）

 「Complexion Reduction」風(fēng)格在原來(lái)扁平化的基礎(chǔ)上更加極致的突出了設(shè)計(jì)語(yǔ)言的純粹和功能展現(xiàn)的嚴(yán)謹(jǐn)合理。隨著現(xiàn)代社會(huì)的發(fā)展和生活節(jié)奏加快，我們每天所接收的信息非常繁多，此刻用戶(hù)對(duì)效率的追求以及對(duì)品質(zhì)的渴望，也讓這種風(fēng)格流行成為必然。

「Complexion Reduction 」風(fēng)格的流行只是一個(gè)起點(diǎn)，相信不久的未來(lái)就將有更多新鮮和大膽的設(shè)計(jì)在國(guó)內(nèi)市場(chǎng)上誕生，也期待國(guó)內(nèi)能涌現(xiàn)更多好的設(shè)計(jì)能引領(lǐng)全球互聯(lián)網(wǎng)行業(yè)設(shè)計(jì)風(fēng)潮。

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見(jiàn)轉(zhuǎn)載須知。