量變引起質(zhì)變的交互難題

作為唯物辯證法的基本規(guī)律之一，“量變引起質(zhì)變”適用于很多事物的發(fā)展規(guī)律，而我最近在交互設(shè)計(jì)中，也發(fā)現(xiàn)了很多類(lèi)似的問(wèn)題。例如一些常見(jiàn)的控件或者交互方式，在數(shù)據(jù)量龐大或者層級(jí)過(guò)多的特殊場(chǎng)景下，就變成了一種“蹂躪用戶(hù)”的存在。所以在一些特殊業(yè)務(wù)場(chǎng)景的B端產(chǎn)品中，當(dāng)“Corner Case”變成一種常態(tài)，常見(jiàn)的控件就會(huì)開(kāi)始因?yàn)椤傲孔儭?wbr style="outline:0px;margin:0px;padding:0px;">而引發(fā)“質(zhì)變”，一下子成為用戶(hù)的困擾。

看了以上兩個(gè)案例，我們會(huì)發(fā)現(xiàn)，常規(guī)的控件和常用的交互方式在這些“難搞”的場(chǎng)景下，都不再好用了。那我們是否能另辟蹊徑，利用一些其它的交互思維，來(lái)解決這些棘手的交互難題呢？

困難拆解法

其實(shí)一提到“棘手”，“困難”，大家可能多多少少，在網(wǎng)上聽(tīng)過(guò)這樣的“雞湯”：“別畏懼困難，困難是可以拆解的，當(dāng)把一個(gè)困難拆解成一個(gè)一個(gè)小目標(biāo)去完成時(shí)，我們離總目標(biāo)就會(huì)越來(lái)越近了?！?

這就是我今天想聊的——“困難拆解法”。說(shuō)到困難拆解法，無(wú)論是網(wǎng)上火爆的各類(lèi)成功學(xué)，還是一些成熟的項(xiàng)目管理理論（例如經(jīng)典的Work Breakdown Structure）都對(duì)此有詳細(xì)的、深層次的研究和實(shí)踐。我們通常會(huì)把這個(gè)思維應(yīng)用到復(fù)雜工作和項(xiàng)目的管理中去，但是我今天想做一個(gè)大膽的實(shí)驗(yàn)，把困難拆解法應(yīng)用到交互設(shè)計(jì)中來(lái)，看看利用困難拆解法，能否解決我們上面提到的因?yàn)樘厥鈽I(yè)務(wù)場(chǎng)景而嚴(yán)重影響交互體驗(yàn)的問(wèn)題。

既然要做困難拆解，我們總不能隨意去拆解，總得有一些拆解的原則和方法論，以支撐行為的正確性。“成功學(xué)”中肯定很難找到詳細(xì)的方法論，那就參考一下Work Breakdown Structure中的拆解原則，來(lái)看一看是否可以應(yīng)用于交互設(shè)計(jì)的場(chǎng)景。

先一起來(lái)看下WBS中定義的分解原則：

1. 將主體目標(biāo)逐步細(xì)化分解，最底層的日?；顒?dòng)可直接分派到個(gè)人完成；

2. 每個(gè)任務(wù)原則上要求分解到不能再細(xì)分為止；

3. 日?；顒?dòng)要對(duì)應(yīng)到人、時(shí)間和資金投入；

4. 整體拆解的任務(wù)，最終可以支撐總?cè)蝿?wù)的完成。

如果我們從中提取一下關(guān)鍵意義，就是：

1. 大目標(biāo)拆解成小目標(biāo)；

2. 拆分到最小顆粒度；

3. 每個(gè)小目標(biāo)需要有對(duì)應(yīng)成本的衡量；

4. 最終完成總目標(biāo)。

最后，可以將原則的關(guān)鍵意義與交互設(shè)計(jì)做一個(gè)對(duì)應(yīng)：

1. 將一個(gè)場(chǎng)景內(nèi)的大的任務(wù)目標(biāo)，逐步分解成一個(gè)個(gè)小的交互行為

2. 每個(gè)交互行為要盡可能的簡(jiǎn)單直接，只針對(duì)一個(gè)交互目的的達(dá)成；

3. 拆解的每一個(gè)小目標(biāo)都要有對(duì)應(yīng)的交互成本的計(jì)算；

4. 整體拆解出的小的交互行為，最終可以支撐總?cè)蝿?wù)目標(biāo)的完成。

分析到這里，我們大概總結(jié)出了一些拆解的原則，但是仔細(xì)看這四條原則，大家會(huì)發(fā)現(xiàn)，目前還少了一個(gè)概念的輸入：那就是交互成本。如果沒(méi)有交互成本的計(jì)量，那就沒(méi)辦法真正衡量出我們最后通過(guò)拆解制定出的方案，是否真正節(jié)省了用戶(hù)的交互成本，提升了任務(wù)效率。

所以，在開(kāi)始拆解之前，還需要先一起了解下交互成本。

交互成本

什么是交互成本呢？尼爾森·諾曼（Nielsen Norman）將“交互成本”定義為用戶(hù)為實(shí)現(xiàn)其目標(biāo)而必須付出的身心努力的總和。大多數(shù)初級(jí)設(shè)計(jì)人員都有這樣的誤解，即交互成本等于用戶(hù)完成任務(wù)所需的點(diǎn)擊次數(shù)。但是，它遠(yuǎn)不止于此?！禝nteraction design is more than just user flows and clicks》（作者Richard Yang）一文中講到：交互成本可以分為物理交互成本（PIC）和心理交互成本（MIC）。

1. 心理交互成本（MIC)

• 心理交互成本（MIC）的兩個(gè)最重要的組成部分是注意力和記憶力。當(dāng)一項(xiàng)任務(wù)需要過(guò)多的注意力或記憶才能完成時(shí)，它將具有較高的心理交互成本（MIC），從而降低了可用性。

• 對(duì)于不同類(lèi)型的記憶都有廣泛的分類(lèi)。最短的記憶類(lèi)型稱(chēng)為工作記憶，通常在任務(wù)過(guò)程中僅持續(xù)幾秒鐘。換句話說(shuō)，當(dāng)我們參與其他認(rèn)知過(guò)程時(shí)，我們的工作記憶負(fù)責(zé)我們可以掌握的信息。米勒定律指出，普通人一次只能在他們的工作記憶中保留5-11件物品。完成產(chǎn)品中的任務(wù)所需的工作記憶與強(qiáng)加給用戶(hù)的心理互動(dòng)成本（MIC）負(fù)擔(dān)成正比。所以，任務(wù)不應(yīng)要求用戶(hù)隨時(shí)在其工作記憶中保留七個(gè)以上的項(xiàng)目。在極少數(shù)情況下，如若必須要求用戶(hù)在其記憶中保存11個(gè)以上的項(xiàng)目，請(qǐng)使用“區(qū)塊”減輕其精神負(fù)擔(dān)?！皡^(qū)塊”指將信息分組。

