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

之前我们更新过如何做投影的文章：《投影一直做不好？看这篇文章就搞定！》，主要针对的是投影的原理进行讲解，包括如何用图层样式去做投影，怎样用工具绘制投影，这些都是我们了解投影的一个基础。教程发布之后，很多同学留言，表示没看够，希望针对其他投影形式再进行更深入的讲解，那这次我们就来满足大家要求。其实投影的设计不难，只要符合画面的光影逻辑，然后加上制作投影的方法，基本就能搞定很多基础的投影形式，话不多说，我们开始今天的教程。

其实投影在设计中的应用是非常广泛的，比如这些海报，都运用了投影的形式。

什么情况用投影

在平面设计中，除了合成设计之外，我们在什么情况下会选择用投影？

1. 增加识别性

比如，在颜色比较混乱的背景上添加文字，或者添加图片，为了区分他们之间的主次关系，我们会添加一个投影。

2. 增加空间感和层次感

这两个画面，通过投影与主体的位置关系，产生较强的空间感和层次感。

3. 提升画面格调

反应产品质感的投影形式，会提升画面的格调，这类比较多的是化妆品与品。

4. 增加形式感

如果你的画面缺少创意性，不妨试试这类投影形式，通常来说它们都是用投影作为画面中的主体，以此来传递出很强的形式感与故事性。

5. UI设计

UI 设计中使用投影。

投影的类型

1. 常规投影

常规型投影包含了普通投影，弧形投影，接触投影，弥散投影。

普通投影

普通投影就是我们最常见的一个投影形式，它可以用图层样式来设置，它的特点就是在图像的四周都会有点阴影的感觉，让画面与背景形成前后景的关系，就像这里的案例。

弧形投影

弧形投影，它的投影是在物体的一侧，像翘起的边缘。

接触投影

接触投影，是物体立面与底面的关系，会有一种三维立体的感觉。

弥散投影

弥散投影，与普通投影的区别在于，它更有深度，也是现如今比较流行的投影形式。

2. 长投影

长投影主要分两种，一种是色块投影，一种是在色块的基础上的渐变投影。

比较常用在图标的设计，还有海报的设计。

3. 倒影

倒影，这类型阴影应该是比较难处理的了，想必大家在做设计的时候，大多数情况会规避倒影这种形式，除非是拍好的照片自带倒影，不然很少有同学愿意触碰这块。因为它比较考验大家对图形的认知能力，以及对透视基础的掌握，之前我们有讲过一篇关于素描知识的文章，在里面介绍过关于物体的基本结构，我们所看到的任何一个物体都有一个结构或者形状，比如立方体、圆柱体、圆锥体、球体。任何一个物体都可以视为这四种几何形状中的一种或几种的组合。那在倒影当中，这些基本形状同样适用。

首先来看二维的倒影，二维的倒影比较简单了，也都很好做，复制一个下来，加个蒙版做渐变处理就可以了。

三维物体，最基本的就是这几个形状，或者几种形状的组合，掌握几种形状的倒影，就能应付大部分倒影的形式。

立方体为基础型的倒影。

圆柱体为基础型。

圆锥体为基础型。

球体为基础型。

组合型。

4. 悬空投影

悬空投影，这类投影给人很强的空间感，并且大多数情况，投影都会成为画面中的主角。

分为三种类型，二维的悬空投影，2.5D 的悬空投影，三维悬空投影。

二维的悬空投影

先来看看二维悬空投影，是二维的平面悬空，添加一个弥散投影。

2.5D的悬空投影

2.5D 没有消失点，但是会有立体感，在下方添加一个投影，就会有悬空的感觉。

三维悬空投影

三维悬空投影能有很多创意形式。

5. 创意投影

创意投影，它不会根据物体本身的形态去表现，而是根据文案和设计构思而产生的很有创意的投影形式，这个主要靠大家发散思维的联想了。

最常见的就是电影海报中的投影表现。

6. 场景合成投影

一种情况是接近真实的投影，和实际照片是一样的道理，一种情况是类似于创意投影，合成的投影算是这几种投影当中最难的。

合成中的投影要自己创造一个光源，也就是想象出一个光源，根据光源关系，绘制出投影效果。

投影在这里都是很真实的表现。

合成也可以做创意投影，这三张公益海报的主角是动物的影子，但是形成影子的是前面的物体，这是很有创意的表现方式。

制作投影的方法

制作投影的方法比较多，比如说利用图层样式，用矢量图形做投影，高斯模糊设置投影，手绘投影等，每一种方法都适用不同的投影类型，我们想更有效率的完成工作，就要对这些技法有个较深的了解。下面我就带大家来了解下每种方法。

1. 图层样式

第一个，也是最简单的，用 ps 当中的图层样式来做。

模式一般我们就选择默认正片叠底，这是在正片叠底文章中讲到过，后面的颜色，如果是主体与背景颜色差异比较大的时候，我们可以选择环境色；如果差异不大，我们可以选择主体的相近的颜色，很少有选择纯黑色的投影。

不透明度就是阴影的透明程度，也是很好理解。下面角度，是光线照射的方向。全局光，选择之后，画面中其他元素添加投影，就会默认为一个光源，这样画面中投影会更和谐。

距离，物体和投影之间的距离，数值越大越远。扩展，就是阴影面积的大小。大小，就是阴影的虚化程度。

