本文跟大家聊聊線下終端屏幕的交互體驗(yàn)。關(guān)注這塊，是因?yàn)樽罱谒伎家粋€(gè)問(wèn)題：線下屏幕空間有限，如何最大化屏幕的商業(yè)價(jià)值？

線下終端設(shè)備，并不像手機(jī)，像 Android，iOS 系統(tǒng)都已經(jīng)有非常成熟的設(shè)計(jì)語(yǔ)言，官方也會(huì)提供設(shè)計(jì)指南，供設(shè)計(jì)師參考。不管細(xì)節(jié)怎么變，只要大框框不變，設(shè)計(jì)出來(lái)產(chǎn)品不會(huì)太難用。但線下終端設(shè)備跟手機(jī)使用環(huán)境完全不一樣，雖然運(yùn)行都是一套系統(tǒng)——Android，用戶的使用環(huán)境大不一樣，完全照搬手機(jī)端設(shè)計(jì)語(yǔ)言，反而會(huì)用戶帶來(lái)麻煩。

隨意舉兩個(gè)場(chǎng)景：

1. 元素取色：大部分時(shí)間，用戶是在室內(nèi)使用手機(jī)，色彩淡一點(diǎn)深一點(diǎn)都沒(méi)問(wèn)題。像戶外的販賣機(jī)，取色就要深些。本來(lái)受成本支出的影響，屏幕不可能用得非常好。如果畫像顏色過(guò)淺，太陽(yáng)光一照過(guò)來(lái)，你可能什么都不清。
2. 對(duì)話框位置：毫無(wú)疑問(wèn)，手機(jī)上的彈窗肯定是居中顯示。這一點(diǎn)如果要照搬到線下終端上，體會(huì)可能會(huì)很差。因?yàn)槟悴恢滥闫聊幌鄬?duì)用戶的位置，如果用戶面對(duì)的是一塊大屏幕，居中顯示彈窗可能相對(duì)于用戶偏下。用戶需要下蹲才能點(diǎn)到按鈕，很不自然。或者再進(jìn)一問(wèn)，彈窗是必要的嗎？

為什么從用戶體驗(yàn)談起？

為了更好理解什么是好的用戶體驗(yàn)？好在哪里？什么是不好的用戶體驗(yàn)？不好在哪里？我特意去體驗(yàn)的一些帶有屏幕的終端交互，特別是屏幕比較大的。

像下面的這個(gè)機(jī)器屏幕非常大，我正常站過(guò)去，視覺(jué)的水平線正好停留在購(gòu)買流程那一欄區(qū)域。如果我要查看商品，就要低頭查看，查看第一排的商品還好，垂直視角并不大，眼睛不會(huì)覺(jué)得不適。

查看第二排，第三排商品，就有些難受，因?yàn)楦┮曇暯潜容^大，眼睛很容易感覺(jué)疲勞。要么往后退，要么下蹲一些。而選擇商品或者點(diǎn)擊『下一步』，『下一頁(yè)，更不方便了，必須要下蹲才能夠得著那個(gè)按鈕。

既然作為交互的終端，在設(shè)計(jì)之初要考慮到這點(diǎn)。從交互的角度來(lái)講，屏幕的結(jié)構(gòu)設(shè)計(jì)是失敗的。

柜機(jī)下方的區(qū)域不符合自然交互習(xí)慣，沒(méi)必要設(shè)計(jì)到那里。如果考慮到讓用戶看到更多的內(nèi)容，更應(yīng)該想到用戶的視覺(jué)范圍在哪里，用戶操作區(qū)域在哪里？在合理的區(qū)域，依照用戶的自然視距來(lái)設(shè)計(jì)商品的大小，能夠放置的商品并不會(huì)比圖中的少。

商品擺放的位置會(huì)影響到用戶的決策。像超市，便利店，特別是藥店，深諳此道。對(duì)一般人來(lái)說(shuō)，買藥是非常低的頻次，對(duì)藥品的價(jià)格并不了解。什么樣的藥一般花多少，完全沒(méi)有概念。藥店為了最大程度獲取利潤(rùn)，往往將利潤(rùn)高的商品擺在最顯眼的位置，而常用的品牌，利潤(rùn)較低的商品一般都放在貨架的下面。