• 與注意力和記憶有關(guān)的另一個(gè)考慮因素是“?？硕伞?。此條定律指出，“做出決定所需的時(shí)間會(huì)隨著選擇的數(shù)量和復(fù)雜性而增加”。

  
  

  
  

  

  
  

2. 物理交互成本（PIC）

• 常見(jiàn)的物理交互成本（PIC）因素包括到達(dá)距離和目標(biāo)寬度，用戶(hù)輸入的數(shù)量以及完成任務(wù)所需的操作等。

• 費(fèi)茨定律指出，點(diǎn)擊目標(biāo)的時(shí)間（例如，單擊按鈕）是距輸入設(shè)備的距離和目標(biāo)的擊中框?qū)挾鹊暮瘮?shù)。例如，如果鼠標(biāo)光標(biāo)很遠(yuǎn)且按鈕很小，則單擊桌面上的按鈕將花費(fèi)更長(zhǎng)的時(shí)間。

• 評(píng)估物理交互成本（PIC）的最佳方法是“任務(wù)分析”和檢查可用性指標(biāo)，例如“任務(wù)時(shí)間”。

  
  

  
  

  

  
  

3. 交互路徑和動(dòng)機(jī)
在某些情況下，用戶(hù)可能采取多種路徑來(lái)實(shí)現(xiàn)其目標(biāo)。用戶(hù)根據(jù)“預(yù)期效用”的概念來(lái)決定采用哪種路徑。

• 用戶(hù)權(quán)衡每個(gè)操作的收益和成本，然后選擇收益與成本之間最佳平衡的路徑。用戶(hù)趨向于選擇自己預(yù)期中交互成本更低的那條路徑。如果操作路徑不直觀或不熟悉，即使物理操作成本很低，但由于心理交互成本（MIC）較高，他們最終也會(huì)選擇他們更熟悉的路徑。

• 具有較高動(dòng)力（例如，由于品牌運(yùn)營(yíng)）的用戶(hù)更有可能承擔(dān)較高的互動(dòng)成本以實(shí)現(xiàn)其目標(biāo)。假如消費(fèi)者是某品牌的忠粉，那即使這個(gè)網(wǎng)站的交互成本很高，那么用戶(hù)可能仍有足夠的動(dòng)力去完成他們的任務(wù)。然而，如果用戶(hù)購(gòu)買(mǎi)常規(guī)產(chǎn)品時(shí)付款流程的交互成本很高的話，那么他們很可能去其它網(wǎng)站購(gòu)買(mǎi)。

從以上具體理論的闡述中我們可以看出，在評(píng)估交互成本的時(shí)候，步驟數(shù)，點(diǎn)擊次數(shù)以及操作路徑長(zhǎng)短這些我們?nèi)粘Ｗ铌P(guān)注的幾個(gè)維度，并不能完全評(píng)判交互行為的好壞。而注意力成本和記憶力成本，以及預(yù)期效用，往往也會(huì)成為決定一種交互行為成敗的關(guān)鍵，而對(duì)于上面提到的“困難場(chǎng)景”，也正是因?yàn)閿?shù)據(jù)量過(guò)大和層級(jí)過(guò)深致使用戶(hù)的注意力和記憶力成本階梯式增加，從而導(dǎo)致常規(guī)組件體驗(yàn)感崩塌。
下圖中，我具體整理了各個(gè)交互成本組成的因素，以及會(huì)導(dǎo)致的結(jié)果。

如何拆解？案例一

我們?cè)敿?xì)聊了困難拆解法的基本原則和交互成本的主要概念之后。接下來(lái)開(kāi)始進(jìn)入正題，我們通過(guò)困難拆解法和交互成本計(jì)算的邏輯，來(lái)解決上面提到的兩個(gè)案例的問(wèn)題。

首先，我們先拆解一個(gè)簡(jiǎn)單的案例。

拆解困難法的核心是將一個(gè)大的難以達(dá)成的目標(biāo)拆成各個(gè)小目標(biāo)，所以我們需要先確定這個(gè)案例的核心困難點(diǎn)。
第一步，分析問(wèn)題：
這個(gè)方案的優(yōu)點(diǎn)就在于：在物理交互成本上，省了一步點(diǎn)擊，將信息直接po到定位的周?chē)鶕?jù)格式塔的接近原則，用戶(hù)可以很容易的尋找和查看相應(yīng)定位對(duì)象的詳情。但是這些優(yōu)點(diǎn)只限于在定位對(duì)象少，展示的詳情信息數(shù)據(jù)量小的場(chǎng)景內(nèi)。一旦處于數(shù)據(jù)量龐大的場(chǎng)景下，就會(huì)產(chǎn)生大量的信息雜揉。定位與詳情相互交織、覆蓋，非?；靵y。如果用戶(hù)想在這種界面去尋找信息的話，將需要付出非常大的注意力成本，大大加長(zhǎng)了用戶(hù)選擇信息的時(shí)間。心理交互成本的增加，對(duì)于用戶(hù)的使用情緒，也會(huì)產(chǎn)生消極的影響。
所以，此案例的核心問(wèn)題就是：移動(dòng)端屏幕很小，在有限的展示范圍內(nèi)，無(wú)法容納大量的數(shù)據(jù)，所以導(dǎo)致信息雜糅在一起，對(duì)用戶(hù)使用造成了極大的干擾。

那怎么去解決這個(gè)核心問(wèn)題呢？讓我們開(kāi)始進(jìn)行第二步：拆解方案的主體。
通過(guò)分析可知，這個(gè)案例最小顆粒度的兩個(gè)交互主體為：

1. 在地圖上找到關(guān)注區(qū)域的定位標(biāo)記；

2. 查看定位標(biāo)記相對(duì)應(yīng)的詳情數(shù)據(jù)。

那么現(xiàn)在，根據(jù)上面提到的拆解原則，我們要將本來(lái)一步到位的交互行為，拆分成兩個(gè)最小顆粒度的交互行為，然后分成兩步來(lái)達(dá)成同樣的任務(wù)目標(biāo)。
第一步，在地圖上只留下定位標(biāo)記的顯示，這樣的目的主要在于讓用戶(hù)只專(zhuān)注于尋找相應(yīng)區(qū)域的定位標(biāo)記。在去掉了了大量數(shù)據(jù)信息之后，頁(yè)面就一下會(huì)清爽許多；

