详解新版微博App聊天界面优化经验总结

看看我们具体是如何调整的:

详解新版微博App聊天界面优化经验总结,PS教程,

实际上图形打磨是个发现问题解决问题的过程,但它更像一个树状结构,每一像素变化都会带来图形指向、造型契合度、整体性不一样的感受,我们需要去平衡它们的关系,并选取最优方案,看看最终方案我们是如何去平衡圆角、气泡角、头像之间的关系的。

详解新版微博App聊天界面优化经验总结,PS教程,

△ 气泡最终方案

​最终方案中,圆角大小为单行气泡四分之一高度,气泡与头像、气泡角与头像的间距都处于1个单位的间距,气泡角与圆角转角处,为2分之1单位刚好保护了圆角对称感不被破坏。

我们认为合适的圆角角度既能勾勒出曲线的柔美,又能保证形体的稳定,并且可以帮助用户将目光引向中心,突出对话内容。

这种经过深度打磨的图形能让界面显得更稳定、可靠​。

界面布局

旧的界面布局有我们刚刚提到的画面切割感强,从属关系弱,空间利用率低等问题,从下图可能较为直观的对比出一些问题:

详解新版微博App聊天界面优化经验总结,PS教程,

△ 新旧布局对比(右图为新布局)

1. 横轴布局的变化

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

详解新版微博App聊天界面优化经验总结,PS教程,

△ 横轴变化