在电商产品中，产品详情页的设计、或者说产品站的设计是十分重要的，因为这一板块很大程度上影响着销售转化。那么，产品站的设计该怎么做，才能达到更好的展示效果呢？这篇文章里，作者做了分析和解读，一起来看看吧。

前言

电商产品最重要的两个板块，一是首页，负责流量分发；二是产品站，也叫产品详情页，负责销售转化；这两个板块基本串联着整个产品，设计的好坏，直接影响购物体验和转化。

前阵子跟大家分享了小米商城首页设计改版，这次分享产品站，产品站的改版过程持续了多半年，踩了很多坑，总结了很多有价值的经验，接下来跟大家一并分享。

分享的内容分为四个方面：用户篇-需求篇-竞品篇-改版篇，每个环节循序渐进，层层环扣，本文尽可能把改版的底层逻辑说明白，讲透彻。

一、用户篇-购买情绪

人是情绪动物，当用户购买商品时，无论是在线下还是在线上，都会有不一样的情绪行为，比如有时会特别爽快下单，有时又会犹犹豫豫没有购买冲动，有时还会精挑细选花费很长时间最后决定先加入购物车，这些都是购买情绪。

影响购买情绪的因素非常之多，比如用户需求的强弱、对品牌的认可度、产品的功能、服务感受、价值感、信任感、安全感等等。在销售过程中，若能够掌控用户购买情绪，那就会大大增加用户下单的意愿。

购买情绪大体可分为三大类，果断型、感性型、理性型，三者因为购买情绪的不同，在购买过程中，关注点和心态也会有所不一样，所以“对症下药”才能更好的促销售。

1. 果断购买情绪

一般需求明确且强烈，亦是对品牌认可，对产品信任，购买过程中，看重关键要素需求，以目标为导向。

这类用户群体最具价值，是平台的宝贵财富，他们往往对品牌认可度高，对平台信任，粘性高，购买行为大多是果断下单，同时多数人还愿意将品牌/产品推荐给他人。

场景再现：

用户：期待的小米14终于问世了，参数真的很高能，拍照无敌，必须整一个；想买个扫地机看了好几个，还是买小米的吧，毕竟大品牌服务好；必须官方平台购买，没优惠无所谓，正品保证，物流快，服务可靠。

2. 感性购买情绪

感性购买情绪也容易果断下单，但下单的动机与果断情绪下单的动机不同，“果断”是因为对品牌，对平台信任，需求也强烈；“感性”则可能是因，产品外观好看，或是有朋友推荐，再或是联想到了产品的某个使用场景，从而触发了感性情绪而下单。

打动感性情绪用户，从UI设计上来讲，要保证高质量且好看的产品图，全方位展示产品的细节、产品的使用场景图、感性的文案、规范的页面设计等等。

当然这些只是能够助力用户下单的因素，对于品牌电商来说，让用户爱上品牌才是真正的价值，所以平台还要不断传递品牌价值和产品优势，提升产品力，同时给到用户真诚贴心的服务，长此以往，用户就会对品牌产生潜移默化的认可。

场景再现：

用户：哇唔，这款手表也太好看了吧，还是（XXX明星）同款，跟我那件衣服也很搭，买买买；这包在模特身上气质绝佳，放我身上肯定也不错，买回来试试。

3. 理性购买情绪

一般来说，用户对于没用过的品牌，不了解的产品，不熟悉的购物平台，通常是理性情绪，这是很自然的心理现象。

也有很多人，在消费上一贯是理性情绪，正所谓钱要花在刀刃上，要找到最合适的产品，认同的价格，才会入手。

理性情绪用户关注点一般有两个方向：一个是关注产品的性价比、客观评价、售后服务、产品功能细节等；另一个是关注自我价值认同，这就需要让用户感受到信任感、价值感、安全感等。

所以在产品设计上，能够快速有效让用户对比商品，另外评价体系在设计和运营上做好体验，同时UI设计上还要巧用品牌元素，表达品牌感。

对于品牌商城，还要强调官方商城，服务至上等运营理念等，这些都是助力理性情绪用户下单的条件。

场景再现：

用户：嗯这个产品感觉不错，先去看看评价，评价有人说不好啊，再看看吧；这两个款都还行，纠结，先都加入购物车，再看看有没有更好的；不了解产品，不知道买哪个，找朋友推荐一下吧；这服务态度太差了，以后都不会买这个品牌了。

4. 小结

每个人都会存在这三种购买情绪，所以在设计上，应该是综合的，即要对“果断”亲和、又要对“感性”友好、还要对“理性”有效，好的电商平台基本都做到了这三点。

二、需求篇-设计方向

产品站改版属于重点的大项目，这样级别的项目，难度非常之大，首先要明确改版方向，从产品、交互、设计角度总结问题，其次要做用户调研，过往数据研究并具体分析，竞品分析等等。

关于设计方向和问题总结，在部门大会时，老板提了很多，拿到资料做了一下梳理，下图所示。

这些内容是最具价值的需求和问题总结，“需求”是公司的发展战略，“问题”是近几年的用户反馈积累，所以这次产品站的改版目标非常明确。

1. 问题与需求总结

通过对需求和问题的总结，再结合各种调研和产品设计的思考，我们总结了六点改版的方向。

1）产品定位不清晰

有官网之名，无官网之魂，购物体验差。

2）产品站信息乱，不易理解

无法捕捉产品卖点浏览效率低，不容易高效对比同类产品。

3）线上线下融合

同价同促，通过门店自提，门店闪送，增加门店订单量。

4）官网形象高端化

提升用户体验，服务体验更贴心。

5）做好新品及自营大促

持续建立官网认知，将官网价值内核转化为用户语言，通过关键节点传递，建立官网心智。

6）承载手机 x汽车

一体化销售服务。

结合这六点总结，再依据品牌电商产品的定位，公司战略，分析现有问题，思考设计解决方案，下面我们来研究几个问题。

第一个提到了“产品定位不清晰”，先去找找原因，看下图是能否快速感知到，哪个是小米商城的产品站，我们做了一些调研，多数人很难分的清楚，甚至有相当一部分人会误认为这都是淘宝。

在产品站的页面中，最具有产品辨识度的底部按钮，两款产品设计形式与颜色几乎一摸一样，从品牌势能上来看，淘宝强于品牌电商的小米商城，所以把小米商城误以为是淘宝很正常。

当然产品定位不清晰，不能只从设计上去看，比如产品逻辑，运营策略都能体现一个产品的定位，甚至客服的话术也是如此，比如小米商城的客服也跟用户说“亲”，那就很难形成自我品牌定位的认知。

对于品牌电商来说，要有自我的品牌调性，这不仅是用户认识你的基础，更是品牌发挥优势的重要能力。

很多设计师认为，借鉴主流成熟产品的设计不容易出错，有一定的道理，但是这不应该是你思考的主线，主线是先找准自家产品的定位，其次才是如何结合主流产品优点，打造自己的产品。

第二个问题说到，“产品站信息乱，不易理解，浏览效率低，不容易高效对比同类产品”，原因是头图信息太多，标题下方也是文字堆积，想给用户的信息太多，反而导致用户根本不会去读这些信息，所以提炼信息和重新排版设计迫在眉睫。

其中提到的“不容易高效对比同类产品”原因也很显然，“机型对比”的设计形式，像不可点击的标签，从点击数据上来看，确实极低，在用户调研中，也有很大一部分人认为不可点击。

一个信息冗余的页面，没有品牌元素信息、也没有表达自我的设计语言，注定会大大影响用户的购物体验，甚至还会拉低用户对品牌的好感与信任。

以上是简单的做了几个问题分析，分析问题，研究需求，是为了思考接下来的设计语言的制定。

2. 设计语言/原则

设计语言是“塑造自我”的重要表达方式，一个优秀的产品一定是有自身的设计语言，所以我们要打造一套符合小米商城定位的设计语言。

根据小米商城品牌电商的产品定位，公司高端化战略，再经过一系列的研究和探索，最终总结制定4条产品设计语言/原则。

1）回归产品本身

聚焦产品价值为核心，回归本真主打产品秀，营销信息合理展示。

2）克制的

克制色彩营销的导向， 复杂的设计，助力品牌高端化。

3）极致的

以用户语言，打造产品细节，打磨用户体验，做好服务。

4）有品牌感知的

提取品牌DNA，建立官网心智，打造官方商城优势。

有了设计语言就有了设计风格指导，这四条设计语言不仅仅是支持产品站的设计，而是贯通指导整个产品的设计。

三、竞品篇-认识自己

在设计改版前，主线是研究自家的产品，次线是对竞品有充分的了解，知己知彼，才能更好进行自己的设计。

1. 产品定位

通过对市面上主流电商产品设计的研究，能够分析出，综合类电商与品牌电商的产品定位差异。

以上是综合类电商，即全品类，此类平台的特征是追求性价比，满足消费者物质层面需求，购买动机是功能、卖点、价值等利益点，UI设计需要注重氛围渲染，刺激消费欲望。

以上是品牌电商，产品设计注重的是赋能品牌，追求品牌溢价，满足用户精神层面需求，如身份的价值认同，用户的购买动机非常注重品质，以及是否符合自己的社会属性等方面。

在UI设计上，不能过分强调利益点，不能过度刺激消费，应聚焦商品本身，强调商品卖点，体现商品的本身价值、品牌价值。

从设计风格上来看，综合类电商设计，营销感强，注重热闹的氛围渲染；品牌电商则设计更轻量，聚焦产品功能卖点，营销感较低。

2. 认识自己-模块分析

认识自己远比研究竞品更重要（强东哥说过这话），我个人非常认同。接下来，我们全方位的拆解小米商城产品站，同时进行模块化分析。

首先分析每个模块的历史数据，是否符合预期，这里的预期指的是某个入口的点击率是否正常，如果异常思考如何改版。

然后分析每个模块的功能作用，是否可以改进，满足新需求，助力新业务，从设计上来看是否合理美观，最后再结合新的设计语言进行改版。

产品站的信息传递逻辑是循序渐进，首先让用户快速获取商品信息，产生信任情绪，认可品牌/商品价值，从而产生下单行为。

产品站的整体设计，如若让三种情绪用户（果断型、感性型、理性型）在购物过程中，通过不同的信息，促进下单概率，并非容易，所以页面的信息排布的合理性尤为重要，接下来开始改版。

四、改版篇-案例解析

在产品站改版的半年多时间里，中大概出了7-8版，一直在不断的优化调整，下面以最终稿来讲解。

上图是新旧版本的首屏对比，设计风格上有重大变化，变得更轻量，日常样式优惠政策都聚合在一个入口中，让日常的营销感弱下来。

首屏应该，也是最重要的，能让用户快速了解产品，所以首屏应更多展示产品外观、配置、功能等信息。

1. 头图改版

头图在非大促期间，不做任何营销信息的设计，保持干净整洁的风格，这能满足追求品质感用户的心理期望，同时也是满足感性购买情绪用户的因素之一。