等高线，可能很多同学不太理解，其实很简单的，我们来看下，纵向，越向上，越实，越向下越虚化。横向，最右侧是投影的中心位置，越向左，离中心越远。根据画面中的等高线，我们来分析下。

这样就好理解了，我们看画面中蓝色圆点的位置，代表中心位置很实，黄色圆点的位置代表远离中心的位置很虚化，最后就得出右侧的投影。

那如果说，我想让投影的周围都变得很实，该怎么调整？

就是把虚的那个点向上调整，这样，就代表外围投影变得相对较实，我们会得到这样一个投影。

如果我想，投影靠近外围的位置，变得比较实，靠近中心的位置，变得比较虚，就可以这样调整。

得到的投影是这样的，我们看到中间白色的区域，就是虚化之后的效果，接近了透明。这个搞懂了，利用图层样式做投影也就基本没什么问题了。

ps 还自带了这么多等高线的样式，大家可以去实验一下。

那什么类型投影，比较适合用图层样式来做？

普通的投影和弥散投影。

画面中人物的投影设置。

2. 矢量图形做投影

画一个矢量图形，之后选择实时形状属性，然后点击蒙版，通过调整羽化值，来调整投影的虚化程度，用这个方法会比较直观的观察到，而且因为是矢量图形，所以还很方便我们随时调整它的形状。

高斯模糊和矢量图形做投影，所适用的投影类型是一样的，同样适用于普通投影，弧形投影，接触投影，弥散投影。

还有悬空投影，它和矢量图形投影的区别就是，矢量图形更方便改颜色和形状，还有虚化程度。

在主体下方加一个小面积的虚化阴影，就会有悬空的感觉。

3. 高斯模糊做投影

添加高斯模糊之前，一定要记得给图层转换为智能对象，因为高斯模糊对图层是有不可逆的破坏性的，所以添加智能对象之后会很方便我们随时去调整它的颜色和模糊程度，动感模糊同理。

高斯模糊做投影，适用的投影类型。

4. 手绘投影

最后一个，用钢笔工具或者画笔工具来绘制投影，这个是比较难的，在投影那篇文章中，我们已经讲过在一个场景中，怎样分析投影的位置，大小，形状，方向，以及如何用钢笔工具去绘制投影，这里我们就不再重复了，如果有不懂的同学，回看之前的文章《投影一直做不好？看这篇文章就搞定！》

那我们来看一下，手绘投影适合什么类型的设计。

第一种就是合成设计，这个要考虑光源的位置，投影的透视，投影的颜色等，一般会采用画笔和钢笔工具的结合。

创意的投影同样适合，因为它和合成投影基本一样，只不过不会根据对象的实际特征去绘制。

倒影适合用钢笔工具和画笔工具来制作，这里就涉及到了透视，我们能看到物体在基面上的倒影，实际上是物体在基面上的投影的倒立映像。

在平时的工作生活中，我们要学会观察，比如积水的路面，反射建筑的倒影是什么样子的，镜子里的自己，或者可以多看看摄影照片，慢慢养成习惯，提高对倒影的敏感度。

倒影的做法

做倒影最重要就是两个字──拆分，我们给这个立方体做倒影，首先要思考的是，它的倒影是由哪几个面产生的，找到物体与承影面接触的线，然后把这两个面提取出来，沿着这个线把所在的面拆分出来。

然后向下镜像，根据实际情况再翻转，要注意，倒影的透视和原本物体的透视要一致，也就是平行原本对象的边线。

然后给倒影添加一个蒙版，做一个渐变，就可以了。

用刚才的方法给魔方做一个倒影

同样把与底边接触的面裁剪出来，可以看到透视关系还是不一样的，我们应该让倒影的面和上面的魔方透视一致。

用调整大小里的斜切，调整倒影的透视。

添加蒙版，然后在与地面接触的位置添加一个闭塞阴影就可以了。

再做一个复杂点的，给包做倒影。

同样，找到底面接触面，然后把相应的面裁切出来。这里注意的是，每个面要单独拆分，这样才方便为每个面设置倒影。

把所有拆分的面复制一个出来上下镜像。

调整透视，就用调整大小工具，斜切，合并倒影的图层。

用蒙版渐变，别忘了闭塞阴影。

倒影规律及特点：

投影在不同材质上的表现

好了，前面介绍了每一种投影形式，以及适合的场景。那接下来，我们来看看在同一光源的前提下，不同承影面，也就是投影在不同的材质上是如何表现的吧。

1. 布面

布面材质是软性材质，在光源下会吸收光的反射，所以投影的边缘会相对模糊，不会过于锋利。

案例演示

我们来看下在布面材质上的投影的做法，首先在物品与布面底部绘制一个闭塞阴影：

然后新建图层，根据光源绘制出阴影的长度与形状：

给长投影做高斯模糊，然后用蒙版把边缘处理得柔和一些：

统一光影，把产品修饰一下：

整体调整下色调，就可以了：

2. 镜面

镜面是光滑的，所以光照射之后，会形成和物体一样的影像，也就是倒影。

设计之前，先参考下带有镜面倒影的照片。

案例演示

第一步，闭塞阴影：

第二步，拆分图像，拿到下方，调整透视，这是之前我们讲过步骤，这里就不重复了。

调整产品的光影与色调：

加点小装饰，烘托氛围：

最后是整体调整下色调和明暗：

3. 水面

水面和镜面类似，但是水面会存在水波纹，所以在做投影时候要注意投影的形态要与水波纹一致。

参考一些带有水面倒影的照片。

案例演示

