編者按：沖著這個(gè)神器，這篇文章就不能放過！今天我們將對(duì)一個(gè)旅游網(wǎng)站進(jìn)行徹底大變身，驚喜的是，借助神器的力量，改造思路非常清晰，改造效果非同一般地好。沒有改版經(jīng)驗(yàn)的設(shè)計(jì)師，看完你會(huì)回來轉(zhuǎn)發(fā)的 >>>

看看日本設(shè)計(jì)師如何通過，精細(xì)化熱圖優(yōu)化網(wǎng)站設(shè)計(jì) —— 日本旅游網(wǎng)站。

本案例所需數(shù)據(jù)都通過國外免費(fèi)試用工具Ptengine采集。

工具地址：www.ptengine.com
分析網(wǎng)站：http://www.jtb-grandtours.jp/

（提取數(shù)據(jù)日期：2014年6月9日～6月15日）

一、首頁用戶點(diǎn)擊集中區(qū)域

被集中點(diǎn)擊的地方?jīng)]有設(shè)置跳轉(zhuǎn)鏈接，浪費(fèi)了用戶點(diǎn)擊。

[改善對(duì)策]

用戶產(chǎn)生大量點(diǎn)擊區(qū)域說明這是用戶關(guān)注的內(nèi)容，請(qǐng)看一下的原因分析。

「旅游檢索（頁面的左下方）」

當(dāng)用戶搜索旅游產(chǎn)品，「旅游檢索」應(yīng)該具有一定引導(dǎo)的作用。但是在「旅游檢索」上卻有很多點(diǎn)擊數(shù)。雖然查看「旅游檢索」下方的內(nèi)容就可以了解到旅游檢索的信息，但是下方的內(nèi)容并沒有被用戶很好關(guān)注。

原因就是「旅游檢索」的字體有顏色問題?？v觀整個(gè)網(wǎng)站你就會(huì)明白，藍(lán)色字體的文字基本上都是有跳轉(zhuǎn)鏈接的。因此，對(duì)于也使用了藍(lán)色字體樣式的「旅游檢索」不知不覺間也被誤認(rèn)為有跳轉(zhuǎn)鏈接了。從設(shè)計(jì)角度來說，很能理解想將字體變?yōu)樗{(lán)色讓頁面整體上看來統(tǒng)一，但是這種方式讓用戶的理解產(chǎn)生混亂了。

作為改善對(duì)策，為不讓用戶誤認(rèn)為是跳轉(zhuǎn)鏈接，可以將藍(lán)色字體改成黑色字體。

二、滑動(dòng)條幅廣告的使用方法

第一個(gè)條幅的注意力視圖變紅，說明用戶集中閱覽了滑動(dòng)條幅廣告。雖然廣告圖片沒有跳轉(zhuǎn)鏈接不會(huì)進(jìn)行跳轉(zhuǎn),但是這么多點(diǎn)擊集中在此，是對(duì)用戶的點(diǎn)擊是一種極大的浪費(fèi)。

[改善對(duì)策]

這可能是因?yàn)橛脩艨吹搅藢?dǎo)游的照片才進(jìn)行點(diǎn)擊的。有很多曾在網(wǎng)站內(nèi)閱覽了導(dǎo)游博客的用戶再次訪問網(wǎng)站時(shí)，看到了導(dǎo)游們并列的照片，所以想點(diǎn)擊照片跳轉(zhuǎn)到導(dǎo)游的博客頁去。這也就意味著那些被點(diǎn)擊過的導(dǎo)游非常的吸引人的地方。那我們就應(yīng)該針對(duì)吸引人的內(nèi)容（導(dǎo)游博客），設(shè)置深度跳轉(zhuǎn)鏈接，加深用戶的訪問深度。

三、受歡迎內(nèi)容的活性化

導(dǎo)游的博客頁集結(jié)了很多點(diǎn)擊。頁面中部相同內(nèi)容的廣告也集結(jié)了很多點(diǎn)擊。

就如上述所說，比較受歡迎的內(nèi)容都被點(diǎn)擊了很多次。既然這么受歡迎，那作為一個(gè)專欄將其大量的展示出來會(huì)如何呢？如果就以當(dāng)前狀態(tài)來說，不加入全局導(dǎo)航或者引導(dǎo)廣告跳轉(zhuǎn)的話，就不能發(fā)現(xiàn)新更新的信息。若將博客按下述的形式去改、使之在首頁就能了解到更新信息或內(nèi)容的話，讓更多的新訪問用戶也能比較容易的了解到讓更多的用戶也能閱覽到博客頁。所以受關(guān)注多的內(nèi)容就應(yīng)該積極的展示出來。

例：

四、招牌旅游內(nèi)容

介紹景點(diǎn)內(nèi)容頁，用戶的視線越集中瀏覽的區(qū)域、注意力視圖就越紅。

注意力視圖最紅的部分表明了用戶的興趣所在。要因歸結(jié)為以下3點(diǎn)。

1. 是因?yàn)榫唧w的旅游內(nèi)容很好（想去北歐4國家！）
2. 招牌旅游的類型本身很有人氣（如果可行的話就想看看?。?/li>
3. 表示方法（網(wǎng)頁設(shè)計(jì)）很好（被界面和標(biāo)題所吸引?。?/li>

根據(jù)上述3點(diǎn)來做深層次的分析。例如：旅游的內(nèi)容會(huì)隨時(shí)的做更新，針對(duì)更新期間內(nèi)的注意力視圖進(jìn)行比較，查看熱圖的色彩深度是否有差異。如果有差異，那么可能是被旅游的內(nèi)容所誘導(dǎo)、熱圖變紅的。反過來如果沒有差異，那要因就可以判斷為上述的第2、3點(diǎn)。如果通過改變表示方法（設(shè)計(jì)），熱圖也變化了的話，那就可以說是由于設(shè)計(jì)而被關(guān)注。假若不是這種情況，那就是招牌旅游產(chǎn)品本身很有人氣。

熱點(diǎn)圖是非常有效的功能，想具體學(xué)習(xí)的同學(xué)戳：《網(wǎng)頁細(xì)節(jié)優(yōu)化實(shí)戰(zhàn)！教你使用熱點(diǎn)圖優(yōu)化網(wǎng)頁設(shè)計(jì)》

像上述那樣分開去分析，就可以知道要因是什么了。脫個(gè)過清晰的了解要因，就可以通過強(qiáng)化該部分提高客戶的滿意度、并可以提升轉(zhuǎn)化效果了。另外這種做法也能得出用戶感興趣的內(nèi)容，達(dá)到通過宣傳單等傳統(tǒng)方式很難進(jìn)行效果。

工具地址：www.ptengine.com

【想學(xué)習(xí)改版經(jīng)驗(yàn)？來看合集！】

網(wǎng)易設(shè)計(jì)總監(jiān)的實(shí)戰(zhàn)經(jīng)歷！
《網(wǎng)頁優(yōu)化實(shí)戰(zhàn)！如何做好頁面優(yōu)化》

給政府機(jī)關(guān)做重設(shè)計(jì)的技巧！
《推陳出新！政務(wù)網(wǎng)站的重設(shè)計(jì)》

國外人氣爆高的大眾官網(wǎng)重設(shè)計(jì)案例！
《案例推薦！BEHANCE上超火的大眾官網(wǎng)重設(shè)計(jì)》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量89萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號(hào)：youshege