上周，我們宣布了Google I/O 2014 APP源代碼已經(jīng)發(fā)布，諸位感興趣的話，可以去Github看看我們是怎樣在這個(gè)App中實(shí)現(xiàn)Material Design的功能和設(shè)計(jì)細(xì)節(jié)。在這篇文章中，我將分享一些我們對(duì)于Material Design的一些設(shè)計(jì)性思考。

每年Google I/O完了后，我們都會(huì)更新Google I/O相關(guān)的APP，我們做這個(gè)APP有2個(gè)目的。第一，讓那些在家看直播、甚至沒(méi)有機(jī)會(huì)到現(xiàn)場(chǎng)的人更身臨其境的了解Google I/O大會(huì)。第二，我們用Material Design的設(shè)計(jì)語(yǔ)言來(lái)詮釋這款應(yīng)用，并且提供了源碼，可以作為demo，供開(kāi)發(fā)人員參考。

這款應(yīng)用采用了Material Design（官方文檔中譯版）的設(shè)計(jì)方法，功能實(shí)現(xiàn)上參考了?Android L Developer Preview（Android L開(kāi)發(fā)者預(yù)覽），最后以合理、一致、可容性強(qiáng)的方式來(lái)展現(xiàn)內(nèi)容。我們來(lái)看看這款應(yīng)用的設(shè)計(jì)思路。

表面和陰影

在Material Design中，表面和陰影起到了重要的作用，能夠展示出應(yīng)用的層級(jí)架構(gòu)。Material Design官方文檔勾勒出了一系列的布局原則，這給予了我們很多設(shè)計(jì)上的參考，讓我們知曉陰影何時(shí)應(yīng)該出現(xiàn)。下面就是我們?cè)谠O(shè)計(jì)這款應(yīng)用中的“日程表”時(shí)所經(jīng)歷的一些迭代歷程：

初次迭代、二次迭代，三次迭代

第一次迭代版本問(wèn)題良多。首先APP欄下面的那層陰影讓人感覺(jué)，界面中只有2張紙：一張承載了App欄，另外一張承載了標(biāo)簽欄和屏幕內(nèi)容。而APP欄下面的那張紙承載的內(nèi)容太多，太復(fù)雜：本來(lái)潑墨效果務(wù)求簡(jiǎn)約的，但是在現(xiàn)實(shí)生活中，紙張?jiān)酱?，墨勻開(kāi)的速度就越慢，因此可能會(huì)造成一定程度的混淆。除了2張紙的設(shè)計(jì)思路，還有一種思路是將標(biāo)簽也獨(dú)立成一張紙，介于APP欄和內(nèi)容層之間，但是層級(jí)太多，容易讓人感到分心。

第二版和第三版迭代好了不少，構(gòu)建了功能界面和內(nèi)容之間更為清晰的辨識(shí)感，同時(shí)讓勻墨效果集中在文本、圖標(biāo)上。

另外一個(gè)就是“表面層”的設(shè)計(jì)概念，這個(gè)在我們的細(xì)節(jié)頁(yè)面中占了很大比重，我們最開(kāi)始動(dòng)效是這么做的：當(dāng)你在細(xì)節(jié)頁(yè)面進(jìn)行滾動(dòng)的時(shí)候。頂部Banner會(huì)漸隱，同時(shí)會(huì)從圖像轉(zhuǎn)化為純色。而圖像滾動(dòng)的速度是標(biāo)題滾動(dòng)速度的一半，造成了視差滾動(dòng)效果。但是我們發(fā)覺(jué)這種效果和現(xiàn)實(shí)中的物理規(guī)律不服，讓人感覺(jué)圖像上的文字和圖像不是一體的，感覺(jué)像是文字漂浮在一張紙上，兩者都做運(yùn)動(dòng)。

第一版，升級(jí)版

在六月25號(hào)的應(yīng)用升級(jí)中，我們提供了更好地方法，我們引入了一種更新穎、更簡(jiǎn)短的表面層設(shè)計(jì)概念，標(biāo)題文本給人的感覺(jué)不再是懸浮的，而是實(shí)實(shí)在在的印刷在紙張上的質(zhì)感。這個(gè)表面層有著一致的色彩和透明度。動(dòng)效是：在下滾動(dòng)時(shí)，表面層（以及上面粘附的按鈕）會(huì)緊緊的卡在內(nèi)容的上方，在向上滾動(dòng)時(shí)，由于空間沖突，內(nèi)容會(huì)插入到表面層的底部。

更符合物理規(guī)律的滾動(dòng)效果

這種方法更符合Material Design設(shè)計(jì)語(yǔ)言的規(guī)律，而且結(jié)果更符合視覺(jué)連貫性，更有交互性，動(dòng)效也更有意義。 (代碼見(jiàn):?Fragment,?Layout XML)

色彩

Material Design的關(guān)鍵性原則之一是界面應(yīng)該“大膽、圖形化、有意義”，利用印刷設(shè)計(jì)的一些基本元素，達(dá)成優(yōu)異的視覺(jué)指引。我們來(lái)看看這兩個(gè)元素：色彩和版式對(duì)齊。

在Material Design中，UI配色提倡一種主色，一種互補(bǔ)色。區(qū)域較大部分的色彩采用主色的500色調(diào)，區(qū)域較小的部分例如狀態(tài)欄采用深一點(diǎn)的色調(diào)，例如，700。

互補(bǔ)色需要巧妙運(yùn)用，用來(lái)吸引用戶對(duì)關(guān)鍵性元素的注意。溫和的主色，搭配以稍微明亮的互補(bǔ)色，讓?xiě)?yīng)用看起來(lái)大膽、充滿色彩感，凸顯內(nèi)容。

