中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

微博是一款典型的信息流產品，早期微博IM復用了信息流的一些設計，并且已經很久沒做大的更新迭代，導致現有的設計與實際場景不符。

為了讓用戶更自然的聚焦在對話體驗之中，我們對現有界面進行了重新梳理，來看看微博設計團隊對于微博IM界面的優化設計項目總結。

新舊方案對比（右圖為新方案）

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

在布局上，國內主流IM產品的區域劃分、從屬關系非常明顯，左側區域就是他人態內容，右側就是主人態內容，標桿產品微信和手Q都培養了大批的用戶習慣 ，那么我們能做些什么？視覺上是如何處理的？

我們這次的優化工作主要是從三個維度進行的：

• 圖形元素：由點、線、面構成的一些基本圖形的表達
• 界面布局：X軸和Y軸上個體圖形和單位模塊之間的間距、尺寸關系
• 單位模塊：紅包、名片、圖片、地圖、視頻、音樂….

圖形元素

先說下圖形元素，因為氣泡會大量的出現，所以我們著重說一下氣泡，微博氣泡有個比較明顯的問題就是，氣泡角過于尖銳并頂著用戶頭像，吸引無效注意力并讓人產生不適感。

對比微信，微博氣泡角不適感更強，主要有兩個原因：

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

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

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

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

從圖2-3，調整氣泡角指向問題，但該方案運用到圖片、紅包設計時我們發現，圓角不對稱性讓人覺得怪異，尤其是紅包這種具有中國傳統特色的設計時更加明顯。

最終從圖3-4，我們調整氣泡角的位置，保護了圓角的對稱性，同時讓氣泡角下弧線更加平滑與頭像關聯，從而降低了原氣泡角過于激烈的視覺樣式。

看看我們具體是如何調整的：

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

氣泡最終方案

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

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

這種經過深度打磨的圖形能讓界面顯得更穩定、可靠。

界面布局

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

?新舊布局對比（右圖為新布局）

1. 橫軸布局的變化

在保證內容顯示的基礎上，收縮了空間，調整文字內容的最大寬度，文字與氣泡的間距，而這節約出來的空間讓界面更緊湊，區域劃分更加明顯，而這些間距關系變化也充分利用了格式塔原理的相似性、接近性和對稱性，讓界面單位和個體的層級不被破壞性……

橫軸變化

2. 縱軸布局的變化

間距關系從一種新增至兩種，增強他人態與主人態之間對話內容的間距關系劃分，強化了氣泡的縱向分組，進一步強化從屬關系。

縱軸變化

單位模塊

單位模塊主要都是一些顯示效果問題，例如，圖片太小、LBS識別度低、紅包太弱等，如下圖所示：

舊方案

1. 合理的圖片尺寸

當圖片與氣泡最大寬度呈黃金分割比例之時，既不會出現加載效率和流程性問題，又能保證一定的舒適度。

2. 增強LBS的可用性

我們加強了LBS信息顯示和識別度，讓用戶在對話頁就能獲取到相關地理位置信息，讓LBS的可用性和實際場景更符合。

3. 紅包體驗升級

強化了紅包的顯示效果，并使之更具中國特色。

總結

我們這次優化的目標是思考能為用戶解決什么問題？核心是聚焦對話。細節的深度挖掘打磨、布局梳理、強調互動性等等…所要傳達的視覺表現都是建立在這個目標之上。

多角度，不同因素綜合考慮，在美感與實用性中尋找平衡，合理的運用一些設計法則，與實際用戶場景結合，能讓界面變得更加舒適、可靠。

作者：微博UDC

原文地址：http://weibo.com/ttarticle/p/show?id=2309404022575796746873