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

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

1. 信息架構走查時具體要走查哪些內容？
2. 同需要注意哪些事項？
3. 如何思考這些走查點？

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

一、是否合理易操作

整體信息架構、導航、模塊入口是否合理，是否易操作，拓展性好。

1. 信息架構、入口是否合理

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

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

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

因為我使用的很多APP都會把掃一掃功能放在個人中心，這樣的設計已經(jīng)讓我形成了習慣，這是最符合我心理預期的模塊入口。

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

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

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

2. 易操作，拓展性好

何謂易操作？

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

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

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

你有想過為什么嗎？

拋開建筑設計原因不談，還有一個重要的因素：為了增加顧客停留時間。因為停留時間的增加就意味著顧客消費可能性增大，商場也就越熱鬧營收也能越好。而顧客雖然會覺得麻煩了一點，但是也不會因為這點麻煩就不去逛商場了。

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

因為產(chǎn)品目標不僅僅包含了體驗，更多的是盈利。

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

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

對于以“逛”為主的淘寶來說，這樣的交互方式不會讓用戶感覺厭惡。我初期甚至都沒發(fā)現(xiàn)這個改動，因為太自然了，自然而然就逛了下去，因為淘寶能持續(xù)給我推薦我感興趣的商品，我只會被吸引著無限瀏覽下去。

所以好的設計不是把步驟減到最少，而是是否滿足了用戶的需求。淘寶通過智能化推薦可以持續(xù)推薦用戶想要的商品，用戶沉浸在自己感興趣的商品瀏覽中，甚至都沒感覺到多出來這樣的一個步驟，因為用戶的需求是自己喜歡的商品而不是讓我少跳轉一步。

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

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

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

其實道理一樣，評估交互架構拓展性主要就看方不方便往里邊加東西。

為什么要考慮拓展性呢？

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

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

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

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

它倆不是不能共存，而是需要有一個側重點，設計的時候要考慮到底是易操作性更重要還是拓展性更重要。比如下面的三張APP截圖，分別標識了拓展性和易操作性的分數(shù)。

可以看到上面的三種分類結構，分別為平鋪式、下拉菜單宮格式、側邊菜單切換式：

• 第一張截圖拓展性弱了些，因為當二級分類超過6個，UI將可能面臨重設計；
• 第二張APP截圖易操作性又弱了些，因為這是一個下拉彈窗，用戶的觸達步驟多了一步；
• 第三張截圖的拓展性和可操作性都不錯，切換便捷，如果需要新增分類甚至都不需要UI設計。

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

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

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

二、主題和目的是否清晰

先明確下“主題和目的清晰”的目標是什么。聽起來有點繞，其實就是要讓用戶在 3s 內知道我在哪，我能干什么。

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

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

1. 清晰的主題

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

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

我總結了幾個方法：

1）對比

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

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

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

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

2）隱藏

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

3）去掉

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

2. 清晰的目標

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

三、信息層級是否清晰

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

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

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

因為它們的布局相同，所以用戶會覺得這是類似的信息，試想一下，如果同樣是醫(yī)療保險的內容，上一個布局和一下個布局不一樣，這不僅會讓用戶不知所措也會讓用戶的視線反復跳轉。

因為查看類似的信息的時候需要重新尋找此信息的位置，比如上一卡片中價格放在右邊，而下一卡片價格卻放在了左邊，勢必會引發(fā)混亂，而第二張APP截圖使用了背景/主體原理。

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

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

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

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

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

不僅僅依靠經(jīng)驗和直覺，而是依靠科學的原理來指導設計。

四、信息分類是否合理

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

我們需要先給合理定個目標：我們的信息分類是否和用戶心里的分類標準一致，達到這個目標就是合理的信息分類。因為我們設計的信息分類是給用戶使用的，只有符合他們的分類標準他們用起來才會覺得好用。

下面舉兩個例子：

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

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

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

五、信息視覺是否流暢

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

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

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

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

可以看到，三張APP截圖中的信息整體看上去都是“F”型布局，瀏覽的時候視線是符合用戶習慣并且非常流暢的。平時大家可以多看看其他優(yōu)秀APP的排版布局，遇到不錯的布局就截圖保存起來。

我的習慣是保存在eagle里面，可以在另一篇文章里看看我是如何使用這款工具提升我的設計效率的。

關鍵點總結：

• 養(yǎng)成獨立思考的習慣；
• 合理的模塊入口一定是滿足用戶心理模型的，滿足用戶預期的；
• 讓用戶在 3s 內知道“我在哪，我能干什么”；
• 一個頁面只完成一件重要的事情，不重要的事情可以隱藏甚至去掉。

別走，還可以看看這些?

3 步教你打造屬于自己的交互走查表！

【萬字干貨】教你搞定90%的職場溝通！

動效設計如何完美對接開發(fā)？

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

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