从设计指南说起,详解MaterialDesign体系组件优设网

先看一张MaterialDesign所有组件的思维导图:

定义:一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能。

使用规则:底部动作条(BottomSheets)提供三个或三个以上的操作需要提供给用户选择、并且不需要对操作有额外解释的情景。如果只有两个或者更少的操作,或者需要详加描述的,可以考虑使用菜单(Menu)或者提示框替代。底部动作条可以是列表样式的也可以是宫格样式。

交互行为:显示底部动作条的时候,动画应该从屏幕底部边缘向上展开。根据上一步的内容,向用户展示用户上一步的操作之后能够继续操作的内容,并提供模态的选择。点击其他区域会使得底部动作条伴随下滑的动画关闭掉。如果这个窗口包含的操作超出了默认的显示区域,这个窗口需要可以滑动。

说明:底部动作条是一种模态形式之一。模态:模态的对话框需要用户必须选择一项操作后才会消失,比如Alert确认等;而非模态的对话框并不需要用户必须选择一项操作才会消失,比如页面上弹出的Toast提示。

定义:由文字和/或图标组成,按钮告知用户按下按钮后将进行的操作。我们可以把按钮理解为一个操作的触发器。

悬浮响应按钮(Floatingactionbutton):点击后会产生墨水扩散效果的圆形按钮。

浮动按钮(Raisedbutton):常见的方形纸片按钮,和悬浮响应按钮相反。

非悬浮,固定于一个位置。点击后会产生墨水扩散效果。浮动按钮看起来像一张放在页面上的纸片,点击后会浮起来并表现出色彩。

浮动按钮使按钮在比较拥挤的界面上更清晰可见。能给大多数扁平的布局带来层次感。

扁平按钮(Flatbutton):就是把文字用作按钮。

点击后产生墨水扩散效果,和浮动按钮的区别是没有浮起的效果。尽量避免把他们作为纯粹装饰用的元素。按钮的设计应当和应用的颜色主题保持一致。

扁平按钮一般用在警告框中,推荐居右对齐。一般右边放操作性的按钮,左边放取消按钮。如果用在卡片中,扁平按钮一般居左对齐,以增加按钮的曝光。不过,卡片有很多种不同的样式,设计师可以根据内容和上下文来安排扁平按钮的位置。只要保证在同一个产品中,卡片内的扁平按钮的位置统一就可以了。

按钮使用规则:按钮类型应该基于主按钮、屏幕上容器的数量以及整体布局来进行选择。

用途:卡片是用来显示由不同种类对象组成的内容的便捷途径。它们也适用于展示尺寸或操作相当不同的相似对象,像带有不同长度标题的照片。

显示这些内容时使用卡片布局:

联系人的纸片视图用于呈现联系人的信息。当用户在输入框(收件人一栏)中输入一个联系人的名字时,联系人纸片视图就会被触发,用于展示联系人的地址以供用户进行选择。而且联系人的纸片可以被直接添加到收件人一栏中去。

联系人的纸片视图主要用于帮助用户高效的选择正确的收件人。

定义:用于提示用户作一些决定,或者是完成某个任务时需要的一些其它额外的信息。提示框可以是用一种取消/确定的简单应答模式,也可以是自定义布局的复杂模式,比如说一些文本设置或者是文本输入。

用途:提示框最典型的应用场景是提示用户去做一个些被安排好的决定,而这些决定可能是当前任务的一部分或者是前至条件。提示框可以用于告知用户具体的问题以便他们作用重要的决定(起到一个确认作用),或者是用于解释接下来的动作的重要性及后果(起到一个警示作用)。

提示框的内容是变化多样的。但是通常情况下由文本和(或)其它UI元素组成的,并且主要是用于聚焦于某个任务或者是某个步骤。

MD规范把警告框分成两种:有标题的和没有标题的。

标题:主要是用于简单描述下选择类型。它是可选的。

内容:主要是描述要作出一个什么样的决定。

事件:主要是允许用户通过确认一个具体操作来继续下一步活动。

交互行为:触摸提示框外面的区域可以关闭提示框。