整洁有品质设计，能提升产品在用户心中的溢价空间，简单说就是用户觉得很值；杂乱的设计，优惠信息冗余，用户没有安全感，不能直接感受到，能不能享受到最优惠的政策。

新版的设计理念，结合设计语言“回归产品本身”，打造产品秀，让用户去感受产品本身的价值，对于品牌电商，用户被产品吸引，远比促销信息吸引更有价值。

手机是平台最重要的主营业务之一，为了能更好的展示手机，新版头图的设计，增加了颜色切换的交互功能，此功能后台可配置，也可用于其他多色产品的展示。

交互逻辑是，当用户选中一个颜色手机后，然后在往后滑动切换图片浏览，这时看到的图片都是关于当前选中的颜色手机图片。

另外，旧版的头图数量没做限制，运营同学常常会上传几十张图片（上图中旧版头图上传了24张），这个量级不仅没有起到精准的价值信息传递，反而让用户在此区域停留时间过长，产生厌倦情绪。

同时，从技术的角度来讲，过多的图片产品性能受影响，产生加载和卡顿也影响用户体验。

改版后，重新制定了策略，根据7±2原则，做了最多9张的限制，如果是有颜色切换商品，那就每个颜色分别可以最多上传9张，同时，建议运营同学上传6-9张为宜。

2. 图标设计

顶部icon的优化，旧版三个icon加了黑色透明底，从设计的角度上来看，加肯定没有不加更简洁美观。

加黑色背景，设计的初衷当然是为了适应杂乱信息，或在黑色背景下避免有撞色冲突。

其实，对于品牌电商来说，并不会像B2B电商平台，商家自行上传头图，图片规范质量不可控。

对于，自营品牌电商上传的头图完全可控，设计师制定设计规范，即可大概率避免撞色的情况。

再者，当用户左右滑动头图时，用户关注的是图片信息，一般不会对上面的三个图标有兴趣，所以即便颜色冲突看不见也无关紧要，为了一个无关紧要的能力，影响视觉表现其实有点因小失大。

3. 视频/图片

“视频”“图片”按钮切换的视觉改版，旧板与当时的淘宝也是如出一辙，根据新的设计语言，商品应该是最优展示，所以改掉突出的色块设计，包括头图直播的图标也是同样的设计理念，色块多了就会变得杂乱。

对于借鉴的理解：

淘宝、京东这样的国民产品，当然要借鉴，但一定是借鉴他们产品的结构，他们培养出来的用户习惯，他们的产品底层逻辑，UI的设计要避免同质化。

4. 3D展示

接下来借鉴一下主流产品的结构，一个商品可以3D展示，就能让用户很灵动的观察到产品的更多细节，体验会非常好，尤其对感性购买情绪用户。

刚说到头图主打一个产品秀，所以产品的3D展示入口，一定是在头图上，这非常符合用户的浏览商品逻辑，也是主流电商培养出来的用户习惯。

行内的人都知道，产品3D展示的功能，非常花钱，若第三方开发，一般也是部署在人家的服务器上，按周期付费，一次性买断很贵。

旧版的点击数据非常低，不符合此功能的预期，等于是花了大价钱开发的功能，并没有发挥出应有的价值。

5. 头图规范

头图产品的展示制定了设计规范，这样能保证各种形状产品展示，在视觉上都是相对一样的大小。

6. 优惠/属性模块改版

风格上采用了卡片式设计语言，原因有两点，当时较为流行，另外就是卡片式设计能够节省页面长度，同样的内容，卡片式设计省空间。

7. 价格设计

价格改为黑色，设计的理念是页面中出现的红色元素，尽可能是优惠相关的信息，要给用户打造这种心智，黑色的价格更为冷静，等于削弱了营销感。

8. 优惠入口设计

价格下面依旧是优惠信息汇总的入口，但是做了轻量化处理，比如去掉了色块按钮，标签做统一样式设计，并且只最多只展示三个优惠政策标签，这样次区域不会出现折行的复杂样式。

产品名称改为变动展示，比如在“已选”中选择了其他规格参数，那价格与产品名称的规格参数信息都会对应变化，这是旧版没有的功能，是多数电商平台都有的功能。

9. 排行榜/副标题

标题下方优先展示排行榜，若此品没有排行榜，就配置一行副标题，且灰色字，这样整体会有视觉层次。

旧版之所以看起来乱，一是排版问题，二是视觉层级没拉开，导致整体看起来是一篇“小作文”。

排行榜设计理念：

自营品牌电商排行榜的作用，是让用户对商品产生价值感，用户对产品有兴趣恰好排名还高，这种客观信息的传递，就会让用户产生价值感受，对于客观正向、权威的价值信息，最能打动理性购买情绪用户。

其实用户点不点击排行榜，对平台来说不重要，从品牌电商来讲，都是自家的孩子，都是宝，谁愿意让别人看到自家孩子谁好谁差点呢。

而综合类电商排行榜，一般要强化入口设计，引导用户点击，让用户做最优选择，这样不仅能提高了用户选品的体验，还能激励商家做好产品，力争好的名次。

设计很多时候的底层逻辑，来源于商业模式，盲目的借鉴，不思考设计逻辑，就会荒诞不经。

10. 按钮位置调整

产品名称的右侧“分享”功能改为了“对比”，用户对比产品，一定是基于当前产品，所以在产品名称旁边放置对比功能入口，合情合理。

新旧两版虽都有对比功能，但因为入口位置设计不同，用户的使用体验差异就很不一样，数据也会有较大的差距。

旧版的分享按钮，在产品名称旁边也合理，但在页面上方已有常驻的分享功能，重复出现的必要性不大，况且分享在上方已是一个通用认知，所以放置“对比”按钮更具价值。

11. 图标设计问题

说一下旧版“分享”图标的设计问题，在一个不规则的区域，放一个不规则的图标，就等于是乱上加乱，非常不美观突兀。

产品名右侧的空位，上方、左方、下方都是不规则的空间间距，这时在设计上，要不图标颜色弱下来，要不强一点，要不设计的更整体，才能看起来融入的更好，更整体。

12. 活动小入口

下图是活动入口的设计改版，此活动入口是，对应当前产品的优惠活动入口，点击后跳转活动页。

活动即是优惠政策，所以新版加了红色标签，并且红色标签也能强调了活动属性，旧版设计形式较弱，很难引起用户的注意，历史数据也不是很好。

13. 选购指南

先说结论，“选购指南”在产品站出现不合理。

当用户进入一个产品的详情页，说明用户的需求是明确的，同时用户对当前商品也是有兴趣的，所以这里出现“选购指南”的功能，与用户此时的心境不贴切。

举个例子，当用户的需求是买一部手机，此时不知道想买哪款，这时应该给用户提供“选购指南”，这种场景常出现在搜索结果页。

比如用户搜索“手机”，而不是精准的搜索某款手机，这种情况用户大概率购买手机的目标是不清晰的，所以，此时的搜索结果页应该出现“选购指南”功能。

14. 关键参数

关键参数模块做了两个关键的改版，一是增加了产品的上市时间，并且永远在第一个，因为从客服的数据上来看，用户问“这款产品什么时候上市的？”的频率非常之高，所以用户需要这个信息。

另外一个是增加了“更多参数”的点击引导，因为在用户调研中，很多用户不知道这里是可以点击跳转的。

15. 已选/收货方式

1）已选

已选模块改版，增加了机型颜色及数量信息展示，这样能进一步强化用户对产品的了解，同时起到品宣的作用。

点击此入口，链接的是购买流程页面，所以视觉上加强引导也非常有必要。

当用户在已选页面，重新选择参数后，页面上方的价格及产品名称联动同步变化。

2）快递配送

这里的改版做了很大的业务挑战，主要是改变了下单、配送时间的表达方式。

旧版配送文案是这样表达“明天14点前付款，预计4月21日送达”（当前时间14点），所以，付款周期是24小时，这样就会给用户发货速度很慢的感觉，等于跟用户说，“你明天这个时候下单也是一样的时间到货”。

因为付款周期长，用户还会产生拖延下单的心理，最终就有可能导致订单的流失。

修改后，根据当前时间，匹配物流业务，把下单提示时间控制在当前天。

• “现在下单，预计【今天】21:00前送达”（当日到订单）
• “今天11点前下单，预计【明天】18:00前送达”（上午下单）
• “今天18点前下单，预计4月21日送达”（下午下单）

新版-调整后

“今天”“明天”到达，这样的关键词都是用户的爽点，能吸引用户下单，所以设计上要重点提醒，万万不可把“今天”“明天”的时间以“XX月XX日”呈现。

3）门店闪送

新版

闪送是一个新增的业务，业务特点就是块，所以送达时间要精确到分钟，文案信息一定是“现在下单，预计最快今日12:08送达”，主打一个快，因为用户选择闪送业务，就是选择了配送速度。

4）到店自取

设计一个功能，首先搞清楚业务逻辑非常非常重要，“快递发货”“门店闪送”都是货找人，而到店自提是人找货，所以给用户传递的文案信息肯定是不一样的。

旧版

新版

旧版的名称叫“门店”，新版改为“到店自提”，虽然两者都是线上付款，线下提货，但是“门店”这个标题就没有表达清楚当前的业务属性。

旧版虽然已定位了一个最近门店，但交互上还需要点击到二级页面，重新选择门店，才可以进入支付流程，如果选择的门店缺货，那无法进入支付流程，且没有任何提示，购物体验很不友好。

新版外露的门店，一定是距离最优，且有货的门店，同时用户最关心的，门店具体位置，一定要完整露出，不要有省略号。

另外，给到PM的一个建议是，取消“库存紧张”的标签，有货就是有货，没货就是没货，品牌电商应该有一个更真诚的态度。

以上“快递发货”“门店闪送“”到店自提“，用户下单可以三选一，后两者与门店紧密结合，这就是满足这次改版需求中，提到的助力新零售模式。

5）一个错误想法

在第一版的改版中，当时我满脑子都想着如何助力新零售模式，所以在产品站中我试着增加了“附近小米之家”。

这个设计等于是给门店做了引流，从小米商城APP平台来讲，更希望用户在上线下单，而不是把用户引导进门店购物，所以这个设计不符合平台的业务策略。

但是，因为新零售线上线下是一家，“附近小米之家”模块不在产品站中出现，也应该在其他板块里有所体现。

现在在“服务”Tab中有“小米之家”，这样不仅能更好的为售后做好承接，也能起到对门店的宣传。

16. 官方服务

官方服务的信息，能够让用户产生信任感，能体现官方优势，也是最能打动理性购物情绪用户的信息。

其实官方商城有天然的信任属性，来官方商城购物的用户，很多就是图个放心，图个服务好，追求的就是一个保障和信任，所以设计上信任属性着重去表现很合理。

新版增加了突出的logo标识，标签也采用logo的外轮廓，用于强调品牌感，小米logo的外轮廓已经是小米商城的一个设计语言，目的就是建立用户对小米商城的品牌认知度。

另外，整个区域可以点击，但不引导用户操作，原因就是都是一些常规信息，外露信息足以打造信任要求，没必要引导用户点击，这一点也是与旧版有所差异。