而第二步就是將查看詳細(xì)數(shù)據(jù)拆分成一個(gè)操作，即點(diǎn)擊某一個(gè)定位標(biāo)記時(shí)，詳情數(shù)據(jù)通過(guò)彈出卡片，或者彈出彈窗的形式，去陳列詳細(xì)數(shù)據(jù)。（如果詳情數(shù)據(jù)少，就可以使用卡片的形式，這樣不會(huì)打斷當(dāng)前操作；如果詳情數(shù)據(jù)量很大，并且需要足夠的拓展性以便后期增加詳情，則可以使用彈窗的形式。）這么做則是為了讓用戶(hù)更專(zhuān)注于查看他所關(guān)注的詳情信息。

闡述完解決方案，根據(jù)原則的3，4條，我們一起衡量下方案對(duì)交互體驗(yàn)和任務(wù)效率是否有提升。
首先從成本角度來(lái)衡量方案：

1.物理交互成本：

• 多增加了一個(gè)點(diǎn)擊步驟。

2.心理交互成本：

• 去除了界面中大量雜糅的信息，讓用戶(hù)可以清晰、迅速地查看地圖位置，并高效的尋找用戶(hù)所關(guān)注的區(qū)域定位；

• 讓用戶(hù)只專(zhuān)注于查看他所關(guān)注的定位信息，避免了其它大量信息的干擾。即使通過(guò)粗略的估算，也可以算出來(lái)，這多點(diǎn)擊一下的交互時(shí)間，要比在大量信息中去檢索信息的時(shí)間要小得多。

其次從任務(wù)目標(biāo)角度來(lái)衡量方案：
1.達(dá)成了與原方案相同的目的，即可以尋找某個(gè)區(qū)域內(nèi)的定位標(biāo)記，并可以查看對(duì)應(yīng)的詳情。
2.解決了信息雜糅在一起，對(duì)用戶(hù)使用造成極大干擾的交互難題。
所以，綜合成本和目標(biāo)來(lái)看結(jié)果，這“多一步”的代價(jià)，實(shí)際大大提高了用戶(hù)的檢索效率。

如何拆解？案例二

當(dāng)然，上面這個(gè)例子過(guò)于簡(jiǎn)單，第一交互路徑短，第二也屬于比較常規(guī)的交互解決方案。那接下來(lái)，我們一起來(lái)分析一個(gè)稍微復(fù)雜點(diǎn)的案例，看一看，當(dāng)“海量數(shù)據(jù)”再加上“深層級(jí)”時(shí)，我們用這種方式是否還能解決。

首先呢，還是老套路，先一起來(lái)確定一下我們要核心解決的問(wèn)題：

首先總結(jié)這個(gè)案例的優(yōu)點(diǎn)：可以將操作在一個(gè)頁(yè)面內(nèi)全部鋪開(kāi)，并且通過(guò)點(diǎn)擊快速打開(kāi)下級(jí)頁(yè)面，然后在一個(gè)頁(yè)面里對(duì)多層數(shù)據(jù)進(jìn)行查看和操作。這種交互在數(shù)據(jù)較少的場(chǎng)景里，是沒(méi)有問(wèn)題的。
但是，在移動(dòng)端場(chǎng)景中，因?yàn)槠聊淮笮∮邢?，一直存在著?shù)據(jù)展示條目十分局限的問(wèn)題，而當(dāng)層級(jí)過(guò)深甚至數(shù)據(jù)條目過(guò)多時(shí)，這種問(wèn)題就會(huì)愈加愈烈。所以，如果生產(chǎn)環(huán)境中長(zhǎng)期處于數(shù)據(jù)量非常龐大的狀態(tài)，就會(huì)引出以下問(wèn)題：

1. 在一條完整的下拉控件中，只有第一層級(jí)的數(shù)量是恒定為1的，而二三四層的數(shù)據(jù)量都有可能為多個(gè)，尤其第四層的詳情部分，數(shù)據(jù)條目會(huì)更多。所以在一個(gè)下拉控件中，假設(shè)每一層級(jí)都有數(shù)據(jù)的話，用戶(hù)至少會(huì)看到4條信息。而如果二級(jí)信息大于兩條的話，在全展開(kāi)的情況下，就已經(jīng)占據(jù)了一整屏的位置（場(chǎng)景三），從而導(dǎo)致用戶(hù)在一屏下，至少要去看10-12行（數(shù)量隨著層級(jí)4數(shù)據(jù)條目的變化有所增減）的信息。假設(shè)我們?cè)賱澮黄?，用?hù)就至少需要閱讀和記憶20-24行信息。前面的米勒定律也提到，普通人一次只能在他們的工作記憶中保留5-11條信息。完成產(chǎn)品中的任務(wù)所需的工作記憶與強(qiáng)加給用戶(hù)的心理互動(dòng)成本（MIC）負(fù)擔(dān)成正比。用戶(hù)在這個(gè)過(guò)程中面對(duì)海量數(shù)據(jù)，以及繁復(fù)的層級(jí)，會(huì)付出大量的注意力和記憶力成本，導(dǎo)致用戶(hù)在使用產(chǎn)品的過(guò)程中，心理交互成本呈階梯式增長(zhǎng)。

2. 當(dāng)一個(gè)下拉控件二三四層的數(shù)據(jù)量過(guò)大時(shí)(圖示場(chǎng)景二、三)，除了會(huì)增加用戶(hù)的注意力和記憶力成本，還會(huì)增加反復(fù)操作的頻次以及用戶(hù)的錯(cuò)誤成本，一旦操作錯(cuò)誤或者看錯(cuò)數(shù)據(jù)，重新找到這條數(shù)據(jù)的成本會(huì)變的很高。如果滑動(dòng)一下的物理交互成本為1，那么在多次滑動(dòng)的情況下，我們滑動(dòng)的成本就會(huì)變?yōu)?*X，這個(gè)X變量會(huì)隨著數(shù)據(jù)量的增大而成正比的不斷增加。

   
   

根據(jù)?？硕晌覀兛芍?wbr style="outline:0px;margin:0px;padding:0px;">決策所需要花費(fèi)的時(shí)間隨著選擇的數(shù)量和復(fù)雜性增加而增加。
所以改進(jìn)方案的核心點(diǎn)就是：減少頁(yè)面內(nèi)的層級(jí)和數(shù)據(jù)量，降低用戶(hù)選擇的復(fù)雜性。
但是從業(yè)務(wù)上來(lái)說(shuō)，肯定不能直接去減少數(shù)據(jù)的總量，所以我們必須從交互的角度，去制定出可以減少用戶(hù)選擇的方案。找到了要核心解決的問(wèn)題，接下來(lái)我們就開(kāi)始“拆解”。
那么從哪個(gè)角度開(kāi)始拆解呢？目前的狀態(tài)是：隨著每個(gè)層級(jí)的不斷鋪開(kāi)，用戶(hù)查看的數(shù)據(jù)就會(huì)不斷增加。那既然數(shù)據(jù)總量上我們無(wú)法動(dòng)刀，那我們就從層級(jí)入手，把每個(gè)層級(jí)單獨(dú)拆出來(lái)，根據(jù)拆分原則的最小顆粒度原則，給用戶(hù)每一屏提供最少層級(jí)的選項(xiàng)，讓用戶(hù)專(zhuān)注于最少數(shù)據(jù)的篩選。具體怎么做呢？一起來(lái)看看下面的解決方案。

