您正在使用IE低版浏览器，为了您的雷锋网账号安全和更好的产品体验，强烈建议使用更快更安全的浏览器
发私信给柏蓉
导语：11月份，Google推出Android 5.0 Lollipop，抢眼的Material Design设计语言也华丽登场。但你若以为它就是个界面设计风格，那就图样图森破了。关于它，不得不提的是Google的野心：统一所有设备。
同步到新浪微博
相信未来是VR和AI的结合。
当月热门文章
为了您的账户安全，请
您的邮箱还未验证,完成可获20积分哟！
您的账号已经绑定，现在您可以以方便用邮箱登录
请填写申请人资料&&|&&责编：席龙飞
&&&&谷歌的Android系统从2014年开始引入新的Material&Design设计语言，并于2015年开始设立Material&Design&Award奖项来鼓励开发者对自己的APP&UI设计采用这一语言，如今谷歌公布了这一奖项今年的获奖者。谷歌公布Material&Design&Award获奖APP&&&&按照类别，今年Material&Design&Award的获奖APP有任务列表和追踪应用Asana、旅行短租应用Airbnb、菜谱应用Kitchen&Stories、提供生活服务视频的C&Channel以及习惯养成应用Fabulous。
主屏尺寸 4G网络
投诉欺诈商家:
天津重庆哈尔滨沈阳长春石家庄呼和浩特西安太原兰州乌鲁木齐成都昆明贵阳长沙武汉郑州济南青岛烟台合肥南京杭州东莞南宁南昌福州厦门深圳温州佛山宁波泉州惠州银川
本城市下暂无经销商
4￥56885￥24996￥43887￥22998￥83889￥348810￥2599墨笺，当 Material Design 遇到中国风丨App+1 - 少数派
请选择你要投稿的专栏
墨笺，当 Material Design 遇到中国风丨App+1
0" v-cloak>
Material Design 因为它的简洁美观而被不少 Android 用户喜爱，不过恐怕没人想过当 Material Design 遇到「中国风」的水墨风格会是怎样一种效果。今天要介绍的应用「墨笺」就是这样一款将两者结合在一起的便签应用。
初次打开这款应用，顶图的水墨画与内置的诗词瞬间凸显了它的中国风属性，但 Drawer、FAB 与首页的卡片布局又告诉我们，这是一款遵循了 Material Design 的应用。
事实上，Material Design 的开发代号就是 Quantum Paper（量子纸），而点击元素时涟漪状的反馈动画也被认为是对「墨水」的隐喻。这样来看，「纸」与「墨」等元素倒也与水墨画等中国风的代表互相呼应，让「墨笺」的混搭显得甚为有趣。
在功能上，「墨笺」的特色在于它能为便签选择更换五种水墨画背景，以及命名得颇具诗意的六种纸张颜色。在基础功能方面，它支持添加图片，还有简单的提醒功能。
除了便签功能，「墨笺」还提供了日记功能，日记与便签都支持以图片或 TXT 格式导出。同时应用也提供了备份功能，让你的记录无后顾之忧。
不过，毕竟在 Android 平台上同类应用太多，「风格独特」并不能长久地抓住用户，像在 UI 的一些细节上（例如日记界面的天气图标）「墨笺」还有一定的改进空间。另外，它与其它便签类产品相比，功能上也有缺失之处，例如没有云同步、不支持 Markdown、不能为便签添加项目符号或者待办事项等。
不过如果你是水墨风格的爱好者，「墨笺」在界面风格上的大胆尝试还是值得你体验一番的。你可以前往进行下载。
评论（${commentLength}）
请勾选举报理由
${ item.text }
0" v-cloak>
${ related.released_at * 1000 | friendlyTime }
${related.summary}
${ related.likes_count }ZEALER 科技生活第一站
Material Design 中国发展现状
今天我们来聊一聊中国的material design发展进程。在知乎和各大论坛里，关于安卓应用 material design 化（后简称 MD 化）的呼声从未停止过。大量科技爱好者呼吁安卓MD化是应用开发者对用户负责的表现，开发方则痛诉这样的需求只是少数人的情怀，material design 并不能被大众所接受。同时，像豌豆荚市场、网易云音乐等应用成为了国产应用 MD 化的先行者。在最新的更新中，豌豆荚却悄悄地改掉了 MD 化的 UI，与此同时，关于“设计正确”的讨论也没有结束，怎样的设计语言更好？MD 是设计进步的表现吗？答案是并非如此。诚然，material design 作为一个仅有一年多岁数的设计语言，能够很好得刺激消费者的眼球，而且在规范化了以后，体系更为完整。相比 ios 的扁平化设计语言，material design 的优势是他比 ios 更规范，从而更容易铺开。MD 虽然在国内很少见，但在有谷歌服务的资本主义社会，MD 在安卓手机已经到了“烂大街”的程度。官方也承认 MD 是一个参考（为了不扼杀更好的设计），方便给小团队或者个人开发者廉价的设计方案。廉价不代表粗制滥造。相反，MD 的设计逻辑相当完善。MD 完善了Z轴的设计规范，理清了 2D 交互与 3D 交互的关系。其中有几条重要的原则：交互层不能卷曲或折叠。同一层的“material”可以随意合并和分离。用阴影代表两层之间的关系。这三条原则相互解释，支持。在使用 material design 的时候，用户的基本操作都在一张 2D 的平面上，更高级的逻辑则依赖于Z轴上不同图层的关系。原理 3 把图层区分开，原理1避免了图层之间的逻辑混乱因为当单个交互层折叠的时候，单层变成了两层，那么它和另外一个图层的关系我们怎么处理呢？原理2保证了设计的灵活性(这是软件设计的精髓之处，详见 2007 年第一代 iphone 发布会上乔布斯说的: “你只需要一整块触屏，然后你就可以做任何你想做的事”)同时给出了个人很多已有的解决方案(如下图)：
谷歌的意思很明确，如果你有足够的能力，请尽量设计得好一点，如果你没有能力，那么请用我们已有的模板和向导。问题是有人说 MD 重点处理得当，有人骂 MD 操作麻烦，怎么判断呢？问题出在“看得见看不见”这个选择上。而这个问题的载体是这个侧边栏。广方给出的解释很笼统：“二级交互层”。开发者则对这句话的理解不同，总而出现了两种设计。第一种设计是：第二种设计是：我们可以看到区别在于这两个应用是否在第一导航栏中加入其他的按钮。很显然网易云音乐的设计更合理，网易云音乐将重要程度差不多的图标列在了顶端的导航栏中，方便用户第一眼捕捉。相反知乎过分强调了中心的内容，导致了其他功能很难被意识到，同时也浪费了顶部导航栏的空间。这是我们清楚地知道了一个原则:“能不藏就不藏。”ios 很好地贯彻了这个原则。那么原搬 ios ui 到安卓上有什么不合理的呢。我们知道安卓大屏幕的目的是显示更多内容，而不是简单的放大，所以 ios 的设计在大屏的安卓手机上并不适用。外加大多数开发者在分辨率适配上更是偷工减料，导致原本不合理的比例设计变得模糊，更加不美观。 以上图片出自百度图片搜索结果谷歌 Material design 官方指导页
点击查看所有点赞用户
打开微信，点击顶部的“发现”，使用 “扫一扫”即可将网页分享到我的朋友圈。
更多精彩内容推荐
需要才能回复&nbsp&#8250&nbsp&nbsp&#8250&nbsp
Material Design开发文章系列2：在你的App中实现Material Design
----------------------------系列文章概要---------------------------------------Material Design出现之后国外网站上出现和很多关于Material Design的设计与开发文章，有很多是重复的，google官方博客将这些文章搜集整理成了几篇比较经典的文章，我认为对于开发者来讲，只需要知道其中三篇就能掌握绝大多数知识了。这三篇文章的原文地址分别是（当然翻墙是必须的）：还好这三篇文章都被翻译了出来，而且还算是比较优质的翻译。后两篇主要从整体设计介绍了一个标准的Material Design的App应该遵循哪些设计标准，并告诉你如何在你的代码中实现，并介绍了如何向前兼容。其实后两篇在整体结构上是差不多的，只是在Implementing material design in your Android app中，侧重的是Material Design的设计标准，而Material Design on Android Checklist则侧重的是实现细节和注意事项。其余两篇译文文非别是：-------------------------------------------------------------------------正文Material Design开发文章系列-2：在你的App中实现Material Design Material design 是一种达到可视化，交互性，动效以及多屏幕适应的全面设计。Android 5.0 Lollipop和已经更新的support libraries将会帮助你构建Material UI。这里提供了一些API和Widget帮助你实现MaterialDesign设计。一、Tangible Surfaces 有型的外观UI由数字化的纸墨构成。表层和它带有的阴影为应用提供了可视化的效果。你可以触摸并观察他的运动，这个数字化的设计具有移动，扩张，或者转换的能力，帮助你创建灵活的UI。1.1 Shadows表面的位置和深度导致了在亮度和阴影方面的微弱变化。新的elevation 属性允许你在Z轴上指定View的位置，然后框架会为该View底部的items加上实时的动态阴影。你可以在布局中明确的以dp为单位设置它的高度。&ImageView …
android:elevation="8dp" /&你也可以在代码中通过getElevation()/setElevation()设置。阴影是添加到轮廓上的，默认来自背景。比如，你可以设置一个圆形的drawable作为floating action button的 背景。它会自动转化成适当的阴影。如果你需要手指去控制一个View的阴影，可以设置一个ViewOutlineProvider，它允许你在getOutline()中提供一个自定义的Outline.1.2 Cards对于创建带有不同信息内容的碎片，Cards是一种常见的模式。supportV7下的CardView可以帮助你方便的实现，并提供了轮廓和阴影。&android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"&
&!-- Your card content --&
&/android.support.v7.widget.CardView&CardView继承自FrameLayout并提供了默认的elevation 和 圆角，使得cards在不同的平台间保持一致。你也可以通过cardElevation和cardCornerRadius属性自定义它们的值。注意，Cards不是唯一实现维度效果的方式，你应该警惕过度的使用Cards:二、Print-like Design 打印式风格Material利用了经典的打印设计，使内容前部和中心的布局变得整洁和简约。刻意大胆的颜色选择，刻意的空白，美观的印刷风格和强烈的格子线条为你创建一种有层次有意义有焦点的效果。2.1 Typography 活字印刷Android 5.0更新了Roboto样式，不论多大的text，展示起来都会美观和简洁。添加了一种新的中等高度属性(android:fontFamily=”sans-serif-medium”) 和新的AppAppearance样式为了平衡内容密度和阅读的舒适感,实现了推荐的打印式缩放的。比如你可以简单的通过 android:textAppearance=”@android:style/TextAppearance.Material.Title” 设置 &“Title&风格。在旧的版本中可以使用AppCompat support library的样式： “@style/TextAppearance.AppCompat.Title”. 2.2 Color调色板为你的应用带来了品牌营销和个性化，通过以下属性可以方便的控制UI的着色：主调色彩：主调色彩是用于应用品牌推广的色彩。作为action bar的背景色最近的任务title和其它边缘效果。强调色彩：鲜明的扩展了主调色彩。应用于框架的控制。比如EditText，Switch主调的暗色： Darker作为主调色彩的加深，应用于状态栏 status bar.更多用于控制色彩的属性，可以参考：colorControlNormal.colorControlActivated.colorControlHighlight, colorButtonNormal, colorSwitchThumbNormal, colorEdgeEffect, statusBarColor and navigationBarColor.AppCompat 为以上功能提供了大量的子集，允许你为Lollipop之前的系统控制色彩。2.3 Dynamic color 动态的色彩Material Design 鼓励动态色彩的使用，特别是当你拥有丰富的iamge的时候。新的Palette的support library 支持从图片中抽取一小部分的色彩去设计你的UI。创造出一种更逼真的体验。你也可以添加动静的结合效果，比如前部的text color的变化，如下两种TextView部分色彩的切换：三、Authentic Motion 真实的动效有型的表面不应该像电影中的跳跃式的切换，它们的移动应该帮助引导用户的焦点，建立控件关系以及保持连贯性。Meterial 响应触摸事件去确认你的交互，所有的变化会从你的Touch点辐射开来。所有的运动都是有意义并且友好的，有助于用户更好的理解。3.1 Activity + Fragment切换通过声明“shared elements& ，在两种状态之间你可以创建一个平滑的切换，album_grid.xml…
&ImageView
android:transitionName="@string/transition_album_cover" /&album_details.xml…
&ImageView
android:transitionName="@string/transition_album_cover" /&AlbumActivity.javaIntent intent = new Intent();
String transitionName = getString(R.string.transition_album_cover);
ActivityOptionsCompat options =
ActivityOptionsCompat.makeSceneTransitionAnimation(activity,
albumCoverImageView,
// The view which starts the transition
transitionName
// The transitionName of the view we’re transitioning to
ActivityCompat.startActivity(activity, intent, options.toBundle());这里我们在两个不同的屏幕间定义了相同的transitionName 。当你启动一个新的Activity，它的切换将会自动的动画起来。对于进入和退出的元素，你可以自由编排。3.2 Ripples（涟漪）Materials以一种泼墨的涟漪的方式响应用户的触摸事件。你可以通过使用或者继承Theme.Material主题，即可达到这种默认的效果。你可以通过简单的封装将这种ripple效果添加到自己的drawables上。自定义View应该使用 &View#drawableHotspotChanged 回调方法把touch的位置传播到它们的drawables上，以便ripple可以知道起始点。&ripple
xmlns:android="/apk/res/android"
android:color="@color/accent_dark"&
android:shape="oval"&
&solid android:color="?android:colorAccent" /&
&/ripple&3.3 StateListAnimatorMaterials 也响应了用户抬起手指的操作。类似磁铁吸引的效果。你可以通过tranlationZ属性实现。它类似于elevation属性，但主要是用于时间较短，转瞬即逝的效果，比如 Z = elevation + translationZ。这个新的stateListAnimator 属性允许你在用户touch的时候简单的在translationZ上动画。button默认会有这种效果。layout/your_layout.xml&ImageButton …
android:stateListAnimator="@anim/raise" /&
anim/raise.xml
&selector xmlns:android="/apk/res/android"&
&item android:state_enabled="true" android:state_pressed="true"&
&objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="@dimen/touch_raise"
android:valueType="floatType" /&
&objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType" /&
&/selector&3.4 Revealmaterial 过渡效果中的一个标志是通过延伸一个圆形的面板来展示新的内容。增强了作为所有转换起点的触摸点, 它是迅速向外扩散的. 你可以使用下面的Animator来实现：Animator reveal = ViewAnimationUtils.createCircularReveal(
viewToReveal, // The new View to reveal
// x co-ordinate to start the mask from
// y co-ordinate to start the mask from
startRadius,
// radius of the starting mask
endRadius);
// radius of the final mask
reveal.start();3.4 Interpolators 插值器运动应该是慎重的，平滑且精确的。而不是简单的渐入渐出。在 Material Design中，对象更倾向于快速的并舒适的启动。通过下面的示例可以看到，在将要到达终点前的那段位置花费了更少的时间。总的来说，用户不会等待较长时间，运动的负面效果就变得最小化了。有一种新的插值器，可以达到这种效果对于进入和退出屏幕效果，请分别参考： &linear-out-slow-in 和 fast-out-linear-in interpolators respectively.四、Adaptive Design (and UI Patterns)material 最终的核心概念是创建一种自适应于不同大小形状设备的设计，从手表到TV。自适应设计技术帮助我们实现了不同的设备但相同的底层系统体现为不同的View。每个View对那个设备来说，都是量身定做的。色彩，图片，层次，空间的相对关系都保持不变。material design 系统提供了便利的组件和模式帮你构建一个如此有扩展性的设计Toolbar 与Actionbar很类似，但是更加方便，不同于标准的Action bar，toolBar就像View层级中的任何一个东西。因此你可以在任何地方进行放置，与其它的View交错，移动，对滑动事件的响应等等。你可以通过调用Activity,setActionBar()方法把ToolBar作为你的Activity的ActionBar.在这个例子中，蓝色的toolbar是一个可扩展高度，覆盖在屏幕内容上侧并且提供了导航按钮。注意：在这个列表和细节中，使用的ToolBar超过了2个。Material Design 让你的应用具有可理解，美观，逼真的动效及自适应的能力。希望你可以遵从这些设计原则并通过上述提供的new API和一些兼容库帮助你的App实现Material Design。
上一篇： Material Design出现之后国外网站上出现和很多关于Material Design的设计与开发文章，有很多是重复的，google官方博客将这些文章搜集整理成了几篇比较经典的文章，我认为对于开发者来讲，只需要知道其中三篇就能掌握绝大多数知识了。这三篇文章的原文地址分
下一篇： ----------------------------系列文章概要--------------------------------------- Material Design出现之后国外网站上出现和很多关于Material Design的设计与开发文章，有很多是重复的，google官方博客将这些文章搜集整理成了几篇比较经典的文章，我认为}