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

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

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

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

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

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

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

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

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

图形元素

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

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

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

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

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

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

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

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

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

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

△ 气泡最终方案

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

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

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

界面布局

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

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

1

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板