当在列表中没有像头像或者是图标之类的元素时,单靠空格并不足以用于区分每个数据项。这种情况下使用一个等屏宽(full-bleed)的分隔线就会帮助区别开每个数据项目,使其它看起来更独立和更有韵味。

等屏宽分隔线:等屏宽分隔线或以用于分隔列表中的每个数据项或者是页面布局中的不同类型的内容。

内凹分隔线:在有头像或者是图标元素,并且有关键字的标题列中,我们可以使用内凹分隔线。

子标题和分隔线:在使用分隔的子标题时,可以将分隔线置于子标题之上,可以加强子标题与内容关联度。

定义:网格是一种标准列表视图的可选组件。

用法:网格列表最适合用于同类数据(homogeneousdatatype),典型的如图片,并且对可视化理解(visualcomprehension)和相似数据类型的区别进行了优化。

如果卡片中的文本需要与其他主要内容有着足够显著的区别,可以考虑使用一个容器,比如列表(Lists)或者卡片(Cards)。这样可以优化文本显示、增强阅读理解的便利性;列表,增强阅读理解的便利性,尤其是在比较一组具有多种数据类型的数据时;卡片,用于不同格式的内容,比如带有不同长度标题的图片;用于不同类内容的数据集合中,比如具有图片、视频和图书的混合式数据集。

定义:列表作为一个单一的连续元素来以垂直排列的方式显示多行条目。

列表最适合应用于显示同类的数据类型或者数据类型组(homogeneousdatatypeorsetsofdatatypes),比如图片和文本,目标是区分多个数据类型数据或单一类型的数据特性,使得理解起来更加简单。

如果有超过三行的文本需要在列表中显示,换用卡片(cards)代替。

交互行为:

定义:对列表进行操作控制的组件。

状态和主操作放在标题列表的左边。在这里,列表里面的文本内容也被认为是主操作的操作目标的一部分。

次要操作以及信息应该放在标题的右边,次要操作通常要和主要操作分开单独可点击,因为越来越多的用户希望每个图标都能触发一个动作。

复选框(Checkbox):既可以被定义成是主操作也可以是次要操作。

开关

重新排序

展开/折叠

LeaveBehinds

查看更多

选中

用法:菜单是临时的一张纸(paper),由按钮(button)、动作(action)、点(pointer)或者包含至少两个菜单项的其他控件触发。

每一个菜单项是一个离散的选项或者动作,并且能够影响到应用、视图或者视图中选中的按钮。

触发按钮或者控件的标签(label)可以简明准确的反映出菜单中包含的菜单项。菜单栏通常使用一个单词作为标签,像“文件”、“格式”、“编辑”和“视图”,然后其他内容或许有更冗长的标签。

菜单显示一组一致的菜单项,每个菜单项可以基于应用的当前状态来使能。

交互行为:菜单出现在所有的应用内部的UI元素之上。通过点击菜单以外的部分或者点击触发按钮,可以让菜单消失。通常,选中一个菜单项后菜单也会消失。一个特例是当菜单允许多选时,比如使用复选标记。

说明:将动作菜单项显示为禁用状态,而不是移除它们,这样可以让用户知道在正确条件下它们是存在的。比如,当没有重做任务时禁用重做(Redo)动作。当内容被选中后,剪切(Cut)和复制(Copy)动作可用。

尽可能地减少视觉上的变化,尽量使应用加载过程令人愉快。每次操作只能由一个活动指示器呈现,例如,对于刷新操作,不能即用刷新条,又用动态圆圈来指示。

指示器的类型有两种:线形进度指示器和圆形进度指示器。可以使用其中任何一项来指示确定性和不确定性的操作。

圆形进度指示器:

定义:滑块控件(Sliders,简称滑块)可以让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值。区间最小值放在左边,对应的,最大值放在右边。滑块(Sliders)可以在滑动条的左右两端设定图标来反映数值的强度。这种交互特性使得它在设置诸如音量、亮度、色彩饱和度等需要反映强度等级的选项时成为一种极好的选择。

