全面易懂!寫給新手的信息架構(gòu)設(shè)計指南

2018-9-3    資深UI設(shè)計者


如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

很多產(chǎn)品設(shè)計師,在畫原型或者設(shè)計 UI 的時候癡迷于工具的使用,拿到需求文檔之后急于動手畫圖,忽略了信息架構(gòu)設(shè)計對于產(chǎn)品的作用。


信息架構(gòu)作為一個產(chǎn)品的骨架,是產(chǎn)品非常重要的一部分,它決定了一個產(chǎn)品

的布局和未來的發(fā)展方向以及用戶對一個產(chǎn)品的最初印象和整體體驗。毫不夸張的說,好的產(chǎn)品信息架構(gòu)是產(chǎn)品成功的一半。

那么到底什么是產(chǎn)品的信息架構(gòu)呢?該如何設(shè)計產(chǎn)品的信息架構(gòu)?如何評判一個產(chǎn)品信息架構(gòu)的好壞?我們接著往下看:

一、信息架構(gòu)的概念

讓我們來看一個例子:

一個飯店需要有哪些設(shè)施,如果你是飯店的老板如何合理的排布這些設(shè)施,可以讓客戶感覺很舒服的用餐,這個過程就是一個信息架構(gòu)的過程。他可以讓客戶對你的飯店產(chǎn)生好感,從而下次用餐的時候還會想到來你這里吃飯。

在排布飯店設(shè)施的過程中我們要遵循一些規(guī)范,比如用戶的習慣或者施工規(guī)范等,正是因為需要遵循這些規(guī)范,所以我們需要一個信息架構(gòu)來體現(xiàn)這些。

比較官方的信息架構(gòu)解釋是這樣的:信息架構(gòu)設(shè)計是對信息進行結(jié)構(gòu)、組織以及歸類的設(shè)計,好讓使用者與用戶容易使用與理解的一項藝術(shù)與科學。

簡單來說,信息架構(gòu)設(shè)計就是讓用戶可以 容易地理解你的產(chǎn)品是怎樣的。讓他們在使用你產(chǎn)品的時候可以更順利更自然。就像一進入飯店就會有一種感覺,門口是等餐的地方,進去就應(yīng)該吃飯,如果找洗手間一定不會往門口走,而會往深處走。這就是信息架構(gòu)的好處:他讓用戶使用同類產(chǎn)品時更容易上手和理解,讓產(chǎn)品更容易被接受。

二、為何需要信息架構(gòu)設(shè)計

那對于線上產(chǎn)品來說為什么需要合理的信息架構(gòu)呢?大家來看下邊3組 app 的 tab欄截圖。你能僅僅從 tab欄就看出這款 app 是什么類型的 app,如何使用嗎?

很明顯的,第一個是一款購物類 app,第二個是一款圖片社交類的 app,第三個是微信的 tab,雖然首頁名稱是微信,但是我相信如果把名稱換成「聊天」,你還是能認出這是微信的 tab欄。

從底部標簽欄就可以大致看出產(chǎn)品是用來干嘛的,這就是信息架構(gòu)的作用。一個合理的信息架構(gòu)可以讓產(chǎn)品非常容易被用戶理解,可以讓用戶第一眼對產(chǎn)品有一個簡單的認知,指導自己可以用產(chǎn)品做什么事,指導產(chǎn)品提供什么服務(wù)。

再看一組反例:

這三組 tab欄就讓人很困惑了,看了半天你也許根本不知道這幾款 app 是做什么用的,以及如何使用。如果你讓用戶很困惑,他會分分鐘拋棄你的 app。

所以信息架構(gòu)的核心目標是為用戶提供更好的體驗,獲得更高的留存率。

一款信息架構(gòu)良好的產(chǎn)品必然遵循以下兩個標準:

  • 讓用戶打開 app 的第一秒就知道這是一款什么 app,怎么用;
  • 用戶想要使用某一功能時,能夠第一時間找到。

