国产99视频精品免视看9,日本3d黄动漫的在线观看,米奇777四色精品人人爽

搜索

APP

起點(diǎn)課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個(gè)人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

交互走查表（2）：「信息架構(gòu)」走查篇

餿面包

2021-03-23

0 評論 12778 瀏覽 128 收藏

22 分鐘

編輯導(dǎo)語：在上一篇文章《3 步教你打造屬于自己的交互走查表！》中，作者為我們介紹了交互走查表是什么？交互走查表怎么做？并且分享了交互走查表的制作工具。本篇文章繼續(xù)為大家分享關(guān)于交互走查表的知識，解讀交互走查表中“信息架構(gòu)”的走查要素。

文章將解讀交互走查表中“信息架構(gòu)”的走查要素，文章通過大量的案例來幫你理解下面三點(diǎn)：

信息架構(gòu)走查時(shí)具體要走查哪些內(nèi)容？
同需要注意哪些事項(xiàng)？
如何思考這些走查點(diǎn)？

還是那句話，授人以魚不如授人以漁，重點(diǎn)不是案例而是案例背后表達(dá)的方法和思考。照著案例可以依樣畫葫蘆，脫離了案例后若是沒有自己的思考則寸步難行，所以一定要養(yǎng)成獨(dú)立思考的習(xí)慣。

一、是否合理易操作

整體信息架構(gòu)、導(dǎo)航、模塊入口是否合理，是否易操作，拓展性好。

1. 信息架構(gòu)、入口是否合理

信息架構(gòu)首先要合理，用戶能快速找到自己想觸達(dá)的模塊，何謂合理？

合理的模塊入口一定是滿足用戶心理模型的，滿足用戶預(yù)期的。舉個(gè)我體會最深的例子：我經(jīng)常在電腦上遇到掃碼登錄的場景，當(dāng)我打開手機(jī)APP找掃碼入口的時(shí)候，我首先是去個(gè)人中心找“掃一掃”，找不到再去其它地方找，那么“掃一掃入口在個(gè)人中心”——這就是我的心理模型。

這個(gè)入口如果沒有放在個(gè)人中心的話，我就要多花時(shí)間去找這個(gè)入口，此時(shí)APP給我的體驗(yàn)肯定是不好的，我會有一種挫敗感，為什么呢？

因?yàn)槲沂褂玫暮芏郃PP都會把掃一掃功能放在個(gè)人中心，這樣的設(shè)計(jì)已經(jīng)讓我形成了習(xí)慣，這是最符合我心理預(yù)期的模塊入口。

再舉個(gè)例子：網(wǎng)易云音樂改版后，把【我的】tab放在了正中間，我到現(xiàn)在也沒習(xí)慣過來，每次都感覺很難找到自己想要的功能入口，因?yàn)槲伊?xí)慣了個(gè)人中心是放在最右邊的。

當(dāng)然，也許網(wǎng)易云音樂的設(shè)計(jì)師是經(jīng)過數(shù)據(jù)分析過后才做出這樣的改版決策，但是我仍舊無法習(xí)慣新的改動。

舉了倆不符合用戶心理模型的例子，下面舉倆架構(gòu)清晰合理的案例?？梢钥吹较旅鎯蓮圓PP截圖，整體信息架構(gòu)是非常清晰合理的，看一眼就知道每個(gè)版塊是干啥的。每個(gè)區(qū)域的劃分都有其業(yè)務(wù)屬性，非常簡單易懂。

2. 易操作，拓展性好

何謂易操作？

即用戶完成一項(xiàng)任務(wù)的點(diǎn)擊次數(shù)是否為最小可精簡次數(shù)。這里需要提一下“最小可精簡次數(shù)”，為啥不叫最小點(diǎn)擊次數(shù)呢？

最小可點(diǎn)擊次數(shù)只需把點(diǎn)擊次數(shù)降到最低就可以了呀，這是因?yàn)閷?shí)現(xiàn)中很多“必要的點(diǎn)擊”不可去掉。假設(shè)去掉這些”必要的點(diǎn)擊“，的確可以讓用戶少點(diǎn)擊幾次，提升了用戶體驗(yàn)，但是卻可能影響了產(chǎn)品的目標(biāo)。

舉個(gè)例子：商場的自動扶梯大家一定坐過，你有沒有發(fā)現(xiàn)如果你想從1樓上到3樓，你一定會繞兩個(gè)圈子。你乘坐扶梯到了2樓后，你必須要繞一圈才能乘坐上3樓的扶梯。

你有想過為什么嗎？