依然先画闭塞阴影：

绘制出整个投影形态：

高斯模糊处理，因为是水面，所以阴影和倒影要共存：

下面就是倒影了，方法步骤同样。

那么问题来了，是怎么做到弯曲的效果的？其实就是用 PS 当中的置换来做，这是置换的参数与水面素材。

关于置换的教程我们也发布过，《平面高手课堂！如何用扭曲工具快速强化作品设计感？》

最后统一色调和光影就完成了。

4. 底地板

地板有的会打一层蜡，这个时候，就会存在一些倒影，所以在这样的地板上倒影和投影是并存的。

先看一下在不同地板上的投影样貌。

案例演示

这个我们选择大理石材质，首先闭塞阴影：

绘制投影的形态：

给投影高斯模糊，添加蒙版做渐变：

然后，按照光影和环境色，处理产品的明暗和色调：

5. 渐变色/纯色

这也是我们设计中遇到比较多的情况，在纯色或渐变色的背景中，为了让画面具有空间感，我们经常会给物体加投影，这个投影可以是常规投影，也可以是倒影。

案例演示

闭塞阴影：

根据光源绘制投影：

高斯模糊，然后添加蒙版做渐变：

修饰产品的色调和光影：

统一光影色调：

教程到这里就结束啦，估计有的同学会纳闷，为什么我们没有细讲怎样根据光源绘制投影？因为在之前投影文章中已经手把手给大家演示过了，没看过的同学赶紧去补课，可阅读《投影一直做不好？看这篇文章就搞定！》

总结下今天的内容，第一，投影在画面中作用。第二，我们给投影形式做了分类，有常规型，长投影，倒影，悬空投影，合成投影。然后是制作投影的方法，着重介绍了倒影该怎样做，最后是投影在不同材质上的表现。通过关于投影的这两篇教程，相信大家已经能掌握一些原理和技巧了，其实最快速学习投影的方法，就是要学会观察生活中的事物。

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

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

可能有人第一时间会想到浮层、动效、弹窗等等，但这些都只是表层样式而已。背后的引导机制该怎么入手？有没有一个系统性的了解？需要注意些什么？

所以，今天就想聊聊这方面的看法，下面是我对信息引导的理解所提炼、搭建的一个「PST」框架：Performance-表现、Strategy-策略、Target-目标。

目标层：信息不会平白无故去引导用户，都是为了某个确定的目标而展示的。如在首页弹窗展示是为了进行新手教育，以达到让用户使用新功能，进入新页面等运营指标或增长指标。

策略层：目标确定了，需要确定可做信息引导的各种场景和机制。如设置某时间进行信息推送，用户网络不行的情况下怎么解决？

表现层：不同的场景中有各种表现形式，如下拉菜单、弹窗、浮层、视频等等。

这 3 层环环相扣，互相影响。因为每个产品的目标各不相同，所以这篇就先对信息引导的「策略层」进行分析，下篇再讲下引导的形式和适用场景。

信息引导的类型

可能每个人会有自己的分法和定义，我就按照自己的理解概括一下信息引导的基本类型。

1. 新功能引导

向用户展示产品的新功能/页面，对产品的新功能有一个大致的了解，多用于用户首次进入/使用功能的引导，如：各种新手遮罩引导、产品介绍。

2. 指标引导

以提高产品的业务目标/增长目标为导向，按照一定的规律引导用户使用某功能，如：产品的信息 push 和广告。

3. 结果引导

在用户已结束的操作行为、结果页面上，引导商户使用相似功能或内容模块，促进产品的连续消费。

比如：淘宝在订单支付成功后，都会进行店铺、红包、优惠券、相关宝贝的推荐，保证消费者还处于「购物链」上。

4. 异常引导

针对用户可能会犯错的行为进行提示、警告，是一种前置的容错机制。如支付宝，用户在向「异常好友」转账时，以轮播的方式进行信息提示，避免用户转错账。

信息引导从哪方面切入

抛去业务目标和引导样式的局限，信息的引导可以从几个方面切入和思考：产品架构、用户行为、时间、阶段/过程。

1. 利用「产品架构」做引导

像很多同学做信息引导时，一上来就想着浮层、弹窗、动效等各种表现形式，而忽视了最简单、最底层的引导方式：利用产品的架构布局去引导。

这种方式是通过架构布局，来体现内容间的差别与关系，突显出核心内容模块，强调的是「视觉重量」，如：各模块间的面积大小、色彩强弱。像淘宝首页有各种功能入口，通过架构上的布局来进行功能分类和引导。

如何利用架构布局进行信息引导呢？

2 个点可以参考：重组和单拎。

重组：将同一层级、相关联的信息组成一个内容模块，从而使信息更聚焦、减少视觉干扰。

如腾讯动漫的个人中心页面，在老版本中头部信息较为分散、无关联，信息的引导性很差。而在新版本中，则通过「重组」把信息关联在一起，页面更聚焦清晰、引导性更强。

单拎：一种与「重组」相反的引导思路，将信息分解成各个独立的模块进行展示，让信息得到更多的展示。

很多「入口化」的功能，都适用该思路进行信息引导，如：手机淘宝的个人中心，有些功能原本可以和其他模块一样做成入口化的，但出于产品目标、用户诉求等维度的考虑，将部分内容「单拎」出来进行展示效果更好。

2. 利用「时间」做引导

按时间维度去发散的话，则可以分成「用户行为时间」和「网络实时时间」引导。

