MaterialDesign（Google）设计规范
2019-07-12 10:01:22 0 举报AI智能生成
Material Design是谷歌出的针对一切屏幕产品的设计规范
作者其他创作
大纲/内容
交互设计
下面指的是MD规范（material design）
实体感
用光效、表面质感、运动感提现
鲜明、现象、深思熟虑
排版、网格、空间、比例、配色、图像
动画效果
关于material（原质化）
环境
3D世界、光影关系
属性（类比于实物材料）
有长宽和厚度、投射光有阴影
不能弯曲折叠、不能被穿过
可以改变大小形状、可以移动
高度和光影
动画
真实的动作
根据材料的体积和重量来决定运动的时间和幅度
响应式交互
表层响应
触控涟漪
元素响应
以触控点为原点展开新元素的动画、点击浮动
径向响应
转场动画
转场元素：新入、淡出、通用
有层次时序、避免切屏、具有连贯性
样式
色彩
三个色度+一个强调色+备用强调色
字体
基于 12、14、16、20 和 34 号的字体排版缩放
基础色/色彩对比度
大字号/动态字体尺寸
换行规则/连字符
每行长度包含的字符-60个
图标
产品图标、系统图标
图像
个人关联、信息、闪光点、不要局限图片库
书写
语言
用“你”、不用“我们”专注用户做的事情、简洁、易懂、表述现在时、省略不必要的短语、一致性、目标引导而非方法引导、只在必要时显示细节、不绝对、按钮文本
语气
友好、尊重、关注用户、谦逊、积极、必要
布局
准则
布局页面、页面工具栏、浮动操作、自适应准则、维度、深度、阴影
单位、度量、边框
查看前面UI设计
结构
启动页、内嵌式导航和操作、顶层视图、标签栏、左侧导航抽屉、浮动操作按钮、应用栏、底栏、
自适应UI
断点细节、栏栅、外边距与间隔；模式：展现、转化、分隔、重绘、扩展
模式
APP结构
启动页面、顶层导航、混合导航
数据格式
时间和日期保持简介和模块化
空状态
图片和提示语显示空状态、启动页面、指示内容、最佳匹配
错误
输入错误
带字数统计、冲突值、不完整表单、单行列表错误
应用错误
应用反馈、加载失败、链接失效、冲突状态（限制截图等）、离线提示、许可请求
内容选择
项目选择（拖拽多选）、文本选择
手势
单击、双击、拖拽、轻划、快掷、长按、长按拖动、双触拖动、捏放、捏合、双指触击、双指拖拽（轻划、快掷）、双指长按、双指长按拖动、双指双击、双指旋转、
点击、取消或退出、开启或关闭、滚动或平移、内容选择、选择后移动、放大或缩小、展开、折叠、旋转、拉动刷新
启动屏幕
站位UI、品牌启动页面
加载图像
逐渐增强、持续时间、大一点的屏幕、添加动画
抽屉式导航
高度、选择状态、分隔线、滚动、设置和支持
还有
导航、导航过渡、滚动技巧、改进的操作、设置、影像处理、搜索、刷新
可用性
可达性
无声音、无颜色、高对比、大屏幕、无屏幕、语音控制
双向性
LTR&RTL
UI设计
单位概念
PPI：像素密度
根号（长度像素平方+宽度像素平方）/屏幕对角线英寸数
HVGA屏density=160
QVGA屏density=120
WVGA屏density=240
WQVGA屏density=120
DPI：印刷网点数
Screen size：屏幕尺寸
指屏幕对角线的长度，单位是英寸
Resolution：分辨率
屏幕水平和垂直方向上的像素个数
PX（pixel）：像素
DP：间距单位
dp*ppi/160=px
SP：字号单位
ds*ppi/160=px
多种屏幕分辨率规格
低（ldpi）
240*320px
dp=0.7px
中（mdpi）
320*480px
dp=1px
高（hdpi）
480*800px
dp=1.5px
超高（xhdpi）
720*1280px
dp=2px
高清（xxhdpi）
1080*1920px
dp=3px
常用尺寸
可触摸UI元件
48pd=72px=9mm
最小可点击尺寸
48pd=72px=18sp
默认list高度
48dp=72px
元素间最小间距
8dp=12px
因此8dp栅格可规范设计和开发
默认button高度
40dp=60px
图标规范
启动图标
移动设备：48*48dp
应用市场：512*512px
操作栏图标
图标大小：32*32dp
图形区域：24*24dp
小（状态）图标
图标大小：16*16dp
图形区域：12*12dp
边框
左右16dp垂直边框
上面24dp水平边框
平板上和左右都是 24边框
比例边框：16:9、3:2、4:3、1:1、3:4、2:3
http://wiki.jikexueyuan.com/project/material-design/
0 条评论
下一页