拋開建筑設(shè)計(jì)原因不談，還有一個(gè)重要的因素：為了增加顧客停留時(shí)間。因?yàn)橥Ａ魰r(shí)間的增加就意味著顧客消費(fèi)可能性增大，商場也就越熱鬧營收也能越好。而顧客雖然會覺得麻煩了一點(diǎn)，但是也不會因?yàn)檫@點(diǎn)麻煩就不去逛商場了。

看，這就是一個(gè)典型的用戶目標(biāo)和產(chǎn)品目標(biāo)相平衡的案例。商場動線設(shè)計(jì)里包含了“多繞幾圈”這一步就是不可精簡的步驟。互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)也是一樣的，為了產(chǎn)品目標(biāo)而犧牲一些用戶體驗(yàn)有時(shí)候是必須的，為啥？

因?yàn)楫a(chǎn)品目標(biāo)不僅僅包含了體驗(yàn)，更多的是盈利。

再舉個(gè)互聯(lián)網(wǎng)產(chǎn)品的例子：淘寶新版APP，你點(diǎn)擊首頁的推薦商品卡片后跳轉(zhuǎn)的頁面不是商品詳情頁，而是商品集合頁面，需要再次點(diǎn)擊商品才能進(jìn)入該商品的詳情頁。

這樣的設(shè)計(jì)雖然增加了點(diǎn)擊次數(shù)，但是同時(shí)也增加了信息流曝光。

對于以“逛”為主的淘寶來說，這樣的交互方式不會讓用戶感覺厭惡。我初期甚至都沒發(fā)現(xiàn)這個(gè)改動，因?yàn)樘匀涣耍匀欢痪凸淞讼氯?，因?yàn)樘詫毮艹掷m(xù)給我推薦我感興趣的商品，我只會被吸引著無限瀏覽下去。

所以好的設(shè)計(jì)不是把步驟減到最少，而是是否滿足了用戶的需求。淘寶通過智能化推薦可以持續(xù)推薦用戶想要的商品，用戶沉浸在自己感興趣的商品瀏覽中，甚至都沒感覺到多出來這樣的一個(gè)步驟，因?yàn)橛脩舻男枨笫亲约合矚g的商品而不是讓我少跳轉(zhuǎn)一步。

那么拓展性又該如何解釋？

舉個(gè)簡單的例子：大家應(yīng)該都熟悉積木這種玩具，沒玩過肯定也見過，積木就是最有拓展性的玩具之一。無論積木被搭成啥形狀，都能隨時(shí)添加一塊進(jìn)去與原有的結(jié)構(gòu)形成一個(gè)整體而毫不違和——這就是拓展性。

那么在互聯(lián)網(wǎng)應(yīng)用中的拓展性如何理解？

其實(shí)道理一樣，評估交互架構(gòu)拓展性主要就看方不方便往里邊加?xùn)|西。

為什么要考慮拓展性呢？

因?yàn)楫a(chǎn)品迭代過程中必定會新增很多功能，在新增的時(shí)候大部分時(shí)候?yàn)榱斯?jié)約成本快速上線驗(yàn)證效果，我們往往很少完全獨(dú)立開拓一個(gè)模塊來承載這些功能，而是會在原有的布局上添加入口。

這時(shí)候就需要讓這個(gè)新功能更好地融入到已有的設(shè)計(jì)中去，常見的宮格和列表模式都是拓展性比較好的交互架構(gòu)。

3. 易操作和拓展性的平衡

魚和熊掌不可兼得的道理大家都懂，設(shè)計(jì)的時(shí)候也一樣，做事兒總得有取舍，怎么取舍關(guān)鍵在于我們的目標(biāo)是什么，如何對易操作性和拓展性進(jìn)行取舍？

它倆不是不能共存，而是需要有一個(gè)側(cè)重點(diǎn)，設(shè)計(jì)的時(shí)候要考慮到底是易操作性更重要還是拓展性更重要。比如下面的三張APP截圖，分別標(biāo)識了拓展性和易操作性的分?jǐn)?shù)。

可以看到上面的三種分類結(jié)構(gòu)，分別為平鋪式、下拉菜單宮格式、側(cè)邊菜單切換式：

第一張截圖拓展性弱了些，因?yàn)楫?dāng)二級分類超過6個(gè)，UI將可能面臨重設(shè)計(jì)；
第二張APP截圖易操作性又弱了些，因?yàn)檫@是一個(gè)下拉彈窗，用戶的觸達(dá)步驟多了一步；
第三張截圖的拓展性和可操作性都不錯(cuò)，切換便捷，如果需要新增分類甚至都不需要UI設(shè)計(jì)。

這時(shí)候你可能就會問了，如此這般，設(shè)計(jì)的時(shí)候選擇可操作性和拓展性都最好的不就成了嘛！也不成，為啥？

