@微博UDC-M ：微博是一款典型的信息流產(chǎn)品，早期微博IM復(fù)用了信息流的一些設(shè)計(jì)，并且已經(jīng)很久沒(méi)做大的更新迭代，導(dǎo)致現(xiàn)有的設(shè)計(jì)與實(shí)際場(chǎng)景不符。為了讓用戶(hù)更自然的聚焦在對(duì)話(huà)體驗(yàn)之中，我們對(duì)現(xiàn)有界面進(jìn)行了重新梳理，來(lái)看看微博設(shè)計(jì)團(tuán)隊(duì)對(duì)于微博IM界面的優(yōu)化設(shè)計(jì)項(xiàng)目總結(jié)?。
△ 新舊方案對(duì)比（右圖為新方案）
?如上圖所示，在左側(cè)舊方案上，“海淘”“音樂(lè)” 分享鏈接卡片就是剛提到復(fù)用信息流的卡片樣式，視頻、紅包、音樂(lè)、文章…等等都分復(fù)用了這類(lèi)卡片樣式，這種樣式占用大量空間，畫(huà)面切割感強(qiáng)，容易打破會(huì)話(huà)，左右的從屬關(guān)系弱并且多出一些無(wú)用信息。
在布局上，國(guó)內(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)了大批的用戶(hù)習(xí)慣 ，那么我們能做些什么？視覺(jué)上是如何處理的？
我們這次的優(yōu)化工作主要是從三個(gè)維度進(jìn)行的：
圖形元素：由點(diǎn)、線(xiàn)、面構(gòu)成的一些基本圖形的表達(dá)
界面布局：X軸和Y軸上個(gè)體圖形和單位模塊之間的間距、尺寸關(guān)系
單位模塊：紅包、名片、圖片、地圖、視頻、音樂(lè)….
圖形元素
先說(shuō)下圖形元素，因?yàn)闅馀輹?huì)大量的出現(xiàn)，所以我們著重說(shuō)一下氣泡?，微博氣泡有個(gè)比較明顯的問(wèn)題就是，氣泡角過(guò)于尖銳并頂著用戶(hù)頭像，吸引無(wú)效注意力并讓人產(chǎn)生不適感。
???對(duì)比微信，微博氣泡角不適感更強(qiáng)，主要有兩個(gè)原因：
1. 微信黑色文字最強(qiáng)，綠色氣泡次之，背景最弱，它的明度是呈現(xiàn)逐層遞減的，突出了文字，微博氣泡藍(lán)色背景最強(qiáng)，文字次之，背景最弱，這時(shí)氣泡角的問(wèn)題就變得特別明顯。
2. 第二個(gè)原因微信綠色氣泡明度更高，更融背景，微博藍(lán)色氣泡的明度更低與背景反差更大。
怎么解決這個(gè)問(wèn)題？我們做了一個(gè)簡(jiǎn)化了的氣泡打磨過(guò)程，如下圖：
從圖1-2，我們先解決氣泡角造型的不適問(wèn)題，之前圓角過(guò)小且有對(duì)外指向性，顯得生硬，我們加大了圓角角度，讓整個(gè)氣泡感更強(qiáng)，但該方案有個(gè)明顯的問(wèn)題，氣泡角并沒(méi)有指向頭像。
從圖2-3，調(diào)整氣泡角指向問(wèn)題，但該方案運(yùn)用到圖片、紅包設(shè)計(jì)時(shí)我們發(fā)現(xiàn)，圓角不對(duì)稱(chēng)性讓人覺(jué)得怪異，尤其是紅包這種具有中國(guó)傳統(tǒng)特色的設(shè)計(jì)時(shí)更加明顯。
最終從圖3-4，我們調(diào)整氣泡角的位置，保護(hù)了圓角的對(duì)稱(chēng)性，同時(shí)讓氣泡角下弧線(xiàn)更加平滑與頭像關(guān)聯(lián)，從而降低了原氣泡角過(guò)于激烈的視覺(jué)樣式。
看看我們具體是如何調(diào)整的：
實(shí)際上圖形打磨是個(gè)發(fā)現(xiàn)問(wèn)題解決問(wèn)題的過(guò)程，但它更像一個(gè)樹(shù)狀結(jié)構(gòu)，每一像素變化都會(huì)帶來(lái)圖形指向、造型契合度、整體性不一樣的感受，我們需要去平衡它們的關(guān)系，并選取最優(yōu)方案，看看最終方案我們是如何去平衡圓角、氣泡角、頭像之間的關(guān)系的。
△ 氣泡最終方案
?最終方案中，圓角大小為單行氣泡四分之一高度，氣泡與頭像、氣泡角與頭像的間距都處于1個(gè)單位的間距，氣泡角與圓角轉(zhuǎn)角處，為2分之1單位剛好保護(hù)了圓角對(duì)稱(chēng)感不被破壞。
我們認(rèn)為合適的圓角角度既能勾勒出曲線(xiàn)的柔美，又能保證形體的穩(wěn)定，并且可以幫助用戶(hù)將目光引向中心，突出對(duì)話(huà)內(nèi)容。
這種經(jīng)過(guò)深度打磨的圖形能讓界面顯得更穩(wěn)定、可靠?。
界面布局
舊的界面布局有我們剛剛提到的畫(huà)面切割感強(qiáng)，從屬關(guān)系弱，空間利用率低等問(wèn)題，從下圖可能較為直觀的對(duì)比出一些問(wèn)題：
△ 新舊布局對(duì)比（右圖為新布局）
1. 橫軸布局的變化
在保證內(nèi)容顯示的基礎(chǔ)上，收縮了空間，調(diào)整文字內(nèi)容的最大寬度，文字與氣泡的間距，而這節(jié)約出來(lái)的空間讓界面更緊湊，區(qū)域劃分更加明顯，而這些間距關(guān)系變化也充分利用了格式塔原理的相似性、接近性和對(duì)稱(chēng)性，讓界面單位和個(gè)體的層級(jí)不被破壞性…
△ 橫軸變化
2. 縱軸布局的變化
間距關(guān)系從一種新增至兩種，增強(qiáng)他人態(tài)與主人態(tài)之間對(duì)話(huà)內(nèi)容的間距關(guān)系劃分，強(qiáng)化了氣泡的縱向分組，進(jìn)一步強(qiáng)化從屬關(guān)系。
△ 縱軸變化
單位模塊
單位模塊主要都是一些顯示效果問(wèn)題，例如，圖片太小、LBS識(shí)別度低、紅包太弱等...如下圖所示：
△ 舊方案
1. 合理的圖片尺寸
當(dāng)圖片與氣泡最大寬度呈黃金分割比例之時(shí)，既不會(huì)出現(xiàn)加載效率和流程性問(wèn)題，又能保證一定的舒適度。
2. 增強(qiáng)LBS的可用性
我們加強(qiáng)了LBS信息顯示和識(shí)別度，讓用戶(hù)在對(duì)話(huà)頁(yè)就能獲取到相關(guān)地理位置信息，讓LBS的可用性和實(shí)際場(chǎng)景更符合。
3. 紅包體驗(yàn)升級(jí)
強(qiáng)化了紅包的顯示效果，并使之更具中國(guó)特色。
總結(jié)
我們這次優(yōu)化的目標(biāo)是思考能為用戶(hù)解決什么問(wèn)題？核心是聚焦對(duì)話(huà)。細(xì)節(jié)的深度挖掘打磨、布局梳理、強(qiáng)調(diào)互動(dòng)性等等...所要傳達(dá)的視覺(jué)表現(xiàn)都是建立在這個(gè)目標(biāo)之上。
多角度，不同因素綜合考慮，在美感與實(shí)用性中尋找平衡，合理的運(yùn)用一些設(shè)計(jì)法則，與實(shí)際用戶(hù)場(chǎng)景結(jié)合，能讓界面變得更加舒適、可靠。
「優(yōu)設(shè)有不少內(nèi)部資料，挑幾個(gè)好的給大家」
- 網(wǎng)易內(nèi)部設(shè)計(jì)規(guī)范：《內(nèi)部教程！超實(shí)用6步透視網(wǎng)易設(shè)計(jì)規(guī)范（附完整PDF下載）》
- 臉書(shū)內(nèi)部的互評(píng)過(guò)程：《內(nèi)部傳統(tǒng)項(xiàng)目！揭秘FACEBOOK 設(shè)計(jì)互評(píng)的實(shí)戰(zhàn)過(guò)程》
- 公司內(nèi)部的交互設(shè)計(jì)培訓(xùn)：《內(nèi)部培訓(xùn)資料！幫你從零開(kāi)始掌握交互設(shè)計(jì)的學(xué)習(xí)筆記》
原文地址：weibo.com
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評(píng)論！每天贏獎(jiǎng)品
點(diǎn)擊 登錄 后，在評(píng)論區(qū)留言，系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今，是國(guó)內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái)，提供獎(jiǎng)品贊助 聯(lián)系我們
AI輔助海報(bào)設(shè)計(jì)101例
已累計(jì)誕生 737 位幸運(yùn)星
發(fā)表評(píng)論
↓ 下方為您推薦了一些精彩有趣的文章熱評(píng) ↓