亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

三維世界（3D world）：
x ， y ， z 三維坐標(biāo)屬性
z 軸上占據(jù)一定的位置并且有一個(gè) 1dp 厚度的標(biāo)準(zhǔn)

光影關(guān)系（Light and shadow） ：
所有陰影都是由直射光和散射光這兩種光投射產(chǎn)生的
3種組合類型：

1. 直射光投射的陰影

2. 散射光投射的陰影

3. 直射光和散射光混合投影

三、Material 屬性

物理特性
材料具有變化的長(zhǎng)寬尺寸（以 dp 為計(jì)）和均勻的厚度（1dp）
材料的高度和寬度是可變的，會(huì)形成陰影
材料能展示任何形狀和顏色

材料的變化
材料僅沿著它的水平面增長(zhǎng)和收縮。
材料能被割開，還能再度變?yōu)橥暾?/span>

材料的移動(dòng)
材料能沿任何軸移動(dòng)。
Z 軸的運(yùn)動(dòng)是由于用戶的交互而產(chǎn)生的提示。

四、高度和陰影

“高度”（Elevation）和“光影”（Shadows）

組件高度
元素在某一平臺(tái)中可能會(huì)存在多種靜止高度，這取決于環(huán)境的深度。（比如，TV 相比于移動(dòng)端和桌面來說就具有更深的層次）

感應(yīng)高度與動(dòng)態(tài)高度偏移
根據(jù)用戶的輸入或者按壓來改變高度

避免高度沖突
“浮動(dòng)動(dòng)作按鈕”（FAB）

圖：不同控件的高度規(guī)定

對(duì)象的高度增加時(shí)其陰影會(huì)變得更柔和、更大，當(dāng)其高度減小時(shí)，陰影會(huì)變得更卷曲

元素參考陰影
應(yīng)用條：4dp
浮動(dòng)按鈕：靜態(tài)：2dp 敲擊狀態(tài)：8dp
浮動(dòng)動(dòng)作按鈕（FAB）：靜態(tài)：6dp 敲擊狀態(tài)：12dp
卡片 靜態(tài)：2dp 選中狀態(tài)：8dp
菜單和子菜單 菜單：8dp 子菜單：9dp（為子菜單增加 1dp）
對(duì)話框 24dp
導(dǎo)航抽屜和右抽屜 16dp
底部單頁 16dp
刷新按鈕 3dp
快速查詢/搜索條 靜止?fàn)顟B(tài)：2dp 滾動(dòng)狀態(tài)：3dp

五、Animation

任何物體進(jìn)場(chǎng)和退場(chǎng)時(shí)，都應(yīng)處于最大速率

輕量化小型物體可以很快完成加速和減速，而大型較重物體需要更多時(shí)間才能達(dá)到最大速度
這些物理規(guī)律使速度可進(jìn)行適當(dāng)調(diào)整。
浮起表明正處于激活狀態(tài)

視覺連貫性：
在兩個(gè)不同視覺效果之間的轉(zhuǎn)場(chǎng)應(yīng)該平滑、輕快。四兩撥千金
視覺連貫性設(shè)計(jì)點(diǎn)：新入元素／淡出元素／通用元素

當(dāng)設(shè)計(jì)動(dòng)效時(shí)的思考點(diǎn)為：
1.如何引導(dǎo)用戶注意力，什么元素能輔助實(shí)現(xiàn)這個(gè)目標(biāo)？新入元素，淡出元素和通用元素在這個(gè)轉(zhuǎn)場(chǎng)中應(yīng)該怎樣被強(qiáng)調(diào)或弱化？
2.在轉(zhuǎn)場(chǎng)動(dòng)效設(shè)計(jì)中如何利用色彩和通用元素建立視覺聯(lián)系？
3.謹(jǐn)慎添加動(dòng)效

避免突兀的瞬間切屏，新元素應(yīng)該以淡入淡出的方式出現(xiàn)
通過元素移動(dòng)時(shí)的順序與時(shí)機(jī)來使得信息展示有層次感
元素移動(dòng)都要有意義有秩序
確保元素的運(yùn)動(dòng)要和整體界面在物理規(guī)律上契合，避免多個(gè)雜亂的運(yùn)動(dòng)軌跡

要有打動(dòng)用戶的細(xì)節(jié)，構(gòu)建出一個(gè)無縫美觀且功能強(qiáng)大的應(yīng)用

六、色彩

1、文本、圖標(biāo)、分割線要設(shè)置透明度