用户行为时间

根据用户操作的行为时间进行信息引导。如爱奇艺，用户在观看了 30 分钟视频后，会弹出积分领取提示。

这种引导需要注意的是：产品的时间机制。

如爱奇艺的「观看满30分钟」：是观看单个视频时长，还是一天里的总视频时长积累？离线观看视频（有流量联网）时是否也计入时长等等？这些机制都需要在前期，根据产品的平台特性、业务目标、用户习惯等维度去设置好。

网络实时时间

根据当前网络时间进行引导。如百度地图，会在 17 点快接近高峰期时，向用户弹出路况提示。

这类场景的引导，更注重于：产品的推送机制。

如设置了某个时间点推送内容，若用户没网络或者网络较差时，是晚点再推送，还是推送提前预设置好的「静态」内容？这些都是需要考虑的点。

3. 分「阶段/过程」做引导

根据特定的维度，将信息/功能分解成 N 个独立且关联的阶段。分阶段的维度可以是时间、日期、金钱、物品等等。

很多运营活动就会把奖励分成不同的阶段进行发放，如图：

这种引导方式的优势是：可以将全部的信息分解到各个阶段中去，页面的拓展性强，用户理解和操作成本低。劣势在于：周期较长，用户缺乏足够的动力。

因此，很多产品都会把最大奖励、最好的结果放在最后阶段，加上利用消费者的「目标趋近效应」──人们在距离目标越近时，越有动力去完成它，一步步地引导用户消费。

4. 根据「用户行为」做引导

根据用户的当前操作进行引导，如观看视频时，点击屏幕会暂停播放且会弹出广告信息；长按内容列表时，会出现多选、排序、删除等操作。

而根据「用户行为」做引导，需要注意 2 点：引导的返回策略和落地方式。

返回策略

结合用户场景与产品特性，看信息引导后是否需要制定返回策略，相当于一种「逆向引导」。而返回的策略不仅体现在「机制」上，还可以体现在「视觉样式」上。

机制：如爱奇艺在观看视频时最小化产品、跳转到新的页面后，返回观看视频时会自动后退几秒进度，以保证用户的观看记忆不会出错。

样式：如淘宝在支付订单后，会有两种返回形式。一是左上角的「返回」icon，返回到购物车页面；二是中间比较明显的「返回首页」按钮，返回至淘宝首页。

而对于产品来说，「返回首页」的优先级显然更高一点：既可以让用户形成消费闭环，又能浏览、搜索更多的商品，提升产品的 UV、PV、复购率等业务和增长指标。所以，才会把「返回首页」按钮的样式，做得比「返回」icon 重一些。

引导的落地方式

引导的落地方式就是信息引导后，用户跳转到哪里？一种是跳转至新的页面进行落地，页面空间大、可控性强；另一种是停留在当前页面展示，减少用户的操作成本。

如优酷在观看视频时，可以在当前页面进行奖品的引导和获取。

至于最终采用哪种落地方式，则根据产品目标、用户场景、页面形态等特征去抉择。

总结

以上就是个人对信息引导「策略层」的一些心得和看法。

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

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

本文是我学习Material Design设计规范的学习笔记和个人理解，希望对大家设计暗色主题有所帮助。

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

中后台很难设计吗？需求PRD看不懂？或许看完这篇文章后，会有新的体会

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

文章从项目流程的各阶段来讲解UI设计师应该做些什么，如何做才能把自己的价值在项目中体现出最大化！

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

人类是一种情绪驱动的物种;我们选择某些产品并不是因为它们有意义，而是我们认为它们会给我们带来什么样的感受。未来的界面将在产品设计的基础上使用情感化的概念。人们使用的经验将基于智商（IQ）和情商（EQ）。

本文试图展望未来，看看我们将在未来的十年内设计什么样的界面。我们将仔细研究三种交互媒介：

01、语音

02、增强现实（AR）

03、虚拟现实（VR）

未来情感化界面的实例

将来的界面会是什么样子？尽管我们还没有这个问题的答案，但是我们可以讨论界面可能具有的特性。在我看来，我相信我们最终会远离那些充满菜单、面板、按钮的界面，而转向更“自然的界面”，即扩展我们身体的界面。未来的界面不会锁定在物理屏幕上，而是使用整个五官感觉的力量。

因此，他们需要的学习成本更少——理想情况下，根本没有学习成本。

情商在商业中的重要性

除了让体验更加自然和减少学习成本外，情感化设计还为产品创造者带来了另一个好处：它提高了用户对产品的使用率。合理的利用人类对情感的行动能力来创造更好的用户参与度。

体会真实的语音界面

现在，以语音为主要界面的产品越来越受欢迎。我们当中的许多人在使用亚马逊Echo和苹果Siri进行日常活动，如设置闹钟或预约等。但目前市场上的大多数语音交互系统仍有一个与生俱来的限制：他们没有考虑用户的感受，因此，当用户现在与谷歌这样的产品交互时，他们会有很强的与机器交流的意识，并非是真正的人类。系统可预测地响应，并编写响应脚本。与这样一个系统进行有意义的对话是不可能的。

但是如今市场上有一些完全不同的系统。其中一个是社交聊天机器人应用程序Xiaoice。这个应用程序的核心是一个情感计算框架；这个应用程序是建立在这样一个理念之上的，即首先要与用户建立情感联系。Xiaoice能够动态地识别情绪，并通过长时间的对话和相关的回应吸引用户。因此，当用户与Xiaoice互动时，他们会觉得自己在和一个真正的人交谈。

