【原创设计译文】Material Design元素设计指南

原文链接:Lessons Learned From Analyzing Material Design Components

如果你通读过Google的material design指南,你就会知道它写的有多详细,它涉及的范围有多广。通读过这部“指南”后,你会受益匪浅。指南中讲述的课程,最出色的一点在于,它证明了我们有可能构建复杂的视觉样式设计规范。构建这样的设计规范并不容易,但对于复杂的Google产品阵列而言,这又是可能的。

如果你想要学习一些关于视觉设计的知识,你应该仔细研读一下material design中设计独立视觉元素或组件的方法。指南中详细讲述了18个不同的设计元素,从按钮到菜单(menus),再到页签(tabs)。那么,分析这些元素能学到什么呢?

拥抱变化

有很多关于按钮的设计规范。在material design中有3种按钮类型:悬浮(floating)、浮动(raised)和扁平(flat)。在各种运用material design的用户界面中,很少只会用到一种类型的按钮样式。

按钮样式

同样,在各种各样的用户界面中,也很难保证设计的一致性。但是,为了做出最好的设计,material design仍旧采用了三种不同的按钮样式。其他设计方案则有时不那么好。

“要基于主按钮、屏幕上容器的数量以及整体布局为你的按钮选择设计风格”——如何使用按钮

按钮风格使用场景

对于按钮的设计指导,有的说的清晰,有的则较模糊。总的来说,指南的说明是经过深思熟虑的。指南中,详细描述了在使用按钮时,哪些应该做,哪些不应该做,所以这对于设计师而言很好理解。这就是整个设计指南最出色的地方——它能让设计师自行决定设计方案。

按钮设计指导

注意经常被忽视的细节

当你设计用户界面时,你曾经多少次构思过弹出窗口或报警模块?material design设计指南有一章主要讲对话框的。设计师通常并不是一开始就要设计这些对话框,但当要用到时,它们仍旧是界面设计的一部分,需要认真对待。

并排按钮模式对话框

关于对话框的设计指导很详细。其中说明了需要用哪种类型的按钮,以及为什么要那样用。同时,还翔实又透彻地写出了关于对话框的详细设计说明。

“在每个按钮的文本信息都没有超过最大按钮宽度时,推荐使用并排模式。比如说最常用的 确定/取消 按钮”——对话框

“当按钮的文本超过了最大按钮宽度时,你就可以使用竖向叠加模式来呈现按钮文字信息。”——对话框

竖向叠加按钮模式对话框

设计指南规定了对话框中需要包括的内容类型和行为方式。这种对细节的延伸既迷人又有趣,因为这些都是通常被忽略的设计元素。这正好说明了一点,那就是为了打造一种强有力的设计规范和设计语言,任何一个元素都至关重要。

和“ 可感知性(Affordance)”有关的一切

在指南中,很多次强调了“可感知性(affordance)”(译者注:affordance是 afford(能够承担)的名词形式,在讨论设计时指的是物体或对象具有的某种操作或功能上的暗示性,有人翻译成可供性,但个人认为可感知性更好理解)。创造一种新的、统一的设计语言,唯一目的在于提供跨浏览器/平台的可感知性。为了打造高质量的设计指南,需要将“可感知性”包含在设计指南中。

“页签(tab) 用来显示有关联的分组内容。tab标签用来简要的描述内容。”——页签(Tabs)

在material design设计指南中,关于页签(Tabs)的用法描述的很聪明。Material design并没有将页签(Tabs)作为表单导航来用,而是用它来作为浏览内容的另外一种方式。令人耳目一新的是,某些特定元素,比如页签工具条(tab bar),是有使用条件的。通过元素的风格及其功能,来了解制定material design的设计师的想法,从而避免滥用,这一点很好。

页签(Tabs)

如果详细定义了不同元素的功能,这些元素就会各司其职。反过来,这样也能帮助构建“可感知性(affordance)”。如果某个元素以各种方式重复出现,用户就会一头雾水,这种做法对用户而言既不明确,又不公平。

“在一款app 中,页签(tabs) 使在不同的视图和功能间探索和切换,以及浏览不同类别的数据集变得简单。” ——页签(Tabs)

创造你自己的设计元素

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

“Toast 同 Snackbar 非常相似,但是 Toast 并不包含操作,也不能从屏幕上滑动关闭。”——Snackbars和Toasts

material design设计指南有一章很有趣,讲述了叫做“Snackbars和Toasts”的组件。这是两个你不经常听到的设计术语,snackbars和toasts都是我们已知的设计元素。如果你你看了上面的“引用”文字,并注意到下面的图片,你就会知道snackbars和toasts就是个简单的弹出提示。

snackbars和toasts

但我们这里所说的更重要。Material design包括各种弹窗类型。设计语言需要这么做,因此material design就这么做了。Snackbars以及toasts和对话框很像,但还是有所不同,因此,它们是独立存在的。Material design把它们简单地区分开,因为人们需要这两种弹窗来执行不同的功能。就像material design的其他组件一样,snackbars和toasts都有详细的设计指导——用例、尺寸和颜色。

snackbars和toasts的用例、尺寸和颜色

某些设计元素在一些场景下不能使用,但我们通常会忽视这一点。有趣的是,一些很简单的事,比如定义两种不同的功能弹窗,需要花费很长时间。我们不要忘记进行设计上的创新,包括去采纳那些可能被视为过时的设计元素,或者你希望被废除,但实际并仍旧存在的设计元素。在一些小事上进行创新非常重要,因为在今后的设计道路上,它们将会发挥非常大的作用。

toasts

你和Material Design

通读一遍material design设计指南,让我们知道你从中学到了什么。令人惊讶的是,通过这样一个简单的文档梳理可以教你这么多关于设计的知识。

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

推荐阅读更多精彩内容