最近公司的一个web端的项目用的是material design，对于material design有一些自己的理解和看法。
一、Material design的缺点
1. 繁冗的动效
动效用于设计中应该是具有意义的。比如ios中的转场动效，轮播动效等，用于表现产品逻辑，也具有一定的引导性。而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
网友评论