Material Design设计指南整理(三)

本来应该接着讲动画的部分,但是简书好像不能上传gif图,就不能很好地表现动画了,然后网上又已经有大神将动画这一部分翻译成中文了,点击此处可以查看。下面我整理的内容是关于控件部分。没有按照官方文档的顺序,而是按照相关性将其进行分组。

目录
  1. 底部导航栏和标签
  2. 底部动作条、菜单和对话框
  3. snackbars、toasts和警告框
  4. 按钮
  5. 卡片、列表和网格列表
  6. 步进器和二级标题
  7. 文字域
  8. 纸片、滑动条、进度条、工具栏、选择控制器
1. 底部导航栏和标签
  • 底部导航栏介绍

1)底部导航栏主要是用于移动端,数量一般为3-5个,可以在应用中的任何地方随时切换,因此一般只用于顶级的视图,这些视图应该有足够的重要性并且有直接访问的需求。如果导航的分类少于3个,可以考虑使用标签代替(下面会讲到),如果多于5个,可以考虑用侧边导航代替(下一章节会讲到)
2)底部导航栏用于打开相关的视图,不要用于打开菜单或者其他弹出窗口。
3)上滑和下滑屏幕时,底部导航会自动隐藏和出现,另外,视图之间切换时,最好不要使用左右滑动的动画,会带来困惑。比如你从第一个视图切换到第二个视图看起来很正常,但是从第一个视图直接切换到第四个视图时,如果只向左滑动一次,与心理预期不符,如果快速滑动三次,看起来会不舒服。一般使用交叉渐变即可。
4)底部导航栏的高度如下图所示

  • 标签介绍

1)标签能够在一个较高的层级上对信息进行组织,能够用于不同的视图,不同的数据集,不同的功能集之间的切换。但是不要把标签用于一些普通页面之间的跳转,应该用于不同的内容组之间的导航。
2)标签数量较少时是固定的,数量较多时可以滚动查看。另外,标签默认是可以用手势左右切换的,因此不要包含一些也可以左右切换的元素,比如一些信息可以通过左右滑动来删除,在这种情况下很容易误操作。
3)标签的内容的范围并不完全一致,例如可以有一个标签是全部,一个标签是热门,一个标签是精选,但是都应该在一个大的类型之下。

  • 底部导航和标签的对比
    1)首先,底部导航和标签最好不要同时使用,因为那样上下组合的可能性有很多,用户比较容易感到混乱。如果需要多级导航,可以考虑其他的组合方式,这一部分在下一章会介绍。
    2)数量上,官方文档对底部导航栏做了明确的建议,一般在3-5个,但对标签没有明确规定。虽然在底部导航介绍时建议说是2-3个,但是由于标签支持滚动,数目上并没有什么限制。
    3)功能上,底部导航用于最顶部的导航,不同分类之间有相同的重要性,分类界限也比较明确。标签可以用于导航和分类,分类之间相对来说随意一点,不要是最顶部的层次,也不用有相同的重要性,适用范围更广一些。
    4)操作上,底部导航栏一般不支持手势左右切换,标签栏支持。两者都可以从应用的任何地方直接切换,前提是标签栏不是包含在某个视图之内。