我們通過這兩個標準來印證下上邊3個正面案例的信息架構(gòu):

相信你能很快速的識別出這款軟件的用途和用法,這就給提升留存提供了基礎(chǔ)。

那么如果信息架構(gòu)像架構(gòu)一個飯店一樣簡單,那么信息架構(gòu)為何需要設(shè)計?

因為你的實際產(chǎn)品功能可能有這么多:

畢竟我們不是支付寶,沒辦法把功能像豆腐塊一樣堆疊起來,我們需要一些科學的設(shè)計方法。

三、如何設(shè)計信息架構(gòu)

合理的信息架構(gòu)設(shè)計需要考慮5個步驟:

下面我來分步講解一下。

1. 了解用戶,場景,習慣

首先你的產(chǎn)品是給到用戶用,你當然要最大限度的了解你的用戶,我們先來看下一個概念:「心智模型」。

心智模型是經(jīng)由經(jīng)驗及學習,腦海中對某些事物發(fā)展的過程,所寫下的劇本。人類在經(jīng)歷或?qū)W習某些事件之后,會對事物的發(fā)展及變化,歸納出一些結(jié)論,然后像是寫劇本一樣,把這些經(jīng)驗濃縮成一本一本的劇本,等到重復(fù)或類似的事情再度發(fā)生,我們便不自覺的應(yīng)用這些先前寫好的劇本,來預(yù)測事物的發(fā)展變化。心智模型是你對事物運行發(fā)展的預(yù)測。再說得清楚一點,你「希望」事物將如何發(fā)展,并不是心智模型,但你「認為」事物將如何發(fā)展,就是你的心智模型了。

假設(shè)你從沒見過 iPad,而我剛遞給你一臺并告訴你可以用它來看書。在你打開 iPad 使用它之前,你頭腦里會有一個在 iPad 上如何閱讀的模型。你會假想書在 iPad 屏幕上是怎樣的,你可以做什么事情,比如翻頁或使用書簽,以及這些事情的大致做法。即使你以前從沒有使用過 iPad,你也有一個用 iPad 看書的「心智模型」。你頭腦里的心智模型的樣式和運作方式取決于很多因素。

用戶往往帶著以往使用 APP 的一些習慣來使用產(chǎn)品;線下做同一件事的習慣、生活習慣、心智模型等。要考慮哪些是可以創(chuàng)新的,哪些是用戶習慣,要在不妨礙用戶習慣的情況下作出更能讓用戶接受的創(chuàng)新。

你要考慮清楚4個問題:

用戶通常用你的產(chǎn)品做什么?

用戶用你的產(chǎn)品來做什么?用來看新聞還是用來聊天?一定要考慮清楚用戶的核心流程。從核心流程中提取信息架構(gòu)的基礎(chǔ)形式。

用戶用這類產(chǎn)品最關(guān)心什么?

用新聞app 時咨詢的真實性實效性,購物類app 精準搜索和售后功能,就是你的用戶關(guān)注點在哪里,這是一個很好的突破口。

用戶有哪些思維定式?

和用戶年齡身份相關(guān)的屬性,產(chǎn)品體驗符合相應(yīng)用戶的思維模式,心智模型,用戶就會比較容易接受。

用戶用什么類似的產(chǎn)品?

類似的產(chǎn)品也會帶來一些用戶習慣,迎合這些習慣也會讓用戶快速上手接受產(chǎn)品。

了解了你的用戶場景和使用習慣之后你會知道如何做出符合用戶心智的,容易被接受的產(chǎn)品,你不需要擔心做的產(chǎn)品沒有差異性或者沒有競爭力,我們可以在核心流程之外做出創(chuàng)新點,讓用戶覺得你的產(chǎn)品又好用又有些不一樣。

2. 了解業(yè)務(wù)

這里的業(yè)務(wù)包括與產(chǎn)品接觸的內(nèi)部及外部的人提出的需求,比如公司的運營,市場,銷售,BD,公司的外部合作伙伴等。