用戶交互的過(guò)程：視覺(jué)->操作->決策

同樣的道理，如果你想要讓你的產(chǎn)品的商業(yè)價(jià)值最大化，你需要關(guān)心以下兩點(diǎn)，不管你的產(chǎn)品是實(shí)物還是服務(wù)：

• 用戶的視覺(jué)焦點(diǎn)在哪里？你想讓他看到什么？
• 用戶的操作習(xí)慣什么樣的？你想讓用戶做什么操作？

抽象一下用戶跟柜機(jī)交互的過(guò)程：從視覺(jué)到操作，再到?jīng)Q策。

以藥品售賣機(jī)交互流程為例。從商業(yè)角度出發(fā)，自然是幫助用戶在最短的時(shí)間里找到想要的商品，然后付款完成交易。我們可以將這個(gè)流程按上面的交互拆解三個(gè)步驟：

1. 查找商品-視覺(jué)；
2. 選擇商品-操作；
3. 付款買單-決策。

決策是我們期望用戶完成的動(dòng)作，但它依賴于前兩個(gè)步驟。所以，我們盡可能做到的是，幫助用戶順利完成視覺(jué)和操作的任務(wù)。

如何衡量視覺(jué)價(jià)值

1. 視覺(jué)垂直范圍

當(dāng)我們站立時(shí)，人眼的垂直視覺(jué)可分幾個(gè)區(qū)域：

1. 最佳視覺(jué)區(qū)。最佳覺(jué)區(qū)在視平線以下 0-10° 范圍內(nèi)。這個(gè)很容易體會(huì)到，不管你是看書(shū)還是對(duì)著電腦，眼睛自然狀態(tài)都是向下垂的。
2. 良好視覺(jué)區(qū)。良好視覺(jué)區(qū)在視平線以下 10°-30°，視平線以上 0-25° 之間。
3. 最大視覺(jué)區(qū)。最大視覺(jué)區(qū)在視平線以下 30°-70°，視平線以下 25°-50° 之間。

我嘗試過(guò)在頭不動(dòng)情況下，去觀看最大視覺(jué)區(qū)的內(nèi)容，很不舒服。當(dāng)然，用戶在實(shí)際交互過(guò)程中，并不會(huì)這么做，稍微抬下頭或低下頭就可以了。所以，當(dāng)你設(shè)計(jì) UI 布局時(shí)，還是盡可能將重要內(nèi)容放置在最佳視覺(jué)區(qū)。

有了垂直視角范圍，你還需要知道視距和身高，再結(jié)合初中學(xué)的三角函數(shù)公式就能計(jì)算出用戶視覺(jué)不同區(qū)域。提到視距，這個(gè)數(shù)據(jù)非常有意思。在我測(cè)算之前，我想肯定是在一個(gè)動(dòng)態(tài)范圍內(nèi)，即使對(duì)某個(gè)人來(lái)說(shuō)。誰(shuí)知在測(cè)試過(guò)程中發(fā)現(xiàn)，我多次走到屏幕面前，眼睛與屏幕之間距離都是一個(gè)固定的數(shù)據(jù)。即使換另一個(gè)人來(lái)測(cè)試，數(shù)值仍是一樣，而我與對(duì)方的身高相差 20cm+。

2. 屏幕區(qū)域視覺(jué)價(jià)值分解

根據(jù)上面測(cè)算的數(shù)據(jù)，你就能知道用戶不同視覺(jué)區(qū)域落在屏幕的范圍。而了解了屏幕不同區(qū)域劃分，就能有針對(duì)性面向用戶設(shè)計(jì) UI。

如何衡量操作價(jià)值

1. 手臂操作范圍