首先，我們先來(lái)拆分第一層級(jí)。第一層級(jí)是展開(kāi)后面層級(jí)的前提，所以我將第一層級(jí)，設(shè)計(jì)成了一個(gè)頂部切換。點(diǎn)開(kāi)切換后，會(huì)跳出彈窗，這個(gè)彈窗中會(huì)包含所有的第一層級(jí)的選項(xiàng)。隨著彈窗中不同選項(xiàng)的切換，我們會(huì)立馬回到列表頁(yè)面，而頁(yè)面下方的數(shù)據(jù)也會(huì)刷新為此一級(jí)選項(xiàng)下的所有數(shù)據(jù)。因?yàn)榈谝粚蛹?jí)的數(shù)據(jù)量，相比其它層級(jí)，在常規(guī)情況下是最少的，所以面對(duì)更少的選擇，用戶(hù)便可更專(zhuān)注、更迅速、更便捷的鎖定任務(wù)目標(biāo)。

其次，我們將二層與三層，作為展開(kāi)式的卡片，形成一個(gè)卡片式列表。（這里將二三層放在一個(gè)頁(yè)面內(nèi)，沒(méi)有拆到最小顆粒度讓其形成兩個(gè)頁(yè)面，主要是為了控制跳轉(zhuǎn)次數(shù)。）列表中的數(shù)據(jù)只包含對(duì)應(yīng)的第一層級(jí)內(nèi)的數(shù)據(jù)，所以這個(gè)頁(yè)面中展示的數(shù)據(jù)比起之前場(chǎng)景中的“大而全”，已經(jīng)得到一個(gè)非常明顯的過(guò)濾。下拉層級(jí)，也減少為兩層，層級(jí)復(fù)雜度相比之前簡(jiǎn)單了許多。另一方面，每條二層的數(shù)據(jù)都形成了一個(gè)獨(dú)立的卡片，這樣在視覺(jué)上，會(huì)有一個(gè)明顯的區(qū)分。無(wú)論是數(shù)據(jù)量上的選擇復(fù)雜度，還是視覺(jué)上對(duì)于層級(jí)的區(qū)分度，都大幅度縮小了用戶(hù)的辨別成本。

最后，因?yàn)榈谒膶咏?jīng)常會(huì)囊括大量數(shù)據(jù)，我們將第四層單獨(dú)提出來(lái)作為一個(gè)獨(dú)立頁(yè)面（或彈窗），通過(guò)點(diǎn)擊第三層的條目進(jìn)入。獨(dú)立的頁(yè)面第一可以大大提升用戶(hù)對(duì)于場(chǎng)景的專(zhuān)注性，第二有利于數(shù)據(jù)的拓展性，即使再多的信息列入，也不會(huì)影響其它層級(jí)的展示效果。而如果這些詳情信息還分為不同類(lèi)別的話，我們甚至還可以加入TAB篩選，這樣就可以更加快速的通過(guò)類(lèi)別篩選過(guò)濾出用戶(hù)想查看的信息。

老規(guī)矩，在闡述完方案后，我們依舊根據(jù)原則的3，4條，對(duì)方案進(jìn)行各角度的衡量。

成本角度：

• 物理交互成本：點(diǎn)擊數(shù)有小幅度增加，而因?yàn)槠聊粌?nèi)數(shù)據(jù)量減少，下劃數(shù)得到了銳減，另外跳轉(zhuǎn)步驟增多。頁(yè)面的數(shù)據(jù)量越大，增幅的物理交互成本越少。

• 心理交互成本：用戶(hù)在每一個(gè)頁(yè)面所需要做出的信息篩選得到了大幅的減少，每一步足夠直觀。因?yàn)閷蛹?jí)頁(yè)面拆分，而導(dǎo)致的數(shù)據(jù)大量過(guò)濾可以幫助用戶(hù)完成快速?zèng)Q策。而信息篩選節(jié)省出來(lái)的時(shí)間成本，大大高于因點(diǎn)擊而增加的時(shí)間成本。低量心理成本的付出，也會(huì)提升用戶(hù)的預(yù)期效用，從而使用戶(hù)忽略一定程度的物理交互成本。

任務(wù)目標(biāo)角度：
這個(gè)方案，把選擇和查看多層數(shù)據(jù)條目，拆解成了多步操作，讓用戶(hù)在完成每一個(gè)層級(jí)內(nèi)的查看和篩選中，去逐步完成對(duì)所有層級(jí)的查看和篩選。

拆解之后，每個(gè)層級(jí)頁(yè)面中為用戶(hù)減少了大量的選擇和干擾，降低了用戶(hù)選擇的復(fù)雜性，幫助用戶(hù)節(jié)省更多的選擇任務(wù)時(shí)間。解決了用戶(hù)在大量信息中去海選的痛點(diǎn)。
所以從結(jié)果來(lái)看，通過(guò)拆解，既完成了場(chǎng)景下的任務(wù)目標(biāo)、解決了之前存在的交互難題，也節(jié)省了大量的心理交互成本，提高了用戶(hù)的預(yù)期效用。

困難拆解等于繞圈子？

看到這里，也許有人會(huì)說(shuō)，感覺(jué)所謂的“拆解”，都是在“繞圈子”。其實(shí)沒(méi)錯(cuò)，我們以上的兩個(gè)方案都多繞了一步。但是交互中本就沒(méi)有最完美的方案，只有最適合場(chǎng)景的方案。如果可以解決核心的場(chǎng)景問(wèn)題，對(duì)于低幅度的交互成本的增加是可以接受的。
另外，我們有時(shí)候在設(shè)計(jì)交互方案時(shí)，經(jīng)常會(huì)過(guò)于計(jì)較物理交互成本，將“省一步”封為了交互設(shè)計(jì)的“金科玉律”，從而忽略心理交互成本和預(yù)期效用對(duì)用戶(hù)體驗(yàn)的影響，結(jié)果導(dǎo)致用戶(hù)對(duì)于產(chǎn)品的選擇性和體驗(yàn)感一起降低。
所以當(dāng)用戶(hù)面對(duì)高額心理交互成本的困境時(shí)，不妨付出一些“提升物理交互成本”的代價(jià)，也許這多繞的一圈，或者多走的一步，反而會(huì)讓用戶(hù)更快的通往“羅馬”。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：站酷  作者：回去干活

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

