如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

Material Design（以下简称MD）是谷歌设计的一套视觉语言设计规范，主要应用于安卓类应用。

iOS Human Interface Guidelines（以下简称iOS）是苹果公司针对 iOS设计的一套人机交互指南，目的是为了使运行在 iOS 上的应用都能遵从一套特定的视觉以及交互特性，从而能够在风格上进行统一。

相对来说，我们对于 iOS 的设计规范更加熟悉——因为考虑到成本，设计师进行产品设计的时候只会出一套 iOS 的设计稿，然后去适配安卓机型。

很少会针对安卓机型再出一套 MD风格的方案，这种现象虽然存在但是并不合理。不同的系统/平台采用了不同的设计语言，不同的设计语言会培养出不同的操作习惯。

例如使用安卓手机的用户平时见到的都是 MD风格的界面，突然下了一个 iOS风格的应用，那么操作起来就会很不习惯，增加了学习成本。

为了让产品可以适用不同平台用户的操作习惯，提供 MD 和 iOS 两套设计稿是非常有必要的。当然 MD 和 iOS 的差异不是一篇文章就能说清楚的，这里我就从阴影、导航和配色这三个方面来简单分析一下 MD 和 iOS 的差异。

一、阴影

对于不太熟悉 MD 的设计师来说，MD 意味着大色块+阴影。

为什么 MD 如此痴迷于阴影？

从它的名字就可以看出来——Material Design，这里的 material 指的是纸张；因为来源于现实生活，所以 MD 非常喜欢使用真实世界元素的物理规律与空间关系来表现组件之间的层级关系，而阴影就是最常见的表现形式：

同样的账户注册，安卓界面中按钮带有阴影而 iOS 界面中按钮没有阴影。

FAB（Floating Action Button），带有阴影的浮动操作按钮甚至成为了 MD 的一大招牌。相比较而言iOS更加扁平化。

二、导航体系

产品导航体系主要由菜单栏构成，而根据位置以及交互方式可以分为顶部栏菜单、底部栏菜单和侧边栏菜单。iOS 的导航体系主要由底部栏菜单构成，而 MD 大量使用了顶部栏菜单和侧边栏菜单。

下面我们来看几个例子：

网易云音乐在 iOS 中采用的是底部栏菜单导航，而在安卓机型上导航栏被移到界面顶部，「账号」被收到侧边栏中。

b站在 iOS 中有底部栏菜单有5个标签，而在安卓机型中只有4个标签，「我的」同样被侧边栏收起来。

推特在 iOS 中使用的底部栏菜单导航，在安卓机型中导航栏被移到了顶部。

而 Apple Music 做的更彻底，在安卓机型上直接舍弃了底部菜单栏，采用了侧边栏作为主导航模式。

我们发现前两款国产应用在安卓机型上都保留了底部栏菜单，而后两款国外应用直接砍掉底部栏菜单。不只是 Apple music 和推特，很多国外的安卓类应用都没有使用底部栏菜单。而国内的应用因为考虑到 iOS，即使 MD 化也是阉割版的，属于 iOS 和 MD 的混血儿。甚至很多安卓应用在设计风格上往 iOS 靠拢，以b站为例，其5.11之前的安卓版本中都是没有底部栏菜单的。

当然这里并不是去评价 MD 和 iOS 哪个导航体系更好用，我说下自己的观点：

底部栏菜单的使用非常方便用户在单手握持情况下的操作，但是对于大屏手机来说，单手操作会显得很吃力。如果用户改由双手握持手机，那么从易用性上来说底部栏菜单没有任何优势。

MD 的方案更加注重对界面空间的利用，侧边栏菜单就不说了。以底部栏菜单为例，在安卓机型中用户滑动的时候底部栏菜单会隐藏，方便的用户可以看下知乎，安卓版的底部栏用户滑动的时候会隐藏，而 iOS 则是固定不动的。

侧边栏的优势还体现在可以提供更多的标签，底部栏菜单最多可以放5个。但是侧边栏菜单需要用户点击才能调出来，比较隐蔽，而底部栏和顶部栏相对来说就会显得一目了然，总之各有千秋。

至于为什么 MD 会抛弃底部栏菜单，我个人的理解是设备原因。因为安卓机型底部有三个物理按键，如果采用底部栏菜单作为主导航模式，容易造成用户误点击。

类似的还有 web 类应用，因为浏览器的控件栏也在底部，所以如果采用了底部栏菜单同样会造成用户的误操作。

三、配色

MD 提倡使用高饱和度的对比色来提升产品的视觉表现力，也就是我在上面提到的大色块。同样的一个功能，从底部栏背景色、插画到按钮，我们可以发现 iOS 在色彩的使用上比较克制。

