MaterialDesign(Google)设计规范
2019-07-12 10:01:22 0 举报
AI智能生成
为你推荐
查看更多
Material Design是谷歌出的针对一切屏幕产品的设计规范
作者其他创作
大纲/内容
Material Design(Google)设计规范
交互设计
下面指的是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 条评论
回复 删除
下一页