学UI网小编:追梦–不悔之前更大家分享了很多有关设计方面的文章,学UI网上面也有很文章和教程,这次我给大家分享一个容易被忽略的设计细节,对你设计的界面整体影响是非常大的!那就是元素设计,说到元素设计,刚刚入行的肯定就蒙了,什么是元素设计嘛?那我们就来看看下面这个文章!

 

Material Design元素设计指南

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

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

拥抱变化

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

按钮样式

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

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

按钮风格使用场景

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

按钮设计指导

注意经常被忽视的细节

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

并排按钮模式对话框

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

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

“当按钮的文本超过了最大按钮宽度时,你就可以使用竖向叠加模式来呈现按钮文字信息?!薄曰翱?。

竖向叠加按钮模式对话框

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

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

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

“页签(tab) 用来显示有关联的分组内容。tab标签用来简要的描述内容?!薄城═abs)

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

页签(Tabs)

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

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

创造你自己的设计元素

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

“Toast 同 Snackbar 非常相似,但是 Toast 并不包含操作,也不能从屏幕上滑动关闭?!薄猄nackbars和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设计指南,让我们知道你从中学到了什么。令人惊讶的是,通过这样一个简单的文档梳理可以教你这么多关于设计的知识。

文章来源:s2dongman

编辑:追梦–不悔

转载请注明:学UI网—UI设计师学习教程平台 » 元素设计指南,设计必看

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
5 分钟交互设计指南:对话框5 分钟交互设计指南:对话框
教育产品组件化交互设计的实践与思考教育产品组件化交互设计的实践与思考
作为交互设计师的经验感悟作为交互设计师的经验感悟
专业的交互输出文档应该怎么写?专业的交互输出文档应该怎么写?
背单词APP「百词斩」原型分享背单词APP「百词斩」原型分享
微信有哪些隐藏的细节或逻辑很惊艳?微信有哪些隐藏的细节或逻辑很惊艳?
标签栏ICON的设计与应用标签栏ICON的设计与应用
界面交互动效核心知识的分类与总结界面交互动效核心知识的分类与总结
高达1440M!5套高质量UI KIT下载!高达1440M!5套高质量UI KIT下载!
问答社区「知乎」APP原型分享问答社区「知乎」APP原型分享
?