因?yàn)榧軜?gòu)設(shè)計(jì)必須考慮實(shí)際情況，不能生搬硬套，也就是必須得“因地制宜”。還拿上面第一張截圖，應(yīng)用分類界面，對于APP應(yīng)用商店的分類來說，這顯然是一個(gè)相對固定的分類，短時(shí)間不會刪減分類，所以可以按照固定的數(shù)量來進(jìn)行設(shè)計(jì)。

第三張截圖是政府服務(wù)的分類，我做過類似的項(xiàng)目，服務(wù)的分類多且雜，而且不同的城市分類還會不一樣，全靠后臺創(chuàng)建。這時(shí)候前臺的架構(gòu)設(shè)計(jì)就需要強(qiáng)大的可拓展性才能滿足需求。截圖里面的側(cè)邊菜單切換式就能很好滿足這種情況，后臺新增分類的時(shí)候前臺只需要按照既定的架構(gòu)排列即可。

二、主題和目的是否清晰

先明確下“主題和目的清晰”的目標(biāo)是什么。聽起來有點(diǎn)繞，其實(shí)就是要讓用戶在 3s 內(nèi)知道我在哪，我能干什么。

你想你逛商場的時(shí)候，經(jīng)過一家店鋪，如果這家店里掛了很多衣服但同時(shí)衣服旁邊還擺著很多餐桌碗筷。你肯定會疑惑且大概率不會進(jìn)去。因?yàn)檫@家店鋪的給人的未知感太強(qiáng)了，不知道它想干啥。

人總是傾向于穩(wěn)定，害怕不確定性，你想想你平時(shí)做事是不是這樣的心理？做產(chǎn)品也一樣，一個(gè)頁面的主題和目的必須清晰，讓用戶來了之后才知道自己能干點(diǎn)啥。

1. 清晰的主題

《支付寶體驗(yàn)設(shè)計(jì)精髓》里面說過一個(gè)設(shè)計(jì)理念：一個(gè)頁面只完成一件重要的事情，不重要的事情可以隱藏甚至去掉，為什么？

因?yàn)檫@樣做可以保證用戶專注地完成一件事情，而這件事情就是我們想要表達(dá)給用戶的最重要的主題。突出這個(gè)最重要的主題而把其它干擾元素隱藏或去掉，就是讓頁面主題更清晰的最重要的手段。畢竟不管怎么弱化都不如隱藏或去掉來得有效，突出頁面主題的手段有哪些？

我總結(jié)了幾個(gè)方法：

1）對比

對比是非常常見的突出頁面主題的方法，因?yàn)楹芏鄷r(shí)候我們不得不向產(chǎn)品目標(biāo)妥協(xié)，需要把一些功能外露，這時(shí)候就需要利用對比的手法讓用戶的注意力聚焦在最重要的主題上。

常用的對比手法有大小對比和層級對比：

可以看到上面一張圖，利用對比突出主題，圖中就列舉了大小對比和層級對比。

第一張圖給操作區(qū)域增加背景陰影，提升此版塊在Z軸上的高度，從空間上與其它內(nèi)容做對比。
第二張圖頭部區(qū)域通過增加版塊面積和增大文字大小的方式來突出頁面主題，告訴用戶還有多少錢沒還。
第三張圖通過增大文字和對底部使用主色的方式來突出主題。

2）隱藏

不重要的內(nèi)容需要隱藏，比如幫助事項(xiàng)、權(quán)益說明、用戶協(xié)議等信息。這類信息對主題影響不大但是不可缺少，用戶需要的時(shí)候會主動去點(diǎn)擊查看。

3）去掉

對于去掉頁面哪些元素需要結(jié)合實(shí)際情況來判定，和具體業(yè)務(wù)有關(guān)，有時(shí)候有些內(nèi)容可能不適合放在頁面里，但是為了完成我們的產(chǎn)品目標(biāo)，也不得不放。

2. 清晰的目標(biāo)

做任何事兒都需要有目標(biāo)（目的），產(chǎn)品設(shè)計(jì)同樣需要目標(biāo)，否則用戶為啥用你的產(chǎn)品呢？目標(biāo)是需求定的，比如登錄流程，目標(biāo)就是讓用戶成功登錄，評估目標(biāo)實(shí)現(xiàn)與否的指標(biāo)可以是登錄成功率。

三、信息層級是否清晰

信息層級的清晰與否主要體現(xiàn)在結(jié)構(gòu)層、框架層和表現(xiàn)層，前期通過交互設(shè)計(jì)的結(jié)構(gòu)搭建，配合后期視覺上的優(yōu)化，最終形成一個(gè)完整而清晰的信息架構(gòu)，如何才能設(shè)計(jì)出一個(gè)清晰的信息層級？

