Material design分享

Google I/O 2014 & Material Design

40张图片回顾Google I/O 2014


机器Price is right现场倒计时快进


Sundar Pichai登场——Android和Chrome部门的主管,大会主持


介绍安卓平台：30天活跃用户超过10亿，用户每天查看手机超过1000亿次


Pichai 宣布Android One计划，主要针对发展中国家市场。旨在通过广泛可选择的部件，打造出高质量、低成本的智能手机。


发布L Developer开发包预览版。包含超过5000个API编程接口。


Matias Duarte谷歌的设计高级副总裁登场，介绍Android L


Android L，强调Material Design设计理念，旨在打造能让移动、桌面、网页高度一致的平台


新的UI将拥有丰富的动效、生动的触控反馈。Polymer继续得到强化（前端组件化）


Dave Burke登台介绍用户体验


开发者在开发新应用时，可选择一个被称为“Material”的主题。该主题支持新的动画效果、实时3D阴影显示以及其他多项新功能


Dave Burke开始介绍新的强化的通知中心，通过下滑操作可以看到所有的通知


介绍新的消息系统，如果有电话拨打进来，屏幕顶端会出现一个通知框。向左右滑动手指可以忽略来电。这样尽量保证不打断用户的当前操作。


新的Android控制按钮变成了三角、圆、和矩形

+ 程序员模式5分钟…


L的开发包拥有一个新的运行环境（runtime），谷歌将其称为ART。Android Runtime，其拥有一个新的应用碎片回收期，可以释放更多内存。


ART完全兼容64位；对图像提供更好的支持；新开发包包含了一个拓展包，称为Android Extension Pack包含图形效果API，在几何着色、渲染等游戏性方面提供支持


Pichai 介绍Android发展史，Android 1.0到4.4，每一版都有着巨大的进步


Pichai逐一介绍Android L的基础设计理念——前后文关联、语音支持、无缝衔接、移动优先


工程部总监David Singleton登台介绍穿戴设备相关开发


通过LG G Watch智能手表展示Android Wear系统，手表通过振动提醒穿戴着有消息、来电。用户可上下滑动屏幕来翻页通知内容。


语音控制：“OK，Google，等我到家后提醒我查收信件。”Android Wear将会自动创建提示通知信息。


有来电时，可向上滑动手表屏幕，选择接电话或拒绝接听并反馈短信。


完整的Android Wear SDK将会发布。API与标准版Android API基本一致。开发人员移植应用不存在难度。Moto 360 夏季末上市。


AndroidAuto系统，面向未来汽车市场。核心是导航，通讯和音乐。当Android手机与AndroidAuto系统连接时，手机屏幕能投射到车载屏幕上。


Android Auto可以被看作是基于Android系统的车载GPS，但考虑到谷歌Now自然语言搜索的强大性能，“人车对话”则达到了一个新的高度。


截至目前，超过40家汽车商已与谷歌就Android Auto展开合作。Android Auto跟Android L一样会在今年稍后时候上市。


谷歌下一个发展重心是家庭客厅。 Android TV将是一款平台产品。而不是仅仅电视本身。 Android TV是一套可用于电视机顶盒的系统，有相应SDK。


谷歌对它的重视程度不亚于智能手机和平板。Android TV的核心优势是搜索（基于Google Now）


用户可以用Android Wear智能手表设备来控制Android TV。谷歌的所有平台展现了前所未有的融合趋势。


和亚马逊的Fire TV一样，Android TV也是两用的平台：电视和游戏。Game基于Android系统核心，TV基于Google Now搜索引擎，谷歌未来潜力无穷。


索尼、夏普、TP vision和飞利浦的2015高清（HD）及4K电视全部都将运行Android TV


Chromecast(可以当做电视棒)迎来新功能：不需要处于同一个Wi-Fi网络下也能进行视频投射。


谷歌公布了新投射功能Backdrop，通过该功能可以将地图、卫星图、街景照投射到电视上，用户可以控制谁有权进行投射，以及什么内容可以被投射。


Pichai介绍了Andorid与Chrome OS的融合。Android手机用户，接近Chromebook时，后者系统会自动解锁，远离Chromebook时，电脑会自动锁屏。这一Demo让人想起了前几天iOS 8与Mac OS X的互动。


