量變引起質變的交互難題

作為唯物辯證法的基本規律之一，“量變引起質變”適用于很多事物的發展規律，而我最近在交互設計中，也發現了很多類似的問題。例如一些常見的控件或者交互方式，在數據量龐大或者層級過多的特殊場景下，就變成了一種“蹂躪用戶”的存在。所以在一些特殊業務場景的B端產品中，當“Corner Case”變成一種常態，常見的控件就會開始因為“量變”而引發“質變”，一下子成為用戶的困擾。

看了以上兩個案例，我們會發現，常規的控件和常用的交互方式在這些“難搞”的場景下，都不再好用了。那我們是否能另辟蹊徑，利用一些其它的交互思維，來解決這些棘手的交互難題呢？

困難拆解法

其實一提到“棘手”，“困難”，大家可能多多少少，在網上聽過這樣的“雞湯”：“別畏懼困難，困難是可以拆解的，當把一個困難拆解成一個一個小目標去完成時，我們離總目標就會越來越近了?！?

這就是我今天想聊的——“困難拆解法”。說到困難拆解法，無論是網上火爆的各類成功學，還是一些成熟的項目管理理論（例如經典的Work Breakdown Structure）都對此有詳細的、深層次的研究和實踐。我們通常會把這個思維應用到復雜工作和項目的管理中去，但是我今天想做一個大膽的實驗，把困難拆解法應用到交互設計中來，看看利用困難拆解法，能否解決我們上面提到的因為特殊業務場景而嚴重影響交互體驗的問題。

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

先一起來看下WBS中定義的分解原則：

1. 將主體目標逐步細化分解，最底層的日?；顒涌芍苯臃峙傻絺€人完成；

2. 每個任務原則上要求分解到不能再細分為止；

3. 日?；顒右獙饺?、時間和資金投入；

4. 整體拆解的任務，最終可以支撐總任務的完成。

如果我們從中提取一下關鍵意義，就是：

1. 大目標拆解成小目標；

2. 拆分到最小顆粒度；

3. 每個小目標需要有對應成本的衡量；

4. 最終完成總目標。

最后，可以將原則的關鍵意義與交互設計做一個對應：

1. 將一個場景內的大的任務目標，逐步分解成一個個小的交互行為

2. 每個交互行為要盡可能的簡單直接，只針對一個交互目的的達成；

3. 拆解的每一個小目標都要有對應的交互成本的計算；

4. 整體拆解出的小的交互行為，最終可以支撐總任務目標的完成。

分析到這里，我們大概總結出了一些拆解的原則，但是仔細看這四條原則，大家會發現，目前還少了一個概念的輸入：那就是交互成本。如果沒有交互成本的計量，那就沒辦法真正衡量出我們最后通過拆解制定出的方案，是否真正節省了用戶的交互成本，提升了任務效率。

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

交互成本

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

1. 心理交互成本（MIC)

• 心理交互成本（MIC）的兩個最重要的組成部分是注意力和記憶力。當一項任務需要過多的注意力或記憶才能完成時，它將具有較高的心理交互成本（MIC），從而降低了可用性。

• 對于不同類型的記憶都有廣泛的分類。最短的記憶類型稱為工作記憶，通常在任務過程中僅持續幾秒鐘。換句話說，當我們參與其他認知過程時，我們的工作記憶負責我們可以掌握的信息。米勒定律指出，普通人一次只能在他們的工作記憶中保留5-11件物品。完成產品中的任務所需的工作記憶與強加給用戶的心理互動成本（MIC）負擔成正比。所以，任務不應要求用戶隨時在其工作記憶中保留七個以上的項目。在極少數情況下，如若必須要求用戶在其記憶中保存11個以上的項目，請使用“區塊”減輕其精神負擔?！皡^塊”指將信息分組。

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

  
  

  
  

  

  
  

2. 物理交互成本（PIC）

• 常見的物理交互成本（PIC）因素包括到達距離和目標寬度，用戶輸入的數量以及完成任務所需的操作等。

