中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

一、映射的三種層次

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

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

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

1.1 控件分布在被控制的對象上

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

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

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

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

1.2. 次佳：控件與被控對象更接近

這個也就是我們常說的格式塔心理學中的接近原則，因為越靠近越相關(guān)，很好理解。某些物件在設(shè)計時無法將控件和被控對象結(jié)合設(shè)計，那么我們只能退而求其次，讓他倆能更靠近一些，在映射關(guān)系上可以更清晰。

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

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

這里是因為本身這款電飯煲沒有智能面板，所以通過物理按鈕只能這么做，否則，按鈕一多就更難操作了。那有小伙伴問他能不能和洗衣機一樣做個旋鈕呢？當然也可以，因為旋起來也比多點幾次按鈕來的方便，只不過旋鈕做上去之后其他的按鈕可能也要變成旋鈕，在產(chǎn)品設(shè)計上就有更多的問題要探討啦。

所以我們再來看它的按鈕分布，發(fā)現(xiàn)其實控制按鈕和被控制的參數(shù)其實缺少了距離關(guān)系，當你看著想要控制的參數(shù)卻找不到控制按鈕的時候就會比較抓狂，因為在這個布局中既沒有滿足最佳也沒有滿足次佳，甚至連在空間分布上也無法產(chǎn)生對應(yīng)。

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

左右兩側(cè)分別是冷凍和冷藏的設(shè)置，但是中間只有兩個溫度，一共4個按鈕和兩個溫度，這顯然在自然理解下是不能理解的，這就和艾爾登法環(huán)里的boss們的關(guān)系一樣混亂，那4個按鈕為什么只有2個溫度呢，因為左側(cè)的兩個按鈕分別是切換不同的溫度設(shè)定，而右側(cè)的一個按鈕和溫度并沒有任何的血親關(guān)系，因為它就是一個鎖！不仔細看還以為它是用來控制溫度的，因為和其他三個按鈕太像了！這不就是在濫竽充數(shù)么。

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

1.3 控件與被控對象在空間分布一致

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

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

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

這樣的設(shè)計讓控件與被控制的對象能夠遠距離在控件上形成一個映射關(guān)系。還有在日常生活中，大家家里是否用過升降式晾衣架，通過旋轉(zhuǎn)把手來操控升降，這里其實也很難應(yīng)用到空間部分，因為兩者所處的平面不同，就更加無法對應(yīng)起來，有沒有一種比較好的方式來解決這個問題呢，我覺得可以用顏色或者標記來做映射的對應(yīng)。所以為了映射的相關(guān)性、同型、同色、靠近等方式都可以用來提升二者的相關(guān)性。

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

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

案例1

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

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

案例2

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

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

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

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

案例3

再說一個類似的案例，這個也是小伙伴做的一個界面。初學者的問題就比較明顯，在于他們沒有分步和階段性控制的概念。總想著一個界面能完成多個任務(wù)，當然在這里也沒有考慮好映射怎么做。

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

如果讓你去評價你會怎么說，是不是哪里都想說一點，好像里面的信息、按鈕、功能就不應(yīng)該在這個界面？

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

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

三、總結(jié)

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

＃專欄作家＃

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

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

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