當我們在網上購(gòu)物(wù),提交我們個(gè)人(rén)信息都需要用(yòng)到按鈕。網頁設計的(de)增長(cháng)很快(kuài),風格似乎也(yě)是一個(gè)月(yuè)一變。
在這(zhè)篇文章(zhāng)中,我們來(lái)追溯在Dribbble上按鈕設計的(de)八年發展史。
按鈕的(de)時(shí)間線
2009年,一個(gè)爲全世界設計師提供分(fēn)享他(tā)們設計項目的(de)平台成立了(le)——Dribbble。通(tōng)過Dribbble我們可(kě)以看到過去八年按鈕設計的(de)趨勢和(hé)變化(huà)。
我在Dribbble上找了(le)很多(duō)分(fēn)類,創建了(le)下(xià)面的(de)按鈕風格時(shí)間線:
2009
2009年,因特網要慶祝40周歲,第一個(gè)種類出現在Dribbble。按鈕設計以灰色爲主導,幾乎都是用(yòng)微妙的(de)漸變、 圓角和(hé)陰影(yǐng)構成。
2010
2010年,Instagram成立。按鈕的(de)風格并沒有大(dà)幅度的(de)改變,但是使用(yòng)了(le)更多(duō)的(de)顔色,更多(duō)的(de)細節(例如内陰影(yǐng)),更多(duō)的(de)裝飾排版。
2011
2011年,CSS3首次亮相,互聯網使用(yòng)者大(dà)規模增長(cháng)。拟物(wù)化(huà)依舊(jiù)占主導地位,但是有很多(duō)設計者開始在這(zhè)個(gè)風格上進行創新。也(yě)許你尋找不到陰影(yǐng)或者高(gāo)亮的(de)使用(yòng)規範,但是可(kě)以确定的(de)是這(zhè)些元素依舊(jiù)是每個(gè)項目的(de)主流。
2012
2012年,拟物(wù)化(huà)風格趨勢下(xià)降,扁平化(huà)風格趨勢開始出現。這(zhè)一年是拟物(wù)化(huà)風格發展最快(kuài)的(de)一年,很多(duō)設計師在這(zhè)種風格上達到了(le)很高(gāo)的(de)水(shuǐ)平。同時(shí),有些設計師開始尋找一些新的(de)東西。
2013
2013年,Apple明(míng)确的(de)将拟物(wù)化(huà)使用(yòng)在iOS7上。毫無疑問的(de),這(zhè)一年也(yě)出現了(le)新的(de)設計趨勢——扁平化(huà)設計。幾乎 Dribbble上每一個(gè)獨立的(de)設計師,在同一時(shí)間放棄了(le)在其App或者Web頁面上使用(yòng)三維的(de)按鈕,轉而使用(yòng)扁平化(huà)設計。
2014
2014年,谷歌(gē)發布了(le)Material Design。但是很多(duō)設計師并沒有完全遵循這(zhè)種風格。這(zhè)是非常有意思的(de)一年,因爲每個(gè)設計師幾乎是突然開始用(yòng)扁平化(huà)風格的(de)按鈕。在Dribbble中就能夠找到很多(duō)這(zhè)種風格。簡而言之就是,兩個(gè)像素的(de)邊框按鈕。
2015
在谷歌(gē)發布了(le)Material Design的(de)幾個(gè)月(yuè)後,UI設計師們很快(kuài)地喜歡上了(le)這(zhè)種風格。扁平的(de)按鈕下(xià)方增加了(le)微小的(de)陰影(yǐng)。 很多(duō)設計師将這(zhè)種風格應用(yòng)到項目中就能證明(míng)這(zhè)種風格對(duì)設計趨勢的(de)重大(dà)影(yǐng)響。
2016
2016年,設計師開始将新的(de)元素與 Material 和(hé)扁平化(huà)設計風格混合。漸變出現在按鈕設計中,不再強調三維感,而是強調按鈕本身的(de)質感。按鈕開始使用(yòng)發光(guāng)的(de)彩色陰影(yǐng)。
2017
2017年,一方面極簡主義和(hé)扁平化(huà)設計已經持續了(le)一年。另一方面,設計師們依舊(jiù)在尋找新的(de)表現形式。我們正處于一個(gè)在技術上沒有限制,而是局限于潮流和(hé)時(shí)尚框架的(de)階段。
接下(xià)來(lái)呢(ne)?
接下(xià)來(lái)按鈕的(de)發展是怎樣的(de)?我也(yě)不知道。隻知道按鈕進化(huà)的(de)原因有很多(duō)種,比如:技術的(de)改變,設計師設計意識的(de)成長(cháng),等等。
不可(kě)否認,按鈕已經成熟,随著(zhe)手勢交互、AR、VR,或者聲控交互的(de)發展,也(yě)許我們使用(yòng)多(duō)年的(de)按鈕是否還(hái)會存在,都是一個(gè)值得(de)探討(tǎo)的(de)問題。