與視覺(jué)類似，因?yàn)槿梭w抬手動(dòng)作的習(xí)慣，手臂在不同活動(dòng)范圍的感知也是一樣。下面是個(gè)人在實(shí)際體驗(yàn)過(guò)程中經(jīng)驗(yàn)總結(jié)，并不是從人體工程學(xué)嚴(yán)謹(jǐn)角度推導(dǎo)出來(lái)。僅針對(duì)站立時(shí)的屏幕交互場(chǎng)景，并不適用于其它站立的交互場(chǎng)景。

根據(jù)手臂活動(dòng)范圍的感知情況，我劃分了四個(gè)區(qū)域：

1. 操作最佳區(qū)。操作最佳區(qū)對(duì)應(yīng)的是最佳視覺(jué)區(qū)域范圍，視平線以下 0-10° 的垂直區(qū)域。
2. 操作良好區(qū)。同樣借用了良好視覺(jué)區(qū)范圍，視平線以下 10°-30° 的垂直區(qū)域。
3. 操作一般區(qū)。實(shí)際體驗(yàn)中發(fā)現(xiàn)，當(dāng)手指抬過(guò)視平線以上時(shí)，開(kāi)始覺(jué)得有些不自然，當(dāng)越過(guò)頭頂時(shí)，開(kāi)始覺(jué)得有些費(fèi)力。所以，我將操作一般區(qū)范圍定義在：視平線與身高之間垂直的區(qū)域。
4. 操作費(fèi)力區(qū)。當(dāng)手指越來(lái)頭頂時(shí)，為保證手指區(qū)域落在視覺(jué)范圍內(nèi)，需要抬頭，用戶會(huì)感覺(jué)到費(fèi)力，而所能抬高的極限范圍就是臂長(zhǎng)了。所以，我將操作費(fèi)力區(qū)定義在：身高與臂長(zhǎng)之間的垂直區(qū)域。

2. 屏幕區(qū)域操作價(jià)值分解

同樣，按視覺(jué)價(jià)值分解的思路，根據(jù)操作難易的維度，來(lái)劃分屏幕的操作價(jià)值。考慮到大部分用戶右手操作習(xí)慣，沒(méi)有將整個(gè)平行區(qū)域定義劃為最佳操作區(qū)。而是僅將右半部分劃分最佳操作區(qū)，左半部分并入到操作良好區(qū)。

商業(yè)價(jià)值 = 視覺(jué)價(jià)值 * 操作價(jià)值（轉(zhuǎn)化率）

如果將流程的完成看作為商業(yè)價(jià)值的完成，那么商業(yè)價(jià)值就有兩部分完成：視覺(jué)價(jià)值和操作價(jià)值。視覺(jué)價(jià)值決定用戶看到的商品/服務(wù)價(jià)值，操作價(jià)值影響用戶點(diǎn)擊的轉(zhuǎn)化率。需要注意的是，視覺(jué)價(jià)值 > 操作價(jià)值。用戶只有先看到，才可能會(huì)去操作。兩者相乘才是最終的結(jié)果，即：

商業(yè)價(jià)值 = 視覺(jué)價(jià)值 * 操作價(jià)值（轉(zhuǎn)化率）

假如你也負(fù)責(zé)的產(chǎn)品涉及線下終端屏幕的交互，不妨看一看，你們的設(shè)計(jì)是否合理，如何改進(jìn)UI方案，提升商業(yè)價(jià)值。當(dāng)然，上面分解的思路是從用戶體驗(yàn)入手，提供了一個(gè)設(shè)計(jì)框架。在實(shí)際的產(chǎn)品設(shè)計(jì)中，還要看最終的數(shù)據(jù)效果如何，只有驗(yàn)證通過(guò)的方案，才是好的方案。

#專欄作家#

lei，微信公眾號(hào)：monster_talks，人人都是產(chǎn)品經(jīng)理專欄作家。豐巢產(chǎn)品經(jīng)理。主導(dǎo)過(guò)智能硬件，物流行業(yè)的啟動(dòng)項(xiàng)目。專注To B業(yè)務(wù)策劃和數(shù)據(jù)分析，輔助業(yè)務(wù)決策。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議