伊人久久大香线蕉综合影视_日韩精品少妇无码受不了_71pao成人国产永久免费视频_国产伦片中文免费观看_国产高清无码麻豆精品_九色综合伊人久久富二代_日韩黄色精品_日韩A∨精品日韩精品无码

用困難分解法解決特殊場(chǎng)景的交互難題

2021-6-30    資深UI設(shè)計(jì)者

在B端產(chǎn)品中,經(jīng)常會(huì)出現(xiàn)層級(jí)深或者數(shù)據(jù)量過大而導(dǎo)致正??丶霈F(xiàn)體驗(yàn)問題,那在這方面的交互時(shí),可以引入什么樣的新思路呢?

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


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













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


困難拆解法


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

這就是我今天想聊的——“困難拆解法”。說到困難拆解法,無論是網(wǎng)上火爆的各類成功學(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ì)中來,看看利用困難拆解法,能否解決我們上面提到的因?yàn)樘厥鈽I(yè)務(wù)場(chǎng)景而嚴(yán)重影響交互體驗(yàn)的問題。



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

先一起來看下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è)概念的輸入:那就是交互成本。如果沒有交互成本的計(jì)量,那就沒辦法真正衡量出我們最后通過拆解制定出的方案,是否真正節(jié)省了用戶的交互成本,提升了任務(wù)效率。

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


交互成本


什么是交互成本呢?尼爾森·諾曼(Nielsen Norman)將“交互成本”定義為用戶為實(shí)現(xiàn)其目標(biāo)而必須付出的身心努力的總和。大多數(shù)初級(jí)設(shè)計(jì)人員都有這樣的誤解,即交互成本等于用戶完成任務(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ù)需要過多的注意力或記憶才能完成時(shí),它將具有較高的心理交互成本(MIC),從而降低了可用性。

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

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




2. 物理交互成本(PIC)

  • 常見的物理交互成本(PIC)因素包括到達(dá)距離和目標(biāo)寬度,用戶輸入的數(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ī)
在某些情況下,用戶可能采取多種路徑來實(shí)現(xiàn)其目標(biāo)。用戶根據(jù)“預(yù)期效用”的概念來決定采用哪種路徑。

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

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


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

如何拆解?案例一


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

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

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

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

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

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

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



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



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

1.物理交互成本:

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

2.心理交互成本:

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

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


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


如何拆解?案例二


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

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


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


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

  2. 當(dāng)一個(gè)下拉控件二三四層的數(shù)據(jù)量過大時(shí)(圖示場(chǎng)景二、三),除了會(huì)增加用戶的注意力和記憶力成本,還會(huì)增加反復(fù)操作的頻次以及用戶的錯(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)就是:減少頁面內(nèi)的層級(jí)和數(shù)據(jù)量,降低用戶選擇的復(fù)雜性。
但是從業(yè)務(wù)上來說,肯定不能直接去減少數(shù)據(jù)的總量,所以我們必須從交互的角度,去制定出可以減少用戶選擇的方案。找到了要核心解決的問題,接下來我們就開始“拆解”。
那么從哪個(gè)角度開始拆解呢?目前的狀態(tài)是:隨著每個(gè)層級(jí)的不斷鋪開,用戶查看的數(shù)據(jù)就會(huì)不斷增加。那既然數(shù)據(jù)總量上我們無法動(dòng)刀,那我們就從層級(jí)入手,把每個(gè)層級(jí)單獨(dú)拆出來,根據(jù)拆分原則的最小顆粒度原則,給用戶每一屏提供最少層級(jí)的選項(xiàng),讓用戶專注于最少數(shù)據(jù)的篩選。具體怎么做呢?一起來看看下面的解決方案。


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



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


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



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


成本角度:

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

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

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


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


困難拆解等于繞圈子?




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

藍(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)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png


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

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

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


在B端產(chǎn)品中,經(jīng)常會(huì)出現(xiàn)層級(jí)深或者數(shù)據(jù)量過大而導(dǎo)致正常控件出現(xiàn)體驗(yàn)問題,那在這方面的交互時(shí),可以引入什么樣的新思路呢?

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


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













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


