Material Design开发文章系列3:Material Design Check List
----------------------------系列文章概要---------------------------------------Material Design出现之后国外网站上出现和很多关于Material Design的设计与开发文章，有很多是重复的，google官方博客将这些文章搜集整理成了几篇比较经典的文章，我认为对于开发者来讲，只需要知道其中三篇就能掌握绝大多数知识了。这三篇文章的原文地址分别是（当然翻墙是必须的）：
还好这三篇文章都被翻译了出来，而且还算是比较优质的翻译。后两篇主要从整体设计介绍了一个标准的Material Design的App应该遵循哪些设计标准，并告诉你如何在你的代码中实现，并介绍了如何向前兼容。其实后两篇在整体结构上是差不多的，只是在Implementing material design in your Android app中，侧重的是Material Design的设计标准，而Material Design on Android Checklist则侧重的是实现细节和注意事项。其余两篇译文文非别是：正文《Material Design开发文章系列-3:Material Design Check List》主要从细节实现方面提醒你应该如何更好的实现Material Design，标注Signature element为强调部分，标注InCode的为实现方式。因为用户将很快使用Android5.0系统了，而且也会慢慢习惯Material Design的app，比如Gmail的未来替代者inbox，Google Play Tumblr等，因此Google为了开发者能够更快的支持Material Design的app以及Android 5.0，连续推出了3篇文章。在下面这篇文章中，Google为我们提供了一个表单，这个表单列出了Material Design应该具备的一些风格。你在实现Material Design的时候，可以参照下面的表单。整个表单根据Material Design的4个关键方面分为4个部分。下面我们就介绍一下整个表单内容。如果你使用了以下中的几个模块，特别是标注为signature elements的元素，并遵循传统的Android设计最佳实践，那么你已经朝着迷人的Material Design设计迈进了。Tangible Surfaces 有形的外观UI由不同层次的表层组成，每层的下面附有阴影。Signature element: 阴影阴影用于和前部的元素交互，帮助聚焦和建立层级效果。In Code:在5.0系统里，这样的阴影效果直接由属性：android:elevation 和 android:translationZ 提供，而在之前的版本，阴影通常由PNG图片资源来实现。Surfaces and layering.阴影和表层被用于连贯和结构性的情景中。每一个阴影标示着一个新的表层，这些表层的构建需要细心和深思熟虑。一个屏幕中通常拥有2到10个表层，避免太多的内嵌层。可滑动的内容滑动到屏幕的边界或者另一个表层后面的时候铸造了一层覆盖在另一个表层上的阴影。永远不要剪裁一个可见边界的元素这样会导致一种没有边界的感觉。换句话说，你应该很少滑动表层上的内容，而是滑动整个表层。In Code: 在使用ListView和ScrollView的时候，使用 android:clipToPadding=false 来避免边界的剪裁。表层应该是简单，而且是纯色的背景。A Bold、Print-Like Aesthetic 一种加粗，打印风格的审美你所展示的内容来自于一种经典的打印模式，重点在于色彩的使用，有语境的图片和结构性的空白区域。Primary and accent colors.Signature element: 主调色彩和强调色彩在颜色层面背景和关键的组件上，使用了一种主调色彩和一种强调色彩，比如text和checkbox。这种强调色彩和基调色彩形成了鲜明的对比，比如一个app可以使用一种深蓝色作为基调颜色，而把霓虹色作为强调的颜色。这种强调的色彩是极其鲜明的，通常用于关键的组件上，引起用户的注意，比如一个floating button，selected tab 或表格区域。In code: 通过在你的主题中设置 android:colorPrimary and android:colorAccent属性（如果使用appCompat，不用再去设置“android”前缀了），AppCompat将会自动的为那些text，checkbox和一些在L之前的组件着色。Signature element:透明的状态栏在5.0系统上，status bar会被填充匹配app的基调，或者当前屏幕的内容的色彩。对于全屏填充的Image效果，status bar可以是透明的。可以通过在你的主题中设置android:colorPrimaryDark 或者 android:statusBarColor或者调用Window.setStatusBarColor来实现。icon/photos/images和其它前部元素的表层会被“墨水”着色。它们不需要阴影也不用使用梯度效果。颜色可以从图片中抽取用于适配在表层的UI元素。InCode: 通过Palette support library来实现。Signature element: 使用material design的iconicons 的使用请遵从 system icon guidelines，标准的icons请使用material design的icon，（这个已经在GitHub中开源）向导：/design/spec/style/icons.html#icons-system-icons资源：/design/spec/resources/sticker-sheets.html#sticker-sheets-components照片通常是沉浸并且是全屏的，比如，对于详情的界面，使用一种边缘到边缘的模式，甚至可以出现在app bar或者 status bar的底部。In code: 新的 Toolbar widget 可以是透明的并且直接放在你的布局中，对于status bar的问题,看以参考在Stack Overflow 上的相关问题：Signature element: 适当的尺寸合适的地方，text内容，app titles,应该对齐3个keylines：在手机上，那些 keylines 距离左边是16dp和72dp，距离屏幕右边缘是16dp。在平板上是24dp和80dp。UI元素的对齐方式和大小应该根据一个8dp的网格。比如，app bar在手机上为56dp，在平板上是64dp。Padding和Margins可以使用像：8dp,16dp,24dp的值等等，更精确的text位置是使用一个4dp的网格KeylinesAuthentic Motion 真实的动效在不同的app上下文和状态下，动效可以提供一种可视化和连贯的体验。通过小规模的使用切换动画可以增加一些情趣。而不是为了动效而动效。总的来说，UI和内容元素不会简单的消失或者出现，它们会以动画的方式移动入到一个单元或者单独的出现。Signature element: &hero&切换动画当你按下一个条目去看详情的时候。这里有个叫“hero”的切换动画，它会移动并且缩放它所在的位置和详情屏幕之间的条目。InCode：在SDK中它被叫做 “shared element transitions” ，support版本的FragmentTransaction也支持了shared element support。&Hero& TransitonSignature element: Ripple effects Ripple effects 为你按下条目的增加了反馈效果。InCode：默认的 android:selectableItemBackground 和 android:selectableItemBackgroundBorderless 拥有这种效果，或者你可以使用RippleDrawable (&ripple&) 去自定义效果。在5.0之前的设备上，ripples没有这种预期的效果，因此，遵从默认的android:selectableItemBackground 行为。Signature element: &circular “reveal” animation.UI元素可以通过一个圆形的”reveal&动画出现。InCode：查看文档或者ViewAnimationUtils类。Signature element:Vector动画图标在更微妙更赏心悦目的情况下使用动画，比如去转换icon 的状态和text的状态。比如，一个“+”图标可以变形为一个“x”标识，或者一个概述的图标可以变成一个栅栏效果。InCode：icon的变化可以通过AnimatedStateListDrawable 和相应的XML文件来实现，你可以在Google I/O app源码中找到。它支持了动画的vector图标。动画和切换通常在300ms内。交叉淡入淡出通常被平移和滑动切换代替：竖直的滑动产生的底部导航，水平滑动产生的侧面导航。对于滑动的转换，加速和微小的减速要好于简单的线性移动。可以参考：Adaptive Design（UI Patterns）有型的外表，大胆的图形设计，加上有意义的动画效果带来了一种连贯跨设备的体验，无论在手机，平板，笔记本，TV，可穿戴设备，汽车上，等都有同样的体验效果。另外，下面的关键的UI 设计模式有助于在不同设备之间建立一种连贯的体验。app使用了响应式设计，确保了在不同尺寸的屏幕和不同的方向上能够适当的布局。可以参考平板App样式的清单表去优化那些面向平板的App.在material design中，详情界面的切换通常都是“Hero&动画的。在多面板布局中，app可以使用多个toobar去代替一些下一步的相关操作。Signature element: FAB如果合适的话，App推荐floating action button作为一个屏幕上的关键操作。FAB是一个圆形外表，附带有阴影，表面色彩采用亮色，强调色。它可以用于执行一些主要的操作，比如，发送，撰写，创建，添加，或者搜索，大约8dp的elevation。通常悬浮在屏幕的右下角，或者边界的中心位置。The floating action buttonApp BarSignature element:App使用了标准的Android App bar，这个App Bar没有使用app图标。颜色和印刷效果替代了品牌的推广。这个App Bar带有阴影，或者拥有一个带有阴影的表层。通常App Bar 4dp elevation。InCode：在5.0中使用新的ToolBar Widget引入到View层级视图中。AppCompat提供了兼容的android.support.v7.widget.Toolbar来实现它。app bar可能是标准高度的2到3倍，在滑动的时候，app bar可以恢复到正常高度。app bar在有些情况下可以完全透明，可以在一个图片之上附有text和操作，比如Google Play Newsstand 应用。App bar title 应该和第二条keyline对齐。InCode：在使用Toobar widge的时候，请使用 android:contentInsetStart属性。在适当的时候，往下滑的时候，app bar可以滑出屏幕，为内容留下更多垂直方向的空间。往上滑动的时候，app bar可以恢复显示。（这个式样：quickReturn）TabsSignature element:Tabs应该遵从最新的 material design 设计风格。在垂直方向没有分割线，如果app使用了top-level的话，tab可以作为app bar的一部分。InCode: 可以参考在SDK中的示例 SlidingTabsBasic 或者Google I/O app source（My Schedule 部分）另外加上 前两天分享的 SlidingTabStripTabs应该支持手势滑动InCode: 所有的Tabs应该使用support lib中的ViewPager 控件在选中Tabs时，应该有一个前部颜色的变化或者使用强调色彩的颜色条。在tabs滑动的时候，这个线条应该平滑的响应。抽屉导航Signature element:如果你的app使用了导航的Drawer，它也应该遵从最新的material design风格。drawer应该出现在app bar上面，也应该以半透明的方式出现在status bar后面。InCode：使用support lib 中的DrawerLayout控件和上述谈到的ToolBar 控件实现抽屉效果。在stack over flow中有相关的问题参考：Signature element:左上角图标在app bar最左边的icon是一个抽屉的指示器。/design/spec/layout/structure.html#structure-app-barapp icon 在app bar中是不可见的。可选择的，在早期版本中，如果app拥有一个抽屉，那么最左边的app icon会保留并且会变窄，比如在4.0中。标准的抽屉：在手机上不要宽于320dp，在平板上不要宽于400dp,但是不要小于屏幕宽度 - 标准的toolbar高度，比如在Nexus5中：360dp - 56dp = 304dp每一个抽屉条目的应该沿着grid网格，所有的行高为 48dp，上下8dp边距。Text 和 icon 应该沿着主线越来越多的App来自google play生态系统将会更新到Material Design，预期2014冬季对于Android的设计来说是一个大的变更期。更多关于Material design设计资源，可以参考YouTube视频：更多的开发者资源，可以参考文档：示例集合/gabrielemariotti/cardslibFAB（无图）Menu & Drawer/balysv/material-menu/ikimuhendis/LDrawerRippleTransition(图太大)VectorDialog
上一篇： Material Design出现之后国外网站上出现和很多关于Material Design的设计与开发文章，有很多是重复的，google官方博客将这些文章搜集整理成了几篇比较经典的文章，我认为对于开发者来讲，只需要知道其中三篇就能掌握绝大多数知识了。这三篇文章的原文地址分
下一篇： 图片类应用，免不了对图片的处理，常见的滤镜效果，如灰度、底片、浮雕、柔化、光照等效果，更有意思的有各种如哈哈镜一般的变型特效，当然，也有其他的人物面部美化、图片合成等高级功能，这些功能组合在一起便能够提供十分新奇的体验。 下面介绍几种简单的说到极简，你会想到什么？
一些具体的形象也许会蹦出来：日系杂货、北欧家居。性冷淡风的办公室。苹果的所有产品。
不过提起“极简设计”，最常见的一个反应似乎是：“嗯，听上去挺容易的。什么都不放嘛。”
英国设计工作室 Transmission 的平面设计师 Stuart Trolly 在生活和工作中也经常遇到这样的情况。他还记得 1972 年泰特美术馆（Tate Gallery）购入美国极简主义艺术家 Carl Andre 的雕塑作品 Equivalent VIII 时，英国主流媒体的反应。Equivalent VIII 由 120 块标准家庭用砖组成，以 6×10 的长宽比砌成两层长方形。《每日镜报》（Daily Mirror）当时在头版上评论：“真是一堆垃圾（What a load of rubbish）。“
在新书《极简：平面设计中的新简约》（Min: The New Simplicity in Graphic Design）中，Stuart Trolly 正是想说明：极简并非我们想象中那么简单。
它与其说是一种潮流，不如说是一枚存在已久的社会状况晴雨表，总在社会面临重要变化的时刻出现。“比如上世纪 50 年代，极简在平面设计中的应用是为了对抗消费主义的兴起。那时到处都是花里胡哨的商业广告。极简就像一股走上前台的遏制力量，在过度强调装饰、夸张炫耀的设计潮流中划开一道口子。”
虽然常被用来对抗矫饰，极简却不该仅被视为“繁复”的对立面——它是一种看似简单的丰富。“不是只有黑白对照、大量留白，再加上赫维提卡字体（Helvetica）。这些只是瑞士风格的极简设计，最近有点过于泛滥了。“
以下面这张香港设计师 Renatus Wu 创作的《异色的橙》（Ishoku Orange）小说封面为例。整体排版环绕着这个线条细如发丝的橙色圆圈，内侧用紫外线上光油（UV varnish）再次强化圆圈的存在感。神秘的圆圈就像给读者打开了一条通道，进入作者描绘的那个跳跃、混乱、古怪的世界。
简约的平面设计也可以让欣赏者专注于内容，而不会因好看的装饰分神。比如 The Vinyl Fatory 给歌手特雷弗·杰克逊（Trevor Jackson）出品的这套名为 Format 的歌曲集。每首歌分别被录制在唱片、磁带、迷你光盘上，仅留有最基本的信息，以此纪念实体音乐和那些可能已被遗忘的音乐形式。
Stuart Trolly 的这本新书分为精简（reduction）、创作（production）、几何（geometry）三个篇章，收录了 150 多位设计师过去 3 到 4 年中的极简设计商业作品。“我选的都是些好玩又带点实验性质的东西” Stuart Trolly 开玩笑地说，“放心，里面可不是空白的。”
　　题图、配图来自 transmission.design
凡注明 “艺术中国” 字样的视频、图片或文字内容均属于本网站专稿，如需转载图片请保留
“艺术中国” 水印，转载文字内容请注明来源艺术中国，否则本网站将依据《信息网络传播权保护条例》
维护网络知识产权。内容字号：
段落设置：
字体设置：
精准搜索请尝试：
设计师角度：再谈谷歌Material Design
来源：作者：vincewong责编：远洋
虽然市面上写Material design的文章已经多如牛毛了，但是作为设计师，我看到的文章要么就是隔靴搔痒没有点到主题，要么就是翻译原版却没有经过消化，空有一堆干货，在这里我觉得有必要从另一个视觉，去看MATERIAL DESIGN的世界。背景资料（之前的Google Now）Material design（内部代号『量子纸』）是Google开发的设计语言并在日的Google I/O大会上推出，是基于首次在Google Now上面出现的『card motifs』（直译过来叫做『卡片式图案』）扩展设计出来的。这种设计大量的增加了栅格化图层、响应式动画，以及一些赋予光影变化的变形、叠化、深度等效果。设计师Matías Duarte解释这种设计风格『我们不是在做真实的纸张，但是我们的虚拟设计元素却能智能的拓展和变形（大意就是各种设计元素并没有遵守拟物设计，但是却有一定的实体物理性质，可以理解为物理性质拟物）。真实物质是有物理表面和边缘的，接缝和阴影又能够揭示你触摸的是什么，Material设计来源也就是这个道理』。Google说他们这个设计语言思路是来源于纸和墨，所以充满了物质性。Material design能在2.1到v7中都能使用，2009年以后出品的所有Android实体设备都可以。Material design会用Google一贯以来的做法，通过网页端以及移动设备产品的扩张，来逐渐扩展影响力，Google也发行了Application programming interfaces (APIs)给第三方开发者去了解和把他们的应用做成这种风格。在2015年，Material design已经占领了大多数Google Android移动设备APP的界面了，包括Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, Google Maps, Inbox,还有所有Google Play旗下直属App，以及Chrome浏览器和Google Keep外设，还包括了网页端一些应用界面，例如Google Drive, Docs, Sheets, Slides and Inbox。Material design的UI设计规范被称为『Polymer paper elements叠纸元素』（暂且这么翻译），它包括『层叠元素库』，在浏览器中它会用一个『垫片』来显示网页端外加的API组件，表示它并不是该软件本身携带的控件。设计详解这一部分的内容是的部分摘要和总结，在此表示感谢。1.动画在真实世界里面，由于重力等有加速度存在的力场里面，物体运动速度大多数时候不是线性增加的，斜率改变也许更接近二次函数，所以在Material里面，动画首先要遵守『物理』，偶尔比如你要做出虚拟的上抛运动，这时候你的初速度要设定到最高才符合真实世界的规律。还有就是要考虑一下惯性，想象一下你要赋予这个物体的质量和初速度，有助于你做更好的动画。同样的就是在真实世界里面你试着和水面互动，你会扔石头，或者用手指触摸水面，结果有不同但是效果是相近的，水面会泛起涟漪。在Material里面你点击设计交互元素产生的响应也应该和这个一样，产生『涟漪』，下一步也应该以你的点击的地方为中心打开一个新界面。对于转场，也是类似，永远想象观众在翻书，而不是看电影那样硬切。在元素变化不大的界面切换中，想象要新进来的元素、要走出去的元素、要保留的元素都是要沿着怎样的路线和动画去走，规划出来的东西都要井然有序，即便是要加入『物理』的动画了，也不可以乱了阵脚。以上的做好了的话大体能把UI动画做到90分，最后的10分就是来源于细节了。但是也要保证『简单却动人』，如果复杂又违和，宁可不要。2.样式大胆使用鲜艳的颜色，一般情况下饱和度达到色彩图中500为佳。糖果色和撞色也是Material的一个重要特色，选好两个对比强烈的颜色，各自选取三个饱和度纬度的颜色，这样就基本上把一个画面的主要颜色都定下来了（优秀的设计需要有一个强而有力的VI制定守则），其中一个色系作为强调色，在关键的控件设计上起到吸引视觉重视的作用，谨慎使用。从Android诞生伊始，全部Google平台中Roboto就是最标准的字体，在历次改版之后Roboto显得更加清晰特征明显了。比例一般都是按12、14、16、20和34号的字体排版缩放，层级要非常清晰明了。在Material的设计标准里面还有一个更加进步的规则就是不同字号颜色以及间隔和换行都需要有部分修改，以防止对比度过大而引起注意力分散。对于阅读长度，『要得到良好的阅读效果，每行应当包含60个字符左右』。对于图标而言，整个设计里面有相对固定的栅格规范，圆角处理和避免过于锐利的直线角，还有就是在各种场合下都有很强的大小和颜色适配性。作为一套UI，也要经常处理图像和设计元素的搭配。虽然图像本身的质量永远是处于不可控制的范畴，在可控的范围内（比如APP背景、登陆界面、专辑缩略图等），增强和周围图层及控件的关联度、巧妙使用遮罩都能让设计更具『人性化』。插画和摄影常常混搭，能加强戏剧性，但是非常避免只有照片甚至是只用图片库的图片。还有就是像素要满篇幅，留白处理会让其他设计和图片格格不入。分辨率也要保持足够大，不要随意添加滤镜，甚至不要加很强的灰色半透明，这些都是降低画面质感的行为。3.图层由于整个设计的本质是想模仿『纸墨』，所以在Material Design处处要遵守的就是印刷时代的栅格化设计，这样能最大化带来『纸质』体验（虽然我觉得这只是针对欧美印刷业）。图层之间有非常明确的相互关系，同级的『纸张』只能相互『推动』（并且永远保持一个『接缝』），不能忽然窜到别的层级的纸张上。另外『纸张』都是有弹性的，但是却有一定的阈值，设计的时候也同时考虑之前说的物理学原理。在Material Design中所有衬线都是有意义的不可以滥用，只是为了使得图层互相之间的逻辑非常严密。于是在有些界面不再有标题栏的时候，这些衬线就变成了非常重要的图层要素。每个APP独立性非常严谨，互相不能互窜图层。如果有APP本身包含多图层，那么会有一些控件是用于连接这些图层的，那么它将会一直浮现在所有图层之上。还有一些守则，比如系统的提示永远在图层最上面，这也是所谓的『深度』效果了，所有图层都有它在3D上的『深度』，在Z轴上有自己的位置，而每个图层上它们都有他们的阴影来暗示它们距离最下面的Z平面有多高（虽然我觉得有时候这个处理方法有点太过头了，尤其层高高的时候阴影简直吓人）。关于各种元素之间的间隙尺寸，Material Design都有非常成熟的尺寸规定，水平和垂直部分都有。而所有这些被定死的尺寸以外，都是由内容和留白来占据的，这就是它灵活处理的部分了。即使在平板和PC上，也是同样的处理法则。遇到棘手的尺寸，就用倍数法则：这里要说到更深层次的东西，关于交互逻辑了。其实UI页面之间有三种联系：一个屏幕完成所有事情，如计算器App；同一个层页面但是不同Bar切换，比如拨号界面直接推拉出收藏夹这些；复杂应用，多层页面，数据较多，比如有分类功能的购物App，包含预览功能的文件夹。这种已经非常接近不同App之间的逻辑了，但是又稍微不同；这时候你不仅要考虑单个页面设计了，要考虑整体的UI设计以及设计过程要保持头脑清醒（这时候你更像个导演或者建筑师，纯美工级别的请跳过以下内容……），首先出来的这个页面一定是用户最想看到了。而且你要做到不要混淆视觉，如果满屏幕都是导航栏将会使得用户非常迷茫（就像以前版本的Android打开App会出来一大堆的Bar，极其丑陋），另外Icon设计的辨识度、能否清晰的表达出直接访问路径的内容，都是非常重要的。如果实在太多功能，先考虑精简，然后考虑平铺，再考虑侧滑，尽量少的让用户产生多余的使用步骤（当然如果你是在做Motion动画，这个观点也是值得采用的）。如果你的应用页面有大量同级的『纸张』，你可以加入边选栏或者侧边栏来管理这些复杂的List，但是这是需要一点学习成本的，因为它们不是一打开就能看到。当然如果是在平板或者PC上看的话，可以做出一点小改变，比如工具栏可以长期在上面，而底栏未必出现。一般来说尺寸设计：（手机上）侧边导航栏宽度=屏幕宽度-应用栏高度；工具栏设计未必会限制得很死，有些情况它甚至能做出很大的变动，但是基本样式以及分级是务必十分明显的：当然，在Material Design里面其实这些工具栏也是有尺寸要求的，和之前的水平上的尺寸要求类似，工具栏和底栏边栏上，内容和空白可以自由去填补剩下没有硬性要求的部分：4.组件在点选一个项目的时候（比如一个人的联系方式），如果这个项目能操作的项目超过了3项，那么就务必要用到底部动作条这种『大工程』的控件了，普通的那种两个三个按钮的对话框没办法满足。当然也是有一定的尺寸标准的：按钮是Material Design里面的一个非常重要的部件，不可以把它当成纯装饰元素，当然按钮分为『圆形Icon式』FAB和『有背景色Raised /无背景色Flat文字的普通按钮』，虽然点击后都有涟漪效果，但是三者功能完全不一样：这三者的选用一般是基于图层高低来确定的，还记得我之前的那个图吧？仔细想想你需要赋予这个按钮在哪个3D图层、有什么功能（要准备推拉和弹出一堆同一个图层信息的就用FAB、连续一片的卡片式或者接缝式的图层上一般就用Raised、一堆文字对话框伴随的一般就是Flat），然后就你知道应该用什么按钮了。另外按钮的位置也是有尺寸标准：关于按钮的动作，在每一步上它的颜色都是不一样的，一般来说参数如下：Raised Dark/Dark Color最小宽度: 88 dp，高度: 36 do正常状态: Color 500，覆盖状态: Color 600，点击状态: Color 700，不可用状态: 10% #ccc遇到特殊页面，按钮的界限有点模糊，形状也可以有变化，但是响应面积依然要注意；在Material Design里面的下拉菜单有一个非常重要的注意点，就是不能把之前的图层切断，所以只能在边缘部分往下面展开，如上图；下拉菜单也有几种，一种常规的就是什么都不显示，第二种就是有默认选项和下拉按钮，第三种是有默认值和下拉按钮而且还能自己编辑，他们也是有响应动作的。多种选项和下拉菜单连在一起的时候也有版式要求，如上图。和大家想象的不一样就是在Materila里面的卡片其实还是有小小的拟物化的，圆角和阴影是必备要素。卡片的内容类型都可以不一样，而且还能互动，例如添加评论点赞之类，但是不宜过多，表示出它的基本功能即可（控制在两项以内）。网格设计展示图片和文字必须简洁明了，编排禁止混乱和滥用阴影。千万不要在图片下面加入分散注意力的部件，如下：在布局上，也是有一定讲究，比如：字体设计正文：14 sp或16 sp标题：24 sp或更大扁平按钮：Roboto Medium, 14 sp, 10 sp字间距移动设备上的卡片间距屏幕边界与卡片间留白：8 dp卡片间留白：8 dp内容留白：16 dp和这种卡片有点类似的就是纸片。所谓纸片就是包含一张图片，一个短字符串(必要时可能被截取的字符串)，或者是其它的一些与实体对象有关的简洁的信息的小卡片，如上图。这种提示框一般用于警告，偶尔用于输入WIFI密码之类的。之前在按钮里面有说过一下，其实和文本有点类似，也有标题和正文之类的。涉及到操作的时候，一般在固定高度的提示框里面，注意一下有滚动条时候，哪些元素是不能够和滚动条一起动的。分割线也是Material组成要素。不需要每次都处理成等屏宽，尤其是比较密集的时候，需要一些缩进留出空白，另外给点文字提示也有助于信息筛选：网格一般用于存储同类内容，处理办法和卡片类似但是有点不同，比如它完全不需要拟物化的圆角和阴影。有时候你要在上面加入可用的控件和文字，那么处理方式和卡片基本一样。每一类（比如图标）千万不要放在一起使用，比如头像和复选框，选择那个是首选哪个只是视觉辅助。比如下面这种排版，根据情况是头像重要还是选项重要，决定后，二选一：遇到折叠的时候，就按照分隔线情况处理。滑动式删除这种行为可以两边滑动都做到支持：菜单设计一般在靠下面或者直接在上面出现，并且顶对齐原来的选框，然后比例也保持一致。多级菜单的时候也是一样的处理。动态上，还记得之前的中心点开吧？进度条有几种，包活线形的还有圆形的，以及确定的和不确定的。『要用户没有目标的白等是不道德的』Snackbar，也可以理解为小型弹出框，屏幕上同时最多只能现实一个Snackbar。还有一种类似的，胶囊状的提示框Toast，不含操作也不能关闭。他们都有规定就是务必要非常简洁，不能出现过多两个控件、图标这种干扰，纯文字。也不能遮住界面元素，只能在底部出现。在普通场合，以及有栅格排列的界面中，副标题应该如上处理。关于选择框和开关，除了和之前说的一样要涟漪等物理效果和满足版式要求以外，这里涟漪一般要扩大更大的范围。Tabs是一种节省空间的做法，并且可以便于空间分组管理。但是前提是，不能把它当成高级别的内容切换。放在地图上它就只能区别交通工具（所以它展开的起点终点会一直保持不变），但是绝对不能用来切换成设置，这样逻辑会变得很混乱：（这也是不可取的，因为ALL和CAMERA的关系会让人引起误会）不同风格和样式的文字或者Icon也是不能放在同一行的Tab里面的。如果出现复杂的Tabs或者空间不够用，那可以加入滚动效果：至于动画，参考之前的涟漪。文本框基本没啥说的，就是一些样式而已。倒是在Material Design里面，出现了『隐藏』的小标志，你可以点击然后回到字符开头。这个很创新：提示的颜色在字数还有不同剩余的时候也有提示：工具提示只需要文字和必要信息即可，框也不需要多余的箭头。5.部分交互模式选取工具：在选取文字后，弹出来的工具框必须全部大写。手势是智能手机交互的最精髓，可以分为两大类，触发动作（比如轻触点击）和触发行为（比如双击放大、拖曳）。这部分没有什么设计要素要讲，基本上都是交互要素。关于圆形按钮FAB一直都是这个Material经常被人设计时候玩坏的点。除了同一个界面里面不要出现多个圆形按钮以外，就是种类也不能混淆。这种就是典型不同类的搭配会让人很不舒服。另外，有歧义的，有破坏性（比如剪切删除禁止之类）的Icon不适合做圆形按钮。还有始终要用圆形，禁止其他形状。也严禁过于拟物化：而且它的位置通常在接壤接缝处，不能孤魂野鬼的出现或者被干扰的状态下出现；关于设置，一般都会放在每个App中的工具栏中，而比较少使用『集中』在设置App中。还有一个容易经常被人混淆的就是什么叫设置？这确实是一个用户偏好吗？信息和操作不是一个用户偏好。如果不是用户偏好，就不要把它当做一个设置。如果它是应用的静态信息（比如版本号、服务条款、开源证书），将它组织到一个帮助页面里。如果它是一个操作（比如刷新、切换账号），在你的应用的主要流程中为它找一个合适的位置。这个选项经常被用户更改吗？用户每次访问这个选项要多次操作会觉得负担重吗？如果是这样，不要把它作为一个设置。可以通过把它放在工具栏或者更多操作（action overflow）中，让这个控制更容易使用。只有少于20%的用户改变这个设置的值吗？如果是这样，不要将它作为一个设置。不管是新的还是本来就有的设置，都应该问这些同样的问题。对于已经存在的设置，最后一个问题应该多考虑一些：如果这个设置项被移除了，这会对那些不再能改变这一设置项的少数用户造成危害吗？如果会，或者你不清楚，那么合适的做法是将它作为一个设置项保留。其实即便你只是个做视觉的，也务必要注意这个问题，因为直接影响用户体验。一般来说搜索列出历史搜索、自动补全和附带语音功能能让搜索体验更美好。而开始输入后也要及时改变控件，比如『清除文本』这些。以上的界面为『持续性搜索』，下面这种叫做『可拓展搜索』（你可以理解为：本来主业是工具栏，偶尔客串当搜索框）。6.可达性|普适性一个产品,如果对于任何人（无论能力）而言，都是非常容易掌握、理解并可以用之来完成他们的目标的话，那么这个产品就是『可达』的。其实这个再通俗说，比如你的用户是有身体机能障碍的，请问你如何改变设计？当然更多时候这一点更像是如何引导视觉走向，降低识别的错误（比方从像素大小和对比度以及ICON设计入手），还有就是减少学习成本。微信搜索“IT之家”关注抢6s大礼！下载IT之家客户端（）也可参与评论抽楼层大奖！
软媒旗下软件：||||||||
IT之家，软媒旗下科技门户网站 - 爱科技，爱这里。
Copyright (C) , All Rights Reserved.
版权所有 鲁ICP备号