網(wǎng)頁(yè)按鈕設(shè)計(jì)的6大原則及范例
網(wǎng)頁(yè)設(shè)計(jì)師或許明白行為請(qǐng)求按鈕在該轉(zhuǎn)化中的重要作用,但是接下來(lái)要講的6大原則及范例,每一個(gè)想從網(wǎng)站獲取商業(yè)利益的人都應(yīng)該了解。
什么是行為請(qǐng)求按鈕呢?
行為請(qǐng)求按鈕是可以從網(wǎng)絡(luò)訪問(wèn)者那獲取點(diǎn)擊行為的按鈕。
一般來(lái)說(shuō),一個(gè)點(diǎn)擊行為可能會(huì)鏈接到下載、注冊(cè)或出售。它們也可能會(huì)把用戶引向一個(gè)有更多信息的網(wǎng)頁(yè)從而讓用戶采取行動(dòng)(比如:了解更多……) 行為請(qǐng)求按鈕的6大要素
1、尺寸 理論上來(lái)說(shuō), 你的“行為請(qǐng)求按鈕”應(yīng)該在擁擠的頁(yè)面與隱入到背景這兩者之間尋找一種和諧感。 它應(yīng)該是該頁(yè)面最大的按鈕,因?yàn)轫?yè)面上某個(gè)元素越大,我們會(huì)認(rèn)為它越重要。
(如上圖) NCover網(wǎng)站頁(yè)面就是通過(guò)大尺寸來(lái)強(qiáng)調(diào)行為請(qǐng)求按鈕。另外,他們也提供了足夠的空間來(lái)容納其他關(guān)鍵信息,比如“21天免費(fèi)試用”。強(qiáng)烈的對(duì)比色同樣也幫助了用戶區(qū)分下載按鈕與頁(yè)面背景。
2、位置 將行為請(qǐng)求按鈕放置于網(wǎng)頁(yè)的對(duì)折處非常有效,因?yàn)檫@個(gè)位置是用戶的一個(gè)對(duì)稱視覺(jué)中心,能給用戶產(chǎn)生關(guān)于網(wǎng)站的第一印象。
(如上圖)Envy小店的登錄頁(yè)面用位于正中間的行為請(qǐng)求按鈕來(lái)向用戶打招呼。這個(gè)圓形的按鈕在白色邊框的襯托下顯得格外顯眼,并且強(qiáng)有力的刺激著賣賣雙方在閱讀完周圍的文字后加入該網(wǎng)站。
(如上圖)“Donate”,該行為請(qǐng)求按鈕用來(lái)號(hào)召大家捐贈(zèng)來(lái)幫助戰(zhàn)爭(zhēng)中的孩子。作為二級(jí)菜單被放置于頁(yè)面頂部能有效誘發(fā)用戶操作行為。而且在策略上,這個(gè)文字被置于一塊背景之上,也似乎在鼓勵(lì)用戶在瀏覽了其他頁(yè)面后再次回來(lái)。
3、顏色 在設(shè)計(jì)上確保你的行為請(qǐng)求按鈕與背景色之間存在色彩上的對(duì)比。這樣既能夠確保用戶更好的注意到按鈕,也能夠增加用戶采取行動(dòng)的可能性。同時(shí)也需要考慮按鈕色彩怎樣才能更好的符合頁(yè)面的整體色調(diào),目的在于限定該按鈕所能發(fā)揮的最大的色彩空間。
(如上圖)這個(gè)應(yīng)用的行為請(qǐng)求按鈕通過(guò)高度飽和的色彩 非常清楚的區(qū)別于背景色。你會(huì)忽視它的存在嗎?
(如上圖)Resumator在導(dǎo)航條上使用非常友好的顏色來(lái)強(qiáng)調(diào) “Sign Up”按鈕。并且將同樣的紅色應(yīng)用于另一個(gè)行動(dòng)按鈕——Start the Tour,同樣也是這個(gè)理念的體現(xiàn)。
本文地址:http://likemindfilms.com/tutorial/di1024.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