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

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

　　本文簡(jiǎn)要概述了按鈕設(shè)計(jì)的發(fā)展演變，并提出用戶體驗(yàn)好的按鈕設(shè)計(jì)應(yīng)遵循的最佳實(shí)踐。

　　一、按鈕設(shè)計(jì)的發(fā)展演變

　　1. 3D 按鈕

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

　　2. 擬物按鈕

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

　　3. 扁平按鈕

　　如今 UI 設(shè)計(jì)的一個(gè)重大轉(zhuǎn)變是逐漸從擬物化設(shè)計(jì)向扁平化設(shè)計(jì)過(guò)渡，設(shè)計(jì)效果也不再有 3D 效果。

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

　　當(dāng)整個(gè)用戶界面都是扁平化設(shè)計(jì)，用戶如何知道按鈕在哪里呢？

　　用戶仍需要通過(guò)視覺(jué)指引（幫助用戶理解如何使用界面的可感知線索）來(lái)知道頁(yè)面上可點(diǎn)擊/可操作的地方。因此，顏色在扁平化設(shè)計(jì)中相當(dāng)重要，因?yàn)槿羰褂帽馄桨粹o，這些顏色將是幫助用戶識(shí)別按鈕的主要標(biāo)識(shí)符之一。

　　4. 近扁平化設(shè)計(jì)及浮動(dòng)操作按鈕（FAB）

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

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

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

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

　　另一個(gè)在 UI 設(shè)計(jì)中使用 FAB 的范例是 Evernote 。盡管 Evernote 的 UI 幾乎近扁平化，其在導(dǎo)航欄添加了細(xì)薄陰影，同時(shí)也使用了 FAB （新建筆記）。