1. 如何系统地了解信息架构？
   

良好的用户体验需要所有信息都符合逻辑且触手可及。以下是一份完整的信息架构指南，它可以避免你的用户迷失在错综复杂的网站信息中。


当我们使用任何网站或移动应用时，都会面对向我们提供所需信息的界面。这是大家都习以为常的，大多数用户甚至没有注意到网站的所有内容都经过精心组织。


内容的组织和划分被称为信息架构，它是用户体验设计的一个重要部分。如果内容没有经过适当整理，大多数用户在浏览网站或app时容易迷失方向，使得产品的真实价值被掩盖。毕竟，即使再棒的功能也需要用户去发现。


为确保你的内容结构合理并能以最佳方式呈现给用户，好好看看我们为你准备的这份信息架构指南吧。


1、什么是信息架构？
信息架构可能难以定义。
部分原因是，内容写作等其他学科可被缩小到特定职业，比如作家，而信息架构的范畴却涵盖了多项职业。的确，参与产品开发的每个人都会多少用到信息架构。

大多数网站和app都要将内容分成多个部分让用户快速理解，同时要被合理组织以便用户发现产品的所有功能。当这项工作进行的非常顺利时，用户永远不会停下来思考网站如何为他们组织信息。


Google Drive或Medium等网站就是这样，设计者必须仔细考虑如何向用户呈现信息。否则，功能就会有被淹没在随意布局的按钮和链接中的风险，用户既难以关注也不会喜欢。


在其他案例中，你可以看到信息架构的作用极其显著，同时也很难做好。


2、信息架构与UX相同吗？
不相同。
两者之间有很强的联系，尽管UX涉及大量的信息架构工作，但两者并不完全相同。


用户体验涉及范围更广，包括了信息架构不会触及的几个方面，例如要确保界面令人愉快、响应用户的某些心理需求。相比之下，信息架构则更侧重用户目标和为此付出的认知力。


以下是这两个概念的紧密联系：没有良好的信息架构，就没有合理有效的用户体验。它是界面开发的基础，为我们所知所爱的用户体验设计其他方面打开大门。


然而在此，我们应该做一个小小的区分。
信息架构是建立用户体验的坚实基础，但并不代表整个项目工作。
一旦你知道如何为用户建立良好的信息架构，你需要为用户体验添加闪光点并进行其他工作，例如融合信息架构的交互设计，这样才能创造让人惊叹的用户体验。


3、一个巧妙的信息架构类比
信息架构使你的产品可用，这在电子游戏中更为明显。
电子游戏拥有自己规则和历史，是一个全新的世界。这意味着如果用户希望在游戏中进行下去，就需要向他们呈现关于这个世界的大量信息。


但你会注意到，所有这些信息不是一次性呈现的，而是随着游戏进展，一点一点呈现。
首先，你会看到场景设置介绍，通常讲述主角和一点背景故事。在此出发，新信息将以易于消化的形式呈现，从而使玩家可以慢慢探索这个世界。


在达到特定等级或完成特定动作时，那些小的对话框、内容框向用户提供的新信息，都是游戏中最好的信息架构。但是我们如何决定从开始该告诉用户什么内容呢？我们如何提供适量信息满足用户的好奇心，而非过量信息使用户感到疑惑？

图 1 刺客信条：奥德赛。摘自福布斯
4、信息架构的元素
正如大部分设计的辅件，信息架构有很多组件帮助你将这些结构应用于产品。
这些组件是由信息架构先驱罗森菲尔德和莫维尔在他们的开创性著作《Web信息架构》中建立的，如果你想深入了解信息架构，推荐阅读这本书。这些组件组成的系统，用不同方式组织内容、让内容被用户发现。


4.1 组织系统/结构
组织结构让你的内容具有意义、易于理解，即标记不同信息之间的联系并尝试构建框架，帮助用户了解产品所有信息之间的联系。
构建框架后，由于所有的内容分布都具有逻辑，用户就更容易预见某些信息的位置，这也是可用性测试的一个经典部分。在《Web信息架构》中，列出了信息架构的三种不同框架。


1）层级结构

也称为树形结构，这意味着使用滴漏效应，将广泛的分类放在顶部，更具体、更小的子类别放在下方，让用户进行导航。这种视觉层级将相关信息呈阶梯状显示，很好地传达了不同信息的重要性。


2） 顺序结构

这种形式的信息架构通过组织信息为用户创建特定浏览路径。用户需一步步操作，并仅接收当前呈现给他们的信息。这样可以避免给用户提供太多选择，从而避免因自由选择而导致的沮丧和信息过量。


3）矩阵结构

这与顺序结构有些相反。顺序结构通过一系列指定步骤带领用户，而矩阵结构则让用户自行选择他们喜欢的导航方式，允许用户以链接和按钮的形式访问所有信息并让他们决定访问内容。


可以说矩阵结构通过给用户所有可能的方向和功能，让用户在使用产品时创造自己的使用路径。


4.2 标签系统
标签系统是用单个词汇传达大量信息的一种方式。它可以帮助用户通过概念来查找内容，而不是浏览整个产品来寻找想要的信息，这也是为何使用标签系统的原因。


想想一个普通的商业网站，当你寻找业务联系方式时，可能想找一套不同的信息：电话号码、邮箱地址、办公地址……而所有这些信息，都可以在网站界面的同一个标签下找到——联系页。


4.3 导航系统
从信息架构的角度，导航系统并不意味着设计好的界面，更多则是关于用户如何在内容和信息中移动。
重要的是要随时记住，信息架构只是帮助用户导航信息以达成目标的方法。


某种程度上，导航系统应与内容相反。只要用户觉得有用愉快，你会想要丰富、复杂的内容；而你的导航系统则应该尽可能简单明了，同时依然能让用户获得任何想要的信息。这时，一个重要的概念就发挥了作用：元数据。


元数据是信息的信息，它在信息架构中起着重要作用。
可能听起来过于技术，但元数据是导航系统中的关键组成部分。用户在产品中进行导航，寻找特定的目标，但他们是否知道要寻找什么？是否知道所寻找东西的正确用语？


即使你的用户知道产品中所有信息的名称，仅仅以A-Z列表形式提供所有信息，并不能提供出色的用户体验，因此我们并不建议这样做。出色的用户体验，需要对内容进行汇总和分类，这样才能让导航系统成为带领用户前往任何位置的道路。


导航系统可以以列表和菜单的形式呈现出内容的类别，但要警惕：不要将成千上万的类别抛给用户，这样会导致信息超载。我们建议你创建不同的分类，然后按绝对重要性进行排序，放弃不重要的分类，因为它们只会使用户晕头转向。


你可以通过阅读Smashing Magazine上Karafilis发表的内容找到更多关于创建好导航系统的信息。

图 2 亚马逊网站
4.4 搜索系统
如你所期望，当产品中包含大量数据时，搜索系统会派上用场。如同你的标签系统，搜索系统有几个不同的方面需要考虑，你可能不会立即想到。


以一个普通的电商零售网站举例。
当你创建网站时，第一反应可能是创建一个可以查找所有信息的搜索栏，但你必须抵制这种冲动。逻辑使然，每当用户使用搜索框时，他们只会查找一种类型的数据：商品。它们不是在开放时间或数据隐私政策之后，它们在搜索栏中的索引是随机的。在这种情况下，产品是被当成搜索区对待，确保搜索栏仅向用户显示某种类型的内容即可。


而你需要在搜索系统中考虑的另一个问题是，点击搜索后信息要如何呈现？


5、信息架构的八原则
这八条基本原则可以作为任何想为产品赋予意义的UX设计师的行动指南。 最初由EightShape的创始人丹·布朗构想，这些原则将信息架构看成结构设计的实践，以下是关于如何实践的指南。


5.1 物体原则
这项原则关于你如何看待自己的内容。布朗说，不要把内容视为僵硬、无生命的东西。它像物体一样，要尝试将它当成拥有自己的生命周期、行为和特征的生命体对待。


这条原则之所以与信息架构相关，在于它可以让你根据需要灵活处理内容。如果你将内容视为自身存在的个体，便可以更轻松地看到内容与其他信息之间的可能关系、发现向用户呈现此内容的不同方式。


这个原则的特点之一在于它将内容的生命周期嵌入到结构中，考虑到内容从逐渐增长到稳定的不同时代——这在内容适时变化而更受欢迎后发生的格外频繁。


布朗给我们提供了一个食谱网站的例子，食谱之间可以作为互补而互相关联，或者在某些时节关联性更强（比如感恩节时与火鸡有关的食谱）。


5.2 选择原则
布朗提到施瓦茨的心理学史诗级作品《选择的悖论》 ，告诉我们人类有一种错觉，即他们想要尽可能多的选择。而大多数用户体验设计师都知道这并非真相，这也是施瓦茨和布朗所认同的。给用户过多选择的真相是：人们的可能选项越多，就需要付出越多的认知努力来做出选择。这甚至能引发焦虑。

图 3，Habitout漂亮的极简主义首页

布朗用企业内部网站举例，大公司习惯于展示大量信息，却通常忽略了内容的分类和信息架构。结果则是用户浪费了大量时间来寻找他们实际想要的那一小部分数据，或干脆放弃使用网站。


听起来不像你想要的产品是吗？这正是信息架构所要避免的。


建议你缩短列表，尤其是在较高层级。这也是你在为内容设计矩阵结构时，需要牢记的一点：用户在停止轻松并开始积极努力的使用产品之前，只能在一定数量的选项中做出选择。


5.3 渐进式信息披露原则
该原则讲述人们只能以某种方式处理新信息的事实，意思是人们不能很好地处理预期之外以及不想要的信息——这个概念被称为渐进式披露。


这意味着在信息架构中，你需要组织数据，以便人们不仅能够以正常速率吸收信息，而且还可以在呈现之前预测更多信息。在用户体验设计中，这意味着，你放在任何类型的列表或表格中连接详细内容的入口信息，都需要好好考虑让它们简洁。


让我们回到布朗的食谱网站案例。你不能指望在用户浏览的所有页面上显示完整食谱，但是要如何在列出食谱时决定显示什么呢？菜肴的类型是一个很好的指标，但它不能让用户清楚地了解在食谱中可以看到什么。你的设计应该选择足够的信息来帮助用户决定是否要点击某个食谱。


5.4 范例原则
这个原则是关于人类如何对事物进行分类的心理学。最终，我们能够通过创建一个范例列表来对概念进行分类，这些范例可以帮助我们将不同概念组合在一起，无论此分类背后的标准是什么。
在将此应用到你的信息架构时，请考虑在应用程序或网站上显示分类的方式。每个分类都需要一个包含该分类内容的范例，你可以使用最大、最常用的子分类。这样，子类别可以作为大多数用户的快捷方式，并且可以帮助用户理解每个顶级分类。


5.5 前门原则
布朗说，设计师认为用户会通过首页之外的页面访问网站是一种明智的看法。认为网站有多个可访问的入口，可能会对PC网页设计产生不小的影响，而对移动app设计的影响则较小。布朗对此提出信息架构的两个主要建议：


一、永远告诉用户他们在哪里。
你的网站拥有很多页面，访问者可以访问其中的任何页面。因此，在用户可以看到的地方显示站点地图非常重要。因此，如果你刚从Google链接打开一个博客网页，应该能看到博客文章的类别和其他类似内容。让新用户在大框架中理解逻辑非常重要，而不是像在广袤湖泊中填充少量内容，以随机的方式呈现。


二、首页不应该包括网站的所有内容。
过长的首页与好的首页区别很简单：好的首页应该让用户清楚地了解你的目的、以及整个网站上可以找到的东西，而不应该尝试向用户显示所有可能、详细的信息。在信息架构方面，首页不应该成为通往网站所有角落的快捷方式，而应该展示网站内容的概况。

5.6 多重分类原则
即使在一小群相似人群中，你仍然会发现人们有不同的信息寻找方式。有些人会输入正在寻找的主题泛称（例如沙滩装），其他人则会自然地输入他们想要的具体类型（例如比基尼）。