17. 推荐搭购

推荐搭购是买主品的同时，搭购一些与主品有关联的推荐品，这样有时会有一些优惠政策。

新版的设计上主品与搭购品，在样式上有所区分，这样信息传递更高效合理，推荐搭配商品也是展示更多。

同时，新版还增加了主品的规格选择，这样用户若在此模块决定搭购商品，操作上更灵活，选择规格后，可以直接看到最终的价格。

在价格展示上也有优化，总价也用黑色与首屏的价格颜色保持一致，优惠价格则使用红色突出，这样更加吸引用户，同时符合整体的设计理念，即只要看到红色就是优惠信息。

取消此处的购买大按钮，数据表明极少有用户在这里直接下单，原因就是这不符合用户的操作习惯，所以这里只做搭购商品的选择，然后统一在底部的按钮进入结算流程。

18. 信任体系改版

在产品站中“评价”“问答“”测评“，三个模块是最能打动用户的客观信息，客观信息更能表现真实性，所以容易让用户产生信任情绪。

理性购买情绪用户，一般线上购物会直奔评价区，看见好评数量高就会安心，看见差评就容易动摇。

19. 评价

旧版的设计形式是，米圈包含买家秀（评价），这种包含的设计形式，在我看来是一个错误的逻辑，用户在此处很容易变得迷茫，不知道进哪个。

米圈包含评价的设计形式，会导致用户有知行不一的操作，心里想的看评价，结果进入的是米圈。

在新版的设计中，去掉了此处的米圈入口，当点击评价时，进入的就是米圈下的评价tab。

旧版的评价模块名称叫“买家秀”，这个词其实是淘宝的基因，这极不符合小米商城的调性，所以在新版中，也改为了业内通用名称“评价”。

当评价数字千位数时显示（XXXX），万位数时显示（X万+），这样的展示逻辑，数字过长时，数字大小第一视觉感知也是明确的。

另外，评价信息增加“好评率”，这个也是本身就有的数据接口。

最后还有一个细节的增加，新版用户评价信息的下方，增加了评价用户购买产品的规格，根据人的从众心理，能给用户带来快速做决策的能力。

20. 问答

问答的改版非常简单，就是根据我们的设计语言“克制的”，做了去色处理，保证我们整个页面的视觉逻辑，红色都是优惠信息。

21. 评测

评测主要做了排版的调整，旧版评测名称和用户名称，时常不能完全显示，这样就导致用户对主题意思不明，就会降低用户对评测视频的点击兴趣。

22. 商品推荐

此模块的作用是，比如在餐厅吃饭，不知道点什么菜，突然看到了旁边海报上的推荐菜，这样就为用户做了引导，这种形式能提升用户体验。

但是海报上的推荐菜太多，那又会增加用户的选择成本，所以新版的设计每帧给用户推荐三个品，同样可以侧滑查看更多，同时也增加了所有推荐品的承接页。

这样的好处不仅节省了整个页面的长度，也为不关心此模块的用户，提高了当前产品信息的浏览效率。

23. 底部导航按钮

“加入购物车”与“立即购买”按钮重新做了设计，与淘宝设计风格拉开差距，图标做了加粗处理，视觉表现厚重敦实，会给人一种可靠安全感，这也是品牌电商需要的气质。

另外，去掉了“收藏”功能，对于品牌电商来说，品类不多，也不存在店铺的概念，所以对用户来说，收藏的功能必要性不强，并且加入购物车功能完全满足收藏的需求，事实也如此，数据上收藏的点击率非常低。

过程稿解析：

上图是最早的一版，有三个不同之处，“购物车”改为“购物袋”、按钮改为圆角矩形、文案“立即购买”改为“购买”。

“购物车”改为“购物袋”：

我之所以想改为“购物袋”，原因是分析小米之家的购物场景，在小米之家购物时，没人会推着购物车买东西，购物车只有在超市购物才会用到，所以购物袋心智更符合小米之家的购物场景。

再比如卖车的APP，也绝对不能有加入购物车、购物袋一说，现实中不符合逻辑呀，现实中买车都是订购，所以线上用订购就是对的。

虽然我坚持想用“购物袋”但是奈何我推不动，阻力太大，他们的观点是，主流电商都叫“购物车”所以不出错，我也是认同了。

圆角矩形按钮：

我想用圆角矩形的原因是，圆角矩形稳重、严肃、圆角又不失亲和力，外形与手机也相似，是小米商城应该有的气质。

设计之初我也能预料到，改按钮形状的难度，因为小米商城之前的设计语言都是圆角按钮，一个产品中可能有上百个圆角按钮，要换都得统一换，难度非常大，所以，最后还是采用圆角按钮。

“立即购买”改为“购买”：

“立即购买”的意思有营销感，我依旧坚持品牌电商在常规的设计上，要去营销化，去掉销售心理学上的套路，诚实、真诚才是品牌电商应该有的调性，让产品力干掉一切。

三者虽然最终都没有落地通过，但有部分人认同这三点的改版，我觉得努力就没有白费。

终稿整体效果

最终设计完成，得到了大老板与业务方的肯定，下图为产品站改版前后的对比。

中后台工具产品的面向用户人群大多在企业内部，通常情况下，产品经理可能会更加注重功能和业务逻辑，但其实，中后台产品的交互体验也十分重要，优秀的交互体验，可以减少业务人员使用产品时所产生的困惑。一起来看看本文为中后台产品经理所总结的交互知识吧。

前言介绍

中后台工具产品指的是为企业内部用户提供产品模块，这类产品相较于用户端（C 端），由于用户人群受限于企业内部，因此交互体验的容错性会更大，因此中后台的产品经理通常更关注功能和业务逻辑，而轻视交互体验。

伴随企业规模和用户群体扩大，其实中后台一些较差的产品交互体验，实际上也会对前线作业人员带来更大的干扰，因此本文期望通过整理一些常用的交互知识，让中后台产品经理能够在日常工作中作出一些合理设计和判断。

一、用户端与中后台产品相同点与区别

1. 相同点

1. 都要给人使用；
2. 都要兼顾用户体验和业务之间的平衡；
3. 产品设计的核心思想：解决什么问题。

2. 不同点

从产品设计角度来说，用户端产品偏重用户体验，中后台产品偏重信息流。

中后台产品追求如何让用户在最短时间，最短路径，最低成本达到目的。

中后台端产品来说，要解决的主要是不同生产关系的协作沟通需求，在中心化的组织架构下，中后台产品需要满足不同层级，组织内外的协作沟通。中后台产品需要考虑比如权限设计，角色分配，运营数据展示等功能，在功能稳定的前提下提升生产效率。

二、什么是好的用户体验

中后台产品面向的用户对象是企业内部，使用相关产品的用户也是人，因此好的用户体验的原理是相通的。

用户体验良好的判定标准是：别让用户想、别让用户猜、别人用户烦。针对中后台流程性产品，细化来看在操作前、中、后都需要有良好的提示与反馈。

1. 操作前：可预知

如：产品界面中通过清晰的导航告诉用户在哪里、能去哪里、会去到哪里。

2. 操作中：有反馈

针对用户的每一步操作，予以明确的状态变化。

3. 操作后：可撤销

帮助用户挽回错误的决策。

三、轻松掌握的一些交互原理

1. 视觉动线

人的阅读方式应该是遵循某种习惯进行的，好像读书本一样——除了从左到右，还有从上到下的方式。阅读引力是从上到下，从左到右，呈现Z字形移动，而起点和终点会作为重点视觉记忆区，中间过程会轻扫作为次要视觉记忆区。

（本图是介绍视觉动线的网络用图）

一些奇奇怪怪的知识：阿拉伯字母的文字都是从右到左，因此他们的产品界面是都是从右到左设计。

2. 操作热区

针对手机相关产品，Steven Hoober在文章《How do users really hold mobile devices?》进行了广泛的研究。用户拿手机的方式有六种，甚至更多。大多数情况下，用户用拇指触摸屏幕，无论是单手还是双手。而有时，也会用食指进行触控。

最重要的内容应该在中心，其他关键导航控件在底部。

3. 功能设计原则

1）减少输入

能让用户点击，就不让用户打字。如流程申请类产品功能，可以尽可能将手动填写的方式转变成结构化选项。

2）减少记忆

减少用户需要记忆的操作，如使用短信验证码、人脸识别等方式代替密码。

3）缩短路径

对于一次性需要填写较多内容的功能，支持暂存操作，密集复杂的表单项进行拆解、归类，降低用户填写压力。

4）去除干扰

将不重要的项目合并折叠，让用户专注于重要、必要的填写任务。

四、设计案例参考

PC端中后台端产品基本由导航、筛选、表格几大模块构成，表格面积占比最大，页面呈现最为重要，会直接影响用户的使用体验。

1. 导航设计

作用：导航栏在中后台产品起到分发、引导作用，帮助用户在复杂的后台页面中，寻找出自己真正想要的功能。

• 菜单广度：导航菜单中每一个层级包含的菜单项数目为广度。
• 菜单深度：导航菜单层级的数目为深度。

深广度平衡帮助用户进行快速选择，通过能够对整个产品架构有着第一眼的认识。

7±2 原则：

原则解释：1956 年乔治米勒对短时记忆能力进行研究，他发现人类头脑最好的状态能记忆含有 7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。因此菜单建议最多不要超过 9 个，最少不要低于5个，超过9个时，一定要对菜单进行分组。

复杂中后台产品导航建议采用混合式导航，如阿里云，由于功能较多，采用的就是横纵向都有的导航。

2. 主要按钮和次要按钮如何摆放？

主要按钮与次要按钮如何放置，需要评估效率与准确率。

一般来说，顺延用户操作路径，主按钮要左侧，提升录入效率；控制表单全局的顶部按钮、底部按钮，一般置右侧，让用户了解操作项，再进行决策。

3. 表单设计

有明确的逻辑顺序，通过步骤条简化任务；步骤小于3步，无需展示；横向步骤条最常用，适合步骤较少的场景；纵向步骤条适合步骤较多或步骤数目处于动态变化的场景。

60%的标签超过8个字或有国际化需求，使用顶对齐，视线从上至下，阅读与表单填写都高效直接。

50%标签名称短，使用左右对齐（最常用）。

容易出错的表单填写：

当希望用户详细阅读时，解释文字的展示样式。

4. 提示信息

5. 数据脱敏设计

最后，产品功能和交互设计一定需要结合用户场景，例如一些面向户外工作场景的功能，就不适应正常的标准，反而相应的字体大小、交互设计会更加强烈，以上交互原则也是一样，需要与自己实际面对的用户场景选择合理的交互方案。

在设计过程中，关于筛选，有多选的选项应该选择“或”还是“且”，哪种更合理？本文阐述了二者之间的差别以及如何选择？一起来看看吧。

最近在做设计方案时，遇到一个筛选的问题，关于多选的选项应该选择“或”还是“且”，哪种更合理？

需求是这样的，教学管理系统，老师在发布学习活动时，可以指定发给哪几个班级，也就是说学习活动和班级的关系是“一对多”。

