Material Design 東風吹過，但真正落地產品寥寥。Teambition 設計與產品團隊完成全線 Android 客戶端 Material Design 重設計，總結 5 大關鍵要點，親測實用，想跟上潮流的設計師必讀。

一、正確用好新元素：FAB 與 Card 的克制應用

浮動操作按鈕（FAB）

Material Design 強調 Z 軸層級：扁平、抬升、浮動。FAB 位於最高層，懸浮不隨內容滾動，承載最重要單一動作（如新增任務、寫郵件）。

Teambition 統計移動端高頻操作：響應收件箱進展、新增任務分配、查看事項安排。決定將全局新增入口分配給「添加」功能，並處理兩大細節：

• 情境感知：不同界面下動態調整選項（專案列表出現「新專案」，任務詳情出現「添加備註/執行人/截止日期」）
• 避免遮擋：滾動至底部時 FAB 自動隱藏

卡片介面：非盲目替換列表

官方指導明確卡片適用場景：

1. 大量異構數據（文字/圖片混合）或超長文字（>3 行）
2. 豐富交互動作（≥3 個：如 +1、評論、分享）
3. 卡片間內容無需對比
4. 可作為整體滑動移除（如 Google Now）

反之，單一內容（圖庫）、主供瀏覽、無對應動作、不可滑動移除的信息流，**列表視圖更優**。Teambition 專案/任務列表堅持用列表，避免卡片打斷閱讀體驗。

微博改版用卡片遭吐槽，因多數用戶只瀏覽不互動；Twitter 對動作按鈕克制處理更佳。

二、材質、層疊與動畫體現資訊邏輯

借鑒現實紙張光影與海報強反差，用 Z 軸高度表達介面層級結構：

• 平縫：共同移動的介面（如工具欄+內容），如一張紙推動另一張
• 階梯：不共同移動的介面交接，陰影區隔，如靜止紙蓋住移動紙

官方定義紙夾式、瀑布式、平移式、覆蓋式等邊界模式。Teambition 採用紙夾式。

三、介面切換動畫：質量、慣性、極速進離

動畫必須具備現實運動關鍵特徵：

1. 有質量與慣性：上下運動受重力影響，非勻速，似拋物線
2. 進入/離開視野時速度最高

反例：進入後加速、離開前減速——違背自然規律，增加認知負擔。

所有介面切換需有承接前後、有意義的過渡動畫。列表點擊項目展開應滑入，支援手勢反向滑回，體驗酸爽。

四、資訊呈現一致，順應用戶預期

• App 圖標：元素 ≤ 2 層；引入 Z 軸時每層 ≤ 1dp（160dpi 基準）
• 功能圖標：風格統一、隱喻清晰、尺寸規範
• 字體、色彩、間距系統化，構建設計語言體系

五、無障礙與國際化：細節見真章

• 顏色對比度達標、支援 TalkBack/VoiceOver
• RTL（右-to-左）語言佈局鏡像適配
• 文字擴展容器自適應，不截斷/重疊

結語：規範是地圖，實踐是領土

Material Design 規範提供方向，但具體產品語境下的取捨與微調，才是設計師的核心價值。Teambition 實踐證明：克制用好新元素、動畫服務邏輯、一致性貫穿始終，才能真正搞定重設計。