量變引起質(zhì)變的交互難題

作為唯物辯證法的基本規(guī)律之一，“量變引起質(zhì)變”適用于很多事物的發(fā)展規(guī)律，而我最近在交互設(shè)計(jì)中，也發(fā)現(xiàn)了很多類(lèi)似的問(wèn)題。例如一些常見(jiàn)的控件或者交互方式，在數(shù)據(jù)量龐大或者層級(jí)過(guò)多的特殊場(chǎng)景下，就變成了一種“蹂躪用戶(hù)”的存在。所以在一些特殊業(yè)務(wù)場(chǎng)景的B端產(chǎn)品中，當(dāng)“Corner Case”變成一種常態(tài)，常見(jiàn)的控件就會(huì)開(kāi)始因?yàn)椤傲孔儭?wbr style="outline:0px;margin:0px;padding:0px;">而引發(fā)“質(zhì)變”，一下子成為用戶(hù)的困擾。

看了以上兩個(gè)案例，我們會(huì)發(fā)現(xiàn)，常規(guī)的控件和常用的交互方式在這些“難搞”的場(chǎng)景下，都不再好用了。那我們是否能另辟蹊徑，利用一些其它的交互思維，來(lái)解決這些棘手的交互難題呢？

困難拆解法

其實(shí)一提到“棘手”，“困難”，大家可能多多少少，在網(wǎng)上聽(tīng)過(guò)這樣的“雞湯”：“別畏懼困難，困難是可以拆解的，當(dāng)把一個(gè)困難拆解成一個(gè)一個(gè)小目標(biāo)去完成時(shí)，我們離總目標(biāo)就會(huì)越來(lái)越近了?！?

這就是我今天想聊的——“困難拆解法”。說(shuō)到困難拆解法，無(wú)論是網(wǎng)上火爆的各類(lèi)成功學(xué)，還是一些成熟的項(xiàng)目管理理論（例如經(jīng)典的Work Breakdown Structure）都對(duì)此有詳細(xì)的、深層次的研究和實(shí)踐。我們通常會(huì)把這個(gè)思維應(yīng)用到復(fù)雜工作和項(xiàng)目的管理中去，但是我今天想做一個(gè)大膽的實(shí)驗(yàn)，把困難拆解法應(yīng)用到交互設(shè)計(jì)中來(lái)，看看利用困難拆解法，能否解決我們上面提到的因?yàn)樘厥鈽I(yè)務(wù)場(chǎng)景而嚴(yán)重影響交互體驗(yàn)的問(wèn)題。

既然要做困難拆解，我們總不能隨意去拆解，總得有一些拆解的原則和方法論，以支撐行為的正確性?！俺晒W(xué)”中肯定很難找到詳細(xì)的方法論，那就參考一下Work Breakdown Structure中的拆解原則，來(lái)看一看是否可以應(yīng)用于交互設(shè)計(jì)的場(chǎng)景。

先一起來(lái)看下WBS中定義的分解原則：

1. 將主體目標(biāo)逐步細(xì)化分解，最底層的日?；顒?dòng)可直接分派到個(gè)人完成；

2. 每個(gè)任務(wù)原則上要求分解到不能再細(xì)分為止；

3. 日?；顒?dòng)要對(duì)應(yīng)到人、時(shí)間和資金投入；

4. 整體拆解的任務(wù)，最終可以支撐總?cè)蝿?wù)的完成。

如果我們從中提取一下關(guān)鍵意義，就是：

1. 大目標(biāo)拆解成小目標(biāo)；

2. 拆分到最小顆粒度；

3. 每個(gè)小目標(biāo)需要有對(duì)應(yīng)成本的衡量；

4. 最終完成總目標(biāo)。

最后，可以將原則的關(guān)鍵意義與交互設(shè)計(jì)做一個(gè)對(duì)應(yīng)：

1. 將一個(gè)場(chǎng)景內(nèi)的大的任務(wù)目標(biāo)，逐步分解成一個(gè)個(gè)小的交互行為

2. 每個(gè)交互行為要盡可能的簡(jiǎn)單直接，只針對(duì)一個(gè)交互目的的達(dá)成；

3. 拆解的每一個(gè)小目標(biāo)都要有對(duì)應(yīng)的交互成本的計(jì)算；

4. 整體拆解出的小的交互行為，最終可以支撐總?cè)蝿?wù)目標(biāo)的完成。

分析到這里，我們大概總結(jié)出了一些拆解的原則，但是仔細(xì)看這四條原則，大家會(huì)發(fā)現(xiàn)，目前還少了一個(gè)概念的輸入：那就是交互成本。如果沒(méi)有交互成本的計(jì)量，那就沒(méi)辦法真正衡量出我們最后通過(guò)拆解制定出的方案，是否真正節(jié)省了用戶(hù)的交互成本，提升了任務(wù)效率。

所以，在開(kāi)始拆解之前，還需要先一起了解下交互成本。

交互成本

什么是交互成本呢？尼爾森·諾曼（Nielsen Norman）將“交互成本”定義為用戶(hù)為實(shí)現(xiàn)其目標(biāo)而必須付出的身心努力的總和。大多數(shù)初級(jí)設(shè)計(jì)人員都有這樣的誤解，即交互成本等于用戶(hù)完成任務(wù)所需的點(diǎn)擊次數(shù)。但是，它遠(yuǎn)不止于此?！禝nteraction design is more than just user flows and clicks》（作者Richard Yang）一文中講到：交互成本可以分為物理交互成本（PIC）和心理交互成本（MIC）。

1. 心理交互成本（MIC)

• 心理交互成本（MIC）的兩個(gè)最重要的組成部分是注意力和記憶力。當(dāng)一項(xiàng)任務(wù)需要過(guò)多的注意力或記憶才能完成時(shí)，它將具有較高的心理交互成本（MIC），從而降低了可用性。

• 對(duì)于不同類(lèi)型的記憶都有廣泛的分類(lèi)。最短的記憶類(lèi)型稱(chēng)為工作記憶，通常在任務(wù)過(guò)程中僅持續(xù)幾秒鐘。換句話說(shuō)，當(dāng)我們參與其他認(rèn)知過(guò)程時(shí)，我們的工作記憶負(fù)責(zé)我們可以掌握的信息。米勒定律指出，普通人一次只能在他們的工作記憶中保留5-11件物品。完成產(chǎn)品中的任務(wù)所需的工作記憶與強(qiáng)加給用戶(hù)的心理互動(dòng)成本（MIC）負(fù)擔(dān)成正比。所以，任務(wù)不應(yīng)要求用戶(hù)隨時(shí)在其工作記憶中保留七個(gè)以上的項(xiàng)目。在極少數(shù)情況下，如若必須要求用戶(hù)在其記憶中保存11個(gè)以上的項(xiàng)目，請(qǐng)使用“區(qū)塊”減輕其精神負(fù)擔(dān)?！皡^(qū)塊”指將信息分組。

