無數(shù)小伙伴分析過微信的產(chǎn)品、交互設(shè)計(jì)，然而，這個億萬人使用的社交軟件，它的「信息架構(gòu)」到底是如何的？消息列表，是微信客戶端的主界面，今天就來分析一下，管中窺豹！本文富含大量圖表，實(shí)在是互聯(lián)網(wǎng)小白和老鳥應(yīng)該必讀的，請不要吝惜流量。

流程方法論

逆向工程，請自行搜索相關(guān)概念。簡言之，如果非常喜歡一款產(chǎn)品，又無法身臨其境的感受設(shè)計(jì)過程，逆向推演就成為了非常好的學(xué)習(xí)方法，堅(jiān)持經(jīng)常，必有提高。

分析樣本輸入

每次打開微信，最經(jīng)常使用的界面就是[消息列表]，把它先收入囊中，截圖取樣。截圖還是有一些技巧的，盡量把更多交互控件狀態(tài)都保留下來（在諸多小伙伴的配合下完成，感謝?。?。

微信消息列表樣本

還原高保真RP

對于原型的保真度，每個交互設(shè)計(jì)師的理解不同，如果有3年以上經(jīng)驗(yàn)，都不會比下面這個差吧

還原之后的高保真RP

輸出《交互設(shè)計(jì)說明文檔》

此刻，變身微信的交互設(shè)計(jì)師，將產(chǎn)品還原成相對標(biāo)準(zhǔn)的文檔。

首先，整個界面由三部分組成：標(biāo)題欄Title、消息列表MsgList、標(biāo)簽式下導(dǎo)航TabNavi；主要操作有對話搜索、添加（+）、Tap點(diǎn)擊進(jìn)入消息對話界面等。

微信消息列表高保真原型交互模式區(qū)分

其次，消息列表中，某一對話的通欄區(qū)塊定義為[對話Block]交互組件，包含一個隱藏操作行為：切換已讀/未讀、刪除對話。

微信消息列表隱藏交互操作

再次，[對話Block] 這個組件包含圖片Image、交談對象Interlocutor(s) 、當(dāng)前對話摘要Current Digest 、日期時間Date&Time、未讀提示Unread Alert五個交互控件；五個控件并且會根據(jù)交談主體、新消息種類、開通免打攪功能而相互影響變化，交互規(guī)則異常復(fù)雜，于是將規(guī)則逐個列出。

交互文檔片段對話Block圖片

交互文檔片段對話Block交談對象

交互文檔片段對話Block當(dāng)前對話摘要

交互文檔片段對話Block日期時間

前面這些都是鋪墊，信息架構(gòu)推演剛剛開始！

司空見慣，三人成虎

詳盡的交互文檔已經(jīng)完成，反推信息架構(gòu)應(yīng)該不是什么難事了吧，這也未必。

比如，經(jīng)過千辛萬苦，可能是下面這張圖。

為什么這貨不是「信息架構(gòu)」？

根本原因，信息是抽象的，而不是圖上這些表象內(nèi)容。

這貨究竟是什么？

姑且可以稱為“某個界面之中的內(nèi)容關(guān)系”。

這貨有什么用？

用處還挺大的，譬如

1. 標(biāo)注給UI設(shè)計(jì)師/開發(fā)人員，讓他們對內(nèi)容邏輯一目了然
2. 放在簡歷和Work Show里，讓非專業(yè)人士唏噓贊嘆，讓一切看起來井井有條

這貨有什么害處？

1. 沒有深入到信息的靈魂，削弱了關(guān)聯(lián)，難免以偏概全
2. 固化了思維，無從著手優(yōu)化和創(chuàng)新（最后只能大家抄來抄去）
3. 用結(jié)果代替原因，本末倒置，混淆視聽

反正，不知道何日起，大家居然、居然、居然認(rèn)為這貨就是「信息架構(gòu)」了……

產(chǎn)品經(jīng)理、UI設(shè)計(jì)師、前端開發(fā)如果這么理解也就算了；絕大部分交互設(shè)計(jì)師也是這樣認(rèn)為，堂而皇之把這貨放入Portfolio，也是醉了！

開始前的復(fù)習(xí)

2009年，Hozin發(fā)表過一篇《從概念設(shè)計(jì)到信息架構(gòu) 》，今天繼續(xù)沿用其中的思路和方法。

