編輯導(dǎo)語(yǔ)：我們經(jīng)常會(huì)談到用戶體驗(yàn)，其實(shí)好的用戶體驗(yàn)與設(shè)計(jì)映射是有很大關(guān)系的，今天的設(shè)計(jì)法則-映射，希望能為你提升產(chǎn)品用戶體驗(yàn)度帶來(lái)一點(diǎn)思考～

設(shè)計(jì)心理學(xué)中的第三個(gè)交互設(shè)計(jì)概念：映射。

同樣，這個(gè)概念也要結(jié)合示能和意符一起來(lái)思考。諾曼先生在設(shè)計(jì)心理學(xué)中提到了映射這個(gè)概念，但是比較精煉，對(duì)于初學(xué)者來(lái)說(shuō)只能有個(gè)大概的了解。所以今天我們繼續(xù)用更多的案例來(lái)說(shuō)一說(shuō)這個(gè)概念在我們數(shù)字化以及生活中運(yùn)用的實(shí)際場(chǎng)景。

這雖然是交互基礎(chǔ)的概念但對(duì)我們?cè)O(shè)計(jì)師來(lái)說(shuō)也極其重要，概念雖然很簡(jiǎn)單，但實(shí)際在設(shè)計(jì)中也會(huì)頻繁的遇到問(wèn)題。我們先用比較正緊的文案來(lái)描述一下這些比較“枯燥”的概念，映射是一個(gè)術(shù)語(yǔ)，從數(shù)理理論借用而來(lái)，表示兩組事物要素之間的關(guān)系。（書中諾曼先生的原話）上兩篇文章我們說(shuō)的示能和意符，表示了事物本身具備或傳達(dá)的功能和被交互性，而映射則是表示了控制器和被控制對(duì)象的關(guān)系。

好的示能和意符的設(shè)計(jì)，可以讓映射變的自然。第一篇示能我們舉了一個(gè)開(kāi)關(guān)的例子，多控開(kāi)關(guān)之所以讓人抓狂首先是缺少了意符的表達(dá)，其次是映射的不合理。就如同我們?cè)跁幸?jiàn)過(guò)的一個(gè)煤氣灶的案例，4個(gè)灶頭下方有4個(gè)控制開(kāi)關(guān)，左右兩種不同的排列方法，體現(xiàn)出好的映射有多重要。

一、映射的三種層次

諾曼老師在如何設(shè)計(jì)映射中提到，自然映射設(shè)計(jì)可以分為3種層次：

1. 最佳的映射：控件分布在被控物體的主體對(duì)象上
2. 次佳的映射：控件與被控對(duì)象相對(duì)更接近
3. 第三佳的映射：控件與被控對(duì)象在空間分布一致

這三種映射的層次在體驗(yàn)中的滿意度與效率一次遞減，我們依次在舉例說(shuō)明

1.1 控件分布在被控制的對(duì)象上

例如門把手在門上，我們就覺(jué)得這映射設(shè)計(jì)的很自然，通過(guò)轉(zhuǎn)動(dòng)把手可以對(duì)門進(jìn)行開(kāi)和關(guān)。再例如我家的洗衣機(jī)上有一個(gè)用來(lái)選擇洗滌模式的旋鈕，洗滌模式圍繞在旋鈕的周圍，旋鈕上有光點(diǎn)，旋轉(zhuǎn)旋鈕光點(diǎn)就會(huì)旋轉(zhuǎn)到我們需要的洗滌模式上，這也是控件與對(duì)象一體的形式，滿足用戶對(duì)控制器與被控制對(duì)象的心理預(yù)期。

那在數(shù)字產(chǎn)品中我們也會(huì)遇到類似的情況，例如我們想展開(kāi)放置在一個(gè)卡片中的文字，我們通常最好的方式是在文本的邊上設(shè)計(jì)一個(gè)提示展開(kāi)的“可點(diǎn)擊按鈕”，再次的方案是放在文案的下方，最不可取的就是放在卡片以外的區(qū)域，因?yàn)橛成潢P(guān)系逐漸減弱到無(wú)關(guān)。

