藍(lán)藍(lán)設(shè)計(jì)( m.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來源：www.html5tricks.com

 如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

 

在過去的三年里面，我一直帶領(lǐng)著 Aviary 的Android設(shè)計(jì)師團(tuán)隊(duì)。非常榮幸我能為大家設(shè)計(jì)這款攝影APP，讓大家能釋放創(chuàng)造力，通過這款A(yù)PP來拍攝出如此之多優(yōu)質(zhì)的照片。隨著Google 推出Material Design 這種全新的設(shè)計(jì)語言，我們的產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)也開始針對Photo Editor 進(jìn)行重新設(shè)計(jì)。今天這篇文章，我會(huì)仔細(xì)分享我們重新設(shè)計(jì)它的故事，以及設(shè)計(jì)經(jīng)驗(yàn)和進(jìn)度，你可以看到這個(gè)全新設(shè)計(jì)語言是如何重塑這款A(yù)PP的。

通過這次改版，我發(fā)現(xiàn)如何通過Material Design的設(shè)計(jì)規(guī)范來激發(fā)靈感，而非束縛設(shè)計(jì)。更重要的是，我逐漸明白了新的設(shè)計(jì)平臺(tái)是怎么回事。從 Photo Editor 最初的美學(xué)特征逐漸過度到Material Design 是一個(gè)漫長的旅程，但是這也足以讓我收獲許多經(jīng)驗(yàn)和教訓(xùn)，也讓我逐漸體會(huì)到全新的Android系統(tǒng)的美感。

Android版的誕生

剛剛加入Aviary的時(shí)候，我碰到的第一個(gè)UI設(shè)計(jì)項(xiàng)目是將我們的iOS平臺(tái)的APP的UI轉(zhuǎn)化適配到Android平臺(tái)上。作為一個(gè)iPhone用戶，我那時(shí)候才剛剛對移動(dòng)端UI設(shè)計(jì)有所把握，對于Android也僅僅是大學(xué)時(shí)候稍有了解，從未對這個(gè)平臺(tái)有過系統(tǒng)的認(rèn)知。
?
所以我首先得對手頭的Android測試設(shè)備有所了解，嘗試制定iOS UI轉(zhuǎn)化為Android UI的相應(yīng)的規(guī)則。當(dāng)初我曾經(jīng)遵循iOS的擬物化風(fēng)格為Aviary設(shè)計(jì)了iOS客戶端，充分運(yùn)用層次分明的陰影和細(xì)膩來展現(xiàn)整個(gè)APP。當(dāng)時(shí) Android 4.0的設(shè)計(jì)風(fēng)格被成為Holo，考慮到Android和iOS的差異，在轉(zhuǎn)換過程中，我將繁復(fù)的陰影效果降低了，用更輕的筆觸重新繪制了紋理，將UI的邊角處理得更加銳利，以匹配Holo的整體風(fēng)格。如此一來，Aviary最初的Android版本就這么誕生了。

第一次Android重設(shè)計(jì)

由于當(dāng)時(shí)Aviary 專注于iOS平臺(tái)，Android 版本的UI設(shè)計(jì)項(xiàng)目并不在聚光燈之下，所以也由著我肆意修改。如此一來，我也有了充分的自由度，可以以更有創(chuàng)意的方式來打造這個(gè)Android版的客戶端，并且學(xué)習(xí)更多移動(dòng)端設(shè)計(jì)的知識(shí)。由于用戶基礎(chǔ)薄弱，大家對于Andorid版的期待并不高?？墒切掳姘l(fā)布之后，隨著下載量的瘋狂增長，我們很快就意識(shí)到Android 版的寶貴之處，這也最終促使公司上層決定在Andorid平臺(tái)上投注更多的精力。

當(dāng)時(shí)，和我一同工作的Android平臺(tái)開發(fā)者是這個(gè)平臺(tái)的堅(jiān)定支持者和倡導(dǎo)者。在他看來，我借助iPhone來設(shè)計(jì)Andorid 平臺(tái)的UI，簡直是對Andorid的侮辱，后來我意識(shí)到他是對的。所以，在2013年的時(shí)候我購置了一臺(tái)HTC ONE。下載了大量應(yīng)用之后我才發(fā)現(xiàn)，絕大多數(shù)的Android應(yīng)用并沒有類似iOS一樣的系統(tǒng)的美學(xué)特征和完整而統(tǒng)一的設(shè)計(jì)語言，很容易迷失在復(fù)雜而極度靈活的設(shè)置和可定制性當(dāng)中。通過大量的篩選之后，我逐漸開始摸索到Android 的一些設(shè)計(jì)模式。結(jié)合這個(gè)過程中的所學(xué)，提升了一部分可用性設(shè)計(jì)和美學(xué)特征之后，我逐漸摸索到了設(shè)計(jì)Android客戶端的設(shè)計(jì)思路。