《從概念設(shè)計(jì)到信息架構(gòu)》，經(jīng)過6年前，被非授權(quán)轉(zhuǎn)載了無數(shù)次（坐等收網(wǎng)），原版請看這里

復(fù)習(xí)一下圖例先，很重要的。

第一步，核心概念

「信息架構(gòu)」是一種準(zhǔn)確的抽象，研究抽象事物，那就是擺弄“概念”。

微信消息，本質(zhì)上是「對話」，即“我和其他人之間的信息來往”，核心概念至少有兩個：用戶User和會話Dialog

于是，得到了非常簡單的雛形，未來的一切都由這個“受精卵”發(fā)育而成，既然是核心，那就越簡單越好。

第二步，概念的延伸

從概念延伸出子概念，辨別概念之間的關(guān)系。對于微信消息，不難發(fā)現(xiàn)：「對話者」可能是自然人、一群自然人，還可能是機(jī)器人，所以增加了一個核心概念“系統(tǒng)System”；「對話」是一種用戶間行為，被傳遞的是「消息」，于是又增加了一個核心概念“消息（單條）A Single Message”。

經(jīng)過這些延伸增益，「信息架構(gòu)」已經(jīng)從母體分娩，成為“小嬰兒”啦！

第三步，概念合并打包

概念之前的關(guān)系非常復(fù)雜，已經(jīng)占用了太多的連線，為了避免影響到以后的步驟，先要對概念進(jìn)行整理，無非包含兩種情況：概念之間是兄弟平行關(guān)系，把它們分配同組；概念之間是父子支配關(guān)系，把它們分配同組；一言蔽之“打仗親兄弟，上陣父子兵”。

“小嬰兒”當(dāng)然不曉得自己便便咯，經(jīng)過慢慢訓(xùn)練，終于有一天離開紙尿褲，養(yǎng)成飯前便后要洗手等習(xí)慣，茁壯成長為 “有秩序感的兒童”。

思考題

父子概念同組，兄弟概念同組，這些合并打包，在Step#03圖中分別是如何表示的？

第四步， 概念實(shí)例化

從抽象概念，邁向內(nèi)容載體的中間過程，就是實(shí)例化。

有些抽象概念根本無法實(shí)例化，比如“道德”；有一些就很容易啊，“鳥類”的實(shí)例化就是鴕鳥、大公雞……

無論是IM還是社交軟件，聊天這個產(chǎn)品，在實(shí)例化之前都是差不多的概念，Step #03那張圖對于QQ/Skype/陌陌同樣有效，從實(shí)例化開始，這些產(chǎn)品才開始分化。

只有實(shí)例化，才能具體化，才有可能生成最后的界面。

“兒童”終于上了幼兒園，開始接受K12的各種教育培養(yǎng)，找到自己的興趣方向，成為“恰同學(xué)騷年”！

思考題

Step#04的這個局部，為什么設(shè)計(jì)成這個樣子的

第五步，填充屬性與操作

實(shí)體，看得見摸得到；系統(tǒng)的分析實(shí)體，無非就是有哪些屬性，如何改變這些屬性（操作）。

謝天謝地，這步驟的操作方法很普及了，就是“這貨”的功勞！

“同學(xué)騷年”終于開始要參加高考，無論怎樣，算是邁入高等學(xué)府的“大學(xué)生”了。

至于為什么會“三人成虎”，很簡單吶，“應(yīng)試教育”大抵也算教育的一種類型吧……

第六步，標(biāo)定內(nèi)容，添加關(guān)聯(lián)，終成「信息架構(gòu)」

在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，信息架構(gòu)是為了界面呈現(xiàn)而存在，界面是由內(nèi)容構(gòu)成的。標(biāo)定內(nèi)容的種類和數(shù)量，決定了界面的復(fù)雜度，甚至決定了“需要多少個界面”。

映射，通常意味著[等效關(guān)系]，原理略去三百字，主要是用起來方便些。

最終結(jié)果，如下圖

現(xiàn)在，那個“受精卵”，終于熬到了“大學(xué)畢業(yè)”，然并個卵，[畢業(yè)就意味著失業(yè)]，有木有？畢竟只有少數(shù)人像微信一樣有那么牛的“親爹”。

本文由@鴻津 ?公眾號：Hozin?(hozin-com)授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。