• 白色背景中,標(biāo)準(zhǔn)的文本透明度是87%(#000000)。

• 次級(jí)文本/圖標(biāo), 不透明度應(yīng)該是48% (#000000)。

• 提示文本，更低的視覺層級(jí)，不透明度是24% (#000000).

通過設(shè)置透明度,提高對(duì)比感
狀態(tài)欄采用了700藍(lán),比主色稍深

2 強(qiáng)調(diào)色與備用強(qiáng)調(diào)色
靚麗的強(qiáng)調(diào)色可被用來當(dāng)做按鈕和控件，例如開關(guān)和滑塊
更淺或者更深的作為備用強(qiáng)調(diào)色
如果背景色是飽和度500的基礎(chǔ)色，那么會(huì)使用100%的白色 或者54%的黑色。

3 色彩主題 
明亮或深邃兩種主題

七、字體

Roboto
稍寬并輕微圓化

標(biāo)準(zhǔn)樣式：
12、14、16、20和34號(hào)字體排版縮放
使用Display字體樣式
App Bar中出現(xiàn)的所有標(biāo)題都要使用“標(biāo)題”樣式

基本色/色彩對(duì)比：
背景與文字的明度對(duì)比度為7:1時(shí)，是最適合閱讀的
最低不能低于4.5 : 1

大尺寸/動(dòng)態(tài)字體尺寸：
大尺寸字體讓應(yīng)用充滿趣味
動(dòng)態(tài)字體尺寸是讓文本長(zhǎng)度未知的情況下保持在容器之內(nèi)

行高：
根據(jù)尺寸和字重來設(shè)置
小字號(hào)采用自動(dòng)換行，其他字體樣式保持單行

行字符寬度：
好的閱讀體驗(yàn),每行大約60個(gè)字符

字距 ：
隨著字號(hào)的大小變化與用途的變化，字距相應(yīng)變化
字號(hào)越大，字距越小

八、圖標(biāo)

系統(tǒng)圖標(biāo)：
必須簡(jiǎn)約，現(xiàn)代感，友好
實(shí)際象征著命令、文件、設(shè)備或者目錄
設(shè)計(jì)原則：形狀鮮明，多多采用幾何形狀，對(duì)稱且一致的圖標(biāo)

網(wǎng)格繪制，統(tǒng)一比例約束形狀，2種尺寸（狀態(tài)欄和上下文圖標(biāo)、工具欄和桌面圖標(biāo)）

圓角：
不同尺寸的圖標(biāo)需要不同的圓角

九、圖像

選擇圖像：
選擇和人物相關(guān)、充滿信息、令人愉悅的圖像
1/使用人物圖像可以建立情感化聯(lián)系（圖片）
2/充滿信息的圖像，促進(jìn)用戶理解信息，打造充滿智能感的界面（圖片）
3/用驚艷的并且和信息相關(guān)的圖像來愉悅用戶，讓體驗(yàn)充滿魔力（可視化）

設(shè)計(jì)要求：

1. 沉浸體驗(yàn)，大膽的將色彩、內(nèi)容和圖像整合

2. 創(chuàng)意性的添加視覺圖形，提高信息表現(xiàn)力。

3. 少用圖庫，不要一些泛泛的照片，要代表性強(qiáng)

4. 照片主題貼合文字，圖片有視覺焦點(diǎn)

5. 圖形能講述富有沉浸性的故事，同時(shí)能夠提示上下文

6. 圖片不要過度處理，高斯模糊或?yàn)V鏡

圖像和界面的整合：
1、推薦使用大圖。在不同的設(shè)備和不同的分辨率下要進(jìn)行測(cè)試
2、文本保護(hù)。（為了確保圖像上文本的可讀性,建議添加text protection scrims）

深色的保護(hù)區(qū)域,根據(jù)內(nèi) 容,理想狀況下不透明度是20%- 40%。淺色保護(hù)區(qū)域40%-60%
給特定區(qū)域添加文本保護(hù),而不是保護(hù)區(qū)域覆蓋整個(gè)圖像
色彩疊加是另外一種保護(hù)文本的方式：互補(bǔ)色疊加

十、布局

• 基準(zhǔn)網(wǎng)格線和結(jié)構(gòu)網(wǎng)格線

• 使用相同的視覺元素

• 基于卡片的設(shè)計(jì)

卡片工具欄：
導(dǎo)航(抽屜菜單或者是返回箭頭) 相關(guān)的操作通常出現(xiàn)在左側(cè),
應(yīng)用在當(dāng)前頁面內(nèi)容的操作放在右側(cè)。

響應(yīng)式設(shè)計(jì)原則：

1. 考慮邊角距離

2. 概念模型：每個(gè)應(yīng)用其實(shí)是存在于不同空間和容器中的。在一個(gè)應(yīng)用中刪除一個(gè)列表不會(huì)在引起另一個(gè)應(yīng)用的變化。

3. 一個(gè)按鈕的懸停狀態(tài)是次要層級(jí),而其按壓狀態(tài)是主要層級(jí)。

4. 浮動(dòng)動(dòng)作按鈕總是出現(xiàn)內(nèi)容和工具欄的 上面,無論這個(gè)應(yīng)用正在使用多少個(gè)卡片。

5. 深度感是為了功能。深入思考你的應(yīng)用,了解它的層次和各個(gè)元素重要性,幫助用戶將精力集中在完成任務(wù)中。

陰影：
針對(duì)Cards、FAB、Nav、App Bar、Canvas等不同位置，具有5種左右的陰影選擇，根據(jù)規(guī)定的數(shù)值進(jìn)行設(shè)計(jì)選擇。

標(biāo)尺與參考線：
基線網(wǎng)格：組件都以一個(gè)8dp*8dp的基準(zhǔn)網(wǎng)格對(duì)齊，排版(Type)以一個(gè)4dp*4dp的基準(zhǔn)網(wǎng)格對(duì)齊

觸摸目標(biāo)：
最小觸摸目標(biāo)大小為48dp。圖標(biāo)間距(24dp),頭像(40dp)

結(jié)構(gòu)：
1自上而下的思考方式（用戶想要用這個(gè)應(yīng)用來干什么？由此來構(gòu)建界面的用戶體驗(yàn)）
2內(nèi)容優(yōu)先：立即與內(nèi)容交互，獲取核心體驗(yàn)

UI規(guī)范：
卡片式布局需要大量的留白空間，也需要分割線來劃分清晰。

十一、組件

底部卡片：
就像一張紙從屏幕底部向上滑動(dòng)出來
適合給用戶提供三個(gè)或者更多操作選擇的時(shí)候
在標(biāo)準(zhǔn)的列表式卡片中：每個(gè)選項(xiàng)應(yīng)該有一個(gè)文字描述和一個(gè)左對(duì)齊圖標(biāo)

按鈕：
1 懸浮響應(yīng)按鈕：墨水?dāng)U散效果的圓形按鈕。
兩種尺寸：默認(rèn)尺寸＋迷你尺寸
2 浮動(dòng)按鈕：墨水?dāng)U散效果的方形紙片按鈕。
更清晰可見，給扁平的布局帶來層次感
3 扁平按鈕：墨水?dāng)U散效果,沒有浮起的效果。
避免頁面上過多無意義的層疊

