從「按鈕」看設計風格的演變

01-28

按鈕是一個很小的設計元素，但是在 UI 設計中卻有著很重要的地位，每個界面中都少不了它的身影，可能有很多人和我一樣，學 UI 都是從臨摹擬物化的按鈕開始的，但是最初的按鈕和我們現在看到的可不太一樣，今天就來聊聊按鈕和設計風格的演變、

三維按鈕

在我小的時候，家裡買了第一台電腦，聯想的，名字好像叫天禧，操作系統是 windows 98，裡面的按鈕都是這種三維風格的，用很明顯的陰影和高光來告訴用戶這是一個可以點擊的按鈕，是和其他區域不同的。那時候電腦的解析度很低，我們可以清楚地看到按鈕邊緣的像素顆粒。由於基於圖形的交互界面剛剛代替了基於命令行的界面，是個新鮮事物，所以設計按鈕時最關鍵的就是要讓它從界面中突出出來，讓用戶不需要提示也可以知道它是個可以點擊的按鈕，很明顯他們做到了。

（windows 98 的按鈕設計，有很好的突出效果）

擬物化按鈕

擬物化按鈕，追根溯源，是由喬布斯發揚光大的，擬物化是一個設計原則，設計靈感來自於現實世界，喬布斯鍾愛於擬物化設計，他認為擬物化的設計能讓人立刻就知道這個軟體是做什麼的，讓用戶將他們在現實世界中的經驗帶到虛擬世界中，從而降低用戶的學習成本。

從 1997 年喬布斯重回蘋果一直到 2012 年的 iOS 6，蘋果都在堅持和推進擬物化設計，現在打開 dribbble 搜一搜 2012 年左右的作品，那時候的設計師都會把擬物化做到極致，超寫實的光影和紋理，如果用 Ps 做不出來的話就用三維軟體來做。

第一個擬物化的設計現在追溯起來應該是蘋果的 Quicktime 4，當時蘋果團隊設計了很多方案喬布斯都不滿意，他要求軟體的外觀要和真實的立體聲播放機一致，擁有金屬的外觀。最後他把自己的百年靈手錶扔給設計師，說你們就照著這個紋理畫吧，這樣擁有金屬拉絲外觀的 Quicktime 4 就誕生了。

（Quicktime 4 的金屬拉絲外觀和塑料質感的按鈕）

（2012 年流行的擬物化界面，將按鈕的質感做到極致）

扁平化按鈕和幽靈按鈕

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

後來又出現了幽靈按鈕，這個名字很有意思，在英文中它叫 Ghost Button ，其實就是將一個按鈕挖空了，只有邊界的描邊和按鈕上的文字，它一般是和扁平化按鈕成對出現的。因為這種按鈕是空心的，容易和背景融為一體，不會凸顯出來，從而更加突出旁邊的按鈕。

（幽靈按鈕的使用，因為是空心的，所以更加突出了左邊白色的 Download your free trai 按鈕）

微質感按鈕

在如今的後扁平化時代，按鈕的設計已經不局限於扁平化和擬物化了，經常把他們結合起來，用一些不容易察覺到的漸變來表現光影的變化，用陰影表現交互的層級，大家設計的思路也越來越開闊，根據自己的需要來設計各式各樣的按鈕。

（Material design 中用陰影表示層級，裡面的按鈕也需要遵循這樣的設計原則）

（有時候用有顏色的陰影顯得畫面更乾淨，本來是好的想法，但是被濫用了）

其實每一個按鈕都是為了引導用戶在正確的時候點擊它，我們從按鈕風格的轉變可以看到設計風格的轉變和設計思維的轉變。設計風格和藝術的演變其實一直是不斷輪迴，螺旋上升的，從最開始古人類在岩石上畫下的抽象的壁畫，到後來蒙娜麗莎寫實的油畫，再到畢加索抽象的作品。從上世紀的的包豪斯風格和極簡主義，到後來的擬物化設計，再到現在的後扁平化時代，就像輪迴一樣，設計的功能和初衷才是最重要的，而風格一直隨著它不斷變化。