• 費茨定律指出，點擊目標的時間（例如，單擊按鈕）是距輸入設備的距離和目標的擊中框寬度的函數。例如，如果鼠標光標很遠且按鈕很小，則單擊桌面上的按鈕將花費更長的時間。

• 評估物理交互成本（PIC）的最佳方法是“任務分析”和檢查可用性指標，例如“任務時間”。

  
  

  
  

  

  
  

3. 交互路徑和動機
在某些情況下，用戶可能采取多種路徑來實現其目標。用戶根據“預期效用”的概念來決定采用哪種路徑。

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

• 具有較高動力（例如，由于品牌運營）的用戶更有可能承擔較高的互動成本以實現其目標。假如消費者是某品牌的忠粉，那即使這個網站的交互成本很高，那么用戶可能仍有足夠的動力去完成他們的任務。然而，如果用戶購買常規產品時付款流程的交互成本很高的話，那么他們很可能去其它網站購買。

從以上具體理論的闡述中我們可以看出，在評估交互成本的時候，步驟數，點擊次數以及操作路徑長短這些我們日常最關注的幾個維度，并不能完全評判交互行為的好壞。而注意力成本和記憶力成本，以及預期效用，往往也會成為決定一種交互行為成敗的關鍵，而對于上面提到的“困難場景”，也正是因為數據量過大和層級過深致使用戶的注意力和記憶力成本階梯式增加，從而導致常規組件體驗感崩塌。
下圖中，我具體整理了各個交互成本組成的因素，以及會導致的結果。

如何拆解？案例一

我們詳細聊了困難拆解法的基本原則和交互成本的主要概念之后。接下來開始進入正題，我們通過困難拆解法和交互成本計算的邏輯，來解決上面提到的兩個案例的問題。

首先，我們先拆解一個簡單的案例。

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

那怎么去解決這個核心問題呢？讓我們開始進行第二步：拆解方案的主體。
通過分析可知，這個案例最小顆粒度的兩個交互主體為：

1. 在地圖上找到關注區域的定位標記；

2. 查看定位標記相對應的詳情數據。

那么現在，根據上面提到的拆解原則，我們要將本來一步到位的交互行為，拆分成兩個最小顆粒度的交互行為，然后分成兩步來達成同樣的任務目標。
第一步，在地圖上只留下定位標記的顯示，這樣的目的主要在于讓用戶只專注于尋找相應區域的定位標記。在去掉了了大量數據信息之后，頁面就一下會清爽許多；

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

闡述完解決方案，根據原則的3，4條，我們一起衡量下方案對交互體驗和任務效率是否有提升。
首先從成本角度來衡量方案：

1.物理交互成本：

• 多增加了一個點擊步驟。

2.心理交互成本：

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

• 讓用戶只專注于查看他所關注的定位信息，避免了其它大量信息的干擾。即使通過粗略的估算，也可以算出來，這多點擊一下的交互時間，要比在大量信息中去檢索信息的時間要小得多。

其次從任務目標角度來衡量方案：
1.達成了與原方案相同的目的，即可以尋找某個區域內的定位標記，并可以查看對應的詳情。
2.解決了信息雜糅在一起，對用戶使用造成極大干擾的交互難題。
所以，綜合成本和目標來看結果，這“多一步”的代價，實際大大提高了用戶的檢索效率。

如何拆解？案例二

當然，上面這個例子過于簡單，第一交互路徑短，第二也屬于比較常規的交互解決方案。那接下來，我們一起來分析一個稍微復雜點的案例，看一看，當“海量數據”再加上“深層級”時，我們用這種方式是否還能解決。

首先呢，還是老套路，先一起來確定一下我們要核心解決的問題：

