每個 app 里面會遇到「按鈕」，在發(fā)展的過程中，按鈕是怎樣變化的？怎樣設計按鈕才合理？AppSo（微信號 appsolution）這篇文章便為你解答。

　　按鈕是交互設計中一個常見基本元素。盡管按鈕看似一個非常簡單的用戶界面（UI）元素，在過去幾十年，其設計也經(jīng)歷了不少發(fā)展和演變。但萬變不離其宗，對于按鈕的用戶體驗（UX）設計仍關乎于辨識度和清晰度。

　　本文簡要概述了按鈕設計的發(fā)展演變，并提出用戶體驗好的按鈕設計應遵循的最佳實踐。

　　一、按鈕設計的發(fā)展演變

　　1. 3D 按鈕

　　自初以來，操作系統(tǒng)按鈕一直通過浮雕和陰影來區(qū)分外圍背景。這種設計方案是基于一個簡單原則——通過邊框、斜度和陰影使按鈕在背景內(nèi)容襯托下顯得醒目，這樣就方便將其識別為一個可點擊的元素。

　　2. 擬物按鈕

　　就數(shù)字設計而言，擬物化是指 UI 元素的設計與現(xiàn)實物體相像的一種方式，它可以是對現(xiàn)實物體材質(zhì)外觀的復制，也可以是模擬真實按鈕使其看似像實物按鈕。擬物化設計借助用戶對某物的先驗知識使其理解如何去使用新的交互界面。

　　3. 扁平按鈕

　　如今 UI 設計的一個重大轉變是逐漸從擬物化設計向扁平化設計過渡，設計效果也不再有 3D 效果。

　　與擬物化設計不同的是，扁平化設計被視作探索數(shù)字媒體的一種方式，其不再試圖去「還原」實物的材質(zhì)外觀。因此，其擯棄了起初用來告訴用戶哪些元素可點擊/可操作的厚重視覺線索。

　　當整個用戶界面都是扁平化設計，用戶如何知道按鈕在哪里呢？

　　用戶仍需要通過視覺指引（幫助用戶理解如何使用界面的可感知線索）來知道頁面上可點擊/可操作的地方。因此，顏色在扁平化設計中相當重要，因為若使用扁平按鈕，這些顏色將是幫助用戶識別按鈕的主要標識符之一。

　　4. 近扁平化設計及浮動操作按鈕（FAB）

　　近扁平化設計是在原扁平化設計（或超扁平化設計）基礎上的一種演變。這種設計幾乎是扁平化的，但又在設計中通過細薄陰影、高光和疊層在用戶界面制造出立體效果。

　　Google 的質(zhì)感設計（Material Design）語言即是一個按正確次序使用這些立體效果的近扁平化設計案例，它創(chuàng)新出一種全新按鈕：浮動操作按鈕（Floating Action Button，簡稱 FAB）。

　　這些按鈕置于用戶界面頂層，并吸引用戶進行進階操作（Promoted Actions）或主要操作（Primary Actions）。它們作為行為號召按鈕（用以促進進階操作），是用戶在某特定屏幕上最常用的單一操作。

　　Google Maps 是正確使用 FAB 的一個典例，用戶在地圖上最主要的操作行為是找到方向，所以Google FAB 的設計方式就能說得通。

　　另一個在 UI 設計中使用 FAB 的范例是 Evernote 。盡管 Evernote 的 UI 幾乎近扁平化，其在導航欄添加了細薄陰影，同時也使用了 FAB （新建筆記）。