Material Design让我打破的思维局限

   2016-11-22 0
核心提示:这段时间为了研究控件,细看了一下 Material Design,结果发现了很多创新、好用又有趣的东西。如果你想看一看 Material Design 的译文或者控件目录,这样的资源想必你能搜到不少。所以,我就不再锦上添花了,这里主要写的是 Material Design 给我带来的打破思

这段时间为了研究控件,细看了一下 Material Design,结果发现了很多创新、好用又有趣的东西。如果你想看一看 Material Design 的译文或者控件目录,这样的资源想必你能搜到不少。所以,我就不再锦上添花了,这里主要写的是 Material Design 给我带来的打破思维局限的东西,所以每一点都是精挑细选的关键点。

什么是 Material Design

Google Material Design 官方讲解链接:https://material.google.com/#):这是谷歌提出的一套集合视觉、交互和前端的界面设计规范,其目标有两点,一是用视觉形式囊括经典的设计原则,并将将前沿创新和技术可能展现出来,二是以移动端为基础,将所有尺寸、类型的设备统一起来。

在触屏为主的时代,悬停状态要慢慢淡出舞台

不论是下拉框、按钮、隐藏菜单……, Material Design 要么完全摒弃了鼠标悬停状态,要么就只把悬停状态看作一个无关紧要的视觉反馈。我虽然对悬停效果有些不舍,但也不得不承认,未来是点击和手势的时代,悬停已经在慢慢淡出舞台的路上了。

永远不要以为用户的设备尺寸是你可以预期的

尤其是那些用大屏的设计师们,不要有侥幸的心理认为在你的屏幕能完整显示的一页,在用户的设备上同样不需要滚页。在设备越来越多样化的未来,滚动条将不是一种选项,而是一种自适应。所以,永远要让页底的控制按钮浮起来,以适应过矮的屏幕。

Material Design让我打破的思维局限

阴影的目的不是美观而是纵深

谷歌向来强调层级概念,这也是它与苹果相差较明显的一点。 Material Design 认为,界面不只是平面的,元素之间也可以有纵向的高度差,那么体现这个高度差的方法,就是阴影。 Material Design 的纵向尺寸和平面尺寸都用同一单位(dp),并统一了不同纵向高度所对于的阴影样式。于是,便创造出了一个层级为堆砌起来的三维世界。

Material Design让我打破的思维局限

为了易用而确定尺寸

界面布局和元素的尺寸究竟是该交互来定还是视觉来定,这是一个争议性话题。我个人认为,尺寸还是应该先从交互开始,视觉设计如果从美观上考虑有别的想法,可在此基础上进行讨论修改。因为界面的存在意义不是为了好看,而是为了使用。元素过小、过大、尺寸不统一都会影响到使用,所以这些东西都是交互必须要考虑的。 Material Design 给出了一个32dp(0.508mm)的尺寸限制,规定最小尺寸的按钮和标签都有这么高,以保证触屏的使用舒适度。

Material Design让我打破的思维局限

隐藏与否取决于必要性,而非空间是否足够

我承认并且反省,直到昨天,我的做法都是将所有可能用到的东西都摆在界面上,发现看起来过多或放不下时,才将部分通过“更多”图标等方式隐藏起来。这样做来其实有很多问题,如果用户的屏幕足够大,那么是不是什么东西都不用隐藏了?当然不是这样,无论界面空间多充足,人的注意力都是有限的。所以 Material Design 主张只将必要的元素(也许只是一两个)展示出来,其余的全部隐藏。

Material Design让我打破的思维局限

慎用色彩

不知道这是不是又算不小心踏入视觉设计的领地了,色彩确实又是另一个需要视觉设计和交互设计共同探讨的话题。很多时候,增加一个色彩或者不增加,对美观并没有什么很大的影响,如果是这样,那么最好不要增加。世界顶尖的设计公司对色彩都是相当吝啬的,因为界面存在的意义是使用,而为色彩越多,对用户的干扰越大(可拓展性和品牌识别性也越低)。

Material Design让我打破的思维局限

让真正重要且唯一的东西打破既定框架

交互设计如果做的随意了,结果会很糟糕;但是如果做得严谨了,有时候会变得很无聊。我们是可以找到一个突破点,做一些不一样、打破格局的东西的,但是这个东西必须是真正重要且唯一的东西。这个很好理解,如果只有一个东西不一样,那么画面会很有趣,但是如果所有东西都不一样,就会很混乱了。Material Design 的圆形悬浮按钮就是一个真正重要且唯一的东西。

Material Design让我打破的思维局限

弹出框没必要多复杂

我从没仔细看过弹出框的标题是什么,虽然我知道大部分弹出框都有标题。很多人如果发现弹出框没有右上角的“×”会抱怨,但实际上他们根本不需要那个“×”,谁都知道在方框之外点一下弹出框就消失了。 Material Design 对弹出框的运用很灵活,如下图这种情况,弹出框的用处只是增加一段评论而已,那么干脆将标题、确定按钮和取消按钮都去掉,这样使用起来反而更加顺畅了。

Material Design让我打破的思维局限

不是视线追踪元素,而是元素追踪视线

我曾提过,做设计时应该认真考虑甚至计算用户的操作步数和移动距离。光是这些也许还不够,最好是连视线移动都能够尽量避免,因为二次聚焦也是需要时间的。上面那张图中,弹出框上的文本区域与弹出框下的评论区域是重合的,这样设计就避免了用户多次移动视线。 Material Design 把视线追踪也运用到了下拉框上,点击下拉框区域后,选项框完全覆盖之前的下拉框区域,并且按顺序排列的选项会自动滚动,让默认选项的位置刚好在之前的下拉框区域之上。