谷歌用一段视频来展示公司产品对各行各界人士的深层影响。稍后话题转移到了谷歌云计算平台。主讲人是技术平台高级副总裁Urs Hölzle。


摩尔定律与云的关系：计算引擎价格下降30-53%；云存储价格下降68%；BigQuery价格下降85%；折扣是自动调整的。


出现闹事者大喊，“你在为一个杀人公司工作。”


谷歌发布Cloud Dataflow云数据分析工具。可帮助开发者创建数据管道，并抓取任意大型数据集，以进行分析。


Ellie Powers介绍Google Play。 Google Play为开发者提供了大量工具。


现场开始演示Google Fit平台。有点类似苹果的健康追踪平台，通过一系列API来管理搜集自传感器、应用的健康数据。


Fit将所有的用户健身数据存储到一处。 Google Fit有大量合作伙伴，包括阿迪达斯和耐克


Pichai对大会进行了总结陈词。所有与会者都可以拿到LG G Watch或三星Gear Live智能手表。


About Material Design

逆袭？Or 渣渣？


• 第一篇：介绍

• 第二篇：风格

• 第三篇：布局

• 第四篇：组件

• 第五篇：模式

• 第六篇：可用性

What is Material Design?


有形的有质量的有真实动

效的

第一篇：介绍

Material-Design官方宣传视频


http://my.tv.sohu.com/us/110160765/70841467.shtml


一种独一无二的底层系统，在这个系统的基础之上，构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则，支持触摸、语音、鼠标、键盘等输入方式。

MaterialDesign目标


Material is the metaphor

设计原则

Bold, graphic, intentional Motion provides meaning

隐喻对象为自然材料醒目、图形化、有意为之动效要有意义


理解页面中的元素—界面是直观的





1、真实的运动曲线

2、即时响应的交互

4、令人愉悦的细节

第二篇：动效 @视觉、开发、交互

3、有意义的转场

真实世界中的物体是有形的，有质量的，当受到外力作用时才能运动。因此，

物体不能突然开始或结束运动。突然开始运动或突然结束运动的动效是生硬

的，显得不自然，无法符合用户的预期，也无法取悦用户。

动效之前先理解Material


动效设计的关键是保证物体运动的物理感，同时不牺牲物体运动的优雅感、简约感、美感灵活的加速、温和的减速，这样的动效让用户感到自然且愉悦。

真实的运动曲线


表面层反馈、物体本身反馈、径向反馈

即时响应的交互状态


根据所接收的输入时间，系统立即在人机交互的“接触点”做出视觉反馈，以告知用户已经确认输入

①表面层反馈的最佳案例


除了表面墨水式的动效反馈，物体本身也可以根据交互行为做出反应。物体可以因触控或点击而上升，上升用来阐释物体的激活状态。

②物体本身反馈的最佳案例


动效设计不应该仅仅美丽，而且还应该具备功能性目的。

有意义的转场


进场元素：无论是新生成的元素，或者是变换进入屏幕的元素，设计者需着重笔墨介绍一番新进场的元素。退场元素：指的是在新场景下不复存在的元素，退场元素必须温和、不突兀的退场。共享元素：指的是从转场开始到转场结束都存在的元素，可以是一个图标，也可以是点击后放大的图像。

①视觉连贯性


构建转场效果，要考虑哪些元素需要运动，运动的持续时间多久，从何时开始，何时结束。确保动

效能够表达出信息层级。这样用户便可知道哪些元素最为重要，并且创建视觉轨迹。

②富有层次的时间感


所有元素的运动路径必须富有运动感，并且要有序。通过有序的动效吸引用户的注意。

③编排一致


在应用中大大小小的元素都可以进行动效设计，无论是细腻的图标小动效，或是整体的关键性转场效果和交互动效。

令人愉悦的细节


是否是渣渣还要看

这么多动效？内存？耗电？是否得到良好的优化是关键


1、颜色 2、文字

4、图片

第三篇：风格 @视觉

3、图标

MaterialDesign用色鲜亮欢快，完美搭配柔和的背景。取色灵感来自当代建筑、路标、减速带、操场等。通过阴影和高光，带来一种惊喜和缤纷的色彩。


1、UI中的色彩应用

UI配色板

色板每一张均从基本颜色开始，然后逐渐扩充，创建出一套完整、可复用的配色体系，可用于网页设计、安卓设计和iOS设计。


选择配色合理的配色版