这对设计和信息架构很重要，你需要在搜索系统中考虑到这一点。但也需要小心对待，因为它总是伴随如下事实的出现：呈现给用户寻找信息的方式越多，他们越可能变得分心或不堪重负。


5.7 聚焦导航原则
布朗声明，导航不应该只是简单的包含网站中的所有内容。许多设计团队在网站上随意添加导航菜单，使得菜单本身看起来缺乏逻辑。然而信息架构本就是用户体验中逻辑的体现。


相反，布朗建议你为菜单制定策略，在可能的情况下为不同类型的信息提供不同菜单。例如，一个用于博客主题的菜单和一个市场营销的菜单（列出公司提供的服务）。


这能改善网站的可用性，即便删除了直接进入联系页的按钮。请记住，信息架构是按照正确类别给事物分类，让用户确切知道他们在哪以及在何处找到所需信息，而不是将每条信息连接到主页。


5.8 增长原则
对于这项规则，任何需要处理内容的人都应该牢记：产品中的内容量可能会随时间的推移而增长。这是相当合乎逻辑的，在互联网上放置内容变得越来越便宜。总的来说，电子内容每年呈指数级增长，你的内容应该遵循相同的节奏。
但是，在设计中反应出内容增长并不容易。之所以如此困难，是因为即使你知道会有更多的内容，也不可能知道会有多少内容。如何为尚不存在的内容设计信息架构是件困难的事。同样，产品也可以在不同方向上增长。是要增加新类别还是现有类别的新内容也会难以判断。


遗憾的是，布朗发现当内容增长时，并没有简单的建议或明确的方法来避免麻烦。我们所能做的最好方式就是设计能够接受新形式内容的页面，为将来可能的内容扩展做好准备。换句话说，即使你现在不使用视频内容，也要创建接受视频的页面。信息架构的结构应该具备的另一个技巧是，如果你需要在将来添加新的子类别，则应使顶级类别尽可能宽泛。
6、结论
如果你希望用户足够了解你的产品并能愉悦使用，那么信息架构至关重要。你所希望创建的结构，不仅要让用户理解、更要能进行预测，这样他们才不会兜着圈子寻找信息，轻松地便能掌握产品的使用方法。


请记住，好的信息架构和好的用户体验设计是相辅相成的：即向读者提供博客文章，或帮助新玩家在游戏世界中快速适应。请注意细节，不要用超出用户处理能力的信息轰炸他们。


使用你的产品应该感觉自然，而不是像跑马拉松一样疲惫或像在房间里四处搜寻两天没见的手机充电器一样迷茫。利用一切机会在用户测试中检验你的信息架构，确保人们不会对信息呈现的方式感到困惑沮丧。


当拥有大量信息时，很难以好的方式呈现所有信息，但我们总能找到呈现与理解信息的方法，你应该用正确的计划将这项工作反映到设计工作中，所以不要慌！


只需放轻松并回归一切的根源：每个时间点用户的目标是什么？如何以最简单的方式帮助用户实现目标？这才是信息架构中最重要的问题。

作者：Z9084488
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。 

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 

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

1｜从《无界面交互》开始

最近又翻了翻《无界面交互》这本书，不过与上次阅读却有了些不一样的反思与收获，这本书很多人应该都看过，起初看是因为以为里面有何新颖前瞻的交互方式与教程指南，不过之后却发现是紧扣副标题“潜移默化的UX设计方略”，尽管对标题和内容的匹配产生了失望，但还是被作者幽默风趣的写作风格与独到的思考方式所吸引了。
这本书并没有讲述很多的交互观点，也没有展开说如何进行零界面的交互实践技巧，反倒是通过幽默风趣的表达阐述早期硅谷以应用软件为中心的需求解决现象，并且使得各种需求总是以软件->以手机->以屏幕->以界面来进行交互，而这些软件的快速发展也加剧了人们与手机屏幕的依赖性，以至于我们的身体也出现了一系列不良变化，尽管我们正在适应和习惯这些不良性，例如近视人口的比例与年龄层下降，而好的UX设计不该是基于界面的，所以UX≠UI，应该是基于更加自然智能自动的服务或交互方式，作者认为最好的界面就是没有界面，我们面对未来的创新技术发展，应该试图摆脱对屏幕的依赖性，并且为此作者列举了多个例子来佐证，后文我会简单的介绍一些书中的例子，所以你不用因为好奇而马上跳离这个文章去搜索了。并且为此现象作者提出了三个原则；

一、贴合日常生活流畅，而不是一味依靠屏幕；大意是贴合日常生活中的一般工作流程，避免与手机与屏幕有过多非必要的绑定，使得避免沉迷用户界面或者说手机。

二、做电脑的主人，而非仆人：科技的飞速发展还是不能很好的让电脑智能化，时不时还是会出错，例如蓝屏闪退等，各种条条框框的限制等，如密码限制。我们健忘、脆弱、繁忙，计算机应该更加智能的解决问题。

三、适应个体情况：大意是每个用户都是特别的，可以提供定制化的服务，不在只关心平均数据或盈利趋势，而且未来的计算应该更加主动，而不是被动的等待用户来图形界面操作。

大体上内容差不多就这些了吧，作者想以潜移默化的方式来引导UX思维方式，前面部分铺垫了不少生活现象，以让我们意识到感受到手机屏幕的负面影响，以及这种基于应用软件来解决需求的惯性思维的局限，当然啦，一方面有文化差异，另一方面设计行业发展日新月异，现在的优秀设计师也不会完全聚焦在用户界面上了吧，就像书中的结束语，也许未来的某天再次翻开时，已经觉得这本书无聊透顶，观点已经过时，就像我们现在已经深知UX不是UI，也因此难免会被部分读者所吐槽。

那么回到此时此刻，虽然不知道你是否有了新的思考或收获，我来聊聊我的一些思考吧。

2｜怎么看待零界面交互

我们通过感知与身边的事物发生着互动，而看见的信息往往是最丰富的最具体的，这也意味着屏幕或界面的概念会长存，即使全息影像技术随处可见，所以我们要意识到零界面交互是一种交互方式，一种交互理念，而不是说以后没有界面交互了，而且对于交互方式，基于语言系统的语音交互、脑电波控制交互、物理实体的人机交互等等，不就是没有界面的交互吗？对于零界面交互我认为有点儿奥卡姆剃刀原理的意思，能在其基础上找到更好的办法就不要复杂化，如无必要，勿增实体，并且合乎情理。智能的交互方式绝对不是多几块可交互的屏幕而已。

3｜UX最本质的能力

零界面交互后，作为一名UX设计者，如果不在互联网行业里了，不搞应用软件了，也无需在用户界面上花心思了，那你还能做些什么？是否就要考虑转行送外卖摆小摊呢？
当我想到这个问题的时候确实迟疑了，想到自己擅长或能够胜任的，且符合以上要求的话，可能就需要转型做技术咨询服务、视觉设计或是产品经理之类的，但之后我想了想又感觉不大对，为什么不能是UX设计师呢？我也与其他好友相续的探讨了下，UX设计最本质的竞争力不该是线框图、界面交互或是视觉呈现，尽管在应用软件中，是重要的环节，但！最本质的能力不应该是解决问题的能力与方法吗？
在得出这一结论前，我们会惯性的结合平时的工作内容与输出结果来匹配其他职能，结果反而忘了UX最本质的能力是什么，探讨时UXRen的宝珠用一个词描述道“模糊边界”，我瞬间清醒，可不就是吗？

如此看来，我们应该庆幸UX工作使得我们获取了宝贵的问题解决能力与方法，正是因为有了这些东西，即使不做互联网了，也还是能成为UX设计师，就像书中所提倡的那样，不基于屏幕的思考，反而使得UX设计更加强大了。

4｜诸多的案例有何启示

案例其一

早期福特汽车公司的Escape设计组想要创造出在自己独具特色的SUV，他们观察到现实中的人们拎着或抱着重的东西走向后备箱时，并腾不出手来，只有脚可以动，并且可能因为东西太重并不想弯腰放下后，打开后备箱再弯腰抱起重的东西放进后备箱，即使通过应用软件，也要掏出手机，点一点再放回去，重新弯腰搬起重物，显然应用软件并不好使了。因此脚踢或横扫式的后备箱开启方式诞生了，他们在后备箱下的保险杠底部安装了一组传感器，只需要你踢一脚或拿脚扫一下，后备箱就开了，对于那些提着重物走向后备箱的人，很容易做到，也很符合后备箱的使用场景。

案例其二

夏天里，停在室外水泥地上的汽车经过一段时间后，太阳的炙烤会让车的内饰变得滚烫。NBC报道称：“在美国，平均每年有超过36名儿童因车内温度过高而死亡。”

而在这个背景下，日产聆风轿车推广了一款能让你车内温度变凉的手机软件，只需提前15分钟在手机应用上远程打开空调就可以，当你回到车内时就是凉爽的，但回到复杂的现实环境，当你投入的看电影、投入的聚餐时，你不一定还记得用手机远程打开空调这回事儿，回到车里时也许还是热气烘烘的。让我们回到一个互联网跟屏幕还不够普及的年代，1991年，面对同样的问题，当时线上技术还很稚嫩，马自达汽车公司提供了一个更加自动化的可选功能，车顶配备太阳能供电，车内使用温度传感器监测，一旦温度超过一定阈值，传感器就会触发散热降温，很巧妙，很自然，尽管还不能克服极端的高温，时间快进到2009年，丰田汽车借鉴了马自达汽车这一经验，制造出了更好的制冷系统，这一功能很受欢，时至今日这个系统仍然可用。

案例其三

橄榄球运动在美国很受欢迎，但也很危险，至少我看来是硬核运动，这种运动时常发生的撞击会导致运动员患上慢性创伤性脑部病变，会引起记忆力减退、思维混乱、判断力减弱、冲击控制障碍、攻击性、抑郁症等症状。事实上在年轻的群体中，大学的橄榄球队员都渴望自己留下好印象，因此他们几乎不会上报自己的头部损伤，在一组730名大学生球员中展开的调查显示，他们的头部平均受到27次冲击后才会上报1次，为此疾病预防控制中心(CDC)研发了一款手机应用，在这个应用上，橄榄球运动员可以了解和挑选头盔更好的保护头部，以及如何察觉头部损伤的迹象，并在遭到脑震荡或其他头部损伤时，知道接下来该怎么做。

但是围绕橄榄球比赛这个场景，柔性传感器制造商与运动品牌Reebok(锐步)设计了一款智能帽子，Reebok Checklight，它是一款运动影响指示器，通过传感器持续的感应头部受到的任何冲击，并通过LED灯光进行信号反馈冲击的程度，就像信号灯那样，并且它能够很舒适的佩戴在头盔中，没有界面、没有菜单、没有选项卡导航或账号密码登陆，尽管他不能代替医疗诊断，但是可以作为额外的参考指标来帮助教练或他人做出判断与选择，无论是继续比赛还是立即就，以保障运动员的健康情况。

事实上这些案例中，确实很精妙的利用技术解决的生活中的需求场景，并且没有使用以屏幕为交互的方式，也同时为用户提供了良好的体验不是吗？案例中描述了设计师是通过怎样的方案来解决了需求痛点，但，你有注意到是通过何种方式洞察到了这些设计理念吗？也许细心的你已经从前面的案例描述读出来答案，观察，这是一种解决问题的好办法，通过对场景对事物对用户行为的细心观察来找到问题的突破口，而这也是让我对潜移默化的UX设计方略有了新的思考的部分。

5｜场景化思考与观察的丰富启示

观察是设计思维的重要的一环，我们悉知的以人为本的设计流程便是以观察开始的，而观察与场景有着不可分离的渊源，我们观察用户、观察环境、观察事件等，这都是场景的一部分，我意识到场景化在任何时代任何设计过程中都有必要的价值，对于这一广泛且常常忽视的思维模式，我想以自己的视角来通俗的聊一聊。

