消息通知前端及后台原型设计

很简单的一些关于消息通知的设计。

前端：

首先关于消息中心的入口，一般有两种做法，一种是作为一级页面展示（适用于消息通知重要级别高，如倚重消息页面的营销功能），一种是放置一个icon入口。 如下两图所示：

首先根据自己需要确定消息中心的入口展示，接下来我们看看消息中心页面展示：

此为较为常见的消息页面设计，大致罗列了8种消息类型，一般来说消息类型会适当缩减，减少选择压力，可根据需要而定，建议可以接受的情况下合并放置2种消息即可，如第一张图所示。

此为另一种常见的消息页面展示，例：含有社交元素的应用较为重视用户之间的互动，所以单独把互动提醒放置在第一行，这样不仅突出重点，同时与下面消息类型分割开也更有利于浏览。

此种展示尤其突出了互动消息展示，直接在第一级页面展示也减少了用户的操作

分栏式

其他几点细节：1、关于新消息提醒，通常使用圆点或数字角标，圆点对用户造成的压力更小，数字角标则对于用户点击更有吸引力。另外如果采用数字角标的话，数字上限是多少，超过上限了如何展示，这也是一个需要考虑的问题。

例：上限最高99，超过则以如图展示

2、第一级页面消息内容展示多少字符，超过如何展示？ 常见展示字符在30-40个之间。（1个汉字为2个字符，1个数字或字母为1个字符...）

下面是消息内容详情页面的几种展示：

左侧为logo，右侧 4种类型 分别为纯文字、文字+链接、大图配文字、小图配文字（图片在左）

去掉logo，另外小图配文字（图片在右），重点展示内容，图片后置

关于消息格式需要后台设置，同时别忘了消息为空时的展示：

后台：

首先罗列需要的功能，主要有：1、新增消息  2、历史消息管理  3、用户群管理  4、操作记录，下面依照这些功能便可以搭建出需要的后台框架：

编辑好的消息内容在此处查看，右上角可以点击新增消息

新增消息内容

此处为用户群管理，并可新增用户群

前端展示的数据来源于后台，所以两者设计中一定要建立联系，相互对照，确保设计完善。