• 與注意力和記憶有關(guān)的另一個(gè)考慮因素是“?？硕伞?。此條定律指出，“做出決定所需的時(shí)間會(huì)隨著選擇的數(shù)量和復(fù)雜性而增加”。

  
  

  
  

  

  
  

2. 物理交互成本（PIC）

• 常見(jiàn)的物理交互成本（PIC）因素包括到達(dá)距離和目標(biāo)寬度，用戶(hù)輸入的數(shù)量以及完成任務(wù)所需的操作等。

• 費(fèi)茨定律指出，點(diǎn)擊目標(biāo)的時(shí)間（例如，單擊按鈕）是距輸入設(shè)備的距離和目標(biāo)的擊中框?qū)挾鹊暮瘮?shù)。例如，如果鼠標(biāo)光標(biāo)很遠(yuǎn)且按鈕很小，則單擊桌面上的按鈕將花費(fèi)更長(zhǎng)的時(shí)間。

• 評(píng)估物理交互成本（PIC）的最佳方法是“任務(wù)分析”和檢查可用性指標(biāo)，例如“任務(wù)時(shí)間”。

  
  

  
  

  

  
  

3. 交互路徑和動(dòng)機(jī)
在某些情況下，用戶(hù)可能采取多種路徑來(lái)實(shí)現(xiàn)其目標(biāo)。用戶(hù)根據(jù)“預(yù)期效用”的概念來(lái)決定采用哪種路徑。

• 用戶(hù)權(quán)衡每個(gè)操作的收益和成本，然后選擇收益與成本之間最佳平衡的路徑。用戶(hù)趨向于選擇自己預(yù)期中交互成本更低的那條路徑。如果操作路徑不直觀或不熟悉，即使物理操作成本很低，但由于心理交互成本（MIC）較高，他們最終也會(huì)選擇他們更熟悉的路徑。

• 具有較高動(dòng)力（例如，由于品牌運(yùn)營(yíng)）的用戶(hù)更有可能承擔(dān)較高的互動(dòng)成本以實(shí)現(xiàn)其目標(biāo)。假如消費(fèi)者是某品牌的忠粉，那即使這個(gè)網(wǎng)站的交互成本很高，那么用戶(hù)可能仍有足夠的動(dòng)力去完成他們的任務(wù)。然而，如果用戶(hù)購(gòu)買(mǎi)常規(guī)產(chǎn)品時(shí)付款流程的交互成本很高的話，那么他們很可能去其它網(wǎng)站購(gòu)買(mǎi)。

從以上具體理論的闡述中我們可以看出，在評(píng)估交互成本的時(shí)候，步驟數(shù)，點(diǎn)擊次數(shù)以及操作路徑長(zhǎng)短這些我們?nèi)粘Ｗ铌P(guān)注的幾個(gè)維度，并不能完全評(píng)判交互行為的好壞。而注意力成本和記憶力成本，以及預(yù)期效用，往往也會(huì)成為決定一種交互行為成敗的關(guān)鍵，而對(duì)于上面提到的“困難場(chǎng)景”，也正是因?yàn)閿?shù)據(jù)量過(guò)大和層級(jí)過(guò)深致使用戶(hù)的注意力和記憶力成本階梯式增加，從而導(dǎo)致常規(guī)組件體驗(yàn)感崩塌。
下圖中，我具體整理了各個(gè)交互成本組成的因素，以及會(huì)導(dǎo)致的結(jié)果。

如何拆解？案例一

我們?cè)敿?xì)聊了困難拆解法的基本原則和交互成本的主要概念之后。接下來(lái)開(kāi)始進(jìn)入正題，我們通過(guò)困難拆解法和交互成本計(jì)算的邏輯，來(lái)解決上面提到的兩個(gè)案例的問(wèn)題。

首先，我們先拆解一個(gè)簡(jiǎn)單的案例。

拆解困難法的核心是將一個(gè)大的難以達(dá)成的目標(biāo)拆成各個(gè)小目標(biāo)，所以我們需要先確定這個(gè)案例的核心困難點(diǎn)。
第一步，分析問(wèn)題：
這個(gè)方案的優(yōu)點(diǎn)就在于：在物理交互成本上，省了一步點(diǎn)擊，將信息直接po到定位的周?chē)?，根?jù)格式塔的接近原則，用戶(hù)可以很容易的尋找和查看相應(yīng)定位對(duì)象的詳情。但是這些優(yōu)點(diǎn)只限于在定位對(duì)象少，展示的詳情信息數(shù)據(jù)量小的場(chǎng)景內(nèi)。一旦處于數(shù)據(jù)量龐大的場(chǎng)景下，就會(huì)產(chǎn)生大量的信息雜揉。定位與詳情相互交織、覆蓋，非?；靵y。如果用戶(hù)想在這種界面去尋找信息的話，將需要付出非常大的注意力成本，大大加長(zhǎng)了用戶(hù)選擇信息的時(shí)間。心理交互成本的增加，對(duì)于用戶(hù)的使用情緒，也會(huì)產(chǎn)生消極的影響。
所以，此案例的核心問(wèn)題就是：移動(dòng)端屏幕很小，在有限的展示范圍內(nèi)，無(wú)法容納大量的數(shù)據(jù)，所以導(dǎo)致信息雜糅在一起，對(duì)用戶(hù)使用造成了極大的干擾。

那怎么去解決這個(gè)核心問(wèn)題呢？讓我們開(kāi)始進(jìn)行第二步：拆解方案的主體。
通過(guò)分析可知，這個(gè)案例最小顆粒度的兩個(gè)交互主體為：

1. 在地圖上找到關(guān)注區(qū)域的定位標(biāo)記；

2. 查看定位標(biāo)記相對(duì)應(yīng)的詳情數(shù)據(jù)。

那么現(xiàn)在，根據(jù)上面提到的拆解原則，我們要將本來(lái)一步到位的交互行為，拆分成兩個(gè)最小顆粒度的交互行為，然后分成兩步來(lái)達(dá)成同樣的任務(wù)目標(biāo)。
第一步，在地圖上只留下定位標(biāo)記的顯示，這樣的目的主要在于讓用戶(hù)只專(zhuān)注于尋找相應(yīng)區(qū)域的定位標(biāo)記。在去掉了了大量數(shù)據(jù)信息之后，頁(yè)面就一下會(huì)清爽許多；