有很多設(shè)計(jì)法則可供我們使用，比如格式塔原理、神器數(shù)字7±2法則等等，這些法則可以專門開一篇文章來寫，這里就舉幾個(gè)例子說明一下。

可以看到上圖中第一張APP截圖使用了相似性原理。

因?yàn)樗鼈兊牟季窒嗤?，所以用戶會覺得這是類似的信息，試想一下，如果同樣是醫(yī)療保險(xiǎn)的內(nèi)容，上一個(gè)布局和一下個(gè)布局不一樣，這不僅會讓用戶不知所措也會讓用戶的視線反復(fù)跳轉(zhuǎn)。

因?yàn)椴榭搭愃频男畔⒌臅r(shí)候需要重新尋找此信息的位置，比如上一卡片中價(jià)格放在右邊，而下一卡片價(jià)格卻放在了左邊，勢必會引發(fā)混亂，而第二張APP截圖使用了背景/主體原理。

也就是人們自然而然會覺得兩個(gè)重疊的物體，上面那個(gè)小物體是背景上的主體，移動產(chǎn)品中運(yùn)用得較多的是彈窗，當(dāng)彈窗出現(xiàn)時(shí)，用戶就知道需要對彈窗上的內(nèi)容進(jìn)行操作，而不會去操作彈窗覆蓋的內(nèi)容。

下面再講一下“共同命運(yùn)”這一原理，看下面這張GIF圖，會更加形象。

可以看到GIF圖中，我用鼠標(biāo)框選多個(gè)文件后一起拖動，框選的文件會一起移動，我可以批量進(jìn)行刪除操作，那么為什么我會覺得我框選的內(nèi)容可以一起操作呢？

因?yàn)槲铱蜻x它們后，它們可以一起移動，所以我覺得它們是一組的，就應(yīng)該統(tǒng)一行動。這就是共同命運(yùn)原理：一起運(yùn)動的物體會被感知為一組或者有聯(lián)系。

是不是覺得這些東西都是習(xí)以為常的“它們一起移動肯定是一組的呀！”。正是這些讓我們習(xí)以為常的東西，我們才更要去深究它們背后的原理，這樣才能跳出慣性思維做設(shè)計(jì)。

不僅僅依靠經(jīng)驗(yàn)和直覺，而是依靠科學(xué)的原理來指導(dǎo)設(shè)計(jì)。

四、信息分類是否合理

何謂信息分類合理？怎么判斷是否合理？

我們需要先給合理定個(gè)目標(biāo)：我們的信息分類是否和用戶心里的分類標(biāo)準(zhǔn)一致，達(dá)到這個(gè)目標(biāo)就是合理的信息分類。因?yàn)槲覀冊O(shè)計(jì)的信息分類是給用戶使用的，只有符合他們的分類標(biāo)準(zhǔn)他們用起來才會覺得好用。

下面舉兩個(gè)例子：

可以看到截圖中包含兩種分類，第一種是對信息進(jìn)行分類，另一種是對功能入口進(jìn)行分類。它們依靠卡片容器來對信息進(jìn)行分類，都能很好地組織信息，而分類的維度也很清晰，用戶很容易理解。

比如【健康服務(wù)】和【常用工具】的分類就很清晰地把服務(wù)與工具分開來，這里有一個(gè)需要討論的地方是，常用工具里面的“我的預(yù)約”是否也可以放在【健康服務(wù)】里呢？因?yàn)槲业念A(yù)約也是醫(yī)療相關(guān)的預(yù)約，用戶找的時(shí)候是否會先去【健康服務(wù)】分類里找呢？

這個(gè)問題這篇文章無法解答，需要做具體的試驗(yàn)，比如做可用性試驗(yàn)，將這幾個(gè)功能交給用戶讓用戶來分類，看看他們心里真正的分類到底是什么，而不是自己揣測。

五、信息視覺是否流暢

如何檢查信息視覺是否流暢？

我們可以依靠“F型瀏覽”來檢查，也就是用戶閱讀的時(shí)候是以“F”的閱讀方向來對信息進(jìn)行掃描瀏覽，從左到右，從上到下，想想你平時(shí)的瀏覽習(xí)慣是不是這樣的？

如果我們的設(shè)計(jì)符合這個(gè)模型，那么用戶的閱讀視線會更舒適流暢，否則用戶的視線就容易上躥下跳。

我們設(shè)計(jì)的時(shí)候盡量遵循 F 型瀏覽原則來進(jìn)行設(shè)計(jì)，尤其是效率工具型產(chǎn)品，這類產(chǎn)品是以效率為主，盡量不要做和用戶習(xí)慣相悖的設(shè)計(jì)。下面看幾個(gè)實(shí)際APP的例子，來看看優(yōu)秀的產(chǎn)品是怎么做信息視線布局的。