微博是一款典型的信息流产品，早期微博IM复用了信息流的一些设计，并且已经很久没做大的更新迭代，导致现有的设计与实际场景不符。为了让用户更自然的聚焦在对话体验之中，我们对现有界面进行了重新梳理，来看看微博设计团队对于微博IM界面的优化设计项目总结"center">
△ 新旧方案对比(右图为新方案)
"center">
图形元素：由点、线、面构成的一些基本图形的表达
界面布局：X轴和Y轴上个体图形和单位模块之间的间距、尺寸关系
单位模块：红包、名片、图片、地图、视频、音乐….
图形元素
先说下图形元素，因为气泡会大量的出现，所以我们着重说一下气泡"center">
"center">
从图1-2，我们先解决气泡角造型的不适问题，之前圆角过小且有对外指向性，显得生硬，我们加大了圆角角度，让整个气泡感更强，但该方案有个明显的问题，气泡角并没有指向头像。
从图2-3，调整气泡角指向问题，但该方案运用到图片、红包设计时我们发现，圆角不对称性让人觉得怪异，尤其是红包这种具有中国传统特色的设计时更加明显。
最终从图3-4，我们调整气泡角的位置，保护了圆角的对称性，同时让气泡角下弧线更加平滑与头像关联，从而降低了原气泡角过于激烈的视觉样式。
看看我们具体是如何调整的：
实际上图形打磨是个发现问题解决问题的过程，但它更像一个树状结构，每一像素变化都会带来图形指向、造型契合度、整体性不一样的感受，我们需要去平衡它们的关系，并选取最优方案，看看最终方案我们是如何去平衡圆角、气泡角、头像之间的关系的。
△ 气泡最终方案
"center">
△ 新旧布局对比(右图为新布局)
上一页12 下一页 阅读全文
标签：
微博,聊天界面,优化
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
内蒙古资源网 Copyright www.nmgbbs.com
暂无“新版微博App聊天界面的优化设计项目总结”评论...