首先總結這個案例的優點：可以將操作在一個頁面內全部鋪開，并且通過點擊快速打開下級頁面，然后在一個頁面里對多層數據進行查看和操作。這種交互在數據較少的場景里，是沒有問題的。
但是，在移動端場景中，因為屏幕大小有限，一直存在著數據展示條目十分局限的問題，而當層級過深甚至數據條目過多時，這種問題就會愈加愈烈。所以，如果生產環境中長期處于數據量非常龐大的狀態，就會引出以下問題：

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

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

   
   

根據希克定律我們可知：決策所需要花費的時間隨著選擇的數量和復雜性增加而增加。
所以改進方案的核心點就是：減少頁面內的層級和數據量，降低用戶選擇的復雜性。
但是從業務上來說，肯定不能直接去減少數據的總量，所以我們必須從交互的角度，去制定出可以減少用戶選擇的方案。找到了要核心解決的問題，接下來我們就開始“拆解”。
那么從哪個角度開始拆解呢？目前的狀態是：隨著每個層級的不斷鋪開，用戶查看的數據就會不斷增加。那既然數據總量上我們無法動刀，那我們就從層級入手，把每個層級單獨拆出來，根據拆分原則的最小顆粒度原則，給用戶每一屏提供最少層級的選項，讓用戶專注于最少數據的篩選。具體怎么做呢？一起來看看下面的解決方案。

首先，我們先來拆分第一層級。第一層級是展開后面層級的前提，所以我將第一層級，設計成了一個頂部切換。點開切換后，會跳出彈窗，這個彈窗中會包含所有的第一層級的選項。隨著彈窗中不同選項的切換，我們會立馬回到列表頁面，而頁面下方的數據也會刷新為此一級選項下的所有數據。因為第一層級的數據量，相比其它層級，在常規情況下是最少的，所以面對更少的選擇，用戶便可更專注、更迅速、更便捷的鎖定任務目標。

其次，我們將二層與三層，作為展開式的卡片，形成一個卡片式列表。（這里將二三層放在一個頁面內，沒有拆到最小顆粒度讓其形成兩個頁面，主要是為了控制跳轉次數。）列表中的數據只包含對應的第一層級內的數據，所以這個頁面中展示的數據比起之前場景中的“大而全”，已經得到一個非常明顯的過濾。下拉層級，也減少為兩層，層級復雜度相比之前簡單了許多。另一方面，每條二層的數據都形成了一個獨立的卡片，這樣在視覺上，會有一個明顯的區分。無論是數據量上的選擇復雜度，還是視覺上對于層級的區分度，都大幅度縮小了用戶的辨別成本。

最后，因為第四層經常會囊括大量數據，我們將第四層單獨提出來作為一個獨立頁面（或彈窗），通過點擊第三層的條目進入。獨立的頁面第一可以大大提升用戶對于場景的專注性，第二有利于數據的拓展性，即使再多的信息列入，也不會影響其它層級的展示效果。而如果這些詳情信息還分為不同類別的話，我們甚至還可以加入TAB篩選，這樣就可以更加快速的通過類別篩選過濾出用戶想查看的信息。

老規矩，在闡述完方案后，我們依舊根據原則的3，4條，對方案進行各角度的衡量。

成本角度：

• 物理交互成本：點擊數有小幅度增加，而因為屏幕內數據量減少，下劃數得到了銳減，另外跳轉步驟增多。頁面的數據量越大，增幅的物理交互成本越少。

• 心理交互成本：用戶在每一個頁面所需要做出的信息篩選得到了大幅的減少，每一步足夠直觀。因為層級頁面拆分，而導致的數據大量過濾可以幫助用戶完成快速決策。而信息篩選節省出來的時間成本，大大高于因點擊而增加的時間成本。低量心理成本的付出，也會提升用戶的預期效用，從而使用戶忽略一定程度的物理交互成本。

任務目標角度：
這個方案，把選擇和查看多層數據條目，拆解成了多步操作，讓用戶在完成每一個層級內的查看和篩選中，去逐步完成對所有層級的查看和篩選。