在第一张色板中选主色，色调限制在3种之内。在第二张色板中选择一种强调色。


大胆使用主色

鼓励在较大块区块用色，不同区块使用色板的不同颜色。工具栏，以及较为大块的区域，采用了500蓝这种主色。而状态栏采用了700蓝，比主色稍深。


强调色

靓丽的强调色可被用来当做按钮和控件，例如开关和滑块。左对齐的选项（或是图标，或是标题）也可以采用强调色。


调整强调色

如果强调色过暗或过淡，可以调整强调色的明暗。如果强调色不起作用，可以在白色背景上使用主色500蓝，如果背景色是主色500蓝，可以尝试使用透明度100%的白色，或者54%的黑色。


色彩主题

确定色彩主题能让应用的视觉保持一致。色彩样式风格决定了物体表面墨水效果的明暗度，阴影的强度。这里建议两种风格的色彩主题：明亮、深邃


文本、图标、分割线要设置透明度

为了打造更高效的信息层级，文本要使用不同色调。其他元素，比如说文字、图标和分割线，也应该设置透明度，效果要比纯色好


2、字体—Roboto


Ice Cream Sandwich发布后

Roboto成为了安卓的标准字体。在

这次版本迭代中，Roboto稍微进行

了修改，以便适应更广泛的平台，

修改后的字体稍微变宽、变圆了一

点，可读性和明晰感得以提高。

关于dp、sp、 dpi、ppi、px


1、屏幕像素密度（dpi）不等于分辨率（VGA）不等于密度独立像素(dp)

屏幕像素密度（dpi）=分辨率/屏幕尺寸

标准：160dpi屏幕上 1dp=1px

换算公式：px= dp*dpi/160

举例：240dpi的屏幕上，1dp=1.5px

sp：衡量文字大小的单位，dp：衡量非文字大小的单位，换算公式相同

关于dpi、ppi、dp、sp、px


为什么如此麻烦？——安卓屏幕碎片化使然

字体比例和基本样式


如果界面中的字体样式和字体尺寸

种类过多，版式布局会被破坏。

最基本字体样式中字体比例应该是

12，14，16，20，34(sp)

字体比例和基本样式

Display字体 Headline字体 Title字体


基本色/色彩对照

如果字体颜色和背景色相近或相同很难以阅读。缺少对比的文本可读性很差。尤其是在深色背景中。

文本的对比率应该维持在最小的4.5:1 (根据亮度luminance values计算)，这时灵活性最高。. 对比率为7:1时，可读性最佳。下图的选色考虑到了对比率，同时兼顾非典型情况下的可读性。


基本色/色彩对照


行高

行高要根据样式中不同的尺寸和字

重而分别设置，从而提高可读性，

合理设置间隔。只有Body，

Subhead，Headline，以及稍小的

Display样式中采用自动换行。其他

字体样式保持单行。


文字换行

不应该：1.短语 2.凹进 3.凹进 4孤立 5凹进 6.连字符


每行平均字符长度

“好的阅读体验，每行大约60个字符。恰当字符数量是提高可读性的关键。


是否是渣渣还要看

这么理想的排版，好控制吗？

图标必须简约、富有现代感、友好，有时候要让人感到惊奇。必须在形式上极简，回归到最本质的形式诠释理念。确保小尺寸情况下的可读性和明晰性。

3、图标规范


形状鲜明，多多采用几何形状绘制图标时，要灵活运用图标网格，基于网格绘制比例和关键部分。

多使用几何形状、通过网格设计


在矩形和正方形中广泛使用圆角。避免突兀和锯齿感，线图标的圆角要稍微分明一些。不同的系统图标尺寸需要不同的圆角，从而优化觉一致性。

使用圆角


在不同的应用中，尽可能使用系统图标保证一致性。（左边√ 右边×）

一致性—尽可能使用系统图标


应用中的图标建议大小为24dp

应用中的图标


4、图像设计原则

图像样式风格应该是可读、令人愉悦、真实。要强调出实体感、材质感、深度感、令人惊喜的用色，以及上下文连贯。


使用和人物相关的图片、和信息相关的图片、超出预期但密切联系的图片

图像如何选择


描述情景；大胆整合色彩、内容、图像；用图像提高信息表达力；少用图库

图像如何使用


图像要有视觉焦点。可以是图像中的某个元素，也可以是整体协调的构图。

