中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)站設(shè)計(jì)中如何合理利用按鈕設(shè)計(jì)提升轉(zhuǎn)化率

2017-02-13    分類: 網(wǎng)站設(shè)計(jì)

聊到按鈕的設(shè)計(jì),我們有太多的話要說。確認(rèn)按鈕在左邊還是右邊,幽靈按鈕到底可靠不可靠,陰影的存在到底合理不合理,等等等等。但是今天不聊這些,我們來聊一下,如何設(shè)計(jì)一個(gè)高轉(zhuǎn)化率的按鈕:

我們常常會(huì)揪住某個(gè)設(shè)計(jì)細(xì)節(jié)不放,深入討論直到透徹。這樣的探究并非毫無意義,因?yàn)榧词故亲罴?xì)小的細(xì)節(jié)也可能會(huì)讓近乎好的設(shè)計(jì)毀于一旦。

所以,今天的文章我們繼續(xù)深入到設(shè)計(jì)的細(xì)節(jié)當(dāng)中,探討按鈕的設(shè)計(jì)。用戶每天都會(huì)接觸按鈕,從現(xiàn)實(shí)世界到虛擬的界面,從移動(dòng)端要桌面端,它是如今界面設(shè)計(jì)中最小的元素之一,同時(shí)也是最關(guān)鍵的控件。當(dāng)你在設(shè)計(jì)按鈕的時(shí)候,是否想過用戶會(huì)在什么情形下與之交互?按鈕將會(huì)在整個(gè)交互和反饋的循環(huán)中提供信息?

在早期的扁平化設(shè)計(jì)當(dāng)中,用戶常常因?yàn)榘粹o的感知度較差而完全處于懵逼狀態(tài),這也從側(cè)面反映出按鈕本身在UI設(shè)計(jì)中的重要作用。

它應(yīng)當(dāng)看起來可點(diǎn)擊/觸摸

用戶看到可點(diǎn)擊的按鈕會(huì)有去點(diǎn)擊和觸摸的沖動(dòng)。雖然按鈕在屏幕上會(huì)以各種各樣的尺寸出現(xiàn),并且通常都具備良好的可點(diǎn)擊性,但是在移動(dòng)端設(shè)備上按鈕本身的尺寸和按鈕周圍的間隙尺寸都是非常有講究的。

普通用戶的指尖尺寸通常為8~10毫米,所以尺寸為10×10毫米的觸摸交互對(duì)象是符合邏輯的,這也算是移動(dòng)端上約定俗成的規(guī)則了。

想要讓一個(gè)元素看起來可點(diǎn)擊,注意下面的技巧:

·微妙的陰影能夠讓按鈕看起來“浮動(dòng)”出界面,讓它看起來更接近用戶
·增加按鈕內(nèi)邊距,讓它看起來更容易點(diǎn)擊,引導(dǎo)用戶點(diǎn)擊
·進(jìn)行懸浮或者點(diǎn)擊操作的時(shí)候通過實(shí)時(shí)色彩和效果變化,提示用戶

色彩很重要

按鈕的色彩需要根據(jù)整個(gè)網(wǎng)站的配色來單獨(dú)搭配。作為用戶交互的核心,按鈕在頁面中適合使用特定的色彩進(jìn)行強(qiáng)調(diào)。

按鈕的色彩應(yīng)該明亮而迷人,這也是為什么那么多UI設(shè)計(jì)都喜歡采用明亮的黃色、綠色和藍(lán)色的按鈕設(shè)計(jì)。想要按鈕在視覺上突出,按鈕的色彩最好選取背景色在色輪上相對(duì)位置的互補(bǔ)色。

另外一個(gè)值得注意的是品牌用色。你需要為按鈕選取一個(gè)同你的品牌配色方案相匹配的色彩,它不僅要有識(shí)別度,還要有關(guān)聯(lián)性。不論你配色方案怎么調(diào)整,按鈕首先要與你的主要配色保持關(guān)聯(lián)和一致。

尺寸的影響更大

按鈕要大!設(shè)計(jì)師常常被各種人戳屏,LOGO要大是被指責(zé)得最多的地方,而在進(jìn)行按鈕設(shè)計(jì)的時(shí)候,大也同樣是鋼需。只有當(dāng)按鈕尺寸夠大的時(shí)候,用戶才能在一看到界面的時(shí)候就被它所吸引。雖然幽靈按鈕可以占據(jù)足夠大的面積,但是幽靈按鈕在視覺重量上的不足,使得它并不是最好的選擇。所以,我們所說的大不僅僅是尺寸上的大,在視覺重量上同樣要“大”。

當(dāng)然,按鈕的大小尺寸也是一個(gè)相對(duì)值。有的時(shí)候,同樣的尺寸的按鈕,在一種情況下是好的大小,在另外一個(gè)界面中可能就是過大了。很大程度上,按鈕的大小取決于周圍元素的大小比例。如果按鈕是界面中可見的唯一元素,那么誰都不會(huì)錯(cuò)過了。

位置也關(guān)鍵

