新版微博APP|微博设计团队是如何对于微博IM界面进行优化设计?

　　再不改变，你就老了。用加薪后的2天薪资来投资自己，做个优秀的产品经理 开始改变!

　　微博是一款典型的信息流产品，早期微博IM复用了信息流的一些设计，并且已经很久没做大的更新迭代，导致现有的设计与实际场景不符。

　　为了让用户更自然的聚焦在对话体验之中，我们对现有界面进行了重新梳理，来看看微博设计团队对于微博IM界面的优化设计项目总结。

　　新旧方案对比(右图为新方案)

　　如上图所示，在左侧旧方案上，“海淘”“音乐” 分享链接卡片就是刚提到复用信息流的卡片样式，视频、红包、音乐、文章…等等都分复用了这类卡片样式，这种样式占用大量空间，画面切割感强，容易打破会话，左右的从属关系弱并且多出一些无用信息。

　　在布局上，国内主流IM产品的区域划分、从属关系非常明显，左侧区域就是他人态内容，右侧就是主人态内容，标杆产品微信和手Q都培养了大批的用户习惯 ，那么我们能做些什么?视觉上是如何处理的?

　　我们这次的优化工作主要是从三个维度进行的：

　　图形元素：由点、线、面构成的一些基本图形的表达

　　界面布局：X轴和Y轴上个体图形和单位模块之间的间距、尺寸关系

　　单位模块：红包、名片、图片、地图、视频、音乐….

　　图形元素

　　先说下图形元素，因为气泡会大量的出现，所以我们着重说一下气泡，微博气泡有个比较明显的问题就是，气泡角过于尖锐并顶着用户头像，吸引无效注意力并让人产生不适感。

　　对比微信，微博气泡角不适感更强，主要有两个原因：

　　1. 微信黑色文字最强，绿色气泡次之，背景最弱，它的明度是呈现逐层递减的，突出了文字，微博气泡蓝色背景最强，文字次之，背景最弱，这时气泡角的问题就变得特别明显。

　　2. 第二个原因微信绿色气泡明度更高，更融背景，微博蓝色气泡的明度更低与背景反差更大。

　　怎么解决这个问题?我们做了一个简化了的气泡打磨过程，如下图：