面对各种问题，有时候痛点显而易见，有时候根据经验也能够快速看出端倪，有时候就静静的细心观察就好啦，优秀的设计师拥有丰富的问题解决策略，以及各种工具辅助，能够尽快的分析找出问题来并设计出解决方案来推敲，但这不意味着每次面对需求都将进行用户分析、市场分析、数据分析、用户研究、构建画像、构建体验地图、套用设计原则、构建原型、可用性测试等等，这些只是解决问题的方法与工具，帮助我们更好的分析人物&场景&事件的关系，以找到问题根源或解决办法。

平时的工作中，我们更多的是根据习惯与经验完成工作，并且面对各种问题的差异性以及时限要求，断然不会根据一套固定的设计策略或方法来输出，这不见得更合理更专业更高效，问问你自己，每次学了新的设计方法论或工具后你都会在后续的工作中用起来的吗？直到有一天这些方法论、设计模型、分析报告占据了你绝大部分的工作时间吗？我想不是每个项目都会给予设计者如此充裕的时间吧，同事会说，看啊，这个设计真笨，还在输出作证那点儿设计方案的分析材料，真磨唧。而通常老板也不会在意你是用了哪些方法，更在乎的是有没有解决好问题，有没有及时的解决，但是一定不会指责你没有使用用户画像、体验地图什么的，如果有人遇到过，那就是他的需求中期望看到这个。

实际上当我们熟练掌握某些设计策略或工具的原理后，即使不写出来，通过观察与思考也会有结果，这种潜移默化的过程就像是数学公式的应用，当你通过观察获取到了够用的信息后，就能思考出解决的方向，有点儿像韦东奕在接受采访时说的“其实，我真正写的题并不多，“想”的题却很多，能想明白的题目我就不写了”。所以当有人问起你是如何解决的，你说是通过对场景的观察思考，绝不会有什么不妥或显得很Low，但是你说一拍脑袋想的你试试，你看那程序员抽搐的嘴角是想干啥。就此我已经将大量的技法、设计论、工具隐匿起来了，但是场景的概念依旧不可缺失，不难看出为什么说“场景化思考与观察有着丰富的设计启示”，也许你还没有意识到平时的设计工作中，会经常用到这一概念或思维方式，只是没有人给你提示，你还没有意识到这就是场景化的洞察或思考啊。

6｜简单有效的场景化思维

我跟一个设计朋友聊起了场景化这个话题，但是我发现对方似乎并没有认识到这个场景化是什么概念，并问我这个场景化是什么，我想了想说：“就是一种找到问题前因后果并有效解决的好办法，并不是游戏场景的概念”。于是又问我是怎样一回事儿，我反问道你们接到游戏活动需求后会怎么思考？对方说一般由活动详情与活动入口构成，例如一个夏日祭活动，是用作消费回馈的，会设计阶段化的消费任务与回馈奖励，刺激玩家进行消费获取超出平常的奖励，为了围绕夏日祭这个盛会主题，需要搭建一个包含游戏元素和盛会元素的场景来承载活动内容、说明、进度、领取按钮与信息，给用户带来夏日祭的活动氛围与内容卖点... 我说等等，这不就是场景化的思考吗？我们综合场景构成的多个因素，并观察思考围绕玩家展开的一系列关系变化与过程感受。

什么是场景

这里的场景不是我们常以为的情景/情境或是某个事件的使用环境，近似场面的意思，场面是指戏剧、影视中由布景、音乐和登场人物组合成的景观，而场景就是某个人在某个时间某个地点因为某个目标在做某个些事，即人物、地点、时间、目标、行为，只是某个环境或情景的画面都不能称为场景，场景能够较好的反映出特定环境下人物实现目标的过程变化，因此不必纠结“场景”或是“场景化”一词，转而注意人物在对应环境下为目标做出了那些付出与反应，剩下的就是观察与思考如何帮助人物更舒服效率的完成目标即可；

什么是场景化

场景化就是将信息不齐全的情景根据关键信息推导或收集完善成一个场景，其目的是因为我们需要特定环境观察或构思服务对象为了达成目标做出了哪些努力，然后我们为此洞察出能够帮助服务对象解决麻烦的方案，但有意思的是在场景化的过程中，有时候不一定非要苛刻的补齐场景的五个因素，就像前面讲的，通过观察人物行为也能够产生人物目标的收获，记住场景化的重点是观察或构思人物为了达成目标在特定环境下做出了哪些努力，基于不同的情况，有些次要因素我们可能不会太在意，例如我们在讨论手机电筒的使用场景时，我们就不会太在意时间因素，反而昏暗的环境与亮度更重要，所以场景化时要灵活一点，挖掘有价值的因素而不是凑齐所有因素，常见有以下几种情况：

7｜作用与价值体现

场景化的视角代入作用

场景化还有个作用就是让自己更融入，算是同理心的一个窍门。我们在具有复杂性的功能自测时，我们不会只是反复的在界面上进行交互，这样的往返操作容易迷失自己，甚至忘却了我在哪儿，我在干嘛，这种情况用设计心理学描述为“记忆失效性失误”，对此，我们的解决办法就是设定场景，我们会简单的代入一个用户视角，并给自己设定一个匹配功能模块的需求目标，使得整个场景看起来合乎情理，然后带有目标的进行功能测试走查，如果这个过程中那里走不通了，不好用了，那就意味着这里的设计有问题，当然了，如果你是功能Bug测试，那我建议你找测试工程师要一份测试用例好了。

场景化的痛点&需求洞察

场景具有诸多变量，通过观察状态的变化，用户情绪与行为变化、以及实际场景中常见的干扰事件，都能为我们带来诸多的设计启示，我们可以利用起来，为用户提供更多的需求可能或是避免问题，就像车饰中的杯架，一开始汽车制造商们并不会觉得一个交通工具的驾驶室需要杯架，但是通过对真实场景下的观察与客户研究，不起眼的杯架竟然能为用户带来良好体验，以至于杯架会成为汽车内饰的广泛标配，这些巧妙的设计并不是设计师突然的灵感或浑然天成，这正是因为对场景的观察以洞察出的用户需求。

场景化可以让我们找到问题在哪儿发生了，并且问题根源大概是什么，会有怎样解决启示，而不是因为数据或结果发现了问题，在有限的认知下就问题进行错误或肤浅的设计解决方案，还记得肥皂厂对空盒子过滤的案例吗？A厂的设计师们发现了会有空的肥皂盒在流水线上，并且设计了高级的X光检测仪来改进生产线，但是B厂的设计师却根据观察找到了更好的解决方法“电风扇”，是的，B厂直接通过电风扇将质量更轻盈的空盒子吹到了一旁，那么你是老板，出于成本与研发周期，你选择哪个方案呢？

即使是线上场景也不例外，知道微信在直播场景时，收到的通讯消息已经采用了浮窗进行交互嘛？你也不想在看到精彩的时候却要关闭直播切换窗口去回复消息吧，这便是基于场景化的思考，微信为你提供了更多的直播观赏空间，而不会因为临时的消息回复使你不得不切换场景进行其他的的轻量化事件。

这便是场景化的魅力，我们可以找到真实问题的根源，并且能够充分的理解人物与环境与事件的关系，有很多设计师能够很巧妙的解决问题，并不是因为直觉或天赋，实际上更多的是结合了场景化的思维与洞察，而这并不困难，你也可以。

场景化的以用户为中心

在某个场景中，使用你产品的是谁？他们有什么特征，场景为他们带来怎样的感受，他们会面临怎样的问题或需求？这都是场景化中以用户为中心的表现，我们很清楚产品的使用者是谁，购买者是谁，我们采用场景化去打磨产品并不是让产品在场景下显得更加美观，而是让用户拥有更好的体验，其次才是美观，而作为设计师就不能以自己独到的设计理念来完全代替用户了。

事实上几乎没有一款产品是面向全人类的，出于人文差异、社会特征、个体特征、使用门槛等，做不到如此强大的兼容能力，过分兼容往往也会使得产品有缺陷或不伦不类，考虑的产品的功能作用以及商业价值，企业都会锚定一些具有某些特征或对应需求的用户群体，这样才更有机会成功，而不是迎合所有人，并且有时候还要进一步的区分用户与特征，例如使用者可能是一只猫一只狗，但是购买者往往是养宠物的人，这个时候还要顾及购买者的偏好，而不只是局限的观察场景下的使用者如何与产品交互，场景下购买者的动机与目的也是重要的，而那些线上应用就更不用说了，同一批人可能有不同的使用场景，同一场景下的用户可能会有不同的特征，识别他们的共性与差异性是以用户为中心的重要工作，为此我们可能还需要对场景下的用户进行分层，甚至允许定制化。

除了以上说的用户群体与特征，人文差异也是场景化下值得关注的问题，需求往往是来源部分用户群体，迎合他们的人文特征可以更好的促进用户使用和购买的欲望，在产品出海设计的过程中，人文差异往往是极其重要的，因为使用场景从国内变成了国外，如果不密切关注场景下的人文变化，出海则基本会以失败告终，例如我们传统的驾驶位在左边，而部分国外的是在右边；我们很多人爱吃的烤猪蹄，在印度却不受欢迎；我们大多人阅读是从左到右，而部分国外却是从右到左。一旦场景发生了变化，我们就应该密切关注人文是否要做更新的思考。

综合性的思考方式

此前已经解释了，场景不是单一的情景，并且存在各种变数，甚至都不是静态的，我们使用场景化思考时，一定不会局限在产品本身的流程或交互上的，也不是某个或多个人物上的，所以在场景下观察时，注意力不该在单一的对象上，而应该覆盖场景化的多个重要因素上。并且场景会给出用途和一些对应关系的特性，像我们提到某个需求时，研发的同学会问是那个场景，其实就是想要了解这个场景在哪里触发，场景下的用途是什么，用户与目标是什么，关联了那些技术栈等等。如果我们在观察某个场景时，出现了意外或小插曲，作为设计师就应该警觉起来，而不是认为只是意外，不会再发生，毕竟古人云“无独有偶”。所以当你奉行场景化观察或是思考时，就不会过于局限，反而会具有综合性的思考过程，这能让结果更加可靠和易于理解。

8｜开展场景化思维的窍门

贴近现实

几乎出现的所有问题都是有根源，有场景的，我们拿到需求却还是要分析需求，其目的就是找到根源，而不至于在虚假的问题或需求上窘迫的发力，而最终得到一个跛脚的结果，问题的根源常常是无比真实和深刻的，而我们结合场景化思考时，就应当贴近现实，而不要简易的虚构一个不真实的场景去匹配和思考问题，这个过程中要尽可能的追寻真实的环境，匹配的角色，更实际的问题，这个时候我们眼里的场景才有效，而不是做戏或是走个形式，并且最终你的解决方案是要搬进现实的啊，并不是以实验室的结果来定义真实的场景发生的事物，即使是模拟也是在模拟更加真实的场景不是吗？

顾及变量

倒上一杯水，抓来一碟零食，关上了窗帘，窝在椅子上，一切刚刚好，我沉浸在女鬼桥这部鬼片的精彩桥段里，我屏住呼吸，高度紧张的注视着，心里预测着下一个镜头将要如何如何，哐当一声，吓得我直起身来，其实女鬼还没有出现，但是我的猫先出现碰倒了我身后的物件。

场景化不再是理想派了，意想不到事件正在场景中发生呢！

对于场景化，几乎没有可能与我们预期的一致，场景下会有各种变量也应该有各种变量，把场景定格后应用是不对的，它应该像一个故事一样，有过程有发展变化，事件的发生、人物的行为、情绪的变化、环境的变化都是场景变量的一部分，越是忽略这些变量，越是会出现更多问题，因为这些变量会直接影响用户的行为决策与结果。交互设计师做特殊场景状态（常见有设备兼容、异常操作、网络问题，非常规操作等）的兼容与防错，不就是很好的体现吗！拆分出更多的意外场景迎合做出兼容方案反而会多出一些细微的体验差异，例如华为手机的消息通知会有自动收起内容的情况，其启示来自于真实的环境下，背后会有其他人窥探到你的个人信息。 

