前不久我們發布了 Google I/O 2014 App，源碼已開源於 GitHub，有興趣可前往一探我們如何在該 App 中落地 Material Design 的功能與細節。本文將分享我們對 Material Design 的設計層面思考。

每年 I/O 大會結束，我們都會更新官方 App，目的有二：一、讓未能親臨現場的開發者也能身臨其境了解大會；二、以 Material Design 語言詮釋應用，並提供源碼作為開發者參考 Demo。

該 App 採用 Material Design 設計方法，功能實現參考 Android L Developer Preview，以合理、一致、強適配性的方式呈現內容。以下剖析核心設計決策。

表面與陰影：構建層級感的基石

在 Material Design 中，表面與陰影共同定義應用的層級架構。官方文檔提供了一套佈局原則，指導陰影何時出現。以「日程表」頁面為例，我們經歷了三輪迭代：

初版、二版、三版迭代對比

首版問題顯著：App Bar 下方的陰影暗示界面只有兩張「紙」——一張承載 App Bar，另一張承載標籤欄與屏幕內容。後者內容過多過複雜，導致潑墨效果本求簡約卻因「紙張過大、墨跡鋪開慢」而產生混淆。另一思路是將標籤獨立為中間層，但層級過多易分散注意力。

二、三版顯著改善：構建了功能界面與內容間更清晰的辨識度，並將潑墨效果聚焦於文本與圖標。

另一關鍵概念是「表面層」，在詳情頁佔據重要比重。初版動效：滾動時頂部 Banner 漸隱並由圖像轉為純色，圖像滾動速度為標題一半，形成視差效果。但我們發現這違背物理直覺——文字與圖像彷彿分離，像漂浮在紙上各自運動。

首版與升級版對比

6月25日更新引入更優的表面層設計：標題文本不再懸浮，而是實打實印刷在紙張上。表面層擁有統一色彩與透明度。動效邏輯：下滾時表面層（含吸附按鈕）緊貼內容上方；上滾時因空間衝突，內容插入表面層底部。

更符合物理規律的滾動效果

此方案更貼合 Material Design 規範，視覺連貫性更強，交互更直觀，動效更有意義。（代碼參考：Fragment, Layout XML）

色彩：大膽、圖形化、有意圖

Material Design 核心原則之一：界面應「大膽、圖形化、有意義」，利用印刷設計基本元素實現優異視覵引導。聚焦色彩與版式對齊。

UI 配色提倡一主一輔：大面積採用主色 500 色調，狀態欄等小區域用 700 色調。輔助色巧妙點綴關鍵元素，溫和主色配明亮輔助色，使應用大膽豐滿、內容凸顯。

I/O App 採用雙輔助色：Pink 500 為主輔助色（較明顯），Light Blue 500 用於「加入日程」按鈕、頁面指示器、標籤欄選中態等保守場景。（代碼參考：XML color definitions, Theme XML）

輔助色在 App 中的應用

話題區表面層顏色根據具體話題、頁面、圖像動態取色，配合 Material Design 配色表微調，確保整體亮度一致與懸浮按鈕視覺契合。

話題區配色探索歷程：去飽和版本輔助評估亮度一致性

邊距與基線：印刷級閱讀節奏

傳統印刷設計中版式邊距至關重要，核心在於「基線」。Google 官方文檔定義了排版邊距。我們習慣用 4dp 網格縱向定型（按鈕/列表項 48dp，標準工具欄 56dp），但 Material Design 中基線規則不同：標題與文本項對齊至「第二基線」（手機 72dp，平板 80dp），賦予界面清爽的印刷級閱讀韻律，符合格式塔原則，助用戶快速掃讀。

自適應網格系統：一套系統，多端統一

Material Design 另一核心原則：「這是一種能夠自適應的設計」。單一底層系統組織交互與空間，多設備共用系統但呈現差異，色彩、圖標、層級、空間關係保持一致。

I/O App 多處需呈現話題集合供選擇。Material Design 提供卡片、列表、網格等容器。因內容性質相同，卡片圓角陰影會造成視覵干擾，降低編組效率；自適應網格成最佳選，可定義變化列數與屏幕尺寸關係，便捷添加文本信息。（源代碼參考）

愉悅細節：漣漪與懸浮按鈕動效

兩處細節投入巨大精力：觸控漣漪/潑墨效果、點擊「加入日程」懸浮按鈕的微動效。

漣漪樣式分裁剪與未裁剪兩類，並可定制顏色以適配不同背景（隱約可見最佳，代碼參考：Light ripples, Dark ripples）。

個人最愛是懸浮按鈕點擊動效，個性十足。

採用 Android L Preview 新 API：
View.setOutline / setClipToOutline 裁剪漣漪與動態陰影渲染
android:stateListAnimator 實現按壓時按鈕懸浮效果（實為……