许多人在电影《她》（2013）中看到了基于语音的互动影响力。Theodore ( Joaquin Phoenix 主要角色) 爱上了一个 Samantha (一个复杂的操作系统)。这也使我们相信，未来基于语音的交互系统，主要目的之一将是为用户提供虚拟伴侣。这部电影最有趣的是 Theodore 没有 Samantha 的视觉形象——他只有她的声音。要建立这种亲密关系，就必须产生反映一致个性的回应。这将使系统具有可预测性和可信赖性。

虽然技术离Samantha这样的操作系统还很遥远，但我相信语音优先的多模式界面将是语音支持界面发展的下一篇章。这些界面将使用语音作为主要的交互方式，并在创建和构建连接感的上下文中提供附加信息。

为Brain.ai设计的语音界面示例（图片来源：Gleb Kuznetsov）

AR体验的演变

增强现实（AR）被定义为现实世界之上的数字覆盖，并将我们周围的物体转化为交互式数字体验。我们的环境变得更加“智能化”，用户的手指尖上会出现“有形”物体的错觉，这样就在用户和产品（或内容）之间建立了更深层次的联系。

使用AR重新定义现有概念

AR的独特之处在于它为我们提供了与数字内容进行物理交互的非凡能力。它可以帮助我们看到以前无法看到的东西，这有助于我们了解更多关于周围环境的信息。AR属性有利于帮助设计人员使用熟悉的理念创造新的的层次体验。

例如，通过使用移动AR，可以打造一个新的飞行体验感受，允许乘客查看有关其它班机或当前航班飞行进度的详细信息：

AR在空中客车A380的飞行体验中。（图片来源：Gleb Kuznetsov）

AR帮助我们在空间中找到自己的路，并让我们一目了然地获得所需的信息。例如，AR可用于为当前位置创建丰富的上下文提示。被称为SLAM（同步定位和映射）的技术非常适合这种场景。SLAM允许对环境进行实时映射，还可以将多媒体内容放入环境中。

为用户提供价值的机会有很多。例如，用户可以将他们的设备指向建筑，并在屏幕上了解更多关于这个建筑的信息。它能够显著的减少工作量，并通过允许导航和访问实现轻松的情感体验。

在上下文中提供其他信息（图片来源：Gleb Kuznetsov）

我们周围的环境（如墙壁或地板）可以变成一个可交互的场景，这种方式在过去仅限于我们的智能手机和电脑。

你在下面看到的概念设计就是这样的；它使用物理对象（白墙）作为通常使用数字设备传送的内容的画布：

交互式墙的概念 - 在现实世界之上的数字覆盖。（图片来源：Gleb Kuznetsov）

避免信息过载

许多人都看过一个叫做“超现实”的视频。在这段视频中，物理世界和数字世界已经融合，用户被大量信息所淹没。技术允许我们同时显示几个不同的对象。如果使用不当，很容易造成过载。信息过载是一个严重的问题，它会对用户体验产生负面影响，避免信息过载将是AR设计的目标之一。精心设计的应用程序将会过滤掉那些与使用人工智能的用户不相关的内容。

高级个性化

当系统实时地根据用户的需求和期望来调整内容或功能时，就会发生数字体验的个性化。现在许多移动应用和网站使用个性化的概念来提供相关内容。例如，当你访问Netflix时，你看到的电影列表会根据你的兴趣进行个性化设置。

AR眼镜允许创造一种新的个性化水平，即“高级”的个性化水平。由于系统“看到”了用户看到的内容，因此可以利用这些信息提出相关建议或在上下文中提供其他信息。试想一下，你很快就会戴上AR眼镜，传输到视网膜的信息将根据你的需要进行调整。

从增强现实走向虚拟现实，创造沉浸式体验

AR体验具有自然的局限性。作为用户，我们在内容和内容之间有明确的界限; 这条线将一个世界（AR）与另一个世界（现实世界）分开。这条线让人感觉到AR世界显然是不真实的。

你可能知道该如何解决这个限制，例如虚拟现实（VR），当然。虚拟现实并不是一种全新的媒介，但直到最近几年，技术才达到让设计师创造沉浸式体验的程度。

沉浸式VR体验消除了现实世界与数字之间的障碍。当你戴上VR耳机时，你的大脑很难处理你收到的信息是否真实。

以下是设计人员在创建沉浸式虚拟环境时需要记住的内容：

01、写一个故事

有意义的VR需要有一个强有力的故事核心。这就是为什么在你开始设计VR环境之前，你需要为用户旅程写一个故事。一个被称为“故事板”的强大工具可以帮助你做到这一点。使用故事板，可以创建故事并检查所有可能的结果。当你审视你的故事时，你将看到何时以及如何使用视觉和音频提示来创造一种沉浸式的体验。

02、与角色建立更深层次的连接

为了让用户相信虚拟现实中他们周围的一切都是真实的，我们需要与用户扮演的角色建立联系。最明显的解决方案之一是在虚拟场景中包含用户手的表示。这个表示应该是实际的手-而不仅仅是一个假造的复制品。考虑不同的因素（如性别或肤色）是至关重要的，因为这会使互动更加现实。

用户可以看到他或她的手，看他们看起来像一个角色。（来源：leapmotion）

也可以将现实生活中的一些对象带到虚拟现实环境中，以创建这种连接。例如，一面镜子。当用户查看镜像并在反射中看到其角色时，它可以在用户和虚拟角色之间实现更真实的交互。

