中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

流程方法論

逆向工程，請自行搜索相關概念。簡言之，如果非常喜歡一款產品，又無法身臨其境的感受設計過程，逆向推演就成為了非常好的學習方法，堅持經常，必有提高。

分析樣本輸入

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

微信消息列表樣本

還原高保真RP

對于原型的保真度，每個交互設計師的理解不同，如果有3年以上經驗，都不會比下面這個差吧

還原之后的高保真RP

輸出《交互設計說明文檔》

此刻，變身微信的交互設計師，將產品還原成相對標準的文檔。

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

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

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

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

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

交互文檔片段對話Block圖片

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

交互文檔片段對話Block當前對話摘要

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

前面這些都是鋪墊，信息架構推演剛剛開始！

司空見慣，三人成虎

詳盡的交互文檔已經完成，反推信息架構應該不是什么難事了吧，這也未必。

比如，經過千辛萬苦，可能是下面這張圖。

為什么這貨不是「信息架構」？

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

這貨究竟是什么？

姑且可以稱為“某個界面之中的內容關系”。

這貨有什么用？

用處還挺大的，譬如

1. 標注給UI設計師/開發人員，讓他們對內容邏輯一目了然
2. 放在簡歷和Work Show里，讓非專業人士唏噓贊嘆，讓一切看起來井井有條

這貨有什么害處？

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

反正，不知道何日起，大家居然、居然、居然認為這貨就是「信息架構」了……

產品經理、UI設計師、前端開發如果這么理解也就算了；絕大部分交互設計師也是這樣認為，堂而皇之把這貨放入Portfolio，也是醉了！

開始前的復習

2009年，Hozin發表過一篇《從概念設計到信息架構 》，今天繼續沿用其中的思路和方法。

《從概念設計到信息架構》，經過6年前，被非授權轉載了無數次（坐等收網），原版請看這里

復習一下圖例先，很重要的。

第一步，核心概念

「信息架構」是一種準確的抽象，研究抽象事物，那就是擺弄“概念”。

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

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

第二步，概念的延伸

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

經過這些延伸增益，「信息架構」已經從母體分娩，成為“小嬰兒”啦！

第三步，概念合并打包

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

“小嬰兒”當然不曉得自己便便咯，經過慢慢訓練，終于有一天離開紙尿褲，養成飯前便后要洗手等習慣，茁壯成長為 “有秩序感的兒童”。

思考題

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

第四步， 概念實例化

從抽象概念，邁向內容載體的中間過程，就是實例化。

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

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

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

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

思考題

Step#04的這個局部，為什么設計成這個樣子的

第五步，填充屬性與操作

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

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

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

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

第六步，標定內容，添加關聯，終成「信息架構」

在互聯網產品設計中，信息架構是為了界面呈現而存在，界面是由內容構成的。標定內容的種類和數量，決定了界面的復雜度，甚至決定了“需要多少個界面”。

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

最終結果，如下圖

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

本文由@鴻津 ?公眾號：Hozin?(hozin-com)授權發布于人人都是產品經理?，未經許可，禁止轉載。