图像设计原则


构建故事性。图像要能讲述出富有沉浸性的故事，同时能够提示上下文

图像设计原则


Hero图像指的是在界面中具

有支配地位的图像，例如屏幕

顶部的Banner。主要用来吸

引用户，提供和上下文相关的

内容，加强品牌效应。

Feature图像指的是不同布局

中，最显著、最能吸引注意力

的图像。

Integrated hero images 往往能

够起到协调作用，将布局中不

同内容协调一致。但是此类图

像不是主要的视觉焦点

两种Hero图像



第四篇：布局 @交互、视觉

原则多借鉴印刷

排版设计

为了适应

跨平台展示

M-Design是基于

Paper特性的设计，

多有元素都用

Paper承载

为什么用paper做隐喻？——深入人心、跨文化、易理解




模型：各元素不是在一个平面上，而是分布在Z轴上


理解界面中的元素——Z轴空间

Paper分割形式：Seams（接缝）、Steps（层次）


Seam：当两个P公

用一个边时出现。

Seam连接的两个P

同时移动。

Step：当两个P不

在同一个Z轴层次

上时出现。有step

的两个P不同时移

动。

Paper Toolbars


定义：一个用于展示操作（Actions）的小纸条。

操作分布在P的左右两边

跟导航相关的操作（如抽屉按钮、返回箭头）放在左边

作用于当前页面的操作放在右边

Toolbar和底层Paper以Step隔开，底层Paper可以在ToolBar下面滑动。


Toolbars样式1

Toolbar和底层Paper以Seam隔开，底层Paper滑动时Seam变成Step。


Toolbars样式2

Toolbar可以一直保持Seam状态，但必须随着下方Paper一起滑动。


Toolbars样式3

下面Paper可以覆盖Toolbar


Toolbars样式4

Toolbar有标准高度，但可以调整高度，调整后Actions可以固定在上或下


Toolbars样式5

悬浮按钮是从Paper Toolbar分离出来的。它是你希望用户对此页面进行的操作。悬浮按钮可以跨越Step，但此悬浮按钮必须属于产生该Step的Paper。


Floating Actions 悬浮按钮1

悬浮按钮也可以跨越Seam，但它必须同时属于产生该Seam的两个Paper。但要注意，一定不要为了装饰而添加Seam。


Floating Actions 悬浮按钮2

其实表达了一个含义：

同一层用线分割，不同层用阴影

阴影包含两个层：Top层呈现距离；Bottom层呈现清晰度


阴影的表达——更细致的阴影

不同大小阴影的设置


阴影的表达——推荐值

L 强化了阴影和高光的表现

“扁平”之后对阴影的态度怎样？

所有内容在8dp网格中，模块一般用4dp网格对齐（手机、平板、桌面相同）


基线网格（Baseline GridS）

1. 24dp 2. 56dp 3. 48dp 4. 72dp 5. 8dp（省略平板、桌面）


间距和重要尺寸（部分）

页面布局适当运用比例。2:3、3:4、1:1、4:3、3:2、16:9（省略平板、桌面）


重要比例

头像40dp，icon24dp。点击区域不小于48dp，且点击区域不可重叠。


可点区域尺寸


APP页面结构

APP bar/Toolbar、内容区、Bottom bar、左导航、右导航


App Bar Structure

APP bar就是4.0版本中的Action bar。用于标品牌标签branding, 导航navigation, 搜索search, 操作actions。“左边导航，又边操作”


App Bar 规范


侧导航 Side Vav

侧导航里面的内容必须是“导航或身份相关”的，且重要程度相对较低。侧导航宽度=设备屏幕宽度-APP bar高度(默认)

不久前，Google+更新，去掉了Drawer导航，于是有人大呼风靡一时的抽屉导航将被遗弃

使用Tabs：1、如果你希望用户频繁切换页面。2、你的APP中高层级页面较少。（tabs选项不能太多）3、你希望这几个可切换的页面都获得用户的关注。


Tabs or Drawer？——三道杠何去何从

使用Navigation drawer：1、你的页面中高层级页面比较多。（超过6个）2、你想在App内非直接相关的页面中快速跳转。3、APP层级比较深，你想快速返回APP顶层。4、你想减少用户对一些不常用操作的注意和访问。


第五篇：组件 @交互、开发、视觉

18种组件