在学习活动的列表里需要增加一个班级的筛选项，问题是单选合适还是多选合适，如果用多选，是“且”合适还是“或”更合适。

一、数据和标签的关系对筛选方式的影响

筛选是对于数据带有的标签进行筛选，所以数据和标签之间的对应关系会影响数据的筛选方式。比如我想点咖啡，咖啡有品牌标签，两者之间是“ 1 对 1 ”的关系，如果我去筛“星巴克且瑞幸”的结果就很没意义。

所以根据数据和标签的对应关系梳理了两种筛选方式的所有结果，如下图。

从图中可以看到，如果标签与数据的关系是“1 对 1”，则筛选可以是单选、多选（或）。当数据和标签的关系是“ 1 对多”，则筛选方式都可以，所以仍需根据具体业务来判断使用什么方式更适合。

二、寻求信息的目的

人们所做的一切都需要耗费精力和注意力，而人们没有无限的精力和时间，所以人们需要通过只做他们最有动力做的事情来保持效率。

对于寻找信息，人们最重要的动机是为了解决问题或者作出决策，而筛选作为帮用户快速过滤信息的方式，提高了用户解决问题或者做出决策的效率。

我们是 B 端产品，面对的是学校用户，对于教师，解决的是高效管理教学的需求，这里的重点在于“高效”。那么对于筛选结果一定是收缩而不是扩散，扩散会导致越筛越多，增加信息复杂度，从而降低效率，与用户目的不符。

所以这里的解决方案应该是：当标签与数据的关系是“ 1 对 1 ”，筛选是单选。当数据和标签的关系是“ 1 对多”，筛选是单选或多选，其中多选一定是“且”的关系，这样对于筛选结果才是收缩的而不是扩散的。

解决问题和制定策略是信息寻求最重要的动机，但不是所有，依然存在一些无目的的行为，比如浏览，在淘宝中就是“逛”的需求。C 端面向普通用户，解决用户消费和文娱需求，寻求信息在这里就存在一些无目的或者其他目的性的行为。比如“刷”抖音，“刷”知乎，“逛”淘宝，类似的词语也表现出了用户在使用这些产品时的心理，无目的或者目的性不强，效率不是第一位。

所以对于这些产品，是可以存在筛选结果扩散的情况。比如淘宝和京东的筛选基本是类似的，对于“1 对多”是多选，且的关系，比如折扣与服务模块。对于“ 1对1 ”也是多选，或的关系，结果越筛越多，满足用户无目的逛的需求。

最后

“如果用户想这么怎么办，想那么怎么办”，总是从这些方面去思考问题，功能可能会越增越多，体验可能越来越差，方案可能会越来越纠结。我们无法做到穷尽用户所有的场景和所有的使用方式，但人的本质是相同的。

了解人，了解用户，了解业务。

大概是这样～

在产品设计中，减少需要用户记忆的事情/行动，提供其“再认”的解决方案，效果会好的多。本文结合相关大厂案例，与大家探讨如何做让用户“再认”的设计，希望对你有所启发。

看了上千个大厂APP优秀案例后，我深刻总结了近百条案例心得，之：

减少需要用户记忆的事情/行动，提供「再认」上的解决方案~

经验关键词：12+个

适用对象：产品/交互

大厂来源：京东/拼多多/美团/饿了么等

一、经验拆解

这段话强调了APP中的一个重要原则，即【降低用户认知负担，以提供更好的用户体验】。

1. 减少需要用户记忆的事情

即用户友好性，我们应该尽量减少用户需要记住的信息或步骤。

这包括【分解操作步骤、减少信息输入、简化导航方式】等，让用户不应该需要花费过多的精力来记住或学习如何使用产品。

2. 提供“再认”上的解决方案

即提供「再认」而不是「回忆」的方式来帮助用户。

用户「再认」是指用户在看到可供选择的选项时，能够轻松地辨认出正确的选项。

用户「回忆」是指用户必须在没有明显线索的情况下从头脑中回忆出正确的选项。

为了实现「再认」，设计者应该使用【提供选择、置顶信息、明确操作状态、】等方法，以帮助用户快速识别和选择所需的信息或功能。

二、案例解读

那么在各个大厂APP中，又有哪些优秀的【再认】设计呢？

1. 置顶“买过/看过”的商品

饿了么在商品浏览页上做得很好：当用户没有在A店消费过时，会将【已经浏览过】的商品前置在TAB栏第一位；当用户已在B店消费过时，将【已买过的商品】前置在TAB栏第一位 。

解决问题：对用户来说，节省了用户的时间和操作步骤，促进了用户的下单效率和复购率的增长。对业务来说，提高了用户的留存和复购，增加了业务的收入。

不足之处：可能存在一定的误判，即将一些用户不会再次购买的商品前置在TAB栏第一位，从而导致用户体验不佳

案例关键词：置顶推荐、提供历史行为（看过/买过）

2. 明确当期操作位置/状态

在商品详情页里的【回到顶部】icon，会根据用户的滑动展示不同的状态。

1. 向上滑动：显示当前浏览进度和总商品数，这样用户就可以对商品数量有一个大致的了解。
2. 向下滑动：查看上面商品时则变回【回到顶部】icon。

解决问题：解决了用户在商品详情页中可能面临的两个问题。

第一个问题：是用户不知道当前页面有多少商品和页面的总长度，通过展示当前浏览进度和总商品数，用户可以对商品数量有一个大致的了解，提高了用户的浏览体验。且更多大厂案例分析，可搜索: 有蛋案例

第二个问题：是在向下滑动浏览更多商品后，用户可能需要快速回到页面顶部，以便继续浏览其他内容，通过在页面顶部展示「回到顶部」按钮，用户可以方便地返回到页面顶部，提供了便捷的操作方式。

不足之处：可能有些人不知道这些数字的作用。

案例关键词：状态透明化、提醒当前位置

3. 提供多种选择减少思考

美团外卖在推荐商品推荐流中增加了随心点的模块，该模块包含「随机抽取」和「查看推荐」两个按钮。

用户可以点击「随机抽取」按钮，系统会随机滚动展示多个美食品类名称，用户可以选择一个分类。

解决问题：用户在面对众多商品选择时可能遇到的选择困难问题。用户可能因为过多的选项而难以作出决策，导致犹豫不决或选择困难，为用户提供了一种轻松、有趣的方式来解决选择困难问题，帮助用户快速作出决策。

不足之处：随机抽取的方式可能并不总是符合用户的口味或需求，有可能出现用户对结果不满意的情况

案例关键词：提供预选、随机抽取、自动选择

4. 在支付时确认收货地址

拼多多下单后，可直接在支付弹窗上修改收获地址，避免用户因为手快没看清、或忘记核实地址就对产品进行下单。

解决问题：不需要像淘宝一样，想修改地址只能放弃支付步骤，去到订单页取消订单，重新拍再次选择地址。促进用户尽快支付订单。各大行业的优秀案例解析，浏览器搜索: 有蛋案例

不足之处：可能存在用户误操作或恶意修改地址的风险，需要设立一定的安全措施来保护用户信息的安全性。

案例关键词：

前置重要内容、确认核心信息↓关注我，带你发现更多大厂案例与更深层次分析

5. 在购物车上显示赠品信息

在京东购买商品时，购物车中的商品下方会直接显示赠品和数量，让用户一眼就知道赠品信息，大大减少了因不知道有什么赠品、或者复杂操作导致的用户流失情况的发生。

解决问题：解决了用户在购物车页面确认赠品信息的繁琐步骤，提供了直观的赠品展示方式，帮助用户更快速地了解赠品信息，从而减少购物过程中的操作复杂性，提高用户购物的效率

不足之处：前置重要内容、信息确认、减少操作

案例关键词：前置重要内容、确认核心信息

6. 填写信息自动提供旧信息

拼多多上新建收货地址时，系统会加载已存在的收货人姓名+手机（从创建过的收货地址信息里获取）。

用【已有信息的选择】代替手动输入，减少了用户因输入错误或繁琐的操作，而导致的创建收货地址流程中的流失率。

解决问题：解决了用户在创建收货地址时需要手动输入已有信息的繁琐和耗时问题，提供了一种更便捷的方式来填写收货地址信息。提高了用户完成订单的转化率，增加了平台的交易量和收入。

不足之处：可能存在用户隐私和信息安全的风险，因为系统需要访问和加载用户的历史收货地址信息，如果觉得设计没灵感，可以上有蛋案例 浏览更多创意

案例关键词：提供历史信息、自动填写数据

7. 置顶对象，知道是给谁回复

在知识星球里评论/回复某个用户时，在输入框上可以一直看到回复对象，让用户明确地知道：是给谁回复的。

解决问题：解决了用户在评论或回复时可能出现的出错和重复输入问题，通过在输入框上一直显示回复对象的用户名，用户可以清晰地知道自己在回复谁，从而避免了因长时间输入导致的遗忘，减少了用户出错和重复输入的情况。

不足之处：可能会占据输入框的空间，导致输入区域受限，影响用户的输入体验。

案例关键词：置顶操作对象、明确操作状态

8. 用品牌标识设计图标

懒猫存钱APP里的记账分类做得很有意思，将日常的生活开销处直接用图标与logo进行设计，如购物的淘宝、京东，还有游戏开销方面的王者、LOL等，毕竟常见的也就那么几类

解决问题：让用户更快、更清晰地选择自己的花钱地方，也让以后账单的查询更加方便，大大提升操作效率。平时做方案缺乏创新，有蛋案例 可以为你提供更多方向

不足之处：可能存在部分用户对某些图标与logo的理解出现偏差，或者个别用户不习惯使用图标与logo进行记账分类。

案例关键词：联想现实事物、拟物化设计

三、最后总结

综上所述，要想减少用户的记忆/认知负担，可以总从以下这些关键词里寻得设计灵感、需求想法：

• 置顶推荐、提供历史行为
• 状态透明化、提醒当前位置
• 提供预选、随机抽取、自动选择
• 前置重要内容、确认核心信息
• 置顶操作对象、明确操作状态
• 提供历史信息、自动填写数据
• 联想现实事物、拟物化设计

好了，以上就是作者对「减少用户记忆」的一些小思考，不知道有没有帮助到你。

在日常工作中，设计还原度低是我们经常会遇到的问题，那么该如何解决这一问题呢？本文将结合相关实际案例，与大家分享相关内容，希望对你有所启发。

设计还原度低是我们日常工作中经常遇到的问题。最近有同学就有这样的问题：

有没有什么工具或者具体的方法提升组内的设计还原度？组内前端同学经常无视设计稿上的细节，导致线上惨不忍睹，产品的体验大打折扣，跟他说了也还是不改。有没有什么制度或者流程，督促他们调动自觉性的方法？

这个问题其实是一个常见现象，当然了，设计的还原度只能尽可能的提高，没有那种完全100%确保一致的方法，本文将结合实际的案例与大家进行分享~

01 关于设计还原度

对咱们设计师而言，保证设计还原度一直是我们工作的重中之重。

那我们一直纠结的还原度究竟是指什么？

