淺談印像派首頁改版之視覺篇
發(fā)表時間:2012-06-08內(nèi)容來源:http://uedc.163.com/9320.html作者: 網(wǎng)易用戶體驗(yàn)中心
.
.
.
.
.
前段時間在做印像派的全站改版,其中包括首頁、列表頁、詳情頁、主題頁等頁面,整個項(xiàng)目歷時較久。前段時間新版印像派上線了,首頁初稿由蔥頭同學(xué)設(shè)計定稿的,后期由我跟進(jìn)優(yōu)化,現(xiàn)在正好以印像派首頁為切入點(diǎn)做個設(shè)計回顧。
.
網(wǎng)易印像派(yxp.163.com)是網(wǎng)易公司推出的個性產(chǎn)品服務(wù)平臺,在網(wǎng)易印像派可以網(wǎng)上沖印各類數(shù)碼產(chǎn)品。隨著印像派業(yè)務(wù)不斷擴(kuò)展,幾年前設(shè)計的首頁無論是在交互還是視覺上都已經(jīng)無法滿足現(xiàn)有的業(yè)務(wù)需求,所以首頁的改版是一件遲早要提上議程的事情。
.
.
.
.
首頁改版是一項(xiàng)歷時較久、參與人員較多的工程,所以必須有一個清晰有效的項(xiàng)目流程。
項(xiàng)目流程:
.
1.項(xiàng)目立項(xiàng)
產(chǎn)品負(fù)責(zé)人寫產(chǎn)品計劃書,確定產(chǎn)品的市場需求點(diǎn)和功能需求點(diǎn),和相關(guān)業(yè)務(wù)部門負(fù)責(zé)人開會討論確認(rèn)需求,隨后召集交互、視覺、前端、開發(fā)等項(xiàng)目相關(guān)人員確定各自的任務(wù)時間點(diǎn)。
2.用研、交互
用戶研究員根據(jù)近一兩年的數(shù)據(jù)走向,重新定義目標(biāo)用戶群,進(jìn)而細(xì)化產(chǎn)品概念。交互根據(jù)需求繪制產(chǎn)品原型。
3.視覺設(shè)計
視覺設(shè)計師前期參與項(xiàng)目會議了解需求后,根據(jù)產(chǎn)品原型和產(chǎn)品功能策劃書進(jìn)行視覺設(shè)計。視覺設(shè)計在整個項(xiàng)目中起到承上啟下的作用,既要和產(chǎn)品負(fù)責(zé)人溝通產(chǎn)品需求又要和前后端工程師溝通頁面細(xì)節(jié)。
4.開發(fā)
視覺評審會上確認(rèn)視覺稿后,接下來到開發(fā)階段。在整個項(xiàng)目中此環(huán)節(jié)耗時最長,因此視覺稿在交付開發(fā)前要做好標(biāo)注和切圖,以免延誤開發(fā)。
5.測試
前端測試環(huán)節(jié)也是非常重要的一環(huán),如果你認(rèn)為視覺設(shè)計師的工作止于視覺稿定稿那就錯了,不到上線絕不能松懈,測試階段經(jīng)常出現(xiàn)的問題有“淺灰色底怎么變成白色了”、“這里怎么偏移了2像素”“圖片和文字不對齊”,所以想要做到線上效果和視覺稿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)生的,這是一個從設(shè)計到用戶數(shù)據(jù)反饋再回到設(shè)計的驗(yàn)證過程。
.
.
.
.
1.老版首頁的視覺風(fēng)格過時,需要重新全面包裝,提升品牌認(rèn)知度。
2.版塊過多,產(chǎn)品區(qū)得不到更好的展示。
3.老版的導(dǎo)航條為二級全展開導(dǎo)航,這種全展開導(dǎo)航的弊端是導(dǎo)航會隨著內(nèi)容的增加而變長,會導(dǎo)致導(dǎo)航條過長,不利于瀏覽。
4.三欄的頁面布局導(dǎo)致信息擁擠。
5.輪播的交互操作不夠便捷,視覺樣式不夠簡潔。
.
.
.
.
1.形象色的重新提煉
用戶打開一個頁面,首先映入眼簾的是色彩,網(wǎng)站形象色的重要性猶如企業(yè)的LOGO,一個成功的網(wǎng)站形象色應(yīng)該能使用戶一看到該顏色就聯(lián)想到該網(wǎng)站。因此視覺改版首先要做的是主色調(diào)的提取,只有確定了主色調(diào)才能往下展開其他設(shè)計。
.
產(chǎn)品設(shè)計應(yīng)該是先理性后感性的。先理性的分析一下用戶屬性,再感性把握主色調(diào)的走向,下面來看看印像派的用戶數(shù)據(jù)分析:
.
.
經(jīng)過上面的用戶數(shù)據(jù)分析,我們可以看出印像派的主要用戶為25-31歲的年輕女性,大學(xué)本科的學(xué)歷,收入為3K-5K。這類年輕女性用戶的消費(fèi)能力屬于中上水平,有一定的審美能力,因此主色調(diào)的重新提煉的關(guān)鍵詞應(yīng)是:女人、清新、時尚、小資、活力。
老版的紅色飽和度太高,這種大紅色辨識度太低,品質(zhì)感也不夠。最終選了飽和度稍低,色相偏粉紅的紅色,搭配大片留白的頁面,新的紅色看起來既女人又清新,到達(dá)了上文數(shù)據(jù)分析的顏色需求。
2.重新規(guī)劃版塊
摒棄官方動態(tài)、微博、買家熱評等雞肋版塊,加強(qiáng)力度突出焦點(diǎn)輪播banner、產(chǎn)品促銷區(qū)等重要版塊,讓產(chǎn)品區(qū)得到更好的展示。
3.導(dǎo)航欄
原導(dǎo)航欄信息混亂、圖標(biāo)簡陋。新版導(dǎo)航條以文字信息為主體進(jìn)行設(shè)計,并重新設(shè)計ICON,看起來簡潔清爽,而且一級導(dǎo)航比原來的二級導(dǎo)航更利于后期維護(hù)。
4.頁面布局
三欄布局能在一屏內(nèi)容納較多的信息量,常見于大型門戶網(wǎng)站。印像派本身B2C的定位不同于門戶網(wǎng)站,沒有浩瀚如海的信息量,因此應(yīng)在有限的首頁空間里將產(chǎn)品更好的展示出來。
.
舊版印像派的三欄布局從視覺上看起來擁擠混亂,在短時間內(nèi)難以將注意力集中在重點(diǎn)區(qū)域,用戶無法清晰地跟隨頁面節(jié)奏進(jìn)行有效瀏覽。因此我們需要量體裁衣,針對網(wǎng)站的定位和容量進(jìn)行重新梳理,選擇適合的頁面布局。
5.banner輪播
通過下圖可以看出老版的banner輪播樣式的操作不夠人性化,當(dāng)前幀和其他幀距離太遠(yuǎn),來回點(diǎn)擊成本略高。
以上是前端工程師GG給我看chrome/IE6瀏覽器下的輪播樣式測試效果,發(fā)現(xiàn)這2個瀏覽器都無法完全支持視覺稿的輪播效果,而且高級瀏覽器和IE6下的樣式差異很大,這確實(shí)是一件讓人郁悶的事情。頭疼之余,先讓我們看看其他網(wǎng)站的輪播是怎么兼容多種瀏覽器的:
最后,歡迎大家訪問印像派:yxp.163.com