虚拟现实用户会查看虚拟镜像并将自己视为VR环境中的角色。

03、使用手势而不是菜单

在设计沉浸式虚拟现实体验时，我们不能依赖与传统的菜单和按钮形式。为什么呢？因为显示菜单相对容易打破沉浸感。用户将会知道他们周围的一切都不是真实的。设计师不需要使用传统的菜单形式，而是需要依赖手势。设计界仍在为使用手势定义一种通用语言的过程中，参加这项活动是有趣和令人兴奋的。棘手的部分是让用户熟悉和可预测的手势。

试图将现有的交互概念重用于VR体验。不幸的是，这个概念会打破沉浸感。新媒体需要新的互动模式。

04、与VR环境中的元素交互

要创建一个感觉真实的环境，我们需要让用户能够与现实中的对象交互。理想情况下，环境中的所有对象都可以设计成允许用户触摸和查看它们的方式。这样的物体会起到刺激作用，帮助你创造一种更沉浸的体验。触摸对于探索环境极其重要；婴儿在最初几天获得的最重要信息是通过触摸获得的。

05、在虚拟现实中分享情感

虚拟现实有机会成为一种新的社会体验。但要做到这一点，我们需要解决一个重要的问题，即，把非言语的暗示带入交互中。

当我们与他人互动时，我们获得的信息中的一个重要部分来自肢体语言。惊奇、厌恶、愤怒——所有这些情绪都存在于我们的面部表情中，在面对面的交流中，我们从眼睛区域推断信息。当人们在虚拟现实环境中交互时，提供这些信息是很重要的，以此来创建更真实的交互。

好消息是，头戴式设备（HMD）将很快覆盖情感识别。在虚拟现实中，几乎任何人与人之间的互动都会从面部表情中受益。

06、为VR环境设计声音和音乐适合

音频是沉浸式体验的重要组成部分。如果不为环境设计声音，就不可能创造真正的沉浸式体验。声音既可以用作背景元素（即周围风的声音）也可以用作方向。在后一种情况下，声音可以作为提示-通过播放方向性（声音来自何处）和距离（用户可以将注意力集中在特定元素上）。

在为虚拟现实设计音频时，最重要的是使声音成为3D。2D声音对虚拟现实来说不太好，因为它会使一切变得过于平坦。三维声音是你可以听到的声音，在你周围的每个方向-前面，后面，上面和后面-所有的地方。您不需要专门的耳机来体验3D声音；可以使用HMD的标准立体声扬声器来创建它。

头部跟踪是良好声音设计的另一个关键方面。让声音以现实的方式表现是至关重要的。这就是为什么当用户移动头部时，声音应该根据头部移动而变化。

结论

当我们考虑到产品设计的现代状态时，很明显我们只是处于冰山一角，因为我们非常局限于平板电脑。

我们见证了人机交互（HCI）的根本转变——重新思考数字体验的整个概念。在未来的十年里，设计师们将打破玻璃（我们今天所熟知的移动设备时代），转而使用未来的接口——复杂的语音接口、先进的ARS和真正的沉浸式VRS。当我们要创造一种新的体验时，我们必须明白，我们唯一的界限就是我们的大脑告诉我们，它必须一直是怎样的。

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

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

一周之前，Twitter 将接近7年未曾大幅度改版的桌面端页面，从里到外重新翻新了设计。

新浪微博的每一次小幅度调整都会带来大量的吐槽和不适，更不用说像Twitter 这样的世界级的社交媒体网站。用户的不适应不理解和负面反馈是避免不了，这样的大幅更新改版背后，有着这个平台不得不做的理由。

最近 Twitter 新版背后的设计师接受了连线杂志的采访，深入地聊了一下改版背后的考量。

设计技术和工具的快速发展，视觉设计本身，尤其是 UI 界面的很多具体的执行端的工作慢慢的没有那么麻烦了，但是找到为什么这么设计的设计决策，并不是那么简单。

保持一致：紧跟趋势的一次重设计

在整体视觉风格上，Twitter 桌面端的设计给人的整体感知是更加现代的——并且和移动端版本的设计靠近且保持了一致。这绝对是一个以数字产品为核心的科技公司应该做到的最基本的事情。

原本置于顶部的导航栏消失了，功能性更强的左侧边栏承载了主要的导航功能。

其中，原本被隐藏的「书签（bookmarks）」和「列表（LIsts）」是非常实用的内容管理功能，在这次改版的时候被直接显示在侧边栏当中。

而更重要的改变在于，关于当下正在发生的热门事件，单独占据了右侧的侧边栏「Trends for you」，大家正在热烈讨论的热门事件以Twitter 中标志性的标签（Hashtags）的形式呈现，相当于微博中的「热门微博」。而这在老版的 Twitter 中，这类内容的存在感并没有那么强烈，原本存在于第一屏的左侧侧边栏中，并且只有标签，除非你有意识地去关注和点击，否则很容易错过。

搜索栏同样被挪到了右侧边栏，置于「热门趋势」内容的顶部。这一设计巧妙的地方在于，它暗示了内容呈现的逻辑：当你搜索内容的时候，搜索结果会直接覆盖在右侧，而不会占据中间的主要的信息流。