這些人的需求我們也要收集,比如運營人員想更方便的管理注冊用戶,銷售想更多的添加廣告位,市場推廣人員要求能統(tǒng)計不同渠道帶來產(chǎn)品的下載量,注冊數(shù),活躍數(shù),合作伙伴需要進行賬號,內(nèi)容互通等,總之只要與業(yè)務(wù)有關(guān)的人的意見,盡可能的在產(chǎn)品設(shè)計前多收集,即使做不了,也告訴他們原因,要不然產(chǎn)品上線后就等著被他們吐槽吧。

3. 調(diào)研競品的信息架構(gòu)

在做一款 app 時,我們面臨了和無數(shù)競品爭搶用戶的局面,這時候分析競品就非常必要,我們需要在知己知彼的前提下,做好核心流程功能,再思考如何在差異功能上做好突破。

首先我們需要把競品功能梳理成思維導圖:

其實思維導圖就是信息架構(gòu)比較基礎(chǔ)的形式了,但是光有思維導圖沒用,我們需要對思維導圖進行分析。

我以前做過的一款人脈 app 為例,當初對比了領(lǐng)英、赤兔和脈脈,分析了這4款 app 的思維導圖后得出的共性和差異點:

共性就是要符合用戶使用習慣的地方,如果你調(diào)研的3-5個產(chǎn)品都這么做了,很可能這里是產(chǎn)生用戶習慣的地方,是我們需要去遵循的,這是獲得用戶好感度的基礎(chǔ)。

分析產(chǎn)品時你一定也會得出一些產(chǎn)品差異的地方,而這些差異就是你的產(chǎn)品競爭點,也是別人用你的 app 不用其他 app 的理由。比如人脈軟件都會有社交相關(guān)的功能,但是脈脈會比較注重職場招聘、直播等互聯(lián)網(wǎng)職場人比較關(guān)心的點,這樣對應(yīng)的用戶群體就比較會吃你這套,會提升用戶的粘性。

相信你在梳理了競品的信息架構(gòu),總結(jié)了共性和差異點之后對產(chǎn)品的信息架構(gòu)已經(jīng)有一個比較清晰的認知了,在做自己產(chǎn)品信息架構(gòu)的時候也會更胸有成竹。但是最后還有一件事我們可以做,就是對我們的要做的產(chǎn)品功能做卡片分類。

4. 卡片分類

卡片分類法是我們工作中常用到的一種方法,它可以在用戶側(cè)再一次印證和檢測我們的產(chǎn)品信息架構(gòu)。

卡片分類法就是讓用戶對功能卡片進行分類,組織,并給相關(guān)功能的集合重新定義名稱的一種自下而上的整理方法。

說直白點就是準備一堆卡片,在這些卡片上寫上你所需要包含的功能名稱,然后給到用戶側(cè),讓用戶進行分類,讓用戶進行組織,來了解用戶到底覺得這些功能應(yīng)該怎么合并怎么歸類的一種方法。它可以幫助你站在用戶角度去了解用戶是怎么認定這些功能的,也可以在卡片分類法的過程中更加了解用戶是怎么想的。

卡片分類法大概的步驟和注意點是這樣的:

卡片分類法最終會產(chǎn)出這樣的一個樹形圖:

5. 產(chǎn)出信息架構(gòu)

其實到這一步信息架構(gòu)大概的雛形已經(jīng)有了,你可以用 axure 或者類似 mindnode 的軟件把信息架構(gòu)梳理出來。

接下來你要對信息架構(gòu)進行重要性分級,這樣在產(chǎn)品開發(fā)的前期可以幫助梳理產(chǎn)品研發(fā)的優(yōu)先級,集中精力解決用戶的最大痛點。在產(chǎn)出頁面時也可以更好的把控頁面元素的大小層級,位置關(guān)系等。

最后你需要注意層和度的平衡:層一般不超過5層,超過操作困難。度過多會讓用戶認知成本增加,容易找不到想找的內(nèi)容。這里的度指的是同一頁面展示的信息量。


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


日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