阿里旺鋪「企業在線」作為基於Web的即時通訊工具，經歷從「干擾買家」到「商務簡潔風格」的完整蛻變。本文完整記錄問題診斷、用例重構、視覺重塑、色彩數據化決策、佈局位置優化全過程。

核心問題診斷

1. 視覺風格老化：大色塊強漸變風格與網站整體簡潔風格脫節。
2. 系統自動彈窗干擾：買家瀏覽旺鋪時遭遇非主動發起的系統消息彈窗，嚴重破壞體驗。

優化目標雙重奏

1. 提升買賣雙方體驗，特別是減少對買家的無端干擾。
2. 視覺風格與旺鋪統一，簡潔化；未讀提示位置調整，不遮擋主體區域。

交互模型重構：從「系統推」到「人主動」

之前：系統提供「自動發送消息到前台」功能，買家被動接收。
之後：移除自動發送功能，彈窗消息僅由賣家主動發起。買家瀏覽過程零干擾，體驗質變。

視覺重塑：更商務、更簡潔

風格定調：微漸變 + 低飽和

拋棄大色塊強漸變，採用微漸變扁平化風格；情緒板提取色彩，降低飽和度弱化企業在線視覺權重，融入旺鋪整體。

經討論確定第2款風格最貼近「簡潔、協調」目標。

色彩數據化決策：從12套精簡到6套

舊版12套皮膚顏色過豐富導致選擇困難。收集使用數據，保留使用率Top 5色系（藍、綠、紅、橙、紫）+ 新增灰色系作為默認選項。色彩調整原則：兼顧舊版用色慣性、旺鋪模板庫搭配協調性、與確定風格版本飽和度一致。

佈局位置優化：基於場景與習慣的幾何學

展示形式對比

• 浮動列表/圖標/窗口：常收起至頂/右/底部。
• 固定圖標：如Facebook固定右下角。

旺鋪場景專屬決策

• 誠信通用戶可設營銷海報佔據右下角 → 企業在線避開右下角。
• 用戶習慣慣用右側 → 選擇頁面最右側固定。
• 消息提示彈窗：從左側移至企業在線頂部平齊，不遮擋旺鋪/Offer Detail主體內容。
• 響應式策略：≤1024px默認收起，>1024px默認展開，兼顧小屏空間與大屏效率。

最終效果驗收

黃頁頁面

旺鋪頁面

小結：細節決定成敗的平衡藝術

從用戶視角出發，以數據為依據，在純視覺設計與用戶體驗間尋找平衡點，過程必然伴隨取捨。不能忽視任何微小細節，往往正是這些細節決定體驗是否完美。

文章來源：aliued.cn