于此同时我们也应该清楚自身产品的局限性，我们做不到能应对各种突发事件的程度，所以设计出适当的约束来避免问题也是蛮重要的，大抵我下次在家看鬼片会先把猫关起来吧。

情感化

场景化、情感化似乎在现在的设计中经常被提及，如果把场景化比作一面灰色的墙，那么在墙上绘制多彩的小花，人物也露出愉悦的情绪，这些便是情感化的色彩，情感化传递的是一种情感价值和温度，在产品使用的场景中，我们可以结合特定的时刻来打造情感化设计，可以是通过氛围传递情绪，例如新年，产品视觉焕然一新，年味十足。又或是触发回忆，帮助用户想起那些有价值有温度的回忆画面，总之在适当的场景引起用户共鸣是一件很有温度的体验设计，哪怕只是在南京大屠杀的公祭日将线上产品的彩色斑斓抹去，也能感受的产品的情感关怀与社会价值观，总之识别出有意义的时刻，不论是节日盛典、解锁成就还是目标达成，我们都可以通过具有仪式感或视觉氛围的设计方式传递情感，让用户感受到产品设计的用心与别致的体验，这也是场景化中的环境与时间因素的识别与运用。
但值得注意的是，情感化不单单是符合特殊时刻或环境的打造，只是说就让用户觉得好看或就该这样有时还不够，情感化更多的是期望与用户情绪建立共鸣，引起用户反思，试想一部电影，为什么有的人看哭了，有的人没有反应呢？很大一部分原因就是看哭的人更投入，剧情经过了用户的反思与共鸣，从而调动了情绪才鼻酸落泪。

常规性

常规性是一个很重要的部分，它包揽了以上多个部分，常规的情景、常规的流程、常规的客户、常规的问题、常规的信息、常规的操作、常规的行为习惯、常规的难度、常规的文化差异、常规的认知等，常规意味着产品符合大多数客户群体的认知、习惯与使用情景，这能够大大提升易用性和兼容性，当设计无法接近用户认知就会变得难以理解和使用，随之门槛变高，而设计者不一定是产品的常规使用者，而常规性不仅能够使得场景化更加贴近现实，也抑制着以设计师为中心的弊端，最终保障设计模型与用户认知模型能够靠拢。

但过分的常规性也会成为创新的绊脚石，不论是渐进式创新还是颠覆式创新，依旧会保留一定的常规性，例如常规的地域文化、常规的理解认知、常规的信息维度等，但也肯定有不常规的地方，那便是它独特创新的部分，这意味着我们需要找对创新的场景，创新的部分，以及创新内容的本质与规则，要知道打破规则是一种创新是一种变革，但是前提是你得清楚规则的本质是什么，胡乱一通的创新往往达不到更好的效果，容易忽视其他变量与常规性。

这让我想起来《设计心理学3》中，唐纳德提及的指环王中创新的语种里的两个词语，一个是金属另一个是雪花，尽管这个语种里的两个单词看起来是如此的陌生，但是大多数外国人还是能够猜对那个是金属那个是雪花，因为金属的单词中包含了两个爆破音，更具有重金属的味道，而雪花的单词则具备斯斯的发音，显得更加轻盈，这源于人们对现实生活场景的理解与认知作用，这也是常规性。

9｜结语

通过《无界面交互》，看见了应用软件的发展简史，看见了软件对生活服务的影响力。还真就是那句话，“当我们习惯使用软件后就需要更多更多的应用软件”，随之利弊也变得更加清晰可见，人们生活方式与行为习惯也对应发生着转变，变得是数字化的服务方式，不变的还是各个场景下的需求与优化创新，就像我上一篇关于用户行为与触发式引导的文章中描述的那样，应用程序提供的是完成需求的功能，这意味着行为方式或成本的变化，但是本质不变。

虽然书中作者批判了屏幕的种种罪恶，但是现阶段发展离不开电子屏幕的存在，或许这就是发展进步中不可避免的一些矛盾与牺牲吧，谁知道作者现在有没有躺着椅子上用手机刷TikTok呢？不过作者唾弃的以应用软件来应对各种需求服务的方式，倒是认可的，应用程序解决需求不是一劳永逸的办法，创意创新也不止于界面，最终还是要回归场景与需求的探索，朴实无华的点子依旧受欢迎。

而聚焦生活服务类的场景与需求，我认为物联网与人工智能反而是以后更好的解决方案，我在之前的一篇关于物联网交互创新探索的文章中也有归纳过物联网的特征趋势（注: 有兴趣可以在往期文章中找到，有图解不枯燥，值得一看），即自动化、智能化、云计算、傻瓜式、联动性、可视化，我认为这些特征都能很好的满足无界面交互中潜移默化的UX设计理念，而作为这些生活服务类的UX设计师，了解和熟悉物联网技术也显得尤为重要。

作者：PP_PAO
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。 

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 

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

标签: 用户体验 设计趋势 ui 网页设计

如果说去年到今年科技领域的概念，元宇宙一定是最亮眼的那一个。 然而我们看到市场上的产品，扎克伯格奇丑无比的元宇宙自拍；包括大家都知道XR好像和元宇宙有些关系，但是XR本身好像也烟消云散了 那么元宇宙是否也是一个资本炒作的噱头呢？它和AR究竟发展到什么地步了？设计师能做什么？

本文分为以下3个部分进行讲解：

和当时的“VR元年一样”（当时VR比其他R更火），在去年“元宇宙元年”被提出之后的今天，同样浮现了许多诸如：“啊，这不就是AR嘛，果然是资本炒作的噱头”之类的声音，那我们首先结合以上片宇宙的概念来看看他们为什么这么说。

以上文字来源于百度百科的解释，这里面有两个重要的关键词：虚拟现实世界和数字化身。这两个词可以说就是元宇宙的命脉。

诶，但是这两个事物新鲜吗？它们像什么？

我们的游戏玩家发言了：这不就是MMO RPG嘛。

对，这就是为什么腾讯网易都在积极部署自己的元宇宙，腾讯的QQ元宇宙，网易的瑶台。它们拥有行业上的先发优势，比如游戏引擎、比如三维能力。可以说，在内容这一块，游戏行业的一只脚其实早就踏入元宇宙，你在玩原神的时候，世界不是虚拟的吗？你的人物不是代表你吗，除了虚拟人部分还是写好的程序，AI智能程度不高，和metaverse也没什么区别。这时候我们得出结论：害，元宇宙就是rpg游戏嘛，果然是个噱头。

是这样吗？ 是，但是不全是。

我们来看两个元年，去年2021年被称为元宇宙元年，而在这之前的2015年被称为XR元年。

那一年我上大一，我就是从那一年入的XR的坑。看着铺天盖地的VR的新闻，还在学交互的我琢磨着，woc，这玩意儿就是未来。2015年，

hololens和htc vive的推出，标志着VR和AR技术不再只停留在实验室，他们可以开始商业化探索了。实际上VR的诞生比之前说的雪崩更早，他在上个世纪60年代就被发明出来，被称为“达摩克利斯之剑”，这在很多VR科普的文章中都被讲解到了，感兴趣的朋友们可以去查一下VR的发展史。

而2021年，nft作为具有唯一性特点的可信数字权益凭证红极一时，紧接着web3作为去中心化的新型网络模式，虚拟人作为元宇宙中的人物形象，跟随元宇宙一起被大家所知晓。

这些本来在小众技术圈的研究其实都在“元宇宙”概念之前默默发展了，但由于元宇宙被资本市场挖掘。这时候有许多人发现，元宇宙好像真的可以开始做了。

我们再来看一下两根曲线，他们分别是是2018和2022年，由世界著名咨询和趋势预测机构gartner发布的曲线，看过这个我们就知道为什么XR似乎消身匿迹了。每一项技术的诞生基本都逃不过资本对概念的炒作，这是他们第一次让实验室外的人知晓。但随后都会进入一段漫长的产业深耕期。不明真相的围观群众看到的是又一个噱头陨落了，但是这些被资本堆积起来的无数企业却在默默地开始他们的长征。比如在AR头显领域，他们中大多数会像影创、NORTH一样陷入困境，但也有少部分探索到可行的商业模式得以生存。有很多技术都在质疑声中慢慢走向成熟。

以另外一个今年很火的概念虚拟人为例，在虚拟人中有一项非常重要的技术：让虚拟人开口说话的“语音-口型”技术，它的实现路径中，许多技术都在近年来快速发展，比如GAN（生成式对抗网络）、动作捕捉、包括基础的建模、TTS（文字转语音）等。

然后我们再来看XR，首先用一句话讲明白各种R的定义：下面的这张图是许多XR论文中都会引用的“虚拟-现实连续体”，其实我们熟知的VR（虚拟现实，virtual reality）、AR（增强现实，augmented reality）、MR（混合现实，mixed reality）都是其中的一种程度，越靠近轴的右侧，越接近真实世界。而XR则是他们的总称（扩展显示，expended reality），我今天主要想分享和元宇宙最相关的AR。

虽然很多产品广告都是以实物为准，但是基本上下面视频里的画面都是真实的。这里的hololens是世界上集成度最高的AR设备，然而他很贵、很重还有各种技术上的限制。下方的是今年U设计周国内顶尖AR头显厂商Rokid介绍的和钉钉合作的办公视频，这张图中我注意到的重点是那根连接HMD（头戴式显示器，头显）的线。没错，他们把头显连接到手机，用手机的计算可以大大的减少整个AR-HMD的重量，而重量之前一直是一个老大难问题。事实上，近年来有许多AR-HMD都采用了这种连接手机的方式。又或者专注于某一垂直领域，比如只做工业生产中的识别扫描等等，这些都可以极大的提高设备的性能，减少设备重量，优化用户体验。

比如今年新发布的这两款AR-HMD，oppo通过做减法，让眼镜只保留基础的增强显示信息的功能；nreal通过连手机让眼镜外形到达了不再像hololens那样中二的程度（虽然在功能上nreal似乎和VR没什么区别，缺少和现实世界的交互）。此外，他们各自也有光学上的创新与专利。

因此，我们可以发现，XR其实并没有销声匿迹，他们一直在不断的迭代自己的产品。到现在这种和普通眼镜无异的产品形态，已经和刚出来时又了很大的进步。

说完了XR的发展后，接下来说说，现在XR还需要解决的问题。下方是XR当前遇到的一些难题和困境。

首先是价格问题，现在的AR一体机价格依然非常的贵，只能作为一款企业级的产品卖给B端，军方。比如hololens与美国军方签订了4.8亿美元的订单；罗克韦尔自动化通过AR提高了员工的培训效率。

FOV（field of view），视场角。作为HMD（head mounted display）的一项重要评价指标，在增强现实的HMD中受到极大的限制，我们可以看到右上方的这幅图显示的是代表目前AR头显的最高水平的微软hololens和magic leap。其中hololens2的FOV是最大的，有43*29。但是人的正常视野范围大约有水平210*竖直150.这就会导致下图的这种情况——用户因为FOV问题错过视野外的虚拟信息。在下图中用户通过AR识别展板，看到展板上的虚拟按钮，点击后左右两侧都出现了虚拟信息，然而由于FOV问题，用户实际上看不到两侧的额外信息，导致用户体验不佳。

而为了解决这个问题，现有的研究提出了各种方法，如下图中的作者Marquardt等人连续5年发表相关论文，通过在AR头显上安装震动器、耳机等外设，利用触觉和听觉暗示用户虚拟目标的方位。

而在软件交互层面，有许多研究致力于使用雷达、小地图、3d箭头等和游戏中相似的方式，帮助用户找到空间中的虚拟目标。

晕动症也是一个老生常谈的问题，但是这一症状在AR中并不明显，这可能是因为使用AR时用户可以看到现实世界。而对于AR来说，设备重量和电池续航问题更为严重，Hololens2的持续使用时间实测仅为4小时左右，并且当事业中的场景或虚拟物体较为复杂时，还会导致主机很烫，佩戴体验不佳。

最后想和大家来探讨一些作为设计师，这些先进技术要到来时，我们可以做哪些准备。

