【Material Design視覺設計語言】開篇

做者：郭孝星
微博：郭孝星的新浪微博
郵箱：allenwells@163.com
博客：http://blog.csdn.net/allenwells
Github：https://github.com/AllenWells

【Material Design視覺設計語言】章節列表

【Material Design視覺設計語言】開篇
【Material Design視覺設計語言】Material Design設計概述
【Material Design視覺設計語言】應用佈局設計
【Material Design視覺設計語言】應用自適應佈局
【Material Design視覺設計語言】應用樣式設計
【Material Design視覺設計語言】應用動畫設計
【Material Design視覺設計語言】UI組件設計（一）：button
【Material Design視覺設計語言】UI組件設計（二）：卡片
【Material Design視覺設計語言】UI組件設計（三）：紙片
【Material Design視覺設計語言】UI組件設計（四）：表格
【Material Design視覺設計語言】UI組件設計（五）：提示框
【Material Design視覺設計語言】UI組件設計（六）：分隔線
【Material Design視覺設計語言】UI組件設計（七）：網格
【Material Design視覺設計語言】UI組件設計（八）：列表
【Material Design視覺設計語言】UI組件設計（九）：菜單
【Material Design視覺設計語言】UI組件設計（十）：選擇器
【Material Design視覺設計語言】UI組件設計（十一）：進度條
【Material Design視覺設計語言】UI組件設計（十二）：滑塊
【Material Design視覺設計語言】UI組件設計（十三）：Toast
【Material Design視覺設計語言】UI組件設計（十四）：Tabs
【Material Design視覺設計語言】UI組件設計（十五）：文本框

Material Design，即原質化設計，是Google官方退出的視覺設計語言，目的在於統一Android應用界面設計，提高用戶體驗。其實不僅在Android上，在HTML等其它領域。Material Design也表現出了旺盛的生命力。

一 設計目標

Material Design的設計目標就是構建Android跨平臺和設備尺寸的統一用戶體驗，遵循主要的移動設計原則，同一時候支持觸摸、語音、鼠標和鍵盤等多種輸入方式。

二 設計原則

2.1 應用界面組件具備實體感

實體感即實體隱喻，是構建系統化和空間合理化的統一，不同凡響的觸感是實體感的基礎。

實體感的效果體驗來源於兩個方面：

• 實體的表面
• 實體的邊緣

實體的表面和邊緣提供基於真實效果的視覺體驗，熟悉的觸感讓咱們的用戶可以高速地理解和認知。實體的多樣性可以讓咱們呈現出不少其它反映真實世界的設計效果，但同一時候又不會脫離客觀的物理規律。

那麼怎樣在應用的設計中向用戶闡述組件的運動規律、交互方式、空間關係呢？

解答這個問題不得不提到光效、表面質感、運動感這三個重要的概念。

尤爲是光效，真實的光效可以解釋應用組件之間的交合關係以及空間關係。例如如下圖所看到的：

2.2 組件的顏色和佈局要鮮明和形象

在組件的佈局和顏色搭配上，要從排版、網絡、空間、比例、配色和圖像使用等方面去考量，精心選擇色彩、圖像和合乎比例的字體和留白，構建出鮮明和形象的用戶界面。

在組件功能設計上要依據用戶行爲凸顯核心功能，進而在應用上爲用戶提供友好高效的操做指引。

2.3 爲組件加入有意義的動畫效果

動畫效果是做爲獨立的場景呈現，表現出組件的連續變化，讓用戶吸引用戶的注意裏，以及維持整個系統的連續性體驗。

動畫效果在設計時應該作到：

• 動畫效果應該是有意義的、合理的。可以有效的暗示和指引用戶。
• 動畫效果的設計應該依據用戶的行爲而定，可以改變整體設計的觸感。

• 動畫效果反饋應該細膩、清爽。轉場動畫應該高效、明晰。

開篇文章大體就講到這裏，興許的文章會具體討論樣式、佈局、動畫和組件設計等內容。