当前位置: 首页 >文章 > 从设计指南说起,详解Material Design体系组件(中)
收藏
分享

从设计指南说起,详解Material Design体系组件(中)

举报Echo的设计笔记Echo的设计笔记发布于 2018-08-161583阅读0点赞
交互行为: 滚动(列表只支持垂直滚动) 在列表中,每个列表的滑动(swipe)动作应当是一致的。 在操作正确时,可以被选中并且在列表中可以手动改变顺序。 列表可以通过数据、文件大小、字母顺序或者其它参数来编程改变其 顺序或者实现过滤。...

Material Design所有组件的思维导图:




分割线

定义:主要用于管理和分隔列表和页面布局内的内容,以便让内容生成更好的视觉效果及空

间感。示例中呈现的分隔线是一种弱规则,弱到不会去打扰到用户对内容的关注。


当在列表中没有像头像或者是图标之类的元素时,单靠空格并不足以用于区分每个数据项。

这种情况下使用一个等屏宽(full-bleed)的分隔线就会帮助区别开每个数据项目,使其它看起

来更独立和更有韵味。


分割线的类型:


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

类型的内容。




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

隔线。




3.子标题和分隔线:在使用分隔的子标题时,可以将分隔线置于子标题之上,可以加强子标

题与内容关联度。




网格

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


用法:网格列表最适合用于同类数据(homogeneous data type),典型的如图片,并且

对可视化理解(visual comprehension )和相似数据类型的区别进行了优化。



如果卡片中的文本需要与其他主要内容有着足够显著的区别,可以考虑使用一个容器,比如

列表(Lists)或者卡片(Cards)。这样可以优化文本显示、增强阅读理解的便利性;列表,

增强阅读理解的便利性,尤其是在比较一组具有多种数据类型的数据时;卡片,用于不同格

式的内容,比如带有不同长度标题的图片;用于不同类内容的数据集合中,比如具有图片、

视频和图书的混合式数据集。




列表最适合应用于显示同类的数据类型或者数据类型组(homogeneous data type or sets

 of data types),比如图片和文本,目标是区分多个数据类型数据或单一类型的数据特性,

使得理解起来更加简单。


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


如果内容的主要区别来源于图片,换用网格列表(grid list)。


交互行为:


滚动(列表只支持垂直滚动)


在列表中,每个列表的滑动(swipe)动作应当是一致的。


在操作正确时,可以被选中并且在列表中可以手动改变顺序。


列表可以通过数据、文件大小、字母顺序或者其它参数来编程改变其


   顺序或者实现过滤。


列表控制

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


列表控制分为如下两种类型:


状态/主操作(包括文本字符串)


次要操作/信息


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

目标的一部分。


次要操作以及信息应该放在标题的右边,次要操作通常要和主要操作分开单独可点击,因为

越来越多的用户希望每个图标都能触发一个动作。


列表控制的类型

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


类型:状态/主操作;次要操作/信息


单独可点击



开关


类型:次要操作/信息


单独可点击




重新排序


类型:次要动作


通常都是单独可点击,视当前列表所处的模式而定。


该动作允许用户给列表中项通过拖动变换位置。通常,这个按钮出现在列表编辑的模式下。



展开/折叠


类型:次要动作


单独可点击


垂直展开或者折叠列表来显示或者隐藏当前列表



Leave Behinds


类型: 其他


Leave-behind 是在当某一项列表被滑开之后的操作提示。Leave-behind可以被转换成一项

操作。


无论从哪个方向滑动列表,都会出现操作图标。滑动了之后,操作图标就会居中显示于列表

空白处。



查看更多


类型: 主要操作(连同行内其他内容)


非单独可点击


点击之后跳转到与当前列表相关详细信息的页面,通常这都是一个新的页面或者面板。



选中


类型: 状态


非单选


仅适用于菜单。用来表示当前列表是否通过不同的操作之后被选中。



菜单

用法:菜单是临时的一张纸(paper),由按钮(button)、动作(action)、点(pointer)

或者包含至少两个菜单项的其他控件触发。


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

钮。



触发按钮或者控件的标签(label)可以简明准确的反映出菜单中包含的菜单项。菜单栏通常

使用一个单词作为标签,像“文件”、“格式”、“编辑”和“视图”,然后其他内容或许

有更冗长的标签。


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



交互行为:菜单出现在所有的应用内部的UI元素之上。通过点击菜单以外的部分或者点击触

发按钮,可以让菜单消失。通常,选中一个菜单项后菜单也会消失。一个特例是当菜单允许

多选时,比如使用复选标记。


说明:将动作菜单项显示为禁用状态,而不是移除它们,这样可以让用户知道在正确条件下

它们是存在的。比如,当没有重做任务时禁用重做(Redo)动作。当内容被选中后,剪切

(Cut)和复制(Copy)动作可用



0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天31人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天59人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
猜你喜欢
你还不会做,旅游海报吗?

2021-04-27

形而设学 发表

你还不会做,旅游海报吗?
精选海报-红色系4

2021-07-27

术心 发表

精选海报-红色系4
排版进化 × 基础排查法

2018-01-10

大猫404 发表

排版进化 × 基础排查法
必读!视觉误差对UI设计的影响和解决方法

2019-03-29

静电的UI设计教室 发表

必读!视觉误差对UI设计的影响和解决方法
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证