消息|设计沉思录｜消息中心设计消息|中心|卡片|会话|沉思录

编辑导读：在APP的整理架构中，消息系统是一个必不可少的功能模块，其核心是帮助用户及时了解各类消息，保障业务正常运行。本文作者消息中心的概念出发，结合58同城的案例，分析总结了APP消息中心的设计思路，与大家分享。

文章插图
58消息中心承担着58同城APP用户集中处理各类业务消息的功能。
本篇文章，从消息中心的定义、发展、组成、以及各行业间的异同等方面做了详细介绍，让我们对消息中心有一个整体了解，便于找到设计切入点，或帮助我们评估自身产品的消息中心。从一致性和服务号两个方面，阐述了如何将消息中心的优化收益最大。
01 消息中心的概念1. 消息中心定义APP的消息中心，是通过APP或手机这个客户端，围绕某个产品或同一目的进行交流、沟通的重要方式。这种沟通，一方是使用APP的用户，另一方可以是是运营人员或商家，也可以是产品或系统本身，当然也可以是其他用户。
2. 从消息的发展看本质我们细数消息的发展和演变，从古时候的烽火传军情、鸿雁传书、邮驿；到公用电话、座机、手机通话；再到现在智能手机的普及，微信、QQ等社交类APP的出现，是新技术的诞生带来的商业模式和产品形态的非连续性变化。
信息互联，不同的时代，虽然传递消息的介质一直在发生改变，但消息的本质都是一致的。
消息中心的本质：信息快速触达，价值直接传递。
02 消息中心的组成不同定位的产品，消息类型和复杂程度也差别甚远。因此无法在此一一举例。
1. 主要组成模块消息中心的主要组成模块中消息列表是必不可少的（有些在下一级界面中），分类导航根据消息类别的多少不一定都有，像微信、QQ这种以会话消息类型为核心的APP是没有的。
消息中心列表页是应用内系统发送给用户的各种信息的一个集合页面。集合页面意味着消息本身被划分成了各种类型，这时候合适的分类消息导航能帮助用户快速找到需要的信息。

文章插图
2. 辅助组成模块所谓辅助的组成模块，就是不一定所有消息中心都有的，要结合产品实际情况增减。主要包括：搜索、全部已读、消息设置、通讯录等。
辅助组成模块做好了，有助于针对消息中心功能形成闭环。
微博的消息中心基本包括了所有的辅助组成模块，用户可以收发消息，设置消息，搜索消息。像微博这种消息功能重要，类别多，有社交属性的产品加入这些辅助功能是合适的，但不适合所有产品。

文章插图
3. 消息的类型和状态（1）常见消息类型包括
文本、视频、语音、通话（视频&语音）、文档、位置、图片、邀请、红包、Tips、业务卡片。
其中业务卡片以58同城APP为例单独说明，将业务卡片分为4种类型：

吸顶卡片：分为两种，1.商品介绍类；2.个人信息类。展示双方贯穿始终的会话主题，及核心操作按钮。注：无贯穿始终的会话主题，该卡片不显示。
商品信息卡片：双方发出的，带有商品（工作、房源、车源、物品等）基本信息的卡片。在实际应用中，根据自己业务的不同匹配不同的字段。
个人信息卡片：用于双方初次会话，以清晰的信息、真实的数据建立彼此信任。在实际应用中，根据业务不同匹配不同字段。
可操作卡片：在不干扰正常会话的基础上，用于建议性、政策性的操作引导/提示。

例：初次会话引导用户「在线预约」，完成在线预约并已过看房时间再次回到会话，引导用户「签约」可操作卡片分类：1.以官方立场发出，如上例；2.可操作对话卡片。

文章插图
说完业务卡片的分类，为了提升一致性，像58同城、滴滴这种包含大量业务卡片的产品，如何对其进行规范呢？
我们从图片、边距、转角、宽度进行规范说明。

图片规范：图片从两个纬度进行规范，1.应用，一般用于头像、业务卡片内商品图片；2.比例，将所有图片比例进行整理，得到三个常用比例，1:1、3:4、1:2.3。
边距规范：边距规范包括，卡片距页面边距、内容区（含文字、元素）距离左右上下边距。
转角规范：转角规范取4的倍数：4px、8px、12px、16px、20px，会话气泡与业务卡片转角统一16px大小。
宽度规范：卡片宽度两种类型规范：会话气泡卡片，卡片宽度530px，不含头像和气泡尾部；通栏卡片，卡片宽度690px。