虚拟与现实世界结合的界面设计秘诀

作者学生时代做过两个导航的界面，毕业后又在公司做服务器安装教学手册。意外的发现这些界面的共通性就是利用平面的界面和实际的场景做对照，像是任天堂Switch Labo也是属于这类的界面。平常很少有机会设计这样虚实交错的界面，想和大家分享一下设计的心得。归纳出以下三个原则：

1. 提供界面和实体对照的线索

第一个重点就是必须要建立起虚拟界面和实体世界可以互相对照的线索，让使用者可以将界面对应到现实当中，并通过界面的引导做出下一个步骤。

例如在家具组装说明书上会标着木板的号码，而在木板上也会贴着相对应的号码，让使用者可以通过木板的形状加上号码和说明书对照起来，接着根据指示进行组装。

又或者像是在设计导航系统的时候，使用者手上的界面必须要能和现实中的标示对照起来，才能让使用者相信这个界面是可靠的，是可以真的反映现实环境的。例如在使用百度地图导航的时候，系统会提示：「在XX路右转。」而驾驶就会开始找XX路的标示，确定自己看到的是对的。或是通过现实中缩短的距离和界面上的距离相对应，以做出和指示相应的行动。

测试室内导航系统时所贴的标示，以利和使用者手上的界面相互对照

最后一个例子是叫车App，提供车子的型号、颜色和车牌号码方便乘客找到司机。最近Lyft还有一个新功能，为了解决在晚上看不清楚车子的型号和车牌的问题，车子上会加装一个灯，会依据不同的乘客显示不同的颜色。像是下图的例子，加装的灯就会显示绿色。如果是拼车的话，接到了这个乘客要去接下一个人的时候，就会显示另外的颜色。

2. 注重细节，尽可能还原现实

这点在设计安装说明书的时候尤其重要，你永远不知道使用者会在哪里受到挫折，找不到说明书上所画的那块木板，或是一个螺孔，因此每个细节都会成为使用者的线索。

这里拿IKEA的组装说明书做个例子，IKEA试着把说明书简化再简化，不带任何文字说明。因此有时候就会发生这种情况，好不容易把柜子都快要装完了，却发现其中一片板子装反了，最后一片板子装不上去。最后只好把整个柜子拆开，把那片装反的板子摆正，相当于又重新组装一次。这种状况大概我每次买新家具都会发生Orz

为了要避免错误，这才开始观察图片上的各种细节，像是轨道的轮轴的相对位置或是螺孔的相对位置来判断方向，利用螺丝的相对大小和形状来判断正确的螺丝是哪一个。

当然有很多更好的设计可以避免这样的错误，像是上面范例的利用贴纸编号来分辨零件，或是在零件上标示前后左右等等，以提供更明显的提示以连接界面和现实。这实在是IKEA应该要改进的地方。

在工作上的例子虽然无法提供图片作参考，但简单和大家提一下。公司的新产品是四个连在一起的主机，工程师在安装的时候必须从最下面开始安装轨道，最后再把四个主机由下往上放进轨道里完成安装。可是在手册上只提供了安装一个的范例，只简单说明：「重复步骤1–4完成安装」，这就造成了困扰。因为图上只画了其中一个主机，工程师不确定是要从下、从上、还是从中间开始安装。即便有文字说明，但大多数人还是直接看图，并且从图中找线索。最后还是改了图，依照现实安装的情形还原图片，避免有任何误会的空间。

再用Lyft当例子，上面同时提供：车型名称、车子图片、车牌号码、灯的颜色、目前位置等五种讯息，对于对车型不熟的人可以用车子的图片做对照，当其中一个条件吻合但还不能确定的时候，使用者就可以使用其他的线索作为判断的依据，以确认界面是可以和现实作对照的，相信这个界面是可以信赖的。

你永远不知道使用者观察的重点在哪里，每个人所依赖作为连结界面和现实的线索都不一样，每个人观察到的地方也都不尽相同。因此只能够尽可能提供所有细节，让使用者作对照，并且通过多个细节来重复确认。

3. 考虑使用情境

和一般的界面不同，在使用这类界面的时候，通常使用者不会只专注在界面上，而是同时参照页面和实际情况做出判断，因此在设计的时候也要考量到周围的环境。

例如我们公司设计的安装手册，之前的版本会设计成随身的小卡，附上搭扣和伸缩绳，让工程师可以把本子带在身上随时查看。新的简易版本只有一张纸，就附上磁铁让工程师可以把说明书吸在放主机的黑色铁架子上，可以轻易的移动，并且随时参照说明书内容。目前正在开发的手机版本，则考虑附上纸折的手机架，让使用者可以空出两只手来，一边看手机上的说明影片，一边操作。尤其手机有光，在部分照明不足的资料中心里就可以不需额外照明阅读内容。

上次介绍了Nintendo Labo的互动式组装说明书，使用者必须要一直按着Forward才会继续播放说明影片。若非以游戏而是以实用性来说，其实不是个好设计。这个设计强迫使用者必须要腾出一只手来，暂停组装，观看完影片之后才能够继续操作，其实非常不方便。

Nintendo Labo组装说明界面

导航app更是必须考量周围的环境，尤其使用者一边看导航一边开车，更需要考虑安全性。我们在测试一个carpool app的时候，使用了赛车游戏的方向盘和刹车做测试，有些使用者一听到提示的铃声就慌了，甚至直接踩下刹车，想停下来看到底发生了什么事。因此在提供指示的时候，不能只提供单一的机械音，而是完整的句子指示下个步骤，指示也不能太过复杂。如果指示太过复杂会让使用者必须要分散注意力，判断什么是必要的信息，在开车的时候分心则会造成危险。

总结

在设计连接虚拟界面和实体互动的这类界面的时候，要考虑的是如何提供适当的线索让使用者迅速将界面和实体连接起来。并且尽可能提供细节，提供多个线索让使用者做对照，确认界面所提供的信息的准确性。最后必须考虑使用当下的情境，提供额外的协助和适当的提醒，让使用者可以顺利的一心多用。

虽然这类虚实互动的界面并不多见，但是在设计的时候可以多考虑​​要如何结合现实的环境对应虚拟的界面，以及界面的使用情境。希望大家也觉得很有趣 :)