三維世界(3D world):
x , y , z 三維坐標(biāo)屬性
z 軸上占據(jù)一定的位置并且有一個(gè) 1dp 厚度的標(biāo)準(zhǔn)
光影關(guān)系(Light and shadow) :
所有陰影都是由直射光和散射光這兩種光投射產(chǎn)生的
3種組合類型:
直射光投射的陰影
散射光投射的陰影
直射光和散射光混合投影
物理特性
材料具有變化的長(zhǎng)寬尺寸(以 dp 為計(jì))和均勻的厚度(1dp)
材料的高度和寬度是可變的,會(huì)形成陰影
材料能展示任何形狀和顏色
材料的變化
材料僅沿著它的水平面增長(zhǎng)和收縮。
材料能被割開(kāi),還能再度變?yōu)橥暾?/span>
材料的移動(dòng)
材料能沿任何軸移動(dòng)。
Z 軸的運(yùn)動(dòng)是由于用戶的交互而產(chǎn)生的提示。
“高度”(Elevation)和“光影”(Shadows)
組件高度
元素在某一平臺(tái)中可能會(huì)存在多種靜止高度,這取決于環(huán)境的深度。(比如,TV 相比于移動(dòng)端和桌面來(lái)說(shuō)就具有更深的層次)
感應(yīng)高度與動(dòng)態(tài)高度偏移
根據(jù)用戶的輸入或者按壓來(lái)改變高度
避免高度沖突
“浮動(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
底部單頁(yè) 16dp
刷新按鈕 3dp
快速查詢/搜索條 靜止?fàn)顟B(tài):2dp 滾動(dòng)狀態(tài):3dp
任何物體進(jìn)場(chǎng)和退場(chǎng)時(shí),都應(yīng)處于最大速率
輕量化小型物體可以很快完成加速和減速,而大型較重物體需要更多時(shí)間才能達(dá)到最大速度
這些物理規(guī)律使速度可進(jìn)行適當(dāng)調(diào)整。
浮起表明正處于激活狀態(tài)
視覺(jué)連貫性:
在兩個(gè)不同視覺(jué)效果之間的轉(zhuǎn)場(chǎng)應(yīng)該平滑、輕快。四兩撥千金
視覺(jué)連貫性設(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ì)中如何利用色彩和通用元素建立視覺(jué)聯(lián)系?
3.謹(jǐn)慎添加動(dòng)效
避免突兀的瞬間切屏,新元素應(yīng)該以淡入淡出的方式出現(xiàn)
通過(guò)元素移動(dòng)時(shí)的順序與時(shí)機(jī)來(lái)使得信息展示有層次感
元素移動(dòng)都要有意義有秩序
確保元素的運(yùn)動(dòng)要和整體界面在物理規(guī)律上契合,避免多個(gè)雜亂的運(yùn)動(dòng)軌跡
要有打動(dòng)用戶的細(xì)節(jié),構(gòu)建出一個(gè)無(wú)縫美觀且功能強(qiáng)大的應(yīng)用
1、文本、圖標(biāo)、分割線要設(shè)置透明度
白色背景中,標(biāo)準(zhǔn)的文本透明度是87%(#000000)。
次級(jí)文本/圖標(biāo), 不透明度應(yīng)該是48% (#000000)。
提示文本,更低的視覺(jué)層級(jí),不透明度是24% (#000000).
通過(guò)設(shè)置透明度,提高對(duì)比感
狀態(tài)欄采用了700藍(lán),比主色稍深
2 強(qiáng)調(diào)色與備用強(qiáng)調(diào)色
靚麗的強(qiáng)調(diào)色可被用來(lái)當(dāng)做按鈕和控件,例如開(kāi)關(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ù)尺寸和字重來(lái)設(shè)置
小字號(hào)采用自動(dòng)換行,其他字體樣式保持單行
行字符寬度:
好的閱讀體驗(yàn),每行大約60個(gè)字符
字距 :
隨著字號(hào)的大小變化與用途的變化,字距相應(yīng)變化
字號(hà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)的圖像來(lái)愉悅用戶,讓體驗(yàn)充滿魔力(可視化)
設(shè)計(jì)要求:
沉浸體驗(yàn),大膽的將色彩、內(nèi)容和圖像整合
創(chuàng)意性的添加視覺(jué)圖形,提高信息表現(xiàn)力。
少用圖庫(kù),不要一些泛泛的照片,要代表性強(qiáng)
照片主題貼合文字,圖片有視覺(jué)焦點(diǎn)
圖形能講述富有沉浸性的故事,同時(shí)能夠提示上下文
圖片不要過(guò)度處理,高斯模糊或?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)格線
使用相同的視覺(jué)元素
基于卡片的設(shè)計(jì)
卡片工具欄:
導(dǎo)航(抽屜菜單或者是返回箭頭) 相關(guān)的操作通常出現(xiàn)在左側(cè),
應(yīng)用在當(dāng)前頁(yè)面內(nèi)容的操作放在右側(cè)。
響應(yīng)式設(shè)計(jì)原則:
考慮邊角距離
概念模型:每個(gè)應(yīng)用其實(shí)是存在于不同空間和容器中的。在一個(gè)應(yīng)用中刪除一個(gè)列表不會(huì)在引起另一個(gè)應(yīng)用的變化。
一個(gè)按鈕的懸停狀態(tài)是次要層級(jí),而其按壓狀態(tài)是主要層級(jí)。
浮動(dòng)動(dòng)作按鈕總是出現(xiàn)內(nèi)容和工具欄的 上面,無(wú)論這個(gè)應(yīng)用正在使用多少個(gè)卡片。
深度感是為了功能。深入思考你的應(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)用來(lái)干什么?由此來(lái)構(gòu)建界面的用戶體驗(yàn))
2內(nèi)容優(yōu)先:立即與內(nèi)容交互,獲取核心體驗(yàn)
UI規(guī)范:
卡片式布局需要大量的留白空間,也需要分割線來(lái)劃分清晰。
底部卡片:
就像一張紙從屏幕底部向上滑動(dòng)出來(lái)
適合給用戶提供三個(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散效果的方形紙片按鈕。
更清晰可見(jiàn),給扁平的布局帶來(lái)層次感
3 扁平按鈕:墨水?dāng)U散效果,沒(méi)有浮起的效果。
避免頁(yè)面上過(guò)多無(wú)意義的層疊
顏色飽滿的圖標(biāo)應(yīng)當(dāng)是功能性的。
圖標(biāo)開(kāi)關(guān):
用在應(yīng)用導(dǎo)航條或者工具條上,作為動(dòng)作按鈕或者開(kāi)關(guān)
下拉菜單:
卡片:
卡片帶圓角
卡片帶多種操作
紙片
提示框:
包含:取消/確定的簡(jiǎn)單應(yīng)答模式 與 自定義布局的復(fù)雜模式
1、加寬型豎排按鈕:豎向疊模式來(lái)呈現(xiàn)我們的按鈕 文字信息
2、并排按鈕:每個(gè)按鈕的文本信息都沒(méi)有超過(guò)通常的按鈕寬度時(shí)
注意:滾動(dòng)時(shí),漏出一部分文字或者控件,來(lái)提示用戶。
分隔線
分隔線是一種弱規(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)彈出框的形式存在
用很短的文本流來(lái)構(gòu)成
開(kāi)關(guān):
三種類型的開(kāi)關(guān):復(fù)選框、單選按鈕和 on/off 開(kāi)關(guān)
復(fù)選框:多個(gè) on/off 選擇
單選按鈕:只允許用戶從一組中選擇一個(gè)選項(xiàng)(排他選擇)
on/off 開(kāi)關(guān):通過(guò)動(dòng)畫來(lái)傳達(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 可見(jiàn)內(nèi)容要高亮
文本框:
四種類型:1單行文本框 2帶有圖標(biāo)的文本框 3多行文本框 4全寬度文本字段
單行/多行字符計(jì)數(shù)器
搜索過(guò)濾器
工具提示:
1.具有交互性
2.主要是圖形而非文本
光標(biāo)和鍵盤的工具提示
選擇:
列表和網(wǎng)格支持多重選擇
文字選中:
高亮顯示,
選中的開(kāi)始和末尾添加上手柄,
手勢(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)階操作的開(kāi)關(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)可加入一些功能:
? 語(yǔ)音搜索
? 搜索歷史為用戶提供搜索建議
? 提供即時(shí)匹配
應(yīng)用程序內(nèi)部搜索主要有兩種模式: 持續(xù)式搜索 和 伸縮式搜索
0
喜歡他,就推薦他上首頁(yè)吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會(huì)員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)
移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)