今天的文章是關(guān)于按鈕的視覺(jué)發(fā)展史。畢竟現(xiàn)在AI，VR，AR等，太多因素的出現(xiàn)，按鈕以后的發(fā)展將會(huì)何去何從也是一個(gè)很值得探討的問(wèn)題。

當(dāng)我們?cè)诰W(wǎng)上購(gòu)物，提交我們個(gè)人信息都需要用到-按鈕。網(wǎng)頁(yè)設(shè)計(jì)的增長(zhǎng)很快，風(fēng)格似乎也是一個(gè)月一變。最近幾年，我們經(jīng)歷過(guò)從文本鏈接到擬物化設(shè)計(jì)再到扁平化瀑布流設(shè)計(jì)。導(dǎo)航是網(wǎng)頁(yè)設(shè)計(jì)中最重要的元素，并且按鈕是最重要的行為工具。

在這篇文章中，我們來(lái)追溯在Dribbble上按鈕設(shè)計(jì)的八年發(fā)展史。

按鈕的時(shí)間線

2009年，成立了一個(gè)為全世界設(shè)計(jì)師提供分享他們?cè)O(shè)計(jì)項(xiàng)目的平臺(tái)-Dribbble。通過(guò)Dribbble我們可以看到過(guò)去八年按鈕設(shè)計(jì)的趨勢(shì)和設(shè)計(jì)變化。

我在Dribbble上找了很多分類創(chuàng)建了下面的按鈕風(fēng)格時(shí)間線：

2009

2009年，因特網(wǎng)要慶祝40周歲，第一個(gè)種類出現(xiàn)在Dribbble。按鈕設(shè)計(jì)的以灰色為主導(dǎo)。按鈕幾乎都是用微妙的漸變，圓角，和陰影構(gòu)成。

2010

2010年，Instagram成立。按鈕的風(fēng)格并沒(méi)有大幅度的改變，但是使用了更多的顏色，更多的細(xì)節(jié)（例如內(nèi)陰影），更多的裝飾排版。

2011

2011年，CSS3首次亮相，互聯(lián)網(wǎng)使用者大規(guī)模增長(zhǎng)。擬物化依舊占主導(dǎo)地位，但是有很多設(shè)計(jì)者開(kāi)始在這個(gè)風(fēng)格上進(jìn)行創(chuàng)新。也許你找尋不到陰影或者高亮的使用規(guī)范，但是可以確定的是這些元素依舊是每個(gè)項(xiàng)目的主流。

2012

2012年，擬物化風(fēng)格趨勢(shì)下降，扁平化風(fēng)格趨勢(shì)開(kāi)始出現(xiàn)。這一年是擬物化風(fēng)格發(fā)展最快的一年，很多設(shè)計(jì)師在這種風(fēng)格上達(dá)到了很高的水平，同時(shí)有些設(shè)計(jì)師開(kāi)始尋找一些新的東西。

2013

2013年，Apple明確的將擬物化使用在iOS7上。毫無(wú)疑問(wèn)的，這一年也出現(xiàn)了新的設(shè)計(jì)趨勢(shì)——扁平化設(shè)計(jì)。幾乎Dribbble上每一個(gè)獨(dú)立的設(shè)計(jì)師——在同一時(shí)間——放棄了在其app或者web頁(yè)面上使用三維的按鈕，轉(zhuǎn)而決定使用平面設(shè)計(jì)。

2014

2014年，谷歌發(fā)布了Material Design。但是很多設(shè)計(jì)師并沒(méi)有完全遵循這種風(fēng)格。這是一個(gè)非常有意思的一年，因?yàn)槊總€(gè)設(shè)計(jì)師幾乎是突然開(kāi)始用扁平化風(fēng)格的按鈕。在Dribbble中就能夠找到很多這種風(fēng)格。簡(jiǎn)而言之就是：兩個(gè)像素的邊框按鈕。

2015

在谷歌發(fā)布了Material Design的幾個(gè)月后，UI設(shè)計(jì)師們很快的喜歡上了這種風(fēng)格。扁平的按鈕下方增加了微小的陰影。很多設(shè)計(jì)師將這種風(fēng)格應(yīng)用到項(xiàng)目中就能證明這種風(fēng)格對(duì)設(shè)計(jì)趨勢(shì)的重大影響。

2016

2016年，設(shè)計(jì)師開(kāi)始將新的元素與Material和平面設(shè)計(jì)風(fēng)格混合。漸變出現(xiàn)在按鈕設(shè)計(jì)中，不再?gòu)?qiáng)調(diào)三維感，而是強(qiáng)調(diào)按鈕本身的質(zhì)感。按鈕開(kāi)始使用發(fā)光的彩色陰影。

2017

2017年，一方面極簡(jiǎn)主義和扁平化設(shè)計(jì)已經(jīng)持續(xù)了一年。另一方面，設(shè)計(jì)師們依舊在尋找新的表現(xiàn)形式。我們正處于一個(gè)在技術(shù)上沒(méi)有限制，而是局限于潮流和時(shí)尚框架的階段。

接下來(lái)呢？

接下來(lái)按鈕的發(fā)展是怎樣的？我也不知道。只知道按鈕進(jìn)化的原因有很多種—技術(shù)的改變，設(shè)計(jì)師設(shè)計(jì)意識(shí)的成長(zhǎng)，等。

不可否認(rèn)，按鈕已經(jīng)成熟，可以進(jìn)行其他方面的更改。隨著手勢(shì)交互，AR，VR，或者聲控交互，也許我們使用多年的按鈕是否還會(huì)存在都是一個(gè)值得探討的問(wèn)題？

END

原文作者：Wojciech Dobry

原文地址：https://blog.framer.com/button-design-over-the-years-a-dribbble-timeline-5eb138b09b91

譯者：小船，微信公眾號(hào)【漁夫和Ta的靈魂】

本文由 @小船 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自u(píng)nsplash，基于CC0協(xié)議