淺談網(wǎng)易印像派首頁(yè)改版設(shè)計(jì)

二、前言
 

前段時(shí)間在做印像派的全站改版，其中包括首頁(yè)、列表頁(yè)、詳情頁(yè)、主題頁(yè)等頁(yè)面，整個(gè)項(xiàng)目歷時(shí)較久。前段時(shí)間新版印像派上線了，首頁(yè)初稿由蔥頭同學(xué)設(shè)計(jì)定稿的，后期由我跟進(jìn)優(yōu)化，現(xiàn)在正好以印像派首頁(yè)為切入點(diǎn)做個(gè)設(shè)計(jì)回顧。

.

網(wǎng)易印像派(yxp.163.com)是網(wǎng)易公司推出的個(gè)性產(chǎn)品服務(wù)平臺(tái)，在網(wǎng)易印像派可以網(wǎng)上沖印各類數(shù)碼產(chǎn)品。隨著印像派業(yè)務(wù)不斷擴(kuò)展，幾年前設(shè)計(jì)的首頁(yè)無(wú)論是在交互還是視覺(jué)上都已經(jīng)無(wú)法滿足現(xiàn)有的業(yè)務(wù)需求，所以首頁(yè)的改版是一件遲早要提上議程的事情。
 

三、流程

首頁(yè)改版是一項(xiàng)歷時(shí)較久、參與人員較多的工程，所以必須有一個(gè)清晰有效的項(xiàng)目流程。

項(xiàng)目流程：

1.項(xiàng)目立項(xiàng)

產(chǎn)品負(fù)責(zé)人寫(xiě)產(chǎn)品計(jì)劃書(shū)，確定產(chǎn)品的市場(chǎng)需求點(diǎn)和功能需求點(diǎn)，和相關(guān)業(yè)務(wù)部門(mén)負(fù)責(zé)人開(kāi)會(huì)討論確認(rèn)需求，隨后召集交互、視覺(jué)、前端、開(kāi)發(fā)等項(xiàng)目相關(guān)人員確定各自的任務(wù)時(shí)間點(diǎn)。

2.用研、交互

用戶研究員根據(jù)近一兩年的數(shù)據(jù)走向，重新定義目標(biāo)用戶群，進(jìn)而細(xì)化產(chǎn)品概念。交互根據(jù)需求繪制產(chǎn)品原型。

3.視覺(jué)設(shè)計(jì)

視覺(jué)設(shè)計(jì)師前期參與項(xiàng)目會(huì)議了解需求后，根據(jù)產(chǎn)品原型和產(chǎn)品功能策劃書(shū)進(jìn)行視覺(jué)設(shè)計(jì)。視覺(jué)設(shè)計(jì)在整個(gè)項(xiàng)目中起到承上啟下的作用，既要和產(chǎn)品負(fù)責(zé)人溝通產(chǎn)品需求又要和前后端工程師溝通頁(yè)面細(xì)節(jié)。

4.開(kāi)發(fā)

視覺(jué)評(píng)審會(huì)上確認(rèn)視覺(jué)稿后，接下來(lái)到開(kāi)發(fā)階段。在整個(gè)項(xiàng)目中此環(huán)節(jié)耗時(shí)最長(zhǎng)，因此視覺(jué)稿在交付開(kāi)發(fā)前要做好標(biāo)注和切圖，以免延誤開(kāi)發(fā)。

5.測(cè)試

前端測(cè)試環(huán)節(jié)也是非常重要的一環(huán)，如果你認(rèn)為視覺(jué)設(shè)計(jì)師的工作止于視覺(jué)稿定稿那就錯(cuò)了，不到上線絕不能松懈，測(cè)試階段經(jīng)常出現(xiàn)的問(wèn)題有“淺灰色底怎么變成白色了”、“這里怎么偏移了2像素”“圖片和文字不對(duì)齊”，所以想要做到線上效果和視覺(jué)稿100%吻合，經(jīng)常跑到技術(shù)GG那邊校稿是必不可少的。

6.上線

