今天将从医疗保健类产品开始延展到互动和交互界面。很多医疗产品的界面有可能是一个小屏幕，也有可能是非常大的屏幕。
产品
医疗类的产品我们选择了一些可穿戴设备的概念设计。
Kingyo设计的Sange手表
Crux Product Design 和 Chris Pearce 设计的
Amazfit
Gražina Bočkutė为盲人设计的可穿戴配件
交互
我们与不同设备的交互不断变化，将语音用户界面引入医疗行业将彻底改变人们对护理的看法。精细设计的语音助理能够像人一样，更贴心。
Michal Sambora设计的Alexa助理的界面
Gleb Kuznetsov✈设计的ai智能语音助理
SELECTO设计的语音助理
界面
干净，简洁，充满未来感，避免错误的发生。
医疗保健类产品设计、界面设计及交互设计灵感
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
看似简单的投影，在高手眼里有千万种变化。不信看看今天这篇文章，让资深设计师教你做投影设计！在今天的 UI设计中，投影使用的范围和频次越来越高。打开手机APP，或是看追波上的练习稿，都可以看见无数投影使用的案例。
掌握好投影的使用，是必备的 UI 视觉设计基础。投影远没有大家想象的那么简单，即使软件中可以设置的参数并不多，在我的教学过程中，很多学员始终没办法很好的应用投影来提升自己的设计质感。
所以，这篇文章就会详细讲解投影的正确设计方法。
在了解投影和设计的关系前，我们要先知道投影是什么。用专业点的方式解释，即：
投影指的是用一组光线将物体的形状投射到一个平面上去，称为「投影」。
有了光源，才有投影。光影是美术和摄影最核心的基础。那么投影有什么特征呢，先看看下面的这张静物摄影。
图中有很清晰的向右延伸的投影。距离主体越远的投影，也就越模糊，越淡。通过这样的投影我们还可以很轻易的分析出，光源在左侧，且物体是放置在地面上的。
投影可以带给我们非常多隐藏的信息，而这些往往被我们所忽略。再看看下方的案例，当背景无法直观的提供物体所处高度时，投影就能起到关键的作用。
在平面画布中，投影的做法直接影响我们对元素的认识。 例如下图中，投影可以让我们了解按钮本身是有厚度（遮挡了光线）或是离开了水平面处于悬浮状态。
当然，投影除了对物理信息的暗示，还涉及到对视觉效果的表现。上面的白鞋投影很重，且轮廓清晰，这样能塑造更强烈的冲突，增加鞋子的立体感。但是不是所有摄影都需要有这样雕刻版的投影效果呢？答案是否定的，例如下面这张图片。
主体物和背景色彩能很好的结合，创造出有趣欢快的视觉氛围，所以只需要柔和的投影即可。在 UI 的设计中，对于阴投影参数的定义，也会直接影响我们画面的视觉效果。
成熟的摄影作品，会根据对投影的需要再去调节打光的方式，这是个非常复杂而且繁琐的过程，需要经年累月的学习。而在设计的过程中，创造投影却非常容易，所以我们更该重视的是，如何正确的设计投影。
即先构思出元素的物理特性，再给予它正确美观投影样式。
在进入了扁平化的设计环境后，投影有很长一段时间被抹除，因为大家认为那是拟物的遗毒，就怕设计里用到拟物元素显得不够时髦。
到了 Material Design 发布以后，谷歌在规范中增加了 Z 轴的概念，也就是为平面预设了立体的空间，设计元素可以定义与空间中水平面的距离。
下图中，Z 轴数字越大，代表和水平面的距离越远，上升得越多。而带给我们这种感受的原因，就是投影的暗示，元素本身的坐标并没有任何改变。
既然增加了投影，那么谷歌的专业设计团队，肯定不会很随意的制定其参数。当我们打开谷歌的官方 UI KITS 源文件进行查看时，就能发现其中的不同。
可以看见，元素叠加了多层的投影，这是违反新手对于投影定义的直觉的。原因在与，一般软件中定义的投影，其深浅与元素的距离是线性等比的，而现实世界中，深浅与距离是非线性的函数关系。
在 UI设计师接触的平面类软件中，只有 PS 具备完美复现这种投影的能力，即控制投影的等高线。
而 Sketch、XD 这些软件都不具备这样的功能，且手机系统的投影渲染机制也是线性的，所以谷歌就通过使用 TopShadow、BottomShadow 叠加的方式，去模拟真实的投影效果，让它们看起来更和谐自然，这就是多层投影的奥秘。
上面出现的投影都是黑白灰，但在现在流行的设计作品中，最常见的是应用了彩色的投影，摄影中也经常会应用彩色的投影渲染氛围。
但是，投影中的这些彩色区域，并不完全都是投影，还包含了折射和漫反射的原理等。为了简化，我们可以认为是光线穿透物体从而投射出带有物体本身颜色的投影。就像撑起一把绿色的阳伞，伞下的人头顶也会弥漫着草原的芬芳……
在开始展示具体的设计案例前，我们要先明确一个原则，即：
优雅的投影是让你感受到它的存在，但不会吸引你去关注它！
一般的设计软件中，元素的阴影即是在元素的背后添加了一个相同轮廓的纯色矢量图形，我们可以通过 XY 轴移动它的位置，并使用模糊的参数来设置它的模糊度。
当元素的距离水平面越近，阴影距离元素也就越近，即 XY 轴越小，模糊也越小，如果离得远则相反。
1. 常规投影类型
第一种投影的类型，即光源从元素的上方投射下来，可以参考谷歌提供的投影方案叠加两层投影。第一层是 XY 轴坐标为0，只添加模糊的参数，透明度较低。第二层阴影使用相同的模糊参数，增加 Y 轴坐标，透明度较高。
在非 MD 设计中，它浓郁的投影参数会让整个界面变「脏」，变拥挤。我们要做的是要降低投影的透明度，这样才能让投影的表现更自然舒适。要牢记的是，当使用纯黑色做阴影时，透明度无论如何都不应该高于 20%，正常区间在 5%-15%。
既然知道阴影属性的规律，我们还可以复制个矢量图层做模糊效果也可以得到一样的效果，这种方法可以支持我们设计出更真实的投影。即将 BottomShadow 独立出来，缩小并向下移动。
如果想要得到彩色的投影，那么只要切换投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我们要凭感觉去调整它们的透明度。
如果感觉不得劲，阴影太少了，那么我们就让元素的 Z 轴上升。
既然前面提到彩色投影是由于光线穿透了元素，那么当使用了渐变色或者是图片的投影，我们在上一步复制出的那层投影，就可以不使用填充色，而是直接用渐变或者是原图进行模糊和透明度调整。
2. 非常规投影类型
光有垂直于平面的关系，那么发挥想象力，我们还可以更改光与面的位置，如下图所示。
在这个场景中，投影就作用在图片下方的地面，只有地面处于透视状态时，才能可以看见它的投影，所以，我们就可以得到下方的效果。
当然，我们还可以结合光源的类型，比如使用聚光灯等，那么阴影的轮廓就会发生变化。
我们甚至可以预设元素本身产生有一定的变形，如边缘翘起，那么就会产生独特的阴影类型。
我们可以从日常生活中的观察将各种不同的投影形式引用进我们的设计中，让我们的设计视觉更丰富有趣。
学会正确的投影设计方式，并不是仅仅让我们局限在对 UI 元素的设计上。它还能给我们带来很多意想不到的帮助，例如做设计的包装。
通过前面讲解的知识点，上方展示案例中应用的阴影方式相信你们已经可以看出端倪了，如果使用基础的阴影设置去创建展示的阴影，就会发现效果远远不如案例的高级，自然也难以带给别人良好的视觉体验。
最后，在项目中，想要将设计出来的阴影交付给开发，真正落地实现出来，无论安卓或是 iOS ，阴影的渲染和设计软件的参数是不一致的，这就需要大家自己钻研了。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
提到Axure，这可是绝大多数PM童鞋靠着吃饭的家伙事儿。Axure被很多人定义为一个以交互见长的原型设计工具。很多初入坑甚至入坑甚久的PM为画出炫酷的原型挖空了心思。我想这对Axure的初衷一定是有误解。
人人都是产品经理 2018-07-21 13:14:44
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
荔枝微课是目前市面上知识付费领域非常优秀有竞争力的产品，本文对荔枝微课的产品设计进行了分析与思考。
荔枝微课的应用介绍：
“荔枝微课是连接人与知识的内容分享平台，支持随时随地授课听课。与大咖、草根，一同共赴知识盛宴。”
可以发现，荔枝微课主要着力于打造一个全民学习知识&全民分享知识的大众知识分享平台，其核心内容则是平台沉淀下来的知识内容，其运营的关键是源源不断的能吸引用户购买的知识输出。
其核心价值主要有2点：
对于知识学习者来说，荔枝微课可以为用户提供一个内容丰富的，可以随时随地进行学习的知识平台，满足用户能够方便快捷获取知识的需求。
对于知识分享者来说，荔枝微课可以为用户提供一个知识变现并实现自我价值的平台，以及平台为知识分享着提供的推广及流量支持。满足用户通过分享知识而实现个人价值并获得现实收益的需求。
3.1 用户画像
在进行需求分析之前，我们先来了解一下荔枝微课的用户群体，进行简单的用户画像，以便我们更加准确地进行需求分析。（PS：用户画像主要基于二手数据资料、竞品分析和个人体验产品后的逆向推理得出，由于个人水平以及时间问题，如有偏差望见谅。）
3.1.1 平台角色
经分析可发现，平台中主要存在两大角色：知识分享者（知识分享者又可以细分为机构和个人，在本文中不做区分）和知识学习者（也可以称作知识消费者）。
从产品的运营模式来看，很多用户既是知识消费者，又是知识分享者，用户在平台上学习自己欠缺的知识，分享自己的一技之长，形成了一个良性循环。
在体验中我发现，知识分享者的知识分享流程主要是通过PC端的“讲师管理后台”完成的，因此在针对app的体验中我主要针对知识学习者用户进行分析。
3.1.2 核心用户的基本信息
通过荔枝微课本身以及对比几款竞品的相关数据，我们可以大致推断其核心用户的基本信息：
年龄：通过百度指数以及对核心用户的核心行为-学习各种实用技能知识，进行分析，我们可以看到，主要集中在30-39岁（占比60%左右），同时20-29岁， 40-49岁两个阶段也有不少分布（占比约为20%左右）。
性别：我们可以看到百度指数中显示，其用户性别比例男：女约为6：4。但是我们知道百度指数对于性别判定算法，有时候会产生误差。在荔枝微课这里就发生了这样的情况。
对于荔枝微课的性别比例，我们通过对产品进行分析，可以发现这个性别比例并不准确。
有一下2点理由：
因此我们大致可以进行推理，荔枝微课的用户应当女性偏多，女：男 约为 6：4 到 7：3 之间。
区域：可以看到荔枝微课的用户主要集中在一线以及新一线城市。
收入：对于用户的收入水平我们可以从2个方面进行推测， 一是我们上文得出荔枝微课的核心用户主要分布在一线及新一线城市；二是，我们可以看到在荔枝微课中绝大部分课程的价格都在100元以下。我们可以进行推测，荔枝微课的核心用户应该处于中等收入水平。
用户性格：综合以上所有的分析，大致可以推断出用户的性格有以下几个特征：自我提升欲望强烈、存在一定的焦虑感、对自己某方面现状不是很满意。
荔枝微课有发现、精选、我的微课、个人中心4个以及导航模块。
其产品结构图如下：
通过分析发现，产品中存在2个核心流程，一是用户购买课程流程（购买直播课程流程和购买非直播流程略有不同）；二是用户学习课程流程（学习直播课程流程和学习非直播流程有不同），其流程图如下：
2.1 购买课程流程
购买直播课程流程和购买非直播流程略有不同，购买直播课程流程不需要判断课程是否收费，免费课程仍然进入支付流程，并支付0元。
从分析体验来看，从开始到结束，整个购买课程流程非常清晰且顺畅，中间不存在多余流程，也没有其他任务导致流程中断，用户体验很好。
2.2 学习课程流程
相对购买流程来说，学习课程流程就没有那么清晰顺畅了，我们可以看到直播课程学习流程比较清晰。但是非直播课程学习课程却看起来比较复杂，个人觉得该流程中存在一些多余流程。
（1）首次进入课程存在多余流程
我们从流程图中可以看到首次进入时，产品会让用户选择是从第一条开始听还是直接进入课程。选择从第一条开始听，用户将会进入课程学习页面，并从第一条语音开始播放。而选择直接进入课程，则进入课程学习页面，但课程不会进行播放。
我们可以看到2个不同选择只是有课程是否自动播放的区别，这个区别对用户来说不是必要，但是却多了一个页面，让用户多进行了一步操作。这并不利于用户完成整个课程学习流程。
而且，在体验过程中，我发现在这个选择页面中用户是无法后退的，也无法关闭选择弹框，只能在“从第一题哦啊开始听”和“直接进入课堂”中进行二选一，这可能是为了提升课程播放页面的打开率，但是这样的设置对用户体验不是十分友好。
（2）非首次进入流程存在多余流程
对于非首次进入流程，我们来想象一个用户场景：
在上班的路上，有一个用户对荔枝微课上的一门化妆课程非常感兴趣，她打开课程进行学习，半个小时后她到公司了，她关闭课程开始上班。等到下午下班之后，她想起来自己早上还有一门课程没有学完，想要接着学习，这之后她很希望荔枝微课帮她记住了自己上午学习到哪里了。
我们可以看到，对于用户来说，被打断的课程直接进行续播，才是符合用户预期的。所以个人觉得在用户再次打开自己学习过的课程时，给用户“继续未听完的课”和“直接进入课堂”的选择是比较多余的，用户其实不需要这样的选择。这种不记住自己的学习进度的选择，反而是用户想要避免的。
荔枝微课有发现、精选、我的微课、个人中心4个一级导航模块。
接下里我们来分析一下荔枝微课的这个导航结构：
首先是“发现”页，发现页汇总了各种课程信息，并通过头部导航分类别进行展示，形成了典型的首页风格。从结构设置上来看并没有什么问题，但是个人在体验中发现其在内容展示上还是存在一定的优化空间。
3.1 三个功能按钮内容不随顶部导航切换
如截图所示，在每个分类导航的轮播图下方，都有“我的课程”、“精选专题”、“免费专区”三个按钮。点击按钮我们可以发现都是相关的课程列表，显然，这是产品为了吸引用户点击而专门设置的。
但是比较令人不解的是，这几个按钮的内容并不随着用户选择分类的切换而切换。无论是用户选择婚姻分类还是理财分类，精选专题为用户展现的列表都有可能是一些中医课程或者是英语学习，不会随着用户选择的不同而量身推荐内容。
另外，这种设置不但没有根据用户的兴趣进行针对性的推荐，而且，会对用户造成一定程度的误导，从用户的角度来说，导航切换了该导航下的内容进行相应的切换是一个顺理成章的逻辑，但这三个模块内容却不进行切换，这并不符合用户的操作认知。
3.2 如果能更智能的进行个性化课程推荐可能会更好
我们从结构图中可以看到，发现页中共有26个分类导航，涵盖各种年龄阶段，不同性别不同层次的用户群体可能感兴趣的所有课程，可以说是课程内容非常丰富了。但是，如果用户对排名比较靠后的某一个类别感兴趣的话，那么他想要找到这个类别就会相对比较困难，而且在进行左滑的时候很容易错过中间某个分类。
同时，在体验的过程中，我用了男女两个性别不同的帐号进行体验，发现所展示的内容完全一致，连导航的排序也一致，这说明产品没有针对细分用户做一些相对个性化的区分。
我们知道，对于非基础知识的获取需求，不同的用户群体的需求可能差异很大，所以如果产品能够应用人工智能或者是大数据等技术对用户进行相对个性化的信息展示，那么在转换率以及用户体验方面都应该都会有所提升。
然后是“精选”页，个人觉得精选页存在2个问题：
第一，是与首页一样没有针对细分用户进行个性化的区分，我用了男女两个性别不同的帐号进行体验，所展示的内容完全一致。当然，精选课程列表可能选取的是一些相对比较热门的课程（热门也是一种吸引力的保障），或者是一些产品出于商业盈利或者其他考虑而特意选出的部分课程，所以倒是不一定非要有用户针对性。
第二，个人觉得其实精选课程并不需要作为一个一级导航页存在，其实精选课程的内容，完全可以由发现页中的“推荐”分类进行承载，只要在推荐类的课程列表中进行一些模块划分便能实现，并不需要显示一个专门的一级导航页。
接下来是“我的微课”页，分为全部课程、最近学习、即将开始三个模块。这里记录了用户购买和学习过的课程记录，满足用户方便快捷进行回溯或继续学习的需求，是一个非常好的页面。
但是，也存在一点点小问题，那就是被添加进来的课程不能进行管理，如果用户无意间点开一个自己不感兴趣的课程，后面想要删除，无法实现。在用户打开过的课程越来越多时，可能会造成不好的用户体验。
“个人中心”页，个人中心页是一个典型的个人中心页面，这里就不进行进一步分析了。
接下来我们对产品的几个核心页面进行一下分析。
4.1 课程详情页
首先是“课程详情”页，我们先想象一个场景：
一个用户在推荐页看到了一个瑜伽课程感觉挺有兴趣，于是她点开了这个课程，想进一步看看课程更详细的信息，好决定自己是不是要购买这个课程。课程详情页信息影响着用户是否购买的决策，是一个非常重要的页面。
我们来看看课程详情页的构成。
不过从功能的角度来看，荔枝微课还是可以进行小小的优化，首先便是缺少直接的咨询按钮，我们知道用户在进行购买决策时，如果能为用户提供一个咨询客服的入口，会一定程度提高转换率。
当然，因为平台上存在大量的个人讲师，因此，如果增加咨询按钮的话，这大量的客服工作可能需要平台来承担，这样会大量增加平台的成本。所以，目前荔枝微课的课程没有直接的咨询入口，也有可能是出于对成本的考虑。
然后，就是已消费用户的评论也是影响用户购买决策的重要因素，如果能在课程详情页中增加用户的评论，可能会锦上添花，对用户的决策产生正向影响。
而且，这种评价体系也将为优质的课程做更好的背书，再辅以一些相应的算法对课程进行排序，这可以促进讲师们提升自己的课程质量，长久下来将有助于平台整个课程质量的提升。
4.2 课程播放页
视频播放页也是产品非常重要的页面之一。我们可以看到左图是荔枝微课的课程播放页，右图是进入课程学习的上一步，选择是“继续未听完的课”还是“直接进入课堂”，如果用户是第一次进入课程则是，选择“从第一条开始听”还是“直接进入课堂”。
在上文中我们已经提到过这个选择页面对于整个学习课程流程的完成有一定的多余，不过从其课程播放界面我们看到课程并不是一个完整的视频或音频而是一个模拟直播现场的分条课程页面时，我们大概能理解为什么会有这样的选择了。
我们知道讲师进行课程直播，然后将这些直播的内容进行沉淀，供用户反复学习，这是荔枝微课的一大核心特色。荔枝微课设置如上的课程学习页面，可能是为了更好的还原直播课程现场，包括直播的气氛、讲师与学生之间的互动交流碰撞出的火花等等。
不过，我们来想象一个场景，当不在那个直播氛围中，用户对于一条一条的去刷整个课程讨论的需求有多高呢？更何况很多讲师在直播的时候可能还不允许用户进行讨论，全程只是讲师在进行讲课。那用户更希望将这个内容一条条拆开还是将讲课内容整合起来听呢？我想答案应该很明显吧。
我们可以看到，其实在产品中还有一个不一样的播放页面，如下图所示，我们可以看到这就是直接将课程进行了整合，而且用户如果想要观看上课模式，可以直接进行切换，个人觉得其实所有的播放页面都可以直接采用这种模式。
这样不但能给用户自主选择的余地，而且我们在课程播放被打断之后，再次进入课程播放页的时候，也不用再选择是“继续未听完的课”还是“直接进入课堂”，而是可以直接断点续播。
当然，荔枝微课这样的页面设置可能背后有由于我个人产品能力不足，或者是我对荔枝微课了解不够深刻所导致的认知误差，如果是这样，还请海涵。
由于时间问题，这篇体验报告写得并不是很深入，有的观点也不一定准确，如果有一些不当之处，再次致歉。然后对于文中提到的一些问题，主要是秉持着希望荔枝微课发展越来越好的初衷进行体验的，还希望各位不要觉得这是一篇找茬文才好。
总结来说，荔枝微课是目前市面上知识付费领域非常优秀有竞争力的产品，不过现在产品针对用户进行个性化的定制变得越来越重要，尤其是这种知识付费产品，如何让用户迅速找到自己愿意付费的课程成为了产品的重要竞争点之一。
个人觉得如果荔枝微课能够在抓住在线教育风口的同时，再辅助以一定的人工智能、大数据等新技术进行提升，应该会带来更大的发展空间。
本文由 @钟娟娟 原创发布于人人都是产品经理。未经许可，禁止转载
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1.我想学UI，请问看什么书啊？
2.我想学UI，请问哪个培训机构比较好？
3.我想学UI，请问如何入手？
4.我不是设计专业，但是我还是想学UI，请问如何系统学习？
5.我不管，我就是要学UI，请您给点儿建议。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
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 设计上的优势：追随设计趋势、统一性、排版和谐等。
关于统一性这一点，可能有人说京东做的更好，因为它几乎所有页面都用了卡片风，而淘宝没有。个人认为，设计风格是次于设计目标的，如果这种设计风格不能很好满足该页面的设计目标，建议还是以设计目标为重；如果仍然强制使用该风格的话，会得不偿失。淘宝的做法是把卡片这种风格归类为轻质化风格，除了卡片以外，还有去线条、色块等等设计语言，因此并非强调一定要使用卡片形式。
每天打开手机，各式各样的信息纷至沓来，每个 App 每个页面都有好多话要说。当信息汇集在一起的时候，如何能让用户一打开页面就能轻松理解各个信息元素之间的关系与差异呢？这就要靠我们设计师在设计之初构建合理的视觉层次了。一个页面的信息层级是不是清晰明了，很大程度上影响到用户的信息获取效率和使用体验。
在平面和网页设计中，视觉层次一般分为三层：主层（Primary）、副层（Secondary）和三层（Tertiary）。其中主层一般是指头条标题等核心信息，也是要让用户第一眼就注意到的信息。副层可以是小标题等信息，展示出主要内容与提纲。最后的三层一般由正文或其他额外信息构成，展示全部的内容，可以用较小的字号。
△ 图片来自网络
不过当我们在设计移动端页面的时候，因为屏幕尺寸的限制，有时候需要酌情减少页面的层级，这样才能让信息不会过于繁杂。
一般一个页面会根据功能分为多个模块，下面我们就从「模块内」和「模块之间」两个角度来谈谈如何构建合理的视觉层次。
我们所说的「模块」指的是什么呢？可以是一张卡片里面的内容，也可以是一个信息列表等等，总而言之是一个信息组。当我们拿到需求的时候，应该理解每个信息组里面的每条信息的价值，并且给他们分一个类。
比如有时候，PM 同学跑过来说：「我想加个大按钮」，「不想让用户注意到删除功能，但是一定要有」 ，或者「这次就想试一试，展示了这条信息点击率会不会涨」 ，又或是「这条信息展不展示都行，你设计的时候自己看吧……」 好好好，需求我都懂，那么该如何分类呢？
四象限法则相信大家都听说过，那么我们就改编一下这个法则，给每个信息组中的信息按「重要——不重要」「必要——不必要」来分个类吧。
面对又重要又必要的信息还等什么，一定要大要明显，让用户第一眼看到。
重要却不必要的信息，一般是从产品或流程本身来讲不是一定要有的信息，但是因为某种原因想要突显给用户，比如在信用卡的产品列表中加入每张卡的推荐理由，或者在餐厅列表中展示某某名人去过这家店……这些信息在列表中不是必须有的，但是对于引导用户判断又十分的重要，所以我们可以次一级的来展示，要让用户可以注意到，但也不能抢了风头。
哪种信息是必要但不重要的呢？比如一个活动弹窗的关闭按钮，一个订单的删除功能，一条免责声明等等，我们不希望用户注意到他们，但是这些功能又不得不存在，那么就要弱化展示这些信息。
不必要又不重要的信息，一般情况是要去掉的，除非在设计中信息太少了空荡荡的，为了排版美观才会把这种边缘信息留下占位。
接下来，当我们整理好信息层级之后，要靠什么手段来展示这些层级呢？答案是加大对比。
1. 大小
对比的第一步就是大小的对比，在大家的认知中，大的东西比小的东西更显眼、更重要。用户会自然而然地关注到尺寸较大的文本和尺寸较大的图，比如下图中一张足够大的信用卡卡面图片，一秒吸引目光。再比如页面中的大标题，都是这样的效果。
△ 截图来自查查公积金
在内容列表中，标题名字类的信息一般会使用14-17dp左右，补充说明内容一般使用11-12dp左右，具体的使用情况要根据信息的多少、信息的重要程度、上下对比等情况来进行具体的设计。
△ 图片来自融360、微信
2. 重量
有时候由于空间的限制，字号不能再大了？字号大了也没拉开层次？试试增加字重量吧。iOS&Android 由于字体不同，加粗的效果也不同，请酌情增减。
3. 颜色
颜色对于用户的感知有着巨大的影响。所以在进行视觉层次构建的时候，不同的颜色可以轻松构成层次结构，强烈的颜色比如红色、橙色都很容易引人注意。白色和浅灰通常可以用来作为大面积的背景色，和其他的颜色构成对比。在设计的时候可以运用 App 的主色和辅助色来拉开视觉层次。
△ 图片来自查查公积金、融360视觉规范
4. 对比
我们以上图这个贷款列表举一个综合的例子，四条信息从最突出到最弱化分别标为了1、2、3、4，这几条信息中的字号以至少6px的差值进行递减，并且只有前两条信息进行了加粗处理，同时颜色的选择上也是从强到弱：
大小、重量、颜色的运用，归根结底就是制造对比，这也是创建层次结构依靠的核心。一个元素和另外一个元素构成对比，才能有层次的展示他们之间重要程度上的差异，让用户更加容易获取到信息。
当我们已经合理的排布了一个模块内的视觉层次，接下来要做的就是把多个模块组合起来。
心理学家基于格式塔原理来检测用户对于元素之间关系的视觉感知，发现人们倾向于将视觉关系靠近的元素群视作为有关系的一组。值得说明的是，位置接近的元素，即使色彩形状大小都不一致，但只要他们足够靠近，都会被人们视为一组。
△ 图片来自网络
视觉层次的建立很大程度上是基于格式塔原理，所以我们要关注 UI 元素之间的靠近性。
基于这种认知，即使每个模块之中的内容有对比有强弱，但是只要每个信息组之间的元素的距离较近，并与其他信息组之间的距离拉远，留下足够的留白空间，就可以清晰的将整个页面的层次拉开。留白和元素本身之间构成的疏密对比，会更好的让用户注意到留白包围下的内容。
△ 图片来自网络
现在很多 App 都是通过对比与留白来进行页面中的「无形分割」，减少了很多线和块的运用，让页面更为简洁。基本上原则为：文字与图片对齐，与相关内容的间距要小于其他内容，标题要大。
△ 图片来自 Airbnb
当字体足够大的时候，会比小字符更有「图形感」，更加突出，可以更明确的告诉用户从这里开始是下一段了，字号一般在20-24dp之间，根据内容和整体风格来决定，颜色一般选择比较深的颜色 ，必要的时候可以加粗。当其他内容都是比较小的文字的时候，栏目标题也要控制一下大小。如果图片较多，标题就可以再大一些。
具体多大，就要在页面和谐的基础上多试几次……
△ 图片来自查查公积金
如上图，在查查公积金 App 中，当我们设计信用卡详情页的时候，由于整个页面里图形比较突出，看起来用加粗的「办卡礼」、「专享特权」标题更合适一些。可是在同个 App 的公积金详情页里面，整个页面用色都比较清淡，内容都是一些文字信息，如果内容标题加粗的话会显得比较突兀。所以综合整个 App 的页面风格权衡之后，还是选择了左侧没有加粗字体的设计。
总体来讲，UI 设计是没有公式的，只能有经验之谈和大体上的建议，很多时候都要设计师一次次的去尝试、去对比、去感受，才能给出针对当下页面需求最合理的层次构建与解决方案。
蓝蓝设计的小编 http://www.lanlanwork.com