2018-9-3 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
很多產(chǎn)品設(shè)計(jì)師，在畫(huà)原型或者設(shè)計(jì) UI 的時(shí)候癡迷于工具的使用，拿到需求文檔之后急于動(dòng)手畫(huà)圖，忽略了信息架構(gòu)設(shè)計(jì)對(duì)于產(chǎn)品的作用。
信息架構(gòu)作為一個(gè)產(chǎn)品的骨架，是產(chǎn)品非常重要的一部分，它決定了一個(gè)產(chǎn)品
的布局和未來(lái)的發(fā)展方向以及用戶(hù)對(duì)一個(gè)產(chǎn)品的最初印象和整體體驗(yàn)。毫不夸張的說(shuō)，好的產(chǎn)品信息架構(gòu)是產(chǎn)品成功的一半。
那么到底什么是產(chǎn)品的信息架構(gòu)呢？該如何設(shè)計(jì)產(chǎn)品的信息架構(gòu)？如何評(píng)判一個(gè)產(chǎn)品信息架構(gòu)的好壞？我們接著往下看：
讓我們來(lái)看一個(gè)例子：
一個(gè)飯店需要有哪些設(shè)施，如果你是飯店的老板如何合理的排布這些設(shè)施，可以讓客戶(hù)感覺(jué)很舒服的用餐，這個(gè)過(guò)程就是一個(gè)信息架構(gòu)的過(guò)程。他可以讓客戶(hù)對(duì)你的飯店產(chǎn)生好感，從而下次用餐的時(shí)候還會(huì)想到來(lái)你這里吃飯。
在排布飯店設(shè)施的過(guò)程中我們要遵循一些規(guī)范，比如用戶(hù)的習(xí)慣或者施工規(guī)范等，正是因?yàn)樾枰裱@些規(guī)范，所以我們需要一個(gè)信息架構(gòu)來(lái)體現(xiàn)這些。
比較官方的信息架構(gòu)解釋是這樣的：信息架構(gòu)設(shè)計(jì)是對(duì)信息進(jìn)行結(jié)構(gòu)、組織以及歸類(lèi)的設(shè)計(jì)，好讓使用者與用戶(hù)容易使用與理解的一項(xiàng)藝術(shù)與科學(xué)。
簡(jiǎn)單來(lái)說(shuō)，信息架構(gòu)設(shè)計(jì)就是讓用戶(hù)可以 容易地理解你的產(chǎn)品是怎樣的。讓他們?cè)谑褂媚惝a(chǎn)品的時(shí)候可以更順利更自然。就像一進(jìn)入飯店就會(huì)有一種感覺(jué)，門(mén)口是等餐的地方，進(jìn)去就應(yīng)該吃飯，如果找洗手間一定不會(huì)往門(mén)口走，而會(huì)往深處走。這就是信息架構(gòu)的好處：他讓用戶(hù)使用同類(lèi)產(chǎn)品時(shí)更容易上手和理解，讓產(chǎn)品更容易被接受。
那對(duì)于線上產(chǎn)品來(lái)說(shuō)為什么需要合理的信息架構(gòu)呢？大家來(lái)看下邊3組 app 的 tab欄截圖。你能僅僅從 tab欄就看出這款 app 是什么類(lèi)型的 app，如何使用嗎？
很明顯的，第一個(gè)是一款購(gòu)物類(lèi) app，第二個(gè)是一款圖片社交類(lèi)的 app，第三個(gè)是微信的 tab，雖然首頁(yè)名稱(chēng)是微信，但是我相信如果把名稱(chēng)換成「聊天」，你還是能認(rèn)出這是微信的 tab欄。
從底部標(biāo)簽欄就可以大致看出產(chǎn)品是用來(lái)干嘛的，這就是信息架構(gòu)的作用。一個(gè)合理的信息架構(gòu)可以讓產(chǎn)品非常容易被用戶(hù)理解，可以讓用戶(hù)第一眼對(duì)產(chǎn)品有一個(gè)簡(jiǎn)單的認(rèn)知，指導(dǎo)自己可以用產(chǎn)品做什么事，指導(dǎo)產(chǎn)品提供什么服務(wù)。
再看一組反例：
這三組 tab欄就讓人很困惑了，看了半天你也許根本不知道這幾款 app 是做什么用的，以及如何使用。如果你讓用戶(hù)很困惑，他會(huì)分分鐘拋棄你的 app。
所以信息架構(gòu)的核心目標(biāo)是為用戶(hù)提供更好的體驗(yàn)，獲得更高的留存率。
一款信息架構(gòu)良好的產(chǎn)品必然遵循以下兩個(gè)標(biāo)準(zhǔn)：
我們通過(guò)這兩個(gè)標(biāo)準(zhǔn)來(lái)印證下上邊3個(gè)正面案例的信息架構(gòu)：
相信你能很快速的識(shí)別出這款軟件的用途和用法，這就給提升留存提供了基礎(chǔ)。
那么如果信息架構(gòu)像架構(gòu)一個(gè)飯店一樣簡(jiǎn)單，那么信息架構(gòu)為何需要設(shè)計(jì)？
因?yàn)槟愕膶?shí)際產(chǎn)品功能可能有這么多：
畢竟我們不是支付寶，沒(méi)辦法把功能像豆腐塊一樣堆疊起來(lái)，我們需要一些科學(xué)的設(shè)計(jì)方法。
合理的信息架構(gòu)設(shè)計(jì)需要考慮5個(gè)步驟：
下面我來(lái)分步講解一下。
首先你的產(chǎn)品是給到用戶(hù)用，你當(dāng)然要最大限度的了解你的用戶(hù)，我們先來(lái)看下一個(gè)概念：「心智模型」。
心智模型是經(jīng)由經(jīng)驗(yàn)及學(xué)習(xí)，腦海中對(duì)某些事物發(fā)展的過(guò)程，所寫(xiě)下的劇本。人類(lèi)在經(jīng)歷或?qū)W習(xí)某些事件之后，會(huì)對(duì)事物的發(fā)展及變化，歸納出一些結(jié)論，然后像是寫(xiě)劇本一樣，把這些經(jīng)驗(yàn)濃縮成一本一本的劇本，等到重復(fù)或類(lèi)似的事情再度發(fā)生，我們便不自覺(jué)的應(yīng)用這些先前寫(xiě)好的劇本，來(lái)預(yù)測(cè)事物的發(fā)展變化。心智模型是你對(duì)事物運(yùn)行發(fā)展的預(yù)測(cè)。再說(shuō)得清楚一點(diǎn)，你「希望」事物將如何發(fā)展，并不是心智模型，但你「認(rèn)為」事物將如何發(fā)展，就是你的心智模型了。
假設(shè)你從沒(méi)見(jiàn)過(guò) iPad，而我剛遞給你一臺(tái)并告訴你可以用它來(lái)看書(shū)。在你打開(kāi) iPad 使用它之前，你頭腦里會(huì)有一個(gè)在 iPad 上如何閱讀的模型。你會(huì)假想書(shū)在 iPad 屏幕上是怎樣的，你可以做什么事情，比如翻頁(yè)或使用書(shū)簽，以及這些事情的大致做法。即使你以前從沒(méi)有使用過(guò) iPad，你也有一個(gè)用 iPad 看書(shū)的「心智模型」。你頭腦里的心智模型的樣式和運(yùn)作方式取決于很多因素。
用戶(hù)往往帶著以往使用 APP 的一些習(xí)慣來(lái)使用產(chǎn)品；線下做同一件事的習(xí)慣、生活習(xí)慣、心智模型等。要考慮哪些是可以創(chuàng)新的，哪些是用戶(hù)習(xí)慣，要在不妨礙用戶(hù)習(xí)慣的情況下作出更能讓用戶(hù)接受的創(chuàng)新。
你要考慮清楚4個(gè)問(wèn)題：
用戶(hù)通常用你的產(chǎn)品做什么？
用戶(hù)用你的產(chǎn)品來(lái)做什么？用來(lái)看新聞還是用來(lái)聊天？一定要考慮清楚用戶(hù)的核心流程。從核心流程中提取信息架構(gòu)的基礎(chǔ)形式。
用戶(hù)用這類(lèi)產(chǎn)品最關(guān)心什么？
用新聞app 時(shí)咨詢(xún)的真實(shí)性實(shí)效性，購(gòu)物類(lèi)app 精準(zhǔn)搜索和售后功能，就是你的用戶(hù)關(guān)注點(diǎn)在哪里，這是一個(gè)很好的突破口。
用戶(hù)有哪些思維定式？
和用戶(hù)年齡身份相關(guān)的屬性，產(chǎn)品體驗(yàn)符合相應(yīng)用戶(hù)的思維模式，心智模型，用戶(hù)就會(huì)比較容易接受。
用戶(hù)用什么類(lèi)似的產(chǎn)品？
類(lèi)似的產(chǎn)品也會(huì)帶來(lái)一些用戶(hù)習(xí)慣，迎合這些習(xí)慣也會(huì)讓用戶(hù)快速上手接受產(chǎn)品。
了解了你的用戶(hù)場(chǎng)景和使用習(xí)慣之后你會(huì)知道如何做出符合用戶(hù)心智的，容易被接受的產(chǎn)品，你不需要擔(dān)心做的產(chǎn)品沒(méi)有差異性或者沒(méi)有競(jìng)爭(zhēng)力，我們可以在核心流程之外做出創(chuàng)新點(diǎn)，讓用戶(hù)覺(jué)得你的產(chǎn)品又好用又有些不一樣。
這里的業(yè)務(wù)包括與產(chǎn)品接觸的內(nèi)部及外部的人提出的需求，比如公司的運(yùn)營(yíng)，市場(chǎng)，銷(xiāo)售，BD，公司的外部合作伙伴等。
這些人的需求我們也要收集，比如運(yùn)營(yíng)人員想更方便的管理注冊(cè)用戶(hù)，銷(xiāo)售想更多的添加廣告位，市場(chǎng)推廣人員要求能統(tǒng)計(jì)不同渠道帶來(lái)產(chǎn)品的下載量，注冊(cè)數(shù)，活躍數(shù)，合作伙伴需要進(jìn)行賬號(hào)，內(nèi)容互通等，總之只要與業(yè)務(wù)有關(guān)的人的意見(jiàn)，盡可能的在產(chǎn)品設(shè)計(jì)前多收集，即使做不了，也告訴他們?cè)颍蝗划a(chǎn)品上線后就等著被他們吐槽吧。
在做一款 app 時(shí)，我們面臨了和無(wú)數(shù)競(jìng)品爭(zhēng)搶用戶(hù)的局面，這時(shí)候分析競(jìng)品就非常必要，我們需要在知己知彼的前提下，做好核心流程功能，再思考如何在差異功能上做好突破。
首先我們需要把競(jìng)品功能梳理成思維導(dǎo)圖：
其實(shí)思維導(dǎo)圖就是信息架構(gòu)比較基礎(chǔ)的形式了，但是光有思維導(dǎo)圖沒(méi)用，我們需要對(duì)思維導(dǎo)圖進(jìn)行分析。
我以前做過(guò)的一款人脈 app 為例，當(dāng)初對(duì)比了領(lǐng)英、赤兔和脈脈，分析了這4款 app 的思維導(dǎo)圖后得出的共性和差異點(diǎn)：
共性就是要符合用戶(hù)使用習(xí)慣的地方，如果你調(diào)研的3-5個(gè)產(chǎn)品都這么做了，很可能這里是產(chǎn)生用戶(hù)習(xí)慣的地方，是我們需要去遵循的，這是獲得用戶(hù)好感度的基礎(chǔ)。
分析產(chǎn)品時(shí)你一定也會(huì)得出一些產(chǎn)品差異的地方，而這些差異就是你的產(chǎn)品競(jìng)爭(zhēng)點(diǎn)，也是別人用你的 app 不用其他 app 的理由。比如人脈軟件都會(huì)有社交相關(guān)的功能，但是脈脈會(huì)比較注重職場(chǎng)招聘、直播等互聯(lián)網(wǎng)職場(chǎng)人比較關(guān)心的點(diǎn)，這樣對(duì)應(yīng)的用戶(hù)群體就比較會(huì)吃你這套，會(huì)提升用戶(hù)的粘性。
相信你在梳理了競(jìng)品的信息架構(gòu)，總結(jié)了共性和差異點(diǎn)之后對(duì)產(chǎn)品的信息架構(gòu)已經(jīng)有一個(gè)比較清晰的認(rèn)知了，在做自己產(chǎn)品信息架構(gòu)的時(shí)候也會(huì)更胸有成竹。但是最后還有一件事我們可以做，就是對(duì)我們的要做的產(chǎn)品功能做卡片分類(lèi)。
卡片分類(lèi)法是我們工作中常用到的一種方法，它可以在用戶(hù)側(cè)再一次印證和檢測(cè)我們的產(chǎn)品信息架構(gòu)。
卡片分類(lèi)法就是讓用戶(hù)對(duì)功能卡片進(jìn)行分類(lèi)，組織，并給相關(guān)功能的集合重新定義名稱(chēng)的一種自下而上的整理方法。
說(shuō)直白點(diǎn)就是準(zhǔn)備一堆卡片，在這些卡片上寫(xiě)上你所需要包含的功能名稱(chēng)，然后給到用戶(hù)側(cè)，讓用戶(hù)進(jìn)行分類(lèi)，讓用戶(hù)進(jìn)行組織，來(lái)了解用戶(hù)到底覺(jué)得這些功能應(yīng)該怎么合并怎么歸類(lèi)的一種方法。它可以幫助你站在用戶(hù)角度去了解用戶(hù)是怎么認(rèn)定這些功能的，也可以在卡片分類(lèi)法的過(guò)程中更加了解用戶(hù)是怎么想的。
卡片分類(lèi)法大概的步驟和注意點(diǎn)是這樣的：
卡片分類(lèi)法最終會(huì)產(chǎn)出這樣的一個(gè)樹(shù)形圖：
其實(shí)到這一步信息架構(gòu)大概的雛形已經(jīng)有了，你可以用 axure 或者類(lèi)似 mindnode 的軟件把信息架構(gòu)梳理出來(lái)。
接下來(lái)你要對(duì)信息架構(gòu)進(jìn)行重要性分級(jí)，這樣在產(chǎn)品開(kāi)發(fā)的前期可以幫助梳理產(chǎn)品研發(fā)的優(yōu)先級(jí)，集中精力解決用戶(hù)的最大痛點(diǎn)。在產(chǎn)出頁(yè)面時(shí)也可以更好的把控頁(yè)面元素的大小層級(jí)，位置關(guān)系等。
最后你需要注意層和度的平衡：層一般不超過(guò)5層，超過(guò)操作困難。度過(guò)多會(huì)讓用戶(hù)認(rèn)知成本增加，容易找不到想找的內(nèi)容。這里的度指的是同一頁(yè)面展示的信息量。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com