很显然，XR带来的空间界面将突破传统用户界面的方式，打破屏幕，将信息融入现实世界，增强用户获得信息的途径，增加信息的维度。这一颠覆性的显示技术变化，势必会带来交互设计上的变革。再对空间界面进行设计时，势必会带来许多2D时代未曾考虑过的问题，比如信息与自身的空间相对位置，多模态的信息提示，用户负荷，人体工学等等。因此赶在技术成熟之前，预想出一套全新的交互设计规律，可以为技术的爆炸性突破做好准备 —— 一旦技术普及，相关应用立刻投入生产占领市场。以下为一些个人对AR设计的扯淡。

首先从交互形式上来说，XR的理想状态应该是可以支持多模态的交互形式，包括视觉的注视眨眼、听觉的空间音效、头部的追踪跟随、手势的识别、身体运动时的空间识别等等。甚至也有研究通过电极模仿味觉、香氛模仿嗅觉，达到五感沉浸的效果。

请注意，这里的每一个通道的设计都需要被考量。举些例子：比如在进行听觉交互时，需要考虑到提供空间音效的HRTF技术可能存在前后混淆的问题，玩过吃鸡（或其他FPS游戏）的玩家可能会发现，有时候无法分辨敌人来自正前方还是正后方。而对于头部旋转、身体运动，需要了解，人的脖子、躯干拥有最大扭转角度，如果用户在坐着的使用场景中，则需要考虑虚拟信息最多能被放置在多少大的范围内。对于手势交互，应尽量避免一些手势冲突，因为现在的手势识别技术在有些时候不那么精准。这在我们的平面交互中也会遇到，比如一些热区、滑动和点击问题。

在进行视觉引导时还会存在各种物理、生理甚至心理上的交互规则，比如之前提到的小地图和箭头，它们分别属于外中心和内中心的视点引导方法——小地图是以空间中的其他物体为参考对象，比方杯子在桌子上；而箭头是以自己为参考对象，比如杯子在我前面。研究表明内中心的参考方式在视觉搜索时间和任务符合方面都优于外中心。

视觉交互中，需要结合设备大小和人的中心视野范围，考虑将层级重要的信息置于视野中心。因为人的视野大小本身也是有极限的，下方的图从小到达依次为：hololens的横向FOV，人的双目中央视野（可以容易的观察到立体信息），人的总体视野，以及转动头部时能看到的最大视野。此外，请尽量将信息布置在人体周围的球形界面中，以保证用户在旋转视角时，界面、字体的尺度大小保持一致性。

和2D界面一样，在空间中也有信息层级，除了常规的平面信息层级之外，空间界面中还有“深度”概念。

关于色彩，在AR头显中目前存在一些极限值，比如明度和不透明度低于一定值时人就很难分辨了，这是因为ARHMD的镜片本身也存在一定的透明度。我们可以采用一些卡片式（或者在AR中应该称为模块化？）设计，在信息底部叠加对比强烈的底色，保证信息的可读性。

然后是模型设计，右侧为前段时间扎尔伯格的离谱自拍，奇丑无比的外形被人喷的体无完肤，并且META中的小人都是没有脚的，这加强了吃瓜群众认为元宇宙就是噱头的心理。除去meta可能把黑红作为营销策略的想法之外，有可能是出于性能和技术的考虑。

首先出于性能，前文说过复杂的场景可能会导致场景卡顿，因此可能这张照片只是内部测试时为了高效而选择了Low poly(低面)风格的模型。其次在技术方面，由于VR眼镜目前大多都是坐着玩的，摄像头没有办法识别到用户的脚。并且用户的头部有头盔，手上有手柄，因此可以大致模拟出上半身的大致姿态，而脚的可穿戴设备似乎还比较匮乏。另外也有官方说法是，在原宇宙显示下体可能会导致一些“伦理”问题，emmm。

但其实从识别技术来说，微软在16年就可以实现全身的远程对话了。

说了这么多，可能大家会觉得AR好像是开发的事儿，设计师能做的事目前还不多。但事实上，要想实现一个AR的demo并没有这么困难，运用现在已有的软硬件能力，我们已经可以快速的开发出一些AR原型。这些工作有点类似游戏行业中的技术美术（TA），AR的普及需要更多的杀手级应用，这其中也一定需要各位设计师朋友的支持。学习一下unity、unreal引擎，包括Nvidia的ominiverse都在帮助设计师更好的创作内容。

再来看些老生常谈的AR应用场景。

第一张图是今年的ucan中使用的AR会场，可以在上面看到不同嘉宾的信息，还可以和他们互动、点赞。不过他的信息是360度呈现的，考虑到会场大伙都是坐着的，而且转头拿手机对着别人的脸是不是也不太礼貌，是不是设计上还能再优化一下呢=v=。

除了会展，AR还非常适合一些需要高成本制作的场景。比如房屋装修、汽车销售、珠宝定制等，他们的试错成本都很高，如果在下单前就能看到最后的效果，可以为商家节约很多成本。

最后我想说，其实元宇宙的各个产业链上，相关技术都在快速发展。我们可以说现阶段的元宇宙和XR是噱头，是概念的堆积。但是只到此为止一笑了之可能草率了一点，很多技术都会爆发式的进入成熟期，为了空间交互可能的到来，至少我自己还得做很多的准备。

作者：kylin97
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。 

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 

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

标签: 用户体验 设计趋势 ui 网页设计

关注趋势本质上就是关注未来可能存在的形态。很多营销需求和优秀设计趋势是相互关联的，两者之间的关联更像是一种动态的同步。

很多时候趋势并不一定是全新的东西，它们往往是服务于当下和未来的需求，有很多趋势存在了一些年头，它们在现在发挥着作用，但是在未来可能会发挥更大的效用。所以，当我们在查看这些设计趋势的时候，需要注意，它们必须是服务于用户，服务于品牌和企业。

更多设计趋势：

1、新极简主义

的确，极简主义一直在某种程度上流行，但是 2022 年出现的新极简主义的浪潮，比起传统的极简主义设计更加在意用户注意力的吸引。这种新极简主义的设计会采用更加大胆、 生动、明亮的色彩来填补留白，这种设计使得设计保持简约的同时，更加富有调性，在简约的框架下制造一种别样的华丽，营造令人亢奋的氛围。

干净清晰、生动的新极简主义风格在品牌推广的过程中也更加受欢迎，大量的留白和跳脱的视觉焦点让整个视觉更加抓人眼球，也使得品牌给人的感知更加新鲜独特。

新极简主义风格，对比度在深色主题下得到了进一步的提升。

这种设计并不意味着传统的极简主义已经被用户抛弃，很多企业依然会青睐更加传统的单色极简主义设计，不过其中多少会增加一些明亮的色彩作为点缀。

2、新粗野主义

从 1950 年开始，粗野主义就是年轻化、反叛、反主流、标新立异的设计风格。在过去的几十年当中，这种设计风格一直随着时代的发展而自我迭代，新粗野主义更加强调创造力、 大胆前卫的新奇元素，而这也正好符合很多品牌对于新奇性的追求，它可以瞬间抓住用户的注意力。不过，这种风格的使用需要控制好程度，否则很容易失控。

粗野主义经久不衰的秘诀是什么？是未经打磨、粗粝而原始的素材，它让观看者忍不住想要改进它，这种未完成的原始感会在情感上吸引观众，这在营销上是无价的优势。

粗野主义在设计上并非看起来那么粗糙，相反它更加需要高度的专业性来控制它粗野的程度。设计师需要敏锐地感知到观看者改进地欲望，让设计粗野而不低级，原始而不拙劣。

新粗野主义柔糅合了极简主义和大胆地排版，它依赖看似粗野地视觉冲击：高对比度、粗粝地阴影，撞色、 简约的背景、不对称的布局、 未经修饰的照片，新粗野主义偏好基础款的加粗字体，跟注重可读性而不是舒适所制造的视觉吸引力。

这个网站就是一个典型的例子：

3、强调参与感的交互

这一趋势在绝大多数的趋势排行榜当中，都占据首位。随着技术的进步，用户和数字媒体之间的交互正在增加，引人入胜的交互已经不仅仅停留在响应式设计当中，如今它已经开始关注心理和生理的逻辑，开始全方位地调动视觉、听觉、 嗅觉、触觉、味觉乃至于运动体感。

这种趋势旨在帮助用户体验真实地感觉，在完成交互地基础上，触发用户地情绪反应和生理反应，热气腾腾地馅饼视频让人垂涎，游戏中虚拟地对手让人肾上腺素激增。

交互所制造地参与感，在某种程度上是实际地物理产品地替代物，用户可以从不同角度来缩放查看产品，了解细节，选择尺寸，挑选颜色。

交互过程中，手指和屏幕之间地触摸交互开始变得丰富，开始变得有意味，它成为了用户和虚拟世界之间沟通地桥梁，开始有游戏地乐趣，有更具设计感地交互环节。用户也可以根据自己地喜好，对界面进行更多样的个性化处理。

具有参与感的交互是我们的未来。

4、关注人和叙事

2022 年是疫情开始后的第三年，隔离使得人们对于照片所呈现出的故事和情感，有着更为强烈的情绪反应。在极简主义设计当中，富有表现力的人物照片是最为流行的元素之一，这类照片搭配上简短的文字，简练的口号，一些带有宏大叙事特质的文字引用，时常能够更好地营造出故事感。

不用担心主屏页面太长没人看，只要随着用户滚动，故事会随之逐步展开，用户可以在照片、 标题、视频、动画和文本地指引下，看到整个故事有步骤地呈现。

在这当中，富有表现力的人物照片是吸引用户注意力的关键要素。

另外就是页面的 Banner 的部分，强调主题和内容的标题文本，是用户从屏幕上获取的重要信息之一。

如今的用户越来越偏好在详细阅读内容之前，快速浏览一下全局的做法，这也使得 Scrollytelling（滚动叙事：通过滚动触发音频、视频、 动画效果的一种技术）这种渐进式叙事方式，可以像电影一样将故事呈现在用户眼前。

Scrollytelling 适合大量的内容呈现，比如对于公司和产品的描述，对于数据呈现或者认知要求较高的内容，它适合学习和记忆性内容的呈现。

5、3D图形的运用

3D 图形设计正在越来越流行，因为它确实是吸引用户注意力的最主要的工具之一。3D 图像无论有多么奇异，它本身都会被认为是有真实感的，明确的体积，精致的建模，所有的一切都令人着迷。很多时候，用户停留在有3D元素的页面上，是为了更细致的欣赏。

3D 图形设计的趋势从来都没有减退，它正在进入更多的领域，甚至进入了品牌推广的领域。3D 动画图标比过去更能吸引用户的注意力。

6、抽象插画

我们通常说的抽象插画，指的是带有明确几何特征的插画，它们被广泛地应用于网站和 APP，在社交媒体和包装设计中也越来越多的存在。

抽象插画之所以会如此成功，是因为它们大多有着吸引人的生动色彩和良好对比度，视觉上的美感和极简主义的风格特质，它们成为视觉的焦点，为整个设计提升视觉。

抽象插画在品牌营销场景下的应用也很多，它们在这个时候是贴合品牌推广的诉求的：通过色彩和形式来吸引用户来关注品牌的形象和名称。

7、超大文本版式

这种趋势的特别之处是其中的文本字体元素是完全独立的。这些文本不仅仅是用来传递信息的，它们还充当着拉升页面视觉效果的重要作用，它们结合动画和交互，成为页面中醒目的亮点。

超大字体的优点在于，它和很多设计风格是相得益彰的，加粗的大字体在极简主义风格的页面上不会显得突兀，在元素丰富的页面上，同样可以起到优秀的点缀作用。这些文本内容可以和纤细和小尺寸的元素协同，而后者则衬托出它本身的醒目。

超大文本字体的另一个好处是有效地减少网页上的图像的使用，缩短加载时间，提升移动端的可用性。

这种设计元素最重要的，是选择易读且符合品牌调性的字体。

总结

