編輯導語：我們經常會談到使用者體驗，其實好的使用者體驗與設計映射是有很大關系的，今天的設計法則-映射，希望能為你提升産品使用者體驗度帶來一點思考～
設計心理學中的第三個互動設計概念：映射。
同樣，這個概念也要結合示能和意符一起來思考。諾曼先生在設計心理學中提到了映射這個概念，但是比較精煉，對于初學者來說隻能有個大概的了解。是以今天我們繼續用更多的案例來說一說這個概念在我們數字化以及生活中運用的實際場景。
這雖然是互動基礎的概念但對我們設計師來說也極其重要，概念雖然很簡單，但實際在設計中也會頻繁的遇到問題。我們先用比較正緊的文案來描述一下這些比較“枯燥”的概念，映射是一個術語，從數理理論借用而來，表示兩組事物要素之間的關系。（書中諾曼先生的原話）上兩篇文章我們說的示能和意符，表示了事物本身具備或傳達的功能和被互動性，而映射則是表示了控制器和被控制對象的關系。
好的示能和意符的設計，可以讓映射變的自然。第一篇示能我們舉了一個開關的例子，多控開關之是以讓人抓狂首先是缺少了意符的表達，其次是映射的不合理。就如同我們在書中見過的一個瓦斯竈的案例，4個竈頭下方有4個控制開關，左右兩種不同的排列方法，展現出好的映射有多重要。
一、映射的三種層次
諾曼老師在如何設計映射中提到，自然映射設計可以分為3種層次：
最佳的映射：控件分布在被控物體的主體對象上
次佳的映射：控件與被控對象相對更接近
第三佳的映射：控件與被控對象在空間分布一緻
這三種映射的層次在體驗中的滿意度與效率一次遞減，我們依次在舉例說明
1.1 控件分布在被控制的對象上
例如門把手在門上，我們就覺得這映射設計的很自然，通過轉動把手可以對門進行開和關。再例如我家的洗衣機上有一個用來選擇洗滌模式的旋鈕，洗滌模式圍繞在旋鈕的周圍，旋鈕上有光點，旋轉旋鈕光點就會旋轉到我們需要的洗滌模式上，這也是控件與對象一體的形式，滿足使用者對控制器與被控制對象的心理預期。
那在數字産品中我們也會遇到類似的情況，例如我們想展開放置在一個卡片中的文字，我們通常最好的方式是在文本的邊上設計一個提示展開的“可點選按鈕”，再次的方案是放在文案的下方，最不可取的就是放在卡片以外的區域，因為映射關系逐漸減弱到無關。
再舉個例子iOS系統中如果要調節音量，可以在音量子產品中直接通過手指的滑動來調節，而不需要在子產品中或者子產品外部加上兩個用來增減音量的按鈕。不過說實話，華為的曲面屏輕按兩下側邊喚出音量控制子產品，個人覺得成本還要比實體實體按鍵更高一點。
除此之外，智能手機在逐漸演變進化的過程中，手勢操作功不可沒，利用手勢代替按鈕也節省了更多的成本并且在效率方面也得到了提升。例如視訊播放器的應用中，會有相應的控件用來控制視訊的播放、暫停、聲音、進度、亮度、橫豎等等，這些按鈕其實就是最佳的映射設計
1.2. 次佳：控件與被控對象更接近
這個也就是我們常說的格式塔心理學中的接近原則，因為越靠近越相關，很好了解。某些物件在設計時無法将控件和被控對象結合設計，那麼我們隻能退而求其次，讓他倆能更靠近一些，在映射關系上可以更清晰。
接下來我會給大家看我家的冰箱和電鍋的操作界面，大家就知道，次佳的映射如果不好好設計，也會顯的很糟糕。如圖所示，其實界面的資訊設計無非就是這樣，如果你可以把這些界面的資訊設計的有邏輯有層次，那麼在其他的使用者界面中也能夠如法炮制。
例如電鍋的烹饪模式和其對應的按鈕，都是通過點選多次按鈕進行控制，而不是在單獨的模式中具有單獨的按鈕，而最好的方法那肯定就是想選什麼模式直接選，而不是做一個按鈕來多次切換。
這裡是因為本身這款電鍋沒有智能面闆，是以通過實體按鈕隻能這麼做，否則，按鈕一多就更難操作了。那有小夥伴問他能不能和洗衣機一樣做個旋鈕呢？當然也可以，因為旋起來也比多點幾次按鈕來的友善，隻不過旋鈕做上去之後其他的按鈕可能也要變成旋鈕，在産品設計上就有更多的問題要探讨啦。
是以我們再來看它的按鈕分布，發現其實控制按鈕和被控制的參數其實缺少了距離關系，當你看着想要控制的參數卻找不到控制按鈕的時候就會比較抓狂，因為在這個布局中既沒有滿足最佳也沒有滿足次佳，甚至連在空間分布上也無法産生對應。
然後我們再看這個電冰箱，這個西門子電冰箱的使用者面闆我也屬實沒有看懂，但距離關系已經做的比咱電鍋要好一些了，至少左右兩側的按鈕應該是控制左右兩側不同的溫度。
左右兩側分别是冷凍和冷藏的設定，但是中間隻有兩個溫度，一共4個按鈕和兩個溫度，這顯然在自然了解下是不能了解的，這就和艾爾登法環裡的boss們的關系一樣混亂，那4個按鈕為什麼隻有2個溫度呢，因為左側的兩個按鈕分别是切換不同的溫度設定，而右側的一個按鈕和溫度并沒有任何的血親關系，因為它就是一個鎖！不仔細看還以為它是用來控制溫度的，因為和其他三個按鈕太像了！這不就是在濫竽充數麼。
這裡的兩個案例我們發現，在次佳的映射中，其實就對格式塔心理學裡的原則應用的比較多，為了讓控制器和被控制對象的關系更緊密。
1.3 控件與被控對象在空間分布一緻
在某些場景下，我們是無法通過設計讓控件與對象滿足1、2兩個要求，是以就會有第三種，在空間分布上一緻，例如在一個大空間中的燈與開關，開關不可能做在燈本體上，也沒有辦法讓它倆靠的更近，是以隻能在空間分布上更加一緻，才能夠讓映射關系合理。
其實數字産品的使用者界面設計，基本上我們可以做到1、2點，因為本身區域有限，控制器和對象也幾乎在彈丸之地互相映襯，大部應用的控件操作起來也都很簡單，但是不外乎一些較為複雜的工具類産品，例如車機系統，通過中控屏來控制車輛的一系列功能例如：空調、座椅、車窗等等，那我們也發現其按鈕的分布也是滿足了這樣的互動映射，将實體按鈕變為虛拟按鈕內建在中控螢幕中，為了讓使用者更好的映射出它們之間的關系，于是我們就需要利用空間分布的關系，來讓使用者明白，按鈕與控制對象的關聯邏輯。
例如在特斯拉的UI界面中，将整體分為3塊區域，左邊是形式儀表右側是多功能區域底部則是車輛相關的控制功能，你想控制前後車燈，那麼按鈕就會在車輛模型的前後兩側，如果你想打開空調則在底部工具欄的中間即可打開，如果你想給座椅加熱那麼也可以像圖檔中那樣在4個座位的圖檔中進行互動就可以實作。
這樣的設計讓控件與被控制的對象能夠遠距離在控件上形成一個映射關系。還有在日常生活中，大家家裡是否用過升降式晾衣架，通過旋轉把手來操控升降，這裡其實也很難應用到空間部分，因為兩者所處的平面不同，就更加無法對應起來，有沒有一種比較好的方式來解決這個問題呢，我覺得可以用顔色或者标記來做映射的對應。是以為了映射的相關性、同型、同色、靠近等方式都可以用來提升二者的相關性。
二、映射在數字産品中的應用
數字産品中的映射也是關于控制器和被控制對象的故事。數字産品中也有不少的控制器我們就稱之為控件，例如一個圖示按鈕、一個下拉清單或者一個滑塊，它們都有各自的控制對象。而我們常說什麼樣的設計滿足使用者心智，指的就是讓使用者覺得當他操控控件後帶來的結果與回報是他預期之中的，這就會讓其覺得是合理的、自然的。
案例1
例如在這個案例中，設計師其實是想通過按鈕來控制車中相關的功能，但是大家能發現問題嗎？映射的前提是控件要先滿足示能和意符的表達，其次再通過映射告訴使用者，誰控制誰。但我們發現這個界面中的按鈕其實在示能和意符上出現了歧義，例如熱車的圖示，我們通常認為這樣的宮格形式布局都是以入口形式存在，點選後會進入下一個界面，但是設計師在這裡其實把一些情況搞混了。
是以我們仔細看，這些圖示就像是電鍋上的按鈕，隻要點選就會觸發車輛狀态的變化，相當于一個開關，咱們先不說這樣的設計是否友善使用者，我們看映射其實就會發現使用者其實很難做到空間布局上的對照，進而更高效的來對車輛進行控制。并且也存在一定的邏輯錯誤，例如熱車和解鎖是什麼邏輯，車窗開到一半想停止怎麼辦，空調要調節冷熱和溫度怎麼辦，是以這裡不再單純的是一個開關集合的區域，會遇到很複雜的情況。
案例2
我們再來看一個案例，其實在數字界面中很多映射并非有直接對應關系，而是需要使用者通過互動來觸發。在下面的界面中，是一個課程的詳情頁面，使用者可以釋出自己的學習筆記通過音頻的方式釋出在該頁面中，而底部的工具欄在目前的設計中就會出現映射相關的問題。
我們即然要釋出音頻那麼我們有這些問題可以提前預設好
需要有什麼控件來控制嗎？例如一個按鈕
那麼這個按鈕是點選後松開再開始錄音，還是需要長按開始錄音，亦或者點選之後進入一個編輯頁面，再通過錄音或者上傳音頻的形式來編輯呢？
點選麥克風錄完音頻後頁面會怎樣顯示
能否試聽、編輯，邊上的輸入框和麥克風有關嗎？
我可以直接輸入文字再點選釋出嗎或者直接點釋出會出現什麼呢？等等不管如何我們從需要有一個入口，是以這個入口比較關鍵。通過這個入口（按鈕）來觸發上傳音頻的整個互動流程，它也是一個映射關系，隻是沒有全部展開，因為這裡無法展開。
有同學想問，為什麼不能展開呢？其實這個很好了解，就像我們做登入和注冊的時候不會把兩個流程做在一個界面中一樣，造成頁面的複雜、不相容。是以如果這裡不需要音頻以外形式的釋出内容那麼就無需把麥克風、輸入框和釋出按鈕拆解開來做，造成了沒有必要的浪費。一個按鈕可以作為一個入口來開啟一個單獨的任務流程，但是如果這樣拆解開那麼任務流程就無法再高效的完成，并産生很大的歧義。數字化産品的映射往往是線性的
案例3
再說一個類似的案例，這個也是小夥伴做的一個界面。初學者的問題就比較明顯，在于他們沒有分步和階段性控制的概念。總想着一個界面能完成多個任務，當然在這裡也沒有考慮好映射怎麼做。
從這界面我們能很明顯的看出來這其實是一個釋出的界面，從外部一個按鈕中進行跳轉而來的。
如果讓你去評價你會怎麼說，是不是哪裡都想說一點，好像裡面的資訊、按鈕、功能就不應該在這個界面？
你可能會有這些問題：怎麼把視訊、音頻、圖檔做成tab，選擇不同的類型去釋出？點選錄制後音頻會出現在哪裡？錄好一條後錄制按鈕還在不在？錄好一條後我切換到圖檔再傳一張圖檔再點選下一步會出現什麼？點選草稿箱又會進入什麼界面？我什麼都不操作直接點下一步會怎樣？這些問題都将困擾我們完成一個釋出任務。
将一個互動流程做清晰，就需要讓使用者有一個清晰的功能映射。是以點選釋出後，按鈕應該要先控制釋出類型這個對象，讓使用者選擇釋出類型，然後再跳轉出對應類型的釋出流程。
三、總結
映射在互動體驗的設計中也是很重要的概念之一，要結合示能和意符一起思考。同時剩餘的概念我們也會在下期一起分享給大家，對于初學者來說，這些概念很重要，在我們設計案例的時候務必要時刻思考與結合。
＃專欄作家＃
本文由 @應駿 原創釋出于人人都是産品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協定