拆解之后，每個層級頁面中為用戶減少了大量的選擇和干擾，降低了用戶選擇的復雜性，幫助用戶節省更多的選擇任務時間。解決了用戶在大量信息中去海選的痛點。
所以從結果來看，通過拆解，既完成了場景下的任務目標、解決了之前存在的交互難題，也節省了大量的心理交互成本，提高了用戶的預期效用。

困難拆解等于繞圈子？

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

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷  作者：回去干活

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

量變引起質變的交互難題

作為唯物辯證法的基本規律之一，“量變引起質變”適用于很多事物的發展規律，而我最近在交互設計中，也發現了很多類似的問題。例如一些常見的控件或者交互方式，在數據量龐大或者層級過多的特殊場景下，就變成了一種“蹂躪用戶”的存在。所以在一些特殊業務場景的B端產品中，當“Corner Case”變成一種常態，常見的控件就會開始因為“量變”而引發“質變”，一下子成為用戶的困擾。

看了以上兩個案例，我們會發現，常規的控件和常用的交互方式在這些“難搞”的場景下，都不再好用了。那我們是否能另辟蹊徑，利用一些其它的交互思維，來解決這些棘手的交互難題呢？

困難拆解法

其實一提到“棘手”，“困難”，大家可能多多少少，在網上聽過這樣的“雞湯”：“別畏懼困難，困難是可以拆解的，當把一個困難拆解成一個一個小目標去完成時，我們離總目標就會越來越近了?！?

這就是我今天想聊的——“困難拆解法”。說到困難拆解法，無論是網上火爆的各類成功學，還是一些成熟的項目管理理論（例如經典的Work Breakdown Structure）都對此有詳細的、深層次的研究和實踐。我們通常會把這個思維應用到復雜工作和項目的管理中去，但是我今天想做一個大膽的實驗，把困難拆解法應用到交互設計中來，看看利用困難拆解法，能否解決我們上面提到的因為特殊業務場景而嚴重影響交互體驗的問題。

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

先一起來看下WBS中定義的分解原則：

1. 將主體目標逐步細化分解，最底層的日常活動可直接分派到個人完成；

2. 每個任務原則上要求分解到不能再細分為止；

3. 日常活動要對應到人、時間和資金投入；

4. 整體拆解的任務，最終可以支撐總任務的完成。

如果我們從中提取一下關鍵意義，就是：

1. 大目標拆解成小目標；

2. 拆分到最小顆粒度；

3. 每個小目標需要有對應成本的衡量；

4. 最終完成總目標。

最后，可以將原則的關鍵意義與交互設計做一個對應：

1. 將一個場景內的大的任務目標，逐步分解成一個個小的交互行為

2. 每個交互行為要盡可能的簡單直接，只針對一個交互目的的達成；

3. 拆解的每一個小目標都要有對應的交互成本的計算；

4. 整體拆解出的小的交互行為，最終可以支撐總任務目標的完成。

分析到這里，我們大概總結出了一些拆解的原則，但是仔細看這四條原則，大家會發現，目前還少了一個概念的輸入：那就是交互成本。如果沒有交互成本的計量，那就沒辦法真正衡量出我們最后通過拆解制定出的方案，是否真正節省了用戶的交互成本，提升了任務效率。

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

交互成本

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

1. 心理交互成本（MIC)

• 心理交互成本（MIC）的兩個最重要的組成部分是注意力和記憶力。當一項任務需要過多的注意力或記憶才能完成時，它將具有較高的心理交互成本（MIC），從而降低了可用性。

• 對于不同類型的記憶都有廣泛的分類。最短的記憶類型稱為工作記憶，通常在任務過程中僅持續幾秒鐘。換句話說，當我們參與其他認知過程時，我們的工作記憶負責我們可以掌握的信息。米勒定律指出，普通人一次只能在他們的工作記憶中保留5-11件物品。完成產品中的任務所需的工作記憶與強加給用戶的心理互動成本（MIC）負擔成正比。所以，任務不應要求用戶隨時在其工作記憶中保留七個以上的項目。在極少數情況下，如若必須要求用戶在其記憶中保存11個以上的項目，請使用“區塊”減輕其精神負擔。“區塊”指將信息分組。

