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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8. 確保次要按鈕≠禁用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

12. 通過(guò)菜單和區(qū)域來(lái)增加多樣性

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

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

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

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

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

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)