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

平面设计 2024/12/27 佚名

3 2 1

微博是一款典型的信息流产品，早期微博IM复用了信息流的一些设计，并且已经很久没做大的更新迭代，导致现有的设计与实际场景不符。为了让用户更自然的聚焦在对话体验之中，我们对现有界面进行了重新梳理，来看看微博设计团队对于微博IM界面的优化设计项目总结"center">

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

"center">

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

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

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

图形元素

先说下图形元素，因为气泡会大量的出现，所以我们着重说一下气泡"center">

"center">

从图1-2，我们先解决气泡角造型的不适问题，之前圆角过小且有对外指向性，显得生硬，我们加大了圆角角度，让整个气泡感更强，但该方案有个明显的问题，气泡角并没有指向头像。

从图2-3，调整气泡角指向问题，但该方案运用到图片、红包设计时我们发现，圆角不对称性让人觉得怪异，尤其是红包这种具有中国传统特色的设计时更加明显。

最终从图3-4，我们调整气泡角的位置，保护了圆角的对称性，同时让气泡角下弧线更加平滑与头像关联，从而降低了原气泡角过于激烈的视觉样式。

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

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

△ 气泡最终方案

"center">

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

微博,聊天界面,优化

标签：

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无争山庄资源网 Copyright www.whwtcm.com

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

暂无“新版微博App聊天界面的优化设计项目总结”评论...

www.whwtcm.com 无争山庄资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

2024年12月27日