这么多年来，我们看到来这么多的趋势，很多趋势是一以贯之持续出现，有的趋势则如同流星一样一闪而逝。好的趋势不断迭代升级，并且持续存在，但是最重要的，始终是那些选择合理的方案，并且坚持改进设计，让趋势服务于终端的产品和用户的设计师。

让趋势服务于你，不要盲目地追趋势！

作者：陈子木



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



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

对接开发的重要性

作为产品设计师，无论在什么公司什么岗位，都免不了与研发团队进行沟通，如果不进行沟通就无法交付我们的设计稿，即便很成熟的团队也会出现在沟通上的问题，在产品研发的过程中沟通是必要的流程，为了创造一致的用户体验，设计师需要与开发人员在视觉上、交互上达到一致的想法，但是讲起来简单，说起来难，在整个过程设计师和开发都是站在不同的角度去看待问题的，我们思考的如何达到美观的界面、流畅的交互等问题，而开发关心的是做这件事我需要花费多长时间，实现难度如何等等，首先目标就不在同一个维度，那么必然会造成我们在对接的时候出现掰扯的问题，最后耽误的都是双方的时间，更严重点页面最后的体验也没有达到一致。

任何团队都会出现设计师与开发脱节的问题很常见，遇见什么问题解决什么问题，毕竟人与人的性格、沟通方式等都是不同的。

我们只需要在不同的流程里去做不同的事情就可以避免这些问题了，对于任何设计师基本都会适用，往下看～

对接前的准备

1. 产品信息文档确认

在接到一个需求的时候产品经理会通知上下游进行需求的评审，这时候一般会是产品经理、设计师、开发三个组进行需求的评估，具体的需求评审在本章就不细讲，我们此次主要讲设计师与开发相关的信息同步。

在评审过程中产品经理会把需求背景、需求目标等相关信息同步给相关的人员，作为设计师这时候就要关注需求目标，这个目标不仅是产品经理的目标，也是整个项目的目标，所以与每个人都相关，需求目标清晰后期推动开发的时候才会有依据。

评审会议结束后，产品经理会同步期望上线时间，如果是常规需求，会当时就评估出设计时间、开发时时间，我们设计师这时候就要关注这些时间，因为我们通过上线时间就可以估算开发节奏，给我们后期的修改以及临时添加的一些动效制作时间会留出充裕的时间。

设计评审流程细节本章不进行细节讲解，本章重点讲与开发对接。

近期我在公司做了一个商业化的直播项目需求，由于产品方没有过多的产研经验（后面才知道），在项目前期虽然进行了评审，但是评审的参与人员没有拉上我，等到需求给到我的时候，我顺便问了一下才知道已经评审完了，这对于我来讲是没办法进行设计输出的。

第一我不知道评审过程中开发的排期时间，以及测试时间，如果研发开始开发的时间与设计稿交付时间有冲突那么就是影响上线节奏。

第二涉及的交互操作产品经理是不清楚的，有没有哪些地方需要加复杂的交互产品也是同样不清楚，那么开发就会默认这是常规的交互，如果过程中添加那将会影响开发进度。

第三流程上不符合要求，期间如果有关键性信息没有达到共识，那将会酿成很严重的后果。

面对这种已经发生的事情，如果重新拉个会评审一次会耽误大家的时间，很多人是不愿意的，但是呢我也不能单听产品一方面的沟通，因为很多细节他是不清楚的（产品经验较少），所以当时我的处理方法呢是我先通过产品给出的上线时间，然后与前端同学单独确认一下，这样至少保证上线时间是同步的，至于其他的细节我当时是利用设计评审的方式同步给开发交互逻辑、动效方式等。

此次这个需求呢本身不大是在旧版的基础上优化功能，理论上不需要走设计评审流程，但是因为当时没有通知参加评审导致很多信息不同步，而我需要传达给开发的东西也不能在后期在告诉他们，所以我利用设计评审流程把一些交互信息同步给开发。

2. 设计图准备

在设计稿完成后，如果是小需求一般是直接交付给研发，如果是大需求一般会进行设计评审，主要评审维度是设计稿是否与产品文档同步，设计目标是否符合产品目标等等，其次如果有复杂交互效果、设计细节、组件复用情况也需要与研发对齐。

若是直接交付研发，我们需要提前把设计稿内涉及的切图、图层间距、动效使用区域等关键信息提前准备好，避免在开发过程中临时进行补充，影响开发节奏。

在设计稿内的切图，我们要提前与研发沟通，切图的范围和形式，最后把设计稿传入公司统一使用的协作网站，如蓝湖、即时设计等平台，大公司会有自己的协作平台。

3. 确定设计规范组件

讲个自己的踩坑案例，还是商业化的那个需求，由于为了商业化赋能，产品的需求文档并没有按照规范组件进行设计，但是由于产品文档标注的不清楚，在设计过程中不断与产品进行沟通，最后结果当然也是无法复用组件，当时我就把组件规范修改了，重点是研发不知道，我当时想的是研发通过产品文档应该会了解到，事实确实我大意了，后面就导致组件方面我与研发进行了相爱相杀，通过自己的以身作则我劝大家不要忽略任何一个细节！

设计规范组件在设计前就需要进行确认，项目是否有存留的规范组件，如果有，需要在设计前以及设计中去确认哪些模块是否可以调用，开发是否已经将组件写入代码中，如果不了解这些情况贸然的设计，那在对接过程中会出现修改设计稿的风险。

如果是创新项目并且没有相关的设计规范和组件，我们则需要在设计前就把规范组件的时间给算到需求内，一个产品的规范组件，决定着后续产品是否严谨、项目研发效率等等，因为规范组件不止是设计师的事情，还是团队研发比较关注的事情，研发们在代码里同样需要进行规范的组件复用。

4. 输出设计文档

当在做一些在旧版的产品页面上优化的需求时，还需要输出对应设计文档，给前端和测试看，设计文档需要写清楚设计稿优化的点，例如图标的细节优化、文字的字号优化、色彩优化、界面交互等等细节。

如果涉及到一些页面的交互，我们在提供设计稿的同时需要把具象的交互文件单独交给开发，不要奢望前端大佬们能脑补出页面之间的交互，我们不及时提供的话，后期修改研发可能会直接拒绝，并且口吐芬芳～（最简单的找到竞品页面演示给研发看）。

我的方法

前端在看我们设计稿时如果不是结构上的修改，他们不会去关注这些细节的点，而给测试看的目的是，有些公司测试会帮我们进行走查，如果不出设计文档测试没办法进行对比（测试提 bug 比设计师提 bug 更具有一些权威性）。

这里看一下我工作中输出的设计文档，我会把需求的背景、目标在设计文档上强调一下，再添加上设计目标，设计目标为了需求目标去赋能，这样在文档开始就与研发达成共识，让研发是带着共同完成目标的态度去看设计文档，便于我们后续推动，其次放上页面之间的说明。

5. 交付开发

最后总结一下，我们要交付给开发什么东西，首先是基本的设计稿，包括切图、间距、动效文件，其次是设计文档，包括需求背景、需求目标、设计目标、设计修改点说明。

对接中避免摩擦

1. 不要频繁修改

在交付设计稿后（基本设计图、设计文档），我们就要避免频繁修改，频繁的修改会导致设计稿来回更新，对开发造成一种困惑，最后在测试的时候，开发同学容易写乱，另一方面工作过的设计师都应该经历过，我们在开发的过程中修改设计稿，大部分的开发都会带点情绪，甚至不给我们改，这其实是因为大多开发的代码写的是比较规范统一的，如果中途进行修改可能会影响开发同学的代码规范，就像我们在完成一个设计稿的时候，产品经理突然改变需求，我们也是担心做好的设计稿因为修改而被打乱。

如果实在需要修改，一定要说明原因，而不是突然一个想法觉得这里设计不合适就进行修改（产品需求修改除外），我们要换位思考，具有同理心去工作，并且让开发同学感受到我们是在帮助他们减少工作量，这样在后续的一些需求中，我们的对接会很顺畅。

2. 重要信息及时通知

上面说的是站在设计师的角度去修改，还有一种情况是研发在开发过程中，作为设计师的我们突然收到产品经理的修改建议，这时候我们需要及时的同步给开发，或者给开发同事达成共识信息，因为很多时候，产品经理让我们修改的时候往往不会通知开发，因为对于产品经理而言就是一个小的修改，例如改个位置、改个颜色等等，但不管是对我们还是对于开发其实都是比较重要的，不及时同步就会出现不好的结果，如果在测试阶段没有发现问题，上线后就会造成设计师背锅的情况。

我曾经在做一个页面改版的时候，就遇到类似的问题，当时产品找到我说改一个地方的交互，并且我也觉得那个交互方式应该改，当时的我以为产品经理会同时告诉开发修改的地方，但是直到项目上线后开发都没修改那个地方的交互，本来这个修改点是个小事情，谁知刚好那一个版本被用户吐槽那个页面的交互，结果可想而知领导拉个会议开始复盘，为什么没有改，索性大家没有互相甩锅的情况，产品经理说没有同步到开发，而我也是帮产品兜了一下说更新设计稿没有告诉开发，这个事情原本是个很小的事情，只需要我顺口同步给开发，就能够避免的，就因为我没有及时同步，造成用户的反馈，影响了产品的体验。

所以各位设计师工作中如果遇到类似的事情一定要及时同步！

3. 统一需求目标

开始讲到过，在需求评审的时候要与开发对齐目标，为什么需要对齐目标，因为一个项目如果目标不对齐，那么每个人都会站在自己的角度去做这个需求，设计师思考的是通过设计的手段，去帮助产品完成目标，如果设计稿上的复杂效果较多的时候，开发则会考虑你为什么这么做，这么做开发成本非常高等等，这也是说为什么我们开始就讲要输出设计文档，如果这一切都不存在的话就会导致开发是带着疑问写我们的页面，如果过程中在修改需求什么的，那我们跟开发又要相爱相杀了。

我的设计方式是通常是在产品评审阶段就与开发明确讲清楚，我大概要做什么样的效果，什么的交互形式，预计什么时候会交初步方案，中途也可能会有修改的点等等，提前让开发有个心理预期，避免在开发过程中产生抵抗情绪。

我的经验

4. 输出交互动画

如果在前期没有时间进行动效设计并没有关系，研发在开发过程中可以在把动效方面给空出来后续写，这里讲的交互动画分为两种，一种是展示的动画，一种是 ui 中的动效。

展示动画

目的是为了告知开发页面运动的轨迹，在 1-4 中讲到我个人用的方法，大家如果是刚对接研发的话，建议还是输出完整的交互动画，这里推荐一些工具 AE、Principle、Pixso、Figma 等。

AE：大家就比较熟悉了，经典的动效绘制软件，什么样的效果都能实现，但是使用成本比较高（不建议）

Principle：国外的一款交互软件，制作页面交互很方面，可以直接导入 figma 和 sketch，由于是国外软件需要使用英文界面，但是国内也有汉化版。

Pixso：国产最新的设计软件与 figma 类似，做交互的方式是使用多个页面添加热区进行使用，具体体验如何还不清楚（可以用用）

Figma：设计软件目前的天花板，流畅的体验，支持页面动画设计，但是需要安装插件才可以（建议使用）

动效文件

这个比较重要！我们一定要与研发同事沟通好，产品内使用什么样格式的动效文件，统一后能提升后续的开发效率，动效格式使用乱套的话，后续我们做更新迭代时做替换会很麻烦，开发也同样如此，这里推荐几种动效格式文件，分别是 GIF、json、pag、svga 这 4 种。

GIF：传统的动效文件格式，优点是学习成本低，第一个缺点是内存大，图片容易失真模糊，他的原理就是把每一帧的图片融合在一起，最后形成动画，图片越多，内存越大，第二个缺点是占用产品资源，当内存过高时，在加载时会出现卡顿。

Json：该文件格式是通过 Lottie 实现的，是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具，它的优点就是内存小、无需加载、动画不会失真，缺点呢就是支持得动画方式没有 gif 那么全面，以及使用成本也比较高。