「设计还原」指的是针对开发后的产品与原先设计的产品效果的偏差，进行交互以及视觉效果的比对。

为了保证设计质量得以保证，我们经常是在产品验收环节的最后一步才进行设计走查。作为临近上线才开始介入，最后导致因为时间不不够，只能优化部分设计和功能上的问题。

设计还原度一直是团队努力提升的工作，它本质上是一个合作的问题，即使再怎么克服，总会存在一些偏差。

• 一是设计交接环节。设计师陷入了知识的陷阱，觉得前端能力很强，不需要做太多的标注。觉得他们可以跟自己一样对像素敏感，完全可以做到设计稿的一比一还原；
• 二是设计验收环节。设计师工作职责定位有误，觉得自己的主要工作是把稿子做好，至于后续稿子的还原是测试的责任，跟我们没多大关系；

在这个竞争日趋激烈的互联网环境下，用户对于体验的要求越来越高，这其中的设计还原度则是保证产品体验的关键一环，确保产品的高品质在线。

02 设计交接环节

根据「特斯勒定律」我们得知“任何系统都有其固有的复杂性，这个复杂无法减少，我们唯一能做的是把复杂进行转移”。既然设计的还原度是由前期交接环节以及后期设计验收环节共同努力才提升的，如果我们设计在前期交接环节多花点时间，多站在前端的角度去思考，这样在验收环节我们会更加省力。

为了避免与他人因为交接而导致产品理解的断层，我们有3个注意事项：

2.1 思维同频（了解套路）

我们与前端同学的思维同频特别重要，需要主动了解开发是根据哪些规则还原我们的设计稿，只有在实现方式上达成意识的统一，我们才能一起解决问题。

了解开发思维，首先就需要了解最基础的「盒子」概念。

「盒子」概念是 CSS 语言的术语，讲的是在页面进行布局时，我们需要将页面中所有的元素看成一个个的矩形的盒子。CSS 决定了这些盒子的大小、位置以及属性。每个盒子由四个部分组成：

1. content：内容区域，该区域可以定义 width 和 height。
2. padding：内容区域和边框之间的空间量。
3. border：内容区域和内容边距周围的粗细和样式。
4. margin：边框和元素边缘的空间量。

当我们了解这个概念后就会有意识的在设计中带入盒子思维，比如相同模块保持各个元素间距、尺寸的统一，合理的规划好每一个元素的布局。确保前端可以直接复用之前的样式，避免在开发期间因为每一个元素的间距差异而提升精准还原的难度。

2.2 重视组件（避免挖坑）

在团队人数较多时，多个前端参与同一项目的研发，每个前端针对同样的模块可能有着自己不同的编写样式，最终导致大量的代码冗余，效率低且还原度无法得到保证。为了保证产品体验的一致性，我们需要在交接中统一设计思维，使用组件进行约束。

2.2.1 总结通用组件

通用组件又称为原子组件，是一种底层组件。比如：提示框、输入框、开关、按钮等。我们最耳熟能详的通用组件网站就是 Ant Design 。借助通用组件，我们可以确保设计稿具备较高的一致性，提升设计与开发的协同效率；

2.2.2 封装业务组件

为了更好的将组件服务于业务需求，解决业务问题，实现业务目标。我们需要将通用组件围绕真实的业务场景进一步封装，以便于后续快速迭代，比如：标题栏、表格高级筛选栏等。借助业务组件，设计师可以直接套用之前的组件样式，稍作调整即可落地，省时省力。前端则可以解决跨项目复用问题，减少重复代码和重复开发，在敏捷开发流程中保证代码质量，确保设计的还原度；

2.3 设计宣讲（同步内容）

设计过程更像是一个集思广益的过程，这期间大家由一个抽象的需求变为具象的方案，背后肯定有着自己的独特见解，这就需要我们在评审环节讲述自己的设计理念，更需要借这次会议与开发同学对齐目标。

挑开天窗说亮话，在评审会期间有些细微的地方我们需要着重说明，把设计中视觉变化较大的地方讲清楚，加深他们印象，帮助前端同学理解，同时前端同学也需要开诚布公的反馈当前实现的技术问题，避免带着疑问工作。

宣讲会期间的问题以及解决方案需要以会议记录的形式记录，并在会议结束后向项目组全部成员，以邮件的形式同步会议记录（大家的共识），确保会议内容传达到位。

03 设计验收环节

设计验收又称设计走查、还原度验证。当我们通过邮件或者群收到前端发送的验收通知时，就可以开始设计的验收工作了。

在设计验收环节前我们得要求前端和测试同学先测一遍，确保设计还原度最大程度的保证，再介入设计的验收。现实中很多前端同学一开发完立即要求我们进行走查，那时候我们会浪费大量的精力去找那些显而易见的问题，重复工作会让设计与测试的工作量显著增大。

3.1 错误清单（讲清问题）

验收后我们需要注意问题的整理和存档，最好使用公开且实时的在线工具进行整理，在错误清单中标明类目、讲清问题、问题优先级、问题责任人以及一些特殊场景。

3.1.1 问题描述

为了更清楚的讲明问题，需要提供线上具体位置的截图和设计稿的截图（标注出差异点），向前端同学清晰的讲清楚当前存在的问题以及具体可以怎么调整。比如：真实尺寸多大，字号多少等。

3.1.2 问题责任人

讲清责权范围，这样便于开发可以快速定位自己负责的业务模块，也便于后续修改后的复查。

3.1.3 问题优先级

找出问题后一定要帮助前端同学标注出优先级，要不然他们会根据难度自己选择，大概率选择容易修改的问题调整，重要的问题反而搁置。在划分优先级时可根据影响程度、出现频率来进行评估，可分为三级。

• 严重的可用性问题：严重的交互问题，每次操作该问题必定出现，会中断用户操作流程，必须立即解决；
• 重要的可用性问题：出现频率比较高，导致用户产生困惑，需要花时间理解，对用户体验有一定影响；
• 一般的可用性问题：不影响用户流程体验，存在页面样式方面（字体、色值、间距、对齐方式等）的问题。

3.1.4 特殊场景

完成主要流程走查后，我们需要注意特殊场景是否存在问题。例如数据异常、内容缺失、空状态等。同时要考虑不同尺寸下产品的自适应问题，是否存在错位、文案无法填充等情况。

这里值得注意的是，错误清单需要填写两次，第一次是前端开发完的首次走查，第二次是前端根据第一次错误清单修复后的再次复查，看看是否有新的问题。当问题解决后满足上线的需求，则需要我们及时关闭错误清单中问题修复状态，这意味着当前问题已经解决。

3.2 当面联调（见面三分亲）

走查不是为了发现问题，而是为了最终解决问题。当我们提交错误清单后，我们也需要时不时的与问题负责人当面沟通，一些跟进问题的修复进度。

面对面对接的效率是最高的，此时的前端面对一大堆错误清单可能满腹怨言，虽然会按照问题优先级逐一解决，但是当快到上线前时间较紧时也会存留部分问题等到下次迭代时再解决。这时候如果我们多一些当面沟通的技巧，也会让对方心情愉悦些，说不定也会稍微提升一些效率完成残留问题的修复。

04 写在最后

设计还原度的提升是大家共同努力的结果，如果我们在前期尽可能的换位思考、在规范下输出设计、建立完善的验收制度，才可以确保较高的设计还原度。

以上只是我针对提升设计还原度的个人感悟，希望该文章对你有所启发，也欢迎感兴趣的同学一起探讨~

随着VR、AR等技术的进步，相关的设计思考也被提上了日程，比如空间设计。这篇文章里，作者就结合Apple Vision Pro，探索了空间界面设计背后的用户体验原则和相关的设计策略，一起来看看吧，或许会对想了解空间设计的同学有所帮助。

一、为用户设计

为了确保我们使用这种技术设计的平台有丝滑的用户体验，取得创新和熟悉度之间的平衡非常关键。

用户之前非常熟悉的元素，例如侧边栏、标签栏和搜索栏时，需要在设计上让用户轻松导航并找到内容，就像他们之前做过一样。

保持根据空间环境适应界面的可识别性和用户友好非常重要。

二、设计窗口

在空间设计的操作系统中，窗口设计采用了一种全新的视觉语言，加强了用户体验。

在这些关键功能中，我们发现玻璃质感背景能让用户通过透明度感知后面的空间，给用户一种在真实空间里有漂浮窗口的感觉。

另外，在窗口管理中，有各种 UI 元素可以让用户去：

• 移动
• 关闭
• 调整大小

三、窗口尺寸和可拓展性

这种元素和 UI 组件组合的交互可以让界面流畅和引人入胜。

窗口可以适配成不同的尺寸，具有高度的灵活性和可扩展性。

用户可以选择他们想要的尺寸并对此完全掌控。

然而，用户体验设计师应该基于被看到的内容设置标准尺寸。

举个例子，打开一个 Safari 上的网站时的弹窗应该是垂直方向的窗口，因为用户习惯从上到下查看网站内容。另一方面，在 Keynote 或 Slides 上打开的幻灯片演示文稿，则需要有一个更水平方向的尺寸。

四、窗口里的控制管理

基于 Apple 的空间设计技术，窗口的选项和控制应该要放在窗口本身之外。

五、基于pt单位设计来适应窗口

在空间设计中，让界面适配不同的屏幕非常重要。

Apple 介绍了 pt 在设计中作为标准单位的概念，它可以让界面元素基于用户的距离来适配和缩放。

通过基于 pt 单位来设计，用户体验设计师们可以确保在任何用户距离都有可阅读性和可用性，创造一致的用户体验。

六、视角、人体工程学、运动

当基于空间设计用户体验来设计应用时，我们必须考虑以下与用户相关的方面：

• 周围环境
• 眼部交互和手部交互
• 人体工程学

界面的设计应该能让用户从不同的位置查看内容。比如不管是躺下还是坐着，用户都可以看到界面内容。

考虑到基础人体工程学原则，界面不应该设计得离用户太近或设计在用户后面。

应该要想象一个视觉操作区域，在这个区域内不应设计任何内容，并且在设计过程中应该设置最基础的距离。

Apple 的设计指南也提到了最小限度的移动。

空间设计指南也推荐了最小限度的移动甚至重新就位。用户可能需要换房间或者移动并转向所处空间的另一部分。在这些场景中，用户可以通过按下查看器中的重置按钮来重制中心视野。

七、空间、纵深和规模

1. 空间管理：指南

关于空间管理，Apple 研究出了可以让两种环境共存的最佳方式：

• 数字环境，例如网站、窗口、音乐 app 等等
• 真实环境，例如墙壁、吊灯、沙发、椅子等等

虽然向用户展示真实环境的元素可以为用户提供与现实的连接感，但这些元素也可能令人注意力、妨碍放松。

对此的解决方案是一个混合解决方案，考虑到两种情景：

• 主动用户
• 消极用户

对于主动交互操作，例如移动窗口或放置元素和细微移动，可以使用透明度来同时显示两个环境。

如果我们谈论积极交互操作，例如移动窗口、放置元素、和细微运动，那么可以使用透明度来同时显示两个环境。

