電子商務網站出售按鈕5點設計技巧

來源:互聯網
上載者:User

   設計一個合適的“購買按鈕”只是把“buy now(立即購買)”字樣的文字放在一個藍色的矩形上是不夠的,因為這並沒產生你預期的效果。幸運的是,一旦你瞭解了一些基本知識,設計一個合適的購買按鈕並不太難。 首先,按鈕上的文本非常重要,但還有其它功能要處理。為什麼說文本最重要呢?試想一下,如果上面寫的是詛咒性質的字樣,按鈕設計得再漂亮也沒有用。因此,好的內容是金錢的來源。

  我們會討論一個電子商務網站合適的出售按鈕至關重要的5點設計技巧。

  1.整體樣式

  這是第一條,也是最重要的特性。

  你要琢磨讓你的按鈕變成“紫牛”。“紫牛”的概念是有塞斯·高汀(Seth Godin)提出。簡而言之,就是讓你的產品出眾。我的意思是說,出眾的產品是不會被大家忽視的,就像草地中間那頭閃亮的紫牛一樣耀眼。

  一些設計師並不太擅長產品的封裝。建立一個與網站顏色和樣式完美契合的按鈕是很迷人的。這似乎是一個非常好的主意,可惜它不是。

  問題是這樣的按鈕並不能引人注意。你也不想你的按鈕被埋沒,希望它受人矚目,因此,它應該被當做完全獨立的元素進行創作,出現在某些網站,而沒必要與網站的風格保持一致。

  看看下面這個體現“紫牛”概念的案例。

  Mozilla Firefox

  這是一個看起來像是FireFox的下載頁面。請注意,在摺疊處上方,有一個大片綠色的下載按鈕,看起來與頁面上其它元素完全不同,是放FireFox標誌的唯一地方,也是整個頁面最大的元素之一。

  所有的特徵讓這個按鈕顯得非常搶眼。這很好地詮釋了“紫牛”這一概念。如果你要說沒看到,你正好為別人留下了印象。

  簡單來說就是讓按鈕引人矚目。

  2.外觀

  從顏色開始。

  如果你想使用從未使用過的顏色來吸睛,可學習前面提到的FireFox網站。使用Color Scheme Designerto工具找到與你當前網站的色彩配置協調的顏色,但依然要保持顏色的反差。

  “顏色的反差”在這裡是關鍵。如果你的網站以藍色為主色調,就不再需要藍色的購買按鈕,藍色的投影也沒必要。有點藍色感覺的元素統統不需要,粉色,橙色等有差異的顏色才是你的最佳選擇。我相信你明白我的意思了。

  另外的一條策略。橙色是除紅色之外最顯眼的顏色。但是,它不會像紅色那樣提升負面情感(像停住,小心,危險等都是用紅色標識)。互連網上最有名的 橙色按鈕可在亞馬遜網站找到。

  另外需注意的是按鈕的尺寸。按鈕要大,越大越好。可參見firefox的案例。

  有人在設計階段問“還可以弄得再大點嗎”,答案是肯定的。

  要簡潔還是要炫?

  按鈕不能做得太炫了。前面所提到的FireFox按鈕就很炫,雖然上面有一隻橙色的狐狸,外觀上依然是一個按鈕,這是必須遵守的。如果連按鈕都不像,誰還會去點擊。

  這就是為什麼不能簡單回答按鈕簡潔好還是炫好。你得找到適合自己的風格。我們可進行分開測試,同時建立兩個按鈕:一個簡潔,一個炫,看誰的效果更好。Google網站最佳化工具會幫你做出抉擇。

  看看下面這個簡潔按鈕的例子

  ThemeFuse

  你可以看到按鈕上沒橙色狐狸,但是依然很顯眼。事實上,ThemeFuse(WordPress主題商店可以找到)提供了短代碼。這些短代碼讓建立漂亮的按鈕變得非常簡單。

  比方說,我用了下面這行代碼之後:

  得到的按鈕效果

  3.字型

  Sans-serif字型符合所有類型的按鈕。因為,這種字型非常易讀,適合網路使用。(另外,它也更適合用來印刷出版物)

  盡量讓按鈕上的文本易讀,因為它是頁面上最重要的文本之一。文本不宜全部大寫,大小寫混合更佳,即每個單詞的首字母大寫。

  Arial、Helvetica、Franklin Gothic、Myriad等字型很保險,可放心使用。

  現在在來談顏色。當然,常值內容應該與按鈕的顏色反差極大。灰色-灰色就不行,可以選用黑-白,藍色-橙色。

  另外,文本必須具備高度可讀性。

  4.按鈕的位置

  按鈕的最佳位置取決於網站的設計,這可能並不會讓人感到意外。但是依然有些規則要遵守。

  盡量放到最顯眼的位置,這裡就不用講究創意了。只需要讓顧客和客戶看到就行。

  每次訪問網站,使用者都期望在某些位置看到某些東西,比如說:左上方的標誌,右上方的購物車結算,頁尾的著作權聲明等。你的工作就是找出“購買按鈕”最顯眼的位置,然後把它放在那兒。

  當然,它也要放在最顯眼的位置上,這意味著兩件事:

  完全放在摺疊處上方。不要擔心空白地區,空白是每位網頁設計師的朋友。記住,你在一個網站放多少內容不重要,重要的是你能從中刪掉多少內容。

  通過複製按鈕,將其放在頁面底部,來改變你的位置策略。這樣別人在瀏覽整個頁面時,依然可在底部進行操作。

  5.額外元素

  這些額外元素會帶來錦上添花的效果,進一步加深按鈕的可見度。比如說,箭頭表徵圖,購物車,放大鏡,標識,或各種品牌要素等等。

  我還是首推FireFox的案例,橙色的狐狸這一元素運用得相當酷。

  經驗表明,額外元素起到了強調按鈕的作用。比如,兩個指向朝下的箭頭很好表達了下載的意思。購物車表徵圖與添加到購物車按鈕很搭。在前面中提到的亞馬遜的例子,放大鏡與搜尋按鈕的搭配就很棒。

  你也可以使用一些品牌要素。比如說,標準的RSS訂閱流的按鈕。twitter的關注表徵圖,FireFox的橙色狐狸下載表徵圖,自由的購買產品按鈕。

  下面有一些案例:

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.