在I/O 應(yīng)用中，我們選擇了兩種互補(bǔ)色，以便在不同情況下使用。大部分地方的互補(bǔ)色選取了Pink 500, 這是比較明顯的互補(bǔ)色，有些地方選用了Light Blue 500，較為保守，在應(yīng)用中，我們用這個(gè)顏色來(lái)填充“添加到日程表”這個(gè)按鈕，頁(yè)面指示器以及用來(lái)暗示標(biāo)簽欄中所選標(biāo)簽(代碼見(jiàn):?XML color definitions,Theme XML)

互補(bǔ)色在APP中的應(yīng)用

圖像下方的話題區(qū)表面層的顏色選取根據(jù)具體話題、具體頁(yè)面、具體圖像的顏色來(lái)選取，基本取色與圖像。我們利用Material Design文檔中提供的配色表，稍微調(diào)整，以確保整體亮度的一致性，以及話題區(qū)和懸浮的視覺(jué)契合感。

下面這個(gè)圖像代表了我們?cè)谂渖系奶剿鳉v程。

話題區(qū)顏色去飽和和全包和版本，全都附帶懸浮按鈕以便對(duì)照。去飽和版本幫助評(píng)估配色表亮度的一致性。

邊距

傳統(tǒng)印刷設(shè)計(jì)中，版式邊距的考量亦很重要。而重中之重的“基線”在谷歌官方文檔Material Design排版邊距中有所提及。盡管我們已經(jīng)習(xí)慣于使用4dp網(wǎng)格來(lái)為垂直布局定型（按鈕和簡(jiǎn)單地列表項(xiàng)是48dp，標(biāo)準(zhǔn)的工具欄是56dp），但是Material Design中，基線與之前有所不同。一般來(lái)說(shuō)標(biāo)題和其他文本項(xiàng)會(huì)對(duì)其到“第二基線（Keyline 2）”（手機(jī)是72dp，平板是80dp），這種對(duì)齊規(guī)則讓界面看起來(lái)清爽、具有印刷設(shè)計(jì)的閱讀節(jié)奏感。讓用戶得以快速閱讀信息，比較符合格式塔原則。

網(wǎng)格系統(tǒng)

Material Design的另外一個(gè)關(guān)鍵原則是“這是一種能夠自適應(yīng)的設(shè)計(jì)”

一個(gè)單獨(dú)的底層設(shè)計(jì)系統(tǒng)，能夠有效組織交互行為，利用空間。多種設(shè)備可以使用同樣的底層系統(tǒng)，但是顯示效果不同。每種設(shè)備上的顯示效果會(huì)根據(jù)屏幕尺寸和設(shè)備交互特性而定。色彩、圖標(biāo)、層級(jí)感、空間關(guān)系仍要保持一致。

現(xiàn)在，在I/O應(yīng)用中得很多界面都需要呈現(xiàn)話題集合，讓用戶選擇。為了呈現(xiàn)集合性質(zhì)的內(nèi)容，Material Design提供了很多容器：卡片、列表、網(wǎng)格系統(tǒng)。但是既然我們展示的是性質(zhì)相同的內(nèi)容，所以采取卡片不合適，因?yàn)榭ㄆ膱A角和陰影會(huì)添加太多視覺(jué)干擾，無(wú)法高效編組呈現(xiàn)內(nèi)容。自適應(yīng)網(wǎng)格是最好的選擇，我們可以定義變化欄數(shù)和屏幕尺寸(源代碼), 也可以很方便的添加文本信息。

令人愉悅的細(xì)節(jié)

在這款應(yīng)用中，有兩處細(xì)節(jié)我們花了大工夫，一個(gè)是觸控的漣漪效果/勻開(kāi)效果，另外一個(gè)是點(diǎn)擊“添加到日程表”按鈕時(shí)的小動(dòng)效。

在漣漪效果樣式上，我們采取了兩種，一種是裁剪過(guò)得漣漪效果，一種未裁剪，同時(shí)確保可以定制漣漪的顏色，以便在不同的背景色下保證漣漪的可見(jiàn)（但是不要太明顯，隱隱若現(xiàn)最好，代碼見(jiàn)：Light ripples,?Dark ripples）

在這個(gè)應(yīng)用中，我個(gè)人最喜歡的部分是點(diǎn)擊懸浮按鈕時(shí)的動(dòng)效，個(gè)性十足。

我們使用了Android L開(kāi)發(fā)者預(yù)覽文檔中一系列新的API方法

1. View.setOutline和?setClipToOutline??用來(lái)裁剪漣漪效果，以及動(dòng)態(tài)陰影渲染
2. android:stateListAnimator用來(lái)實(shí)現(xiàn)當(dāng)手指按壓按鈕式，按鈕的懸浮效果（其實(shí)是增加投影造成的視覺(jué)欺騙）
3. RippleDrawable?用來(lái)實(shí)現(xiàn)按壓時(shí)所呈現(xiàn)的勻墨反饋效果
4. ViewAnimationUtils.createCircularReveal?用來(lái)顯示藍(lán)/白背景
5. AnimatedStateListDrawable用來(lái)定義關(guān)鍵幀動(dòng)畫(huà)，從而改變圖標(biāo)狀態(tài)（從“+”號(hào)變成“對(duì)勾”）

最終的結(jié)果是整款應(yīng)用看起來(lái)非常美麗，且具有愉悅性，我們很滿意。希望你能從我們應(yīng)用的開(kāi)發(fā)和設(shè)計(jì)中汲取到經(jīng)驗(yàn)。

SOURCE:ui.cn