在这个例子里，用户正在拖动一个窗口到右侧。

真实环境元素（如椅子），在此主动操作过程中可见，因为窗口在挪动时是半透明的。

当结束窗口拖拽，且用户所需的音乐开始播放时，窗口的不透明度将会消失，为用户提供最大的沉浸感。

接下来让我们聊一聊用户消极交互阶段，这个阶段用户很放松，他们的操作非常少、或甚至不存在。

在此情况下，空间设计指南推荐能让用户通过头戴设备上的按钮来选择他们的沉浸感等级。

在上图，背景上的真实元素仍然可见；但是在下图，这些元素被隐藏了，并已经过渡到完全沉浸。

2. 纵深管理：指南

当设计周围空间环境中的用户体验时，很有必要使用纵深技术避免设计出又大又繁琐的 UI 。

通过这种技术的支持下，即使在远离用户眼睛的环境里，也可以设计出层级结构并和对内容的关注。

纵深很明显影响着我们对物品在空间里的认知，我们应对纵深进行有效的设计。

在下面示例中，我们能看到和视频本身相比，视频控制元素（能控制声音的调整、视频暂停、快进等）离用户更近，保持了比例。

如果视频控制元素是放在视频内的，那么它会变得更大、并且对用户来说更不可用。

另外一种用来创建纵深的 UI 元素是光影。比如当你在看视频的时候，你可以看到上下反射出的光影，创造出令用户愉悦的纵深感。

八、沉浸感

沉浸式体验代表着空间设计的巅峰。

使用 Apple 的空间设计指南来设计用户体验，可以让我们设计出在关注到周边真实环境的同时，也能从共享空间窗口到全屏体验都能吸引用户注意力的应用。

通过这种方式，我们可以创造和真实环境混合的数字体验。

为了确保用户保持参与，我们必须引导用户将注意力集中在沉浸式体验中。

引导注意力的推荐技巧包括：

• 动作
• 动画
• 空间音频
• 材质的小心应用

九、设计界面

在此小节，我们将根据 Apple 的空间设计原则讨论 UI 设计。

（Apple）的开发视觉语言结合了连贯性和熟悉性，来适应沉浸式的空间体验。

该视觉语言有 5 项基础：

• 应用图标
• 材质
• 排版
• 亮度
• 颜色

1. 空间设计UI：应用图标

通过空间设计，Apple 公司将屏幕上主页图标的概念提到更逼真和三维的水平。

当用户注视具体的图标时，系统会通过镜面反射和阴影来突出该图标的深度层级。

2. 应用图标：多图层

对于空间设计里的图标，推荐使用多个图层来实现三维效果。

每个应用的图标最多由三个图层构成

• 背景层
• 前景层（最多两层）

设计你的图层就像就像设计正方形图片那样，记住要让内容居中来获得最佳的视觉关注。

系统会自动应用圆形裁剪，并将图标渲染成 3D 。另外在图层上也不建议使用不透明度和透明度。

3. 空间设计UI：玻璃材质

当设计空间界面时，考虑使用的材质非常关键。

应用需要适应不同的灯光环境，并在不同的环境下都很容易放置和查看。

玻璃材质因为视觉效果好、适应性好，非常适合适合上述用途。它可以悄无声息地和现实物理世界融为一体，让现实的周围环境光和虚拟内容交互。

甚至在深色效果下，例如在夜晚昏暗灯光的房间，玻璃材质效果依然优秀。

使用玻璃材质，你可以创造轻量且迷人的界面，这些界面还具有纵深和具体感。

需要考虑的一条指南是如何在浅色和深色图层之间交替。

举个例子，在下图界面中，就像在视觉上像卡片设计一样，正确的做法是在浅色层之上使用深色层来突出显示元素。

与之相反的，比如在浅色图层上再放一个浅色的，视觉上并没有像浅色图层上叠深色图层效果那样好，而且视觉可读性也存在问题。

4. 空间设计UI：排版

正如我们在视觉和界面设计课程中所学的，文本在界面中起着至关重要的作用，并且应该具有可访问性、可读性和对不同的情况良好的适应性。同样的原则也适用于空间设计，但是在设计技巧上我们建议稍微增加一点厚度。

在 iOS 系统，建议正文使用“常规”字重，标题使用“中粗体”字重；在空间设计中，建议增加厚度：

• 正文使用“中黑体”字重
• 标题使用“粗体”字重

另外，为了改进可阅读性，提高了跟踪，并引入了针对泛编辑风格布局的新的字符样式。

5. 空间设计UI：亮度

亮度是另一个保持可读性的重要方面。

通过亮度，我们可以点亮前景内容并动态适应背景变化，同时确保了前景文本清晰可读。

Apple 公司使用了不同亮度的层级：一级、二级、三级等。

6. 空间设计UI：颜色

也要考虑颜色的使用。

所有网络的无障碍规则依旧适用，但是在空间设计上，我们需要对所有的对比度小心翼翼，特别是在使用例如玻璃这种不平坦背景的时候。

如果我们想使用颜色，那么强烈建议应用在整体元素中，而不仅在文本里使用。否则，更推荐使用白色的文本和图标。

7. 空间设计：布局

为了在空间设计中创建符合人体工程学的布局，我们必须要考虑到用户的舒适和安全。

为了达到这个目的，我们肯定要牢记我们之前看到的这些关于窗口设计、图标间距的规则，为了在设计阶段将设计的内容放置在用户视野之内，我们还需要考虑用户的视野、眼距以及脖部运动。

空间设计设计指南倾向于使用更宽的元素和居中放置的信息。

注意确保可交互的元素的选择热区至少有 60pt 大小。视觉上更小的元素甚至可以在四周加上足够的空间来达到可交互选择热区的大小标准。

最后，利用视觉焦点来暗示 UI 组件的可交互性，并考虑为悬停效果加一下背景填充。

十、输入

在空间界面中，人们通过使用他们的眼睛、手和声音进行交互。

同时也可以通过在空间中创造一个键盘让用户使用手指打字，就像在现实物理环境下一样。

当然，也可以连接蓝牙键盘或者触控板，并正常书写和交互。

设计直观的体验必须要理解输入模式。

通过使用系统组件，你可以快速创建丝滑响应用户操作的界面。

对于装饰元素，例如导航元素或选项，建议使用无边框或无背景的简单设计，因为用户眼睛注视或其他交互方式选中时，才需要添加效果。

对于更大的如窗口大小的元素，这些装饰应放置在窗口的边缘（如底部、侧边或者顶部）。

在下列的“播放器”栏例子中，推荐将播放器栏放在比主控制窗口底部高 20pt 的位置。

熟悉诸如窗口、标签栏和侧边栏的例子有助于我们设计用户体验并优化内容结构。

十一、眼和手

空间设计向我们介绍了全新和用户界面（UI）交互的方式 —— 使用眼和手。通过空间设计，用户既可以通过注视 UI 元素也可以使用手势来轻松地控制他们的设备。这实现了一种更、舒适且精准的用户体验。

1. 为眼设计

作为主要的定位机制，眼睛在空间设计中起到了重要的作用。为了确保舒适的交互，必须要把 UI 元素放置在用户视野之内，并将最重要的内容放在最中间。

剩下的空间区域可以放更不常用的内容，例如次级操作，注意同时要保持主要内容居中和让它容易访问。

在空间设计里也要考虑纵深。保持所有的可交互内容在同一纵深上可以让 UI 元素轻松转化过渡。通过使用细微的纵深变化，设计师可以在减轻用户眼部疲劳的同时有效地展现信息层级。

为了有效利用眼部定位，设计师可以使用圆润的形状，例如圆形和矩形，它们可以自然引导用户的目光到中心区域。

另外，在元素和文本之间充足的间距可以加强眼睛定位的准确性和可用性。

就像我们之前提到的，保持至少60pt的定位热区对于以眼为基础的交互必不可少。即便系统提供的标准组件有助于轻松定位，但是在设计自定义元素时，遵守尺寸规范非常重要。

可以通过细微的悬停效果来加强眼部交互，标明用户的凝视正在推动交互。悬停的效果需要很谨慎、要和内容协调，从而加强对 UI 元素的响应力。

2. 为手设计

手势是另一种强大的与空间输入交互的方式。

手势能实现直观的控制，可以带来流畅且吸引人的用户体验。

手势应该直观和自然。使用常见手势（比如捏住缩放或拖拽移动）可以让用户舒服并在快速学会交互。

在设计组件的大小和间距时，必须考虑到用户手的大小。如果元素太小，就很难碰到；如果元素太大，交互到具体界面上的一部分将会非常困难。

决定最佳的元素尺寸关键在于测试和迭代优化。

空间设计最令人激动的体验之一就是眼部手部交互的结合。比如在下图例子中，在屏幕上用户可以在窗口图片上用眼聚焦一个区域的同时，用手对这个区域进行放大。

参考：Apple Developers

一直以来，VR领域的从业者都在尝试追寻与实现更自然的交互，而苹果在今年6月发布的初代MR头显，或许可以为后续的XR交互带来更多可能性。这篇文章里，作者就梳理了XR交互方式的迭代变化过程与趋势，一起来看看吧。

为了让XR设备的控制器更加贴近自然，业内做过很多种尝试，像Meta前几年曾公布的触觉手套，索尼近期公布的游戏手套，还有绑在手腕上的控制器，外挂气味套件等等。

只是由于大多数交互方式的尝试很难落地，搞了好几年仍是概念产品。目前，XR交互仍以头部和手部的6DoF追踪定位为主，未来XR的交互的重点仍将以手部以及头部为主，只是围绕的中心正在发生变化。

2023年6月，苹果发布其初代MR头显，摒弃了手柄，采用了以语音+手势+面部/眼睛追踪为主的更加自然的交互方式。为了更好理解XR交互方式的迭代，本文梳理了XR交互方式的迭代变化过程与趋势。

一、VR交互发展的第一次冲锋

1995年，任天堂发布了一款早期VR概念的便携式游戏机Virtual Boy，也算是VR交互发展的首次冲锋，当时各大媒体的报道都给予了这款产品很高的评价。

山内溥更是在1995年Q1的股东大会上欣然允诺：“Virtual Boy将在发售的第一财年里出货500万台，为任天堂带来800亿日元的利润。”然而Virtual Boy发售不到半年就迅速走向了「死亡」，评价也是一落千丈。

任天堂自然是希望Virtual Boy能成为它弯道超车的机会，一举抢占新赛道。但从Virtual Boy的形态来看，想做到这一点很难。

一款可被消费者持续购买的产品，交互方式必然很重要。当时由于技术的受限，Virtual Boy很难被携带使用，同时采用单色液晶屏的技术，整个画面都是红色的，像极了惊悚片。

Virtual Boy 游戏《马力欧网球》的模拟器演示画面，实机画面表现与此相比还要差得多

而Virtual Boy的交互设计则以游戏手柄作为参考对象，造型看上去很奇怪，与现在的游戏手柄的设计相比，当时Virtual Boy没有X和Y按钮，有一个更大的握把，右侧还有一个额外的方向键。

