设计规范Materialdesign(李若鹏)

《设计规范Materialdesign(李若鹏)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、设计规范李若鹏2015.10.26MaterialDisign目录1简介2GUI设计规范3总结简单介绍MaterialDesign。实例说明Materialdesign设计规范。总结与展望。1来源谷歌推出的全新的设计语言，应用于手机、平板电脑、台式机和“其他平台”。2特点颜色鲜艳，动画突出，干净，简约，外观更一致且更广泛什么是Materialdesign1把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。核心思想元素魔法纸片纸片层叠、合并、分离、分裂、

2、伸缩，拥有现实中的厚度、惯性和反馈，同时拥有液体的一些特性，能够自由伸展变形。12但是纸片不能穿透、弯折、透视。空间三维元素的厚度为1dp(设备独立像素)12元素之间相互层叠动画动画动画不只是装饰，它有含义，能表达元素、界面之间的关系，具备功能上的作用。12运动和变化都是有加速和减速过程的，要先考虑它在现实世界中的运动规律。所有可点击的元素，都应该有这样的反馈效果。动画动画多个相似元素，动画的设计要有先后次序通过过渡动画，表达界面之间的空间与层级关系选取一种主色、一种辅助色（非必需），在此基础上进行透明度、饱和度变化。颜色黑色：[87%普通文字][54%减淡文字][

3、26%禁用状态/提示文字][12%分隔线]白色：[100%普通文字][70%减淡文字][30%禁用状态/提示文字][12%分隔线]颜色桌面图标尺寸是48dpX48dp。模仿现实中的折纸效果，通过扁平色彩表现空间和光影。桌面图标小图标尺寸是24dpX24dp。优先使用materialdesign默认图标。小图标描述具体事物，优先使用照片。然后可以考虑使用插画。图片的选用英文字体使用Roboto，中文字体使用Noto。字体文字排版12sp小字提示14sp（桌面端13sp）正文/按钮文字16sp（桌面端15sp）小标题20spAppbar文字24sp大标题34sp/45s

4、p/56sp/112sp超大号文字sp：与缩放无关的抽象像素（Scale-independentPixel）。1重要性悬浮按钮>凹起按钮>扁平按钮按钮悬浮按钮凸起按钮扁平按钮（适用于对话框）悬浮按钮触发正向的操作，（添加、创建、收藏之类。）对话框对话框1对话框包含标题、内容和操作项。通常点击对话框外的区域，不会关闭对话框。2通常情况，避免出现滚动条。3取消类操作项放在左边，引起变化的操作项放在右边菜单菜单1顺序固定的菜单，操作频繁的选项放在上面。2顺序可变的菜单，可以把之前用过的选项排在前面，动态排序。3菜单尽量不要超过2级。4当前不可用的选项要显示出来，让用户知道

5、在特定条件可以触发这些操作。5当前选项应该成为菜单的第一项。分为环形进度条和线性进度条进度条进度条实例滑块非连续的滑块，需要标出具体数值。Snackbars与ToastSnackbar是一种针对操作的轻量级反馈机制在PC上，应该悬浮在屏幕左下角。输入框简单一根横线就可以代表输入框，有或没有图标都可以。ps：横线并不在点击区域的底部，还有8dp距离。点击提示提示只用在小图标上，文字不需要提示。鼠标悬停、获得焦点、手指长按都可以触发提示。其他工具或插件TabRadioButtonSwitch桌面布局栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。（内容

6、过多不一一简述）Chromeos桌面布局模版桌面布局模版桌面布局模版http://materialdesign.qiniudn.com/downloads/Layout_Desktop_Whiteframe.ai总结尽力使GUI设计更美观、统一、完善。能力有限。多交流沟通。1优设网MATERIALDESIGN的学习笔记2极客学院MaterialDesign中文版鸣谢http://www.uisdc.com/comprehensive-material-design-notehttp://wiki.jikexueyuan.com/project/material-de

7、sign/谢谢观看