困難拆解法


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

這就是我今天想聊的——“困難拆解法”。說到困難拆解法,無論是網(wǎng)上火爆的各類成功學(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ì)中來,看看利用困難拆解法,能否解決我們上面提到的因?yàn)樘厥鈽I(yè)務(wù)場(chǎng)景而嚴(yán)重影響交互體驗(yàn)的問題。



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

先一起來看下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è)概念的輸入:那就是交互成本。如果沒有交互成本的計(jì)量,那就沒辦法真正衡量出我們最后通過拆解制定出的方案,是否真正節(jié)省了用戶的交互成本,提升了任務(wù)效率。

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


交互成本


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


1. 心理交互成本(MIC)

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

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

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




2. 物理交互成本(PIC)

  • 常見的物理交互成本(PIC)因素包括到達(dá)距離和目標(biāo)寬度,用戶輸入的數(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ī)
在某些情況下,用戶可能采取多種路徑來實(shí)現(xiàn)其目標(biāo)。用戶根據(jù)“預(yù)期效用”的概念來決定采用哪種路徑。

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

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


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

如何拆解?案例一


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

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

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

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

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

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

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



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



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

1.物理交互成本:

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

2.心理交互成本:

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

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


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


如何拆解?案例二


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

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


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


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

  2. 當(dāng)一個(gè)下拉控件二三四層的數(shù)據(jù)量過大時(shí)(圖示場(chǎng)景二、三),除了會(huì)增加用戶的注意力和記憶力成本,還會(huì)增加反復(fù)操作的頻次以及用戶的錯(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)就是:減少頁面內(nèi)的層級(jí)和數(shù)據(jù)量,降低用戶選擇的復(fù)雜性。
但是從業(yè)務(wù)上來說,肯定不能直接去減少數(shù)據(jù)的總量,所以我們必須從交互的角度,去制定出可以減少用戶選擇的方案。找到了要核心解決的問題,接下來我們就開始“拆解”。
那么從哪個(gè)角度開始拆解呢?目前的狀態(tài)是:隨著每個(gè)層級(jí)的不斷鋪開,用戶查看的數(shù)據(jù)就會(huì)不斷增加。那既然數(shù)據(jù)總量上我們無法動(dòng)刀,那我們就從層級(jí)入手,把每個(gè)層級(jí)單獨(dú)拆出來,根據(jù)拆分原則的最小顆粒度原則,給用戶每一屏提供最少層級(jí)的選項(xiàng),讓用戶專注于最少數(shù)據(jù)的篩選。具體怎么做呢?一起來看看下面的解決方案。


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



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


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



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


成本角度:

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

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

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


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


困難拆解等于繞圈子?




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

藍(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)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png


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

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

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


日歷

鏈接

個(gè)人資料

存檔

