

首页  思维导图  详情



MaterialDesign（Google）设计规范

2019-07-12 10:01:22   0  举报





AI智能生成

Material Design是谷歌出的针对一切屏幕产品的设计规范

UI设计

产品经理

模版推荐

作者其他创作

大纲/内容

交互设计

下面指的是MD规范（material design）

实体感

用光效、表面质感、运动感提现

鲜明、现象、深思熟虑

排版、网格、空间、比例、配色、图像

动画效果

关于material（原质化）

环境

3D世界、光影关系

属性（类比于实物材料）

有长宽和厚度、投射光有阴影

不能弯曲折叠、不能被穿过

可以改变大小形状、可以移动

高度和光影

动画

真实的动作

根据材料的体积和重量来决定运动的时间和幅度

响应式交互

表层响应

触控涟漪

元素响应

以触控点为原点展开新元素的动画、点击浮动

径向响应

转场动画

转场元素：新入、淡出、通用

有层次时序、避免切屏、具有连贯性

样式

色彩

三个色度+一个强调色+备用强调色

字体

基于 12、14、16、20 和 34 号的字体排版缩放

基础色/色彩对比度

大字号/动态字体尺寸

换行规则/连字符

每行长度包含的字符-60个

图标

产品图标、系统图标

图像

个人关联、信息、闪光点、不要局限图片库

书写

语言

用“你”、不用“我们”专注用户做的事情、简洁、易懂、表述现在时、省略不必要的短语、一致性、目标引导而非方法引导、只在必要时显示细节、不绝对、按钮文本

语气

友好、尊重、关注用户、谦逊、积极、必要

布局

准则

布局页面、页面工具栏、浮动操作、自适应准则、维度、深度、阴影

单位、度量、边框

查看前面UI设计

结构

启动页、内嵌式导航和操作、顶层视图、标签栏、左侧导航抽屉、浮动操作按钮、应用栏、底栏、

自适应UI

断点细节、栏栅、外边距与间隔；模式：展现、转化、分隔、重绘、扩展

模式

APP结构

启动页面、顶层导航、混合导航

数据格式

时间和日期保持简介和模块化

空状态

图片和提示语显示空状态、启动页面、指示内容、最佳匹配

错误

输入错误

带字数统计、冲突值、不完整表单、单行列表错误

应用错误

应用反馈、加载失败、链接失效、冲突状态（限制截图等）、离线提示、许可请求

内容选择

项目选择（拖拽多选）、文本选择

手势

单击、双击、拖拽、轻划、快掷、长按、长按拖动、双触拖动、捏放、捏合、双指触击、双指拖拽（轻划、快掷）、双指长按、双指长按拖动、双指双击、双指旋转、

点击、取消或退出、开启或关闭、滚动或平移、内容选择、选择后移动、放大或缩小、展开、折叠、旋转、拉动刷新

启动屏幕

站位UI、品牌启动页面

加载图像

逐渐增强、持续时间、大一点的屏幕、添加动画

抽屉式导航

高度、选择状态、分隔线、滚动、设置和支持

还有

导航、导航过渡、滚动技巧、改进的操作、设置、影像处理、搜索、刷新

可用性

可达性

无声音、无颜色、高对比、大屏幕、无屏幕、语音控制

双向性

LTR&amp;RTL

UI设计

单位概念

PPI：像素密度

根号（长度像素平方+宽度像素平方）/屏幕对角线英寸数

HVGA屏density=160&#13; QVGA屏density=120&#13; WVGA屏density=240&#13; 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/

 Collect

Get Started

互联网产品设计规范-小程序设计规范

 Collect

Get Started

B端设计规范

 Collect

Get Started

建筑设计规范

 Collect

Get Started

产品设计规范





0 条评论

下一页