網(wǎng)頁按鈕設(shè)計(jì)12條技巧

這里有網(wǎng)頁按鈕設(shè)計(jì)12條教訓(xùn)，是筆者在設(shè)計(jì)多種按鈕，包括主按鈕、次要按鈕，以及在一個新興系統(tǒng)中的使用的大量其他按鈕時所總結(jié)出來的，非常值得一讀，希望能夠?qū)Υ蠹以谠O(shè)計(jì)中有所幫助。

說到網(wǎng)頁設(shè)計(jì)中的按鈕，可以通過按鈕能做很多事。比方說，進(jìn)行下一步、確定、以及完成等操作。有了按鈕，交互一下就煥發(fā)了生機(jī)。

按鈕：按鈕代表著“做某件事”，即點(diǎn)擊了按鈕代表著操作了一個功能，做的這件事是有后果的，不易挽回的。例如典型的google，QQ郵箱。像信息搜索、回復(fù)、注冊，他們的共同點(diǎn)是：都是在“做”一件事，并且絕大多數(shù)都是對表單的提交。從技術(shù)上講，這類按鈕的作用是向后臺提交了數(shù)據(jù)，“命令”服務(wù)器去做了一件事。

這就是為何按鈕大概是一個系統(tǒng)設(shè)計(jì)中最重要的組成部分。理由非常簡單，按鈕提供了一個樣式簡單的標(biāo)簽供人在界定區(qū)域內(nèi)點(diǎn)擊。也就是說，按鈕是你應(yīng)用設(shè)計(jì)語言基本屬性的方式，這種方式以后還會應(yīng)用在更加復(fù)雜的組件當(dāng)中。

1. 按鈕要和超鏈接區(qū)分開

在扁平設(shè)計(jì)時代，類似Material Design，會將“扁平”按鈕，多樣應(yīng)用于工具欄、動作組、還有文本串聯(lián)。在默認(rèn)狀態(tài)下，這跟超鏈接只有輕微的區(qū)別甚至是沒有區(qū)別。然而，從archor tags開始，按鈕的狀態(tài)和行為都會帶來一系列需要區(qū)別的考量。

如果你的系統(tǒng)提供了扁平設(shè)計(jì)，要確保它設(shè)計(jì)上和代碼上的慣常用法，都是可以跟超鏈接區(qū)分出來的。此外，確保方案涵蓋交互的復(fù)雜性，例如聚焦&按壓狀態(tài)，留白，對齊等。

2. 設(shè)定文本的風(fēng)格基調(diào)

幸好，過去“點(diǎn)擊這里”是存在的。但我們依然需要回答：按鈕標(biāo)簽可以有多長。標(biāo)簽是采用祈使語氣，即命令式、強(qiáng)制性的語氣嗎(例如，“保存”或者“關(guān)閉”)?我應(yīng)該在動詞后面加上賓語嗎(在“保存”后面加上“文檔”)?關(guān)于常見操作有慣用的標(biāo)簽嗎?要加注品牌標(biāo)語……還是不要呢?

在可以找到全部按鈕的標(biāo)簽指南處引入前后一致的用詞。當(dāng)然，用詞列表和深度編輯標(biāo)準(zhǔn)可以在Voice和Tone等指南內(nèi)找到。不管怎樣，按鈕指南是開始把指南橋接在一起的好地方。

3. 當(dāng)背景較復(fù)雜時，按鈕用反色

在純白背景下大多數(shù)樣式的按鈕還行得通，但如果你把按鈕擱在照片背景上呢?或者是一個更深的不同顏色的背景?更傷腦筋的是，你的按鈕也可以放在淺色中性色的背景上嗎?按鈕可以用在(包括但不限于上面所提到的)任何情況下嗎?主按鈕的顏色可以隨意改變嗎?

把主按鈕放在不同的背景上進(jìn)行演示，然后制定一個相反的替代方案——白色?不同顏色?或者半透明?——當(dāng)背景變深時應(yīng)用上述方案。做文檔時，把亮色和暗色等方案展示在一系列常見背景上，這樣可以把問題講清楚，把按鈕展示在一系列常見背景上，效果好壞都展示

4. 設(shè)計(jì)并建立按鈕的交互規(guī)范

按鈕是最簡單原始的交互，交互伴隨著改變。僅僅呈現(xiàn)給開發(fā)者頁面加載時按鈕的樣式來表示“按鈕長這樣!”是不夠的。不是開發(fā)者而是設(shè)計(jì)者，來決定狀態(tài)切換的按鈕是如何呈現(xiàn)的，包括：默認(rèn)狀態(tài)，鼠標(biāo)懸停，焦點(diǎn)獲取(“光暈狀態(tài)”)，被按住/激活，甚至旋轉(zhuǎn)等待以及其他花式秀進(jìn)度的動畫。