连续滑块(ContinuousSlider):在不要求精准、以主观感觉为主的设置中使用连续滑块,让使用者做出更有意义的调整。

带有可编辑数值的滑块:用于使用者需要设定精确数值的设置项,可以通过点触缩略图、文本框来进行编辑。

间续滑块(DiscreteSlider):间续滑块会恰好咬合到在滑动条上平均分布的间续标记(tickmark)上。在要求精准、以客观设定为主的设置项中使用间续滑块,让使用者做出更有意义的调整。应当对每个间续标记(tickmark)设定一定的等级区间进行分割,使得其调整效果对于使用者来说显而易见。这些生成区间的值应当是预先设定好的,使用者不可对其进行编辑。

附带数值标签的滑块:用于使用者需要知晓精确数值的设置项。

定义:Snackbar是一种针对操作的轻量级反馈机制,常以一个小的弹出框的形式,出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方,包括浮动操作按钮。

它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar可以在屏幕上滑动关闭。当它们出现时,不会阻碍用户在屏幕上的输入,并且也不支持输入。屏幕上同时最多只能现实一个Snackbar。

Android也提供了一种主要用于提示系统消息的胶囊状的提示框Toast。Toast同Snackbar非常相似,但是Toast并不包含操作也不能从屏幕上滑动关闭,文本内容左对齐。

暂时性:为了保证可用性,Snackbar不应该成为通往核心操作的唯一方式。作为在所有层的上方,Snackbar不应该持续存在或相互堆叠。

最多0-1个操作,不包含取消按钮:当一个动作发生的时候,应当符合提示框和可用性规则。当有2个或者2个以上的操作出现时,应该使用提示框而不是Snackbar,即使其中的一个是取消操作。如果Snackbar中提示的操作重要到需要打断屏幕上正在进行的操作,那么理当使用提示框而非Snackbar。

副标题可以内联展示在区块里,也可以关联到内容里,例如,关联在相邻的分组列表里。

在滚动的过程中,副标题一直固定在屏幕的顶部,除非屏幕切换或被其他副标题替换。

为了提高分组内容的视觉效果,可以用系统颜色来显示副标题。

定义:开关允许用户选择选择项。一共有三种类型的开关:复选框、单选按钮和on/off开关。

注释:下面示例中所示的图形环代表一个动画,并不是实际按钮的外观。

复选框:允许用户从一组选项中选择多个。

如果需要在一个列表中出现多个on/off选项,复选框是一种节省空间的好方式。

如果只有一个on/off选择,不要使用复选框,而应该替换成on/off开关。

复选框通过动画来表达按压和按下的状态。

单选按钮:只允许用户从一组选项中选择一个。

单选按钮通过动画来表达聚焦和按下的状态。

开关:On/off开关切换单一设置选择的状态。开关控制的选项以及它的状态,应该明确的展示出来并且与内部的标签相一致。开关应该单选按钮呈现相同的视觉特性。

开关通过动画来传达被聚焦和被按下的状态。开关滑块上标明“on”和“off”的做法被弃用,取而代之的是下图所示的开关。

定义:在一个app中,tabs使在不同的视图和功能间探索和切换以及浏览不同类别的数据集合起来变得简单。

用法:tab用来显示有关联的分组内容。tab标签用来简要的描述内容。

使用规则:

文本框可以让用户输入文本。它们可以是单行的,带或不带滚动条,也可以是多行的,并且带有一个图标。点击文本框后显示光标,并自动显示键盘。除了输入,文本框可以进行其他任务操作,如文本选择(剪切,复制,粘贴)以及数据的自动查找功能。

单行文本框:当文本输入光标到达输入区域的最右边,单行文本框中的内容会自动滚动到左边。

带有滚动条的单行文本框:当单行文本框的输入内容很长并需跨越多行的时候,则文本框应该以滚动形式容纳文本

在滚动文本框中,一个图形化的标志出现在标线的下面。点击省略号,光标返回到字符的开头。

多行文本框:当光标到达最下缘,多行文本框会自动让溢出的的文字断开并形成新的行,使文本可以换行和垂直滚动。