再舉個(gè)例子iOS系統(tǒng)中如果要調(diào)節(jié)音量，可以在音量模塊中直接通過(guò)手指的滑動(dòng)來(lái)調(diào)節(jié)，而不需要在模塊中或者模塊外部加上兩個(gè)用來(lái)增減音量的按鈕。不過(guò)說(shuō)實(shí)話，華為的曲面屏雙擊側(cè)邊喚出音量控制模塊，個(gè)人覺(jué)得成本還要比物理實(shí)體按鍵更高一點(diǎn)。

除此之外，智能手機(jī)在逐漸演變進(jìn)化的過(guò)程中，手勢(shì)操作功不可沒(méi)，利用手勢(shì)代替按鈕也節(jié)省了更多的成本并且在效率方面也得到了提升。例如視頻播放器的應(yīng)用中，會(huì)有相應(yīng)的控件用來(lái)控制視頻的播放、暫停、聲音、進(jìn)度、亮度、橫豎等等，這些按鈕其實(shí)就是最佳的映射設(shè)計(jì)

1.2. 次佳：控件與被控對(duì)象更接近

這個(gè)也就是我們常說(shuō)的格式塔心理學(xué)中的接近原則，因?yàn)樵娇拷较嚓P(guān)，很好理解。某些物件在設(shè)計(jì)時(shí)無(wú)法將控件和被控對(duì)象結(jié)合設(shè)計(jì)，那么我們只能退而求其次，讓他倆能更靠近一些，在映射關(guān)系上可以更清晰。

接下來(lái)我會(huì)給大家看我家的冰箱和電飯煲的操作界面，大家就知道，次佳的映射如果不好好設(shè)計(jì)，也會(huì)顯的很糟糕。如圖所示，其實(shí)界面的信息設(shè)計(jì)無(wú)非就是這樣，如果你可以把這些界面的信息設(shè)計(jì)的有邏輯有層次，那么在其他的用戶界面中也能夠如法炮制。

例如電飯煲的烹飪模式和其對(duì)應(yīng)的按鈕，都是通過(guò)點(diǎn)擊多次按鈕進(jìn)行控制，而不是在單獨(dú)的模式中具有單獨(dú)的按鈕，而最好的方法那肯定就是想選什么模式直接選，而不是做一個(gè)按鈕來(lái)多次切換。

這里是因?yàn)楸旧磉@款電飯煲沒(méi)有智能面板，所以通過(guò)物理按鈕只能這么做，否則，按鈕一多就更難操作了。那有小伙伴問(wèn)他能不能和洗衣機(jī)一樣做個(gè)旋鈕呢？當(dāng)然也可以，因?yàn)樾饋?lái)也比多點(diǎn)幾次按鈕來(lái)的方便，只不過(guò)旋鈕做上去之后其他的按鈕可能也要變成旋鈕，在產(chǎn)品設(shè)計(jì)上就有更多的問(wèn)題要探討啦。

所以我們?cè)賮?lái)看它的按鈕分布，發(fā)現(xiàn)其實(shí)控制按鈕和被控制的參數(shù)其實(shí)缺少了距離關(guān)系，當(dāng)你看著想要控制的參數(shù)卻找不到控制按鈕的時(shí)候就會(huì)比較抓狂，因?yàn)樵谶@個(gè)布局中既沒(méi)有滿足最佳也沒(méi)有滿足次佳，甚至連在空間分布上也無(wú)法產(chǎn)生對(duì)應(yīng)。

然后我們?cè)倏催@個(gè)電冰箱，這個(gè)西門子電冰箱的用戶面板我也屬實(shí)沒(méi)有看懂，但距離關(guān)系已經(jīng)做的比咱電飯煲要好一些了，至少左右兩側(cè)的按鈕應(yīng)該是控制左右兩側(cè)不同的溫度。