知乎之前的安卓版本使用了大面积的蓝色，后来改成跟 iOS 一样的白色。这样的调整褒贬不一，有的用户反馈这完全照搬了 iOS，要改回 MD。

产品界面设计中对比效果主要由配色、尺寸、间距和阴影来完成。MD 在配色和阴影上做的比较出彩，所以 MD风格的产品在视觉表现上更有冲击力。而 iOS 则显得比较小清新，追求扁平和简洁。所以我们无法去评判这两款设计规范的孰好孰坏，因为其各自的出发点就是不一样的。

当然前面也提到了 MD 和 iOS 的差异不仅仅体现在以上说的这三点，还有一些小细节也非常值得我们思考。我们都知道在 iOS系统中，用户向右滑动的时候会返回上一级页面。因为苹果手机没有物理返回按键，所以这种机制非常受欢迎，但是在一些特定场景的时候就会有问题。例如如果我想复制微博里的「一曲肝肠断，天涯何处觅知音」，选中光标从左向右滑动，这时就会返回上一级页面，特别不方便。所以我只能从右向左进行复制，我后来试了一下微信和 QQ，发现默认复制的是整条动态，这也算是一个折衷的方案。

总结

这篇文章并不是去评判 iOS 和 MD 两种设计风格孰好孰坏，也不是让我们现在就去为自己的产品做出两套设计稿，这个目前来说也不太现实。很多国民类应用都只采用了一套设计稿，大家都这么做，整个大环境就是这样。

但是还是那句话：存在不一定合理。出两套设计稿虽然现在看起来不现实，但是我们也要做好准备，要有危机感。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

交互设计 Interaction Design 也被成为IXD。交互设计建立起了人与计算机便捷沟通的通道，它的目标是创造可用性和用户体验俱佳的产品。我们在工作之中经常会对接交互设计师和产品经理，他们具有丰富的交互知识和经验。那是不是我们作为UI设计师，就只需要专心做好视觉层面的工作而不需要了解交互设计了呢？当然不是，在视觉设计层面更多地考虑布局和交互原则才可以让我们的界面更友好，视觉设计师是交互设计中非常重要的角色。

电商类 App 是日常使用频次非常高的应用，它们的每一次更新改版不仅是业务的拓展、用户需求的满足，同时也是消费趋势的引领与跟随。

近期淘宝 App 的许多页面都有了较大的改动，在分析淘宝改版的基础上，通过几个关键页面的分析对比淘宝、京东、苏宁易购三大综合类电商平台的产品设计，希望此篇文章能让大家对电商类 App 的产品设计有更深的认识。

一、淘宝改版

前阵子淘宝进行了改版，这次改版循序渐进，并做了较多的 A/B 测试。

1. 主要改版页面

上图是淘宝几个主要改版页面。从视觉上看，很明显的大圆角卡片、去线条，整体风格统一轻质化。大圆角卡片追随了 iOS11 的风格（App Store 中尤为突出），卡片使信息更加聚焦，模块感更强；圆角卡片本身也比原先的卡片式增加了更多细节；大圆角卡片亲和力高，更加活泼，也符合淘宝人群的定位。

上图为5个 tab 的页面，这次统一了头部的颜色，强调了品牌，统一性方面也得到了提升。

以下是从单个页面的角度进行改版分析。

2. 个人首页

△ 旧版图为除夕的截图，颜色方面先不讨论

新旧版本的对比，可以看出88会员、卡券包优先级提高，会员信息更加集中、突出。这也印证了这两年会员机制的火热，拉新成本和难度都越来越高的情况下，巩固老用户才能带来更多的价值。

新版的卡片式很突出，去掉了大部分的线条，转而用块面来代替线条表达层级关系。

「我的订单」部分 icon 样式发生了变化（7. 7. 2 版），从填充式转变为线条式，突出了 icon 右上角的数字，但这一点在测试版本中又改回来了（后面讨论）。

88会员和物流这两块内容滚动呈现，真正是动效解决问题，从时间轴来解决信息量大而空间局限的问题，同时动态效果增加了用户吸引度。

在测试版中，这个页面主要看到两个点的变化，一个是 icon 改为原来的填充式，一个是动效滚动的节奏。

icon 的问题个人猜想是因为体量与重要性、位置的问题，线条式的体量弱于填充式。在「我的淘宝」页面中，最重要的信息是「我的订单」，因此需要一定的突出。另外在测试版里，「我的订单」的上面固定的广告位放置了旅行青蛙的广告，此位置的突出性导致其弱化了底下的「我的订单」，占用了原先「我的订单」的 C 位，因此测试版考虑到更全的场景（有广告），从而将 icon 的样式换回了体量大的填充式。

