網(wǎng)頁細(xì)節(jié)優(yōu)化實(shí)戰(zhàn)！教你使用熱點(diǎn)圖優(yōu)化網(wǎng)頁設(shè)計(jì)

如果內(nèi)容為王的話，那么設(shè)計(jì)就是城堡。對于企業(yè)而言，好的網(wǎng)頁設(shè)計(jì)不僅包含了能夠引起訪客興趣的內(nèi)容，吸引目標(biāo)用戶，而且包含有直觀而漂亮的UI設(shè)計(jì)，促進(jìn)銷售。許多設(shè)計(jì)師喜歡將自己認(rèn)為創(chuàng)意爆棚的UI設(shè)計(jì)直接應(yīng)用到客戶的網(wǎng)站上，但并沒有考慮過這種設(shè)計(jì)是否符合網(wǎng)站的產(chǎn)品，是否符合目標(biāo)用戶群所需要的體驗(yàn)與需求，從這個(gè)角度上來說，這樣的設(shè)計(jì)真的合適么？

最近熱門的幾篇技巧好文：

• 《幫你創(chuàng)意爆棚！最流行的10個(gè)平面設(shè)計(jì)方法小結(jié)》
• 《騰訊精品好文！7個(gè)方法幫你全面提升WEB表單填寫體驗(yàn)》
• 《最終完結(jié)篇特制版！那些你不知道的PHOTOSHOP冷知識（四）》

所以，當(dāng)你在設(shè)計(jì)企業(yè)和商務(wù)類網(wǎng)站的時(shí)候，你需要自省。多問問自己，這樣的設(shè)計(jì)是否合理，站在需求方和用戶的角度上仔細(xì)考量一下，你的創(chuàng)意和設(shè)計(jì)是否真的靠譜。在接下來的案例中，我們使用Ptengine這款軟件生成用戶點(diǎn)擊的熱點(diǎn)圖，來幫設(shè)計(jì)師了解用戶是如何訪問網(wǎng)站的，分析設(shè)計(jì)的利弊。

1、對于產(chǎn)品銷售而言一個(gè)巨大的Banner真的有效么？

許多網(wǎng)站都喜歡在網(wǎng)站的導(dǎo)航欄下頂部的位置放上巨大的Banner，宣傳主打產(chǎn)品或者主要的服務(wù)。一旦使用了這樣的設(shè)計(jì)就意味著網(wǎng)站頂部大部分都會被一張圖所填充，用戶的注意力會被它所吸引，然后才是讓用戶注意到下方的其他產(chǎn)品。下面的這張熱點(diǎn)圖是最大的體育品牌Vendor的鞋類產(chǎn)品頁面，我們發(fā)現(xiàn)他們頂部的Banner的點(diǎn)擊率并不高，仔細(xì)分析數(shù)據(jù)之后發(fā)現(xiàn)大概占據(jù)了頁面總點(diǎn)擊量的10%，很明顯多數(shù)用戶看了這個(gè)圖之后并未被其吸引而是選擇向下瀏覽他們自己真正喜歡的鞋。

2、你應(yīng)該在最突出的地方放置什么內(nèi)容？

設(shè)計(jì)師們常常會探討在網(wǎng)站什么地方放置什么內(nèi)容，但是這些內(nèi)容是否適合產(chǎn)品以及用戶的需求則很少真正涉及。接下來，我用兩個(gè)活生生的案例來展示一下，什么是好內(nèi)容被放置到錯(cuò)誤的地方。

有幾個(gè)很有吸引力的甜點(diǎn)食譜被放置于主頁最下方，僅有37%的用戶會將網(wǎng)頁拖到這個(gè)位置看到它們。但是幾乎所有看到這個(gè)食譜的用戶都點(diǎn)擊了它們，但是絕大多數(shù)的用戶根本沒幾乎瀏覽到這里！設(shè)計(jì)師應(yīng)該讓這樣的殺手級的內(nèi)容置于最好的位置，不是嗎？

