做了幾年網(wǎng)頁(yè)/UI設(shè)計(jì)居然連一個(gè)簡(jiǎn)單的按鈕Button都設(shè)計(jì)不好！

時(shí)間：2023-10-14 02:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-14 02:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

做了幾年網(wǎng)頁(yè)/UI設(shè)計(jì)居然連一個(gè)簡(jiǎn)單的按鈕Button都設(shè)計(jì)不好！：當(dāng)今的互聯(lián)網(wǎng)產(chǎn)品，無(wú)論是企業(yè)官網(wǎng)，手機(jī)移動(dòng)端網(wǎng)站，還是各種App，幾乎找不出一個(gè)產(chǎn)品是沒(méi)有按鈕的。按鈕是一個(gè)非常小的設(shè)計(jì)元素但在UI設(shè)計(jì)中卻有種很關(guān)鍵很重要的地位，甚至可以說(shuō)每一個(gè)界面中都少不了它。還有學(xué)生告訴過(guò)我，他學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)就是從繪制一個(gè)按鈕開(kāi)始的。為了能更好的研究透徹關(guān)于網(wǎng)頁(yè)界面的按鈕圖標(biāo)設(shè)計(jì)，有些ui設(shè)計(jì)專(zhuān)家及權(quán)威用戶(hù)體驗(yàn)憑條還專(zhuān)門(mén)研究了關(guān)于App界面中按鈕設(shè)計(jì)以什么樣的形式和狀態(tài)出現(xiàn)為最符合用戶(hù)體驗(yàn)。




由于本人參與的重大項(xiàng)目也僅有2個(gè)，資歷尚淺，接下來(lái)就簡(jiǎn)單的談一談，按鈕設(shè)計(jì)的相關(guān)趣聞和故事。將會(huì)按照四個(gè)部分來(lái)講解。圖文有點(diǎn)長(zhǎng)，希望大家做好堅(jiān)持的準(zhǔn)備。

1. 按鈕的發(fā)展史
2. 扁平化環(huán)境下的按鈕設(shè)計(jì)
3. 按鈕設(shè)計(jì)有哪些技巧及注意事項(xiàng)
4. 遇到兩個(gè)以上的按鈕及按鈕群該如何設(shè)計(jì)
   

-1-

按鈕的發(fā)展史
















從電腦殺入中國(guó)市場(chǎng)起初，我相信很多人都這個(gè)界面都記憶尤深。













天禧，操作系統(tǒng)是 windows 98，里面的按鈕都是這種三維風(fēng)格的，用很明顯的陰影和高光來(lái)告訴用戶(hù)這是一個(gè)可以點(diǎn)擊的按鈕，是和其他區(qū)域不同的。那時(shí)候電腦的分辨率很低，我們可以清楚地看到按鈕邊緣的像素顆粒。由于基于圖形的交互界面剛剛代替了基于命令行的界面，是個(gè)新鮮事物，所以設(shè)計(jì)按鈕時(shí)最關(guān)鍵的就是要讓它從界面中突出出來(lái)，讓用戶(hù)不需要提示也可以知道它是個(gè)可以點(diǎn)擊的按鈕，很明顯他們做到了。




后來(lái)擬物化按鈕風(fēng)格來(lái)襲。













擬物化按鈕，追根溯源，是由喬布斯發(fā)揚(yáng)光大的，擬物化是一個(gè)設(shè)計(jì)原則，設(shè)計(jì)靈感來(lái)自于現(xiàn)實(shí)世界，喬布斯鐘愛(ài)于擬物化設(shè)計(jì)，他認(rèn)為擬物化的設(shè)計(jì)能讓人立刻就知道這個(gè)軟件是做什么的，讓用戶(hù)將他們?cè)诂F(xiàn)實(shí)世界中的經(jīng)驗(yàn)帶到虛擬世界中，從而降低用戶(hù)的學(xué)習(xí)成本。




從 1997 年喬布斯重回蘋(píng)果一直到 2012 年的 iOS 6，蘋(píng)果都在堅(jiān)持和推進(jìn)擬物化設(shè)計(jì)，現(xiàn)在打開(kāi) dribbble 搜一搜 2012 年左右的作品，那時(shí)候的設(shè)計(jì)師都會(huì)把擬物化做到極致，超寫(xiě)實(shí)的光影和紋理，如果用 Ps 做不出來(lái)的話就用三維軟件來(lái)做。