动效滚动是上面说的88会员和物流，7. 7. 2版本里两个滚动是同时进行的，而7. 7. 8的测试版中两个滚动是错开的。上下同时滚动会让人有些混乱，会让人认为这两块的信息是相互关联的。

3. 店铺首页

这一块做的 A/B 测试。店铺页面的改动较大，导航做了较大调整。新版将常用操作和重要功能放到了底部固定；二级导航中的内容让商家自定义选择，从而满足不同店铺的需求；新版一级二级导航较旧版层级关系明确了许多。

再来说说这次的 A/B 测试，这次的测试时间比较长（从7. 7. 2到目前的7. 8. 2都在，目测到8. 0应该会给出一个结果）。店铺页在导航上的大改动，会在一定程度上对已经形成习惯的老用户造成冲击，对页面重新适应和学习，有点类似于前摄抑制（在认知心理学上指之前学习过的材料对保持和回忆以后学习的材料的干扰作用）。新版设计的目的一是方便用户初期快速学习，二是中后期快速使用。对于中后期的快速使用就需要一段时间的铺垫来获得数据。该次测试应该是区分各种不同的用户，简单来说测试新用户、老用户分别对于新旧版本的学习，以及他们对新版本熟悉之后的使用。

4. 物流详情

这一块可以说是样式上的大改。用可视化来表现包裹正处的位置以及即将进行的操作，增强用户感知（降低理解难度），进一步提升对商品信息的把控感。比原先仅仅是文字展示而言生动了许多，样式接近外卖等待中的订单页面。可视化固然可以展示更多的信息，但是在用户非训练的情况下信息传递的速度未必比文字要更快，不同的人对图形的理解也会有所偏差。不过介于外卖 App 的页面已经对很多用户进行了教育，相信这种理解上不会有太大难度。但是依然要在后续优化中逐渐突出信息的重点。

物流详情页除了样式的巨大变化，还有一个特点就是场景化细分，不同的场景做出了差异化。例如仅仅是物流详情页，根据不同的场景：发货未揽件 – 已揽件未配送 – 快递员配送中 – 到达菜鸟驿站/其他快递点 – 已签收等，页面突出的信息均有所区别。已揽件时突出快递信息，配送时突出配送员信息等。

从场景细分做差异化，让用户获取当前最需要的信息这件事的出发点无疑是很好的，但是从上图中，仅是快递信息这一类信息，就出现了三种样式（如上图），并且位置也不统一。如果用户是购买了几件不同店家的商品，这时快递员打电话来说我是XX快递的，快递给你放在了某某地方，这时我想知道这是啥商品的时候，于是我就打开了物流详情，来找快递信息，发现快递信息居然不在原来的地图底下了，找了好一会才发现放到了快递员下方。这个例子也就是说在非常见场景下获取某个信息时可能需要付出额外的学习成本。

不过在7. 7. 8的测试版本中，又将快递信息的样式减为两种，算是一种妥协。本人认为，场景细分出发点是好的，但在样式和位置两点中，最好至少有一点是固定不变的，这样才不会过多增加用户的学习成本，也能涵盖一些小概率场景。

5. 动效

这两张图都是店铺页面顶部的动效，当用户向下滑动页面时，顶部的信息会出现变化，也算是细分场景的一种，通过动效的方式完美过渡，过渡的流畅感会让用户对该平台增加些许好感。

我的淘宝这一页的动效解决问题在上面有说到，右边的有好货页面，当用户在滑动页面时，攻略推荐一栏的图片有依次展现的效果，吸引眼球，小有惊喜。

总结来看，淘宝改版的设计角度可以总结为：设计追随目标，品牌、会员突出，追随设计趋势，细分场景，可视化展现和流畅动效。另外淘宝对设计、测试的态度上来说，设计解决实际问题，设计需要验证，测试要严谨。

二、淘宝与其他竞品

这里只选了京东和苏宁易购两个与淘宝进行了几个关键页面比较，以下主要从视觉的角度谈一下有哪些问题，这里几乎不牵扯业务、页面跳转等问题。

1. 首页

淘宝：整体看起来没有什么硬伤，没有用卡片风格。

京东：这边也是继淘宝改版后不久改版上线。这边首屏的 icon 这一块的卡片式生硬，大有为了卡片而卡片既视感，京东秒杀这块的整齐度不高，也有些左重右轻。「每日逛」这种装饰性较强的风格也与整体卡片式简洁风格不符。「东家小院」楼层次级标题的颜色跳跃，大有喧宾夺主之感。

苏宁易购：目前还没有改版。掌上抢这楼层整齐度不高，和京东类似，同时缺少层次感，部分有渐变部分没有，非常不统一。「逛实惠」楼层视觉不平衡，而且信息层级很有问题。

