打磨极致细节体验！新版微博App 聊天界面优化经验总结

   <p>微博是一款典型的信息流产品，早期微博IM复用了信息流的一些设计，并且已经很久没做大的更新迭代，导致现有的设计与实际场景不符。为了让用户更自然的聚焦在对话体验之中，我们对现有界面进行了重新梳理，来看看微博设计团队对于微博IM界面的优化设计项目总结​。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/517497d33f1095b180c61253c3519d46.jpg"></p>    <h3><strong>△ 新旧方案对比（右图为新方案）</strong></h3>    <p>​如上图所示，在左侧旧方案上，“海淘”“音乐” 分享链接卡片就是刚提到复用信息流的卡片样式，视频、红包、音乐、文章…等等都分复用了这类卡片样式，这种样式占用大量空间，画面切割感强，容易打破会话，左右的从属关系弱并且多出一些无用信息。</p>    <p>在布局上，国内主流IM产品的区域划分、从属关系非常明显，左侧区域就是他人态内容，右侧就是主人态内容，标杆产品微信和手Q都培养了大批的用户习惯 ，那么我们能做些什么？视觉上是如何处理的？</p>    <p>我们这次的优化工作主要是从三个维度进行的：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/b77b35cefd36b9d4dcd55eb8fb8dae3d.jpg"></p>    <p>图形元素：由点、线、面构成的一些基本图形的表达</p>    <p>界面布局：X轴和Y轴上个体图形和单位模块之间的间距、尺寸关系</p>    <p>单位模块：红包、名片、图片、地图、视频、音乐….</p>    <p><strong>图形元素</strong></p>    <p>先说下图形元素，因为气泡会大量的出现，所以我们着重说一下气泡​，微博气泡有个比较明显的问题就是，气泡角过于尖锐并顶着用户头像，吸引无效注意力并让人产生不适感。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/22fd1cc6223f76f2025880334cad752b.jpg"></p>    <p>​​​对比微信，微博气泡角不适感更强，主要有两个原因：</p>    <p>1. 微信黑色文字最强，绿色气泡次之，背景最弱，它的明度是呈现逐层递减的，突出了文字，微博气泡蓝色背景最强，文字次之，背景最弱，这时气泡角的问题就变得特别明显。</p>    <p>2. 第二个原因微信绿色气泡明度更高，更融背景，微博蓝色气泡的明度更低与背景反差更大。</p>    <p>怎么解决这个问题？我们做了一个简化了的气泡打磨过程，如下图：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/6f0756bd1fc2960b55df59b9d5211ca6.jpg"></p>    <p>从图1-2，我们先解决气泡角造型的不适问题，之前圆角过小且有对外指向性，显得生硬，我们加大了圆角角度，让整个气泡感更强，但该方案有个明显的问题，气泡角并没有指向头像。</p>    <p>从图2-3，调整气泡角指向问题，但该方案运用到图片、红包设计时我们发现，圆角不对称性让人觉得怪异，尤其是红包这种具有中国传统特色的设计时更加明显。</p>    <p>最终从图3-4，我们调整气泡角的位置，保护了圆角的对称性，同时让气泡角下弧线更加平滑与头像关联，从而降低了原气泡角过于激烈的视觉样式。</p>    <p>看看我们具体是如何调整的：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/2e2b0399c3b5abe34b5388666723192c.jpg"></p>    <p>实际上图形打磨是个发现问题解决问题的过程，但它更像一个树状结构，每一像素变化都会带来图形指向、造型契合度、整体性不一样的感受，我们需要去平衡它们的关系，并选取最优方案，看看最终方案我们是如何去平衡圆角、气泡角、头像之间的关系的。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/0d982a6f41efc50579d1094f72ffdd5b.jpg"></p>    <h3><strong>△ 气泡最终方案</strong></h3>    <p>​最终方案中，圆角大小为单行气泡四分之一高度，气泡与头像、气泡角与头像的间距都处于1个单位的间距，气泡角与圆角转角处，为2分之1单位刚好保护了圆角对称感不被破坏。</p>    <p>我们认为合适的圆角角度既能勾勒出曲线的柔美，又能保证形体的稳定，并且可以帮助用户将目光引向中心，突出对话内容。</p>    <p>这种经过深度打磨的图形能让界面显得更稳定、可靠​。</p>    <p><strong>界面布局</strong></p>    <p>旧的界面布局有我们刚刚提到的画面切割感强，从属关系弱，空间利用率低等问题，从下图可能较为直观的对比出一些问题：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/99f28cded6f85dd7db96b410bbe862a6.jpg"></p>    <h3><strong>△ 新旧布局对比（右图为新布局）</strong></h3>    <p><strong>1. 横轴布局的变化</strong></p>    <p>在保证内容显示的基础上，收缩了空间，调整文字内容的最大宽度，文字与气泡的间距，而这节约出来的空间让界面更紧凑，区域划分更加明显，而这些间距关系变化也充分利用了格式塔原理的相似性、接近性和对称性，让界面单位和个体的层级不被破坏性…</p>    <p><img src="https://simg.open-open.com/show/c7afc1d05492cfe1b09ef5e18e3787bd.jpg"></p>    <h3><strong>△ 横轴变化</strong></h3>    <p><strong>2. 纵轴布局的变化</strong></p>    <p>间距关系从一种新增至两种，增强他人态与主人态之间对话内容的间距关系划分，强化了气泡的纵向分组，进一步强化从属关系。</p>    <p><img src="https://simg.open-open.com/show/2a1ff79edc6e441e28e3be9e547d3f10.jpg"></p>    <h3><strong>△ 纵轴变化</strong></h3>    <p><strong>单位模块</strong></p>    <p>单位模块主要都是一些显示效果问题，例如，图片太小、LBS识别度低、红包太弱等…如下图所示：</p>    <p><img src="https://simg.open-open.com/show/882115b89b9afecbdeff8df1ff9a9904.jpg"></p>    <h3><strong>△ 旧方案</strong></h3>    <p><strong>1. 合理的图片尺寸</strong></p>    <p>当图片与气泡最大宽度呈黄金分割比例之时，既不会出现加载效率和流程性问题，又能保证一定的舒适度。</p>    <p><img src="https://simg.open-open.com/show/c8df72a816d33c41dc4d38e6fe88ca33.jpg"></p>    <p><strong>2. 增强LBS的可用性</strong></p>    <p>我们加强了LBS信息显示和识别度，让用户在对话页就能获取到相关地理位置信息，让LBS的可用性和实际场景更符合。</p>    <p><img src="https://simg.open-open.com/show/33bcabc2a4bf9cd2f370a129b04972a5.jpg"></p>    <p><strong>3. 红包体验升级</strong></p>    <p>强化了红包的显示效果，并使之更具中国特色。</p>    <p><img src="https://simg.open-open.com/show/bfbb888b5e49dd8dbbb7e19ff2d296e2.jpg"></p>    <p><strong>总结</strong></p>    <p>我们这次优化的目标是思考能为用户解决什么问题？核心是聚焦对话。细节的深度挖掘打磨、布局梳理、强调互动性等等…所要传达的视觉表现都是建立在这个目标之上。</p>    <p>多角度，不同因素综合考虑，在美感与实用性中寻找平衡，合理的运用一些设计法则，与实际用户场景结合，能让界面变得更加舒适、可靠。</p>    <p><img src="https://simg.open-open.com/show/83f4eac98e0342805e59107b1a13a011.jpg"></p>    <p> </p>    <p> </p>    <p>来自：http://www.uisdc.com/weibo-app-chat-ui-redesign</p>    <p> </p>