20个非常棒的Material Design设计概念案例-nicedesign奈思设计-UI设计公司|领先的用户体验设计与互联网品牌建设公司 20个非常棒的Material Design设计概念案例用户体验/视觉设计& & 分享文章到：
自从去年google在android新版本Lollipop提出的material design概念后，在世界各地疯狂地掀起一阵material design热。Material design不仅看起来令人惊叹，也是一个前所未有的设计理念。不仅对设计师的影响深大，对开发人员亦是。
现在普遍流行的应用程序都采用这种新的设计理念，并且android端上的APP也是采用material design这种设计理念。对于那些还尚未采用这种设计理念的App，这里我提一些自己的概念。
Material design 设计理念Facebook这是我们最喜欢，也是用户最聚集的交友平台，采用了material design设计后是不是更吸引人Cinema Ticket以这种方式显示订电影票的场景你觉得如何呢？Event Details全局以这种material design设计，所有的事项安排都显得干净简洁。Calendar for Desktop即便是台式桌面端和平板端的日历App，看起来都是那么的优雅Music PlayerMaterial design设计的音乐播放器看起来也是那么时髦Google Chrome觉得chrome的新面貌如何？是不是焕然一新ExploreMaterial design也非常适用于冒险和旅行App的设计Windows 资源管理器老版windows 资源管理器的设计显然不适应于现在的设计理念，这款看起来如何？Payment Cards对于乏味枯燥的支付页面，这样子设计看起来更酷些！YouTubeYouTube是最先使用material design设计的App之一，这也是一个巨大的优势。Photoshop如果Adobe Photoshop也使用material design会是怎样呢？Trello任务管理App Trello使用material design也许会更加美观。Profile Page一个典型的用户概要页面通过material design改造后的样子News Feed采用material design设计，看新闻再也不会觉得无聊Statistics Page这个版本的设计，统计页面看起来也更酷、更直观些！Last.fm全新面貌的Last.fm大家觉得如何？KickstarterKickstarter目前还没有android端的App，如果他们计划上线android端的话，material design也许是不错的选择哦！InstagramInstagram如果这样子设计，分享照片会不会更有趣些Calendar App一款全新material design设计的日历AppRuntastic最受欢迎的培训应用程序Runtastic采用material design设计的样子，大家觉得如何？结论这些概念设计说不定在你以后设计中会有所帮助，当你尝试一种新的设计方式去设计你的应用程序时，也许这会给你一些想法上的帮助。我们希望这些概念设计在以后应用程序的设计和开发中能派上用场，也希望各位设计师和开发人员也不妨考虑一下google这种新的设计理念—material design来自：UI中国本文地址：/html/blogs/view-34.html关于nicedesign奈思设计是领先的用户体验设计与互联网品牌建设公司,为众多企业创造了专业与创新的设计解决方案,提供交互设计、UI界面设计、网站设计开发、网站建设、移动界面设计、软件界面设计、互联网品牌建设和用户体验咨询服务。
&&|&&&&|&分享文章到：
更多阅读视觉设计
在过去的几年当中，因为工作原因，我有幸参与了一些著名体育品牌的网站与APP设计，在此过程中，我花费了大量的时间和精力...用户体验
带过五年多的用户体验设计团队，从几个人到二十几个人。以前自己也做过技术，发现工程师和设计师其实是有很多相近的地方的，...用户体验
用户体验的概念一路成长壮大，系统性概述的书籍和理念层出不穷，可执行落地的方法技巧随着技术的进步在不断变换。然而无论概...扫描二维码分享到微信我们案例方案发现商务合作手机：座机：（+86）010-Q&Q：地址：北京 昌平 霍营 国风美唐2-913Copyright (C)
nicedesign 京ICP备号-5 扫描二维码关注我们：nicedesign奈思设计关于谷歌Material Design：你需要知道的一切 - 文章 - 伯乐在线
& 关于谷歌Material Design：你需要知道的一切
时下，“material design”总被设计师们频频提及。它是谷歌在I/O 2014上发布的新的设计语言。
不过，material design不仅是一种新理念，它可能让设计师们颠覆性地重新思考网页设计或程序设计。各大网站已开始采用谷歌的material design的文档资料重新设计方案。那么，现在让我们来学习什么是material design，以及想象未来的material design框架吧！
Material Design是什么？
Material Design是由谷歌的设计团队创建一种设计语言，旨在帮助设计师们创建易用性和实用性较强的网站和应用程序。这个概念基于一个不断更新的公开文档。该文档会随着域界以及技术更新而更新。
Material Design基于一系列的目标和规则之下，设想比实现容易得多。（不过没关系，本文的主旨是希望大家在设计上引发更多思考，并且不断改进。）
Material design的设计目标：
创建一种新的设计语言，糅合经典设计原则以及科技创新性与可能性。
创建一个跨平台和跨设备尺寸集成系统。移动规则是基本的，但触摸、声音、鼠标、键盘都是最佳的输入方法。
Material design的设计原则：
材料即象征：视觉线索必须立足于现实。
醒目、形象、策划性：基本的设计原理（字体、网格、空间、尺度、色彩和图像的使用原则）必须引导视觉效果。
有意义的移动：移动的物体或动作不应该干扰用户体验，而是保证用户体验的连贯性。
Material design的设计规范包含很多方面。（其规范文档令人叹为观止。）它可以细分为大量的具体概念和处理办法。Google制定出的是一套如何创建动画，样式，布局，部件，图案及可用性的详细规范。
这些规范源于Material design提出的对基本物理特性、形变特征和运动特点的理解。其指导理论是将材料元素置于基于现实的、近似的3D空间内。从美学角度来说，Material design介于扁平与拟物之间。
颜色与字体排版
Material design的颜色概念大多借用了扁平设计的趋势。它配色大胆明亮。字体排版也跟simple sans serifs字体一样遵循扁平主题。
根据Material design的官方文件：“色彩从当代建筑、路标、人行横道以及运动场馆中获取灵感，由此引发出大胆的颜色表达激活了色彩，与单调乏味的周边环境形成鲜明的对比。强调大胆的阴影和高光。引出意想不到且充满活力的颜色。”
让人欣喜的是这个颜色概念对对比色的运用。在每一个案例中，你都可以看到基本设计理论。谷歌提供一套完整可下载使用的配色作为基准色。这些用色理论基础得让人觉得谷歌是否以为设计师们都忘了配色理论了？
字体排版指引同样基础。Roboto字体是所有应用程序的默认字体，也是所有安卓应用程序的默认字体——谷歌甚至还提供了字体下载链接。
布局和结构的设计
material 设计项目的基本布局和结构源于印刷品的设计概念。鼓励设计师创建和使用基线网格和数学结构把控整体的布局。
这个布局进一步划分为更小的区域，以正确地布局页面元素，获得最优的用户交互体验。（对于大量的元素如何布局，这里面也是有准则的。）
Material design文档在每一条布局准则下都提供了可下载的安卓模板。最终可能导致的结局是设计的模式化或让app看起来太安卓。对于那些喜欢iOS系统的人们，谁还会喜欢这样的设计。
material design文档里的每一种元素都被描述得很详细，从如何创造它们到放置于屏幕的哪些位置。你简直难以想象它有多细致。（准确的说这个列表包括19个组件）
Bottom sheets
List controls
Progress and activity
Snackbars and toasts
Subheaders
Text fields
（译者注：想更加详细了解这19个控件的具体内容，推荐可乐橙的material design学习笔记：
喜欢这些控件的设计师可以下载一个Photoshop的矢量文件，它包含所有元素以及安卓的系统图标，这个
附带各种样式并遵循文档建议的网格系统。
可用性和互动性
“一个产品的易用性在于所有人（不论理解能力高低），都能够浏览它，理解它，并能用它来实现他们的目标。因此，一个真正成功的产品应该对尽可能广泛的受众易用。”
Material design文档通过一个非常有用的方式让我们对交互性模式，可用性模式，以及可访问性问题上开了眼界。虽然实际的美观性对经验丰富的设计师来讲是必不可少的，但可用性和交互性的概念也需要引起重视。
它的交互模式部分特别有用。它详细介绍了一系列想法，即让一些元素通用于整个设计。（试想一下，比如如何输入时间或日期，或搜索功能怎样工作。）这些是用户期望使用到的一些最基础的工具，并且这些工具如果能以特定的方式为所有用户们发挥作用，无疑是有益的。
易用性则是另一个重要问题，material design文档为易用性提出并提供了更好的选择。想一下，那些可能没有办法通过声音或颜色与web进行交互的用户，那些没有高对比度大屏幕、没有屏幕只能语音控制、甚至没有所有这些条件呢？这样的用户其实也占了相当大的比例。
10个Material Design 资源：
Material Design 在各处流行了，从谷歌上你可以找到大量的可下载资源和利用方法。这里我们为你收集的一些资源将会帮助你更好地探索Material Design的概念。
（谷歌布局模式&移动端，平板，桌面框架&）
2. （基于Bootstrap的Material Design）
3. （Angular.js的Material项目）
4. （Polymer 设计师）
5. （Material化前端框架）
6. （Material 色板）
7. （Material 交互）
8. （安卓上的Material Design清单）
9. （Material Design 的Sketch 模板）
10. （免费的Material 组件包）
Material Design 设计欣赏
正如每一个新趋势和概念都会引来大批追随者，已经有大量的网址和移动端应用在使用Material Design阐述的设计概念。下面的5个案例正是遵循Material Design的准则设计的，看看设计师们是如何应用这些概念的。
Material Design的概念众口称好，界面设计的标准精准且新奇。但是大多数富有经验的设计师可能并不需要这些设计标准。在设计标准文件里，几乎处处有欺骗你去下载的内容。引起了大众的反思，我们真的需要如此多的帮助吗？
设计标准读起来让人耳目一新，开阔了我们的新思路，同时也让我们预见到未来类似的设计会在网页上铺天盖地泛滥。然而，尽信书，则不如无书。我们可以在一定程度上运用这些标准，切不可太过于依赖这些标准。设计，尤其是基于流行趋势和技术发展的设计，正在以我们所不能想象的速度在快速更替。
Material Design像其他的设计趋势、框架和概念一样，需要你独立思考，考量它在你的设计文件中是否有用武之地。现在，你是否已经开始应用Material Design，为什么使用或者不用。有意者可在评论区留言。
可能感兴趣的话题
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线用户名：NashLegend
文章数：15
访问量：27443
注册日期：
阅读量：1297
阅读量：3317
阅读量：426922
阅读量：1115104
51CTO推荐博文
译自&&―― By&原译文在我的Github上：关于如何在低版本Android上使用Material Design，可以看上篇：。对于多屏幕的视觉、交互和动作设计作了很大的改进。Android 5.0和最新的支持包可以帮助你创建Material风格的UI。这里将概述新的Material Design风格设计、新的API和组件，你可以将它们用在你的app中。Tangible surfaces在Material Design的世界中，UI是由构建起来的。这些UI的表面和阴影为应用程序的结构提供视觉线索（也就是根据样式能看出层次关系等等，比如下图），你看他的样子就知道哪里是可触摸的部分、就可以知道它将以何种方式运动（同样如下图）。这种Didital Material可以移动、扩张和变形以创建灵活的UI界面。阴影一个surface的位置和深度决定了其光影的微妙变化。你可以使用新的elevation属性设置view在Z轴的位置，系统会依此在view后自动绘制出实时的动态阴影。你可以在layout XML里面设置elevation属性，单位是dip：&ImageView&…
&&&&android:elevation="8dp"&/&你也可以在代码中通过getElevation()/setElevation()（with shims in&）方法操作elevation属性。View投身的阴影是由其轮廓决定的，而默认情况下这个轮廓是由background产生的。举个栗子：如果你为一个设置了一个圆形的shape drawable背景，那么它的阴影就是圆形的。如果你想能对阴影进行更详细的控制，你可以使用来自定义其轮廓，通过getOutline()方法可以取得这个轮廓。卡片要显示一些不同的信息，使用是一个常用模式。你可以使用新的支持包中的轻松创建卡片式布局，新的CardView在低版本Android上也支持轮廓和阴影。&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和圆角，这样卡片在不同版本的系统上就拥有统一的表现。如有必要，你还可以通过设置cardElevation和cardCornerRadius自定义这些属性。但是卡片并不是实现维度效果的不二法门，所以别滥用。印刷样式的设计（Print-like Design）Material Design借鉴了印刷设计以创建简明清晰的布局，将你的内容部分突出在前面和中间。大胆的配色、刻意的留白、精致的排版和强大的基线网格（a strong baseline grid）产生了具有层次感、有意义、突出重点的布局.字体排版Android 5.0升级了系统Roboto字体，现在无论字体大小，都可以漂亮整洁地显示字体。系统还新增了一个新的适用于中等字号(android:fontFamily=”sans-serif-medium”)，新的文本显示样式使用了备受好评的以平衡内容密度的阅读舒适度。举个栗子：你可以通过设置android:textAppearance=”@android:style/TextAppearance.Material.Title”轻松地使用"Title"样式，可以通过AppCompat支持包在旧版本的Android系统上使用这种样式，举个栗子：“@style/TextAppearance.AppCompat.Title”。颜色应用的会为你的应用带来品牌辨识度和个性化（比如一看见红色就想到可口可乐），现在你们可以通过设置下面的属性使得这些变得更加简单。colorPrimary. 应用的主色调、品牌颜色，用于ActionBar背景、最近运行任务界面标题以及边缘效果（比如说MIUI系统中可滚动元素滚动到边缘时出现的橙***）。colorAccent.&主色调的鲜亮补充色（Vibrant complement to the primary branding color），用于框架控件比如说EditText和Switch。（前面几句真别扭，因此注：colorAccent，不知道专业术语是啥，直译应该是突出的颜色，因此，EditText的颜色并不是colorAccent，它得到焦点后的颜色才是colorAccent，还有Switch在打开时的颜色也是colorAccent，如上图）。colorPrimaryDark. 主色调的暗色版本，用于状态栏。除了上面这些之外，你还可以对颜色进行更深入精细的控制，参见colorControlNormal, colorControlActivated, colorControlHighlight, colorButtonNormal, colorSwitchThumbNormal, colorEdgeEffect, statusBarColor和navigationBarColor。AppCompat支持上面功能的绝大部分，因此你可以将此应用在Android 5.0之前的系统中。Dynamic color ―― 动态颜色Material Design鼓励使用动态颜色，尤其是你的应用中有很多图片时。新的Palette支持库可以提取图片中的一部分颜色来设置你的UI的样式来使界面颜色互相搭配以提供一种沉浸式体验。提取出来的调色板（palette）包括突出的和柔和的色调（vibrant and muted tones，参见下图文字后面变化的背景色），同时可取得最佳阅读体验的文本前景色（参见下图的变化的文字颜色）。举个栗子：Palette.generateAsync(bitmap,
&&&&&&&&new&Palette.PaletteAsyncListener()&{
&&&&@Override
&&&&public&void&onGenerated(Palette&palette)&{
&&&&&&&&&Palette.Swatch&vibrant&=
&&&&&&&&&&&&&&&&&palette.getVibrantSwatch();
&&&&&&&&&&if&(swatch&!=&null)&{
&&&&&&&&&&&&&&//&If&we&have&a&vibrant&color
&&&&&&&&&&&&&&//&update&the&title&TextView
&&&&&&&&&&&&&&titleView.setBackgroundColor(
&&&&&&&&&&&&&&&&&&vibrant.getRgb());
&&&&&&&&&&&&&&titleView.setTextColor(
&&&&&&&&&&&&&&&&&&vibrant.getTitleTextColor());
&&&&&&&&&&}
});一图胜千言。&Authentic Motion ―― 真实的运动Tangible surfaces不会突兀地出现，他们出现的动作要引导用户注意力，要建立空间关联并保持连贯性。Material元素会对你的触摸事件做出响应以对本次交互进行确认，然后所有的变化将以你点击的位置为中心向外扩散。所有的动作都是有意义的和密切相关的，使用户易于理解。Activity 和 Fragment 切换通过声明两屏之间通用的共享元素，你可以在两种状态间创建流畅的切换。一图胜千言：示例代码：album_grid.xml
&&&&&ImageView
&&&&&&&&…
&&&&&&&&android:transitionName="@string/transition_album_cover"&/&
album_details.xml
&&&&&ImageView
&&&&&&&&…
&&&&&&&&android:transitionName="@string/transition_album_cover"&/&
AlbumActivity.java
Intent&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的时候，切换过程就自动开始了。除了共享元素之外，你也可以定义和元素。Ripples ――波纹效果Material风格的元素以一种波纹(ripple)扩散的方式响应用户的触摸。如果你使用了Theme.Material或者其派生的主题，那么交互性控件比如Button默认就会拥有这种效果（as will ?android:selectableItemBackground）。你也可以在你的drawable上使用这种效果――只要把它们放到ripple元素里，如下：&ripple
&&&&xmlns:android="/apk/res/android"
&&&&android:color="@color/accent_dark"&
&&&&&item&
&&&&&&&&&shape
&&&&&&&&&&&&android:shape="oval"&
&&&&&&&&&&&&&solid&android:color="?android:colorAccent"&/&
&&&&&&&&&/shape&
&&&&&/item&
&/ripple&自定义view通过回调方法将点击位置传递过去，以便从点击的位置发起ripple效果。StateListAnimator当你触摸Material元素的时候，它也可以以迎合你的手指，就像磁铁异性相吸一样。你可以通过translationZ属性动画来实现这种效果，translationZ属性与elevation相似，不过它的主要作用是做这些过渡效果。 Z = elevation + translationZ. 新的stateListAnimator属性轻松创建触摸时的Z轴动画(Buttons默认就有这效果):示例代码：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"&/&
&&&&&/item&
&&&&&item&
&&&&&&&&&objectAnimator
&&&&&&&&&&&&android:duration="@android:integer/config_shortAnimTime"
&&&&&&&&&&&&android:propertyName="translationZ"
&&&&&&&&&&&&android:valueTo="0dp"
&&&&&&&&&&&&android:valueType="floatType"&/&
&&&&&/item&
&/selector&Reveal ―― 打开内容Material风格的app显示新内容的一个典型过渡效果是一个向外扩散的圆形遮罩。过渡动画以用户点击位置为圆心发起并，你可以使用下面这种Animator来实现：Animator&reveal&=&ViewAnimationUtils.createCircularReveal(
&&&&&&&&&&&&&&&&&&&&viewToReveal,&//&The&new&View&to&reveal
&&&&&&&&&&&&&&&&&&&&centerX,&&&&&&//&x&co-ordinate&to&start&the&mask&from
&&&&&&&&&&&&&&&&&&&&centerY,&&&&&&//&y&co-ordinate&to&start&the&mask&from
&&&&&&&&&&&&&&&&&&&&startRadius,&&//&radius&of&the&starting&mask
&&&&&&&&&&&&&&&&&&&&endRadius);&&&//&radius&of&the&final&mask
reveal.start();Interpolators ―― 插值器动作应该是合理的（deliberate）、迅速的、精确的。与普通的缓动效果不同的是，在Material Design里，物体倾向于快速开始然后缓动到最终位置。在动画过程中，物体在最终位置附近时的运动使用了更多的时间，因此用户不必要为了等待动画结束花费更多时间，动画的负面效果被降到最低。这种动作使用的是一个新的快进慢出的。下面是一图胜千言时间：&对于进入和离开屏幕的元素(which&)，分别使用&分&&插值器。Adaptive design ―― 自适应设计Material Design最后一个核心概念是创建一个单独的自适应设计布局就可以适配小到手表大到电视的所有尺寸和形状（手表有圆有方）。自适应设计设计技术帮助我们实现用同一个系统在不同设备上展示不同的外观。每个view都会自适应不同设备的尺寸的交互方式。 颜色、iconography,、层次、空间关系保持不变。Material Design系统提供了灵活的组件和模式以帮助你做到这一点。ToolbarToolbar是ActionBar模式的一般化形式，它提供相似的功能以及更高的灵活性。与标准的ActionBar不同，Toolbar就在你的view的结构层次中，你可以像操作其他的view完全一样的操作它。你可以使用Activity.setActionBar()方法让它变成你的ActionBar。在这个例子里，蓝色的Toolbar很高，被屏幕内容覆盖并且提供了一个导航按钮。注意另外两个Toolbar分别用在List和详细内容界面（说这么多无非是为了说明Toolbar很灵活）。欲知更多Toolbar的使用方式，看。开始让你的应用Material化吧Material Design帮助你创建易于理解的、漂亮的、自适应的、动起来的活的应用。希望这篇文章能让你动心并将Material Design应用到你的app里。
了这篇文章
类别：┆阅读(0)┆评论(0)