做産品必看：當當無線16年首頁改版設計分享

一(one)開始有些漫無頭緒 ，思前想來(Come)說一(one)下爲(for)什麽改首頁吧！

首頁，簡單的(of)說就是(yes)一(one)些業務的(of)分發入口，說透徹一(one)些就是(yes)給各個(indivual)業務幾個(indivual)坑位填充各種售賣的(of)商品，我(I)相信在(exist)大(big)多 數人(people)眼中就是(yes)這(this)樣吧，但是(yes)對于(At)我(I)們(them)設計而言卻非常複雜，不(No)僅要(want)考慮業務方向、産品定位、資源分配等因素，還得顧及用(use)戶對當當産品的(of)品牌認知，設計上還需要(want)側重頁面的(of)視覺平衡，且每個(indivual)欄目 既要(want)有區分又要(want)保持相對一(one)緻（即所謂有層次有重點），從而可以(by)快速的(of)引導流量和(and)點擊量幫用(use)戶找到(arrive)想要(want)的(of)商品，最後還要(want)關注上線後的(of)數據變化。前提必須是(yes)好的(of)方向。難度雖然很大(big)，但我(I)們(them)責 無旁貸。

一(one)、首先分析一(one)下當前的(of)一(one)些小問題：

1、距上一(one)次首頁改版 已超半年之久，在(exist)快速發展的(of)互聯網時(hour)代我(I)們(them)必須快速的(of)做出(out)反應，順應行業發展。

2、之前的(of)設計規則已經無法滿足現有的(of)運營形式，導 緻出(out)現各種不(No)符合規範的(of)文字顔色，文字大(big)小，組合排列，圖片、尺寸等。

3、在(exist)整個(indivual)實施過程中沒有一(one)個(indivual)合理的(of)審核機制進行後期改 進和(and)監督。

4、欄目多而不(No)穩定,使用(use)3個(indivual)到(arrive)5個(indivual)坑位的(of)較多，在(exist)有限的(of)空間資源浪費。

5、欄目内容層次不(No)清 晰，大(big)小入口關系不(No)夠明确。

6、在(exist)視覺上面沒能有效的(of)結合運營不(No)同商品、活動、促銷信息、做相應的(of)模版區分。

綜合上述的(of)這(this)些問題，首頁改版勢在(exist)必行，而此次首頁改版僅僅隻是(yes)一(one)個(indivual)開始……

二、接下來(Come)我(I)們(them)着手于(At)對首頁的(of)具體優化

我(I)們(them)根據線上實際情 況展開具體分析，以(by)運營爲(for)基礎結合運營特點進行合理有效的(of)改造，最終做出(out)綜合呈現。

1、整體視覺結構重新規劃，對細節的(of)揣摩和(and)反複驗證 。

2、着重運營促銷信息，突出(out)賣點熱點，更加符合當前産品運營邏輯。

3、欄目定位清晰，視覺層次分明，便 于(At)用(use)戶快速查找想要(want)的(of)内容。

4、區分品類特點、重新欄目規劃、增加入口數量、提高欄目坑位使用(use)率。

5、 模版規範化提升運營質量和(and)導購入口的(of)吸引力。

三、過程細節

1、統一(one)基類整理首頁文字字體、顔色、大(big)小、促銷信息、角标等。

2、模版

制定 模版輸出(out)，建立共享目錄文檔，後期跟蹤審核。

3、廣告

重新設計了(Got it)導航欄的(of)icon和(and)搜索，規範廣告的(of)制作(do)要(want)求。

4、功能icon

增加首屏功能圖标數量，突出(out)品牌特色頻道。

5、欄目

坑位 數量從最少三個(indivual)增加到(arrive)最少6個(indivual)、突出(out)促銷信息、劃分欄目權重和(and)層次，統一(one)促銷樣式、文字大(big)小、默認顔色，強化标題與商品圖的(of)呼應。

6、促銷活動

整齊 劃一(one)的(of)促銷标識，拒絕亂擺亂放。

7、主題館

将原來(Come)2列改爲(for)4列栅格與欄目統一(one)，視覺上更加集中整齊。

8、整體效果對比

總結

新首頁主要(want)強 調運營結合和(and)實際應用(use)的(of)最終落地(land)，目的(of)隻是(yes)爲(for)了(Got it)更好的(of)實現流量轉換，利用(use)更精細的(of)設計在(exist)有限的(of)空間内實現快速有效的(of)流量分發，最後感謝每一(one)位支持我(I)們(them)工作(do)的(of)好朋友們(them)，當當無線UED隻爲(for)更好 的(of)體驗。