在线观看免费午夜福利视频| 妹子高潮喷水视频| 国产一区亚洲一区在线观看| videosex国产| 九九爱精品视频在线观看| 飞空精品影院首页| 久久精品亚洲熟妇少妇任你| 女性被躁到高潮视频| 亚洲精品久久午夜乱码| 丰满迷人的少妇在线观看| 成人18禁高潮啪啪吃奶动态图| 久久久久国产一级毛片高清牌| 日韩一卡2卡3卡4卡2021年| 婷婷色综合大香蕉| 只有这里有精品99| 国产一区二区三区av在线| 如日韩欧美国产精品一区二区三区| 亚洲一码二码三码区别大吗| 满18在线观看网站| 在线看a的网站| 精品免费久久久久久久清纯 | 叶爱在线成人免费视频播放| 男女无遮挡免费网站观看| 国产在线一区二区三区精| 亚洲精品一区蜜桃| 国产一级毛片在线| 伊人久久大香线蕉亚洲五| 狠狠精品人妻久久久久久综合| 中文字幕亚洲精品专区| 久久久久久人妻| 免费看av在线观看网站| 久久久久久久国产电影| 18禁观看日本| 飞空精品影院首页| 黑人巨大精品欧美一区二区蜜桃| 国产深夜福利视频在线观看| 天堂俺去俺来也www色官网| 国产片特级美女逼逼视频| 国产老妇伦熟女老妇高清| 精品国产国语对白av| 日韩免费高清中文字幕av| 色婷婷久久久亚洲欧美| 国产精品一区二区精品视频观看| 国产黄色视频一区二区在线观看| 老司机亚洲免费影院| 亚洲四区av| 中文字幕高清在线视频| 女人爽到高潮嗷嗷叫在线视频| 久久精品国产综合久久久| 亚洲婷婷狠狠爱综合网| 91精品伊人久久大香线蕉| 人人妻人人添人人爽欧美一区卜| 校园人妻丝袜中文字幕| 亚洲成人手机| 超碰成人久久| 9热在线视频观看99| 侵犯人妻中文字幕一二三四区| 亚洲欧美精品综合一区二区三区| 久久久久久久大尺度免费视频| 久久久久久久国产电影| 午夜福利视频在线观看免费| 免费黄频网站在线观看国产| 精品一品国产午夜福利视频| 另类亚洲欧美激情| 一本一本久久a久久精品综合妖精| 亚洲第一青青草原| 欧美日本中文国产一区发布| 午夜福利在线免费观看网站| 肉色欧美久久久久久久蜜桃| 男的添女的下面高潮视频| 伊人亚洲综合成人网| 大话2 男鬼变身卡| 成人手机av| av福利片在线| 精品午夜福利在线看| 黑人猛操日本美女一级片| 国产亚洲欧美精品永久| 亚洲欧洲精品一区二区精品久久久 | 久久人人97超碰香蕉20202| 欧美日韩亚洲高清精品| 乱人伦中国视频| 日韩精品免费视频一区二区三区| 深夜精品福利| 你懂的网址亚洲精品在线观看| 欧美精品一区二区大全| av在线观看视频网站免费| 国产 一区精品| 观看av在线不卡| 成人国语在线视频| 免费久久久久久久精品成人欧美视频| 色综合欧美亚洲国产小说| 男女高潮啪啪啪动态图| 中国国产av一级| 9191精品国产免费久久| 老司机亚洲免费影院| 女的被弄到高潮叫床怎么办| 日韩 欧美 亚洲 中文字幕| 99国产精品免费福利视频| 精品国产露脸久久av麻豆| 亚洲精品aⅴ在线观看| 少妇 在线观看| www日本在线高清视频| 婷婷成人精品国产| 丝袜喷水一区| 人人妻人人爽人人添夜夜欢视频| kizo精华| 亚洲,欧美,日韩| 国产亚洲av片在线观看秒播厂| 成年动漫av网址| 欧美日韩视频高清一区二区三区二| 亚洲情色 制服丝袜| 婷婷色av中文字幕| 国产日韩欧美视频二区| 女的被弄到高潮叫床怎么办| 国产xxxxx性猛交| av有码第一页| 精品免费久久久久久久清纯 | 国产精品香港三级国产av潘金莲 | 国产午夜精品一二区理论片| www.av在线官网国产| 永久免费av网站大全| 日本一区二区免费在线视频| 国产男人的电影天堂91| 青青草视频在线视频观看| 9191精品国产免费久久| 久久久久国产精品人妻一区二区| 飞空精品影院首页| 成年动漫av网址| 国产一区二区激情短视频 | 国产精品一二三区在线看| 新久久久久国产一级毛片| av视频免费观看在线观看| 性高湖久久久久久久久免费观看| 大话2 男鬼变身卡| 最黄视频免费看| av一本久久久久| 99九九在线精品视频| 国产亚洲一区二区精品| 亚洲国产毛片av蜜桃av| 一本一本久久a久久精品综合妖精| 大陆偷拍与自拍| 两性夫妻黄色片| 美女扒开内裤让男人捅视频| netflix在线观看网站| 建设人人有责人人尽责人人享有的| 乱人伦中国视频| 久久亚洲国产成人精品v| 国产av码专区亚洲av| 亚洲精品日韩在线中文字幕| 午夜老司机福利片| 久久影院123| 婷婷色综合www| 免费看av在线观看网站| 亚洲第一av免费看| av有码第一页| 国产精品 国内视频| 色吧在线观看| 久久99热这里只频精品6学生| 男人爽女人下面视频在线观看| 99久久人妻综合| 深夜精品福利| 国产成人精品久久久久久| 久久精品久久久久久噜噜老黄| www.熟女人妻精品国产| 女人爽到高潮嗷嗷叫在线视频| 欧美成人精品欧美一级黄| 午夜福利乱码中文字幕| 午夜福利免费观看在线| 亚洲一区二区三区欧美精品| 中国三级夫妇交换| 久久精品久久精品一区二区三区| 国产黄色视频一区二区在线观看| 国产在线一区二区三区精| 男女床上黄色一级片免费看| 你懂的网址亚洲精品在线观看| 亚洲av国产av综合av卡| 成人国产av品久久久| 精品久久久久久电影网| 久久ye,这里只有精品| 亚洲欧美清纯卡通| 婷婷成人精品国产| 80岁老熟妇乱子伦牲交| 欧美激情高清一区二区三区 | 在线观看www视频免费| 国产精品久久久av美女十八| 纵有疾风起免费观看全集完整版| 国产精品偷伦视频观看了| 日本vs欧美在线观看视频| 久久综合国产亚洲精品| a级毛片黄视频| 十八禁高潮呻吟视频| 99国产精品免费福利视频| 日韩一本色道免费dvd| 日本vs欧美在线观看视频| 91精品伊人久久大香线蕉| 亚洲精品在线美女| 国产毛片在线视频| 男女边摸边吃奶| 成人国产av品久久久| 国产精品秋霞免费鲁丝片| 成人影院久久| 老司机影院成人| 亚洲少妇的诱惑av| 亚洲男人天堂网一区| 午夜日本视频在线| 亚洲成国产人片在线观看| 色播在线永久视频| 久久久久久久国产电影| 高清视频免费观看一区二区| 日韩av在线免费看完整版不卡| 久久久国产一区二区| 欧美国产精品va在线观看不卡| 人人妻,人人澡人人爽秒播 | 天天躁狠狠躁夜夜躁狠狠躁| 国产成人精品福利久久| 91aial.com中文字幕在线观看| 亚洲欧洲日产国产| 成年人午夜在线观看视频| 久久久国产欧美日韩av| 精品酒店卫生间| 国产精品偷伦视频观看了| 男人操女人黄网站| 天美传媒精品一区二区| 精品卡一卡二卡四卡免费| 秋霞在线观看毛片| 国产午夜精品一二区理论片| 国产女主播在线喷水免费视频网站| 久久久久视频综合| 超碰成人久久| 免费少妇av软件| 成人毛片60女人毛片免费| 少妇人妻 视频| 咕卡用的链子| 亚洲欧美色中文字幕在线| 精品国产露脸久久av麻豆| 操美女的视频在线观看| 王馨瑶露胸无遮挡在线观看| 99久久人妻综合| 美女脱内裤让男人舔精品视频| 性少妇av在线| 最近手机中文字幕大全| 嫩草影视91久久| 天天添夜夜摸| 精品久久久久久电影网| 91精品伊人久久大香线蕉| 久久人人97超碰香蕉20202| 久久鲁丝午夜福利片| 看非洲黑人一级黄片| 一区二区三区四区激情视频| 99热全是精品| 久久天堂一区二区三区四区| 色精品久久人妻99蜜桃| 美女扒开内裤让男人捅视频| 久久久久精品性色| 久久精品熟女亚洲av麻豆精品| 51午夜福利影视在线观看| 各种免费的搞黄视频| 99久国产av精品国产电影| 少妇精品久久久久久久| 国产男女超爽视频在线观看| 免费不卡黄色视频| 高清欧美精品videossex| 波多野结衣av一区二区av| 免费观看人在逋| 成年女人毛片免费观看观看9 | 男女下面插进去视频免费观看| 色吧在线观看| 亚洲欧美一区二区三区久久| 精品人妻一区二区三区麻豆| 美女脱内裤让男人舔精品视频| av片东京热男人的天堂| 欧美 亚洲 国产 日韩一| 十八禁高潮呻吟视频| 中文字幕另类日韩欧美亚洲嫩草| 多毛熟女@视频| 日韩一区二区三区影片| 日韩熟女老妇一区二区性免费视频| 99热网站在线观看| 不卡av一区二区三区| 亚洲欧美成人精品一区二区| 免费观看a级毛片全部| av卡一久久| 一区福利在线观看| av在线观看视频网站免费| 久久久久久久精品精品| 极品少妇高潮喷水抽搐| 欧美日本中文国产一区发布| 久久久久视频综合| 秋霞在线观看毛片| 久久精品人人爽人人爽视色| 少妇人妻久久综合中文| 在现免费观看毛片| 午夜福利一区二区在线看| 香蕉国产在线看| 天天躁日日躁夜夜躁夜夜| 日韩视频在线欧美| 国产精品 国内视频| 成人漫画全彩无遮挡| 妹子高潮喷水视频| 色网站视频免费| 亚洲国产中文字幕在线视频| 少妇 在线观看| 赤兔流量卡办理| 国产精品一国产av| 国产日韩一区二区三区精品不卡| 美女主播在线视频| 成人漫画全彩无遮挡| 18禁动态无遮挡网站| 久久人妻熟女aⅴ| 国产麻豆69| 国产1区2区3区精品| 国产欧美日韩一区二区三区在线| 午夜福利在线免费观看网站| 久久久久国产一级毛片高清牌| 秋霞在线观看毛片| 99国产精品免费福利视频| 亚洲欧美成人综合另类久久久| 一本大道久久a久久精品| 精品视频人人做人人爽| 男的添女的下面高潮视频| √禁漫天堂资源中文www| 在线观看www视频免费| 国产精品一区二区在线观看99| 一边亲一边摸免费视频| 亚洲av综合色区一区| 女人久久www免费人成看片| 久久久久视频综合| 国产黄色视频一区二区在线观看| 亚洲男人天堂网一区| 亚洲美女视频黄频| 夜夜骑夜夜射夜夜干| 秋霞伦理黄片| 久久精品亚洲av国产电影网| 99久久综合免费| 欧美97在线视频| 亚洲av国产av综合av卡| 亚洲色图综合在线观看| 精品亚洲成a人片在线观看| 国产精品 国内视频| 最近中文字幕高清免费大全6| 国产深夜福利视频在线观看| 亚洲一码二码三码区别大吗| xxx大片免费视频| 国产精品国产三级国产专区5o| 五月开心婷婷网| 可以免费在线观看a视频的电影网站 | 一本大道久久a久久精品| 久久国产精品男人的天堂亚洲| av网站免费在线观看视频| 午夜久久久在线观看| 18禁动态无遮挡网站| 99精国产麻豆久久婷婷| 大片电影免费在线观看免费| 性色av一级| 性高湖久久久久久久久免费观看| 国产精品亚洲av一区麻豆 | 亚洲av日韩精品久久久久久密 | 1024视频免费在线观看| 久久97久久精品| 日日啪夜夜爽| a级毛片在线看网站| 久久国产亚洲av麻豆专区| 精品亚洲成a人片在线观看| 亚洲激情五月婷婷啪啪| av国产精品久久久久影院| 巨乳人妻的诱惑在线观看| 久久99精品国语久久久| 国产免费一区二区三区四区乱码| 在线观看免费视频网站a站| 最新的欧美精品一区二区| 91精品国产国语对白视频| 日韩精品免费视频一区二区三区| 国产精品一国产av| 日本欧美国产在线视频| 免费在线观看完整版高清| 色婷婷av一区二区三区视频| 最近的中文字幕免费完整| 性高湖久久久久久久久免费观看| 国产激情久久老熟女| 最近2019中文字幕mv第一页| 国产在线视频一区二区| 亚洲精品国产一区二区精华液| 蜜桃国产av成人99| 免费女性裸体啪啪无遮挡网站| 久久午夜综合久久蜜桃| 自线自在国产av| 久久久久久久久久久久大奶| 青青草视频在线视频观看| 久久久国产欧美日韩av| 欧美日韩成人在线一区二区| 久久青草综合色| 国产色婷婷99| 黄片无遮挡物在线观看| 国产成人a∨麻豆精品| 秋霞伦理黄片| 国产极品粉嫩免费观看在线| 亚洲精品日本国产第一区| 捣出白浆h1v1| 在线观看三级黄色| 在线亚洲精品国产二区图片欧美| 大话2 男鬼变身卡| 久久青草综合色| 日韩一区二区视频免费看| 少妇被粗大猛烈的视频| 久久久久网色| 亚洲精品美女久久av网站| √禁漫天堂资源中文www| 黑人巨大精品欧美一区二区蜜桃| 一级,二级,三级黄色视频| av国产久精品久网站免费入址| 搡老岳熟女国产| 中文字幕人妻熟女乱码| 日韩 亚洲 欧美在线| 女性生殖器流出的白浆| 成人影院久久| tube8黄色片| 欧美人与性动交α欧美精品济南到| 丝袜脚勾引网站| 久久久久久久久久久免费av| 亚洲欧洲精品一区二区精品久久久 | 如何舔出高潮| 精品福利永久在线观看| 大片免费播放器 马上看| 欧美激情 高清一区二区三区| 一边亲一边摸免费视频| 十八禁高潮呻吟视频| av在线观看视频网站免费| 婷婷色综合www| 久久精品人人爽人人爽视色| 伦理电影免费视频| 国产一区有黄有色的免费视频| 亚洲天堂av无毛| 国产精品嫩草影院av在线观看| 亚洲精品美女久久av网站| 国产片内射在线| 天天躁狠狠躁夜夜躁狠狠躁| 别揉我奶头~嗯~啊~动态视频 | 午夜日本视频在线| 精品久久久精品久久久| 一本一本久久a久久精品综合妖精| 最近最新中文字幕免费大全7| 女人被躁到高潮嗷嗷叫费观| 美女大奶头黄色视频| 叶爱在线成人免费视频播放| 99久久99久久久精品蜜桃| 男女床上黄色一级片免费看| 哪个播放器可以免费观看大片| 亚洲av福利一区| 国产爽快片一区二区三区| 国产精品 国内视频| 色婷婷久久久亚洲欧美| 90打野战视频偷拍视频| 丝袜美足系列| 亚洲av日韩精品久久久久久密 | 欧美人与善性xxx| 我的亚洲天堂| 亚洲久久久国产精品| 欧美日韩亚洲国产一区二区在线观看 | 免费在线观看完整版高清| 久久午夜综合久久蜜桃| 18禁国产床啪视频网站| 久久ye,这里只有精品| 少妇被粗大的猛进出69影院| 欧美精品av麻豆av| 国产午夜精品一二区理论片| 男女边吃奶边做爰视频| 天天影视国产精品| 亚洲一级一片aⅴ在线观看| 国产亚洲精品第一综合不卡| 久久这里只有精品19| 天天躁夜夜躁狠狠躁躁| 日本一区二区免费在线视频| 欧美亚洲日本最大视频资源| 青草久久国产| 最近的中文字幕免费完整| 久久免费观看电影| 国产片特级美女逼逼视频| 国产免费福利视频在线观看| 日韩免费高清中文字幕av| 99精国产麻豆久久婷婷| 国语对白做爰xxxⅹ性视频网站| 国产男女超爽视频在线观看| 亚洲国产最新在线播放| 国产淫语在线视频| 美女扒开内裤让男人捅视频| 久久精品aⅴ一区二区三区四区| svipshipincom国产片| 久久亚洲国产成人精品v| 夫妻午夜视频| 极品少妇高潮喷水抽搐| 少妇的丰满在线观看| 国产淫语在线视频| 伦理电影免费视频| 亚洲精品一二三| 色视频在线一区二区三区| 男女床上黄色一级片免费看| 亚洲情色 制服丝袜| 深夜精品福利| 国精品久久久久久国模美| 亚洲av日韩精品久久久久久密 | 男女国产视频网站| 成人午夜精彩视频在线观看| 久久ye,这里只有精品| 国产成人午夜福利电影在线观看| 成人18禁高潮啪啪吃奶动态图| 伊人久久国产一区二区| 少妇人妻久久综合中文| 乱人伦中国视频| 日韩制服骚丝袜av| 精品人妻一区二区三区麻豆| 性少妇av在线| 天天躁狠狠躁夜夜躁狠狠躁| 2018国产大陆天天弄谢| 国产av一区二区精品久久| 欧美另类一区| 欧美激情 高清一区二区三区| 久久久久久久久免费视频了| 国产精品国产av在线观看| 欧美少妇被猛烈插入视频| 成人午夜精彩视频在线观看| 丰满乱子伦码专区| 国产成人午夜福利电影在线观看| 日韩av免费高清视频| 男女无遮挡免费网站观看| 激情五月婷婷亚洲| 亚洲欧美成人精品一区二区| 欧美中文综合在线视频| 男女无遮挡免费网站观看| 日本猛色少妇xxxxx猛交久久| 国产av一区二区精品久久| 欧美精品av麻豆av| 国产精品二区激情视频| av在线播放精品| 男女午夜视频在线观看| 亚洲美女视频黄频| 免费黄频网站在线观看国产| 成人三级做爰电影| 青春草视频在线免费观看| √禁漫天堂资源中文www| 国产av一区二区精品久久| 国产激情久久老熟女| 亚洲人成网站在线观看播放| 欧美国产精品一级二级三级| a级片在线免费高清观看视频| 黄色怎么调成土黄色| 啦啦啦 在线观看视频| 啦啦啦在线免费观看视频4| 90打野战视频偷拍视频| 夜夜骑夜夜射夜夜干| 天天操日日干夜夜撸| 秋霞在线观看毛片| 精品福利永久在线观看| 亚洲三区欧美一区| 男人操女人黄网站| 免费黄网站久久成人精品| 精品一区二区三区四区五区乱码 | 中文字幕精品免费在线观看视频| 成年美女黄网站色视频大全免费| 老司机在亚洲福利影院| 久久精品国产亚洲av高清一级| 国产免费一区二区三区四区乱码| 国产一区二区激情短视频 | 国产精品偷伦视频观看了| 在线观看www视频免费| 日韩不卡一区二区三区视频在线| av在线老鸭窝| 国产亚洲欧美精品永久| 国产av一区二区精品久久| 精品第一国产精品| 亚洲精品美女久久久久99蜜臀 | 黄色毛片三级朝国网站| 欧美最新免费一区二区三区| 99九九在线精品视频| 人成视频在线观看免费观看| 黄网站色视频无遮挡免费观看| 亚洲天堂av无毛| av在线app专区| 国产精品三级大全| 精品人妻熟女毛片av久久网站| 卡戴珊不雅视频在线播放| 天天添夜夜摸| 免费日韩欧美在线观看| 男女边摸边吃奶| 青春草国产在线视频| 亚洲美女黄色视频免费看| 丝瓜视频免费看黄片| 免费不卡黄色视频| 精品视频人人做人人爽| 成人18禁高潮啪啪吃奶动态图| 老汉色av国产亚洲站长工具| netflix在线观看网站| 伊人亚洲综合成人网| 婷婷成人精品国产| 视频区图区小说| 中文字幕亚洲精品专区| 日本av免费视频播放| 精品亚洲乱码少妇综合久久| 国产97色在线日韩免费| 午夜福利乱码中文字幕| 国产成人av激情在线播放| 亚洲人成77777在线视频| 在线 av 中文字幕| 18在线观看网站| 国产福利在线免费观看视频| 国产精品99久久99久久久不卡 | 午夜福利影视在线免费观看| a级毛片在线看网站| 999久久久国产精品视频| 国产精品人妻久久久影院| 欧美黄色片欧美黄色片| 中文字幕高清在线视频| 精品福利永久在线观看| 亚洲精品中文字幕在线视频| 一级毛片 在线播放| 欧美激情 高清一区二区三区|