網站的按鈕號召性用語(Call To Action),也扮演設計和導航元素。網站和應用程式的按鈕隨處可見 - 登入社交網路上的個人資料時、線上下訂單時、透過回饋表發送訊息時等。
在本文後面,您將看到大約 10 年前網站和應用程式的按鈕設計是什麼樣的。設計趨勢逐漸變化,網站按鈕的設計也隨之變化。我們收集了 2009 年以來最引人注目的例子。所有截圖均取自於2009年推出 馬來西亞手機號 的著名主題社群網路Dribbble。
2009年
網站按鈕設計_2009
這裡選擇了各種深淺的灰色來裝飾。幾乎在每一個實作中,您都可以找到整齊的漸層顏色和圓形邊緣。這種設計隱約類似於標準系統按鈕。
2010年
網站按鈕設計_2010
正是在這一年,最受歡迎的社群網路Instagram出現了。這些變化實際上並沒有影響網站按鈕的形狀,但它們的設計出現了更多的配色方案和不同的元素(例如,內部陰影)。至於網站上的排版,它變得更具裝飾性。
2011年
網站按鈕設計_2011
今年CCS3問世,萬維網用戶數突破10億,許多設計師依然遵循擬物化,以一種相當標新立異的方式朝這個方向發展。根據擬物化,介面元素模仿現實中的物體。很難理解開發人員在創建陰影和燈光效果時遵循哪些規則,但它們幾乎反映在每個專案中。
2012年
網站按鈕設計_2012
這一年是擬物化的最後一年。這時候,很多設計師已經精進了自己的技能,開始非常專業地運用這個方向。同時,需要尋找新的解決方案。同時,網站上按鈕的扁平化設計誕生了。
2013年
網站按鈕設計_2013
iOS7 的發布,開始了網站按鈕扁平化設計的趨勢,這種趨勢至今仍然具有現實意義。在此期間,站長們開始集體放棄在應用程式和介面中創建某種三維的嘗試,並開始積極測試新的方向。
2014年
網站按鈕設計_2014
Google 發布了流行的 Material Design,但許多大師並沒有將這種風格發揮到極致。此外,2014 年的標誌是網站按鈕、兩像素框架和各種顏色的平面和透明選項的出現。
2015年
網站按鈕設計_2015
谷歌的材料設計在發布幾個月後就開始流行。谷歌的材料設計立即引起了介面開發人員的青睞。許多項目已開始使用底部帶有細陰影和其他功能的平面按鈕。
2016年
網站按鈕設計_2016
設計師想要一些新的東西,因此將平面設計和材料設計結合起來。網站的按鈕設計正在改變 - 出現彩色陰影和高光。同時,許多按鈕都採用了漸層的設計,這樣不突顯立體感,而是強調物體的材質。
2017年
網站按鈕設計_2017
2017年網站按鈕的設計明顯受到極簡主義的影響。與此同時,站長們仍在尋找新的形式。沒有嚴格的技術限制。對設計的限制僅受潮流和時尚趨勢的影響。