而第二步就是將查看詳細(xì)數(shù)據(jù)拆分成一個(gè)操作，即點(diǎn)擊某一個(gè)定位標(biāo)記時(shí)，詳情數(shù)據(jù)通過(guò)彈出卡片，或者彈出彈窗的形式，去陳列詳細(xì)數(shù)據(jù)。（如果詳情數(shù)據(jù)少，就可以使用卡片的形式，這樣不會(huì)打斷當(dāng)前操作；如果詳情數(shù)據(jù)量很大，并且需要足夠的拓展性以便后期增加詳情，則可以使用彈窗的形式。）這么做則是為了讓用戶(hù)更專(zhuān)注于查看他所關(guān)注的詳情信息。

闡述完解決方案，根據(jù)原則的3，4條，我們一起衡量下方案對(duì)交互體驗(yàn)和任務(wù)效率是否有提升。
首先從成本角度來(lái)衡量方案：

1.物理交互成本：

• 多增加了一個(gè)點(diǎn)擊步驟。

2.心理交互成本：

• 去除了界面中大量雜糅的信息，讓用戶(hù)可以清晰、迅速地查看地圖位置，并高效的尋找用戶(hù)所關(guān)注的區(qū)域定位；

• 讓用戶(hù)只專(zhuān)注于查看他所關(guān)注的定位信息，避免了其它大量信息的干擾。即使通過(guò)粗略的估算，也可以算出來(lái)，這多點(diǎn)擊一下的交互時(shí)間，要比在大量信息中去檢索信息的時(shí)間要小得多。

其次從任務(wù)目標(biāo)角度來(lái)衡量方案：
1.達(dá)成了與原方案相同的目的，即可以尋找某個(gè)區(qū)域內(nèi)的定位標(biāo)記，并可以查看對(duì)應(yīng)的詳情。
2.解決了信息雜糅在一起，對(duì)用戶(hù)使用造成極大干擾的交互難題。
所以，綜合成本和目標(biāo)來(lái)看結(jié)果，這“多一步”的代價(jià)，實(shí)際大大提高了用戶(hù)的檢索效率。

如何拆解？案例二

當(dāng)然，上面這個(gè)例子過(guò)于簡(jiǎn)單，第一交互路徑短，第二也屬于比較常規(guī)的交互解決方案。那接下來(lái)，我們一起來(lái)分析一個(gè)稍微復(fù)雜點(diǎn)的案例，看一看，當(dāng)“海量數(shù)據(jù)”再加上“深層級(jí)”時(shí)，我們用這種方式是否還能解決。

首先呢，還是老套路，先一起來(lái)確定一下我們要核心解決的問(wèn)題：

首先總結(jié)這個(gè)案例的優(yōu)點(diǎn)：可以將操作在一個(gè)頁(yè)面內(nèi)全部鋪開(kāi)，并且通過(guò)點(diǎn)擊快速打開(kāi)下級(jí)頁(yè)面，然后在一個(gè)頁(yè)面里對(duì)多層數(shù)據(jù)進(jìn)行查看和操作。這種交互在數(shù)據(jù)較少的場(chǎng)景里，是沒(méi)有問(wèn)題的。
但是，在移動(dòng)端場(chǎng)景中，因?yàn)槠聊淮笮∮邢蓿恢贝嬖谥鴶?shù)據(jù)展示條目十分局限的問(wèn)題，而當(dāng)層級(jí)過(guò)深甚至數(shù)據(jù)條目過(guò)多時(shí)，這種問(wèn)題就會(huì)愈加愈烈。所以，如果生產(chǎn)環(huán)境中長(zhǎng)期處于數(shù)據(jù)量非常龐大的狀態(tài)，就會(huì)引出以下問(wèn)題：

1. 在一條完整的下拉控件中，只有第一層級(jí)的數(shù)量是恒定為1的，而二三四層的數(shù)據(jù)量都有可能為多個(gè)，尤其第四層的詳情部分，數(shù)據(jù)條目會(huì)更多。所以在一個(gè)下拉控件中，假設(shè)每一層級(jí)都有數(shù)據(jù)的話，用戶(hù)至少會(huì)看到4條信息。而如果二級(jí)信息大于兩條的話，在全展開(kāi)的情況下，就已經(jīng)占據(jù)了一整屏的位置（場(chǎng)景三），從而導(dǎo)致用戶(hù)在一屏下，至少要去看10-12行（數(shù)量隨著層級(jí)4數(shù)據(jù)條目的變化有所增減）的信息。假設(shè)我們?cè)賱澮黄?，用?hù)就至少需要閱讀和記憶20-24行信息。前面的米勒定律也提到，普通人一次只能在他們的工作記憶中保留5-11條信息。完成產(chǎn)品中的任務(wù)所需的工作記憶與強(qiáng)加給用戶(hù)的心理互動(dòng)成本（MIC）負(fù)擔(dān)成正比。用戶(hù)在這個(gè)過(guò)程中面對(duì)海量數(shù)據(jù)，以及繁復(fù)的層級(jí)，會(huì)付出大量的注意力和記憶力成本，導(dǎo)致用戶(hù)在使用產(chǎn)品的過(guò)程中，心理交互成本呈階梯式增長(zhǎng)。

2. 當(dāng)一個(gè)下拉控件二三四層的數(shù)據(jù)量過(guò)大時(shí)(圖示場(chǎng)景二、三)，除了會(huì)增加用戶(hù)的注意力和記憶力成本，還會(huì)增加反復(fù)操作的頻次以及用戶(hù)的錯(cuò)誤成本，一旦操作錯(cuò)誤或者看錯(cuò)數(shù)據(jù)，重新找到這條數(shù)據(jù)的成本會(huì)變的很高。如果滑動(dòng)一下的物理交互成本為1，那么在多次滑動(dòng)的情況下，我們滑動(dòng)的成本就會(huì)變?yōu)?*X，這個(gè)X變量會(huì)隨著數(shù)據(jù)量的增大而成正比的不斷增加。

   
   

根據(jù)?？硕晌覀兛芍?wbr style="outline:0px;margin:0px;padding:0px;">決策所需要花費(fèi)的時(shí)間隨著選擇的數(shù)量和復(fù)雜性增加而增加。
所以改進(jìn)方案的核心點(diǎn)就是：減少頁(yè)面內(nèi)的層級(jí)和數(shù)據(jù)量，降低用戶(hù)選擇的復(fù)雜性。
但是從業(yè)務(wù)上來(lái)說(shuō)，肯定不能直接去減少數(shù)據(jù)的總量，所以我們必須從交互的角度，去制定出可以減少用戶(hù)選擇的方案。找到了要核心解決的問(wèn)題，接下來(lái)我們就開(kāi)始“拆解”。
那么從哪個(gè)角度開(kāi)始拆解呢？目前的狀態(tài)是：隨著每個(gè)層級(jí)的不斷鋪開(kāi)，用戶(hù)查看的數(shù)據(jù)就會(huì)不斷增加。那既然數(shù)據(jù)總量上我們無(wú)法動(dòng)刀，那我們就從層級(jí)入手，把每個(gè)層級(jí)單獨(dú)拆出來(lái)，根據(jù)拆分原則的最小顆粒度原則，給用戶(hù)每一屏提供最少層級(jí)的選項(xiàng)，讓用戶(hù)專(zhuān)注于最少數(shù)據(jù)的篩選。具體怎么做呢？一起來(lái)看看下面的解決方案。

