All about material design

2016-03-28  本文已影响98人  Estella_UX

最近公司的一个web端的项目用的是material design,对于material design有一些自己的理解和看法。

一、Material design的缺点

1. 繁冗的动效

动效用于设计中应该是具有意义的。比如ios中的转场动效,轮播动效等,用于表现产品逻辑,也具有一定的引导性。而material design的动效,(例如水波纹动效、点击图片转场放大),过于繁复,对用户造成一定程度上的干扰。

material design的动效

2. FAB

FAB利用与主色调强对比的颜色,打破了沉浸式体验。用户在进入一个页面时,最先看到的是FAB,总想过去点一下,看看里面有什么。这样不免把入口埋的太深,又增加了操作成本。(如下图所示)

Inbox web端

说到转移用户注意力,还有另外一个例子,就是footer button,它在每个产品中调出来的功能都不同。每次看到它的时候我都想点开来看看他隐藏了什么功能。(如下图所示)

footer button

有时候FAB固定在右下角挡住了用户操作。例如Inbox收件箱界面,当滑动到页面最底端时,我想点击收藏按钮,却被FAB挡住了。(如下图所示)

FAB mobile端

3. 占据空间

卡片设计无疑是一个创新设计。可以很好的作用于信息聚合。但是有时候card的形式浪费很多空间,降低了信息浏览效率。

google trends

上图的google trends页面,两张卡片满满的霸占了我一屏。卡片中有效信息很少,当我想浏览更多内容时,我需要努力地往下滚动页面。

think with google

上图中think with google页面,卡片占据了很多空间,从而延长了我的视觉轨迹,本来我只需关注页面中间的部分,现在我不得不从左端浏览到页面右端。虽然视觉轨迹延长了,但是我却获取相对较少的信息,无形中降低了信息获取效率。

material design temple

上图中也是要不断地往下滚动。

4. 规范太多

Material design对于button,color,animation等都有很详细的规范,这样限制了产品的创新性,使得页面同质化严重。

5. Burger button

Burger button槽点太多,现在material design已经推出了bottom nav bar,但是安卓机有底部虚拟键,所以效果是这样的(如下图)。手机浏览器打开百度贴吧的效果可以自行脑补~

bottom navigation bar

二、Material design的优点

Material design也有它的优点。

1. Material design方便适应不同的屏幕。

2. 降低开发成本。可调用angular等,直接用里面的动效和样式。

3. 应用于瀑布流。卡片式设计可以应用于瀑布流,只需要定义宽度,高度根据内容可扩展。

4. 信息更聚合。可以将不同形式、不同媒介的内容以统一的方式进行呈现。

5. 具有更多的交互形式。卡片可以被分组,堆叠,覆盖,移动,划去,翻转。(如下图)

Trello
上一篇下一篇

猜你喜欢

热点阅读