新版微博App聊天界面的优化设计项目总结

1. 横轴布局的变化

在保证内容显示的基础上，收缩了空间，调整文字内容的最大宽度，文字与气泡的间距，而这节约出来的空间让界面更紧凑，区域划分更加明显，而这些间距关系变化也充分利用了格式塔原理的相似性、接近性和对称性，让界面单位和个体的层级不被破坏性…

△ 横轴变化

2. 纵轴布局的变化

间距关系从一种新增至两种，增强他人态与主人态之间对话内容的间距关系划分，强化了气泡的纵向分组，进一步强化从属关系。

△ 纵轴变化

单位模块

单位模块主要都是一些显示效果问题，例如，图片太小、LBS识别度低、红包太弱等…如下图所示：

△ 旧方案

1. 合理的图片尺寸

当图片与气泡最大宽度呈黄金分割比例之时，既不会出现加载效率和流程性问题，又能保证一定的舒适度。

2. 增强LBS的可用性

我们加强了LBS信息显示和识别度，让用户在对话页就能获取到相关地理位置信息，让LBS的可用性和实际场景更符合。

3. 红包体验升级

强化了红包的显示效果，并使之更具中国特色。

总结

我们这次优化的目标是思考能为用户解决什么问题?核心是聚焦对话。细节的深度挖掘打磨、布局梳理、强调互动性等等…所要传达的视觉表现都是建立在这个目标之上。

多角度，不同因素综合考虑，在美感与实用性中寻找平衡，合理的运用一些设计法则，与实际用户场景结合，能让界面变得更加舒适、可靠。