2. 底部动作条、菜单和对话框
  • 底部动作条介绍


    两种类型,模态(左),固定(右)

    1)底部动作条可以分为两种,一种称为模态,是暂时性的,主要展示的是与其他应用相关的操作,另一种称为固定,与应用结合在一起,提供一些辅助的信息。前者是高于当前页面的内容的,后者于当前页面位于同一高度,或者说内嵌于页面之内。在桌面端或者平板端,空间比较充裕,这时可以使用对话框或者菜单代替底部动作条。
    2)固定的底部动作条除了直接提供辅助信息,也可以不脱离本应用而显示其他应用内的信息。
    3)模态的底部动作条出现时,页面中的其他区域会暗下来,以突出该动作条。模态动作条中主要是与当前内容相关各种操作,像分享,发邮件,在其他应用中打开等。可以使用列表或者网格的形式进行展示,并有意识地突出某些功能。
    4)从底部动作条跳到别的应用后,不能返回到该应用的上一级,只能原路回到底部动作条。但是可以通过以下方法改变,比如在跳转的时候就直接打开新的应用,而不是该应用内的某一层,也可以在跳转之后的界面中,点击其他功能,像首页等,回到上一级。
    5)模态动作条有四种方式可以关闭,一是下滑,二是点击上面的关闭按钮,三是点击其他变暗的区域,四是直接按手机上的返回键。

  • 菜单介绍



    1)菜单有多种形式,不仅仅是右上角的三个点,也可以是应用内的其他位置,用于提供多个选择,选项与当前内容密切相关。如果没有可用的选择,则菜单不可使用,如果内容改变,菜单的选项也会动态改变。菜单是临时的,一般每个选项占一行,
    2)菜单可能有类似导航的跳转功能,但不要使用作为主要的导航方式,菜单选项太多时支持滚动操作。
    3)桌面端的菜单可以多级嵌套,同时桌面的空间较大,菜单上可以附有快捷键等帮助信息,另外菜单选项的顺序,可以是静态的,此时尽可能把常用的放在前面,也可以是动态的,此时最前面的最近使用。
    4)移动端的菜单相对桌面端比较简单,可以用于应用内做一些快速地选择。使用时要注意的是弹出菜单的位置和默认选项的选择。一般是垂直于相关的输入区,并且是合在一起,默认的选项直接显示在输入区域中。另外,如果输入区是独占一行的,菜单应该保持左对齐,不管用户在哪里点击触发该菜单。

  • 对话框介绍

1)对话框一般是用来通知用户,或者做出请求。包括几种不同类型:简单对话框、确认对话框、全屏对话框。出现时其他区域会变暗并不能操作,直到对话框消失,有较大的干扰性,因此应尽量控制对话框的使用。
2)不能在对话框中包含对话框。如果内容较多,可以使用全屏对话框,而且在全屏对话框时,运行弹出新的对话框,因为这样不会增加z轴上的视觉干扰。
3)对话框一般不能滚动,如果实在需要的话,要在滚动时固定标题或者固定下方的操作按钮。



4)简单对话框没有取消和确定等按钮,直接对内容进行选择,内容可以包含图标,多行文字。确认对话框需要用户在选择之后点击确认按钮或者取消按钮,意味着如果你选择之后没有确认,是不会自动保存的。


左:简单对话框 右:确认对话框

5)全屏对话框一般只用于移动端,毕竟其他设备的空间比较充足。全屏对话框需要注意的是,内容是不会实时保存的,在右上角会有一个保存按钮,点击之后才能生效。左上角是关闭按钮,如果已经填入东西,关闭时需要弹出一个确认框,如果没有填入东西,就直接退出即可。
  • 三者比较
    1)干扰性:菜单的干扰性是最小的,其次是底部动作条和对话框。所以可以根据内容的重要性以及出现频率要决定使用什么控件。
    2)功能性:三者的功能有一定的区别的,底部动作条多用于与其他应用的链接,或者获取其他应用的信息作为补充。菜单是针对页面内元素的直接操作或选择,相比底部动作条中的操作,是比较轻量的。对话框的选择功能与菜单类似,但是一般是比较重要的选择,而且显示的信息比较丰富,可以包含图标,菜单一般是简单的一行文字。另外对话框的提醒功能和确认功能是菜单所没有的。
3. snackbars、toasts和警告框