第一個(gè)擬物化的設(shè)計(jì)現(xiàn)在追溯起來(lái)應(yīng)該是蘋(píng)果的 Quicktime 4，當(dāng)時(shí)蘋(píng)果團(tuán)隊(duì)設(shè)計(jì)了很多方案喬布斯都不滿(mǎn)意，他要求軟件的外觀要和真實(shí)的立體聲播放機(jī)一致，擁有金屬的外觀。最后他把自己的百年靈手表扔給設(shè)計(jì)師，說(shuō)你們就照著這個(gè)紋理畫(huà)吧，這樣擁有金屬拉絲外觀的 Quicktime 4 就誕生了。













2012 年流行的擬物化界面，將按鈕的質(zhì)感做到極致













隨著2013年蘋(píng)果推出 iOS 7，扁平化取代了擬物化，成為新的設(shè)計(jì)潮流。界面上所有的紋理和立體效果都被抹去，用戶(hù)的視線從外觀回歸到內(nèi)容本身。從圖形化操作界面的出現(xiàn)到現(xiàn)在，已經(jīng)經(jīng)歷了將近20年，其實(shí)就算不把一個(gè)按鈕做成立體的樣子，只要給它以顏色的區(qū)分，大家都知道它是一個(gè)可點(diǎn)擊的按鈕，所以擬物化的存在就沒(méi)有那么必要了。













后來(lái)又出現(xiàn)了幽靈按鈕，這個(gè)名字很有意思，在英文中它叫 Ghost Button ，其實(shí)就是將一個(gè)按鈕挖空了，只有邊界的描邊和按鈕上的文字，它一般是和扁平化按鈕成對(duì)出現(xiàn)的。因?yàn)檫@種按鈕是空心的，容易和背景融為一體，不會(huì)凸顯出來(lái)，從而更加突出旁邊的按鈕。




幽靈按鈕的使用，因?yàn)槭强招牡模愿油怀隽俗筮叞咨?Download your free trai 按鈕











微質(zhì)感按鈕的到來(lái)




在如今的后扁平化時(shí)代，按鈕的設(shè)計(jì)已經(jīng)不局限于扁平化和擬物化了，經(jīng)常把他們結(jié)合起來(lái)，用一些不容易察覺(jué)到的漸變來(lái)表現(xiàn)光影的變化，用陰影表現(xiàn)交互的層級(jí)，大家設(shè)計(jì)的思路也越來(lái)越開(kāi)闊，根據(jù)自己的需要來(lái)設(shè)計(jì)各式各樣的按鈕。













Material design 中用陰影表示層級(jí)，里面的按鈕也需要遵循這樣的設(shè)計(jì)原則










有時(shí)候用有顏色的陰影顯得畫(huà)面更干凈，本來(lái)是好的想法，但是被濫用了










其實(shí)每一個(gè)按鈕都是為了引導(dǎo)用戶(hù)在正確的時(shí)候點(diǎn)擊它，我們從按鈕風(fēng)格的轉(zhuǎn)變可以看到設(shè)計(jì)風(fēng)格的轉(zhuǎn)變和設(shè)計(jì)思維的轉(zhuǎn)變。設(shè)計(jì)風(fēng)格和藝術(shù)的演變其實(shí)一直是不斷輪回，螺旋上升的，從最開(kāi)始古人類(lèi)在巖石上畫(huà)下的抽象的壁畫(huà)，到后來(lái)蒙娜麗莎寫(xiě)實(shí)的油畫(huà)，再到畢加索抽象的作品。從上世紀(jì)的的包豪斯風(fēng)格和極簡(jiǎn)主義，到后來(lái)的擬物化設(shè)計(jì)，再到現(xiàn)在的后扁平化時(shí)代，就像輪回一樣，設(shè)計(jì)的功能和初衷才是最重要的，而風(fēng)格一直隨著它不斷變化。













-2-

按鈕在扁平化設(shè)計(jì)環(huán)境中如何設(shè)計(jì)才更讓用戶(hù)“寵幸”，產(chǎn)生點(diǎn)擊欲望




扁平化按鈕跟非扁平化按鈕在作用上是一致的，區(qū)別不大，但扁平化的極簡(jiǎn)設(shè)計(jì)對(duì)設(shè)計(jì)師提出了更高要求：




- 精煉內(nèi)容

- 真正地思考主要任務(wù)，讓用戶(hù)專(zhuān)注于主要任務(wù)

- 重復(fù)上兩點(diǎn)來(lái)不斷迭代

- 勇敢地重新設(shè)計(jì)




在一個(gè)出彩的界面設(shè)計(jì)中，考慮周全的全局設(shè)計(jì)布局界面，至少應(yīng)該包含以下因素：




- 對(duì)比顏色、大小及位置

- 考慮按鈕作用類(lèi)型及使用場(chǎng)景

- 各種動(dòng)賓短語(yǔ)、口號(hào)或識(shí)別度高的icon

- 填寫(xiě)校驗(yàn)及懸停狀態(tài)