BottomSheets底部列表

Buttons按钮

Cards卡片

Chips信息片段

Dialogs对话框

Dividers分割线

Grids网格

Lists列表

List controls操作列表

Menus菜单

Progress and Activities Sliders

Snackbars and Toasts Subheaders Switches Tabs

Text fields Tool tips

AboutMaterial Design Components：Card

A card is a piece of paper that contains a unique data set of related, heterogeneous information, for example, a photo, text, and link all about a single subject. Cards typically are an entry point to more complex and detailed information. Cards have a constant width and variable height. The maximum height is limited to what can fit within a single view on a platform, but it can temporarily expand as needed (for example, to display a comment field). Cards do not flip to reveal information on their back.

Card官方定义

卡片是一张包含了特定相关数据和多种信息（例如一些和某个物品相关的照

片、文字、连接）的纸片（Paper）。卡片通常是一些更复杂更详细信息的

入口。卡片通常有一个恒定的宽度和可变的高度。通常把所处平台单屏的高

度作为卡片最大高速限制，但在需要的时候可以临时扩展高度（如展示评论

区）。轻点卡片不显示卡片背面的信息。（点击卡片进入更多信息页面）


不建议Card翻转

上图是 Samuel Couto 在Dribbble上发表的作品。曾引发对Card特征的讨论（有观点认为现实中的Card可以翻面、可以折叠、可以展开、可以将很多卡片堆起来节省空间）


Card通常包含一些内容集合：清单+操作、图片+文案+操作、图片+文案等规范：展示不同类型的内容，或展示同类型但尺寸或操作差别较大的内容。


Cards使用规范

快速浏览列表用于展示没有太多按钮的同质内容。如果用Card会阻碍用户快速浏览。右图图片是轻量的且尺寸一致，没必要用Card


什么时候不用Cards

整个Card都是操作响应区域。Card内容包含富媒体和文字信息。


Cards类型1

分为两个响应区域。内容包含可选的头部、富媒体、文字信息、其他操作


Cards类型2

3个响应区域。内容包含可选的头部、富媒体、文字信息、其他操作


Cards类型3

多个响应区域。内容包含可选的头部、富媒体、其他操作


Cards类型4

卡片都有圆角，没有圆角是瓦片（win8）。卡片可以有多个操作，瓦片只能不超过2个。


Cards使用2dp圆角

其实我想说

我不是win8也不是ios，虽然跟他们都很像！

用于展示3个以上无需解释的操作。从底部向上升起。可用列表、网格形式。材质：Paper


Bottom sheets

Floating Action Button材质：Paper Raised Button材质：Paper Flat Button材质：ink使用原则：FAB非常重要、普遍存在 RB/FB 不允许层上加层，根据情况选择


Button

Raised Button用于扁平层，强调页面中的操作Flat Button是为了避免出现多余的层（不能多于两层）


讨论：哪种是符合规范的？

Raised Button用于扁平层，强调页面中的操作Flat Button是为了避免出现多余的层（不能多于两层）


讨论：哪种是符合规范的？

常驻底部按钮：如果你的页面中需要持续存在的按钮，请首先考虑FAB。但如果这个操作不是鼓励用户马上操作，但又必须持续存在时，可以用常驻底部按钮。注意：一定不要用RaisedButton。


特殊Button： Persistent footer buttons 常驻底部按钮

包含少量信息的入口，如日历事件、联系人等。和Card的区别是，信息更少、不包含更多操作、支持自由拖拽等


Chips信息片段

用于提醒、确认、选择。包含标题（必要的时候才有）、对话内容、操作。积极、进入下一步的操作放在右边（也有可能是带有破坏性的操作如删除、移除等），消极、回到原页面的操作放在左侧。


对话框（Dialogs）

水平排列Button和垂直排列Button。对话框使用Flat Button。


对话框中的Button

为什么标题和操作都要左对齐？求破

左手还是右手？

单个页面中没有图标等可以帮助定位的元素，且间距不足以区分上下两部分内容时，可以使用分割线。


分割线（ Dividers ）

全出血（Full-Bleed）分割线和插入式（Inset）分割线。当页面中存在辅助定位的元素时不需要使用全出血分割线。


分割线类型

当页面中有副标题的时,在副标题上部使用分割线；网格列表自然形成分割的，不需再用分割线。


分割线和副标题关系

