系统地认识组件：组件设计总结.docVIP

系统地认识组件：组件设计总结 　　作者随设计组件进行了一些总结，满满的干货，希望对大家有所帮助。 　　 　　Google的材料设计规范是每位设计师都需要了解的，作为西半球最牛逼的公司之一，Google聚集了世界上最优秀的设计大虫，为开发者制定了一套具有Google精神的设计规范。 　　组件的规范使用就是其中很重要的一章，只要你用对了组件，谷歌的活力、阳光、理性就会从屏幕中迸发出来，感染到没有国界、种族、性别、年龄限制的理性的正常人。 　　如果大家有时间还是建议去拜读原著，不用翻墙。 　　下面是整理关于组件的关键点，在笔记里藏着，搬出来分享一下。 　　Bottom navigation底部导航 　　 　　推荐用法： 　　3个导航分类显示图标和文本，4-5个的话非活动的不显示文本。 　　向下滚动时可以和状态栏一起隐藏，增加全浸式体验。 　　不要使用横向屏幕滚动在活动与非活动视图之间转换。 　　后退键不可以在导航栏之间切换。 　　它的高度是8DP。 　　 　　Bottom sheets底板 　　Modal bottom sheets 模态底板：简单对话框的形式，如分享。 　　Persistent bottom sheets 持久底板：提供应用程序内容，如音乐播放。（移动端100%宽度展示，平板桌面可以插入，不必要全宽显示） 　　 　　模态底板可现实长菜单名称，图标和菜单相关联，带子文本的菜单等 。 　　模态底板可用于提供来自 [其它应用程序的内容] 或 [空间深层链接]。如需提供关闭底板的按钮，应用 [ X ] 而不是 [ ← ]。 　　Buttons按钮 　　Flat button 平面按钮 　　Raised button 上升按钮 　　Floating action button 浮动按钮 　　Dropdown buttons 下拉按钮 　　Toggle buttons 切换按钮 　　Flat button 平面按钮 　　 　　减少干扰 　　 　　焦点：12%的不透明度（文字颜色） 　　 　　规格： 　　 　　Raised buttons上升按钮 　　紧急、匆忙的情境下使用。 　　突出、强调重要。 　　帮助组织UI，分隔信息。 　　 　　 　　Floating action buttons 悬浮按钮 　　默认56DP，圆形。（触摸按键大小应在7—10mm，56dp的物理长度为9mm） 　　跨越屏幕时应短暂消失，如有必要可移动到其他位置，如：和FAB高度一样的Snack bar弹出时。（微信收藏文章时弹出Snack bar） 　　当屏幕宽度为460DP或更小时，更改为微型大小40DP。 　　每个屏幕只推荐1个浮动按钮（需要使用2个时请保证2个按钮的执行不同的操作），执行相关的主要操作（积极）。 　　避免遮住主要内容。 　　推荐3-6个选项。 　　 　　 　　↑ 浮动按钮不是溢出菜单。选项里也不应包含溢出菜单。（溢出菜单属于工具栏） 　　↓ 正确使用：（悬浮按钮变形至下图，可以伴随推动其他组件） 　　 　　Dropdown buttons 下拉按钮 　　 　　Toggle buttons [右： icon toggles ] 　　切换按钮 　　 　　Cards卡片 　　2DP高度、2DP圆角、可以有多个动作，组织UI，分隔信息。 　　 　　↓ 从左到右：瓷砖（直角）、列表（加了一条线的瓷砖）、卡片（圆角、阴影） 　　卡片有固定宽度和可变的高度，最高为平台可用高度。 　　↓ 超过最大高度的信息将会被截断，不可滚动（桌面可以），但可扩展。 　　 　　补充卡片 　　设计的时候可以从最基本的开始，需要哪些元素就在基础上补充。 　　 　　UI控件 　　 　　↑ 星级选项、选项卡、溢出菜单、滑块、分段按钮等[ Google强烈反对文本中带有内联链接 ! ] 　　Chips芯片 　　高度32DP 　　芯片可以包含文本，照片、规则、图标、联系人等。 　　 　　如点击可打开菜单，点击芯片出现邮箱选择。 　　 　　Date Tables数据表 　　多用于桌面产品 　　鼠标悬浮要暗于选中的列表 　　 　　 　　Dalogs对话框 　　无标题提醒对话框 　　 　　有标题提醒对话框 　　 　　简单对话框 　　 　　复杂对话框 　　 　　全屏对话框 　　 　　Dividers分隔器 　　Full-bleed divider — inset dividers（满血切割者 – 插入切割者） 　　不必要的分隔会让用户困惑（如右图用多个满血分割线，或多个插入分割线） 　　 　　Expansion panels扩展面板 　　 　　↑ 扩展面板作为轻量级的容器，可独立存在，也可以连接一个界面。 　　扩展面板上可执行轻量级的操作，如简单编辑，增加信息，避免繁琐的操作。