左右兩側(cè)分別是冷凍和冷藏的設(shè)置，但是中間只有兩個(gè)溫度，一共4個(gè)按鈕和兩個(gè)溫度，這顯然在自然理解下是不能理解的，這就和艾爾登法環(huán)里的boss們的關(guān)系一樣混亂，那4個(gè)按鈕為什么只有2個(gè)溫度呢，因?yàn)樽髠?cè)的兩個(gè)按鈕分別是切換不同的溫度設(shè)定，而右側(cè)的一個(gè)按鈕和溫度并沒(méi)有任何的血親關(guān)系，因?yàn)樗褪且粋€(gè)鎖！不仔細(xì)看還以為它是用來(lái)控制溫度的，因?yàn)楹推渌齻€(gè)按鈕太像了！這不就是在濫竽充數(shù)么。

這里的兩個(gè)案例我們發(fā)現(xiàn)，在次佳的映射中，其實(shí)就對(duì)格式塔心理學(xué)里的原則應(yīng)用的比較多，為了讓控制器和被控制對(duì)象的關(guān)系更緊密。

1.3 控件與被控對(duì)象在空間分布一致

在某些場(chǎng)景下，我們是無(wú)法通過(guò)設(shè)計(jì)讓控件與對(duì)象滿足1、2兩個(gè)要求，所以就會(huì)有第三種，在空間分布上一致，例如在一個(gè)大空間中的燈與開(kāi)關(guān)，開(kāi)關(guān)不可能做在燈本體上，也沒(méi)有辦法讓它倆靠的更近，所以只能在空間分布上更加一致，才能夠讓映射關(guān)系合理。

其實(shí)數(shù)字產(chǎn)品的用戶界面設(shè)計(jì)，基本上我們可以做到1、2點(diǎn)，因?yàn)楸旧韰^(qū)域有限，控制器和對(duì)象也幾乎在彈丸之地互相映襯，大部應(yīng)用的控件操作起來(lái)也都很簡(jiǎn)單，但是不外乎一些較為復(fù)雜的工具類產(chǎn)品，例如車機(jī)系統(tǒng)，通過(guò)中控屏來(lái)控制車輛的一系列功能例如：空調(diào)、座椅、車窗等等，那我們也發(fā)現(xiàn)其按鈕的分布也是滿足了這樣的交互映射，將物理按鈕變?yōu)樘摂M按鈕集成在中控屏幕中，為了讓用戶更好的映射出它們之間的關(guān)系，于是我們就需要利用空間分布的關(guān)系，來(lái)讓用戶明白，按鈕與控制對(duì)象的關(guān)聯(lián)邏輯。

例如在特斯拉的UI界面中，將整體分為3塊區(qū)域，左邊是形式儀表右側(cè)是多功能區(qū)域底部則是車輛相關(guān)的控制功能，你想控制前后車燈，那么按鈕就會(huì)在車輛模型的前后兩側(cè)，如果你想打開(kāi)空調(diào)則在底部工具欄的中間即可打開(kāi)，如果你想給座椅加熱那么也可以像圖片中那樣在4個(gè)座位的圖片中進(jìn)行交互就可以實(shí)現(xiàn)。

這樣的設(shè)計(jì)讓控件與被控制的對(duì)象能夠遠(yuǎn)距離在控件上形成一個(gè)映射關(guān)系。還有在日常生活中，大家家里是否用過(guò)升降式晾衣架，通過(guò)旋轉(zhuǎn)把手來(lái)操控升降，這里其實(shí)也很難應(yīng)用到空間部分，因?yàn)閮烧咚幍钠矫娌煌?，就更加無(wú)法對(duì)應(yīng)起來(lái)，有沒(méi)有一種比較好的方式來(lái)解決這個(gè)問(wèn)題呢，我覺(jué)得可以用顏色或者標(biāo)記來(lái)做映射的對(duì)應(yīng)。所以為了映射的相關(guān)性、同型、同色、靠近等方式都可以用來(lái)提升二者的相關(guān)性。