幾乎相同的情況也發(fā)生在運(yùn)動品牌Vendor的網(wǎng)頁上。許多不同類型的鞋被放置在整個(gè)長頁面上，設(shè)計(jì)師真的應(yīng)該梳理一下那些鞋比較吸引人。只有20%的用戶會瀏覽到頁面底部，但是幾乎所有瀏覽到這里的用戶都會點(diǎn)擊那雙鞋，這足以證明它非常吸引人，那么為何不將它挪到用戶更容易發(fā)現(xiàn)的地方呢？

3、是否始終要為圖片附加鏈接？

在網(wǎng)站上，一圖抵千言，這是很正常的事情。但是你設(shè)計(jì)的頁面中，圖片是否傳達(dá)出正確的含義了？如果圖片加了超鏈接但是用戶沒有明白你的目的，這是一種設(shè)計(jì)失?。蝗绻惴胖玫膱D片吸引了用戶去點(diǎn)擊，但圖片沒有附上鏈接，用戶的點(diǎn)擊徒勞無功了，這也是一個(gè)失敗的設(shè)計(jì)。

第一個(gè)案例是一個(gè)著陸頁?？纯礋狳c(diǎn)圖，你會發(fā)現(xiàn)許多用戶點(diǎn)擊了圖片。用戶這個(gè)時(shí)候應(yīng)該是想點(diǎn)擊圖片深入了解一下網(wǎng)站可以為他們提供什么內(nèi)容，用戶希望這個(gè)圖片有超鏈接，能引導(dǎo)他們?nèi)ツ硞€(gè)詳情頁。但是沒有。

第二個(gè)案例是某款手機(jī)的幫助頁面。你會注意到，這個(gè)地方的客服電話用了鮮明的紅色，看起來好象能點(diǎn)擊的樣子，但是它實(shí)際只是純文本。用戶希望能通過點(diǎn)擊直接撥打電話，但是看來是不可能了。如果想直接同用戶保持聯(lián)系，那么這個(gè)地方必須修改。

4、我所設(shè)計(jì)的按鈕是否容易被點(diǎn)擊？

看看下面的例子吧。APP頁面中，設(shè)計(jì)師使用了HOT等關(guān)鍵詞來吸引潛在的用戶的注意力，但是即便使用了粉紅色來填充按鈕，它的效果看起來也非常不明顯。而男裝部分，干脆使用了淺藍(lán)色，這個(gè)地方的點(diǎn)擊量就更少了。我們可以理解設(shè)計(jì)師的苦心，但是對于用戶，它一點(diǎn)也沒有吸引力。

在打造一個(gè)優(yōu)秀的網(wǎng)頁之時(shí)，好的設(shè)計(jì)師不僅會賦予它良好的體驗(yàn)和優(yōu)秀的創(chuàng)意，還會根據(jù)用戶的習(xí)慣與訴求調(diào)整設(shè)計(jì)和創(chuàng)意，讓設(shè)計(jì)能夠落地，使得用戶與網(wǎng)站實(shí)現(xiàn)良好的互動。Ptengine是一個(gè)幫設(shè)計(jì)師探索用戶使用習(xí)慣的好工具，它所搜集的數(shù)據(jù)能清晰的反映網(wǎng)頁設(shè)計(jì)的實(shí)際效果，為迭代和優(yōu)化提供了有力的數(shù)據(jù)支撐。如果你想作出更優(yōu)秀的設(shè)計(jì)，試試Ptengine這樣的優(yōu)秀工具吧。

【超級大變身的網(wǎng)站改版實(shí)戰(zhàn)好文】

政府網(wǎng)站篇：設(shè)計(jì)師如何在踩著雷區(qū)跳舞？
《推陳出新！政務(wù)網(wǎng)站的重設(shè)計(jì)》

設(shè)計(jì)網(wǎng)站篇：家喻戶曉的設(shè)計(jì)網(wǎng)站如何改版？
《案例推薦！BEHANCE上超火的大眾官網(wǎng)重設(shè)計(jì)》

經(jīng)典案例篇：非看不可的知名網(wǎng)站的經(jīng)典改版！
《驚艷！著名網(wǎng)站重新設(shè)計(jì)的10個(gè)經(jīng)典案例》

原文地址：webdesignledger
優(yōu)設(shè)網(wǎng)譯者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(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í)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量87萬的人氣微博@優(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è)哥微信號：youshege