资源描述
,设计规范,李若鹏,2015.10.26,MaterialDisign,目录,1,简介,2,GUI设计规范,3,总结,简单介绍MaterialDesign。,实例说明Materialdesign设计规范。,总结与展望。,1,来源,谷歌推出的全新的设计语言，应用于手机、平板电脑、台式机和“其他平台”。,2,特点,颜色鲜艳，动画突出，干净，简约，外观更一致且更广泛,什么是Materialdesign,1,把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。,核心思想,元素,魔法纸片,纸片层叠、合并、分离、分裂、伸缩，拥有现实中的厚度、惯性和反馈，同时拥有液体的一些特性，能够自由伸展变形。,1,2,但是纸片不能穿透、弯折、透视。,空间,三维,元素的厚度为1dp(设备独立像素),1,2,元素之间相互层叠,动画,动画,动画不只是装饰，它有含义，能表达元素、界面之间的关系，具备功能上的作用。,1,2,运动和变化都是有加速和减速过程的，要先考虑它在现实世界中的运动规律。,所有可点击的元素，都应该有这样的反馈效果。,动画,动画,多个相似元素，动画的设计要有先后次序,通过过渡动画，表达界面之间的空间与层级关系,选取一种主色、一种辅助色（非必需），在此基础上进行透明度、饱和度变化。,颜色,黑色：87%普通文字54%减淡文字26%禁用状态/提示文字12%分隔线白色：100%普通文字70%减淡文字30%禁用状态/提示文字12%分隔线,颜色,桌面图标尺寸是48dpX48dp。模仿现实中的折纸效果，通过扁平色彩表现空间和光影。,桌面图标,小图标尺寸是24dpX24dp。优先使用materialdesign默认图标。,小图标,描述具体事物，优先使用照片。然后可以考虑使用插画。,图片的选用,英文字体使用Roboto，中文字体使用Noto。,字体,文字排版,12sp小字提示14sp（桌面端13sp）正文/按钮文字16sp（桌面端15sp）小标题20spAppbar文字24sp大标题34sp/45sp/56sp/112sp超大号文字,sp：与缩放无关的抽象像素（Scale-independentPixel）。,1,重要性,悬浮按钮凹起按钮扁平按钮,按钮,悬浮按钮,凸起按钮,扁平按钮（适用于对话框）,悬浮按钮触发正向的操作，（添加、创建、收藏之类。）,对话框,对话框,1对话框包含标题、内容和操作项。通常点击对话框外的区域，不会关闭对话框。,2通常情况，避免出现滚动条。,3取消类操作项放在左边，引起变化的操作项放在右边,菜单,菜单,1顺序固定的菜单，操作频繁的选项放在上面。,2顺序可变的菜单，可以把之前用过的选项排在前面，动态排序。,3菜单尽量不要超过2级。,4当前不可用的选项要显示出来，让用户知道在特定条件可以触发这些操作。,5当前选项应该成为菜单的第一项。,分为环形进度条和线性进度条,进度条,进度条实例,滑块,非连续的滑块，需要标出具体数值。,Snackbars与Toast,Snackbar是一种针对操作的轻量级反馈机制在PC上，应该悬浮在屏幕左下角。,输入框,简单一根横线就可以代表输入框，有或没有图标都可以。,ps：横线并不在点击区域的底部，还有8dp距离。,点击提示,提示只用在小图标上，文字不需要提示。鼠标悬停、获得焦点、手指长按都可以触发提示。,其他工具或插件,Tab,RadioButton,Switch,桌面布局,栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。（内容过多不一一简述）,Chromeos桌面布局模版,桌面布局模版,桌面布局模版,总结,尽力使GUI设计更美观、统一、完善。,能力有限。,多交流沟通。,1,优设网,MATERIALDESIGN的学习笔记,2,极客学院,MaterialDesign中文版,鸣谢,谢谢观看,
展开阅读全文