按鈕應(yīng)該放置在哪個(gè)位置?界面中哪些地方能夠?yàn)槟銕砀嗟狞c(diǎn)擊量?

在絕大多數(shù)的情況下,按鈕應(yīng)當(dāng)按照你的頁面和APP的內(nèi)容來添加:

·在表單的底部
·在行為召喚類信息附近
·在頁面或者屏幕底部
·在信息的正下方

為何要放置在這些位置?因?yàn)樗麄冏裱脩舻牧?xí)慣和自然的交互路徑,不論是網(wǎng)頁還是APP。

專注于對(duì)比

幾乎所有類型的設(shè)計(jì)都會(huì)對(duì)對(duì)比度有所要求,在進(jìn)行按鈕設(shè)計(jì)的時(shí)候,不僅要讓按鈕內(nèi)的內(nèi)容(圖標(biāo)、文本)能夠同按鈕本身構(gòu)成良好的對(duì)比,而且按鈕和背景以及周圍的元素也要形成對(duì)比。

那么,在你進(jìn)行設(shè)計(jì)的時(shí)候,需要考慮到下面的因素:

·色彩
·字體的字重和尺寸
·元素的大小
·背景與形狀
·陰影與漸變
·留白和內(nèi)外間距

使用標(biāo)準(zhǔn)的形狀

當(dāng)你在考慮按鈕的外形的時(shí)候,你只需要考慮兩種情況:

·圓形。隨著Material Design這種設(shè)計(jì)規(guī)范的推廣,圓形的按鈕已經(jīng)被大家所接受了。圓形按鈕廣泛適用于時(shí)下流行的扁平化設(shè)計(jì)風(fēng)格,適合目前的用戶模式。

·矩形。矩形按鈕(包括方形和各種圓角矩形)是最常見也是按鈕在大家認(rèn)知中的默認(rèn)形狀,它符合用戶的認(rèn)知與習(xí)慣,絕大多數(shù)的按鈕長(zhǎng)度寬度的兩倍(當(dāng)然三四倍也有)。當(dāng)用戶看到它的時(shí)候,立刻會(huì)明白應(yīng)該如何與之交互。至于使用圓角還是直角,那就是另外一個(gè)問題了,選擇符合你的設(shè)計(jì)風(fēng)格的即可。

告訴用戶做什么

每個(gè)按鈕都會(huì)包含一個(gè)文本指令,它會(huì)告訴用戶這個(gè)按鈕的功能。所以,按鈕上的文本要盡量簡(jiǎn)潔、直觀,并且使用符合整個(gè)網(wǎng)站風(fēng)格的語音語調(diào)。

然后,你需要“履行承諾”。當(dāng)用戶點(diǎn)擊按鈕的時(shí)候,按鈕所指示的內(nèi)容和結(jié)果應(yīng)當(dāng)合理、迅速地呈現(xiàn)在用戶眼前,無論是提交表單、跳轉(zhuǎn)到新的頁面,用戶通過這個(gè)按鈕應(yīng)當(dāng)獲得他所預(yù)期的結(jié)果。

按鈕中的內(nèi)容通常包括:

·戳我!
·立即創(chuàng)建
·免費(fèi)試用
·加入購物車
·查看更多

讓按鈕擁有更高的視覺優(yōu)先級(jí)

幾乎每個(gè)界面都塞滿了各種不同的UI元素。設(shè)計(jì)的過程中,設(shè)計(jì)師往往會(huì)設(shè)計(jì)出若干個(gè)不同的版本,而直到項(xiàng)目接近完成的時(shí)候,才從無比相近的幾個(gè)方案中挑選一個(gè)版本。

不要陷入這種困境。

按鈕就該有按鈕的樣子。按鈕應(yīng)該是整個(gè)設(shè)計(jì)中獨(dú)一無二的控件,它在形狀、色彩和視覺重量上,都應(yīng)當(dāng)同其他部分區(qū)分開。想想看,當(dāng)你創(chuàng)造出的按鈕和其他的控件都要大,色彩在整個(gè)配色方案中都獨(dú)一無二,它絕對(duì)比黑暗中的螢火蟲還要來得顯眼。

分享標(biāo)題:網(wǎng)站設(shè)計(jì)中如何合理利用按鈕設(shè)計(jì)提升轉(zhuǎn)化率
網(wǎng)站鏈接:http://m.rwnh.cn/news/73876.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站制作、網(wǎng)站設(shè)計(jì)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)
改则县| 南丹县| 罗山县| 大名县| 石楼县| 监利县| 夏津县| 江油市| 建宁县| 乌苏市| 木兰县| 台东市| 上思县| 舟曲县| 福贡县| 延川县| 阿勒泰市| 夏河县| 元阳县| 华阴市| 龙州县| 江津市| 滦平县| 松溪县| 连山| 磐石市| 灵川县| 靖安县| 泾川县| 冀州市| 平远县| 修文县| 方城县| 麦盖提县| 泽州县| 延边| 克拉玛依市| 明光市| 平舆县| 阿克陶县| 吴川市|