由于头戴式会出现让人头晕的偏振现象，任天堂的解决方法是取消头戴式，给头显加个三脚架，让玩家自己的脑袋去适配游戏机，用起来大概是下面所展示的画面。据大多数玩家表示在玩游戏过程中会出现恶心、头晕以及眼睛非常不舒适的感觉。

虽然Virtual Boy给人带来了三维视觉的体验，但交互方式还是沿袭了游戏交互的设计，与VR设备的结合并不是很协调，这也是VR硬件早期发展过程中所体现出来的一个问题。

在VR硬件发展的早期阶段，交互方式都很单一，而且设备过重很难携带，同时还容易发热，这一系列的不佳体验都导致90年代的VR设备发展陷入停滞的局面。各大厂商们纷纷偃旗息鼓，坐等技术进一步发展。

二、VR交互发展的多种尝试

2012年左右，随着技术有进一步进展，VR热潮开始重启。

2012年Oculus创始人帕尔默·拉基发布了Oculus Rift原型机并筹集了240万美元，用于改进头显和跟踪软件。Oculus Rift的到来，让厂商们看到了VR的潜力。2014年，Facebook便以20亿美元收购了Oculus VR。

Oculus Rift本身是一副虚拟现实护目镜，配有耳机，可连接到游戏PC或笔记本电脑，只是Oculus Rift可以通过红外传感器追踪头部运动，并且还可以通过Oculus Touch控制器跟踪有限的手部动作。Oculus Touch控制器具有按钮和模拟摇杆，能够与其他支持PC的游戏控制器兼容。

通过Oculus Rift，人们惊讶地发现VR设备相比之前已经有了很大的改进，在交互环节上虽然缺失手动跟踪控制器，无法完成复杂的游戏，但是可以满足浏览视频，三维观看的需求，同时期无手柄设计的设备还有谷歌VR盒子、三星Gear。

Oculus Rift

2014年谷歌发布VR盒子——Cardboard，一种廉价的简易头戴式装置，其图像质量并无法与Oculus Rift相媲美，但造价与体验成本很低，用户只需要在手机上下载好软件，并将手机放入Cardboard纸盒即可体验三维视频，降低了普通人踏入VR的门槛。

谷歌VR盒子——Cardboard

2015年三星发布Gear，三星Gear也不能独立工作，仍需要连接手机。设备会自动检测，一旦连上手机，会自动变成VR模式，让屏幕分屏显示VR内容。但三星Gear VR并不只是一个和谷歌纸盒一样的简单的设计，其自带加速计、陀螺仪和重力传感器，能够帮助减少屏幕延时，提供更好的体验。

同时，虽然三星Gear也无手柄，但三星Gear在眼镜的右侧设有内凹十字的触控板和功能性的按键，所有的使用操作都通过触控板和按键实现。中间的圆点为确认键，触控板上独立设有一颗返回键。

也就是说在操作环节上，三星Gear又更进了一步，即使不看设备，滑动设备边上的触摸板也可以进行盲操作，而在玩一些游戏时也可连接蓝牙手柄。

2012年-2016年期间VR设备的交互设计已经逐步转向人性化的设计，虽然这时候VR还不能作为独立的设备使用，VR设备的交互也无法完全满足用户需求，但却激发了人们对VR前景的期待。

2016年已经有不少硬件厂商推出了自己的VR硬件设备，分别有PC VR头显、VR一体机以及用于生产VR内容的全景相机设备等。

在交互技术迭代上，2016年之后的设备开始围绕手部与头部的追踪，在3DoF追踪定位的基础上升级到6DoF，增加手柄和头部的追踪意味着用户与VR设备的连接更加自由，体验也会更自然。具有代表性的产品有HTC Vive、 Valve、Quest系列、PICO Neo 3等。

6DoF即6自由度，在3DoF基础上再增加“上下、前后、左右”等3个位置相关的自由度。头部从3DoF只能检测到头部转动姿态到6DoF可以检测伸头缩头等姿态，而且还可以检测身体移动上下前后左右位移的变化。6DoF更加符合人体体验，更具沉浸感。

尤其是在VR游戏的体验中，复杂的VR游戏往往会需要玩家调动全身互动融入，6DoF可以做到360°的移动身体，如果是3DoF往往只能待在原地，主打观看。

如今6DoF+手柄追踪方案已经是VR设备的标配，也有部分厂商的设备已升级到裸手识别交互，但识别效果欠佳。各大厂商都在极力在6DoF的基础上不断增强VR交互能力，如360°环绕音效、眼动追踪等。整体来看，目前VR交互技术的成熟度仍有不足，离自然、便捷、拟真的交互体验还有一段距离。

三、XR更自然交互方式的到来

一直以来VR追寻自然交互技术的脚步一直未停，但由于成本与技术之间难以平衡，很多好的交互概念便一直停留在设想环节，因此VR手柄便是目前主流的交互方式。

但自苹果发布Vision Pro以来，业内看到了VR设备的创新交互被打开了一个窗口，VR交互方式可以更加接近自然，在VR手柄交互之外增加了诸多自然的辅助交互方式，如语音、手势、面部追踪以及全彩透视，这些交互方式或有望成为未来新的主流交互方式。

关于Vision Pro的交互解析可查看VR陀螺之前写过一篇分析文章《Vision Pro交互设计，苹果的阳谋》。

语音+手势+面部/眼动追踪，实现可见即可交互

语音识别在人工智能发展的趋势下不可或缺，并且是最快发展的一种交互方式，如语音识别交互已经从最初的语音搜索发展到智能家居、智能汽车等多领域。

而在苹果所演示的Vision Pro的应用中，语音交互已经展现了其辅助交互的潜力，通过语音可以唤醒或关闭APP以及发送信息等。在2023CIOE深圳光博会展览上，能看到诸多厂商都展示了增加语音识别技术的整机方案，尤其是在B端，语音识别起到了很大辅助作用。

今年，自ChatGPT爆发以来，大模型推动自然语言处理等后端环节更加成熟，为语音识别的应用场景提供了诸多可能性，据头豹预计2027年市场规模可突破450亿元。未来，语音识别交互趋势将进一步加强，推动XR交互不断升级。

VR手柄作为传统游戏手柄交互方式的一种延续，在XR交互过程中很难实现手势动作的连贯性，相当于用户只能通过手柄执行任务，双手自然就被束缚住了。而裸手交互作为有望取代VR手柄的一种交互方式，体验上更加接近人的自然状态。

面部/眼动追踪使用内部摄像头来感知用户眼睛和脸部某些部位的动作，再结合免校准的机器学习模型，头显可以将所看到的内容转化为可以驱动任何化身动画的输入，实现虚拟化身。

但眼动追踪的实现更难，2022年以来，能看到诸多XR设备都搭载了眼动追踪技术，如PS VR 2、Quest Pro以及PICO 4 Pro，但还是很难达到丝滑的地步。如果说语音+手势+面部/眼动追踪可以将人的身体自然调动，必然会成为人机交互最好的解决方案。

至于全彩透视虽然可以提供更加丰富的MR体验，但技术难度高。目前还无法做到通过人眼直接看到的真实世界，只能通过机器拍摄现实世界场景，经过系统处理之后投射在显示屏上的画面。只是作为实现MR的重要技术，或会打开基于MR版本的消费场景。据了解，已有内容上嗅到潜力，开始开发MR版本的游戏。

四、结语

2007年，乔纳森·卡普兰和艾瑞 ·布朗斯坦发明了一种简单的便携式摄像机Flip，在美国便携式摄像机市场上掀起了一股狂潮。与此同时，索尼和松下等公司为了抢占市场，忙着向自己的摄像机产品中增加一些高级功能，如添加好莱坞电影式字幕等视频特效。

但Flip摄像机却赢得了市场，出货直接上升百万台，而当时全美国市场的摄像机销量只有600万台。根本原因就在于Flip的交互设计极为简单，甩开了一切不必要的功能。没有连接线，只有9个键，甚至连软件驱动CD都没有——所有必需的软件都保存在摄像机内，Flip连上电脑就会自动载入。

虽然如今Flip已经退出历史舞台，但这个故事再度表明了人机的交互方式对于人的选择极为重要。反观XR设备，操作上的不方便一直被诟病，甚至已成为很多人弃用的一大理由之一。

未来XR的交互方式必然要往更加简单的方向发展，以简单的交互方式为重点反向挖掘应用场景，如搭载裸手交互的小游戏，只要游戏内容足够有趣，小游戏则更容易风靡市场；结合语音识别的应用工具，如语言学习、实时翻译等。

AR是在真实环境中增添或者移除由计算机实时生成的可以交互的虚拟物体或信息，下面这篇文章是笔者整理分享的关于交互设计的相关内容，想要了解的同学可以进来看看哦！

随自己从事AR设计以来，我深刻且实际的体验到AR设计不再是“那块儿屏幕”的设计，做AR设计要考虑的方面是多维的，总结以下几个重要的点：

1. 人因（人所处的物理世界的环境、光线、声音、以及人本身的状态等）。
2. 眼镜的硬件（波导技术、成像方式、成像亮度、光机、FOV、性能能耗等）。
3. 需求合理性（眼镜不再是二维终端的需求思维，在与产品需求讨论的过程中始终伴随着一思路：不合理的需求会让AR眼镜的交互变得愚蠢异常）。

问：那到底是什么AR呢？

知乎答：AR即增强现实（Augment Reality）是一种实时计算摄像机影像的位置及角度并结合图像、视频、3D模型技术，经计算机生成的三维模型、音乐、内容等虚拟信息应用到现实世界，两者信息互补，将虚拟世界和现实世界融合的。

简单来说是让电子设备读懂真实世界，并在真实世界的基础上叠加虚拟世界，从而实现增强现实的效果，为用户提供一个虚实融合沉浸式的体验。主要的应用场景包含文旅行业、商业空间、智慧零售、教育、工业等场景。

我定义成：它是一种需要你的大脑计算画面信息的一种新的界面呈现方式。

那AR设计又是什么呢？我觉得AR设计一门要求综合性思维非常强的一个设计工作，因为它的发生的体感是在二维的平面上，显示的体感却是在三维上，所以我把AR设计定义成：展示在三维世界的二维画面。

要做AR设计首先要清楚以下基本的概念。

一、光波导技术

主流的一共分为两类：几何光波导（阵列光波导）和衍射光波导，它们是消费级AR眼镜目前最优的解决方案。AR眼镜需要透视(see-through)，既要看到真实的外部世界，也要看到虚拟信息，所以成像系统不能挡在视线前方。这就需要多加一个或一组光学组合器(optical combiner)，通过“层叠”的形式，将虚拟信息和真实场景融为一体，互相补充，互相“增强”。

图 1. (a) 虚拟现实(VR)近眼显示系统的示意图; (b) 增强现实(AR)近眼显示系统的示意图。

NED：近眼显示(Near-eye display，简称NED)关于几何光波导和衍射光波导，我们设计需要关注的深度，我觉得只要知道优缺点即可，并不需要下探到很深的技术结构层面（如果你个人比较感兴趣，可以去网站上去搜索，这里就不展开了）。

