△ 新舊方案對比(右圖為新方案)

​如上圖所示，在左側(cè)舊方案上，“海淘”“音樂” 分享鏈接卡片就是剛提到復(fù)用信息流的卡片樣式，視頻、紅包、音樂、文章…等等都分復(fù)用了這類卡片樣式，這種樣式占用大量空間，畫面切割感強(qiáng)，容易打破會話，左右的從屬關(guān)系弱并且多出一些無用信息。

在布局上，國內(nèi)主流IM產(chǎn)品的區(qū)域劃分、從屬關(guān)系非常明顯，左側(cè)區(qū)域就是他人態(tài)內(nèi)容，右側(cè)就是主人態(tài)內(nèi)容，標(biāo)桿產(chǎn)品微信和手Q都培養(yǎng)了大批的用戶習(xí)慣 ，那么我們能做些什么?視覺上是如何處理的?

我們這次的優(yōu)化工作主要是從三個(gè)維度進(jìn)行的：

圖形元素：由點(diǎn)、線、面構(gòu)成的一些基本圖形的表達(dá)

界面布局：X軸和Y軸上個(gè)體圖形和單位模塊之間的間距、尺寸關(guān)系

單位模塊：紅包、名片、圖片、地圖、視頻、音樂….

圖形元素

先說下圖形元素，因?yàn)闅馀輹罅康某霈F(xiàn)，所以我們著重說一下氣泡​，微博氣泡有個(gè)比較明顯的問題就是，氣泡角過于尖銳并頂著用戶頭像，吸引無效注意力并讓人產(chǎn)生不適感。

​​​對比微信，微博氣泡角不適感更強(qiáng)，主要有兩個(gè)原因：

1. 微信黑色文字最強(qiáng)，綠色氣泡次之，背景最弱，它的明度是呈現(xiàn)逐層遞減的，突出了文字，微博氣泡藍(lán)色背景最強(qiáng)，文字次之，背景最弱，這時(shí)氣泡角的問題就變得特別明顯。

2. 第二個(gè)原因微信綠色氣泡明度更高，更融背景，微博藍(lán)色氣泡的明度更低與背景反差更大。

怎么解決這個(gè)問題?我們做了一個(gè)簡化了的氣泡打磨過程，如下圖：

從圖1-2，我們先解決氣泡角造型的不適問題，之前圓角過小且有對外指向性，顯得生硬，我們加大了圓角角度，讓整個(gè)氣泡感更強(qiáng)，但該方案有個(gè)明顯的問題，氣泡角并沒有指向頭像。

從圖2-3，調(diào)整氣泡角指向問題，但該方案運(yùn)用到圖片、紅包設(shè)計(jì)時(shí)我們發(fā)現(xiàn)，圓角不對稱性讓人覺得怪異，尤其是紅包這種具有中國傳統(tǒng)特色的設(shè)計(jì)時(shí)更加明顯。

最終從圖3-4，我們調(diào)整氣泡角的位置，保護(hù)了圓角的對稱性，同時(shí)讓氣泡角下弧線更加平滑與頭像關(guān)聯(lián)，從而降低了原氣泡角過于激烈的視覺樣式。

看看我們具體是如何調(diào)整的：

實(shí)際上圖形打磨是個(gè)發(fā)現(xiàn)問題解決問題的過程，但它更像一個(gè)樹狀結(jié)構(gòu)，每一像素變化都會帶來圖形指向、造型契合度、整體性不一樣的感受，我們需要去平衡它們的關(guān)系，并選取最優(yōu)方案，看看最終方案我們是如何去平衡圓角、氣泡角、頭像之間的關(guān)系的。

△ 氣泡最終方案

​最終方案中，圓角大小為單行氣泡四分之一高度，氣泡與頭像、氣泡角與頭像的間距都處于1個(gè)單位的間距，氣泡角與圓角轉(zhuǎn)角處，為2分之1單位剛好保護(hù)了圓角對稱感不被破壞。

我們認(rèn)為合適的圓角角度既能勾勒出曲線的柔美，又能保證形體的穩(wěn)定，并且可以幫助用戶將目光引向中心，突出對話內(nèi)容。

這種經(jīng)過深度打磨的圖形能讓界面顯得更穩(wěn)定、可靠​。

界面布局

舊的界面布局有我們剛剛提到的畫面切割感強(qiáng)，從屬關(guān)系弱，空間利用率低等問題，從下圖可能較為直觀的對比出一些問題：

△ 新舊布局對比(右圖為新布局)