顏色飽滿的圖標(biāo)應(yīng)當(dāng)是功能性的。

圖標(biāo)開關(guān)：
用在應(yīng)用導(dǎo)航條或者工具條上,作為動(dòng)作按鈕或者開關(guān)

下拉菜單：

卡片：
卡片帶圓角
卡片帶多種操作

紙片

提示框：

包含：取消/確定的簡(jiǎn)單應(yīng)答模式 與 自定義布局的復(fù)雜模式
1、加寬型豎排按鈕：豎向疊模式來呈現(xiàn)我們的按鈕 文字信息
2、并排按鈕：每個(gè)按鈕的文本信息都沒有超過通常的按鈕寬度時(shí)
注意：滾動(dòng)時(shí)，漏出一部分文字或者控件，來提示用戶。

分隔線
分隔線是一種弱規(guī)則

網(wǎng)格列表
網(wǎng)格列表是一個(gè)連續(xù)元素(continuous element),該元素由棋盤式、規(guī)律性的小格子構(gòu) 成,通常稱這些格子為單元格(cells)。單元格中包含有瓦片(tiles)

列表：
分為三種，僅文本；文本＋頭像；文本＋頭像＋圖標(biāo)

1、單行列表
僅有文本,字體: Roboto Regular 16sp,瓦片高: 48dp,文本內(nèi)邊距: 16dp

2、帶有文本的圖標(biāo)
字體: Roboto Regular 16sp,瓦片高: 48dp,左邊圖標(biāo)內(nèi)邊距: 16dp,文本左內(nèi)邊距 : 72dp,文本上部和下部?jī)?nèi)邊距: 16dp

3、帶有文本的頭像
字體: Roboto Regular 16sp,瓦片高: 56dp,左邊頭像內(nèi)邊距: 16dp,文本左內(nèi)邊距 : 72dp,文本上部和下部?jī)?nèi)邊距: 20dp

4、兩行列表
僅有文本,主要文本的字體: Roboto Regular 16sp,次要文本的字體: Roboto Regular 14sp,瓦片高: 72dp,文本內(nèi)邊距: 16dp

5、帶有文本和圖標(biāo)的頭像
主要文本的字體: Roboto Regular 16sp,次要文本的字體: Roboto Regular 14sp,瓦片 高: 72dp,左邊頭像內(nèi)邊距: 16dp,文本左內(nèi)邊距: 72dp,文本上部和下部?jī)?nèi)邊距: 16dp,右邊圖標(biāo)內(nèi)邊距: 16dp

