作者學(xué)生時代做過兩個導(dǎo)航的界面，畢業(yè)后又在公司做服務(wù)器安裝教學(xué)手冊。意外的發(fā)現(xiàn)這些界面的共通性就是利用平面的界面和實際的場景做對照，像是任天堂Switch Labo也是屬于這類的界面。平常很少有機會設(shè)計這樣虛實交錯的界面，想和大家分享一下設(shè)計的心得。歸納出以下三個原則：

1. 提供界面和實體對照的線索

第一個重點就是必須要建立起虛擬界面和實體世界可以互相對照的線索，讓使用者可以將界面對應(yīng)到現(xiàn)實當(dāng)中，并通過界面的引導(dǎo)做出下一個步驟。

例如在家具組裝說明書上會標(biāo)著木板的號碼，而在木板上也會貼著相對應(yīng)的號碼，讓使用者可以通過木板的形狀加上號碼和說明書對照起來，接著根據(jù)指示進行組裝。

又或者像是在設(shè)計導(dǎo)航系統(tǒng)的時候，使用者手上的界面必須要能和現(xiàn)實中的標(biāo)示對照起來，才能讓使用者相信這個界面是可靠的，是可以真的反映現(xiàn)實環(huán)境的。例如在使用百度地圖導(dǎo)航的時候，系統(tǒng)會提示：「在XX路右轉(zhuǎn)?！苟{駛就會開始找XX路的標(biāo)示，確定自己看到的是對的?；蚴峭ㄟ^現(xiàn)實中縮短的距離和界面上的距離相對應(yīng)，以做出和指示相應(yīng)的行動。

測試室內(nèi)導(dǎo)航系統(tǒng)時所貼的標(biāo)示，以利和使用者手上的界面相互對照

最后一個例子是叫車App，提供車子的型號、顏色和車牌號碼方便乘客找到司機。最近Lyft還有一個新功能，為了解決在晚上看不清楚車子的型號和車牌的問題，車子上會加裝一個燈，會依據(jù)不同的乘客顯示不同的顏色。像是下圖的例子，加裝的燈就會顯示綠色。如果是拼車的話，接到了這個乘客要去接下一個人的時候，就會顯示另外的顏色。

2. 注重細節(jié)，盡可能還原現(xiàn)實

這點在設(shè)計安裝說明書的時候尤其重要，你永遠不知道使用者會在哪里受到挫折，找不到說明書上所畫的那塊木板，或是一個螺孔，因此每個細節(jié)都會成為使用者的線索。

這里拿IKEA的組裝說明書做個例子，IKEA試著把說明書簡化再簡化，不帶任何文字說明。因此有時候就會發(fā)生這種情況，好不容易把柜子都快要裝完了，卻發(fā)現(xiàn)其中一片板子裝反了，最后一片板子裝不上去。最后只好把整個柜子拆開，把那片裝反的板子擺正，相當(dāng)于又重新組裝一次。這種狀況大概我每次買新家具都會發(fā)生Orz

為了要避免錯誤，這才開始觀察圖片上的各種細節(jié)，像是軌道的輪軸的相對位置或是螺孔的相對位置來判斷方向，利用螺絲的相對大小和形狀來判斷正確的螺絲是哪一個。

當(dāng)然有很多更好的設(shè)計可以避免這樣的錯誤，像是上面范例的利用貼紙編號來分辨零件，或是在零件上標(biāo)示前后左右等等，以提供更明顯的提示以連接界面和現(xiàn)實。這實在是IKEA應(yīng)該要改進的地方。

在工作上的例子雖然無法提供圖片作參考，但簡單和大家提一下。公司的新產(chǎn)品是四個連在一起的主機，工程師在安裝的時候必須從最下面開始安裝軌道，最后再把四個主機由下往上放進軌道里完成安裝。可是在手冊上只提供了安裝一個的范例，只簡單說明：「重復(fù)步驟1–4完成安裝」，這就造成了困擾。因為圖上只畫了其中一個主機，工程師不確定是要從下、從上、還是從中間開始安裝。即便有文字說明，但大多數(shù)人還是直接看圖，并且從圖中找線索。最后還是改了圖，依照現(xiàn)實安裝的情形還原圖片，避免有任何誤會的空間。

再用Lyft當(dāng)例子，上面同時提供：車型名稱、車子圖片、車牌號碼、燈的顏色、目前位置等五種訊息，對于對車型不熟的人可以用車子的圖片做對照，當(dāng)其中一個條件吻合但還不能確定的時候，使用者就可以使用其他的線索作為判斷的依據(jù)，以確認界面是可以和現(xiàn)實作對照的，相信這個界面是可以信賴的。

你永遠不知道使用者觀察的重點在哪里，每個人所依賴作為連結(jié)界面和現(xiàn)實的線索都不一樣，每個人觀察到的地方也都不盡相同。因此只能夠盡可能提供所有細節(jié)，讓使用者作對照，并且通過多個細節(jié)來重復(fù)確認。

3. 考慮使用情境

和一般的界面不同，在使用這類界面的時候，通常使用者不會只專注在界面上，而是同時參照頁面和實際情況做出判斷，因此在設(shè)計的時候也要考量到周圍的環(huán)境。

例如我們公司設(shè)計的安裝手冊，之前的版本會設(shè)計成隨身的小卡，附上搭扣和伸縮繩，讓工程師可以把本子帶在身上隨時查看。新的簡易版本只有一張紙，就附上磁鐵讓工程師可以把說明書吸在放主機的黑色鐵架子上，可以輕易的移動，并且隨時參照說明書內(nèi)容。目前正在開發(fā)的手機版本，則考慮附上紙折的手機架，讓使用者可以空出兩只手來，一邊看手機上的說明影片，一邊操作。尤其手機有光，在部分照明不足的資料中心里就可以不需額外照明閱讀內(nèi)容。

上次介紹了Nintendo Labo的互動式組裝說明書，使用者必須要一直按著Forward才會繼續(xù)播放說明影片。若非以游戲而是以實用性來說，其實不是個好設(shè)計。這個設(shè)計強迫使用者必須要騰出一只手來，暫停組裝，觀看完影片之后才能夠繼續(xù)操作，其實非常不方便。

Nintendo Labo組裝說明界面

導(dǎo)航app更是必須考量周圍的環(huán)境，尤其使用者一邊看導(dǎo)航一邊開車，更需要考慮安全性。我們在測試一個carpool app的時候，使用了賽車游戲的方向盤和剎車做測試，有些使用者一聽到提示的鈴聲就慌了，甚至直接踩下剎車，想停下來看到底發(fā)生了什么事。因此在提供指示的時候，不能只提供單一的機械音，而是完整的句子指示下個步驟，指示也不能太過復(fù)雜。如果指示太過復(fù)雜會讓使用者必須要分散注意力，判斷什么是必要的信息，在開車的時候分心則會造成危險。

總結(jié)

在設(shè)計連接虛擬界面和實體互動的這類界面的時候，要考慮的是如何提供適當(dāng)?shù)木€索讓使用者迅速將界面和實體連接起來。并且盡可能提供細節(jié)，提供多個線索讓使用者做對照，確認界面所提供的信息的準(zhǔn)確性。最后必須考慮使用當(dāng)下的情境，提供額外的協(xié)助和適當(dāng)?shù)奶嵝眩屖褂谜呖梢皂樌囊恍亩嘤谩?

雖然這類虛實互動的界面并不多見，但是在設(shè)計的時候可以多考慮??要如何結(jié)合現(xiàn)實的環(huán)境對應(yīng)虛擬的界面，以及界面的使用情境。希望大家也覺得很有趣 :)