Material Design让我打破的思维局限

慎用卡片

自从iPhone把圆角阴影炒火了之后,在很多地方都出现了滥用情况,这几年“卡片式”盛行,隐有愈演愈烈之势。 Material Design 主张将卡片做成明显的圆角,结合纵深感较强的阴影,这样就能够跟其它区域区分开来。但是在信息密集的地方又不提倡使用卡片,因为卡片的边框会对注意力造成干扰。

Material Design让我打破的思维局限

让信息碎片化

我们看任何东西,都很少会老老实实地完整阅读。在纸上看书的时候,我们往往通过不断地扫视、翻页来寻找自己刚兴趣的内容详读。在浏览网页时,我们也希望能够一眼在界面上扫到自己感兴趣的内容,然后再深入研究。所以,设计师通常只需要抛出一些“引子”,用户如果感兴趣,就可以顺着这个引子寻找到他们想要的东西。所有信息展示应该碎片化,注重丰富而不是完整。

Material Design让我打破的思维局限

本文作者:雨涵_Zoe

本文编辑:Lin.

声明:本文由本文由雨涵_Zoe原创,授权设计夹发布,Lin. 编辑,如需转载,请申请授权并保留作者全部信息,转载合作请添加微信:sezign01。更多精彩内容请关注设计夹公众号。

Material Design让我打破的思维局限

 
标签: Material Design 设计
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 我如何将Material Deisgn带入实际产品中
    我如何将Material Deisgn带入实际产品中
    最近,与上海的“谷歌开发者社区”(GDG)一起策划并与大家进行了一期关于Material Design在的话题分享会。这几天我抽空将当天分享的PPT内容再精简整理了一下,并在关键页面配上了对应的文字说明,便于分享给没有来得及到场及更多的朋友。我问过很多人这个问
  • 导航栏分析:iOS 与 Material Design的对比分析
    导航栏分析:iOS 与 Material Design的对比分析
    前阵师傅带着整理设计规范,结束项目后从规范角度去反思,会发现自己还有很多东西要学。交互设计师真的是一个很专业的职业(划重点!),虽然国内市场入门门槛低,但是要做出合理的方案是需要有专业的知识储备的。定义iOS:导航栏能够实现在应用不同信息层级
  • Muse UI — Vue2.0 和 Material Design 结合
    Muse UI — Vue2.0 和 Material Design 结合
    Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场。 先睹为快 Muse UI 主要用于移动端和一些对浏览器兼容性要求不高的桌面端应用,先上地址: https://github.com/museui/mus
  • Drawer 详解 ·Material Design Part 3
    Drawer 详解 ·Material Design Part 3
    这是一个系列文章,在这个系列里,我会按打造一个Material Design App的路线介绍所有应当掌握和值得掌握的系统组件。你会在这些文章里了解到这些组件的使用和内部实现原理,以及它们背后所反映的Material Design的设计思想,希望你会喜欢。往期回顾 Material
    11-13 安卓开发
  • Material Design
    Material Design
    经过一周的学习,整合梳理自己学到的知识,与大家分享以下是自己将Material Design中认为比较重要的知识点整合所得,有遗漏或者补充的欢迎大家指出,共同进步!!Material Design(材质设计)一、Material Design是什么?Material Design,中文名:原质化设计
  • Material Animations 4:Circular Reveal Animations
    Material Animations 4:Circular Reveal Anima
    Circular Reveal Animations,官方称之为循环揭露动画效果,是一种用来显示/隐藏一组UI界面元素的动画效果,它是在API 21引入的,对应的类是 ViewAnimationUtils 。 循环揭露动画效果可以和共享元素变换动画组合,用来创造一些有意义的动画效果,自然地告诉用
    10-13 安卓开发
  • Toolbar 详解 · Material Design Part 2
    Toolbar 详解 · Material Design Part 2
    这是一个系列文章,在这个系列里,我会按打造一个Material Design App的路线介绍所有应当掌握和值得掌握的系统组件。你会在这些文章里了解到这些组件的使用和内部实现原理,以及它们背后所反映的Material Design的设计思想,希望你会喜欢。往期回顾 Material
  • Material Design风格常用控件的使用与定制
    Material Design风格常用控件的使用与定制
    你是否还在使用selector来定制Button普通状态、按下状态的变化呢?你是否也想自己的Button有Material Design的阴影效果呢?你是否也想让各种控件轻松变换各种颜色风格呢?那么看完这篇分享,你就会有答案了。二、4种风格的Button 系统默认有4种风格的Button效
  • 「最美应用」解决通讯录头像难题
    「最美应用」解决通讯录头像难题
    让用户一个人去维护整个通讯录的头像更新十分不现实。一加推出的氢 OS 直戳用户痛点,自动用几何线条去匹配用户头像,使通讯录更倾向于 Material Design 风格,以与系统协调。当然短时间内,氢 OS 并没有匹配其他手机的意愿。 Micopi Pico 可以提供类似氢OS的
  • Material Animations 2:Shared Element Transition
    Material Animations 2:Shared Element Transi
    元素共享变换(shared element transition)决定了共享的view元素从一个Activity/Fragment 到另一个Activity/Fragment的切换中是如何动画变化的。 请记住,共享元素变换并不是真正实现了两个Activity或者Fragment之间元素的共享,界面还是两个不同界面,只不
    10-07 安卓开发
点击排行