6、三行列表
僅有文本,主要文本的字體: Roboto Regular 16sp,次要文本的字體: Roboto Regular 14sp,瓦片高: 88dp,文本內(nèi)邊距: 16dp

十二、菜單

菜單是臨時(shí)的一張紙(paper),由按鈕(button)、動(dòng)作(action)、點(diǎn)(pointer)或 者包含至少兩個(gè)菜單項(xiàng)的其他控件觸發(fā)。
每一個(gè)菜單項(xiàng)限制為單行文本

進(jìn)度和動(dòng)態(tài)：
刷新條和動(dòng)態(tài)圓圈都可以顯示交互進(jìn)度
線形進(jìn)度指示器
滑塊控件：連續(xù)滑塊、數(shù)值滑塊

消息欄和彈出消息：
手機(jī)屏幕或者桌面端左下方,以浮 動(dòng)彈出框的形式存在
用很短的文本流來構(gòu)成

開關(guān)：
三種類型的開關(guān):復(fù)選框、單選按鈕和 on/off 開關(guān)
復(fù)選框：多個(gè) on/off 選擇
單選按鈕：只允許用戶從一組中選擇一個(gè)選項(xiàng)（排他選擇）
on/off 開關(guān)：通過動(dòng)畫來傳達(dá)被聚焦和被按下的狀態(tài)

切換標(biāo)簽：
作用： 為顯示內(nèi)容相關(guān)的分組提供啟示

形式：帶有搜索的切換標(biāo)簽
兩種形式：橫向滾動(dòng)／固定的

設(shè)計(jì)要求：
1 切換標(biāo)簽只有一行
2 包含2個(gè)切換標(biāo)簽并且不多于6個(gè)
3 可見內(nèi)容要高亮

文本框：
四種類型：1單行文本框 2帶有圖標(biāo)的文本框 3多行文本框 4全寬度文本字段
單行／多行字符計(jì)數(shù)器
搜索過濾器

工具提示：
1.具有交互性
2.主要是圖形而非文本

光標(biāo)和鍵盤的工具提示

第六章 模型

選擇：
列表和網(wǎng)格支持多重選擇

文字選中：
高亮顯示，
選中的開始和末尾添加上手柄，

手勢(shì)：
分為觸摸方式和觸摸動(dòng)作
輕擊、取消、啟用/關(guān)閉

捏放、雙擊、雙擊拖移等

1、觸摸

動(dòng)作：?jiǎn)胃种赴聪?拿起
含義：選擇

2、雙擊

動(dòng)作：兩根手指按下,拿起 / 一根 手指按下,拿起
含義：放大

3、拖拽/滑動(dòng)/拋擲

動(dòng)作：一根手指按下后移動(dòng),拿起

4、長(zhǎng)按

動(dòng)作：一根手指按下,等待,拿起
含義：選中一個(gè)元素，比如列表中的一個(gè)項(xiàng)目
長(zhǎng)按不用于顯示情境菜單。

5、長(zhǎng)按拖移

動(dòng)作：一根手指按下,等待,移動(dòng), 拿起
含義：拿起移動(dòng)/選中多個(gè)項(xiàng)目

6、雙擊拖移

動(dòng)作：按下,拿起,按下,拖移,拿 起
含義：放大/縮小

7、捏放

含義：放大

8、捏合

含義：縮小

9、雙指拖移,滑動(dòng),拋擲

含義:選中多個(gè)項(xiàng)目/轉(zhuǎn)動(dòng)視角

10、雙指雙擊

兩指按下,拿起,按下,拿起
含義:縮小

浮動(dòng)操作按鈕：
作為進(jìn)階操作的開關(guān)
可以變形、彈出、位移等等

一個(gè)浮動(dòng)操作按鈕應(yīng)該能夠代表這個(gè)APP中的主要操作
不要在對(duì)話框中使用浮動(dòng)按鈕,去使用扁平的按鈕

一個(gè)浮動(dòng)操作按鈕可以包含聯(lián)系人列表
不要將各類功能和聯(lián)系人或其他元素都放進(jìn)按鈕中

設(shè)置：
7個(gè)或更少的設(shè)置選項(xiàng) 不需要群組它們
8~10個(gè)設(shè)置項(xiàng)：1~2個(gè)設(shè)置組
11~15個(gè)設(shè)置項(xiàng)：2~4個(gè)設(shè)置組
大于16個(gè)設(shè)置項(xiàng)：如果你的設(shè)置項(xiàng)組大于4個(gè)的話，將內(nèi)容放到二級(jí)層中

搜索：
搜索體驗(yàn)可加入一些功能:
? 語音搜索
? 搜索歷史為用戶提供搜索建議
? 提供即時(shí)匹配

應(yīng)用程序內(nèi)部搜索主要有兩種模式: 持續(xù)式搜索 和 伸縮式搜索