首先，我們先來(lái)拆分第一層級(jí)。第一層級(jí)是展開(kāi)后面層級(jí)的前提，所以我將第一層級(jí)，設(shè)計(jì)成了一個(gè)頂部切換。點(diǎn)開(kāi)切換后，會(huì)跳出彈窗，這個(gè)彈窗中會(huì)包含所有的第一層級(jí)的選項(xiàng)。隨著彈窗中不同選項(xiàng)的切換，我們會(huì)立馬回到列表頁(yè)面，而頁(yè)面下方的數(shù)據(jù)也會(huì)刷新為此一級(jí)選項(xiàng)下的所有數(shù)據(jù)。因?yàn)榈谝粚蛹?jí)的數(shù)據(jù)量，相比其它層級(jí)，在常規(guī)情況下是最少的，所以面對(duì)更少的選擇，用戶(hù)便可更專(zhuān)注、更迅速、更便捷的鎖定任務(wù)目標(biāo)。

其次，我們將二層與三層，作為展開(kāi)式的卡片，形成一個(gè)卡片式列表。（這里將二三層放在一個(gè)頁(yè)面內(nèi)，沒(méi)有拆到最小顆粒度讓其形成兩個(gè)頁(yè)面，主要是為了控制跳轉(zhuǎn)次數(shù)。）列表中的數(shù)據(jù)只包含對(duì)應(yīng)的第一層級(jí)內(nèi)的數(shù)據(jù)，所以這個(gè)頁(yè)面中展示的數(shù)據(jù)比起之前場(chǎng)景中的“大而全”，已經(jīng)得到一個(gè)非常明顯的過(guò)濾。下拉層級(jí)，也減少為兩層，層級(jí)復(fù)雜度相比之前簡(jiǎn)單了許多。另一方面，每條二層的數(shù)據(jù)都形成了一個(gè)獨(dú)立的卡片，這樣在視覺(jué)上，會(huì)有一個(gè)明顯的區(qū)分。無(wú)論是數(shù)據(jù)量上的選擇復(fù)雜度，還是視覺(jué)上對(duì)于層級(jí)的區(qū)分度，都大幅度縮小了用戶(hù)的辨別成本。

最后，因?yàn)榈谒膶咏?jīng)常會(huì)囊括大量數(shù)據(jù)，我們將第四層單獨(dú)提出來(lái)作為一個(gè)獨(dú)立頁(yè)面（或彈窗），通過(guò)點(diǎn)擊第三層的條目進(jìn)入。獨(dú)立的頁(yè)面第一可以大大提升用戶(hù)對(duì)于場(chǎng)景的專(zhuān)注性，第二有利于數(shù)據(jù)的拓展性，即使再多的信息列入，也不會(huì)影響其它層級(jí)的展示效果。而如果這些詳情信息還分為不同類(lèi)別的話，我們甚至還可以加入TAB篩選，這樣就可以更加快速的通過(guò)類(lèi)別篩選過(guò)濾出用戶(hù)想查看的信息。

老規(guī)矩，在闡述完方案后，我們依舊根據(jù)原則的3，4條，對(duì)方案進(jìn)行各角度的衡量。

成本角度：

• 物理交互成本：點(diǎn)擊數(shù)有小幅度增加，而因?yàn)槠聊粌?nèi)數(shù)據(jù)量減少，下劃數(shù)得到了銳減，另外跳轉(zhuǎn)步驟增多。頁(yè)面的數(shù)據(jù)量越大，增幅的物理交互成本越少。

• 心理交互成本：用戶(hù)在每一個(gè)頁(yè)面所需要做出的信息篩選得到了大幅的減少，每一步足夠直觀。因?yàn)閷蛹?jí)頁(yè)面拆分，而導(dǎo)致的數(shù)據(jù)大量過(guò)濾可以幫助用戶(hù)完成快速?zèng)Q策。而信息篩選節(jié)省出來(lái)的時(shí)間成本，大大高于因點(diǎn)擊而增加的時(shí)間成本。低量心理成本的付出，也會(huì)提升用戶(hù)的預(yù)期效用，從而使用戶(hù)忽略一定程度的物理交互成本。

任務(wù)目標(biāo)角度：
這個(gè)方案，把選擇和查看多層數(shù)據(jù)條目，拆解成了多步操作，讓用戶(hù)在完成每一個(gè)層級(jí)內(nèi)的查看和篩選中，去逐步完成對(duì)所有層級(jí)的查看和篩選。

拆解之后，每個(gè)層級(jí)頁(yè)面中為用戶(hù)減少了大量的選擇和干擾，降低了用戶(hù)選擇的復(fù)雜性，幫助用戶(hù)節(jié)省更多的選擇任務(wù)時(shí)間。解決了用戶(hù)在大量信息中去海選的痛點(diǎn)。
所以從結(jié)果來(lái)看，通過(guò)拆解，既完成了場(chǎng)景下的任務(wù)目標(biāo)、解決了之前存在的交互難題，也節(jié)省了大量的心理交互成本，提高了用戶(hù)的預(yù)期效用。

困難拆解等于繞圈子？

看到這里，也許有人會(huì)說(shuō)，感覺(jué)所謂的“拆解”，都是在“繞圈子”。其實(shí)沒(méi)錯(cuò)，我們以上的兩個(gè)方案都多繞了一步。但是交互中本就沒(méi)有最完美的方案，只有最適合場(chǎng)景的方案。如果可以解決核心的場(chǎng)景問(wèn)題，對(duì)于低幅度的交互成本的增加是可以接受的。
另外，我們有時(shí)候在設(shè)計(jì)交互方案時(shí)，經(jīng)常會(huì)過(guò)于計(jì)較物理交互成本，將“省一步”封為了交互設(shè)計(jì)的“金科玉律”，從而忽略心理交互成本和預(yù)期效用對(duì)用戶(hù)體驗(yàn)的影響，結(jié)果導(dǎo)致用戶(hù)對(duì)于產(chǎn)品的選擇性和體驗(yàn)感一起降低。
所以當(dāng)用戶(hù)面對(duì)高額心理交互成本的困境時(shí)，不妨付出一些“提升物理交互成本”的代價(jià)，也許這多繞的一圈，或者多走的一步，反而會(huì)讓用戶(hù)更快的通往“羅馬”。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：站酷  作者：回去干活

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)