几何光波导：“几何光波导”的概念最先由以色列公司Lumus提出并一直致力于优化迭代，至今差不多快二十年了。

缺点：

1. 透光效率比传统光学系统偏低。
2. 工艺流程复杂，良品率低，常见有背景黑色条纹，亮度不均匀。
3. 在息屏的情况下，镜片上会有有一排竖条纹（即镜面阵列），可能会遮挡一部分外部视线，也影响 AR眼镜的美观。
4. 成本较高。以此为代表的是 影目和珑景、Rokid Vision。

优点：图像质量、颜色和对比度可以有较高的显示水准。

衍射光波导：衍射光波导技术与几何光波导相比主要优势在于光栅在设计和生产上的灵活性，不论是利用传统半导体微纳米制造生产工艺的表面浮雕光栅，还是利用全息干涉技术制成的体光栅，都是在玻璃基底平面上加镀一层薄膜然后加工，不需要像几何光波导中的玻璃切片和粘合工艺，可量产性和良率要高很多。另外，利用转折光栅或者二维光栅可以实现二维扩瞳，使得动眼框在鼻梁方向也能覆盖更多不同脸型的人群，给人体工程学设计和优化用户体验留了更大的容差空间。由于衍射波导在Y方向上也实现了扩瞳，使得光机在Y方向的尺寸也比几何光波导的光机减小了。

优点：

1. 良品率高、可以覆盖更多不同脸型的人群，给工业设计预留了更多空间。
2. 支持二维扩瞳目前AR圈中对衍射波导推崇的一个原因在于其可以实现二维出瞳扩展。所谓二维出瞳扩展可以认为是在牺牲光效的代价之下，将光学系统的光阑（可以理解为相机的光圈）在水平和垂直方向上复制多次来扩大系统所能容纳的视场角，并扩大眼动范围。如果将系统的总光学扩展量想象成一股水流，进行一维和二维出瞳扩展就类似于在花洒的不同档位间切换，并无物理本质上的提升。

缺点：

1. 光源的肉眼可见性、图像彩虹问题、画质模糊，光效只有1%、能耗高
2. 体积较大；以此为代表的是：vision pro、hololens、magicleapone、Rokid Glass 2

二：DOF

业界一般分成 3DOF 和 6DOF

3DOF即3自由度，只有旋转坐标，没有位移坐标，只能以设定好的虚拟头部为中心点，一切观察的基点都源于头部的视角，就像是固定在电线杆上的摄像头，可以任意旋转，但无法上下左右前后位移离开电线杆。

因此在3DOF VR设备中，玩家只能看却摸不着，所以3DOF VR设备，主要用于观影体验。

6DOF：6DOF即6自由度，在3DOF基础上再增加“上下、前后、左右”等3个位置相关的自由度。头部从3DOF只能检测到头部转动姿态到6DOF可以检测伸头缩头等姿态，而且还可以检测身体移动上下前后左右位移的变化。所以6DOF更加符合人体体验，更具沉浸感。

三：辐辏调节

在自然视觉中，调节和会聚常常一起工作，会聚的程度会影响眼睛晶状体的调节，反之亦然，从而保证灵活而强大的视力。当我们观察远处物体时，眼球的晶状体会放松，视线平行以保持远距离的聚焦状态。但观察近处物体时，眼睛会收缩晶状体调整焦距，让视线聚焦到物体上。如果大脑接收到眼睛调节和会聚之间的线索不匹配时，就会发生辐辏调节冲突（Vergence-accommodation conflict，以下简称 VAC ），对眼睛造成压力。

在 VR 中情况有所不同。3D 图像总是显示在眼前固定距离的屏幕上，为了获得清晰的图像，眼球晶状体聚焦的距离一直不变——调节固定。当你看向不同距离的物体时，仍然需要旋转眼球让视线汇聚到不同深度的物体上——会聚（辐辏角度）不断变化。如果用户想看清一个焦距小于屏幕的虚拟物体，就要增加会聚角度。这时调节视线方向和调节晶状体焦点之间不匹配，打破了原本大脑里自然的对应关系，冲突（VAC ）也就出现了。

四、人类瞳距与画布

1. 正常男性瞳距大约为61mm，女性约为58mm，
2. 一般停留在3-5m左右，用户在看的时候比较合适
3. 人类视觉：人类视觉跟随用户的视角，他的舒适可视角度会有不同

人眼成像距离：学术上，人眼可以聚焦看清最近6cm，最远无限远的图像

五、透视技术 See-Through

透视方式一般分成 2 种：光学透视，英文全称为Optical See-Through，简称OST，视频透视，英文全称为Video See-Through，简称VST。

OST：其体感可以理解为戴了一个光学镜片去看外部世界，外部世界的光线直接通过眼镜片进入到眼睛当中。真实世界是通过放置在用户眼前的半透明光学合成器看到的。光学合成器也被用来将计算机生成的图像反射到用户的眼睛里，从而将真实世界和虚拟世界结合起来。

VST：就像拿着手机照相，外部的世界通过摄像头显示在手机屏幕上，通过手机屏幕看到外部世界。真实世界是通过相机捕捉到实时视图，然后与计算机图像技术结合在一起，将相机捕捉到的“真实世界”与计算机生成的“虚拟图像”叠加后，共同呈现在不透明的显示器上，达到类似透明的效果。

以上就是我认为交互设计师要知道的 AR 的一些基础信息。

有时候，我们需要让用户注意到产品中的重要信息，以方便用户进行后续的环节。那么，我们要怎么增强关键信息的“易发现性”呢？如果想要减弱“易发现性”，又可以怎么做？本文尝试从三个方面阐述了“易发现性”该如何控制，一起来看看吧。

一、什么是易发现性

在《GB/T 29836-2013 系统与软件易用性》的人机交互系统模型中，我们可以了解到其中有一环是“感知系统（视觉、听觉等）”。在交互系统中，发现信息是必不可少的一环。如果产品中的重要信息没有被用户“发现”，或者很难被“发现”。那么对用户的体验是毁灭性的，没能注意到信息，那下面的环节就无法进行了。

比如在一个购物场景中，用户都选好商品准备付款了，但是发现找不到“付款”按钮。最后导致没有付款成功。所以产品需要在当前场景中，让关键信息具备好的“可发现性”。

二、如何增强、减弱可发现性

我们的感知觉是我们接收外界刺激的一个重要渠道。知觉是一个庞大的概念，其包含的内容可以再分为视知觉、听知觉、嗅知觉、触知觉和味知觉。

可发现性如此重要，我们可以从感管几种方面入手分析如何增强、减弱可发现性。

1. 视觉

在我们的日常学习工作当中，大部分的信息都是通过视觉通道输入我们大脑的，正常人从外界接收的信息中百分之八十是通过视觉获得的。它在学习工作当中占据了非常重要的位置。

1）大小

一个东西很小眼睛就不容易捕捉到。如果是体型巨大，整个压在眼前的话。甚至不得不去注意。如下图中，图片A在右侧的例子中因为变大，更容易被用户发现。

2）颜色

下图是一个视觉例子，要用户注意到第三行第三个字。下面有图把“这”这个字赋予了蓝色，让它和其他的汉字区别开来。

3）位置

① 单屏的浏览顺序

位置的重要程度，参考古腾堡原则，它把画面所呈现的内容分成四个象限。

1. 第一视觉区（POA）：左上方，用户首先注意到的地方；
2. 强休息区（SFA）：右上方，较少被注意到；
3. 弱休息区（WFA）：左下方，最少被注意到；
4. 终端视觉区（TA）：右下方，视觉流终点。

用户视线很自然的会从第一视觉区开始，逐渐移动到终端休息区。整个阅读过程视线都会沿着一条方向轴开始从左到右浏览。用户会更容易关注到页面的开始与结束区域，而中间的段落则很少被关注到。

所以设计界面的时候要把重要的东西放在“第一视觉区”和“终端休息区”。

② 多屏的浏览顺序

那么用户在跨屏幕的浏览情况如何呢？下面的聚合热图显示了各种页面的 57,453 个眼球追踪注视。红色表示用户看最多的地方；黄色是他们看起来较少的地方。白色区域几乎没有任何外观。顶部的黑色条纹表示研究中的页面折叠；随后的黑色条纹代表滚动后的每个附加屏幕。

“发现用户注意力在页面折叠位置急剧下降。首屏上方的元素比首屏下方的元素看到的次数更多：首屏上方 100 个像素的观看次数比首屏下方 100 个像素的观看次数多 102%”。

所以要非常重视首屏的价值，因为用户往往不会继续往下滚动了。

如果要提高第二屏的浏览率，应该从图形上暗示下面还有内容，而不是给一个看起来完整的界面。如下图所示。右图的笔记本图片的下半部分被截断，用户为了看完整的图片会往下滚动。

4）动效

bilibili中自己关注的博主进行直播时，出现如下图效果。不单是个性化具备吸引力，而且右上角的图表的动态效果，也一下子被注意到。根据生活体验，动态效果吸引注意力的能力很强，能让人快速注意到该内容。同时也意味着它对别的内容有较强的打扰效果，要注意非常节制。

2. 听觉

生活中我们有时候会忘记自己的手机放在哪里，这时候只有用另外一个通讯设备打电话给手机。手机发出铃声，那么就可以知道手机的位置，从而找到它了。还有微信发送消息的声音，一下子让你感受到工作的压力（打工人有感）这些就是听觉的可发现性。

3. 更少的内容

在《How Little Do Users Read?》一文中，作者通过实验揭示了用户在网站上的阅读情况。结果显示，用户只会浏览一小部分文字，不会看完所有的文字。

下图为“文本阅读百分比”这一段中的图片，显示了用户在平均访问不同字数的页面期间可以阅读的最大文本量。我们可以看到字数越少，用户看内容的比例就越大。所以精简文字信息，可以帮助用户看到完全的内容。

不要滥用：

上面有各种方法让某元素更加明显或者不明显。在工作中常常会出现这么一个问题：界面上的很多元素都很重要。比如会员开通跟核心Kpi相关很重要，所以要明显。核心权益很重要要，需要明确地显示出来。但是人的注意力是有限的，所有东西都重要，都很明显。那么意思就是都不重要。

视觉上的重要程度，需要有主次才能被体现出来。

PS：冯·雷斯托夫效应 (Von Restorff Effect) ，也称为隔离效应 (Isolation Effect) 。1933 年，德国精神病学家、儿科医生 Hedwig Von Restorff 在研究中发现，对被测试者提供一系列相似的项，而只有一项显得特别、孤立、与众不同的时候，这一项往往更容易被记住。以上的视觉、听觉、触觉的例子都是从不同角度下“冯·雷斯托夫效应”的现象。

总结

易发现性在用户与交互对象之间有重要的作用，能够帮助用户找到自己想要的内容。本文用“视觉”、“听觉”、“更少的内容”3个方面进行阐述了如何控制易发现性。希望这篇文章可以帮助到其他的设计师。