二、映射在數(shù)字產(chǎn)品中的應(yīng)用

數(shù)字產(chǎn)品中的映射也是關(guān)于控制器和被控制對(duì)象的故事。數(shù)字產(chǎn)品中也有不少的控制器我們就稱之為控件，例如一個(gè)圖標(biāo)按鈕、一個(gè)下拉列表或者一個(gè)滑塊，它們都有各自的控制對(duì)象。而我們常說(shuō)什么樣的設(shè)計(jì)滿足用戶心智，指的就是讓用戶覺(jué)得當(dāng)他操控控件后帶來(lái)的結(jié)果與反饋是他預(yù)期之中的，這就會(huì)讓其覺(jué)得是合理的、自然的。

案例1

例如在這個(gè)案例中，設(shè)計(jì)師其實(shí)是想通過(guò)按鈕來(lái)控制車中相關(guān)的功能，但是大家能發(fā)現(xiàn)問(wèn)題嗎？映射的前提是控件要先滿足示能和意符的表達(dá)，其次再通過(guò)映射告訴用戶，誰(shuí)控制誰(shuí)。但我們發(fā)現(xiàn)這個(gè)界面中的按鈕其實(shí)在示能和意符上出現(xiàn)了歧義，例如熱車的圖標(biāo)，我們通常認(rèn)為這樣的宮格形式布局都是以入口形式存在，點(diǎn)擊后會(huì)進(jìn)入下一個(gè)界面，但是設(shè)計(jì)師在這里其實(shí)把一些情況搞混了。

所以我們仔細(xì)看，這些圖標(biāo)就像是電飯煲上的按鈕，只要點(diǎn)擊就會(huì)觸發(fā)車輛狀態(tài)的變化，相當(dāng)于一個(gè)開(kāi)關(guān)，咱們先不說(shuō)這樣的設(shè)計(jì)是否方便用戶，我們看映射其實(shí)就會(huì)發(fā)現(xiàn)用戶其實(shí)很難做到空間布局上的對(duì)照，從而更高效的來(lái)對(duì)車輛進(jìn)行控制。并且也存在一定的邏輯錯(cuò)誤，例如熱車和解鎖是什么邏輯，車窗開(kāi)到一半想停止怎么辦，空調(diào)要調(diào)節(jié)冷熱和溫度怎么辦，所以這里不再單純的是一個(gè)開(kāi)關(guān)集合的區(qū)域，會(huì)遇到很復(fù)雜的情況。

案例2

我們?cè)賮?lái)看一個(gè)案例，其實(shí)在數(shù)字界面中很多映射并非有直接對(duì)應(yīng)關(guān)系，而是需要用戶通過(guò)交互來(lái)觸發(fā)。在下面的界面中，是一個(gè)課程的詳情頁(yè)面，用戶可以發(fā)布自己的學(xué)習(xí)筆記通過(guò)音頻的方式發(fā)布在該頁(yè)面中，而底部的工具欄在當(dāng)前的設(shè)計(jì)中就會(huì)出現(xiàn)映射相關(guān)的問(wèn)題。

我們即然要發(fā)布音頻那么我們有這些問(wèn)題可以提前預(yù)設(shè)好

1. 需要有什么控件來(lái)控制嗎？例如一個(gè)按鈕
2. 那么這個(gè)按鈕是點(diǎn)擊后松開(kāi)再開(kāi)始錄音，還是需要長(zhǎng)按開(kāi)始錄音，亦或者點(diǎn)擊之后進(jìn)入一個(gè)編輯頁(yè)面，再通過(guò)錄音或者上傳音頻的形式來(lái)編輯呢？
3. 點(diǎn)擊麥克風(fēng)錄完音頻后頁(yè)面會(huì)怎樣顯示
4. 能否試聽(tīng)、編輯，邊上的輸入框和麥克風(fēng)有關(guān)嗎？
5. 我可以直接輸入文字再點(diǎn)擊發(fā)布嗎或者直接點(diǎn)發(fā)布會(huì)出現(xiàn)什么呢？等等不管如何我們從需要有一個(gè)入口，所以這個(gè)入口比較關(guān)鍵。通過(guò)這個(gè)入口（按鈕）來(lái)觸發(fā)上傳音頻的整個(gè)交互流程，它也是一個(gè)映射關(guān)系，只是沒(méi)有全部展開(kāi)，因?yàn)檫@里無(wú)法展開(kāi)。