- 其他




這些因素一定要考慮進(jìn)去才能做出有點(diǎn)擊欲望的按鈕，才是真正的“優(yōu)秀和有效的行為召喚”




假如沒(méi)有考慮進(jìn)去，即便按鈕做得再精致和擬物化，一樣是失敗的，讓用戶(hù)想放棄的按鈕。




非扁平vs扁平【iOS 7 的鍵盤(pán)按鈕也是有陰影】
















扁平vs非扁平










iOS 7 絕大多數(shù)情況都具有良好的上下文，當(dāng)然也專(zhuān)注于讓用戶(hù)一次只做一個(gè)任務(wù)。在有上下文關(guān)聯(lián)的情況下，就算是簡(jiǎn)單的「文字鏈接」也會(huì)很容易被識(shí)別。當(dāng)然左圖的「Agree」按鈕也使用了加粗的對(duì)比效果。



















-3-

按鈕設(shè)計(jì)都有哪些技巧







按鈕提供了一個(gè)樣式簡(jiǎn)單的標(biāo)簽供人在界定區(qū)域內(nèi)點(diǎn)擊，是你應(yīng)用設(shè)計(jì)語(yǔ)言基本屬性的方式，這種方式以后還會(huì)應(yīng)用在更加復(fù)雜的組件當(dāng)中。




01

-

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
























在扁平設(shè)計(jì)時(shí)代，類(lèi)似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ì)齊等。




02

-

設(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)始把指南橋接在一起的好地方。




03

-

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




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






















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




04

-

設(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)畫(huà)。













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




05

-

按鈕是系統(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ì)讓用戶(hù)知道這樣的按鈕是什么用途。




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




06

-

次要的按鈕不要過(guò)度使用灰色以免跟禁用按鈕混淆




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




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




07

-

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




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













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




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




08

-

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




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




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













09

-

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




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




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




010

-

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




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




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



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
















-4-

遇到按鈕群（多個(gè)按鈕一起時(shí)）如何設(shè)計(jì)













首先我們來(lái)說(shuō)判斷，就是只有兩個(gè)按鈕的情況。一般來(lái)說(shuō)，兩個(gè)按鈕中肯定有一個(gè)擁有更高的優(yōu)先級(jí)或者說(shuō)用戶(hù)更希望去點(diǎn)擊，那么我們會(huì)在樣式設(shè)計(jì)上進(jìn)行區(qū)分。













微信的”取消”按鈕背景色選擇的是灰色，而淘寶直接讓”取消”成了一個(gè)光禿禿的文字按鈕。這樣的對(duì)比設(shè)置可以讓用戶(hù)很快找到“確認(rèn)登陸”按鈕，進(jìn)而完成登錄操作，提升了操作效率。




其實(shí)可以讓用戶(hù)進(jìn)行判斷操作的組件還有開(kāi)關(guān)。開(kāi)關(guān)，又稱(chēng)switch，也是我們很常見(jiàn)的一個(gè)組件，表示兩種相互對(duì)立的狀態(tài)間的切換，多用于表示功能的開(kāi)啟和關(guān)閉。而一項(xiàng)功能的開(kāi)啟可能會(huì)帶來(lái)相應(yīng)的后續(xù)操作，例如你在iOS設(shè)置里開(kāi)啟了微信的“通知”功能，那么你就需要對(duì)通知形式進(jìn)行進(jìn)一步的設(shè)置。而按鈕組不會(huì)出現(xiàn)這些后續(xù)操作，更像是一錘子買(mǎi)賣(mài)，這也是按鈕組和開(kāi)關(guān)的一個(gè)主要的區(qū)別。













如果選項(xiàng)在一屏的寬度中可以展示完全，那么組合在一起和分開(kāi)的區(qū)別并不是很大，但是一旦選項(xiàng)過(guò)多需要用戶(hù)滑動(dòng)和換行才能瀏覽完的時(shí)候，分開(kāi)的樣式更加適合。













單選/復(fù)選都是供用戶(hù)進(jìn)行選擇操作，其實(shí)還有一個(gè)組件跟單選/復(fù)選很相似，那就是下拉列表。當(dāng)選項(xiàng)過(guò)多時(shí)，用戶(hù)可以使用下拉菜單展示并選擇內(nèi)容。下拉列表的優(yōu)勢(shì)在于節(jié)省了界面空間，但是用戶(hù)想要看到全部的選項(xiàng)必須要點(diǎn)擊出下拉列表，增加了操作步驟，而且會(huì)對(duì)界面中其他內(nèi)容造成遮擋。所以當(dāng)你的界面元素不是很多的情況下，我的個(gè)人建議是盡量使用單選/復(fù)選按鈕。