體驗設計和用戶體驗設計?編輯導語：我們經常會談到用戶體驗，其實好的用戶體驗與設計映射是有很大關系的，今天的設計法則-映射，希望能為你提升産品用戶體驗度帶來一點思考～，接下來我們就來聊聊關于體驗設計和用戶體驗設計?以下内容大家不妨參考一二希望能幫到您!

體驗設計和用戶體驗設計

編輯導語：我們經常會談到用戶體驗，其實好的用戶體驗與設計映射是有很大關系的，今天的設計法則-映射，希望能為你提升産品用戶體驗度帶來一點思考～

設計心理學中的第三個交互設計概念：映射。

同樣，這個概念也要結合示能和意符一起來思考。諾曼先生在設計心理學中提到了映射這個概念，但是比較精煉，對于初學者來說隻能有個大概的了解。所以今天我們繼續用更多的案例來說一說這個概念在我們數字化以及生活中運用的實際場景。

這雖然是交互基礎的概念但對我們設計師來說也極其重要，概念雖然很簡單，但實際在設計中也會頻繁的遇到問題。我們先用比較正緊的文案來描述一下這些比較“枯燥”的概念，映射是一個術語，從數理理論借用而來，表示兩組事物要素之間的關系。（書中諾曼先生的原話）上兩篇文章我們說的示能和意符，表示了事物本身具備或傳達的功能和被交互性，而映射則是表示了控制器和被控制對象的關系。

好的示能和意符的設計，可以讓映射變的自然。第一篇示能我們舉了一個開關的例子，多控開關之所以讓人抓狂首先是缺少了意符的表達，其次是映射的不合理。就如同我們在書中見過的一個煤氣竈的案例，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，選擇不同的類型去發布？點擊錄制後音頻會出現在哪裡？錄好一條後錄制按鈕還在不在？錄好一條後我切換到圖片再傳一張圖片再點擊下一步會出現什麼？點擊草稿箱又會進入什麼界面？我什麼都不操作直接點下一步會怎樣？這些問題都将困擾我們完成一個發布任務。

将一個交互流程做清晰，就需要讓用戶有一個清晰的功能映射。所以點擊發布後，按鈕應該要先控制發布類型這個對象，讓用戶選擇發布類型，然後再跳轉出對應類型的發布流程。

映射在交互體驗的設計中也是很重要的概念之一，要結合示能和意符一起思考。同時剩餘的概念我們也會在下期一起分享給大家，對于初學者來說，這些概念很重要，在我們設計案例的時候務必要時刻思考與結合。

＃專欄作家＃

應駿，人人都是産品經理專欄作家，公衆号：應謀鬼計（shejishiyj）

本文由 @應駿 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!