• 與注意力和記憶有關的另一個考慮因素是“希克定律”。此條定律指出，“做出決定所需的時間會隨著選擇的數量和復雜性而增加”。

  
  

  
  

  

  
  

2. 物理交互成本（PIC）

• 常見的物理交互成本（PIC）因素包括到達距離和目標寬度，用戶輸入的數量以及完成任務所需的操作等。

• 費茨定律指出，點擊目標的時間（例如，單擊按鈕）是距輸入設備的距離和目標的擊中框寬度的函數。例如，如果鼠標光標很遠且按鈕很小，則單擊桌面上的按鈕將花費更長的時間。

• 評估物理交互成本（PIC）的最佳方法是“任務分析”和檢查可用性指標，例如“任務時間”。

  
  

  
  

  

  
  

3. 交互路徑和動機
在某些情況下，用戶可能采取多種路徑來實現其目標。用戶根據“預期效用”的概念來決定采用哪種路徑。

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

• 具有較高動力（例如，由于品牌運營）的用戶更有可能承擔較高的互動成本以實現其目標。假如消費者是某品牌的忠粉，那即使這個網站的交互成本很高，那么用戶可能仍有足夠的動力去完成他們的任務。然而，如果用戶購買常規產品時付款流程的交互成本很高的話，那么他們很可能去其它網站購買。

從以上具體理論的闡述中我們可以看出，在評估交互成本的時候，步驟數，點擊次數以及操作路徑長短這些我們日常最關注的幾個維度，并不能完全評判交互行為的好壞。而注意力成本和記憶力成本，以及預期效用，往往也會成為決定一種交互行為成敗的關鍵，而對于上面提到的“困難場景”，也正是因為數據量過大和層級過深致使用戶的注意力和記憶力成本階梯式增加，從而導致常規組件體驗感崩塌。
下圖中，我具體整理了各個交互成本組成的因素，以及會導致的結果。

如何拆解？案例一

我們詳細聊了困難拆解法的基本原則和交互成本的主要概念之后。接下來開始進入正題，我們通過困難拆解法和交互成本計算的邏輯，來解決上面提到的兩個案例的問題。

首先，我們先拆解一個簡單的案例。

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

那怎么去解決這個核心問題呢？讓我們開始進行第二步：拆解方案的主體。
通過分析可知，這個案例最小顆粒度的兩個交互主體為：

1. 在地圖上找到關注區域的定位標記；

2. 查看定位標記相對應的詳情數據。

那么現在，根據上面提到的拆解原則，我們要將本來一步到位的交互行為，拆分成兩個最小顆粒度的交互行為，然后分成兩步來達成同樣的任務目標。
第一步，在地圖上只留下定位標記的顯示，這樣的目的主要在于讓用戶只專注于尋找相應區域的定位標記。在去掉了了大量數據信息之后，頁面就一下會清爽許多；

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

闡述完解決方案，根據原則的3，4條，我們一起衡量下方案對交互體驗和任務效率是否有提升。
首先從成本角度來衡量方案：

1.物理交互成本：

• 多增加了一個點擊步驟。

2.心理交互成本：

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

• 讓用戶只專注于查看他所關注的定位信息，避免了其它大量信息的干擾。即使通過粗略的估算，也可以算出來，這多點擊一下的交互時間，要比在大量信息中去檢索信息的時間要小得多。

其次從任務目標角度來衡量方案：
1.達成了與原方案相同的目的，即可以尋找某個區域內的定位標記，并可以查看對應的詳情。
2.解決了信息雜糅在一起，對用戶使用造成極大干擾的交互難題。
所以，綜合成本和目標來看結果，這“多一步”的代價，實際大大提高了用戶的檢索效率。

如何拆解？案例二

