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

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

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

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

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

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

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

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

幸好，過去“點擊這里”是存在的。但我們依然需要回答：按鈕標(biāo)簽可以有多長。標(biāo)簽是采用祈使語氣，即命令式、強制性的語氣嗎(例如，“保存”或者“關(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è)計并建立按鈕的交互規(guī)范

按鈕是最簡單原始的交互，交互伴隨著改變。僅僅呈現(xiàn)給開發(fā)者頁面加載時按鈕的樣式來表示“按鈕長這樣!”是不夠的。不是開發(fā)者而是設(shè)計者，來決定狀態(tài)切換的按鈕是如何呈現(xiàn)的，包括：默認(rèn)狀態(tài)，鼠標(biāo)懸停，焦點獲取(“光暈狀態(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)，重要的按鈕需要做出強調(diào)，可以利用顏色，可以利用邊框，可以利用不一樣的顯示方式。

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

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

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

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

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

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

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

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

8. 確保次要按鈕≠禁用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

當(dāng)前文章：網(wǎng)頁按鈕設(shè)計12條技巧
轉(zhuǎn)載源于：http://www.rwnh.cn/news/163819.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站排名、網(wǎng)站維護、外貿(mào)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、網(wǎng)站策劃

廣告

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