Material Design 簡介

快進(jìn)入2014年6月的時(shí)候，Google 經(jīng)過Android 4.0 長達(dá)2年的緩沖之后，終于推出了系統(tǒng)而完善的設(shè)計(jì)語言，Material Design 。這一規(guī)范的推出，使得我們之前的Android 平臺(tái)客戶端的重新設(shè)計(jì)顯得不合時(shí)宜。之前的些許調(diào)整在新規(guī)范之下，并無法顯出我們對于Andorid 平臺(tái)的重視。同時(shí)這也給予我們再次重新設(shè)計(jì)Android 應(yīng)用的理由。
?
為了重新改造APP，我們先做了大量的研究。在Google 剛剛開始發(fā)布文檔和設(shè)計(jì)資源的時(shí)候，我們便開始竭盡所能地閱讀和學(xué)習(xí)新規(guī)范。幸運(yùn)的是，比起之前，新的規(guī)范系統(tǒng)而完善，我們的獲得了比以前更多的指導(dǎo)。Google所提供的文檔為每一個(gè)設(shè)計(jì)進(jìn)行了詳細(xì)的解釋，闡述了目的。這些細(xì)致精準(zhǔn)的設(shè)定為整個(gè)平臺(tái)的一致和統(tǒng)一奠定了基礎(chǔ)。

我開始鉆遠(yuǎn)整個(gè)Material Design 概念設(shè)計(jì)的核心：墨水和紙張。這些基于印刷實(shí)體的設(shè)定和靈活自然的動(dòng)效，賦予了整個(gè)設(shè)計(jì)語言以意義明確的關(guān)系和足夠的連續(xù)性，從而造就大膽而靈活的布局和深遠(yuǎn)的影響。不過很明顯，這樣的設(shè)定對于列表較多的應(yīng)用，諸如郵件和新聞，有著明顯的優(yōu)勢。

谷歌 Material Design 三大準(zhǔn)則 （紙的隱喻；圖形化，強(qiáng)交互；用動(dòng)效傳達(dá)涵義）

隨著對Material Design的熟悉，我開始構(gòu)思怎樣調(diào)整我們的APP才能符合它的三大準(zhǔn)則。內(nèi)容要如何展示？釋放按鈕的時(shí)候，應(yīng)該怎樣呈現(xiàn)動(dòng)效？擁有如此之多的操作，如果使用一個(gè)浮動(dòng)按鈕解決所有操作？在編輯流程里，如何使用過度動(dòng)效？當(dāng)視覺焦點(diǎn)是照片的時(shí)候，如何為之添加色彩？面對如此之多的未知因素，我選擇將整個(gè)應(yīng)用的功能剝離肢解開來。

配色方案

想清楚主要的視覺元素，對于重新設(shè)計(jì)而言是個(gè)不錯(cuò)的開始。我開始規(guī)劃每一屏的布局，在此過程中并不涉及樣式和過度動(dòng)效。我開始依照Material Design 的規(guī)范選擇主色調(diào)和相應(yīng)配色，就像做品牌設(shè)計(jì)配色一樣。藍(lán)灰色被我選為主色調(diào)，這是一種反差不明顯的偏中性色調(diào)，但是又足夠有特色。對于小圖標(biāo)和文字，我選擇白色和亮藍(lán)色以示強(qiáng)調(diào)。再去掉復(fù)雜的陰影和渲染之后，整個(gè)設(shè)計(jì)有了不小的提升。

Aviary 的新配色

小圖標(biāo)

下一步，需要重新思考小圖標(biāo)的設(shè)計(jì)。之前的小圖標(biāo)設(shè)計(jì)過于厚重、跳脫，現(xiàn)在看來也相當(dāng)過時(shí)。重新審視Google提供的圖標(biāo)設(shè)計(jì)柵格系統(tǒng)和現(xiàn)有的Material Design風(fēng)格的圖標(biāo)之后，我獲得了設(shè)計(jì)的靈感。柵格確保了Android小圖標(biāo)的一致性，同時(shí)也足夠呈現(xiàn)出Aviary獨(dú)有的風(fēng)格和品牌特征。我使用大量相同的形狀構(gòu)建出對稱的結(jié)構(gòu)，簡約而大膽，稍加調(diào)整之后，基本就構(gòu)成了現(xiàn)有的圖標(biāo)體系。

?

圖片選取

