交互設(shè)計(jì)筆記(中):信息架構(gòu)設(shè)計(jì)

8 評論 29721 瀏覽 176 收藏 10 分鐘

做好信息架構(gòu)是每個(gè)交互設(shè)計(jì)師必須掌握的一門技能,信息架構(gòu)是產(chǎn)品的骨架,決定了一個(gè)產(chǎn)品的生長方向、產(chǎn)品的布局,以及用戶對一個(gè)產(chǎn)品的初步印象和整體體驗(yàn)。由于信息架構(gòu)的復(fù)雜性,需要交互設(shè)計(jì)師擁有非常強(qiáng)的邏輯思維能力和完善的整體思考能力。所以,為了完成一套完整的信息架構(gòu),須掌握一門科學(xué)的設(shè)計(jì)方法。

從2018年10月發(fā)布交互筆記(上)到現(xiàn)在已經(jīng)快9個(gè)月了,畢業(yè)、工作So many things to do啊,好吧,還是有拖延癥……終于整理了之前的學(xué)習(xí)筆記,希望通過分享的方式,使自己形成系統(tǒng)化的交互知識體系。切入正題,信息架構(gòu)可從準(zhǔn)備和產(chǎn)出兩個(gè)階段來進(jìn)行設(shè)計(jì)。

1. 信息架構(gòu)設(shè)計(jì)的前期工作

1.1?尋找:產(chǎn)品的共性(要遵循的用戶習(xí)慣)+差異(設(shè)計(jì)機(jī)會(huì)點(diǎn))

首先和用研團(tuán)隊(duì)了解用戶(Persona)和用戶場景(如何使用產(chǎn)品),提取用戶的習(xí)慣。

設(shè)計(jì)信息架構(gòu)時(shí),一方面須尊重用戶的習(xí)慣,不要在不必要的地方體現(xiàn)差別。

  • 思考用戶用產(chǎn)品做什么事;
  • 用戶用這類產(chǎn)品最關(guān)心的是什么;
  • 用戶有哪些思維定式;
  • 用戶用過什么類似的產(chǎn)品等。

如圖片社交類產(chǎn)品存在一些共性,發(fā)布自己喜歡的圖片,關(guān)注朋友的動(dòng)態(tài)并結(jié)交朋友是用戶要做的事和最關(guān)心的事情,所以剛進(jìn)入APP都會(huì)定位在關(guān)注這一模塊,關(guān)注的人往往是最重要的東西。底部導(dǎo)航中間都會(huì)設(shè)置發(fā)布按鈕,雖然樣式不同,但都起到強(qiáng)化發(fā)布的作用。由于用戶的思維定式(用戶覺得應(yīng)該有什么),都有消息和個(gè)人中心的存在。

另一方面要考慮創(chuàng)新。

如在發(fā)現(xiàn)(或廣場)這一頁,產(chǎn)品有較大的區(qū)別,有的直接把圖片鋪出來,有的體現(xiàn)內(nèi)容,有的體現(xiàn)標(biāo)簽,因?yàn)樵谶@一頁,不同產(chǎn)品可能有不同側(cè)重點(diǎn),所以會(huì)做出不一樣的設(shè)計(jì)。這就是產(chǎn)品的差異,可以創(chuàng)新的地方,設(shè)計(jì)時(shí)想那些是可以創(chuàng)新的,哪些需要遵循用戶的習(xí)慣,其實(shí)創(chuàng)新也是和習(xí)慣相關(guān)的,只有了解用戶習(xí)慣后,才能在不妨礙用戶的情況下做出合理的創(chuàng)新。

1.2 輸出物:競品信息架構(gòu)樹狀圖(3個(gè))+用戶信息架構(gòu)樹狀圖(用戶心智模型)

調(diào)研競品的信息架構(gòu)是產(chǎn)品設(shè)計(jì)中非常重要的成分,便于交互設(shè)計(jì)師了解現(xiàn)在所面臨的市場和面對的目標(biāo)用戶等。

設(shè)計(jì)信息架構(gòu)前,可以找3-5個(gè)同類競品,分析并用Mindmap(思維導(dǎo)圖)整理他們的信息架構(gòu),制作思維導(dǎo)圖的工具有很多,如Mindmanager、X-Mind、Mindline等,可以做出如圖所示的樹狀圖。

樹是體現(xiàn)信息架構(gòu)的最佳形式,拼多多APP由首頁、推薦、搜索、聊天和個(gè)人中心組成,在每一模塊下又可分裂出其他的元素,這樣層層展開是最好的體現(xiàn)信息架構(gòu)的方式。

得到3-5個(gè)競品的信息架構(gòu)樹狀圖后,需分析共性和差異。找到競品在哪些地方存在共同點(diǎn)(和之前了解用戶習(xí)慣一樣),就是交互設(shè)計(jì)師需要遵循的用戶習(xí)慣。因?yàn)楦偲房赡苁褂脩粜纬闪肆?xí)慣,一旦改變會(huì)使用戶不適,如所有的通訊軟件都有消息和聯(lián)系人,并放在重要的部分,因?yàn)榘l(fā)消息、尋找聯(lián)系人是產(chǎn)品的重中之重。

其次是找到哪些地方存在差異,這些差異就是設(shè)計(jì)機(jī)會(huì)點(diǎn),也就是創(chuàng)新點(diǎn),如社交產(chǎn)品的發(fā)現(xiàn)頁,有非常多的做法,可以突出不一樣的元素或做不一樣的組織架構(gòu),每個(gè)產(chǎn)品都可以發(fā)揮自己的創(chuàng)意。