用法:对同时满足以下条件的元素使用工具提示,具有交互性;主要是图形而非文本。

THE END
1.玩家热议:部分游戏菜单仅提供保存选项在Reddit的游戏论坛上,最近有一个话题引起了热烈的讨论。一些玩家抱怨某些游戏菜单只提供了存储功能,而没有读取功能,这让它们感到非常奇怪。有玩家猜测这可能是为了防止误操作。 一位玩家在《星球工匠》的主菜单上发现了这个问题,只设置了存储键,没有读取键。他对此表示不满,并呼吁官方能够同时提供这两种功能。实际上https://m.dancihu.com/article/75300.html
2.菜单分为主菜单和上下文菜单(也称弹出式菜单)两种。【单选题】关于光介质的说法不合适的是( )。 查看完整题目与答案 【单选题】下列中属于糖类不具备的生理功用的是( )。 查看完整题目与答案 【单选题】影子可以应用( )光学原理进行解释。 查看完整题目与答案 【单选题】下列中属于糖类不具备的生理功用的是( )。 查看完整题目与答案 【单选题】衍射https://www.shuashuati.com/ti/09ded9bf9fb34e4ea77cadb7bf8661ca.html?fm=bdbds6bd9e38653ccd81d3a95fcd404f582bd
3.常见西餐英语表达西餐是一种世界性的美食文化,拥有独特的风味和用餐习惯。在西餐中,有许多常见的英语表达,让我们一起来了解一下吧。 首先是点菜时常用的表达。当你坐在餐厅里准备点菜时,可以说:“May I havethe menu, please?”(请给我菜单)。然后你可以询问服务员:“What do you recommend?”(你推荐什么?)或者“Can you tehttps://www.coffee.cn/xican/post/404442.html
4.银符考试题库在线练习42. 在Word 2003工作过程中,切换插入与改写两种编辑状态的方法是 。 A.双击“改写”按钮 B.按Ctrl+N键 C.按Ctrl+S键 D.按Delete(Del)键 A B C D 43. 在Excel 2003中,关于工作表及为其建立的嵌入式图表的说法,正确的是 。 A.删除工作表中的数据,图表中的数据系列不会删除 B.增加工作表中的数据,http://www.cquc.net:8089/YFB12/examTab_getExam.action?su_Id=5&ex_Id=4790
5.计算机基础excel练习6篇(全文)5、下面说法正确的是( BC ) A、“删除”命令属于“文件”菜单 B、“编辑”菜单中包含“复制”命令 C、“退出”命令属于“文件”菜单 D、在“文件”菜单中只有4个命令选项 6、有关“保存”和“另存为”命令说法正确的是( ABD ) A、“保存”可以用来保存文件 B、“另存为”命令也可以用来保存文件 https://www.99xueshu.com/w/file3gxjxvws.html
6.商务中餐礼仪知识(精选18篇)饮食礼仪菜单 在菜单的安排上关键是要了解客人尤其是主宾不能吃什么,排除个人禁忌、民族禁忌与宗教禁忌,而不是问之爱吃什么。具体安排菜单时,既要照顾客人口味,又要体现特色与文化,即吃文化、吃特色。 具体注意事项如下: 拟订菜单时要考虑宴请对象的喜好和禁忌。 https://www.027art.com/fanwen/yinshiliyi/16927572.html
7.计算机科学技术:photoshopcs5知识学习(最新版)考试题库D.绘制路径后,点路径调板的右上角箭头,在弹出菜单中选择“存储路径”,可以保存路径 点击查看答案 4、多项选择题 如图所示,左上图“white”为文字图层,要执行栅格化操作后通过滤镜处理成右下图所示效果,下列关于将文字图层栅格化的说法正确的是()。 A.对文字图层执行滤镜命令时,将自动弹出警告对话框,选择“好”http://www.91exam.org/exam/87-1059/1059820.html
8.计算机基醇试题附答案——《第伍篇》66、在WORD中的段落格式与样式是同一个概念的两种说法。 67、文本框能使页面上的文字环绕在其周围。 68、必须用鼠标才能用word的菜单栏。 69、在WORD环境下,欲打开非WORD格式的文件,在"打开对话框"中的文件类型栏需要选择"所有文件"。 70、使用WORD的工具栏按钮比使用下拉菜单更加方便、快捷。 https://blog.csdn.net/qq_38639612/article/details/107841867
9.说法错误的是()A.字体大小有两种尺寸制度B.下划线的样式可以自定以下有关WPS的文字格式,说法错误的是() A.字体大小有两种尺寸制度 B.下划线的样式可以自定义 C.字体的颜色不能设置为白色 D.点击该工具栏右下角的小按钮https://www.jyeoo.com/shiti/0745100f-8315-4c15-a519-dffde435258b
10.两种活法的分水岭高玉堂研究员冷静地抛出这个结论,把记者愣在那里。他简单算了一笔账。据统计,上海男性每年死亡人数中近三分之一死于恶性肿瘤,女性每年死亡人数中近四分之一死于恶性肿瘤。按这两个数据计算,100对死亡夫妻中可能有5对“夫妻癌”,显然还是保守说法。据此,他认为“夫妻癌”现象并不稀奇。 http://www.100md.com/Html/Dir0/20/27/96.htm
11.PS文件菜单中的另存为和另存为网页格式的区别photoshop教程PS文件菜单中的另存为和另存为网页格式的区别 一周多前在网上搜到的一篇技术文档,觉得还不错。虽然平时用ps时大概也能知道哪种保存方式更合适,但基本停留在经验基础上,而这篇文章对另存为和另存为网页格式有详细的文件数据分析,觉得比较有做参考资料的价值,所以决定翻译一下。翻译之前觉得很短一篇,不过真正翻时https://www.jb51.net/photoshop/3083.html
12.《信息技术》药学三二3班期末考试48. Excel中,有关数据筛选,以下说法不正确的是( ) 筛选后数据清单中只显示符合筛选条件的记录筛选后数据清单中,删除不符合筛选条件的记录数据筛选分为自动筛选和高级筛选两种方法自动筛选会打开筛选箭头,高级筛选需要自己构造筛选条件 49. 计算机中央处理器(CPU)主要由两部分组成,它们是( )。 运算器和控制器存储https://www.wjx.cn/xz/167564222.aspx
13.一线主管的管理职能测试答案1.国际上关于管理职能和管理循环的说法多种多样,大体可以汇总为三大单元,其中不包括: √ A 计划 B 执行 C 组织 D 控制 正确答案: C 2.关于管理循环,在戴明提出的PDCA循环中,C是指: √ A 过程检核与结果检核 B 目标计划与方法计划 C 教育训练与作业实施 D 改善与行动 正确答案: A 3.计划可以分为三个https://www.360wenmi.com/f/fileok087r2k.html
14.多重曝光不用后期,拍出艺术大片——3个诀窍进入菜单后,找到「多重曝光」选项, 「启用」,然后可以看到有不同的选项。 这里的「加法」和「平均」是相机合成照片的方式, 更高端的机型,比如5D Mark III, 还有「明亮」和「黑暗」两个选项, 待会再说它们的区别。 确定合成方式之后,还需要选择拍摄张数, https://www.meipian.cn/37ndsbm9
15.山东省2013年普通高等教育专升本统一考试计算机试题61.Excel 2010工作簿的某一工作表被删除后,下列说法正确的是( )。 A.该工作表中的数据全部被删除,不再显示 B.可以用组合键 Ctrl+Z 撤销删除操作 C.该工作表进入回收站,可以去回收站将工作表恢复 D.该工作表被彻底删除,而且不可用“撤销”来恢复 http://m.wfbaidajiaoyu.cn/nd.jsp?id=96
16.Java语言程序设计试卷6套8、下列有关于图形用户界面设计的说法错误的一项是? (正确答案:B) A、类似于Button这样的组件必须承载于Container容器中 B、Panel对象创建后不一定要放置在Window类或其子类中 C、菜单类是由MenuComponet类继承得到的 D、事件处理一般通过监听器类来实现 https://developer.aliyun.com/article/1431557