初步風格制訂

從目前設計中盛行的微漸變出發(fā)，拋棄了老版中采用較大色塊及強烈漸變的風格，這樣視覺上會顯得更平一些。運用情緒板，提取了認為比較適合的顏色，用于最初風格的設計，為了在整體頁面中對企業(yè)在線的角色進行一些弱化，飽和度上也有所減弱。

設計了起初3個版本，經過討論，決定第2款風格更加接近簡潔，與網站風格更協(xié)調的目標。

風格確定下來，是第一步，在其基礎上進行下面的優(yōu)化擴展。

不同顏色的確定

之前企業(yè)在線皮膚共有12套，顏色過于豐富，為了達到更為簡潔，整體協(xié)調的目標，在顏色上進行了調整和篩選。努力做到在滿足讓用戶有多種選擇的同時，又不至于出現(xiàn)顏色過于雜亂而產生困惑的情況，于是收集了當前關于企業(yè)在線顏色版本使用的相應數(shù)據(jù)。

最終保留了使用數(shù)最高的前5位顏色，另外增加了一款灰色系，將灰色版本設置為默認選項。這六款顏色分別是灰，藍，綠，紅，橙，紫。在顏色的選擇上，進行了多次調整，既考慮之前老版的用色，又參考現(xiàn)有旺鋪模板庫中不同顏色類型，與之前確定風格版本的顏色飽和度相近，盡量選取與該色系旺鋪各版本都能較好協(xié)調搭配的顏色。

位置調整

企業(yè)在線是基于web瀏覽器的即時通訊工具。目前即時通訊工具的形式多樣，它的展示形式是以網頁為媒介。常見的即時通訊工具的web版本，如webqq 、web版百度HI，這類在線IM主要的功能局限于即時的交流溝通，側重點在消息與文件傳輸?shù)壬贁?shù)功能。針對社區(qū)、論壇以及普通網頁開發(fā)的即時聊天插件。

比如xtalk，用戶打開網站后，可以看到在網站右下角生成的一個聊天窗口，可以跟同時瀏覽該網站的用戶進行即時的交流。這種Web IM插件旨在提高網站用戶的活躍度，用戶在獲取網站信息同時，還能同時和對同樣話題感興趣進行即時交流，深入挖掘網站的互動潛力。

展現(xiàn)方式主要有浮動列表式，浮動圖標式，浮動窗口方法和固定圖標方式。為了對主體區(qū)域減少干擾，很多收起或隱藏到頁面的頂部、右側和底部。

比如facebook的聊天工具，是采用固定方式，位于頁面右下方。

由于現(xiàn)在的誠信通用戶在旺鋪中可設置營銷海報，這塊banner位置就位于頁面右下方，會形成干擾，同時從用戶的使用習慣出發(fā)，考慮放在頁面最右側，只是企業(yè)在線區(qū)域的消息提示彈出框位置從左側調整到上方，不遮擋旺鋪和offerdetail的主體內容，只有對于1024px分辨率情況下，默認為收起狀態(tài)，大于1024px情況下則默認為展開狀況，這樣既對主體區(qū)域減少干擾，又使客戶方便點擊，隨時與賣家進行溝通。

彈出對話框位置調整，之前彈框默認位置沒有固定，現(xiàn)在調整為與企業(yè)在線頂部平齊，更好體現(xiàn)整體性，更加整齊規(guī)范。

最終效果：

黃頁：

旺鋪：

小結：

從用戶的角度出發(fā)，用數(shù)據(jù)做依據(jù)，在純粹的視覺設計和用戶體驗之間找到一個平衡點，過程可能會需要一些取舍。不能忽視每一個小細節(jié)，有時候這些細小之處正是決定用戶體驗是否完美的關鍵。