有同學(xué)想問(wèn)，為什么不能展開(kāi)呢？其實(shí)這個(gè)很好理解，就像我們做登錄和注冊(cè)的時(shí)候不會(huì)把兩個(gè)流程做在一個(gè)界面中一樣，造成頁(yè)面的復(fù)雜、不兼容。所以如果這里不需要音頻以外形式的發(fā)布內(nèi)容那么就無(wú)需把麥克風(fēng)、輸入框和發(fā)布按鈕拆解開(kāi)來(lái)做，造成了沒(méi)有必要的浪費(fèi)。一個(gè)按鈕可以作為一個(gè)入口來(lái)開(kāi)啟一個(gè)單獨(dú)的任務(wù)流程，但是如果這樣拆解開(kāi)那么任務(wù)流程就無(wú)法再高效的完成，并產(chǎn)生很大的歧義。數(shù)字化產(chǎn)品的映射往往是線性的

案例3

再說(shuō)一個(gè)類似的案例，這個(gè)也是小伙伴做的一個(gè)界面。初學(xué)者的問(wèn)題就比較明顯，在于他們沒(méi)有分步和階段性控制的概念?？傁胫粋€(gè)界面能完成多個(gè)任務(wù)，當(dāng)然在這里也沒(méi)有考慮好映射怎么做。

從這界面我們能很明顯的看出來(lái)這其實(shí)是一個(gè)發(fā)布的界面，從外部一個(gè)按鈕中進(jìn)行跳轉(zhuǎn)而來(lái)的。

如果讓你去評(píng)價(jià)你會(huì)怎么說(shuō)，是不是哪里都想說(shuō)一點(diǎn)，好像里面的信息、按鈕、功能就不應(yīng)該在這個(gè)界面？

你可能會(huì)有這些問(wèn)題：怎么把視頻、音頻、圖片做成tab，選擇不同的類型去發(fā)布？點(diǎn)擊錄制后音頻會(huì)出現(xiàn)在哪里？錄好一條后錄制按鈕還在不在？錄好一條后我切換到圖片再傳一張圖片再點(diǎn)擊下一步會(huì)出現(xiàn)什么？點(diǎn)擊草稿箱又會(huì)進(jìn)入什么界面？我什么都不操作直接點(diǎn)下一步會(huì)怎樣？這些問(wèn)題都將困擾我們完成一個(gè)發(fā)布任務(wù)。

將一個(gè)交互流程做清晰，就需要讓用戶有一個(gè)清晰的功能映射。所以點(diǎn)擊發(fā)布后，按鈕應(yīng)該要先控制發(fā)布類型這個(gè)對(duì)象，讓用戶選擇發(fā)布類型，然后再跳轉(zhuǎn)出對(duì)應(yīng)類型的發(fā)布流程。

三、總結(jié)

映射在交互體驗(yàn)的設(shè)計(jì)中也是很重要的概念之一，要結(jié)合示能和意符一起思考。同時(shí)剩余的概念我們也會(huì)在下期一起分享給大家，對(duì)于初學(xué)者來(lái)說(shuō)，這些概念很重要，在我們?cè)O(shè)計(jì)案例的時(shí)候務(wù)必要時(shí)刻思考與結(jié)合。

＃專欄作家＃

應(yīng)駿，人人都是產(chǎn)品經(jīng)理專欄作家，公眾號(hào)：應(yīng)謀鬼計(jì)（shejishiyj）

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

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