提供不同狀態(tài)下的按鈕樣式合集，無需用戶交互(頁面中嵌入按鈕就好)。文檔并不是搞尋寶游戲，加分的做法是像material design那樣做視頻演示。

5. 按鈕是系統(tǒng)在視覺風(fēng)格上最純粹的表達(dá)方式

按鈕把顏色、字體和圖像這三個屬性緊密地結(jié)合起來，形成了一個不可分割的集體。按鈕也同時引起了關(guān)于留白的討論：內(nèi)部填充(特別是，標(biāo)簽的左右)和外部邊距(毗鄰其他元素)。最終，按鈕可以體現(xiàn)更多只有內(nèi)行才懂的屬性，例如圓角邊框(通過調(diào)整border-radius)或上升(通過調(diào)整圖層陰影效果屬性box-shadow)，重要的按鈕需要做出強(qiáng)調(diào)，可以利用顏色，可以利用邊框，可以利用不一樣的顯示方式。

漂亮的按鈕固然能賞心悅目，但是設(shè)計(jì)的與網(wǎng)站其它內(nèi)容差異太大，就不是那么美觀了。所以設(shè)計(jì)按鈕的時候，要考慮該位置按鈕的上下文內(nèi)容，不能顯得太唐突。按鈕首先看功能，如果是跳轉(zhuǎn)可以放在知識普及，一般需要填資料的放在介紹完之后，顯示按鈕，這樣會讓用戶知道這樣的按鈕是什么用途。

要把按鈕當(dāng)作系統(tǒng)風(fēng)格的主導(dǎo)代表元素。加分做法是，把按鈕的定義和一整套快速發(fā)展的標(biāo)記變量統(tǒng)一，這些標(biāo)記變量規(guī)定了顏色，尺寸，空白和其他細(xì)節(jié)。按鈕看起來很簡單，其實(shí)包含了各式各樣的屬性

6. 從切換開關(guān)到菜單，確保按鈕都能和諧地運(yùn)轉(zhuǎn)

按鈕可以成組。一個按鈕組通常由一個主選項(xiàng)和一個或者多個次要選項(xiàng)配對成套出現(xiàn)。切換開關(guān)可以顯示為開啟或關(guān)閉狀態(tài)(比如粗體)，或顯示一組選項(xiàng)中被選中的那個(比如文本的對齊選項(xiàng)，有左對齊、右對齊、中間對齊、以及兩端對齊)。最復(fù)雜的情況下，工具欄把各類按鈕都包含了：主按鈕，次要按鈕，切換開關(guān)，菜單，以及其他。

擴(kuò)大按鈕的多樣性時，探索并壓縮測試按鈕在緊湊格局下的多種組合布局方式。系統(tǒng)設(shè)計(jì)師不是預(yù)言家，能預(yù)言各種各樣的情況。但是探索合理范圍內(nèi)的多元應(yīng)用場景能幫助你避免被討厭或之后被討厭。

7. 混合元素設(shè)計(jì)要有彈性

將按鈕和icon結(jié)合使用，能強(qiáng)化意義并加快用戶認(rèn)知，當(dāng)你加入一個元素之后，即使只是一個簡單的icon，按鈕的布局也不應(yīng)該被破壞分解。使用一些很少預(yù)見的元素，會引起一些諸如內(nèi)部留白和對齊方式的煩人問題。你會想把這些問題都一一化解，特別是當(dāng)按鈕可能包含了標(biāo)簽，icon還有其他的一些什么鬼。

把按鈕做得靈活一點(diǎn)，不論是用代碼還是設(shè)計(jì)工具，使其具有一定可以容納其他元素的彈性。當(dāng)用戶可能想往上加?xùn)|西——標(biāo)簽、icon或者無論什么其他元素——就不用擔(dān)心加上后的內(nèi)部留白或?qū)R方式等后續(xù)影響。

8. 確保次要按鈕≠禁用

沒人會盼著灰色按鈕出現(xiàn)，但是，你可能需要給醒目的顏色飽和的主選項(xiàng)旁邊配上一個次要選項(xiàng)。得避免出現(xiàn)另一個同樣飽和的顏色，不然那會導(dǎo)致兩個顏色飽和的按鈕一個挨著一個，就像綠的“保存”和藍(lán)的“提交”。不僅是你，而且要讓用戶也能知道哪一個更重要。

將次要按鈕的顏色和它的禁用狀態(tài)方案匹配起來。確保所有選項(xiàng)的顏色和諧統(tǒng)一，沒有誰是不易被發(fā)覺的。哪一個是禁用的?

9. 限制每頁一個按鈕，除非這個按鈕是重復(fù)性主要操作