當然，上面這個例子過于簡單，第一交互路徑短，第二也屬于比較常規的交互解決方案。那接下來，我們一起來分析一個稍微復雜點的案例，看一看，當“海量數據”再加上“深層級”時，我們用這種方式是否還能解決。

首先呢，還是老套路，先一起來確定一下我們要核心解決的問題：

首先總結這個案例的優點：可以將操作在一個頁面內全部鋪開，并且通過點擊快速打開下級頁面，然后在一個頁面里對多層數據進行查看和操作。這種交互在數據較少的場景里，是沒有問題的。
但是，在移動端場景中，因為屏幕大小有限，一直存在著數據展示條目十分局限的問題，而當層級過深甚至數據條目過多時，這種問題就會愈加愈烈。所以，如果生產環境中長期處于數據量非常龐大的狀態，就會引出以下問題：

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

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

   
   

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

首先，我們先來拆分第一層級。第一層級是展開后面層級的前提，所以我將第一層級，設計成了一個頂部切換。點開切換后，會跳出彈窗，這個彈窗中會包含所有的第一層級的選項。隨著彈窗中不同選項的切換，我們會立馬回到列表頁面，而頁面下方的數據也會刷新為此一級選項下的所有數據。因為第一層級的數據量，相比其它層級，在常規情況下是最少的，所以面對更少的選擇，用戶便可更專注、更迅速、更便捷的鎖定任務目標。

其次，我們將二層與三層，作為展開式的卡片，形成一個卡片式列表。（這里將二三層放在一個頁面內，沒有拆到最小顆粒度讓其形成兩個頁面，主要是為了控制跳轉次數。）列表中的數據只包含對應的第一層級內的數據，所以這個頁面中展示的數據比起之前場景中的“大而全”，已經得到一個非常明顯的過濾。下拉層級，也減少為兩層，層級復雜度相比之前簡單了許多。另一方面，每條二層的數據都形成了一個獨立的卡片，這樣在視覺上，會有一個明顯的區分。無論是數據量上的選擇復雜度，還是視覺上對于層級的區分度，都大幅度縮小了用戶的辨別成本。

最后，因為第四層經常會囊括大量數據，我們將第四層單獨提出來作為一個獨立頁面（或彈窗），通過點擊第三層的條目進入。獨立的頁面第一可以大大提升用戶對于場景的專注性，第二有利于數據的拓展性，即使再多的信息列入，也不會影響其它層級的展示效果。而如果這些詳情信息還分為不同類別的話，我們甚至還可以加入TAB篩選，這樣就可以更加快速的通過類別篩選過濾出用戶想查看的信息。

老規矩，在闡述完方案后，我們依舊根據原則的3，4條，對方案進行各角度的衡量。

成本角度：

• 物理交互成本：點擊數有小幅度增加，而因為屏幕內數據量減少，下劃數得到了銳減，另外跳轉步驟增多。頁面的數據量越大，增幅的物理交互成本越少。

• 心理交互成本：用戶在每一個頁面所需要做出的信息篩選得到了大幅的減少，每一步足夠直觀。因為層級頁面拆分，而導致的數據大量過濾可以幫助用戶完成快速決策。而信息篩選節省出來的時間成本，大大高于因點擊而增加的時間成本。低量心理成本的付出，也會提升用戶的預期效用，從而使用戶忽略一定程度的物理交互成本。

任務目標角度：
這個方案，把選擇和查看多層數據條目，拆解成了多步操作，讓用戶在完成每一個層級內的查看和篩選中，去逐步完成對所有層級的查看和篩選。

拆解之后，每個層級頁面中為用戶減少了大量的選擇和干擾，降低了用戶選擇的復雜性，幫助用戶節省更多的選擇任務時間。解決了用戶在大量信息中去海選的痛點。
所以從結果來看，通過拆解，既完成了場景下的任務目標、解決了之前存在的交互難題，也節省了大量的心理交互成本，提高了用戶的預期效用。

困難拆解等于繞圈子？

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

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷  作者：回去干活

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務