了解競品后,可用卡片分類法進(jìn)一步了解用戶的心智模型,即讓用戶對功能卡片進(jìn)行分類、組織,并給相應(yīng)功能的集合重新定義名稱的一種自下而上的整理方法。簡言之,是用戶對功能卡片進(jìn)行歸類的方法,站在用戶的角度,理解用戶如何認(rèn)定這些功能的。

需要準(zhǔn)備的東西和執(zhí)行整個(gè)流程如圖所示,其中需注意功能卡片的提取,是功能或界面的名字,如聯(lián)系人名片、對話窗口,來自于現(xiàn)有信息架構(gòu)樹的樹葉(無子樹部分,避免發(fā)生包含關(guān)系)。不要過度細(xì)分,如不細(xì)分列表單元格內(nèi)的元素??ㄆ瑪?shù)量少于30張,卡片分類法結(jié)束后,整理并輸出符合用戶心智模型的信息架構(gòu)樹狀圖。

2. 產(chǎn)出產(chǎn)品信息架構(gòu)設(shè)計(jì)

利用Mindmap整合前期調(diào)研信息和結(jié)果,對功能進(jìn)行重要性分級,再將整合的信息翻譯到Axure站點(diǎn)地圖中,考慮信息架構(gòu)和交互構(gòu)圖的關(guān)系。

輸出物:自己產(chǎn)品的樹狀圖(層與度的平衡)+重要性分級+Axure站點(diǎn)地圖

在了解用戶習(xí)慣,競品信息架構(gòu)和用戶心智模型的基礎(chǔ)上,根據(jù)共性和差異,進(jìn)行信息組織和功能整合,用Mindmap產(chǎn)出自己的信息架構(gòu)樹狀圖,要注意的是尋找層和度的平衡。

  • 層=信息架構(gòu)樹的深度(剛進(jìn)入產(chǎn)品到找到一個(gè)功能需要幾個(gè)頁面),一般不超過5個(gè)層級,否則會(huì)使用戶操作困難;
  • 度=某一節(jié)點(diǎn)子節(jié)點(diǎn)的數(shù)量(一級導(dǎo)航下功能數(shù)),如果某一層級(頁面)有過多的內(nèi)容,會(huì)增加用戶認(rèn)知成本,找不到想找的內(nèi)容。

整合完大量信息和功能后,還要對信息架構(gòu)做重要性分級,跟PM討論哪些功能是重要的,哪些是次要的,通過數(shù)字對每一層級功能的重要性進(jìn)行分級。在落地到頁面設(shè)計(jì)時(shí),可以明確哪些功能應(yīng)該突出設(shè)計(jì),哪些可以設(shè)計(jì)相對比較次要。

如微博首頁(第一層級)的信息和功能非常多,有搜索、側(cè)邊欄(熱門、特別關(guān)注、好友圈等來體現(xiàn)不同的微博內(nèi)容)、發(fā)布內(nèi)容、廣告、個(gè)人信息、明星勢力榜等等。

但這些內(nèi)容的層次和主次不一樣,有些部分放的非常大,如關(guān)注的人所發(fā)布的微博和自己發(fā)布內(nèi)容的發(fā)布框。而有些內(nèi)容相對比較次要,放的比較靠邊,如個(gè)人信息和明星勢力榜。所以,在做信息架構(gòu)時(shí),雖然這些內(nèi)容放置在同一層級,但它的重要性是不一樣的。

3. 總結(jié)

信息架構(gòu)設(shè)計(jì)的關(guān)鍵是對產(chǎn)品骨架的思考,在尊重用戶習(xí)慣的前提下,尋找產(chǎn)品的創(chuàng)新點(diǎn)。構(gòu)建信息樹時(shí)注意層與度的平衡,區(qū)分重要性??捎肁xure站點(diǎn)地圖來體現(xiàn)信息架構(gòu),Axure是常用的交互設(shè)計(jì)工具,一層包一層的結(jié)構(gòu)非常符合樹狀圖的需求。

所以,將整合的信息(思維導(dǎo)圖)翻譯到Axure站點(diǎn)地圖中,能幫助交互設(shè)計(jì)師更好地在Axure里完成產(chǎn)品的頁面設(shè)計(jì)。

相關(guān)閱讀

交互設(shè)計(jì)筆記(上):設(shè)計(jì)需求分析

 

本文由 @產(chǎn)品負(fù)一歲 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 還記得我不?

    回復(fù)
    1. 記得,我的孩子

      來自湖北 回復(fù)
  2. 不錯(cuò),網(wǎng)易云交互設(shè)計(jì)課程的筆記,總結(jié)的比我細(xì)致,還能分享寫出來,我就在本子上如此簡單的寫了以下4點(diǎn):
    1.了解用戶,場景,習(xí)慣,尊重用戶的習(xí)慣(這里要思考幾個(gè)問題,user do what,care? thinking pattern,similiar product)
    2.了解業(yè)務(wù)需求
    3.調(diào)研3-5個(gè)產(chǎn)品的信息架構(gòu)
    4.卡片分類法

    來自廣東 回復(fù)
    1. 你的精煉 ??

      來自江蘇 回復(fù)
  3. 靚女,時(shí)過境遷,還記得我不,愿實(shí)現(xiàn)自己的理想!

    來自廣東 回復(fù)
    1. 哈哈,傳資料的童鞋喲,加油~

      來自江蘇 回復(fù)
  4. ??dei,信息量有點(diǎn)少

    來自廣東 回復(fù)
  5. 首先和用研團(tuán)隊(duì)了解用戶(Persona)

    來自廣東 回復(fù)