按鈕能喚起頁面操作，我們通常用主按鈕，來吸引用戶對頁面最優(yōu)先功能的注意。除非，頁面上分布著一堆主按鈕，這時候我們沒辦法排出優(yōu)先級，那“用主按鈕來吸引用戶注意”這一招也就不管用了。

某些情況下，使用一個主按鈕是正確做法。比如你需要從一組平行對象中(例如搜索出來一堆結(jié)果)，或是，從設(shè)置頁面上展示的不同類別選項(xiàng)中，來做選擇。

你應(yīng)該定義在何時允許頁面中有多個主按鈕，否則要知道如何避免頁面上有多個主按鈕。

10. 留意虛擬按鈕(Ghosts)在設(shè)備上的顯示情況

虛擬按鈕，外觀上僅僅依賴同色的標(biāo)簽和邊線構(gòu)成，缺少中間的填充色。標(biāo)簽后面是什么這可就不確定了。嗯，最簡單的情況是白色背景。但其他時候，漸變色或者視覺元素豐富的照片會讓標(biāo)簽很難識別。

虛擬按鈕吸引著設(shè)計(jì)師把按鈕玩得復(fù)雜高深，而不像敦實(shí)的高對比的主按鈕。所以，才被稱為幽靈(Ghosts)。我在可用性測試后觀察到，虛擬按鈕在可用性測試時披上了一層隱形斗篷。被試者看不到按鈕或是無法識別它們。這可能會削弱或破壞按鈕的價(jià)值，無法通過交互提供那些我們意圖展現(xiàn)的操作。

在系統(tǒng)中放入虛擬按鈕后果自負(fù)哦。就我觀察得到的教訓(xùn)表明，虛擬按鈕比起它的填充版同行來說表現(xiàn)力更弱。加之，你可以避免花費(fèi)幾小時來聽意見不合的設(shè)計(jì)師為它爭論不休。

虛擬按鈕——即使是在簡單的情況下，它的表現(xiàn)也是要打問號的，如果是在無法預(yù)料的背景上呢?忘了它吧。

用不了很久，系統(tǒng)用戶會向你要求其他“那樣”的按鈕。一個大的或小的按鈕。一個帶有菜單或工具欄的可以在不同狀態(tài)間切換的按鈕。這就要求你的設(shè)計(jì)系統(tǒng)足夠完整。

11. 尺寸多樣化，可大(非常大/極大/特大)可小(非常小/極小/特小)

交互可以發(fā)生在密集區(qū)域，比如在卡片或側(cè)邊欄模塊。其他時候，你可能需要一個大型按鈕，用在占據(jù)了整個視窗的大化的圖片上。

提供工具來根據(jù)需要調(diào)大或調(diào)小按鈕，這個工具要讓人感覺簡單，就像另一個css的類或設(shè)計(jì)工具類型。另外，考慮一些好記的名字——比如：特大(puffy)，特小(micro)——而不僅僅只是平淡的大(large)或者小(small)，同樣的，調(diào)大調(diào)小，按鈕視覺表現(xiàn)力最強(qiáng)，次要稍弱，可以修改這些樣式：顏色、陰影、大小、留白、裝飾手段等等。因此在設(shè)計(jì)的時候，要學(xué)會使用以上方法。

12. 通過菜單和區(qū)域來增加多樣性

內(nèi)容豐富的按鈕可以通過觸發(fā)關(guān)聯(lián)菜單面板來進(jìn)行選擇。很多系統(tǒng)提供了豐富的選擇來使UI更緊湊，比如菜單(或下拉列表)或下拉(或分割)按鈕。

菜單按鈕或是顯示當(dāng)前選項(xiàng)(比如采用Arial字體族)或是展開獨(dú)立選項(xiàng)菜單(例如分享或者打印)。在右邊加入一個箭頭icon，你就能得到一個額外的分隔空間，從右邊下拉出一個菜單選項(xiàng)，同時左邊的標(biāo)簽激活一個單獨(dú)的主要動作。

用按鈕菜單選項(xiàng)來豐富你的APP，但是要謹(jǐn)慎。類似這樣的按鈕空間分隔方案(左邊的是正在進(jìn)行的動作，右邊的是菜單)支持很多應(yīng)用場景，但是帶來了更大的代碼開銷和更復(fù)雜的用戶引導(dǎo)。若是設(shè)計(jì)更簡潔的網(wǎng)頁，就不要多費(fèi)心思優(yōu)先考慮這種不多用的方案了。

當(dāng)前題目：網(wǎng)頁按鈕設(shè)計(jì)12條技巧
網(wǎng)頁網(wǎng)址：http://www.muchs.cn/news19/163819.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、營銷型網(wǎng)站建設(shè)、做網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、軟件開發(fā)

廣告

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