毫无疑问，新版的 Twitter 在布局上更加扁平了，但是信息的扁平化呈现还不止布局上，交互上也相应的变化。在老版的 Twitter 中，当你点击具体的推文条目的时候，内容会以弹出框的形式呈现，但是新版中则会在当前层中直接扩展开显示，不会弹出，整体的融合感和有机感会更强。

老版 Twitter 中推文弹出框

新版 Twitter 中的界面

同样的，用户在回复、转推和点赞的时候，也不用在不同的弹出框模式下进行，而是更加直觉地在当前的页面中完成，整体感更强，更加直觉。

用户交互频次相对较高的转赞评和「热门」和主要信息流都不会在弹出框和叠加层控件中完成了，主要信息流也不会被因此而覆盖，整个 Twitter 因此显得更加敞亮开阔。

另外一方面，新版 Twitter 提供了更加丰富的个性化设计的体验，这也是对于 Twitter 用户体验的一次重要提升：

虽然在之前老版的 Twitter 中也可以定制字体大小色彩，但是之前的字体大小是纯粹的随意设置，这种自由度让很多并不熟悉的用户难以控制好文本和色彩的对比度，从而造成了整体视觉的愉悦度较低的情况。

新版中的配色和字体大小都是经过调校之后，比较合理的选择，这样拥有了足够的选择空间，又保持了整体视觉体验上的愉悦性的设计。在产品颗粒度的控制上，Twitter 有着一套成熟精准的设计方案。

与此同时，所有人都期待的，深色模式，同样随着这次页面重设计，一并打包更新了：

对于深色模式的控制，Twitter 和和其他的平台略有一点不同，他们所设计的深色模式包括「昏暗（Dim）」和「熄灯（Light out）」两种，前者的背景色是深灰，而后者则几乎是全黑。

任何一个社交媒体平台，大量的用户涌入进来之后都会面临着复杂的管控问题，更不用说 Twitter 这个已经存在了13年的世界性的平台。许多状况不可能简单的一刀切来解决。

重设计背后：设计解决不了全部的问题

作为平台，Twitter 已经在竭力推动「健康的对话」，但是在充满分歧和对抗的网络当中，情绪化是常态，简单的依靠 Twitter 官方的帐号来发声，并不足以覆盖如此广泛的垂直领域和复杂多样的用户群体，以及不同的国家和地区。

「我们以前经常会推出一些新的设计和小功能。上线之后，过一阵子我们再搜出来，用投影仪投到墙上重新审视，」Twitter 的联合创始人 Biz Stone 说：「然后我们会觉得，好像不应该这么设计。」

「我们的目的是为公众的对话来服务的。但是目标明确之后，还需要问一个问题：我们真的够好吗？」Biz Stone 在采访的时候，这么说道。正是在这样一个问题促使之下，Twitter 的改版重设计就悄然推动起来了。

从左到右分别为 Biz Stone，Bryan Haggerty 和 Mike Kruzeniski 。图片来自 Wired，摄影师：Samantha Cooper

Twitter 团队对此选择了谨慎行事。他们选择了类似灰度测试的方法，让不同的用户参与到不同的「测试」当中来，包括不同的书签模块的设计，不同的深色模式，不同的搜索模式，等等。绝大多数的设计都正面的，但是它们也并不是爆炸性的。

如今所呈现出来的新版页面当中，绝大多数的设计都克制而微妙，以往的很多功能都得到了简化。「我们正在试图寻找合适的机会，重新创造更加大胆的设计，但是它需要一个稳固的基础，所以我们打算从这一次的重设计开始，从我们最好的功能和服务开始。这就是基础。」Twitter 的高级产品设计总监 Mike Kruzeniski 面对连线杂志的采访，是这么解释他们设计的初衷。

所以，Twitter 的这次重设计只是一个开始。对于这个平台上大量的关于仇恨和骚扰相关的负面内容，清理起来并不是一套规则就可以全部解决的，而 Twitter 更倾向于人为来处理和干预，但是平台本身需要更好的支持这方面的功能。

在 Twitter 早期阶段，视觉设计并不是他们的重心。「我们只是尽全力地让产品具备可用性，」Stone 回忆当时的情况：「我们并没有试图让它看起来好看……我们只是努力让平台保持活力。」当时的 Twitter 整个团队大概只有30个人。

实际上，随着后面更加专业的 UI 设计师加入进来之后，整个团队的设计能力也越来越强。UI 界面是Twitter 和用户进行沟通的媒介。

虽然现在是移动端为主的时代，但是桌面端 Twitter 的重要性并没有弱化。Twitter 的网页重设计项目的负责人 Jesar Shah 说：「人们在桌面上大量使用 Twitter 来搜寻感兴趣的信息，跟他们息息相关的信息内容。」在页面的左侧，有一个快速的账户切换的功能，对于这一点，Shah 补充道：「围绕这个功能点，我们从全球不同的地方获得了反馈。比如日本就是Twitter 最大的市场之一，当地用户基于自己不同的兴趣点创建的账户，比如一个账户专门是关于美食的，一个是专门关于旅行的，还有一个则是给自己的宠物猫的。无论你使用哪个设备，都要能够快速便捷地切换帐号，这是我们这么长时间的调研中，听到最多的一个需求点。」

从左到右分别为 Ashlie Ford，Marina Zhao 和 Jesar Shah ，她们主导了这次 Twitter 的设计。

「我们需要确保整体体验足够优秀，所以原则上需要严谨。鉴于我们服务对象是全球客户，所以我们需要尽可能满足不同用户的诉求。」Shah 和 Ford 所带领的团队专门创建了一份调查问卷，以获取反馈。他收到了来自全球总计20万份问卷，Ford 的团队花了整整一周的时间，借助翻译工具将其中来自非英语国家的问卷都翻译出来，并且梳理汇总了。

