如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
不要小看一个登录界面，它内里包含很多细微的东西，除去外观视觉，更多要注意的是交互的操作体验，比如一些动画、一些文案提示等细节都要注意，如果你是UI设计师，建议看看这次经验文章，附上了大量案例，也许能助你未来更好的去设计一个用户体验友好的APP登录界面。
下面通过几个关于登录界面的UX策略指南，让你更好的应用和实践。
如果用户使用你的服务必须登录，那么信息字段是你必须要做的主要功能（即输入框中的提示语，如：输入手机号码，输入验证码。）
使这些字段清楚可视，并且不要强迫用户到处寻找，或花更多的步骤进到App. 一旦他们进到App, 登录界面是他们所应当见到的第一个事情。
奖励提示：相比于使用常见的“登录”“登陆”的按钮，可以更富有创造性，并要包含可直接输入区域。确保记住用户的数据，这样他们就不需要每次输入信息。
更多地时候，我们看到注册和登陆按钮被放置的靠近彼此，但是这会对用户产生反作用。
这两个动作都包含了相同的动词，并且看起来也很相似，所以他们会混淆用户的选择。在有限的时间内进入问题，他们可能会感到沮丧并且离开。
基本上，任何界面上不应该有使用户“暂停”和“思考”的元素。
如果你想让他们的体验完美无瑕，分开这注册和登陆两个区域，并且使差别清晰可见。另外，你可以使用不同的动词或者简单解释不同的字段是什么。
在登录和注册部分，增加不同的输入字段。
除了动词“Sign”是事实之外，另一个另用户感到困惑的是，登录和注册部分通常有相同数量的输入框（用户名，密码，和邮箱）。
为了完全地区分，最小化新用户尝试直接登录的机会。用不同的输入字段。
当大多数用户的密码由于安保原因被打了马赛克，用户频繁遇见的另一个问题是打错他们的密码。
这甚至会发生在很有经验的打字员身上，特别是当他们在移动设备上登录的时候。
防止这种情况发生的做法是：在密码字符旁边包含一个“显示密码”的单选框或图标。
如果应用监测到一个错误的密码组合，和用户名，但是没有明确的报告给用户问题是什么，用户可能会多次尝试后，很生气的退出应用。
这是为什么你应该考虑通用的回复（例如“你的密码或邮箱不符合”），并且给他们立马回复怎么解决这个问题。
问下邮箱地址或电话号码，而不是唯一的用户名
为什么人们登录时人们很少记住“用户名”？如果使用用户名登录，你会面对很多可避免的困难：用户名必须是一个唯一的，这意味着人们会重复尝试输入一个系统里目前还没有的用户名，或者最终使用其真实姓名。
过了一会儿，用户想出了一个唯一的登录名，但是只过了一小会儿就忘记了，因为这个用户名对他没有任何的意义。
另一个事情可以促进登录，是提供给用户几个登录选项，并且给他们机会来选择和尝试用户名而不会沮丧。在这过程中强迫的一部分是允许他们使用邮箱地址和密码来注册。
忘记密码发生在所有人身上，这也是为什么，你急迫的给到用户一个机会来恢复密码，那么就直接在登录界面这么做吧。
所要做的就是，在输入框下增加一个“忘记你的密码”的链接，并让系统能给用户的邮箱或电话号码发送验证码。
为了避免强迫进入和暴力攻击，许多网页和应用在一系列的错误尝试之后关闭账户。
安全第一，但是你至少要尝试告诉用户，在多少次尝试后，在关闭账户前，他们必须离开。你也可以分享更多的细节，例如，在试错后的十分钟才可以再次尝试的事实。
如果在过去，都是在用相同的无风格和定制化的登录页。现如今，给你的应用，创造一个独特的登录页设计是非常重要的事情，尤其是你想要围绕你的应用和服务来创造品牌。
设计师和开发人员也有承认意识到登录表单的重要性。这是事实，特别对于移动环境下，用户界面相比于“桌面”网站，扮演了更重要的角色。
当为一个应用和移动站设计这个元素的时候，设计师花很多的精力，使它既好用又美观。
在这篇文章里，你会看到很多移动端用户界面设计的案例灵感，关于一个移动端登陆页面应被设计成什么样，给你一些线索。
Roostio Login Screen
Login Screen
Job Board – Company Profile / Login
Shopping app
Tailslife: Login
Moody Sign Up/In Screen
Bandio App Login & Sign Up
Parts – login dark side
Login Screens
ZSSK – login and route detail
DailyUI Day001
Skype Redesign
Sign Up Window – Daily UI #001
对用户来说，登陆已经很困难了，所以，使之变得更复杂，对你的产品来说并不是一个很聪明的决定。避免更大的和不熟悉的形式，并且让输入字符简单可视。这些只是一些为了节省用户时间可以考虑的技巧，并且帮助他们享受你所提供的服务。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
没有用户会拒绝任何产品的锦上添花，而功能性动效对于产品来讲，在满足功能效率的同时，能够带来更多额外的附加体验，是一种相对比较容易引发体验峰值的途径，下面和大家介绍 功能性动效的定义和类型。
功能性动效的主要类型有页面空间转换、视觉信息反馈、功能操作引导、品牌与趣味，本文就来谈谈这四种功能性动效在移动端的使用。
定义：功能性动效是一种嵌入 UI 设计中微妙的动画，有着明确、合理的目标
功能性动效的主要类型：
页面空间转换；
视觉信息反馈；
功能操作引导；
品牌与趣味。
类型 1 ：页面空间转换动效
1.1 主要作用
页面空间转换的动效，主要是为了让用户通过理解页面中空间转换的动效，了解到界面和元素之间的空间关系，并随时感知到空间元素的变化。
告诉用户对象和窗口的状态是如何变化的，防止页面转换视盲，在空间上也能营造更好的印象。
1.2 使用场景
页面空间转换类动效，主要使用在轮播 banner／页面切换/导航菜单切换。
1.3 优秀案例赏析
案例 (1) ：轮播 Banner 中的空间转换动效
案例 (2) ：导航菜单切换
导航栏的的转换是指 App 中导航菜单状态的变换，有不同级菜单之间和同级菜单之间的转换，解释菜单之间的层级关系，让用户明白菜单转换的过程中到底发生了什么，下一步操作具体如何去做。
类型 2 ：视觉信息反馈动效类型
具备良好用户体验的产品，都应该给用户的每一个操作都提供反馈，无论成功与否，反馈会使用户觉得自己与屏幕上的元素进行真实互动。即便隔着屏幕，也能让用户看起来是在直接操作，增加操作的可控性真实自然的体感。
2.1 主要作用
视觉信息反馈类动效主要是为了告诉用户目前操作到哪里了，时时状态怎么样，缓解用户对应用处理速度的量化感知。
具体表现为：
确认系统接收到用户的操作；
确认（或拒绝）用户的行为;
明确告知用户当前操作的进度／状态，缓解用户的紧张／焦虑感。
2.2 使用场景
系统信息提示／状态反馈／操作结果反馈／进度提示／加载提示。
2.3 优秀案例赏析
案例 (1)：系统提示反馈
系统反馈，当系统状态发生重要的变化时，功能性动画也可以用来提醒用户，可以给用户一个快速而有简洁的一个反馈。例如：短信提示、来电提示。如下图：
案例 (2) ：操作结果反馈
案例 (3) ：进度提示反馈
在进度条设计中，明确告知用户当前的具体进度和状态，让用户随时随地知道还需要等待多久，对当前操作环境是可控的，而不是让用户去猜，让用户对当前的操作环境不可控。例如：他当下操作的步骤；目前数据下载／状态的具体执行进度等，让用户有心理预期。
类型 3 ：功能操作引导
当用户第一次使用你的app的时候，如果没有帮助的话，他们可能会不知道如何操作。 我们应该给用户提供一些视觉提示来告诉他们哪些操作是可行的。
3.1 主要作用
功能性的动画可以提示用户去注意那些可以完成的操作，视觉提示可以给用户告知即将发生的事情。
3.2 使用场景
新手引导/功能操作引导。
3.3 优秀案例赏析
案例 1 ：新手引导
案例 2 ：功能操作中的引导
下图中的例子，是一个游戏里面的小例子，直接用动效完美诠释了“手把手教导”，这样用户理解的成本就非常低，根本不用思考，按照引导去做就能完成任务。是一种非常清晰的解决问题的方式。
类型 4 ：品牌与趣味
4.1 主要作用
为了避免与市场上很多APP同质化，千篇一律的用户体验，品牌动画可以成为一个产品的营销工具，用来表现一家公司的品牌价值或者突出产品的优势，同时给用户一种愉快又难忘的用户体验。
4.1 使用场景
加载细节／动效速度感知／动效色彩的具体场景中使用。
4.3 优秀案例
案例（1）：Uber 启动页的打开加载动效
Uber 的打开动效不仅让用户体会到愉悦感，而且它的展开式动效还很好地“控制”了用户双眼的视觉焦点。如下图：
案例（2）：输入操作中的动效
下图的例子是一个输入账号密码操作时的动效，是动效带来趣味体验的典型案例：
当用户输入密码的时候，这个动作其实是一个非常隐私的动作，所以现实生活中，自己输密码的时候，都会希望身边的陌生人转身／不要直接盯着看。
而下面的例子就把保护用户隐私作为一种生理的本能，把这种生活中的习惯延续到界面细节当中，当用户输入密码的时候，输入框上面的猫头鹰自觉的捂住了自己的眼睛，向用户传达系统的安全性之外，也和用户进行了一次无声的趣味互动，是一个很好的信息反馈的案例。
除了上面的账号输入案例，还有其他类似的动效例子。例如：很多结果输入的反馈里，如果结果输入错误，那么输入框和文字则会来回晃动，同时输入的文字／输入框同时变红。这个效果会让我们联想到日常生活中的摆手和摇头，而这些都代表着“no”，是一种非常自然的动效交互逻辑。而正是这些小细节的使用，是打造良好用户体验的关键。
结语
其实，用户比我们预想中更能注意到页面中的细节，动效除了要帮助用户快速找到他想要的东西，达到他想完成的任务，也是一种可以给用户传递情感的交互元素。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
那如何缩短数据与用户的距离？让用户一眼抓到重点？让老板为你的汇报方案鼓掌？
本文通过连环15关，层层深入，传你数据匹配图形神功，让数据可视化更。
无论数据总量和复杂程度如何，数据间的关系大多可分为三类：比较/构成/分布&联系。
基于分类/时间的数据对比，通常需用到比较型图表。用户通过图表轻松识别最大/最小值，查看当前和过去的数据变动情况。
常见场景：哪个地区的收件量最多？今年的收入和去年相比如何……
1. 条目少 – 柱状图
比较条目较少时，如5个地区收件量的对比，可选用柱状图表示。
△ 柱状图
2. 条目多 – 条形图
当条目较多，如大于12条，移动端上的柱状图会显得拥挤不堪，更适合用条形图。一般数据条目不超过30条，否则易带来视觉和记忆负担。
△ 条形图
3. 看趋势 – 折线图
当X轴为连续数值（如时间）且注重变化趋势时，则适用折线图。
△ 折线图
4. 扩大差异 – 南丁格尔玫瑰图
除柱状图外，有无更新颖的表现方式呢？那就属南丁格尔玫瑰图了。
△ 南丁格尔玫瑰图
由于扇形的半径和面积是平方的关系，南丁格尔玫瑰图会将数值之间的差异放大，适合对比大小相近的数值。它不适合对比差异较大的数值，因为数值过小的类目会难以观察。
此外，因为圆有周期性，玫瑰图也适于表示周期/时间概念，比如星期、月份。依然建议数据量不超过30条，超出可考虑条形图。
5. 双向 – 双向条形图
前面的例子都是单维度比较，当比较正反两类甚至更多维度的数据时，可尝试双向条形图，下图为各大区的重点地区的收派件量的对比。
△ 双向条形图
用颜色区分大区，空心/实心区分收件量和派件量，既能整体比较大区，又能详细对比地区的情况。
打怪升级，再加点难度。在双向图上再增加一个维度，如下表，比较5个地区的利润及相应的收入和成本。请先思考一下，再下滑看推荐图表。
△ 业务数据
△ 双向条形图（多维度）
通过图形一眼就能看出深圳区的利润低于广州区，即使它的收入高于广州区，但成本相对来说高于广州区。
6. 目标达成 – 子弹图
实际业务中，常要考察指标的达成情况，如收入达标情况及所处区间（优、良、差），如下表，你会怎么可视化呢？动手画一画吧！
△ 业务数据
△ 子弹图
子弹图，因为像子弹射后带出的轨道。相较于仪表盘，它能够在狭小的空间中表达丰富的数据信息，在信息传递上有更大的效能优势。
若还要比较4个季度的收入情况，只需用不同颜色区分。如下图，一眼便知第二季度表现较好，而第一季度则不佳。
△ 子弹图
7. 性能 – 雷达图
对于一些多维的性能数据，如综合评价，常用雷达图表示。指标得分接近圆心，说明处于较差状态，应分析改进；指标得分接近外边线，说明处于理想状态。
△ 雷达图
以上就是「比较」类的常用图表，可归纳如下。
此表并非一成不变的「铁表」，相互之间还会串联交叉，大家还需灵活应用。
部分相较于整体，一个整体被分成几个部分。这类情况会用到构成型图表，如五大区的收件量占比、公司利润的来源构成等。
1. 单层 – 饼状图
第1关中，对比5个地区的收件量时用到了柱状图。若看占比情况，饼状图更合适。
△ 饼状图
如果变成17个地区，会怎样？
像不像彩色七星瓢虫？
所以饼图分类一般不超过9个，超过建议用条形图展示。
除饼图外，环形图（甜甜圈图）亦可表示占比，其差异是将饼图的中间区域挖空，在空心区域显示文本信息，比如标题，优势是其空间利用率更高。
△ 环形图
2. 分层 – 环形图、旭日图
对于管理层而言，需先把握大局和重点。比如大区负责人需一眼看到重点地区及重点分部的情况（如下图），如何展示？
△ 环形图
△ 旭日图
这个叫旭日图，逐层下钻看数据，大区的重点地区及相应分部的构成情况一目了然。
3. 累计趋势 – 堆叠面积图
接下来，看看数值构成随时间变化的案例：第一大区（包含四个重点地区）近四年收入构成的趋势要如何可视化？自己想一想，再下滑看推荐方案。
△ 业务数据
△ 堆叠面积图
推荐方案是堆叠面积图，可以展现分量（地区）对于总量（大区）的贡献，并显示总量（大区）的变化过程。需要说明的是，地区收入的起点并非从 y=0 开始，而是在下面的地区基础上逐层叠加，最后组成一个整体。
4. 累计比较 – 堆叠柱状图
如果将上图X轴的标签文字（即年份）和图例（即地区）互换（如下图A），用来看每个地区近四年的收入构成，用哪个图更合适？
△ 堆叠柱状图
是不是觉得都可以？那图中 X1 有何含义？堆叠面积图 A 方案和堆叠柱状图 B 方案都可以表现累加值。差别在于，堆叠面积图的 x 轴是连续数据（如时间），堆叠柱状图的 x 轴是分类数据。此案例中的 x 轴是非连续的分类数据，因此用 B 方案更适合。
5. 累计增减 – 瀑布图
若想表达两个数据点间数量的演变过程，可使用瀑布图。开始的一个值，在经过不断的加减后，得到一个值。瀑布图将这个过程图示化，常用来展现财务分析中的收支情况。
△ 瀑布图
以上就是「构成」类常用图表，可归纳如下。
通过分布&联系型图表能看到数据的分布情况，进而找到某些联系，如相关性、异常值和数据集群。
常见使用场景：客户的年龄段分布？单票成本与收件量的关系？
1. 两个变量 – 散点图
仍以业务为例，下图为全国网点的单票成本/收入分布情况。
△ 散点图
单单这样看，可能看不出什么，如果加两条平均线就不一样了。
加了平均线，就知道哪些网点高于平均线，哪些低于平均线。但网点那么多，总不能逐个点击查看是哪个大区的，给散点加上颜色后，就很有意义了。
通过此图，可以看出哪些大区单票利润较低，急需提升，比如广泛聚集于右下角的第四大区，单票收入低于平均线，单票成本却高于平均线。
2. 三个变量 – 气泡图
大家都知道，网点总利润除了和单票利润有关，还和体量（即收件量）有关，用散点的面积大小表示收件量，就变成了气泡图。
△ 气泡图
3. 结合地图 – 热力图
气泡图与地图结合可演变为热力图。通过热力图，能看到哪些网点收派件量较多，需进行资源调配。
△ 热力图
以上是 「分布&联系」类的常用图表，可归纳如下：
当我们拿到数据后，先提炼关键信息，明确数据关系及主题，再选择合适的图表进行可视化。希望下图能给各位一些参考（结合可视化专家 Andrew Abela 的图表选择指南，进行了简化调整）。
数据可视化设计只要多练习、多总结，总有一天会得心应手。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
今天将从医疗保健类产品开始延展到互动和交互界面。很多医疗产品的界面有可能是一个小屏幕，也有可能是非常大的屏幕。
产品
医疗类的产品我们选择了一些可穿戴设备的概念设计。
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设计师，就只需要专心做好视觉层面的工作而不需要了解交互设计了呢？当然不是，在视觉设计层面更多地考虑布局和交互原则才可以让我们的界面更友好，视觉设计师是交互设计中非常重要的角色。
蓝蓝设计的小编 http://www.lanlanwork.com