Android站内信设计(无代码)

文档中心

Android站内信设计

- 一、前言
- 二、位置
- 三、点击之后的界面
- - 1.UI分析
  - 2.各个控件
- 四、主界面**UI**设计
- - 1.button的处理
  - - ①：粉丝button
    - ②：评论button
    - ③：通知button
  - 2.会话列表处理
- 五、消息中间件的应用
- 六、总结

一、前言

这是app纯理论设计的第一篇，主要记录平时设计界面的过程，主要涉及一些UI的设计和一些逻辑的设计，如果你有开发过一些demo相信应该可以看懂的，真正实现一个站内信的设计相当困难，如果没有一定的基础，将寸步难行，这个系统准备留到考研结束进行着手代码的实现，当然我也鼓励大家实现一个，真的实现的朋友私我，我会送出一份礼物以示鼓励。对标网易云的站内信设计，由于时间上的原因，图均为手画的字写得不好看多多见谅，如果对UI感兴趣的朋友可以看看网易云UEDC团队出版的《以匠心，致设计》.

二、位置

这部分位于侧边导航栏的首个Item，这个设计是为了提高用户的体验，站内信作为点击次数最多的模块排在越前面越好，设计图稿如下

在这里插入图片描述

这部分由背景+图标+文字构成，事实上只需要对最外层得itemView进行处理即可，这部分得主要布局是采用cardView设计的。

三、点击之后的界面

1.UI分析

进入界面会有一个标题栏和一个加载会话的过渡动画，过渡动画结束后会话列表正式刷新完毕，这个过程中完成了两项任务，主线程加载UI动画，开启另外一个子线程完成数据的拉取，然后拉取完毕handle通知一下，使得UI停止过渡动画正式加载会话数据。

过渡动画的加载

这里推荐到Lottie官网找相关的free动画，然后界面刚进入先展示过渡动画
服务端会话数据的拉取

这部分开启子线程处理网络请求相关的，然后赋值给viewModel，请求结束用handle提醒一下主线程

2.各个控件

整体上由标题栏+过渡动画组成

在这里插入图片描述

①：back 比较简单，销毁当前的activity即可
②：text 普通的文字显示，无需注册事件
③：imageView/imageButton，这里更倾向于使用imageButton，图像比较小，不需要太清晰的显示可以使用button，这个清理全部未读的功能需要完成两个部分的处理，首先需要本地UI的更新，其次就是服务端数据的刷新，这部分可以先本地服务端开一个线程去执行网络请求的操作，刷新完毕toast一个“清空所有已读成功”，当然本地的红点肯定先一步完成消除。
④：搜索站内消息，这部分可以配合数据库模糊搜索完成，具体可以定位到某个对话的某条消息

四、主界面UI设计

在这里插入图片描述

1.button的处理

在这里插入图片描述

①：粉丝button

整体上的关系设计

现在大部分应用都有这个粉丝关注等等社交功能，主要用于订阅各种消息，这部分需要设计数据库模型

一般而言有两种模式

a.博主和粉丝 1：n 这个比较适合官方号之类的消息订阅等等

b.博主和粉丝 m：n 这种模式就是目前最流行的设计，可以双向关注等等

注意事项

每名粉丝和博主的会话是唯一的，粉丝和博主之间可以有多条消息

设置主次关系用于判断二者的关注状态
关系表的设计

user1，user2，relationship，sessionUid这几个字段，user1和user2表示二者之间不存在字段上的优先关系，relationship表示二者的主从关系

relationUid的取值

user1 表明user1为博主

user2 表明user2为博主

both 相互关注

对于表中数据的插入

sessionUid为主键，两位用户之间有且只有一个会话，这里sessionUid用于消息的收发，session表包括sessionUid和message两个字段，可以采用nosql数据库进行存储，类似redis，其中message利用json字符串进行存储，最后客户端即安卓端进行处理
```
"{"send":user1,"message":"hello","time":"20220516"}"
```
send用于区分发送人

一般习惯右边为用户自己，当然各国的习惯不同，国际化时可以考虑设置一下，消息中的send与本地的用户判断一下即可。

聊天列表设计浅谈

一种想法是Item设置两个聊天的消息体，然后实际传入数据时判断一下，隐藏掉一个即可

另一种想法时设计多列表的adapta，一个列表可以插入多种的Item

至此数据库表的设计完成

粉丝的界面设计

①头像：头像，粉丝个人信息拉取

②③名字、签名：名字和签名也是一样的

④回关：button 将relation表中的relationship字段修改即可

⑤取关：将这个关系删除或者修改即可，主要对relationship表进行修改

至此粉丝button设计完毕，至于点击列表中的item跳转到个人界面就不属于这里讨论的范畴了

user1	表明user1为博主
user2	表明user2为博主
both	相互关注

②：评论button

这个Imagebutton用于查看例如发的贴子下面的回复，这里涉及数据绑定相关，仍然不在讨论范围内（一个系统往往需要和好几个系统进行通信，确实真正做一个难度很大）

在这里插入图片描述

这个itemView可以采用线性布局作为父布局，约束布局作为右侧的嵌套布局

在这里插入图片描述

我的评论那一块采用cardview即可，忌讳采用单一布局，虽然线性布局通过多种嵌套可以完成大多数界面的设计，有几个缺点，写的重复代码太多了，嵌套太深不利于界面的绘制，这部分数据可以采用帖子的id和comment的id获取。

③：通知button

这个imagebutton主要用于数量可能比较多的外部互动通知，例如点赞通知等等

在这里插入图片描述

①②：是操作者的个人信息

③④：操作类型、内容

⑤：操作时间

2.会话列表处理

这部分属于即时通讯的范畴，只谈谈消息处理的部分，可以参考之前的一篇即时IM的设计

在这里插入图片描述

至此界面已经完全从理论上实现了，接下来谈谈今天的逻辑主角—消息中间件

五、消息中间件的应用

这部分用到了微消息中间件MQTT和RocketMQ消息中间件，MQTT用于安卓端的消息订阅和分发，RocketMQ用于服务端应用的订阅和分发

在这里插入图片描述

这里仅简单介绍一下，具体代码部分需要学习相关的用法，这个消息机制可以实现站内消息的分发，主要用到的就是这两个中间件，至于配合使用，这部分较为困难，就不详细介绍了，至此，纯理论的站内消息设计完毕。

六、总结

主界面的会话列表利用IM进行获取，只需设置相关的监听器即可，通知方面考虑MQTT和RocketMQ配合实现，最后，想说的是一个看似非常不起眼的功能实现起来可不那么容易，这部分前后端代码开发起来到真正上线，就我的速度至少需要一周以上，实际比理论难多了，等考研上岸了再来实现吧。

Android站内信设计(无代码)