2012-11-21 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源： http://udc.weibo.com/2012/10/webim-v5-%e9%82%a3%e7%82%b9%e4%ba%8b%e5%84%bf-2/
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
為什么要改版？
隨著科技的發(fā)展，時(shí)代的進(jìn)步，微博用戶(hù)的上網(wǎng)設(shè)備也在快速更新。研究一下微博用戶(hù)的屏幕分辨率使用數(shù)據(jù)我發(fā)現(xiàn)，屏幕分辨率越來(lái)越高的同時(shí)，伴隨的一個(gè)數(shù)值，也就是顯示器顯示網(wǎng)頁(yè)外的空白面積也越來(lái)越大，如何利用好這部分空間是一個(gè)值得研究的課題。
前期看了一些同類(lèi)產(chǎn)品
1.Facebook
2.Gmail
3.RenRen
4.Taobao
5.Tencent weibo
6.Kaixin
7.Baidu hi
體驗(yàn)研究之上的網(wǎng)頁(yè)聊天產(chǎn)品后和設(shè)計(jì)師和產(chǎn)品共同討論，汲取其精華，去其糟粕，我有了這個(gè)設(shè)計(jì)的想法。
我定義了兩種模式，模式一和模式二。
模式二是在現(xiàn)有的webim的體驗(yàn)上只做了保守的一些嘗試：改進(jìn)了常駐狀態(tài)的視覺(jué)感受，將之前的在線狀態(tài)增加了塑造，提高其視覺(jué)上的存在感；將原來(lái)的聯(lián)系人列表的高度提高，以利用更多屏幕的自由空間。
模式一是將原有的底部常駐的狀態(tài)換成了側(cè)面長(zhǎng)條的常駐形式，這樣也是為了在不影響用戶(hù)感受的情況下利用屏幕空間，將聊天對(duì)象按照一些邏輯推薦展現(xiàn)給用戶(hù)，旨在增加使用場(chǎng)景，讓用戶(hù)更加方便使用和讓用戶(hù)更有可能使用；展開(kāi)后的聯(lián)系人面板用側(cè)面通欄的方式展現(xiàn)，這是一個(gè)較為大膽的嘗試，但由于展開(kāi)聯(lián)系人列表是用戶(hù)的主動(dòng)操作行為，并且收起的操作在空白區(qū)域、收起按鈕都有較為方便的分布，所以我認(rèn)為還是可以接受的。
上圖左邊為模式一，右邊為模式二。
關(guān)于模式一二的切換，我去了1000px左右為一個(gè)分水嶺。
屏幕分辨率高于1000px的我認(rèn)為是分辨率較高的用戶(hù)，這樣的用戶(hù)的屏幕有更多的空間來(lái)顯示我們的webim,所以我們將模式一和模式二讓他可以在底部區(qū)域的設(shè)置中切換，但默認(rèn)展現(xiàn)給它較為大膽的模式二。
而屏幕分辨率低于1000px的我認(rèn)為是分辨率較低的用戶(hù)，這些用戶(hù)的屏幕空間比較有限，大部分為800*600的用戶(hù)，他們?nèi)匀煌菩斜容^保守的模式一，用占空間較小的底部常駐模式。
下面我來(lái)說(shuō)說(shuō)模式二.
這個(gè)模式它的目的合理利用高分辨率用戶(hù)右側(cè)的空閑區(qū)域，增加用戶(hù)使用網(wǎng)頁(yè)連天的使用場(chǎng)景。模式二的默認(rèn)狀態(tài)是常駐在右側(cè)的50px寬的細(xì)長(zhǎng)條，從上到下的用戶(hù)是按照在線和常用優(yōu)先的邏輯排列，這里可以快速的找到想聯(lián)系的人。其次，用鼠標(biāo)在頭像劃過(guò)時(shí)，會(huì)顯示當(dāng)前鼠標(biāo)停駐的那個(gè)聯(lián)系人所發(fā)出的最后一條原創(chuàng)的微博。這樣，用戶(hù)可以更加方便的了解這些用戶(hù)的最近的動(dòng)態(tài)，我們希望用他人的這些動(dòng)態(tài)來(lái)激發(fā)一些聊天的欲望和增加一些場(chǎng)景。
浮層支持圖片、音樂(lè)、視頻這些多媒體的解析，可以方便的與互粉的好友分享這些內(nèi)容帶來(lái)的愉悅和溝通。
默認(rèn)為較小的預(yù)覽模式，點(diǎn)擊預(yù)覽模式的縮略媒體可以展開(kāi)較為完整的瀏覽模式，這樣做的目的也是為了控制整個(gè)體驗(yàn)的流暢和循序漸進(jìn)的感覺(jué)。
關(guān)于新產(chǎn)品的兩個(gè)模式已經(jīng)說(shuō)完了，下面說(shuō)說(shuō)這次改版對(duì)用戶(hù)界面的優(yōu)化。
我們對(duì)比以下改版前后的界面。
改變了聯(lián)系人列表的操作區(qū)域，增加了列表的高度。
將搜索由之前的頂部放置改為了放置在底部，這樣讓頭部的操作區(qū)域顯得輕盈些，把搜索的地位略為調(diào)低，這樣讓整個(gè)界面的布局更有據(jù)可循。
將之前的在線狀態(tài)的icon增加了塑造，提高以下整個(gè)產(chǎn)品的氣質(zhì)。
對(duì)聊天窗口的界面也做了氣質(zhì)上的調(diào)整：優(yōu)化了頂部的高度；為了與新版網(wǎng)頁(yè)的風(fēng)格相一致，改變表情、圖片、附件、聊天記錄和發(fā)送按鈕的視覺(jué)風(fēng)格；這一切為了提高和改善聊天時(shí)的用戶(hù)體驗(yàn)。
以上就是這次webim改版的一些情況。下面點(diǎn)名感謝一下一直奮斗在前線的構(gòu)件的同學(xué)：@青春的猴小野 @ice木木 和專(zhuān)業(yè)上意見(jiàn)的指導(dǎo)：@阿bingben @eason-shao
我們一起期待新產(chǎn)品的到來(lái)吧:)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net