將整個(gè)APP的拆分為基礎(chǔ)形態(tài)之后，我開始一點(diǎn)一點(diǎn)地重新搭建整個(gè)交互流程。不同于其他的應(yīng)用，我們的Photo Editor的使用過程是一個(gè)簡單的線性流程。通常用戶在一個(gè)標(biāo)準(zhǔn)的圖片庫當(dāng)中選取圖片，不過這個(gè)地方可以進(jìn)行些許調(diào)整。于是我們將此處圖庫的頂部工具欄替換掉，添加抽屜式導(dǎo)航欄，并添加一個(gè)浮動(dòng)按鈕作為圖庫的入口。

?

APP 流程

選擇圖片之后，下一步是選擇工具。用戶可以從一個(gè)擁有20多個(gè)工具的水平列表中選取編輯工具，選擇之后，用戶可以進(jìn)行相應(yīng)的操作。比如用戶可以選擇一鍵優(yōu)化的工具，選取之后，有三種模式可供用戶選擇。很明顯，二級(jí)菜單需要和一級(jí)菜單區(qū)分開來。為了區(qū)分，我們讓二級(jí)菜單的背景顏色比一級(jí)菜單稍淺一點(diǎn)，并加入了圓角邊框，以示區(qū)分。同時(shí)，我們還添加了一個(gè)不斷擴(kuò)大的“墨水”動(dòng)效來強(qiáng)化這一概念。

?內(nèi)容

另外一個(gè)案例來自我們的內(nèi)容工具。這其中包括、貼紙、邊框和遮蓋等工具。這四類工具中，除了預(yù)制的一些工具之外，還有許多可供購買。所以此處還需要一個(gè)工具商店的入口，供用戶瀏覽選購。此處的設(shè)計(jì)，我們借鑒了Google Play的設(shè)計(jì)，使用了卡片式的交互。我相信這樣的交互方式，能讓用戶感受到熟悉的購買體驗(yàn)。這樣一來，在適當(dāng)加入一些Material Design的設(shè)計(jì)元素，就更完美了。

?

色彩與圖像

工具商店和其中的內(nèi)容，是展現(xiàn)Material Design設(shè)計(jì)的不錯(cuò)的途徑，而其中最主要的是控制好色彩和圖像。工具包的圖片都是經(jīng)過精心挑選的，結(jié)合整個(gè)應(yīng)用的配色，足以呈現(xiàn)其中工具的類型和功用，也足夠美觀。我們將示例圖片中的主色調(diào)提取出來，融入整個(gè)界面。移除邊框，讓圖片和整個(gè)界面更加無縫。

動(dòng)態(tài)色彩

調(diào)整和測試過我們的配色引擎之后，我們意識(shí)到，它還可以在APP中更多的地方得到應(yīng)用。我們將圖片的主色調(diào)提取出來，用作系統(tǒng)UI的互補(bǔ)色。我們還把這些色彩用到側(cè)邊欄和加載圖標(biāo)上，使得每次編輯不同的圖片、操作不同步驟的時(shí)候，都有不同的變化，給人一種自然而神奇的感覺。為了將這種“神奇”的設(shè)定推到，我們還將這一特性加入到“繪圖”和“文字”工具中去。

應(yīng)用圖標(biāo)

最后，我們還需要完成應(yīng)用圖標(biāo)的設(shè)計(jì)。借助Googlo 提供的柵格系統(tǒng)，我們完成了新的設(shè)計(jì)。去掉了冗余的層次和花哨的裝飾，一個(gè)干凈而充滿活力的新圖標(biāo)就誕生了。其中配色是源于Material Design的官方配色方案，適當(dāng)?shù)募尤肓艘稽c(diǎn)陰影區(qū)分層次，使得整個(gè)圖標(biāo)不會(huì)過于呆板。

發(fā)布

經(jīng)過幾個(gè)月艱苦的工作，我們最終完成了全新的設(shè)計(jì)，并在2015年 4月9日發(fā)布了新的應(yīng)用。

通過這次重新設(shè)計(jì)，我意識(shí)到我對于官方設(shè)計(jì)規(guī)范的堅(jiān)持，最終使得我們的應(yīng)用足夠漂亮，也足夠原生。雖然谷歌并沒有強(qiáng)制要求這樣，但是我們依然完美地做到了這一點(diǎn)。系統(tǒng)而細(xì)致的設(shè)計(jì)規(guī)范并不是束縛，深入理解同樣會(huì)激發(fā)設(shè)計(jì)師的創(chuàng)造力，其中清晰的解釋最終造就了完美一致的用戶體驗(yàn)，更好地展現(xiàn)產(chǎn)品的個(gè)性。