2. 搜索结果页

风格：淘宝这页用了无框设计，省去了中间的分割线，商品图片尺寸较大；从左到右，图片尺寸越来越小，分割线从无到细到粗，整体效果上淘宝和京东效果比易购的好。

标签：在标签的处理上，易购的标签非常强，在页面上非常突出，喧宾夺主；京东的标签弱化，与淘宝类似，但完全不同类的标签样式相同（秒杀与自营），会让人觉得有些混乱。

图文编排：淘宝和京东都没有硬伤，比较和谐，但易购的图片和文字大小间距比例不和谐，图片与线框无论在视觉效果上还是像素上都没有对齐；易购底部没有适配 iPhone X。

3. 分类页

风格：淘宝用了明显的卡片，去线条；而京东也用了卡片，卡片感微弱，是为了统一性而做；易购仍然是线框区分，整体区分效果不佳。

品牌：淘宝和京东在文字的处理上没有用更多的色彩，而易购的色彩运用得非常多，削弱品牌感，且没有带来任何优势。

4. 商品详情页

此页面我仅从节奏感这一个角度来看，上图已经标出了每个页面的节奏感给我的感受。淘宝整体的节奏感比较好，轻重缓和；京东和易购在节奏感上做的都有些问题，重节奏之间无轻节奏的调和会缺乏呼吸感。

5. 购物车

风格效果：淘宝没有用卡片风格；京东用了卡片，导致大量留白，同时没有带来任何优势，苏宁易购整体稍显拥挤，没有亮点。

图文编排：淘宝整体非常和谐；京东图片均使用了白底，这点很好保持了统一性；京东使用了大量的设计细节，字号、粗细、字体、颜色等等非常丰富，但整体效果并没有很理想，稍显琐碎与凌乱；苏宁易购的文字大小与间距处理不和谐而带来拥挤感。

其他细节：京东标签不同于搜索结果页的弱化，而是非常强化，导致视觉焦点混乱，个别按钮非常小，操作不便；易购标签处理上比京东收敛；易购底部 tab 与其他部分没有区分，浮框像广告，效果不佳，数量修改框的描边太硬，比例不和谐。

6. 个人首页

整体风格：淘宝和京东都是明显的卡片式，苏宁易购是广义上的卡片式。

这里主要说一说易购的问题：首屏出现「我的专场」的大片不平衡色块非常不合适，部分 icon 效果不佳，另外有一些内容上的 bug。

7. 订单

淘宝和京东的订单页个人认为没有什么硬伤，淘宝有个适配的问题。苏宁易购的问题比较多，首先是顶部「常购清单」中没有商品的 bug，然后是图片与购物车等地方的风格不符，商品之间分割线有时有有时无，间距有问题等等。

三、总结

综合上面具体页面的分析可以看出淘宝在 UI 设计上的优势：追随设计趋势、统一性、排版和谐等。

关于统一性这一点，可能有人说京东做的更好，因为它几乎所有页面都用了卡片风，而淘宝没有。个人认为，设计风格是次于设计目标的，如果这种设计风格不能很好满足该页面的设计目标，建议还是以设计目标为重；如果仍然强制使用该风格的话，会得不偿失。淘宝的做法是把卡片这种风格归类为轻质化风格，除了卡片以外，还有去线条、色块等等设计语言，因此并非强调一定要使用卡片形式。

移动端列表索引效果非常实用，比如：手机通讯录。你可以根据字母来查找对应的内容。下面这个例子我是参考了 MUI 里的列表索引效果，写出来的代码，代码的结构基本一样，但功能会少一些，去掉了搜索框搜索，只有单纯的字母索引，不过这也基本够用了。这个效果是基于 jQuery 库的，所以在用的时候就记得引入 jQuery 库。

随着时代的更新，网民开始逐渐适应使用手机来进行网上活动

"这是移动端界面设计规范尺寸安卓篇也是第二篇小总结，主讲如何一稿去适配众多的安卓机型。如果你有兴趣也可以去官方研读下设计文档，这样的话，就可以比较系统的掌握知识。

每次QQ有新的重要版本发布时，移动端的介绍使用了HTML5页面，通过7个独立的页面简洁地介绍了它的主要功能。在每个页面切换时伴随着背景图片的切换，让介绍页面生动有趣。

通常在PC上常出现的下拉菜单，在移动端上都是用什么交互来实现的？将最近项目里碰到的情况总结一下。

设计师都知道，设计不只是为了好看。设计也决定用户如何融入一个产品，无论是网站还是app。这是一种交谈。导航就是一种交谈。因为如果用户不明白使用方式，你的网站或app再漂亮都没用。