具体使用步骤是需要我们装 ae 插件 bodymovin，通过插件导出 json，常遇见的问题就是在导出渐变动画时，渐变效果会消失，这是因为我们 ae 安装得都是中文版，而该插件更多的适配是英文版，不过没关系这里可以把渐变效果的名字改为 gradient fill1 就可以了，如果多个渐变的话我们更改后面序列号就可以，比如 gradient fill1、gradient fill2、gradient fill3…，这里把汉化插件链接也给大家找到了。

网站链接：https://zdo.fun/?p=557

我的经验

Pag：pag 是腾讯研发的一种技术文件，最初主要用于游戏动画和直播动画，用来解决复杂的动画效果，目前在 ui 页面中运用也比较多，优点是占比内存比 json 文件更小，支持的动画方式也更丰富，运行时可编辑，缺点是适配原生有些问题，压缩位图时会出现不显示，这个软件目前还在完善阶段，我曾经也使用过，后来因为适配问题就放弃了，感兴趣的大家可以通过下面链接下载。

网站链接：https://pag.io/docs/install.html

svga：该文件格式的强大之处在于可以完整的将位图转换成二进制代码，并且内存占比较于 json 更小，播放资源占用更低，并且技术上相对稳定（建议使用）

网站链接：https://svga.io/designer.html

我们看下 svg 实现的效果

最后，我们一定要统一产品内使用的动效文件格式，这样既方便我们，也方便开发，让开发看到我们设计师的严谨性，便于后续合作。

对接后应该干什么

1. 跟进开发进度

作为设计师，我们需要实时了解开发的进度，这样能够保证我们在过程中掌握自己的设计节奏，什么时间交给开发动效文件，如果进行修改也可以不影响上线时间（当然不建议这样做），那么具体需要怎么跟进呢，大概分为以下几个维度。

时间进度跟进：

设计师可以时不时的问一嘴，是否能按照正常的计划时间节点提测（正常需求提交后，开发会给出开发排期，尽量按照时间排期走，否则项目进度会变得很不可控）。

如果开发反馈时间会有延期风险，那设计师第一时间就要了解原因，以及预计延期多久，然后自身评估以下对设计上是否有影响。

需求变更跟进：

一般开发过程中，或多或少都会出现一些需求调整/变更的点，那么其中就会涉及设计上的改动，改动小的话产品经理有时候会直接告诉我们，并不会告诉开发，这时候如果身为设计师的我们要及时通知开发，并说明原因（避免争论）。

并且，需求变更后，需要和开发评估新的项目上线时间点，站在我们或者产品角度理解有时候我们认为的修改，对于开发来讲是耗费时间较长的，需要我们注意是否会影响上线时间。

交互动效实现跟进：

在 2-4 中讲到我们要输出交互动画，虽然我们输出的动画很直观，以及动效文件也完整，但是避免不了认知上的偏差，有时候开发会按照技术难度以及自身理解去完整交互效果，我们中途要随时跟进了解，避免开发在错误的路上越走越远。

测试跟进：

及时了解该需求是否已经提测、哪些还未提测，若到了提测时间的功能未进入测试，可以询问产品或开发什么原因，这样对项目或设计师都是负责的。

另外一点是我们设计师需要在提测阶段介入 UI 走查，因为各个公司或者项目测试时间有长有短，所以我们要及时把 UI 走查工作介入进去，给开发预留出修改时间，有的小公司不重视 UI 走查流程，这里我们就可以自驱进行走查，主动找测试同学了解提测时间，及时走查，保证页面还原度。

2. 设计走查

走查是 UI 工作中最为重要的工作，它决定着产品上线后能否完美的展现给用户，下面我大致把走查的流程以及范围给大家梳理下。

创建走查文档

在 UI 走查阶段，我们首先需要建立走查文档便于开发浏览解决，走查文档主要包含日期、版本、项目名称、模块、端口、问题描述、修改状态、图片标注，这样一方面能够让问题更加详细，体现设计师的专业度，一般我是使用在线表格去建立走查文档，当然这个看每个公司所使用的协作平台。

开通手机权限

一般在走查移动端产品时，安装测试包需要开通账号权限，这里可以找公司的开发或者测试同事给开通，避免影响走查效率。

走查范围

分为基础走查、细节走查、适配走查

基础走查包含字体、颜色、图标、间距、对齐方式等具体可根据产品形态进行延伸，其中间距走查比较费时间，需要我们通过测试机截图后，按照倍数缩放到源文件内进行测量，测试机分辨率需要保证与设计稿一致，否则测量不准确，例如设计图是 375*812，以 ios 为例测试机则需要使用与 375*812 分辨率相同的尺寸测试。

细节走查包含字体截字、按压状态、组件内容、交互状态

适配走查包含关键信息是否超出屏幕、是否出现挤压、是否出现重叠、识别度是否清晰

3. 避免添加复杂交互

在走查阶段如果我们发现部分的交互效果不太理想，并未达到预期，我们可以与开发进行沟通是否可以修改，或者添加新的交互效果，因为在这个阶段我们重新设计或者定义一个新的交互动效的话，会增加非常大的开发工作量，可能也会与开发产生争吵，我们在这个时期尽量避免这个问题，如果实在没有解决办法的时候再去添加新的交互。

我在工作中，如果遇到这种事情，会分两点考虑这个事情。

第一评估下当下这个交互效果是否会影响用户体验，如果影响用户体验我会要求开发必须 100%还原，当然我会讲述清楚为什么改，避免让开发产生情绪抵抗。

第二是如果不影响用户体验，但是还原度没有达到预期，我同样会先找开发进行沟通，例如按照交互稿还原会有什么困难，是时间上的困难还是技术上的困难，时间上如果困难我会沟通好下一期必须还原到位，技术上困难我一般会修改交互形式，尽量保证上线后给用户展现的是完美的状态。

4. 数据追踪

作为设计师在需求上线后并不代表需求就结束了，我们还需要追踪数据情况是好是坏，为什么我们设计师要去追踪这个数据呢，追踪数据是为了让我们在工作中提升自己的设计价值，随着现在互联网发展逐渐饱和，那么企业对于各个岗位的要求也跟互联网初期不一样，以前我们只需要画画图交付就可以了，但是现在的企业更看重的是综合能力，说简单点就是做 UI 的人很多，优秀的 UI 一样很多，那么我们就得被迫提升核心竞争力否则就是被淘汰。

而追踪数据其实就是增加我们得核心竞争力，同时也是能够体现自己设计能力的一项内容，设计最终是为商业而服务的，但我们不能嘴上说说，而是要拿出实际的行动，这个行动就是数据，我们的设计如何为数据赋能的，如何帮业务达到目标等等，数据如何分析是个很庞大的体系这里只讲下我们身为设计师为什么需要追踪数据。

简单讲下工作中数据解析的案例。

下面是我做的一个直播商业化改版需求，改版背景呢是直播业务由原先的为 c 端用户赋能改为，为 b 端企业赋能，通过与企业合作而产生价值，那么基于这个直播形态肯定是需要变化的，需求目标由原先的「用户收益」改为「企业收益」，新的目标具体为提升企业品牌曝光点击、互动、预约人数、提升直播在企业客户测的感知收益。

案例

基于这个目标，其实不难发现，目标已经从用户侧改为大客户，更多的是为企业去赋能，页面的结构肯定需要进行变化的，左边的图呢是改版之前的，右边的是改版之后的，那么我当时的思路呢其实就是基于数据方面去进行优化。

整体：产品策略添加了二级浮窗用来承载更多内容。

直播介绍：首先旧版策略是直播介绍对于用户而言并不重要，用户只需要通过看到直播标题就能够了解大致直播内容，更多是以引导形式存在，所以信息外漏较少，而新的策略是讲企业介绍默认展示在二级浮窗内，用户可选择关闭，提升企业感知。

投递简历：旧版策略是需要侧重用户投递率，因此在预约界面就展示入口，而新的策略是需要给企业强化观看人数、预约人数从而提升客户价值，基于这一点，我当时是通过数据后台看了下预约页面的点击数据，发现点击率最最高的是「投递简历」入口，而「预约直播」入口点击率相对较低，因此把投递简历入口调账到浮窗 tab 区域，降低层级，让预约直播成为视觉焦点，而上线后数据也是符合预期。

企业关注：将企业名称与关注结合并且放大，提升关注量，强化企业品牌感知和数据感知，关注与预约直播两者无论数据高低，都是符合企业目标，从而便于业务人员与企业进行合作沟通。

从我这个案例中我们能清楚看到，基本上任何需求都是可以通过数据的维度，进行优化，并且通过量化指标提升设计价值，无论对公司还是个人都有很大收益，并且我们追踪数据也便于后续我们与开发对接时，可以通过数据维度去促进我们设计上的修改、完善等工作，这也是为什么说我们需要对每个需求都要进行数据追踪。

总结

无论是对接前、对接中、对接后，在哪个阶段都需要我们认真对待，熟知这些细节后，才能更好的与开发合作，进行项目推进，优秀的设计师不仅是专业和技术上的成熟，还需要有协作上下游的能力，在很多团队中设计师跟开发都会面临不一样的挑战最终可能会因为某些问题发生冲突，我们需要减少这样的冲突。

作者：爱吃猫的鱼



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



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

1. 奇数原则和三分法构图

奇数法则意思是说，在设计作品中奇数元素比偶数元素更有趣。偶数元素在图像中产生了对称，这可能会显得过于正式和不自然。比如，在一行中排列三个或五个卡片会比 2 个或 4 个效果更好，作品会更加让用户感到舒服和自然。

Iskos Design 就是用的奇数原则做的网页设计

三分法构图（也被称之为黄金网格规则），在画面中以水平和竖直方向分成 3×3 的网格和 4 个交叉点。这个规则能很好的协助设计师将最重要的元素放在网格的交叉点上，这样可以很容易的设计出满意的构图。

为什么会这样？因为三分法构图创造了类似斐波那契数列(黄金比例)那种不对称的美，产生了更有吸引力的构图。

2. 视觉引导线

你希望用户关注哪些地方？高级设计师非常擅长引导用户的视觉焦点，这种引导可以通过可见和不可见的引导线来完成。这些线条在构图中也可以打造一种动感，也能为画面增添视觉冲击力。

达到这种效果通常用特定的形状和线条，或者是它们的组合形成难以察觉的引导线来实现。利用透视、颜色、对比度和正负空间同样可以帮助达到这种想要的效果。

从左到右的不易察觉的曲线将用户的视线引导到页面文字上

3. 大小和比例

大小（scale）是设计中一个元素与另一个元素的相对大小。元素通过大小不同创建视觉层次，其中最大的元素首先会吸引用户的注意力，因此看起来是最重要的。常规的设计策略就是将最重要的元素做成最大的，然后逐级递减。

比例(Proportion)不同于大小，类似但有区别。比例原则是指一个整体设计中各部分的尺寸关系。设计中的元素可以有各种大小，但它们之间的大小差异，整体来看就是比例。

熟练地使用大小和比例是实现设计统一的关键。当一些元素的大小过大或过小，或者比例失调时，设计组合就会失去统一性。这种错误可能发生在排版和其他元素上。例如，标题与子标题和正文相比显得过大。当设计元素失衡时，设计就会“感觉不平衡”。

大小和比例都没做好时(左图)，看起来处理的比较细致了，但依然没有做到很好，在大小上正文和标题分不清(右图)。

4. 强调

强调原则用于使设计的某些元素突出(使用对比、接近、比例、留白等)或不突出，即弱化强调(例如在页面底部有一个几乎看不见的“小字”)。强调是层级之母，因为没有强调就没有层级。

与其他一些设计原则一样，“强调”是用来引导人们关注设计，并强调需要重点关注的第一、第二和第三点。首页面和电商转化页面在 99%的情况下都使用这种原则。

使用这个原则，在购物网站上强调了标语和产品，转化效果非常好

5. 统一性