接下来是两种列表，注意和Card区别

温馨提示

网格列表不是用于风格布局的网格，是一种替代传统list列表的展示形式。常用于展示同质化内容，尤其适合展示图片。


Grids 网格列表

可以是单独一张图片，图片+文字，图片+文字+icon


Grid列表的组成元素

适合展示同质的数据或者以组为单位的数据，如图片和文字。这种方式适合阅读和理解。


List列表

元素和操作优先级。重要的内容在左边，次重要内容放在右边。


List列表构成

由状态/主要操作、单行文字、次要操作/次要信息构成


List Controls控制列表

1、List列表展示同质且文字不超过两行的内容。

2、如果需要展示的文字超过3行，请使用Card，而不是用List列表。

3、如果展示内容是图文，且主要内容是图片，请使用Gird列表。

4、Card适合展示非同质内容或同质但尺寸差别较大的内容。


Card 、 Grid列表、 List列表

Check box、Separate target、Switch、Reorder


Control list类型1

Expand&Collapse…Leave behinds、See more…


Control list类型2

Menu出现在调出菜单的元素的上方，当前选项出现在Menu的最上方。


Menus菜单

Menus菜单如何对齐？

提问

Menu和选项所处位置对齐，而不是和点击位置对齐。


Menus菜单如何对齐？

Tab用来切换APP不同功能模块或者一组内容集合。豌豆荚、360、淘宝都是在以上基础上的调整。Header元素：app bar、tab bar、inset search、page title


Tabs

元素：app bar、tab bar、 search 、inset search、page title、side Nav

Tab选项只能一排，切不超过6个。不能出现Tab嵌套Tab的场景。Tab可以用文字或者用icon，但不能混搭。Tab有固定Tab和可滚动Tab两种。


Tabs-特性

分类固定Tab和可滚动Tab。固定Tab数量不超过6个，平均分布。可滚动Tab左侧留有空间，数量不超过6个。


Tabs bar类型

文案不能太长，如必需建议使用可滚动Tab。文字大小保持一致、不可折行、不可截断、文字和icon不可混搭。


Tabs文案规范

FAB是一种Promoted Actions。用来承担页面中最重要或最想让用户点击的操作。每个页面只能有一个FAB。两种尺寸，标准版和mini版，mini版只在和页面其他元素保持视觉连续性的时候使用。


Floating action button悬浮按钮

FAB是是页面中最重要的操作。并不是所有页面都需要FAB：左图最重要的操作是点击查看图片，不需要FAB；右图最重要的操作是添加文件，所以需要。


FAB什么时候使用？

可以基于页面分割线放在空白处，或附着在扩展的app bar上。


FAB放在何处？

FAB不能随便放在页面中；不能盖住tool bar上的操作；不能被toast盖住；不能所有规操作都使用。


FAB不能这么放


FAB不要这么用1

不要在页面中使用多个FAB

不要在对话框中使用FAB

不要在drawer中使用FAB（drawer的作用是导航）

不要在overflow菜单中附加FAB


FAB不要这么用2

不要把FAB当做Overflow菜单用

不要在FAB里面加入和icon含义不相关操作，不相关操作放入Overflow菜单中。

FAB里面只能放积极、正向的操作、破坏性操作不要放在FAB里。FAB是圆形、扁平的。不要使用异形或添加样式。


FAB不要这么用3


第六篇：模式 @视觉、交互、开发

1Slection

2Gestures

5Imagery

Treatment

4Setting

3Promotat-ed action

6Search

这部分是比较成熟的模式，浏览

温馨提示

文字选择模式


模式一：文字选择

14种常用手势


模式二：常用手势

前面已讲


模式三：Promotated action

看视频


模式四：图像处理

点击搜索框—历史记录—联想—结果


模式五：搜索1


模式五：搜索2

点击搜索图标—历史记录—联想—结果


模式：设置

全是字…


Accessibility

全是字…


吐槽时间

逆袭？Or 渣渣？


总结

理念能自圆其说、规范相对之前更完整。尤其在导航、页面结构、组件使用上阐述比较清晰。

凡是过犹不及，动效太多会不会走向另一个极端、细节有待推敲

END

既不刻意拟物、又不过分扁平，一切为了真实

@王林UXhttp://www.ryannote.com

http://weibo.com/ryanwangid

http://www.ryannote.com/