噹噹無線16年首頁改版設計分享

發表於2016-06-30

1

一開始有些漫無頭緒,思前想來說一下為什麼改首頁吧!

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

一、首先分析一下當前的一些小問題:

1、距上一次首頁改版已超半年之久,在快速發展的網際網路時代我們必須快速的做出反應,順應行業發展。

2、之前的設計規則已經無法滿足現有的運營形式,導致出現各種不符合規範的文字顏色,文字大小,組合排列,圖片、尺寸等。

3、在整個實施過程中沒有一個合理的稽核機制進行後期改進和監督。

4、欄目多而不穩定,使用3個到5個坑位的較多,在有限的空間資源浪費。

5、欄目內容層次不清晰,大小入口關係不夠明確。

6、在視覺上面沒能有效的結合運營不同商品、活動、促銷資訊、做相應的模版區分。

綜合上述的這些問題,首頁改版勢在必行,而此次首頁改版僅僅只是一個開始……

二、接下來我們著手於對首頁的具體優化。

我們根據線上實際情況展開具體分析,以運營為基礎結合運營特點進行合理有效的改造,最終做出綜合呈現。

1、整體視覺結構重新規劃,對細節的揣摩和反覆驗證。

2、著重運營促銷資訊,突出賣點熱點,更加符合當前產品運營邏輯。

3、欄目定位清晰,視覺層次分明,便於使用者快速查詢想要的內容。

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

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

三、過程細節。

1、統一基類整理首頁文字字型、顏色、大小、促銷資訊、角標等。
2
2、模版
制定模版輸出,建立共享目錄文件,後期跟蹤稽核。
3
3、廣告
重新設計了導航欄的icon和搜尋,規範廣告的製作要求。
4
4、功能icon
增加首屏功能圖示數量,突出品牌特色頻道。
5
5、欄目
坑位數量從最少三個增加到最少6個、突出促銷資訊、劃分欄目權重和層次,統一促銷樣式、文字大小、預設顏色,強化標題與商品圖的呼應。
6
6、促銷活動
整齊劃一的促銷標識,拒絕亂擺亂放。
7
7、主題館
將原來2列改為4列柵格與欄目統一,視覺上更加集中整齊。
8
8、整體效果對比
9
10

總結

新首頁主要強調運營結合和實際應用的最終落地,目的只是為了更好的實現流量轉換,利用更精細的設計在有限的空間內實現快速有效的流量分發,最後感謝每一位支援我們工作的好朋友們,噹噹無線UED只為更好的體驗。

相關文章