统一是指设计元素如何很好地结合在一起，形成“视觉凝聚力”。它指的是设计中的连贯性，让人们觉得所有部分都是一起的。每个元素都应该具有清晰的视觉关系，以帮助传达清晰、简洁的信息。整体性好的设计比整体性差的设计更有条理，质量也更高。

运用统一的配色，重复、平衡和对称之类的原则将有助于在设计中形成一种和谐感，也就是一致性。设计中良好的一致性就好比歌曲中一首歌被和谐地唱出来，形成一个完美的整体。

一致的颜色、重复的图案、平衡和对称在蒂芙尼的网站上创造了一种统一的感觉。

6. 接近原则

格式塔的接近原则让设计师将同类型的相关元素进行分组。把它们分开得更远，元素就显得越不相关，它们之间的关系就会减弱。一般来说，人们会认为远离的元素是不相关的。

不应该让用户在设计中分辨哪些元素是相互关联的，正如美国邮政服务的例子所显示的那样，缺乏对邻近性的关注会导致直接的认知紧张，损害用户体验。

接近原则没做好的案例。由于字段标签离它们下面的字段更近，人们可能会搞混

下面是一个邻近性原则做的好的案例，我们可以看到相关元素是如何通过邻近性关联起来的(分组的元素用紫色表示)。

一个把接近原则用好的网页设计案例

7. 一致性

一致性原则使数字产品的使用更加可预测，符合用户的期望。设计中的一致性可以培养熟悉度，它可以提高用户体验、可用性和用户使用效率。另一方面，不一致的设计将产生更多的认知负荷/脑力劳动，并导致困惑和挫折。这就相当于在用户的路径上设置障碍。让用户的心流嘎然而止!

做好一致性可以增强“审美凝聚力”。“我们都知道，当我们使用应用时，应用的导航位置如果经常变化，或者像“加入购物车”这样的主按钮在不同屏幕上从红色变成绿色，这是多么令人沮丧。

除了视觉一致性和易用性，品牌一致性在产品设计中也发挥着重要作用。如果没有一致的元素呈现，如排版、配色和图案，高质量的品牌体验将无法传递。

在用户体验方面，一致性意味着在设计中使用相似的 UI 元素来完成相似的任务，即在整个产品中拥有相似的功能和行为。因为可用性是一种评估用户界面易用性的质量属性，所以一致性对用户体验的可用性有很大的贡献。

一致性是通过使用相同的配色、排版、间距、模式和交互来实现的。

8. 颜色

颜色在设计中是非常重要，几乎是设计中最具影响力的创意元素。一个深思熟虑的配色可以让一个设计从普通到惊艳，而一个平庸的配色会降低用户的体验，甚至阻碍他们使用产品的能力。

明亮、丰富的颜色比柔和的颜色更引人注目，因此有更大的视觉冲击。柔和的颜色可以提供一个令人愉快的，微妙的配色方案，但适当的对比必须要有，特别是文字，必须保证可读性。

颜色甚至可以用于呈现 UI 中的结构感并指向可用的交互，但为设计制作一个配色方案并不是一项简单的任务。除了品牌化，还必须非常小心地创造颜色的和谐和耐用性，使得它能在各个场景下都能正常使用。

色彩心理学也不容忽视。色彩承载着意义和情感，可以向人的潜意识传递信息。在品牌方面，人们对颜色做了大量的心理学研究，因为在人们与品牌进行任何互动之前，颜色会让他们产生一种本能的反应。例如，蓝色通常被认为是可靠的、安全的和平静的，想想银行；而红色是刺激的，被认为是增加人们的心率，想想饮料包装。

一个极简主义的暗色主题设计传达了一个特定的品牌气质，并使用了少量的颜色。

9. 排版

排版在设计中扮演着非常重要的角色，它的重要性再怎么强调都不为过。在构图中，字体样式对人们感知设计的影响比任何其他元素都大，可能除了颜色。

因为我们的大脑以闪电般的速度运转，一个字体会对一个设计产生影响，以至于它可能在不到一眨眼的时间内改变用户的印象。与颜色一样，字体甚至会影响我们的情绪，资深设计师可以通过字体传达情绪和风格。通过选择合适的字体，我们可以传达出稳定、优雅、舒适、可靠、有力等信息。

排版层次结构可以快速建立视觉层次结构，并且通常在其中扮演重要角色。因此，在设计中经常使用不同的字体和字体大小来表示层次结构，例如标题、副标题、正文和引用。

“除了确保文本清晰易读，排版可以帮助你理清信息层次，传达重要内容，并表达你的品牌。” ——苹果的人机界面指南

兰博基尼的网站巧妙地使用了排版风格和比例来赋予其设计力量。

10. 负空间(又名留白)

Claude Debussy 曾说过，“音乐是音符之间的空间“。同样的观点也适用于设计，元素之间的负空间给予设计强调、平衡和统一。

元素周围适当的负空间将焦点集中在元素本身。它强调了内容，并提供了必要的喘息空间，以确保布局不显得杂乱。没有了呼吸空间，人脑就不太可能扫描兴趣点，更容易感到困惑。

苹果官网提供了一个利用负空间创造强烈焦点的杰出例子。

11. 最后

人们已经开始期待所有平台和设备上的优化、无阻碍的用户体验。理解设计原则及其交互方式对所有设计师来说都是至关重要的。使用专业技能设计它们是创造具有视觉吸引力的功能性设计的关键。我们不要忘记，美学的完整性会严重影响用户体验。

基于原则的设计是设计师在感觉有点迷失或用尽创意时可以依赖的黄金标准方法。在没有理解和实现设计原则的情况下，也可能实现可接受的设计。然而，这可能需要大量的尝试和错误才能创造出看起来不错的内容，并创造出最佳的用户体验。

产品的美学质量与它的实用性密不可分，因为我们每天使用的产品影响着我们和我们的幸福。但只有精心制作的物品才会美丽。— Dieter Rams(迪特尔·拉姆斯)

当我们不关注由设计原则驱动的设计质量时，我们可能会忽视品牌质量及其所代表的一切。当某些东西设计不好时，品牌就会受到伤害，产品也会受到影响。这就是为什么伟大的设计师在他们的工作中极其严谨， 他们知道“你永远不会有第二次机会给人留下良好的第一印象。”

设计的细节成就了设计本身。—— 查尔斯 伊姆斯（Charles Eames）

作者：彩云Sky

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。 

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 

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

1. 前言

悬浮小窗是什么？

先看张图，对悬浮小窗有一个大致的概念，下图是花椒直播 APP 中的直播悬浮小窗。（为方便书写，下文将悬浮小窗简称为小窗）

本文的悬浮小窗指的是视觉空间上的层级概念。

用户的感知是：

1. 自己退出了 A 房间到达了另一个 B 房间
2. 同时 A 房间并未完全关闭，而是以一个小窗口的方式悬浮着
3. 我随时可以点击这个小窗口返回 A 房间

为什么这种感知能应用到互联网产品中？

原因就在于这符合尼尔森可用性原则中的系统与用户现实匹配原则。

即：设计应与用户现实生活中对相关产品的认知、经验、习惯等相符，以用户期望的方式表现出来，使用户可以利用已有的知识经验来执行操作任务。

翻译成人话就是让用户在使用我们的产品时能够和现实生活中的习惯对应起来。

举个例子：

电商软件中“购物车”为什么使用购物车这一形象和名称？

其实就是和现实生活对应起来的，生活中逛超市的时候会把要买的东西加入购物车一起结算。所以“购物车”这个概念迁移到互联网后用户的理解成本就非常低。

悬浮小窗也是一样的道理，小窗模拟了生活中的空间转移，在用户的心智层，界面与界面之间的跳转就类似于从一个房间到达另一个房间。

即使某些时候多个界面在技术的角度其实就是一个页面，但是站在用户的角度看不到这些底层逻辑，最直观的就是一个个房间之间的切换。

（其实这里还涉及到另一个概念，把简单留给用户，把复杂留给程序。不管逻辑多复杂，对用户来说，就是两个空间的跳转。）

2. 悬浮小窗的特点

悬浮小窗有三个特点：可切换界面、Z 轴最高、可拖拽（一般情况）。

① 可切换界面

如上一节所说，悬浮小窗就像是房间的切换，所以感官上悬浮小窗就是切换界面的作用。

② Z 轴最高

二维界面如何存在 Z 轴的概念？

大家在使用 APP 过程中一定遇到过弹窗和浮层的情况，如下图，可以看到图中 APP 的弹窗在感知上是覆盖在内容层上的。

而右边的截图中的浮层是浮在正文内容上的，这就是 Z 轴，在互联网应用中这是比较抽象的空间维度。但是却是用户可以明确感知到的，而感知的最直接方式就是覆盖或者悬浮，感觉到 A 元素是覆盖在 B 元素之上，或者 A 元素悬浮在 B 元素之上。

而悬浮小窗所谓 Z 轴最高则是因为悬浮小窗在 Z 轴的维度一般位于 APP 界面所有元素之上。

③ 可拖拽

可拖拽很好理解，即用户可以通过拖拽移动悬浮小窗的位置，不过一般非直播音频类产品会喜欢固定在界面的某个地方。比如得到 APP 在听书时退出听书页面会在底部固定一个播放条。

3. 悬浮小窗分类

技术维度把悬浮小窗分为两种：系统自带和自行开发。

内容维度上把悬浮小窗分为三种：视频小窗、音频小窗、文档小窗（含白板）

由于系统自带画中画功能自定义程度不高，无参考意义，下文主要从自行开发的悬浮小窗入手，从视频小窗、音频小窗和文档小窗（含白板）三种分类来进行分析。

4. 总结

此部分内容是对第三部分的总结提炼，相关产品详细分析、截图以及录屏细节请查看第三部分。

① 视频小窗

GIF 演示（左滑屏幕边缘开启小窗）

GIF 演示（拖拽小窗超出屏幕边缘后关闭）

视频小窗 UI 集合

② 音频小窗总结

音频小窗 UI 集合

③ 文档小窗

文档小窗 UI 集合

5. 样本分析

本次调研 APP 覆盖直播、音乐、社交、教育、会议、资讯四个方向，包括斗鱼、虎牙、花椒直播、企鹅直播、CC 直播、阿里巴巴、淘宝、酷狗直播、陌陌、微信、陌陌、百度知道、迈聆会议、金山会议、网易会议、共计 15 款 APP。

① 视频小窗

视频小窗将从功能和 UI 两个大的维度进行分析，细分维度如下表格。

斗鱼

APP 简介：以游戏直播为主的互动式直播平台

亮点

a 导航栏免遮挡，小窗拖拽移动过程中不会覆盖一级导航和一级页面的底部 tab 栏，可避免将主要导航遮挡住

b「关闭」按钮视觉强度较弱的同时能够看清 icon

槽点

放大缩小不流畅，有卡顿的感觉

虎牙直播

APP 简介：包含游戏、娱乐的互动式直播平台

亮点

a 滑动小窗到屏幕关闭小窗：除了点击关闭按钮，还可以左滑小窗到左右屏幕边缘，超出屏幕 2/3 时关闭小窗

b 同斗鱼，导航栏免遮挡，小窗拖拽移动过程中不会覆盖一级导航和一级页面的底部 tab 栏，可避免将主要导航遮挡住

槽点

自动打开声音：在小窗上将声音关闭后，点击小窗上的放大按钮进入全屏模式，此时声音会自动打开。声音的开关应该由用户自行选择而非帮用户做选择，万一用户所处场合不适合开声音，突然开启的声音岂不是很尴尬。

花椒直播

APP 简介：包含游戏、娱乐的互动式直播平台

槽点

a 同虎牙，关闭声音的情况下打开直播间会自动打开声音

小窗会移动时可以挡住顶部一级导航栏

得到

APP 简介：知识服务 APP，提供电子书、课程等服务。视频以点播为主。

亮点

向下滑动视频触发小窗的方式交互非常友好且顺手

页面切换到有『发布』悬浮按钮时，悬浮按钮位置位于小窗之上，避免遮挡发布按钮

作者：土拨鼠



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



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