- 相關推薦
如何使用熱點圖優(yōu)化網(wǎng)頁設計
如果內容為王的話，那么設計就是城堡。對于企業(yè)而言，好的網(wǎng)頁設計不僅包含了能夠引起訪客興趣的內容，吸引目標用戶，而且包含有直觀而漂亮的UI設計，促進銷售。許多設計師喜歡將自己認為創(chuàng)意爆棚的UI設計直接應用到客戶的網(wǎng)站上，但并沒有考慮過這種設計是否符合網(wǎng)站的產品，是否符合目標用戶群所需要的體驗與需求，從這個角度上來說，這樣的設計真的合適么?以下是小編為大家搜索整理如何使用熱點圖優(yōu)化網(wǎng)頁設計，希望能給大家?guī)韼椭?更多精彩內容請及時關注我們應屆畢業(yè)生考試網(wǎng)!
當你在設計企業(yè)和商務類網(wǎng)站的時候，你需要自省。多問問自己，這樣的設計是否合理，站在需求方和用戶的角度上仔細考量一下，你的創(chuàng)意和設計是否真的靠譜。在接下來的案例中，我們使用Ptengine這款軟件生成用戶點擊的熱點圖，來幫設計師了解用戶是如何訪問網(wǎng)站的，分析設計的利弊。
1、對于產品銷售而言一個巨大的Banner真的有效么?
許多網(wǎng)站都喜歡在網(wǎng)站的導航欄下頂部的位置放上巨大的Banner，宣傳主打產品或者主要的服務。一旦使用了這樣的設計就意味著網(wǎng)站頂部大部分都會被一張圖所填充，用戶的注意力會被它所吸引，然后才是讓用戶注意到下方的其他產品。下面的這張熱點圖是最大的體育品牌Vendor的鞋類產品頁面，我們發(fā)現(xiàn)他們頂部的Banner的點擊率并不高，仔細分析數(shù)據(jù)之后發(fā)現(xiàn)大概占據(jù)了頁面總點擊量的10%，很明顯多數(shù)用戶看了這個圖之后并未被其吸引而是選擇向下瀏覽他們自己真正喜歡的鞋。
2、你應該在最突出的地方放置什么內容?
設計師們常常會探討在網(wǎng)站什么地方放置什么內容，但是這些內容是否適合產品以及用戶的需求則很少真正涉及。接下來，我用兩個活生生的案例來展示一下，什么是好內容被放置到錯誤的地方。
有幾個很有吸引力的甜點食譜被放置于主頁最下方，僅有37%的用戶會將網(wǎng)頁拖到這個位置看到它們。但是幾乎所有看到這個食譜的用戶都點擊了它們，但是絕大多數(shù)的用戶根本沒幾乎瀏覽到這里!設計師應該讓這樣的殺手級的內容置于最好的位置，不是嗎?
幾乎相同的情況也發(fā)生在運動品牌Vendor的網(wǎng)頁上。許多不同類型的鞋被放置在整個長頁面上，設計師真的應該梳理一下那些鞋比較吸引人。只有20%的用戶會瀏覽到頁面底部，但是幾乎所有瀏覽到這里的用戶都會點擊那雙鞋，這足以證明它非常吸引人，那么為何不將它挪到用戶更容易發(fā)現(xiàn)的地方呢?
3、是否始終要為圖片附加鏈接?
在網(wǎng)站上，一圖抵千言，這是很正常的事情。但是你設計的頁面中，圖片是否傳達出正確的含義了?如果圖片加了超鏈接但是用戶沒有明白你的目的，這是一種設計失敗;如果你放置的圖片吸引了用戶去點擊，但圖片沒有附上鏈接，用戶的點擊徒勞無功了，這也是一個失敗的設計。
第一個案例是一個著陸頁。看看熱點圖，你會發(fā)現(xiàn)許多用戶點擊了圖片。用戶這個時候應該是想點擊圖片深入了解一下網(wǎng)站可以為他們提供什么內容，用戶希望這個圖片有超鏈接，能引導他們去某個詳情頁。但是沒有。
第二個案例是某款手機的幫助頁面。你會注意到，這個地方的客服電話用了鮮明的紅色，看起來好象能點擊的樣子，但是它實際只是純文本。用戶希望能通過點擊直接撥打電話，但是看來是不可能了。如果想直接同用戶保持聯(lián)系，那么這個地方必須修改。
4、我所設計的按鈕是否容易被點擊?
看看下面的例子吧。APP頁面中，設計師使用了HOT等關鍵詞來吸引潛在的用戶的注意力，但是即便使用了粉紅色來填充按鈕，它的效果看起來也非常不明顯。而男裝部分，干脆使用了淺藍色，這個地方的點擊量就更少了。我們可以理解設計師的苦心，但是對于用戶，它一點也沒有吸引力。
在打造一個優(yōu)秀的網(wǎng)頁之時，好的設計師不僅會賦予它良好的體驗和優(yōu)秀的創(chuàng)意，還會根據(jù)用戶的習慣與訴求調整設計和創(chuàng)意，讓設計能夠落地，使得用戶與網(wǎng)站實現(xiàn)良好的互動。Ptengine是一個幫設計師探索用戶使用習慣的好工具，它所搜集的數(shù)據(jù)能清晰的反映網(wǎng)頁設計的實際效果，為迭代和優(yōu)化提供了有力的數(shù)據(jù)支撐。如果你想作出更優(yōu)秀的設計，試試Ptengine這樣的優(yōu)秀工具吧。
更多網(wǎng)頁設計相關文章推薦：
10.15個最適宜學習ja vasc ript的網(wǎng)站
【如何使用熱點圖優(yōu)化網(wǎng)頁設計】相關文章：
如何優(yōu)化網(wǎng)頁08-15
如何使用分屏網(wǎng)頁設計手法09-16
如何使用Dreamweaver設計網(wǎng)頁06-24
如何使用網(wǎng)頁設計中的圖片敘事07-28
網(wǎng)頁設計的優(yōu)化知識09-01
網(wǎng)頁設計之網(wǎng)頁優(yōu)化問題09-21
如何在網(wǎng)頁設計中使用圖片07-09
網(wǎng)頁首圖如何設計才抓住用戶10-13
網(wǎng)頁設計如何合理使用色彩疊加08-26