剛上線后要密切關(guān)注數(shù)據(jù)變化，根據(jù)數(shù)據(jù)分析、用戶反饋?zhàn)龀稣{(diào)整。

7.跟進(jìn)優(yōu)化

成功的產(chǎn)品是在優(yōu)化迭代中產(chǎn)生的，這是一個(gè)從設(shè)計(jì)到用戶數(shù)據(jù)反饋再回到設(shè)計(jì)的驗(yàn)證過(guò)程。

四、問(wèn)題

1.老版首頁(yè)的視覺(jué)風(fēng)格過(guò)時(shí)，需要重新全面包裝，提升品牌認(rèn)知度。

2.版塊過(guò)多，產(chǎn)品區(qū)得不到更好的展示。

3.老版的導(dǎo)航條為二級(jí)全展開(kāi)導(dǎo)航，這種全展開(kāi)導(dǎo)航的弊端是導(dǎo)航會(huì)隨著內(nèi)容的增加而變長(zhǎng)，會(huì)導(dǎo)致導(dǎo)航條過(guò)長(zhǎng)，不利于瀏覽。

4.三欄的頁(yè)面布局導(dǎo)致信息擁擠。

5.輪播的交互操作不夠便捷，視覺(jué)樣式不夠簡(jiǎn)潔。

五、優(yōu)化
 

1.形象色的重新提煉

用戶打開(kāi)一個(gè)頁(yè)面，首先映入眼簾的是色彩，網(wǎng)站形象色的重要性猶如企業(yè)的LOGO，一個(gè)成功的網(wǎng)站形象色應(yīng)該能使用戶一看到該顏色就聯(lián)想到該網(wǎng)站。因此視覺(jué)改版首先要做的是主色調(diào)的提取，只有確定了主色調(diào)才能往下展開(kāi)其他設(shè)計(jì)。

.

產(chǎn)品設(shè)計(jì)應(yīng)該是先理性后感性的。先理性的分析一下用戶屬性，再感性把握主色調(diào)的走向，下面來(lái)看看印像派的用戶數(shù)據(jù)分析：

經(jīng)過(guò)上面的用戶數(shù)據(jù)分析，我們可以看出印像派的主要用戶為25-31歲的年輕女性，大學(xué)本科的學(xué)歷，收入為3K-5K。這類年輕女性用戶的消費(fèi)能力屬于中上水平，有一定的審美能力，因此主色調(diào)的重新提煉的關(guān)鍵詞應(yīng)是：女人、清新、時(shí)尚、小資、活力。
 

老版的紅色飽和度太高，這種大紅色辨識(shí)度太低，品質(zhì)感也不夠。最終選了飽和度稍低，色相偏粉紅的紅色，搭配大片留白的頁(yè)面，新的紅色看起來(lái)既女人又清新，到達(dá)了上文數(shù)據(jù)分析的顏色需求。

2.重新規(guī)劃版塊

摒棄官方動(dòng)態(tài)、微博、買(mǎi)家熱評(píng)等雞肋版塊，加強(qiáng)力度突出焦點(diǎn)輪播banner、產(chǎn)品促銷區(qū)等重要版塊，讓產(chǎn)品區(qū)得到更好的展示。

3.導(dǎo)航欄

原導(dǎo)航欄信息混亂、圖標(biāo)簡(jiǎn)陋。新版導(dǎo)航條以文字信息為主體進(jìn)行設(shè)計(jì)，并重新設(shè)計(jì)ICON，看起來(lái)簡(jiǎn)潔清爽，而且一級(jí)導(dǎo)航比原來(lái)的二級(jí)導(dǎo)航更利于后期維護(hù)。

4.頁(yè)面布局

三欄布局能在一屏內(nèi)容納較多的信息量，常見(jiàn)于大型門(mén)戶網(wǎng)站。印像派本身B2C的定位不同于門(mén)戶網(wǎng)站，沒(méi)有浩瀚如海的信息量，因此應(yīng)在有限的首頁(yè)空間里將產(chǎn)品更好的展示出來(lái)。

.

舊版印像派的三欄布局從視覺(jué)上看起來(lái)?yè)頂D混亂，在短時(shí)間內(nèi)難以將注意力集中在重點(diǎn)區(qū)域，用戶無(wú)法清晰地跟隨頁(yè)面節(jié)奏進(jìn)行有效瀏覽。因此我們需要量體裁衣，針對(duì)網(wǎng)站的定位和容量進(jìn)行重新梳理，選擇適合的頁(yè)面布局。

5.banner輪播

通過(guò)下圖可以看出老版的banner輪播樣式的操作不夠人性化，當(dāng)前幀和其他幀距離太遠(yuǎn)，來(lái)回點(diǎn)擊成本略高。

以上是前端工程師GG給我看chrome/IE6瀏覽器下的輪播樣式測(cè)試效果，發(fā)現(xiàn)這2個(gè)瀏覽器都無(wú)法完全支持視覺(jué)稿的輪播效果，而且高級(jí)瀏覽器和IE6下的樣式差異很大，這確實(shí)是一件讓人郁悶的事情。頭疼之余，先讓我們看看其他網(wǎng)站的輪播是怎么兼容多種瀏覽器的：