如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我们常说：设计就是在向用户传递信息，在设计的日常工作中，传递信息的方式大多都是图文相结合的形式，而文字作为信息传递中最直观的表现形式，对于整体而言是至关重要的一环。很多设计师一味强调追求图具有吸引力，而忽略了文字的重要性，最终导致图文无法结合、虎头蛇尾。说到文案吸引力，最佳的表现位置就是标题字，所以本期就和大家一起分析、总结一些比较实用的标题文字的处理方式，提升对读者的吸引力。在文字排版中，想要提升标题文字的吸引力，就要与其他非标题性文字形成视觉上的反差、对比，进而让标题文字在整体排版中更加吸引用户眼球。这里说的第一个比较实用的处理手法就是切割文字笔画，即：以标题文字的笔画为切入点，在不影响其辨识度的前提下，通过一些特殊的处理手法，提升视觉比重。
切割文字笔画也可以理解为将文字的笔画分离字体的本身，然后再以文字笔画为切入点，进行处理，常用的笔画处理方式：变色、模糊、删除、阴影，下面我们逐一来看。
1. 分离笔画 – 变色处理
顾名思义就是有意将分离的字体笔画进行变色处理，提升标题文字本身字体上的变化强度，从而提升标题对于用户的吸引力。举例说明：
上图中，这两种标题形式在设计工作中都是可取的，只是对比而言，案例 1 给人的感觉更加平缓，属于比较常见、中规中矩。而案例 2 则更加新颖，在视觉上变化更强烈（主要体现在文字笔画与笔画之间），更加吸引用户眼球，也起到了提升作品设计感的作用。
2. 分离笔画 – 模糊处理
同样的理解方式，就是将分离的字体笔画进行模糊化处理，目的是通过笔画与笔画之间的虚实对比，营造出视觉上的前后关系，从而提升标题文字在整体文案中的视觉注意力。
上图案例中通过对比我们发现：案例 4 相较于案例 3 更吸引人，原因在于其笔画之间的虚实结合使得字体本身就形成了一定的反差感，形式上的多变造就了文字更吸引人，同时如果感觉文字笔画之间的变化强度不够，可以结合变色+模糊的处理形式，比如：
这样给人的感觉就更加强烈、也更诱人，但是这种笔画之间的变化多了，也就意味着掌握的难度提升了，一定要避免过多的效果导致出现凌乱的现象。
3. 分离笔画 – 阴影处理
可以理解为将文字笔画分开来看，通过添加阴影的方式，营造视觉上笔画的前后关系，从而增强其整体的视觉变化，举例说明：
上图中，案例 8 就是通过给文字笔画添加阴影的形式，使得笔画与笔画之间在视觉上形成了很明显的前后遮挡关系，将原本平面的文字变得更立体，也更易于吸引用户眼球。这种处理手法在平时工作中也很实用，只需要理清楚笔画的前后逻辑关系，通过画笔涂抹的方式慢慢调整即可。
4. 分离笔画 – 删除处理
删除笔画的处理形式相对来说在工作中运用较少，因为一旦处理不恰当，很容易影响字体本身的辨识度，适得其反，举例说明：
如上图所示，删除了一些笔画，给用户留下一些想象的空间，也是比较新颖的处理方式，比较适合一些平面海报标题的设计。
这种删除字体笔画的处理形式虽然很新颖，但是应用的局限性较大，属于比较难把控的一种。
注意：将文字笔画单独拆分出来进行处理的手法，一定不要过于追求变化强烈，否则很容易导致标题文字非但没有起到吸引用户的作用，反而最基本的辨识度都会被破坏，一定要把握好度。
在日常工作中，通过给标题文字添加辅助元素，从而突出标题的处理手法是非常实用的，这里所说的辅助元素可以分为很多种，比如：图形、肌理、光效等等，目的都是借助辅助元素与标题文字的相互结合，让文案标题的视觉形象更鲜明、更吸引用户。
添加图形是属于比较直观且应用广泛的一种处理方式，而这里的图形一般情况下会和标题文字在属性上有所反差，这样有利于最终效果的呈现更加明显，举例说明：
如上图所示，标题文字通过添加下划线、边框、形状等等辅助图形元素，较常规标题而言，其视觉变化更加强烈，整体丰富度提升了很多。但是这种辅助元素不能添加太多，否则很容易出现乱的现象，要让这些添加的元素与标题形成相辅相成的关系。
上图的设计案例，通过对比我们发现，右侧案例视觉更丰富，且标题文字添加下划线后，其在画面整体的视觉形象更加鲜明、更吸引用户眼球。
现实生活中一个物品如果置身于某一个环境内，它自身就会受到周围环境的影响，而如果我们假定环境，将标题文字看做物品，那么我们就可以给予标题文字在环境中的光影，比如：投影、倒影、发光、环境色等等，这样就间接地增强了标题文字的视觉变化，从而起到吸引用户眼球的作用。
如上图所示，把文字当做处于环境中的物体，通过投影、倒影、阴影的方式体现其环境，在视觉上有了更深的层次变化，也能起到强调、加深印象的作用。这种营造环境感的处理形式在平时工作中也很实用。
再说下发光的处理手法，这种形式大多用在暗色调的画面中，将文字看做一个发光体，即受周围环境的影响又影响着周围环境，举例说明：
上图中虽然说左右两种表现形式文字都比较清晰、明了，但是就视觉感受而言，右侧将文字作为发光体与周围环境相辅相成、融为一体的处理形式更容易吸引用户眼球，而且更加新颖、有创意。这种表现形式在一些电商海报中也很常见，比如：
发光的效果给人的感受很舒服，打破了常规的单纯平面编排文字的现象，将文字场景化，使其更诱人。
还有一些在平时工作比较实用的，只不过或多或少在之前文章中都有提过，这里以补充说明的形式展开。
1. 标题文字 – 关键词变色
说到关键词变色算是比较常用的一种，就是将原本标题文字中一些关键词进行变色处理，目的是增加标题文字的视觉变化强度。
通过将案例中「免息」一词变色处理，使得标题在视觉感受上更加明显、有吸引力，而且给人的感觉也很舒服，这种处理手法是非常实用的，不妨多试试。
2. 标题文字 – 描边
描边文字在平时工作中用到的相对少一些，这种处理手法也间接地起到了打破常规的作用，当我们一直按照某一些常规形式工作时，偶尔做一些改变也许会得到意想不到的效果。
3. 标题文字 – 与主体遮挡
文字与主体营造遮挡关系也是在日常工作中很实用的一种，就是将主体与文字相互穿插排放，通过必要位置的阴影进行加深体现。虽然元素并不多，但是最终呈现的视觉效果却很舒服、有吸引力。
这种主体与标题穿插表现的形式使得两者更加整体，对于画面而言，主体和标题都起到了很好的强调作用。
文章中提到了一些比较实用的提升标题文字吸引力的处理手法，但是需要注意不能过于追求效果而忽略了设计的本质，要根据需求选择恰当的方式，不管何种形式，都要保证文字本身的识别性。文章中提到的并非全部，主要还是为大家提供一个可以参考的方向，要学会举一反三、大胆尝试。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
弹窗在设计中运用的非常广泛，基本上每个应用都会涉及到。恰好这段时间我也在整理公司设计组件这一块，所以就想总结分享一下。设计师都会使用弹窗，但对于弹窗背后的分类及运用可能还不是特别了解，在写这篇文章之前，我查看了很多应用及资料，所以下面会有大量的案例，相信大家看完可以对弹窗的认识更明确，做设计规范的时候也能有自己的想法。
现在的弹窗分为两种，一种是模态弹窗（重提示），一种是非模态弹窗（轻提示）。
常见的模态弹窗：Dialog/Alert、Actionbar、Popover/Popup
常见的非模态弹窗：Toast/Hud、Tips、Snackbar
一、模态弹窗
Dialog/Alert 对话框
对话框是我们常用的弹窗，安卓开发语言是Dialog，iOS开发语言Alert，它通常出现在页面的中间，对话框/警示框的类别非常多，对用户的干扰比较大。前面之所以说模态弹窗是一种重提示，是因为它需要用户主动触发选择才可以继续当前的操作。
① 信息-选择确定
特点：这类弹窗通常是一些系统功能的授权、版本更新、消息通知、重要提示等，通常只有1～3个主按钮，只需要用户进行简单的选择。
下图举例分析：
iOS询问是否删除APP，就属于重要提示弹窗，它一般会用在像删除、确认提交...一些比较重要的功能操作中。
小红书的这个是否允许使用网络弹窗，大家一定在许多APP中都见过，这属于一个系统自带的授权弹窗。
马蜂窝与天猫的消息提醒弹窗，一个属于初次使用APP时，系统自带的弹窗，一个属于使用后期APP为了推送消息，主动提示你开启消息通知。
有钱花和爱奇艺的版本升级弹窗，都属于偏运营类的弹窗，这一类的弹窗通常会弱化暂不升级的按钮，突出升级主按钮。
② 信息-输入勾选
特点：这类弹窗通常是输入一些比较少的信息或者勾选信息，常用于备注输入、规格选择、分组选择等，通常只有确定和取消两个按钮。
下图举例分析：
微博对于已关注人的分组及备注，都属于信息输入及勾选类弹窗，操作通常都比较简单。
③ 信息-传达展示
特点：这类弹窗通常是一些广告、红包优惠、节日活动等一些运营类弹窗，主要是吸引用户点击及参加活动，这类运营弹窗通常会设计的比较吸引人，造型各异，会突出领取、查看等大按钮，弱化关闭按钮。
下图举例分析：
拼多多和饿了么这类的红包优惠弹窗，就不多说了，大家都懂，它们最主要的目的就是吸引用户点击，提升购买率。
美团的变黄送好礼弹窗，属于一次比较大的品牌升级，它主要目的是让用户更好的了解并接受品牌色升级。整体的元素及动效设计都非常清晰，视觉感很强。
支付宝的这个猜世界杯赢蚂蚁积分的弹窗，属于活动弹窗，它的整体设计非常贴合主题。
Actionbar操作栏
Actionbar主要分为Action Views和Action Sheets。它们通常是由底部弹出，它的操作及信息会比对话框类型的弹窗更多更复杂。这种当前页面的下拉弹窗好处就是，可以让用户清楚的感知当前的操作，比跳转到新页面更加有安全感。还有一个特殊的抽屉式弹窗也顺便说一下。
① Action Views操作视图
特点：这类视图弹窗通常占屏比较多，以文字、图标等形式展示各种功能，也可以说这类的弹窗是一个小型的页面。它一般从底部弹出，不太强调归属，大多出现在购买、支付、分享等场景。
下图举例分析：
百度云盘的这个+号扩展弹窗比较特殊，它也可以说是浮层，占满整个屏幕，它最吸引人的还是它的小动效。
京东购买时的弹窗和支付宝付款时的弹窗，都是比较典型的，在各种电商产品及付款页面用的非常多。
转转这个的键盘与输入为一体的弹窗，设计的非常人性化，让用户一次就可以输入多个价格。大大提高了用户的操作效率。
网易云音乐的分享弹窗就是典型的以文字与图标来展示功能的。
微信读书的底部阅读设置弹窗，比较特殊，为了使用户沉浸阅读，它是比较隐藏的，而且非常轻量化。
② Action Sheets 操作列表
特点：操作列表相对于操作视图，它更单一。主要是以文字展示功能按钮，重要敏感的功能操作一般会用主题颜色或红色显示，主要运用在一些日常控件、功能选择、删除、保存等场景。
下图举例分析：
Keep的选择日期，属于iOS原生控件，非常常见。
淘宝的选择地址弹窗，整个展示的非常清晰全面，而且用户每选择一项，就会有相应的显示。
支付宝和天猫超市的两种列表弹窗，就不多说了，简单的功能选择都会采用这种。
③ 抽屉式弹窗
特点：这种抽屉式弹窗一般从左右两边弹出，经常运用在一些导航扩展和目录展示中，它能承载比较多的信息，基本上都是用来放一些不太常用的功能。
下图举例分析：
微信读书及一些其他阅读类产品，由于目录很长，而且一般是从上到下浏览的，所以基本都采用了这种抽屉式弹窗。
小红书的这个抽屉式弹窗，以图标和文字的形式展示了一些不是很常用的功能，为我的页面节约了不少空间。
Popover/Popup 浮层
Popover是ios的开发语言，popup是安卓的开发语言，浮层是指，用户点击某个功能后浮出一个临时气泡对其作出补充，它通常会伴随着半透明的遮罩或者投影衬底，用户需要点击功能区域操作，或者点击空白处取消，才能进入下一步操作。它与上面操作栏的最大区别就在于，它更强调归属，可以出现在页面的任何地方，而操作栏一般只出现在底部，不强调归属。
① 指向浮层
特点：这类的浮层一般伴随有小三角指向，强调归属。气泡里面的功能通常以单一的文字或文字与图标结合的形式来展示，主要运用在顶部加号补充、复制、分享转发等场景。
下图举例分析：
支付宝和美团的顶部加号补充浮层，展示形式是差不多的，只是UI样式不一样，一个是白色气泡黑色半透明遮罩，一个是深灰色气泡。
微信读书和微信的选择文字气泡，在文字复制中很常见，通常会与其他转发收藏小功能一起出现。
② 导航筛选浮层
特点：所谓导航筛选，自然是与导航分不开的，再加上浮层是比较强调归属的，所以它通常会与导航连在一起，一般出现在顶部。
下图举例分析：
美团的导航筛选，因为选项及开关很多，所以它的底部会有两个主按钮，一个完成，一个重置。
饿了么的这个只有一个功能选项，所以它一般是直接选择就收起浮层了。
③ 引导浮层
特点：引导浮层的作用就是引导用户更好的使用产品及交互，降低用户的学习成本。它通常会出现在用户首次进入APP的时候，一般只会出现一次，点击空白位置或我知道了浮层就会消失。
下图举例分析：
QQ音乐与微医的引导浮层都是用户首次进入应用时，给出的功能搬家提醒浮层。
二、非模态弹窗
Toast/Hud 提示框
Hud是ios的控件名词，Toast是安卓的控件名词，它们都属于一种轻提示，给予用户及时反馈，让用户知道自己当前所处的状态。
Hud一般只出现在屏幕的中央，以毛玻璃的样式表现，内容展示比较富丰富。
Toast可以出现在屏幕任意位置，通常以黑色半透明的小框来表现，内容一般是纯文字提示或者文字与图标结合提示。
① 状态提示
特点：状态提示的Toast，它们一般都是反馈用户当前操作的状态，只出现1到2秒就会自动消失，场景一般是关注成功、密码错误、音量提示、静音、清除缓存等。
下图举例分析：
移动的属于操作遇阻提示。
京东的属于操作成功反馈。
iOS的音量控制属于毛玻璃Hud。
微信的清除缓存属于正在操作状态。
② 按键提示
特点：按键Toast提示与状态提示不同，它们一般自动出现或者点击触发才会出现，用于对功能点的补充说明，让用户对功能有更深的了解。
下图举例分析：
蚂蚁森林里点击树木就会出现相关信息，当然它也会自动出现，点击其他区域也会自动消失。
知乎的消息标签不仅有小红点提示，还会在上方自动出现数字提示。
Snackbar
Snackbar是Android中的一个控件。它一般会在超时自动关闭或者在屏幕上滑动关闭，它没有Toast那么轻量，设置出现的时间会比Toast长，而且可以点击按钮进行交互。
下图举例分析：
UC浏览器的Snackbar，是在提示用户上滑，来查看更多内容，它需要滑动或者超时才能关闭。
京东的Snackbar，是在为用户推荐商品，提示用户点击箭头来查看喜欢的商品，它比UC浏览器多了一个关闭的按钮。
Tips提示
Tips与Snackbar最主要的区别就是：Tips它是内嵌在页面上的，而Snackbar则是浮在页面上的。Tips一般要让用户主动触发关闭按钮或点击进入下级页面才会消失，一般用于需要用户感知到的通知信息，或者植入广告。
下图举例分析：
百度云盘在下载视频时，就会出现一个Tips的提示，让用户观看广告来得到加速下载。这种提示虽说是广告，但它抓住了用户的场景及心理，观看广告的几率大大提升。
爱奇艺的Tips提示就属于重要通知提示了，提示用户VIP即将到期，续费可优惠，它们都有一个主按钮及关闭按钮，需要用户主动触发提示才会消失。
规范总结
目前的弹窗样式非常多，你能想到的，你想不到的基本都可以技术实现。但这同时也带来一个问题，那就是“不规范”。以上提到的弹窗种类，你只需要选择符合你产品要求的几个类型，最好不要在一个产品中运用多个同种类型的弹窗，否则后期会很难规范及组件化，当然运营广告类弹窗可以另当别论。
差不多就写完了...大家觉得有帮助的话，记得点在看和转发～
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在电子商务界，你的网站设计就是一张在线名片。它能帮助你从拥挤不堪的海量信息中脱颖而出，同时也反映出你的可信度。这是你的用户通过初次访问来了解你品牌的地方。如果他们没有找到自己喜欢的，几乎80%的人都会选择离开你的网站。
这就是为什么在构建和设计网站时，永远不要低估用户满意度带来的影响。
接下来要讲的是如何设计一个无可挑剔的、以用户为中心的网站，来使你的网站转化率飞速上涨。
如果不能引导用户完成最终购买，那么设计再精美的网站都是毫无意义的。用户没有选择在你这里购买的一个主要原因是复杂的网站导航。记住，用户不希望无休止的点击和滑动鼠标后才能找到他们想要的产品。如果他们发现自己正将时间浪费在不必要的操作上，就会弃你而去，到你的竞争对手那里。
这也是你想要阻止发生的事情。
人们常说不能以貌取人，但我们却一直都在这么做。在电商的世界中，你的主页就是颜值。
研究表明，只需0.05秒，一个用户就能判断出你的网站是否能够满足他们的需求。而且，如果你不能让他们相信你的网站是可靠的、安全的或足够有价值的，他们就会在眨眼之间抛弃你的网站。
那么，一个令人惊艳的主页包含哪些要素呢?
主页是用来吸引用户并与他们建立关系的。但当你想把一位访客变成付费用户时，体现产品详情页重要价值的时刻就到了。它们需要为用户深度展示你的产品，激发他们的兴趣，并让他们产生点击“立即购买”按钮的欲望。那么，让我们来一起看看产品详情页中最重要的元素都有哪些吧。
如果有用户不确定是否要从你这里购买产品，那他很可能会在深思熟虑前就离开你的网站。你需要向他们证明这是一个错误的选择，而这正是“常见问题“的切入点。
创建一个页面去回答用户最常问的问题，会让用户感到高兴，将他们的购买焦虑降到，也能够更快引导他们完成购买。这就是为什么，你需要积极地构建FAQ页面，提供可操作和有用的技巧，甚至通过截图和图片的形式来让答案容易被更多人理解。
一个可靠的FAQ页面还可以提升SEO（搜索引擎排名优化），特别是在语音搜索SEO和本地化SEO盛行的时代。数据显示，22%的搜索者会使用语音搜索在网上查找本地企业。因此，综合考虑电商SEO实践与本地化SEO服务，对你的电商网站至关重要。
这就是FAQ页发挥首要作用的地方。也就是说，在不损害用户体验的情况下，它使你有机会针对搜索时高频出现，及具有地区特征的关键词，来优化FAQ页面的问题和答案。此外，这也有助于提升你的网站在语音搜索中的排名，因为谷歌经常使用FAQ页面作为语音搜索结果。
你已经通过种种努力让令人惊艳的主页赢得了用户的信任，用产品详情页页的优质文案提升了他们对产品的兴趣，现在是时候激发他们去完成最后的购买流程了。你千万不能搞砸了这个关键环节，因为购买流程是购物流程闭环的最后一步。
对于电商而言，用户体验至关重要。她会为你积累忠实的老用户，激励新访客转换为付费用户，并有助于他们向亲朋好友传播关于你的正面口碑。Jeff Bezos对此有很好的诠释：
“如果你的确建立了很好的体验，用户就会口口相传。口碑的力量是无比强大的。”
我希望以上的这些秘诀将可以成为你的坚实基础，助力你在在电商领域取得成功。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
创意动画1. 品牌加载
公众喜欢有趣，可塑的动画。Airbnb 和 Netfilx 将品牌 logo 动画应用到了启动页和加载页面。结合品牌特点、风格和符号，融合到产品设计中，从而提升视觉的一致性，创造富有特有性格的产品界面。
△ Netflix & Airbnb
2. 图标动画
微交互是建立在移动端上微妙视觉效果的小动画，而图标动画是微交互其中的一种。它的目的是吸引用户，让用户感觉顺畅、愉悦。
最近，让我印象深刻的一个图标动画是 Facebook 的新消息提醒界面，这些由产品所包含的一个个小细节，创造出了新颖而有趣的设计。
△ Facebook Website
在 UI 界面中，最常见的分隔方式是用细线对模块进行划分，但随着设计重心趋向简约，注重内容本身，传统的分隔线方式就略显多余。
根据格式塔亲密原则，通过留白控制间距大小，可以清晰地划分模块层级，同时界面看起来也更加透气、富有张力。可以看到 QQ、飞聊、Gmail、Messenger 等应用都采用了留白分隔。
△ Gmail & Messenger
1. 品牌形象插画
一个好的插画作品可以为产品带来极佳的辨识度。Snapchat 的页面用了很多情感化设计和品牌形象，包括开启通知引导动画、查找好友 landing page、下拉刷新页、照片回忆等等。
从品牌的个性化设计，寻找一种基于插画的设计语言，把产品塑造成一个高辨识度的 ID。
△ Snapchat
2. 3D插画
随着软件技术的提升，3D 插画在这几年中大受欢迎，很多应用都使用 3D 渲染产品，如：星巴克、Keep、毒App 等等，因为它真实立体，有着更高的转化率。
△ Starbucks by Wojciech
△ Keep & 毒
圆角代表友好、亲和力，而卡片模块化的布局更为清晰、有效、整洁。
在上周的微信改版《微信 7.0.5 发布：9个细节提升体验》的文章中，我讲到了订阅号的推送文章去掉了标题栏的背景，卡片变得更加简洁。另外，公众号详情页由原先的列表式，改成了圆角卡片式，弹窗也由直角改成圆角。
△ Broadcasting & 微信
长期以来，图像在视觉设计中起着至关重要的作用，而视频能够更直观的吸引用户，传达主要的思想。
在移动端中，视频主要用于登录页背景，一般可以是几秒钟的循环剪辑视频，它可以带来一种身临其境的体验感受。
△ Lyft & Nike
Toast 是一种轻量级的提示，作为用户操作后的反馈。UI 形态上从居中浮层，慢慢趋向于底部通栏样式。这样设计的好处是不会挡住当前界面的内容。
举一个反例，iOS 的调整音量提示，大范围的遮住了界面，特别是对正在玩游戏的用户非常不友好，直到 iOS 13 这个设计才被修改。
△ Google Earth & Spotify
随着扁平化设计和 Material Design 进一步占据主流趋势，简约的界面，明亮，大胆的色彩一直都处于增长趋势。色彩平铺已经成为清新、酷炫、数字时代的代名词。
△ Snapchat & Spotify
重内容、轻 UI，把注意力引导在重要内容和功能上。像 Facebook、Instagram 这种以图片社交为主的 App 都有一个特点，就是文字都是黑白灰，将彩色交给图片去传达，让用户关注内容即可。
△ Facebook for Android
增强现实的技术，已经出现在很多 Web、App 等领域中。许多平台开发者也将增强现实技术纳入其开发工具里面，可预期到这种类型的 App 将会越来越多。
1. 地图导视界面
地图+AR，让你不再盯着二维平面上那个蓝色的点，而是现实世界中的箭头告诉你在哪个路口转向。
△ Google Map
2. 表情贴纸
Instagram、Snapchat、Messenger 等平台可用 AR 滤镜来创作，表情贴纸可以帮助用户更直白有效地自我表达、获取注意力。
△ Spark AR
随着 5G、车联网、人工智能、自动驾驶的发展，车载界面也越来越受重视了。
在今年的 Google I/O 开发者大会上，针对车载系统 Android Auto，推出了新的设计语言，它有着更好的可拓展性。在 UI 上，完全重新设计了导航栏，能够更轻松地访问应用、通知，和你的 Google 智能助理，最大限度的帮助驾驶者减少分心，将注意力集中在道路上。
△ Android Auto UI
此外，还开发了新的系统小部件，在使用地图进行导航时，仍然可以一键控制音乐应用，或者正在进行的电话，同时在屏幕上保持地图的完整视图。
UI 设计的趋势除了侧重内容和情感之外，还会根据不同设备载体、新的技术（3D、AR）而变化。但归根结底还是以人为本，借用 Adobe 设计副总裁 Jamie Myrold 的一句话：如今设计师要思考的，绝不仅仅是设计一款 App、网站或设计工具。我们要思考的是人类的需求，用户的需求，打造真正人性化，多元化与包容性的设计。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我们在日常工作中几乎离不开扭曲和变形工具，它可以帮助一个设计师校正一个元素的透视关系，或者为设计好的标志贴效果图。除了这些日常的应用以外，扭曲工具还有哪些有趣的应用场景呢？我们今天的内容就会帮你找到答案。
从宏观的角度来讲，这种扭曲的手法，它设计出的版面变化方式是非常多的，我们将比较熟悉的文字进行扭曲，是可以呈现出其它的表现形式的。
比如说，最左侧这个海报，我们不光能看出来它的文字信息，还具有楼梯的印象；中间的这个海报，它把文字变换成了晾衣绳的感觉；我们再看最右侧的这个海报，很明显它就是一把扇子对吧。
这种表现形式它是比较抽象的，再加上它能够变异成其它的形状，所以，这种版面风格也会传递出一种趣味感。
我们在现实生活当中扭曲的图像，它属于一种光学的现象，比方说哈哈镜，它就是利用了这个原理，表面凹凸不平的镜面，反映出人像或者是物体的扭曲面貌，进而产生了幽默感。
生活当中的望远镜放大镜显微镜，也都是利用了这种凹凸的透镜原理来实现的。
我们人类还处于原始的时期，就已经开始运用绘画来记录身边的事物，在经过不断的发展，艺术家它们的绘画技艺也变得越来越逼真，甚至达到了和照片难辨真假的程度。当写实的风格几乎走到的时候，艺术家为了寻找新的艺术发展方向，画风就开始变得扭曲起来，变得抽象起来，从而产生了超现实的艺术流派。
我们将本来是圆形的西瓜和篮球限定在一个圆角矩形的这种做法，也是一种抽象的思维方式。
在这里我们为大家划分了五种常用的表现技巧，这些都是我们日常工作当中经常用到的一个扭曲技巧，我们分别介绍给大家。首先第一个就是液化这个工具，液化这个滤镜应该算是非专业人员都会知道的美颜功能，这个 ps 滤镜被用在了各种美艳的 app 里，这种夸张的艺术创作在漫画里面是经常出现的。
我们来通过网格感受一下液化命令到底是出现了哪些变化，液化的好处就是能够根据实际情况手动调节画面的扭曲幅度。它的自由度比较高，但是它的缺点也是自由度比较高，所以难度会比较大一些。
在设计的过程当中，也可以运用这个功能来刻画主体，产生一种遮挡的效果。我们也可以通过扭曲让文字的部分结构变得不容易认读，这就能达到设置悬念的作用，我们也可以通过其它不同幅度的扭曲变形，达到自己想要的状态。我们看上图是日本TDC 的获奖作品之一，作者是村上雅士，它运用的就是液化功能，将原本很平淡的版面，通过扭曲的变化，达到了吸引眼球的艺术效果。
这个是台湾设计师聂永真，他为2017年金点概念设计奖制作的主视觉海报，这个海报它以不规则的曲线呈现，并且搭上充满想象的文案，有耳目一新的形象。
下面我们来看一下球面化的工具，我们大家都知道，杯子中的水具有扭曲光线的作用，我们插到水里的这个笔它就会产生扭曲的现象，这个就是光的折射。我们在设计当中进行简单的图像合成时，也需要遵守这个物理定律。
我们这里通过网格来看一下这种形态的具体表现，顾名思义球面化的命令就是能够将选区内的画面进行球面的扭曲。它适合用在图像合成或者是还原真实性的场景里面，我们通过调整不同的幅度，产生不同的鱼眼效果。
除了基本的球面化扭曲，我们这个选择里还提供了水平和垂直的变化，形成类似圆柱体的表面效果。我们在产品贴图图像和形象的领域是经常用到这个东西的，我们调整不同的扭曲幅度，能够完美的让图像贴合到柱状的弧形表面上。
这里给大家准备了一个案例，我们给它添加一个气泡，然后再产生一些光影的效果，如果说我想让这个画面变得更真实一些，我们在设计的时候就要考虑到物理定律，这个时候就可以用球面化的命令。我们让圆形下面的文字产生光线折射的感觉，调节选项中的滑块，找到那个最接近真实的反射效果。
这个案例是我们研习设之前教程里提供的一个案例，我们看图中这个玻璃球和文字的衔接部分，用的就是球面化的效果。我们只看右侧这个对比图，你可以明显感觉出来，底部这个经过修改后的细节是更真实的，文字经过玻璃的反射，它一定会产生扭曲的视觉印象。
下一个给大家介绍一下极坐标，极坐标这个词听上去会比较陌生一些，但是你会非常熟悉，比如说这个启动画面，这个是PS cc版本的启动插图，它就是运用极坐标的命令实现的效果。除了能够实现从内部向外旋转的这个洞穴效果，还可以表现成类似于球体的效果。
我们继续通过网格来看一下它的扭曲原理，这里给大家做了一个细节的变化，是为了方便大家观察它的扭曲方向，我们给这个网格添加了颜色，顶部是蓝色，底部是红色，接下来我们为它执行极坐标的命令。
执行极坐标这个命令后可以很明显地看出，原来底部的网格内容被扭曲到了圆形的外侧，就是红色部分，变成了这个球的外侧，内部这个蓝色，就是之前顶部的蓝色部分。
它也提供了另一个额外的扭曲选项，扭曲后的效果就是这样的，这个效果我们不常用。
我们选择这张图来作为演示，让大家明白极坐标是什么原理，我们为它添加极坐标的效果，这个时候需要确定什么？就是图像的朝向问题，因为这个直接决定了最终的扭曲效果。
顶部的区域会在圆的内部出现，底部的区域会在圆的外部，我们根据想要达到的最终效果，来判断图像的具体朝向。这里制作了两种朝向的扭曲画面，左边的是地面在内部的球体效果，右边是地面在外部类似于洞穴效果。
我们在扭曲命令之后，需要手动将画面这个衔接部分处理掉。你可以用图章工具处理掉，这个画面就做完了。
再举一个例子，这个画面我要做的是人物在球体表面的效果，我们要考虑到方向，所以我们要将它旋转180度，然后添加极坐标命令。
使用修补工具来完成这个衔接部分，这个画面就完成了。
我们再来看下一个，下一个就是文字扭曲，也是我们这节课比较重要的一个内容。这个命令跟其它命令不同的地方就在于它不是在滤镜菜单下面，它是在文字编辑栏的右侧，在样式选择里，它提供了很多不同的扭曲方法。
这种方法相对于液化或者是自由变换更方便一些，因为它的这个可操控性很强，顶部提供了两种扭曲方向，底部选择则是调整扭曲的幅度。
这里我们简单地制作了几种文字样式，就是这个命令，它会让文字变得更接近图形化。
下一个我们来给大家介绍一下置换的扭曲风格，它的扭曲原理就是将被置换的元素，再加上需要被扭曲的元素，它们二者相结合，从而达到被置换元素一样的扭曲效果。这个话有点绕，我们通过下面的例子就明白什么是置换了。置换的幅度不同，扭曲的大小也会发生相应的变化。
比方说我们这里被置换的元素可以是任何图像，烟雾、丝绸、水波纹、液态流体或者是火焰，它们都可以当成被置换的元素。
比如说这里我们想让鸽子图案和旗帜结合，这个时候就需要用到置换的扭曲命令。首先第一步要做到的就是确定好鸽子在旗帜里的比例大小，然后要调整透视和倾斜角度来适应旗帜的表面轮廓。
最后执行置换命令，让鸽子的图像加入旗帜的扭曲轮廓，这样就形成了两者的完美结合了。界面里水平与垂直的比例，都是可以用数值来调整的。
我们再看下一个，不光是图形，文字也是一样的，添加置换命令之后，文字就会置入到了这个场景里，它的原理和之前是一模一样的。
我们再来看一下其它使用置换手法设计出来的版面，它们都是在表现原有信息的基础之上，通过置换的扭曲为版面，加入了另一种形态。左侧的飘动丝绸中间的楼梯和右侧的这个有点类似于纸张扭曲的效果，这些都是用置换这个命令来表现出来的。
我们来看一下，同样都是这个扭曲，用扭曲的这个思维，它设计出来的画面应该是什么样的。这个版面里文字信息使用的就是扭曲的变换形式，主体文字周围围绕着不规则的扭曲文字，增加主体形象的形式感。这种手法虽然会减弱文字的识别性，但换来的是视觉吸引力。如果想让选择的文字扭曲的话，这个文字最好是比较大的标题性文字。如果是小文字扭曲之后，它的识别性基本就没有了。
我们再来看下一个版面，大家应该能看出来，它就是运用了我们前面讲到的液化扭曲命令，思路就是重复的文字，它能起到强调作用。但有的时候你每一个细节都完全一样，它就会有单调的感觉，我们通过液化工具在对角线上进行扭曲，这样就会产生变化。
我们再来看下一个，这个效果是比较有趣的，它是用什么方式制作的？它是拍摄的。这个设计有的时候就像拍电影一样，并不是所有场景都必须依赖电脑，有的时候实景拍摄也能够带来更好的真实感。
这个版面用的是置换手法，由于我们没有办法找到相同的幕布，这里我们找了一个类似的作为载体，我们在上方加入文字信息，然后用置换命令，这个就变成了跟海报类似的感觉了。
这个版面和上一个有一些类似，但是不同的是它没有背景，它没有载体。这是因为扭曲的材质背景直接镶嵌在文字的轮廓里了。给大家举一个例子，很简单的思路，我们选择一个具有扭曲表面的背景图片，然后将文字放到这个图片上方，应用置换命令，采用多重曝光的手法。我们将这个材质镶嵌到文字里面就完成了，这样就看不到材质了。
那么最后，给大家做一个案例演示，用到的就是扭曲的命令，这是一个活动展览的项目，它的主题叫流动消融。
为了达到宣传的目的，这里寻找一个能够让文案中的概念实体化的载体，就是标题，它的标题很直接了，那么提取主标题作为版面里的视觉元素，让它变得很大，成为本案的主体。然后我们将文字稍微拉长一些，这个拉长是手动拉长的，所以它会出现横粗竖细的现象，这个时候就需要修改了，调整笔画的粗细统一，去掉一些不必要的细节，这样这个主标题就刻画完成了。
然后我们绘制版面的比例关系，这一步的目的就是确定主体在版面里的大小。然后主体的这四个字就放在画面里的上部区域，底部的这个红色区域，我们来安排其它的文字信息。
接下来把其余的文字信息编排到版面的下方，我们所有文字编排好以后，最后一步，为画面添加一个水波纹的细节部分。
采用置换命令让二者结合，然后把水波纹去掉，镶嵌到文字里。
这个版面到这里就完成了，我们来看一下它实际的应用效果。
今天我们一起学习了扭曲技巧在版面里的应用，也知道了这类风格它的五种常用表现技巧，扭曲的这个版面不但可以和其它形状结合，更能为版面带来丰富的形式感，它是我们做主形象非常好用的一个手法。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
之前我们更新过如何做投影的文章：《投影一直做不好？看这篇文章就搞定！》，主要针对的是投影的原理进行讲解，包括如何用图层样式去做投影，怎样用工具绘制投影，这些都是我们了解投影的一个基础。教程发布之后，很多同学留言，表示没看够，希望针对其他投影形式再进行更深入的讲解，那这次我们就来满足大家要求。其实投影的设计不难，只要符合画面的光影逻辑，然后加上制作投影的方法，基本就能搞定很多基础的投影形式，话不多说，我们开始今天的教程。
其实投影在设计中的应用是非常广泛的，比如这些海报，都运用了投影的形式。
在平面设计中，除了合成设计之外，我们在什么情况下会选择用投影？
1. 增加识别性
比如，在颜色比较混乱的背景上添加文字，或者添加图片，为了区分他们之间的主次关系，我们会添加一个投影。
2. 增加空间感和层次感
这两个画面，通过投影与主体的位置关系，产生较强的空间感和层次感。
3. 提升画面格调
反应产品质感的投影形式，会提升画面的格调，这类比较多的是化妆品与品。
4. 增加形式感
如果你的画面缺少创意性，不妨试试这类投影形式，通常来说它们都是用投影作为画面中的主体，以此来传递出很强的形式感与故事性。
5. UI设计
UI 设计中使用投影。
常规型投影包含了普通投影，弧形投影，接触投影，弥散投影。
普通投影
普通投影就是我们最常见的一个投影形式，它可以用图层样式来设置，它的特点就是在图像的四周都会有点阴影的感觉，让画面与背景形成前后景的关系，就像这里的案例。
弧形投影
弧形投影，它的投影是在物体的一侧，像翘起的边缘。
接触投影
接触投影，是物体立面与底面的关系，会有一种三维立体的感觉。
弥散投影
弥散投影，与普通投影的区别在于，它更有深度，也是现如今比较流行的投影形式。
长投影主要分两种，一种是色块投影，一种是在色块的基础上的渐变投影。
比较常用在图标的设计，还有海报的设计。
倒影，这类型阴影应该是比较难处理的了，想必大家在做设计的时候，大多数情况会规避倒影这种形式，除非是拍好的照片自带倒影，不然很少有同学愿意触碰这块。因为它比较考验大家对图形的认知能力，以及对透视基础的掌握，之前我们有讲过一篇关于素描知识的文章，在里面介绍过关于物体的基本结构，我们所看到的任何一个物体都有一个结构或者形状，比如立方体、圆柱体、圆锥体、球体。任何一个物体都可以视为这四种几何形状中的一种或几种的组合。那在倒影当中，这些基本形状同样适用。
首先来看二维的倒影，二维的倒影比较简单了，也都很好做，复制一个下来，加个蒙版做渐变处理就可以了。
三维物体，最基本的就是这几个形状，或者几种形状的组合，掌握几种形状的倒影，就能应付大部分倒影的形式。
立方体为基础型的倒影。
圆柱体为基础型。
圆锥体为基础型。
球体为基础型。
组合型。
悬空投影，这类投影给人很强的空间感，并且大多数情况，投影都会成为画面中的主角。
分为三种类型，二维的悬空投影，2.5D 的悬空投影，三维悬空投影。
二维的悬空投影
先来看看二维悬空投影，是二维的平面悬空，添加一个弥散投影。
2.5D的悬空投影
2.5D 没有消失点，但是会有立体感，在下方添加一个投影，就会有悬空的感觉。
三维悬空投影
三维悬空投影能有很多创意形式。
创意投影，它不会根据物体本身的形态去表现，而是根据文案和设计构思而产生的很有创意的投影形式，这个主要靠大家发散思维的联想了。
最常见的就是电影海报中的投影表现。
一种情况是接近真实的投影，和实际照片是一样的道理，一种情况是类似于创意投影，合成的投影算是这几种投影当中最难的。
合成中的投影要自己创造一个光源，也就是想象出一个光源，根据光源关系，绘制出投影效果。
投影在这里都是很真实的表现。
合成也可以做创意投影，这三张公益海报的主角是动物的影子，但是形成影子的是前面的物体，这是很有创意的表现方式。
制作投影的方法比较多，比如说利用图层样式，用矢量图形做投影，高斯模糊设置投影，手绘投影等，每一种方法都适用不同的投影类型，我们想更有效率的完成工作，就要对这些技法有个较深的了解。下面我就带大家来了解下每种方法。
1. 图层样式
第一个，也是最简单的，用 ps 当中的图层样式来做。
模式一般我们就选择默认正片叠底，这是在正片叠底文章中讲到过，后面的颜色，如果是主体与背景颜色差异比较大的时候，我们可以选择环境色；如果差异不大，我们可以选择主体的相近的颜色，很少有选择纯黑色的投影。
不透明度就是阴影的透明程度，也是很好理解。下面角度，是光线照射的方向。全局光，选择之后，画面中其他元素添加投影，就会默认为一个光源，这样画面中投影会更和谐。
距离，物体和投影之间的距离，数值越大越远。扩展，就是阴影面积的大小。大小，就是阴影的虚化程度。
等高线，可能很多同学不太理解，其实很简单的，我们来看下，纵向，越向上，越实，越向下越虚化。横向，最右侧是投影的中心位置，越向左，离中心越远。根据画面中的等高线，我们来分析下。
这样就好理解了，我们看画面中蓝色圆点的位置，代表中心位置很实，黄色圆点的位置代表远离中心的位置很虚化，最后就得出右侧的投影。
那如果说，我想让投影的周围都变得很实，该怎么调整？
就是把虚的那个点向上调整，这样，就代表外围投影变得相对较实，我们会得到这样一个投影。
如果我想，投影靠近外围的位置，变得比较实，靠近中心的位置，变得比较虚，就可以这样调整。
得到的投影是这样的，我们看到中间白色的区域，就是虚化之后的效果，接近了透明。这个搞懂了，利用图层样式做投影也就基本没什么问题了。
ps 还自带了这么多等高线的样式，大家可以去实验一下。
那什么类型投影，比较适合用图层样式来做？
普通的投影和弥散投影。
画面中人物的投影设置。
2. 矢量图形做投影
画一个矢量图形，之后选择实时形状属性，然后点击蒙版，通过调整羽化值，来调整投影的虚化程度，用这个方法会比较直观的观察到，而且因为是矢量图形，所以还很方便我们随时调整它的形状。
高斯模糊和矢量图形做投影，所适用的投影类型是一样的，同样适用于普通投影，弧形投影，接触投影，弥散投影。
还有悬空投影，它和矢量图形投影的区别就是，矢量图形更方便改颜色和形状，还有虚化程度。
在主体下方加一个小面积的虚化阴影，就会有悬空的感觉。
3. 高斯模糊做投影
添加高斯模糊之前，一定要记得给图层转换为智能对象，因为高斯模糊对图层是有不可逆的破坏性的，所以添加智能对象之后会很方便我们随时去调整它的颜色和模糊程度，动感模糊同理。
高斯模糊做投影，适用的投影类型。
4. 手绘投影
最后一个，用钢笔工具或者画笔工具来绘制投影，这个是比较难的，在投影那篇文章中，我们已经讲过在一个场景中，怎样分析投影的位置，大小，形状，方向，以及如何用钢笔工具去绘制投影，这里我们就不再重复了，如果有不懂的同学，回看之前的文章《投影一直做不好？看这篇文章就搞定！》
那我们来看一下，手绘投影适合什么类型的设计。
第一种就是合成设计，这个要考虑光源的位置，投影的透视，投影的颜色等，一般会采用画笔和钢笔工具的结合。
创意的投影同样适合，因为它和合成投影基本一样，只不过不会根据对象的实际特征去绘制。
倒影适合用钢笔工具和画笔工具来制作，这里就涉及到了透视，我们能看到物体在基面上的倒影，实际上是物体在基面上的投影的倒立映像。
在平时的工作生活中，我们要学会观察，比如积水的路面，反射建筑的倒影是什么样子的，镜子里的自己，或者可以多看看摄影照片，慢慢养成习惯，提高对倒影的敏感度。
做倒影最重要就是两个字──拆分，我们给这个立方体做倒影，首先要思考的是，它的倒影是由哪几个面产生的，找到物体与承影面接触的线，然后把这两个面提取出来，沿着这个线把所在的面拆分出来。
然后向下镜像，根据实际情况再翻转，要注意，倒影的透视和原本物体的透视要一致，也就是平行原本对象的边线。
然后给倒影添加一个蒙版，做一个渐变，就可以了。
用刚才的方法给魔方做一个倒影
同样把与底边接触的面裁剪出来，可以看到透视关系还是不一样的，我们应该让倒影的面和上面的魔方透视一致。
用调整大小里的斜切，调整倒影的透视。
添加蒙版，然后在与地面接触的位置添加一个闭塞阴影就可以了。
再做一个复杂点的，给包做倒影。
同样，找到底面接触面，然后把相应的面裁切出来。这里注意的是，每个面要单独拆分，这样才方便为每个面设置倒影。
把所有拆分的面复制一个出来上下镜像。
调整透视，就用调整大小工具，斜切，合并倒影的图层。
用蒙版渐变，别忘了闭塞阴影。
倒影规律及特点：
好了，前面介绍了每一种投影形式，以及适合的场景。那接下来，我们来看看在同一光源的前提下，不同承影面，也就是投影在不同的材质上是如何表现的吧。
布面材质是软性材质，在光源下会吸收光的反射，所以投影的边缘会相对模糊，不会过于锋利。
案例演示
我们来看下在布面材质上的投影的做法，首先在物品与布面底部绘制一个闭塞阴影：
然后新建图层，根据光源绘制出阴影的长度与形状：
给长投影做高斯模糊，然后用蒙版把边缘处理得柔和一些：
统一光影，把产品修饰一下：
整体调整下色调，就可以了：
镜面是光滑的，所以光照射之后，会形成和物体一样的影像，也就是倒影。
设计之前，先参考下带有镜面倒影的照片。
案例演示
第一步，闭塞阴影：
第二步，拆分图像，拿到下方，调整透视，这是之前我们讲过步骤，这里就不重复了。
调整产品的光影与色调：
加点小装饰，烘托氛围：
最后是整体调整下色调和明暗：
水面和镜面类似，但是水面会存在水波纹，所以在做投影时候要注意投影的形态要与水波纹一致。
参考一些带有水面倒影的照片。
案例演示
依然先画闭塞阴影：
绘制出整个投影形态：
高斯模糊处理，因为是水面，所以阴影和倒影要共存：
下面就是倒影了，方法步骤同样。
那么问题来了，是怎么做到弯曲的效果的？其实就是用 PS 当中的置换来做，这是置换的参数与水面素材。
关于置换的教程我们也发布过，《平面高手课堂！如何用扭曲工具快速强化作品设计感？》
最后统一色调和光影就完成了。
地板有的会打一层蜡，这个时候，就会存在一些倒影，所以在这样的地板上倒影和投影是并存的。
先看一下在不同地板上的投影样貌。
案例演示
这个我们选择大理石材质，首先闭塞阴影：
绘制投影的形态：
给投影高斯模糊，添加蒙版做渐变：
然后，按照光影和环境色，处理产品的明暗和色调：
5. 渐变色/纯色
这也是我们设计中遇到比较多的情况，在纯色或渐变色的背景中，为了让画面具有空间感，我们经常会给物体加投影，这个投影可以是常规投影，也可以是倒影。
案例演示
闭塞阴影：
根据光源绘制投影：
高斯模糊，然后添加蒙版做渐变：
修饰产品的色调和光影：
统一光影色调：
教程到这里就结束啦，估计有的同学会纳闷，为什么我们没有细讲怎样根据光源绘制投影？因为在之前投影文章中已经手把手给大家演示过了，没看过的同学赶紧去补课，可阅读《投影一直做不好？看这篇文章就搞定！》
总结下今天的内容，第一，投影在画面中作用。第二，我们给投影形式做了分类，有常规型，长投影，倒影，悬空投影，合成投影。然后是制作投影的方法，着重介绍了倒影该怎样做，最后是投影在不同材质上的表现。通过关于投影的这两篇教程，相信大家已经能掌握一些原理和技巧了，其实最快速学习投影的方法，就是要学会观察生活中的事物。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
之前我们更新过如何做投影的文章：《投影一直做不好？看这篇文章就搞定！》，主要针对的是投影的原理进行讲解，包括如何用图层样式去做投影，怎样用工具绘制投影，这些都是我们了解投影的一个基础。教程发布之后，很多同学留言，表示没看够，希望针对其他投影形式再进行更深入的讲解，那这次我们就来满足大家要求。其实投影的设计不难，只要符合画面的光影逻辑，然后加上制作投影的方法，基本就能搞定很多基础的投影形式，话不多说，我们开始今天的教程。其实投影在设计中的应用是非常广泛的，比如这些海报，都运用了投影的形式。
在平面设计中，除了合成设计之外，我们在什么情况下会选择用投影？
1. 增加识别性
比如，在颜色比较混乱的背景上添加文字，或者添加图片，为了区分他们之间的主次关系，我们会添加一个投影。
2. 增加空间感和层次感
这两个画面，通过投影与主体的位置关系，产生较强的空间感和层次感。
3. 提升画面格调
反应产品质感的投影形式，会提升画面的格调，这类比较多的是化妆品与品。
4. 增加形式感
如果你的画面缺少创意性，不妨试试这类投影形式，通常来说它们都是用投影作为画面中的主体，以此来传递出很强的形式感与故事性。
5. UI设计
UI 设计中使用投影。
常规型投影包含了普通投影，弧形投影，接触投影，弥散投影。
普通投影
普通投影就是我们最常见的一个投影形式，它可以用图层样式来设置，它的特点就是在图像的四周都会有点阴影的感觉，让画面与背景形成前后景的关系，就像这里的案例。
弧形投影
弧形投影，它的投影是在物体的一侧，像翘起的边缘。
接触投影
接触投影，是物体立面与底面的关系，会有一种三维立体的感觉。
弥散投影
弥散投影，与普通投影的区别在于，它更有深度，也是现如今比较流行的投影形式。
长投影主要分两种，一种是色块投影，一种是在色块的基础上的渐变投影。
比较常用在图标的设计，还有海报的设计。
倒影，这类型阴影应该是比较难处理的了，想必大家在做设计的时候，大多数情况会规避倒影这种形式，除非是拍好的照片自带倒影，不然很少有同学愿意触碰这块。因为它比较考验大家对图形的认知能力，以及对透视基础的掌握，之前我们有讲过一篇关于素描知识的文章，在里面介绍过关于物体的基本结构，我们所看到的任何一个物体都有一个结构或者形状，比如立方体、圆柱体、圆锥体、球体。任何一个物体都可以视为这四种几何形状中的一种或几种的组合。那在倒影当中，这些基本形状同样适用。
首先来看二维的倒影，二维的倒影比较简单了，也都很好做，复制一个下来，加个蒙版做渐变处理就可以了。
三维物体，最基本的就是这几个形状，或者几种形状的组合，掌握几种形状的倒影，就能应付大部分倒影的形式。
立方体为基础型的倒影。
圆柱体为基础型。
圆锥体为基础型。
球体为基础型。
组合型。
悬空投影，这类投影给人很强的空间感，并且大多数情况，投影都会成为画面中的主角。
分为三种类型，二维的悬空投影，2.5D 的悬空投影，三维悬空投影。
二维的悬空投影
先来看看二维悬空投影，是二维的平面悬空，添加一个弥散投影。
2.5D的悬空投影
2.5D 没有消失点，但是会有立体感，在下方添加一个投影，就会有悬空的感觉。
三维悬空投影
三维悬空投影能有很多创意形式。
创意投影，它不会根据物体本身的形态去表现，而是根据文案和设计构思而产生的很有创意的投影形式，这个主要靠大家发散思维的联想了。
最常见的就是电影海报中的投影表现。
一种情况是接近真实的投影，和实际照片是一样的道理，一种情况是类似于创意投影，合成的投影算是这几种投影当中最难的。
合成中的投影要自己创造一个光源，也就是想象出一个光源，根据光源关系，绘制出投影效果。
投影在这里都是很真实的表现。
合成也可以做创意投影，这三张公益海报的主角是动物的影子，但是形成影子的是前面的物体，这是很有创意的表现方式。
制作投影的方法比较多，比如说利用图层样式，用矢量图形做投影，高斯模糊设置投影，手绘投影等，每一种方法都适用不同的投影类型，我们想更有效率的完成工作，就要对这些技法有个较深的了解。下面我就带大家来了解下每种方法。
1. 图层样式
第一个，也是最简单的，用 ps 当中的图层样式来做。
模式一般我们就选择默认正片叠底，这是在正片叠底文章中讲到过，后面的颜色，如果是主体与背景颜色差异比较大的时候，我们可以选择环境色；如果差异不大，我们可以选择主体的相近的颜色，很少有选择纯黑色的投影。
不透明度就是阴影的透明程度，也是很好理解。下面角度，是光线照射的方向。全局光，选择之后，画面中其他元素添加投影，就会默认为一个光源，这样画面中投影会更和谐。
距离，物体和投影之间的距离，数值越大越远。扩展，就是阴影面积的大小。大小，就是阴影的虚化程度。
等高线，可能很多同学不太理解，其实很简单的，我们来看下，纵向，越向上，越实，越向下越虚化。横向，最右侧是投影的中心位置，越向左，离中心越远。根据画面中的等高线，我们来分析下。
这样就好理解了，我们看画面中蓝色圆点的位置，代表中心位置很实，黄色圆点的位置代表远离中心的位置很虚化，最后就得出右侧的投影。
那如果说，我想让投影的周围都变得很实，该怎么调整？
就是把虚的那个点向上调整，这样，就代表外围投影变得相对较实，我们会得到这样一个投影。
如果我想，投影靠近外围的位置，变得比较实，靠近中心的位置，变得比较虚，就可以这样调整。
得到的投影是这样的，我们看到中间白色的区域，就是虚化之后的效果，接近了透明。这个搞懂了，利用图层样式做投影也就基本没什么问题了。
ps 还自带了这么多等高线的样式，大家可以去实验一下。
那什么类型投影，比较适合用图层样式来做？
普通的投影和弥散投影。
画面中人物的投影设置。
2. 矢量图形做投影
画一个矢量图形，之后选择实时形状属性，然后点击蒙版，通过调整羽化值，来调整投影的虚化程度，用这个方法会比较直观的观察到，而且因为是矢量图形，所以还很方便我们随时调整它的形状。
高斯模糊和矢量图形做投影，所适用的投影类型是一样的，同样适用于普通投影，弧形投影，接触投影，弥散投影。
还有悬空投影，它和矢量图形投影的区别就是，矢量图形更方便改颜色和形状，还有虚化程度。
在主体下方加一个小面积的虚化阴影，就会有悬空的感觉。
3. 高斯模糊做投影
添加高斯模糊之前，一定要记得给图层转换为智能对象，因为高斯模糊对图层是有不可逆的破坏性的，所以添加智能对象之后会很方便我们随时去调整它的颜色和模糊程度，动感模糊同理。
高斯模糊做投影，适用的投影类型。
4. 手绘投影
最后一个，用钢笔工具或者画笔工具来绘制投影，这个是比较难的，在投影那篇文章中，我们已经讲过在一个场景中，怎样分析投影的位置，大小，形状，方向，以及如何用钢笔工具去绘制投影，这里我们就不再重复了，如果有不懂的同学，回看之前的文章《投影一直做不好？看这篇文章就搞定！》
那我们来看一下，手绘投影适合什么类型的设计。
第一种就是合成设计，这个要考虑光源的位置，投影的透视，投影的颜色等，一般会采用画笔和钢笔工具的结合。
创意的投影同样适合，因为它和合成投影基本一样，只不过不会根据对象的实际特征去绘制。
倒影适合用钢笔工具和画笔工具来制作，这里就涉及到了透视，我们能看到物体在基面上的倒影，实际上是物体在基面上的投影的倒立映像。
在平时的工作生活中，我们要学会观察，比如积水的路面，反射建筑的倒影是什么样子的，镜子里的自己，或者可以多看看摄影照片，慢慢养成习惯，提高对倒影的敏感度。
做倒影最重要就是两个字──拆分，我们给这个立方体做倒影，首先要思考的是，它的倒影是由哪几个面产生的，找到物体与承影面接触的线，然后把这两个面提取出来，沿着这个线把所在的面拆分出来。
然后向下镜像，根据实际情况再翻转，要注意，倒影的透视和原本物体的透视要一致，也就是平行原本对象的边线。
然后给倒影添加一个蒙版，做一个渐变，就可以了。
用刚才的方法给魔方做一个倒影
同样把与底边接触的面裁剪出来，可以看到透视关系还是不一样的，我们应该让倒影的面和上面的魔方透视一致。
用调整大小里的斜切，调整倒影的透视。
添加蒙版，然后在与地面接触的位置添加一个闭塞阴影就可以了。
再做一个复杂点的，给包做倒影。
同样，找到底面接触面，然后把相应的面裁切出来。这里注意的是，每个面要单独拆分，这样才方便为每个面设置倒影。
把所有拆分的面复制一个出来上下镜像。
调整透视，就用调整大小工具，斜切，合并倒影的图层。
用蒙版渐变，别忘了闭塞阴影。
倒影规律及特点：
好了，前面介绍了每一种投影形式，以及适合的场景。那接下来，我们来看看在同一光源的前提下，不同承影面，也就是投影在不同的材质上是如何表现的吧。
布面材质是软性材质，在光源下会吸收光的反射，所以投影的边缘会相对模糊，不会过于锋利。
案例演示
我们来看下在布面材质上的投影的做法，首先在物品与布面底部绘制一个闭塞阴影：
然后新建图层，根据光源绘制出阴影的长度与形状：
给长投影做高斯模糊，然后用蒙版把边缘处理得柔和一些：
统一光影，把产品修饰一下：
整体调整下色调，就可以了：
镜面是光滑的，所以光照射之后，会形成和物体一样的影像，也就是倒影。
设计之前，先参考下带有镜面倒影的照片。
案例演示
第一步，闭塞阴影：
第二步，拆分图像，拿到下方，调整透视，这是之前我们讲过步骤，这里就不重复了。
调整产品的光影与色调：
加点小装饰，烘托氛围：
最后是整体调整下色调和明暗：
水面和镜面类似，但是水面会存在水波纹，所以在做投影时候要注意投影的形态要与水波纹一致。
参考一些带有水面倒影的照片。
案例演示
依然先画闭塞阴影：
绘制出整个投影形态：
高斯模糊处理，因为是水面，所以阴影和倒影要共存：
下面就是倒影了，方法步骤同样。
那么问题来了，是怎么做到弯曲的效果的？其实就是用 PS 当中的置换来做，这是置换的参数与水面素材。
关于置换的教程我们也发布过，《平面高手课堂！如何用扭曲工具快速强化作品设计感？》
最后统一色调和光影就完成了。
地板有的会打一层蜡，这个时候，就会存在一些倒影，所以在这样的地板上倒影和投影是并存的。
先看一下在不同地板上的投影样貌。
案例演示
这个我们选择大理石材质，首先闭塞阴影：
绘制投影的形态：
给投影高斯模糊，添加蒙版做渐变：
然后，按照光影和环境色，处理产品的明暗和色调：
5. 渐变色/纯色
这也是我们设计中遇到比较多的情况，在纯色或渐变色的背景中，为了让画面具有空间感，我们经常会给物体加投影，这个投影可以是常规投影，也可以是倒影。
案例演示
闭塞阴影：
根据光源绘制投影：
高斯模糊，然后添加蒙版做渐变：
修饰产品的色调和光影：
统一光影色调：
教程到这里就结束啦，估计有的同学会纳闷，为什么我们没有细讲怎样根据光源绘制投影？因为在之前投影文章中已经手把手给大家演示过了，没看过的同学赶紧去补课，可阅读《投影一直做不好？看这篇文章就搞定！》
总结下今天的内容，第一，投影在画面中作用。第二，我们给投影形式做了分类，有常规型，长投影，倒影，悬空投影，合成投影。然后是制作投影的方法，着重介绍了倒影该怎样做，最后是投影在不同材质上的表现。通过关于投影的这两篇教程，相信大家已经能掌握一些原理和技巧了，其实最快速学习投影的方法，就是要学会观察生活中的事物。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
不知大家有没有和我一样的疑惑：日常产品的信息引导到底该如何设计？可能有人第一时间会想到浮层、动效、弹窗等等，但这些都只是表层样式而已。背后的引导机制该怎么入手？有没有一个系统性的了解？需要注意些什么？
所以，今天就想聊聊这方面的看法，下面是我对信息引导的理解所提炼、搭建的一个「PST」框架：Performance-表现、Strategy-策略、Target-目标。
目标层：信息不会平白无故去引导用户，都是为了某个确定的目标而展示的。如在首页弹窗展示是为了进行新手教育，以达到让用户使用新功能，进入新页面等运营指标或增长指标。
策略层：目标确定了，需要确定可做信息引导的各种场景和机制。如设置某时间进行信息推送，用户网络不行的情况下怎么解决？
表现层：不同的场景中有各种表现形式，如下拉菜单、弹窗、浮层、视频等等。
这 3 层环环相扣，互相影响。因为每个产品的目标各不相同，所以这篇就先对信息引导的「策略层」进行分析，下篇再讲下引导的形式和适用场景。
可能每个人会有自己的分法和定义，我就按照自己的理解概括一下信息引导的基本类型。
1. 新功能引导
向用户展示产品的新功能/页面，对产品的新功能有一个大致的了解，多用于用户首次进入/使用功能的引导，如：各种新手遮罩引导、产品介绍。
2. 指标引导
以提高产品的业务目标/增长目标为导向，按照一定的规律引导用户使用某功能，如：产品的信息 push 和广告。
3. 结果引导
在用户已结束的操作行为、结果页面上，引导商户使用相似功能或内容模块，促进产品的连续消费。
比如：淘宝在订单支付成功后，都会进行店铺、红包、优惠券、相关宝贝的推荐，保证消费者还处于「购物链」上。
4. 异常引导
针对用户可能会犯错的行为进行提示、警告，是一种前置的容错机制。如支付宝，用户在向「异常好友」转账时，以轮播的方式进行信息提示，避免用户转错账。
抛去业务目标和引导样式的局限，信息的引导可以从几个方面切入和思考：产品架构、用户行为、时间、阶段/过程。
像很多同学做信息引导时，一上来就想着浮层、弹窗、动效等各种表现形式，而忽视了最简单、最底层的引导方式：利用产品的架构布局去引导。
这种方式是通过架构布局，来体现内容间的差别与关系，突显出核心内容模块，强调的是「视觉重量」，如：各模块间的面积大小、色彩强弱。像淘宝首页有各种功能入口，通过架构上的布局来进行功能分类和引导。
如何利用架构布局进行信息引导呢？
2 个点可以参考：重组和单拎。
重组：将同一层级、相关联的信息组成一个内容模块，从而使信息更聚焦、减少视觉干扰。
如腾讯动漫的个人中心页面，在老版本中头部信息较为分散、无关联，信息的引导性很差。而在新版本中，则通过「重组」把信息关联在一起，页面更聚焦清晰、引导性更强。
单拎：一种与「重组」相反的引导思路，将信息分解成各个独立的模块进行展示，让信息得到更多的展示。
很多「入口化」的功能，都适用该思路进行信息引导，如：手机淘宝的个人中心，有些功能原本可以和其他模块一样做成入口化的，但出于产品目标、用户诉求等维度的考虑，将部分内容「单拎」出来进行展示效果更好。
按时间维度去发散的话，则可以分成「用户行为时间」和「网络实时时间」引导。
用户行为时间
根据用户操作的行为时间进行信息引导。如爱奇艺，用户在观看了 30 分钟视频后，会弹出积分领取提示。
这种引导需要注意的是：产品的时间机制。
如爱奇艺的「观看满30分钟」：是观看单个视频时长，还是一天里的总视频时长积累？离线观看视频（有流量联网）时是否也计入时长等等？这些机制都需要在前期，根据产品的平台特性、业务目标、用户习惯等维度去设置好。
网络实时时间
根据当前网络时间进行引导。如百度地图，会在 17 点快接近高峰期时，向用户弹出路况提示。
这类场景的引导，更注重于：产品的推送机制。
如设置了某个时间点推送内容，若用户没网络或者网络较差时，是晚点再推送，还是推送提前预设置好的「静态」内容？这些都是需要考虑的点。
根据特定的维度，将信息/功能分解成 N 个独立且关联的阶段。分阶段的维度可以是时间、日期、金钱、物品等等。
很多运营活动就会把奖励分成不同的阶段进行发放，如图：
这种引导方式的优势是：可以将全部的信息分解到各个阶段中去，页面的拓展性强，用户理解和操作成本低。劣势在于：周期较长，用户缺乏足够的动力。
因此，很多产品都会把最大奖励、最好的结果放在最后阶段，加上利用消费者的「目标趋近效应」──人们在距离目标越近时，越有动力去完成它，一步步地引导用户消费。
根据用户的当前操作进行引导，如观看视频时，点击屏幕会暂停播放且会弹出广告信息；长按内容列表时，会出现多选、排序、删除等操作。
而根据「用户行为」做引导，需要注意 2 点：引导的返回策略和落地方式。
返回策略
结合用户场景与产品特性，看信息引导后是否需要制定返回策略，相当于一种「逆向引导」。而返回的策略不仅体现在「机制」上，还可以体现在「视觉样式」上。
机制：如爱奇艺在观看视频时最小化产品、跳转到新的页面后，返回观看视频时会自动后退几秒进度，以保证用户的观看记忆不会出错。
样式：如淘宝在支付订单后，会有两种返回形式。一是左上角的「返回」icon，返回到购物车页面；二是中间比较明显的「返回首页」按钮，返回至淘宝首页。
而对于产品来说，「返回首页」的优先级显然更高一点：既可以让用户形成消费闭环，又能浏览、搜索更多的商品，提升产品的 UV、PV、复购率等业务和增长指标。所以，才会把「返回首页」按钮的样式，做得比「返回」icon 重一些。
引导的落地方式
引导的落地方式就是信息引导后，用户跳转到哪里？一种是跳转至新的页面进行落地，页面空间大、可控性强；另一种是停留在当前页面展示，减少用户的操作成本。
如优酷在观看视频时，可以在当前页面进行奖品的引导和获取。
至于最终采用哪种落地方式，则根据产品目标、用户场景、页面形态等特征去抉择。
以上就是个人对信息引导「策略层」的一些心得和看法。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
情感化在我们的决策过程中起着至关重要的作用。一秒钟的情感交互可以改变人对产品的整体体验
人类是一种情绪驱动的物种;我们选择某些产品并不是因为它们有意义，而是我们认为它们会给我们带来什么样的感受。未来的界面将在产品设计的基础上使用情感化的概念。人们使用的经验将基于智商（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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
