7個(gè)網(wǎng)頁按鈕設(shè)計(jì)策略讓你的網(wǎng)站更好看又好用

時(shí)間：2023-10-20 02:00:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-20 02:00:02 來源：網(wǎng)站運(yùn)營

7個(gè)網(wǎng)頁按鈕設(shè)計(jì)策略讓你的網(wǎng)站更好看又好用：網(wǎng)頁按鈕設(shè)計(jì)是任何網(wǎng)站、移動(dòng)應(yīng)用app產(chǎn)品UI設(shè)計(jì)中必不可少的組成部分，出彩的按鈕能為網(wǎng)站職能的完美實(shí)現(xiàn)加分。我們今天來捋一捋有哪些優(yōu)秀的網(wǎng)頁按鈕設(shè)計(jì)原則及規(guī)劃策略。

首先，我們搞清楚，網(wǎng)頁按鈕是做什么用的。先不管它可能長什么樣，我們做設(shè)計(jì)的時(shí)候，至少清楚的知道，這個(gè)按鈕有強(qiáng)制用戶轉(zhuǎn)換、執(zhí)行操作的能力，是人機(jī)操作界面中，負(fù)責(zé)保護(hù)人和機(jī)器的對(duì)話中間人。

按鈕設(shè)計(jì)原則

1. 讓用戶清楚，這是一個(gè)可點(diǎn)擊的按鈕。很多惹人討厭的廣告，在某時(shí)候居然利用關(guān)閉按鈕來增加鏈接流量，這是很可惡的。按鈕要做得清晰、簡單、可用，不能誤導(dǎo)用戶。







https://www.yunexpresseu.com/

2. 網(wǎng)頁按鈕的形狀，從最初的長方形到帶圓角的長方形，再到無底色幽靈按鈕，再到其他任何形式的按鈕的演變。網(wǎng)民現(xiàn)在已經(jīng)越來越能接受這個(gè)變化的過程。甚至有一個(gè)按鈕的形狀，也能成功地吸引用戶對(duì)網(wǎng)站整體的印象。







http://www.cacie.cn/cn/index.html

3. 給按鈕添加一些特效。比如陰影、微交互等等，讓按鈕有點(diǎn)深度感，向用戶召喚點(diǎn)擊。帶有微交互的特效，也是一種有趣的、可用的按鈕的提示。







https://designschool.sustech.edu.cn/

4. 一個(gè)內(nèi)容塊，往往包含了一級(jí)標(biāo)題H1，副標(biāo)題H3，摘要及正文部分。重要的按鈕往往不會(huì)混排在內(nèi)容中間，而是在內(nèi)容結(jié)束之后，或者頁面折中的地方。不要讓用戶四處奔波尋找按鈕的位置。做到打開網(wǎng)頁頁面就能找到按鈕。







https://www.morfin.hk/

5. 為了不讓用戶遲疑、逗留太久，最好可以在按鈕旁邊添加一些文本框備注，不要讓用戶猜測按鈕的職能和用途。







https://en.dobot.cn/

6. 按鈕的尺寸規(guī)格很講究的，可惜很多設(shè)計(jì)師并沒有注意到。先說說移動(dòng)端按鈕的規(guī)格吧。麻省理工學(xué)院的觸控實(shí)驗(yàn)室早在 2003 年就發(fā)表了一項(xiàng)研究，發(fā)現(xiàn)大多數(shù)指尖的寬度為 8-10 毫米。明確的含義是您不希望按鈕小于 10 毫米（觸摸目標(biāo)應(yīng)至少為 48 x 48px，它們之間間隙至少應(yīng)為 8px（或更大）。這是為了確保平衡的信息密度和可用性。）——除非您愿意冒著用戶手指非常細(xì)小的機(jī)會(huì)而冒著設(shè)計(jì)可用性風(fēng)險(xiǎn)的風(fēng)險(xiǎn)。其實(shí)阿里UED很早就深度研究過這個(gè)問題，并在淘寶店鋪及阿里產(chǎn)品UI設(shè)計(jì)中發(fā)揮得淋漓盡致。按鈕過小，用戶會(huì)點(diǎn)錯(cuò)目標(biāo)。按鈕太大，略顯粗糙，不夠逼格。







7. 按鈕微交互的中的狀態(tài)變化。其實(shí)按鈕通常包含了當(dāng)前狀態(tài)、鼠標(biāo)移動(dòng)狀態(tài)、鼠標(biāo)點(diǎn)擊狀態(tài)和鼠標(biāo)不可點(diǎn)擊狀態(tài)。

這對(duì)于大多數(shù)的企業(yè)網(wǎng)站而言，當(dāng)然不需要做得這么規(guī)范和復(fù)雜，但對(duì)于優(yōu)秀的產(chǎn)品、app平臺(tái)來說，這是必須具備的嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)邏輯。







好了，以上是今天我們通過網(wǎng)頁設(shè)計(jì)實(shí)戰(zhàn)案例來給大家講解的高級(jí)按鈕設(shè)計(jì)原則。在今后的項(xiàng)目中，我們需要根據(jù)項(xiàng)目的要求、風(fēng)格的不同來做相應(yīng)的調(diào)整，最終尋求一個(gè)完美的按鈕設(shè)計(jì)策略。