「用户肯定会以为我们不会仔细阅读这些问卷，但其实我们都仔细阅读过了。」Shah 说道。她阅读到的第一个用户需求反馈就是想要更多的表情符，为了应对这样的需求，Twitter 制作了一个分组表情输入控件。同时，他们还提供另一个不断更新的热门 Gif 图片表情合集，非常贴合用户需求了。

Twitter 已经 13岁了。

在 这个社交媒体平台上，@realDonaldTrump 可以进行「Twitter 治国」，还有大量的流言和不真实的信息，骚扰和不够人性化的内容。这都是客观存在的，亟待解决。在今年年初的时候，策展人 Chris Anderson 将 Twitter 比作是正在撞向冰山的泰坦尼克号。的确如此。

但是，设计改变不了一切。Twitter 的设计团队在接受采访的时候也坦诚地接受了这个事实。但是他们认为，设计可以帮助他们界定和构建 Twitter 功能，并且逐步地帮助用户来解决身份认同的问题。

「如果你在 Twitter 上问一个用户，Twitter 是什么，你会得到一千个答案。」Kruzeniski 说：「曾经我们认为这样很糟糕，但是现在我认为这是一个很棒的事情。因为现在我们可以更好地帮你找到特定的兴趣，并且和你的兴趣、你所关注的主题连接到一起。」

结语：围绕人，而不是产品

曾经的推特是一个铺满木地板，到处都是品牌标志性蓝色的「鸟笼」式的建筑，但是如今重新装修过的办公室则更加现代，墙壁上到处是各种各样的涂鸦，这些涂鸦代表着Twitter 这个平台内的各种垂直社区，比如 Black Twitter、NBA Twitter，以及各路名人的粉丝社区。

走过Twitter 的办公室，你会清晰地收到这样的一个信息：一切都是关于人的，而不是产品。

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

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

多参数柯里
原生bind
实现promise
防抖节流函数
多参数柯里化

参数fn可以是function(a,b,c){}，也可以是function(a,b,c,d,f){}

// 支持多参数传递
function progressCurrying(fn, args) {

    var _this = this
    var len = fn.length;
    var args = args || [];
    return function() {
        var _args = Array.prototype.slice.call(arguments).concat(args);
        // 如果参数个数小于最初的fn.length，则递归调用，继续收集参数
        if (_args.length < len) {
            return progressCurrying.call(_this, fn, _args);
        }

        // 参数收集完毕，则执行fn
        return fn.apply(this, _args);
    }
}

原生js实现bind

Function.prototype.myBind = function(Othis){
  if(typeof this !== "function"){
    return new TypeError("not a function");
  }
  let _this = this;
  let args = [...arguments].slice(1);
  let func = function(){};
  let fBound = function () {
    return _this.apply(this instanceof func ?this:Othis,[...arguments].concat(args));
  }
  func.prototype = _this.prototype;
  fBound.prototype = new func();
  return fBound;
}

防抖函数

//每wait时间内执行一次，若期间被触发，则重新执行
function debounce(func,wait) {
  var timeout ;
  return function(){
    let args = [...arguments];
    let _this = this;
    if(timeout){
      clearTimeout(timeout);
    }
    timeout = setTimeout(function() {
      func.apply(_this,args);
    }, wait);
  }
}

节流函数

//每wait时间执行一次
function throttle(func,wait){
  var timeStart = 0 ;
  return function(){
    let _this = this;
    let args = [...arguments];
    let now = Date().now();
    if(now - timeStart >wait){
      func.apply(_this,args);
      timeStart = now;
    }
  }
}

实现一个promise

    function _Promise(func){
        this.status = 'pending'
        this.result = '' ;
        func(this.resolve.bind(this),this.reject.bind(this));
    }
    _Promise.prototype.resolve = function(result){
        if(this.status == 'pending'){
            this.status = 'fullfilled';
            this.result = result;
        }
    }
    _Promise.prototype.reject = function(error){
        if(this.status == 'pending'){
            this.status = 'rejected';
            this.result = error;
        }
    }
    _Promise.prototype.then = function(preResolve,preReject){
        let _isPromise ;
        if(this.status == 'fullfilled'){
            _isPromise = preResolve(this.result);
        }else if(this.status == 'rejected' && arguments[1]){
             _isPromise = preReject(this.result);
        }
        return _isPromise instanceof _Promise ? _isPromise:this;
    }

实现一个promise.all()

 function promiseAll(promiseArray){
        //首先参数一定是一个数组
        //然后此函数返回的是一个promise,如果全部成功，则返回结果的数组，只要有一个失败，则返回失败的结果
        return new Promise(function (resolve,reject){
            if(!Array.isArray(promiseArray)){
                return reject(new TypeError("not a function"));
            }
            let resolveNum = 0;
            let arrNum = promiseArray.length;
            let resolveResult = [];
            for(let i=0; i<arrNum ;i++){
                (function (i){
                    Promise.resolve(promiseArray[i]).then(function(result){
                        resolveNum ++;
                        resolveResult.push(result);
                        if(resolveNum == arrNum){
                            return resolve(resolveResult);
                        }
                    },function(error){
                        return reject(error);
                    })
                })(i);
            }
        }) //返回的promise结束
        
    }
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。