[逆向工程]信息架构推演：微信消息列表的步骤细节 新手扫盲.pdfVIP

【逆向工程】信息架构推演 ：微信消息列表的步骤细节+新手扫盲 无数小伙伴 析过微信的产品、交互设计 ，然而 ，这个亿万人使用的社交软件 ，它的 「信息架构」 到底是如何的 ？消息列表 ，是微信客户端的主界面 ，今天就来 析一下 ，管中窥豹 ！本文富含大量 图表 ，实在是互联网小白和老鸟应该必读的 ，请不要吝惜流量。 流程方法论 逆向工程 ，请自行搜索相关概念。简言之 ，如果非常喜欢一款产品 ，又无法身临其境的感受设计 过程 ，逆向推演就成为了非常好的学习方法 ，坚持经常 ，必有提高。 分析样本输入 每次打开微信 ，最经常使用的界面就是[消息列表] ，把它先收入囊中 ，截图取样。截图还是有一些技 巧的 ，尽量把更多交互控件状态都保留下来 （在诸多小伙伴的配合下完成 ，感谢 ！）。 微信消息列表样本 还原高保真RP 对于原型的保真度 ，每个交互设计师的理解不同 ，如果有3年以上经验 ，都不会比下面这个差吧 还原之后的高保真RP 输出 《交互设计说明文档》 此刻 ，变身微信的交互设计师 ，将产品还原成相对标准的文档。 首先 ，整个界面由三部 组成 ：标题栏T it le、消息列表MsgList 、标签式下导航TabNavi ；主要操作 有对话搜索、添加 （+ ）、Tap点击进入消息对话界面等。 微信消息列表高保真原型交互模式区 其次 ，消息列表中 ，某一对话的通栏区块定义为[对话Block]交互组件 ，包含一个隐藏操作行为 ：切 换已读/未读、删除对话。 微信消息列表隐藏交互操作 次 ，[对话Block] 这个组件包含图片Image、交谈对象Int erlocut o r s) 、当前对话摘要Current Digest 、日期时间Dat eT ime、未读提示Unread A lert 五个交互控件 ；五个控件并且会根据交谈 主体、新消息种类、开通免打搅功能而相互影响变化 ，交互规则异常复杂 ，于是将规则逐个列出。 交互文档片段对话Block图片 交互文档片段对话Block交谈对象 交互文档片段对话Block当前对话摘要 交互文档片段对话Block日期时间 前面这些都是铺垫 ，信息架构推演刚刚开始 ！ 司空见惯 ，三人成虎 详尽的交互文档已经完成 ，反推信息架构应该不是什么难事了吧 ，这也未必。 比如 ，经过千辛万苦 ，可能是下面这张图。 为什么这货不是 「信息架构」 ？ 根本原因 ，信息是抽象的 ，而不是图上这些表象内容。 这货究竟是什么 ？ 姑且可以称为“某个界面之中的内容关系”。 这货有什么用 ？ 用处还挺大的 ，譬如 1. 标注给UI设计师/开发人员 ，让他们对内容逻辑一目了然 2. 放在简历和Wo rk Show里 ，让非专业人士唏嘘赞叹 ，让一切看起来井井有条 这货有什么害处 ？ 1. 没有深入到信息的灵魂 ，削弱了关联 ，难免以偏概全 2. 固化了思维 ，无从着手优化和创新 （最后只能大家抄来抄去 ） 3. 用结果代替原因 ，本末倒置 ，混淆视听 反正 ，不知道何日起 ，大家居然、居然、居然认为这货就是 「信息架构」了…… 产品经理、UI设计师、前端开发如果这么理解也就算了 ；绝大部 交互设计师也是这样认为 ，堂而 皇之把这货放入Po rtf o lio ，也是醉了 ！ 开始前的复习 2009年 ，Hoz in发表过一篇 《从概念设计到信息架构 》 ，今天继续沿用其中的思路和方法。 《从概念设计到信息架构》 ，经过6年前 ，被非授权转载了无数次 （坐等收网 ），原版请看这里 复习一下图例先 ，很重要的。 第一步 ，核心概念 「信息架构」是一种准确的抽象 ，研究抽象事物 ，那就是摆弄“概念”。 微信消息 ，本质上是 「对话」 ，即“我和其他人之间的信息来往” ，核心概念至少有两个 ：用户User 和会话Dialog 于是 ，得到了非常简单的雏形 ，未来的一切都由这个“受精卵”发育而成 ，既然是核心 ，那就越简单 越好。 第二步 ，概念的延伸 从概念延伸出子概念 ，辨别概念之间的关系。对于微信消息 ，不难发现 ：「对话者」可能是自然人 、一群自然人 ，还可能是机器人 ，所以增加了一个核心概念“系统Syst em” ； 「对话」是一种用户间 行为 ，被传递的是 「消息」 ，