初步風(fēng)格制訂

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

設(shè)計(jì)了起初3個(gè)版本，經(jīng)過(guò)討論，決定第2款風(fēng)格更加接近簡(jiǎn)潔，與網(wǎng)站風(fēng)格更協(xié)調(diào)的目標(biāo)。

風(fēng)格確定下來(lái)，是第一步，在其基礎(chǔ)上進(jìn)行下面的優(yōu)化擴(kuò)展。

不同顏色的確定

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

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

位置調(diào)整

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

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

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

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

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

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

最終效果：

黃頁(yè)：

旺鋪：

小結(jié)：

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