在谷歌官方文档里,警告框是对话框中的一类,不过我个人觉得与snackbars和toasts具有可比性,所以拿出来放到了这里。另外,snackbars和toasts是两种通知信息的显示方式,暂时没发现比较好的翻译,是那种只能意会不能言传的感觉,所以这里就直接使用英文了。

  • 警告框介绍
    1)警告框用于告知用户一些紧急的情况,让用户了解当前状况,并提供一些可以选择的操作,比如用户要删除东西,就要提醒用户说,“现在要删除东西了,你可以选择取消,也可以选择继续删除”之类的。
    2)大部分警告框没有标题,就是一句简单的话加上两个可选操作,要保证操作的表述是清晰的,不要用“是”“否”,而要使用“删除”“取消”等意义比较明确的。
    3)如果需要较多的解释内容,则要使用标题,标题要简单明了地表现问题,正文是必要的一些解释,并适当注意表达的语气。


  • snackbars介绍
    1)snackbars是用户在完成某个操作之后出现的反馈,显示与该操作相关的信息,并提供一些操作,比如撤回,这些操作应该还有其他入口,以备用户事后操作。
    2)snackbars的高度与浮动按钮一样,位于绝大多数应用内的元素之上,但是在对话框、底部动作条之下。因为和浮动按钮高度一样,所以当浮动按钮也位于屏幕底部时,要避免发生碰撞。
    3)一次只能显示一个snackbars。一般从屏幕底部升起,一段时间会自动消失,也可以通过手势滑动使其消失,或者是用户切换到一个别的页面。
    4)snackbars上不能使用图标按钮,只能使用文字按钮。只能包含一个操作,如果需要两个,则要考虑使用其他控件。
  • toasts介绍
    文档中关于toasts的介绍很少,对安卓开发有了解的人应该比较清楚。与snackbars的作用一样,都是在操作之后提供反馈,不过toasts更简洁,没有操作按钮,不能通过手势移除,只能等时间到了自动消失。显示框的大小与内容相适应,不会占据一整行。一般也是从底部弹出。


  • 三者比较
    1)警告框用于在执行重要的操作之间的询问和确认,有很大的干扰性,一般只用于不可恢复或者有较大破坏性的操作上。如果该操作可以撤销,尽量使用snackbars,因为不会对用户造成太大的干扰,破坏用户体验。
    2)snackbars和toasts两者都是用于操作后反馈,如果该操作的重要性不大,或者说不太需要撤回等操作,则考虑使用toasts,同样是因为对用户干扰较少。

4. 按钮

材质化设计中按钮的特点是点击之后会有墨水散开的效果。按钮可以是文字、图像、或者两者合在一起,按钮的类型有很多,下面会一一介绍。


三种最主要的按钮

1)平面按钮
平面按钮直接“印”在材质上,一般是单纯的文字,按住时会填充上背景颜色。主要用于工具栏、对话框以及嵌入内容之中,嵌入时要留有一定的边距以保证可点击。



2)上浮按钮
上浮按钮浮于材质之上,为扁平布局增加了一些立体感,并且在大量的信息中突显出来。一般是矩形。

3)浮动按钮
浮动按钮是页面中最重要的操作的承载,每个页面只能有一个浮动按钮,但并不是每个页面都需要。值得注意的是,浮动按钮表示的操作一般不要是破坏性或者是消极的,避免用户做出错误的操作。
在同一个应用中,浮动按钮的位置最好保持相对固定,避免视图切换时带来不适。
浮动按钮有多种变化形式,可以垂直弹出多个二级操作,可以水平展开成工具栏,也可以打开一个新的页面。



4)脚注型按钮
是平面按钮的一种特殊用法,一般固定于屏幕或者操作窗口的底部,类似于脚注的位置。

5)下拉按钮
一般有三种类似,如下图所示:

左边为不同的下拉按钮,与简单的菜单选项差不多。中间称为分节下拉按钮,点击操作图标可以激活该操作,点击下拉图标可以更改操作的种类。右边的是可编辑按钮,用于桌面端比较多,可以直接输入,也可以在下拉菜单中选择。
6)开关按钮
一般是一组类似的开关按钮放在一起,可以是相互排斥的,只能选其一,也可以是不排斥的,可以叠加在一起。经常用于桌面端,移动端也有,但一般不是一组出现,而是单个,比如点赞、标记等功能中使用的按钮。

不同的按钮类型用法不同,有三个因素需要重点考虑,一是该操作的重要性,即按钮应该多突出,二是屏幕上页面的数量,是否可以再增加z轴的深度,三是屏幕布局,按钮的出现会不会和其他控件冲突。

控件这一部分我分了有八组,剩下四组明天再继续。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,458评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,454评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,171评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,062评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,440评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,661评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,906评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,609评论 0 200
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,379评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,600评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,085评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,409评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,072评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,088评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,860评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,704评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,608评论 2 270

推荐阅读更多精彩内容

  • 使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号,比如:color_a”_1,c...
    youyeath阅读 25,962评论 2 238
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,617评论 4 59
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,422评论 22 663
  • 蝶恋花。秋日蝶语 八月秋高凉日暮,草老花残,彩蝶翩跹舞。 独恋一枝香若故,屏声敛翅轻轻伫。 怎得风清明月顾,绮梦酣...
    不语不问阅读 198评论 0 3
  • 记得上小学三四年级的时候,老家几乎每家每户都养着一头牛,这是家里的绝对劳力。秋收之前,农田里的活少,大人们总...
    陆永强阅读 855评论 6 2