好產(chǎn)品，或許你已見(jiàn)得不少。但好產(chǎn)品背后的探索和思考，恐怕沒(méi)有太多人知道。
在靈感早讀，你會(huì)知道「產(chǎn)品人」如何創(chuàng)作，提供更好的用戶(hù)體驗(yàn)，并影響成千上萬(wàn)人的生活。
我們精選優(yōu)質(zhì)內(nèi)容，為你提供特別的產(chǎn)品視角。 如果你有好文推薦，或者希望投稿，歡迎聯(lián)系 appsolution@ifanr.com。
微信號(hào) appsolution 后臺(tái)回復(fù)「早讀」可獲取文章合輯。
A 君導(dǎo)語(yǔ)：我們用每個(gè) app，都會(huì)遇到「按鈕」。在發(fā)展的過(guò)程中，按鈕是怎樣變化的？怎樣設(shè)計(jì)按鈕才合理？AppSo（微信號(hào) appsolution）這篇文章便為你解答。
按鈕是交互設(shè)計(jì)中一個(gè)常見(jiàn)基本元素。盡管按鈕看似一個(gè)非常簡(jiǎn)單的用戶(hù)界面（UI）元素，在過(guò)去幾十年，其設(shè)計(jì)也經(jīng)歷了不少發(fā)展和演變。但萬(wàn)變不離其宗，對(duì)于按鈕的用戶(hù)體驗(yàn)（UX）設(shè)計(jì)仍關(guān)乎于辨識(shí)度和清晰度。本文簡(jiǎn)要概述了按鈕設(shè)計(jì)的發(fā)展演變，并提出用戶(hù)體驗(yàn)好的按鈕設(shè)計(jì)應(yīng)遵循的最佳實(shí)踐。自初以來(lái)，操作系統(tǒng)按鈕一直通過(guò)浮雕和陰影來(lái)區(qū)分外圍背景。這種設(shè)計(jì)方案是基于一個(gè)簡(jiǎn)單原則——通過(guò)邊框、斜度和陰影使按鈕在背景內(nèi)容襯托下顯得醒目，這樣就方便將其識(shí)別為一個(gè)可點(diǎn)擊的元素。Windows 95 對(duì)話框使用了厚重陰影和高光來(lái)制造 3D 效果，以輔助用戶(hù)識(shí)別視覺(jué)層次，并了解哪些元素是交互元素。
凸顯的交互元素看似能（通過(guò)點(diǎn)擊鼠標(biāo)）按下去就數(shù)字設(shè)計(jì)而言，擬物化是指 UI 元素的設(shè)計(jì)與現(xiàn)實(shí)物體相像的一種方式，它可以是對(duì)現(xiàn)實(shí)物體材質(zhì)外觀的復(fù)制，也可以是模擬真實(shí)按鈕使其看似像實(shí)物按鈕。擬物化設(shè)計(jì)借助用戶(hù)對(duì)某物的先驗(yàn)知識(shí)使其理解如何去使用新的交互界面。下圖中對(duì)計(jì)算器的擬物設(shè)計(jì)即通過(guò)用戶(hù)對(duì)計(jì)算器實(shí)物的先驗(yàn)知識(shí)，從而幫助用戶(hù)在數(shù)字環(huán)境中更好地去認(rèn)識(shí)和使用它。如今 UI 設(shè)計(jì)的一個(gè)重大轉(zhuǎn)變是逐漸從擬物化設(shè)計(jì)向扁平化設(shè)計(jì)過(guò)渡，設(shè)計(jì)效果也不再有 3D 效果。與擬物化設(shè)計(jì)不同的是，扁平化設(shè)計(jì)被視作探索數(shù)字媒體的一種方式，其不再試圖去「還原」實(shí)物的材質(zhì)外觀。因此，其擯棄了起初用來(lái)告訴用戶(hù)哪些元素可點(diǎn)擊/可操作的厚重視覺(jué)線索。
蘋(píng)果 iOS 系統(tǒng)的計(jì)算器 App當(dāng)整個(gè)用戶(hù)界面都是扁平化設(shè)計(jì)，用戶(hù)如何知道按鈕在哪里呢？用戶(hù)仍需要通過(guò)視覺(jué)指引（幫助用戶(hù)理解如何使用界面的可感知線索）來(lái)知道頁(yè)面上可點(diǎn)擊/可操作的地方。因此，顏色在扁平化設(shè)計(jì)中相當(dāng)重要，因?yàn)槿羰褂帽馄桨粹o，這些顏色將是幫助用戶(hù)識(shí)別按鈕的主要標(biāo)識(shí)符之一。4. 近扁平化設(shè)計(jì)及浮動(dòng)操作按鈕（FAB）近扁平化設(shè)計(jì)是在原扁平化設(shè)計(jì)（或超扁平化設(shè)計(jì)）基礎(chǔ)上的一種演變。這種設(shè)計(jì)幾乎是扁平化的，但又在設(shè)計(jì)中通過(guò)細(xì)薄陰影、高光和疊層在用戶(hù)界面制造出立體效果。Google 的質(zhì)感設(shè)計(jì)（Material Design）語(yǔ)言即是一個(gè)按正確次序使用這些立體效果的近扁平化設(shè)計(jì)案例，它創(chuàng)新出一種全新按鈕：浮動(dòng)操作按鈕（Floating Action Button，簡(jiǎn)稱(chēng) FAB）。這些按鈕置于用戶(hù)界面頂層，并吸引用戶(hù)進(jìn)行進(jìn)階操作（Promoted Actions）或主要操作（Primary Actions）。它們作為行為號(hào)召按鈕（用以促進(jìn)進(jìn)階操作），是用戶(hù)在某特定屏幕上最常用的單一操作。Google Maps 是正確使用 FAB 的一個(gè)典例，用戶(hù)在地圖上最主要的操作行為是找到方向，所以Google FAB 的設(shè)計(jì)方式就能說(shuō)得通。
Android 系統(tǒng)上的 Google Maps另一個(gè)在 UI 設(shè)計(jì)中使用 FAB 的范例是 Evernote 。盡管 Evernote 的 UI 幾乎近扁平化，其在導(dǎo)航欄添加了細(xì)薄陰影，同時(shí)也使用了 FAB （新建筆記）。
Android 系統(tǒng)上的 Evernote 應(yīng)用2014年，UI 設(shè)計(jì)領(lǐng)域的主導(dǎo)性演變趨勢(shì)之一就是虛擬按鈕的應(yīng)用。虛擬按鈕是有基本形狀的透明或中空按鈕，按鈕形狀通常是矩形或正方形。虛擬按鈕也被稱(chēng)為「中空（empty）按鈕」、「裸露（naked）按鈕」或「鏤空（hollow）按鈕」。虛擬按鈕的邊框通常是一條非常細(xì)的線條，框內(nèi)即純文本。
普通設(shè)計(jì)（左）和聚焦設(shè)計(jì)（右）虛擬按鈕最初始于扁平化設(shè)計(jì)的發(fā)展演變，當(dāng)蘋(píng)果發(fā)布 iOS 7 后就變得非常流行。蘋(píng)果 iOS 界面有很多虛擬按鈕的應(yīng)用。簡(jiǎn)約的矩形方框加上框內(nèi)整潔的字體，使得扁平化界面看起來(lái)非常完美。
「Name」、「Release Data」以及「Featured」類(lèi)似虛擬按鈕?！窯ET」是虛擬按鈕。虛擬按鈕通?？此菩袨樘?hào)召（Call to Action, 簡(jiǎn)稱(chēng) CTA）按鈕，同時(shí)展示其清爽外觀。Specular 網(wǎng)站是應(yīng)用此類(lèi)按鈕的一個(gè)很好的范例。
Specular 網(wǎng)站上使用了扁平化按鈕「立即購(gòu)買(mǎi)（PURCHASE NOW）」作為主要操作按鈕，同時(shí)使用虛擬按鈕「瀏覽（TAKE TOUR）」作為次要操作按鈕。二、按鈕設(shè)計(jì)的基本最佳實(shí)踐在開(kāi)始設(shè)計(jì)按鈕之前，要考慮你的設(shè)計(jì)如何向用戶(hù)傳達(dá)出可供性（Affordance，可供性就設(shè)計(jì)而言，其著重于物體與用戶(hù)之前的關(guān)系，以及其達(dá)到的效果和提示作用）。那用戶(hù)如何將交互界面元素理解為按鈕呢？鑒于此，在設(shè)計(jì)中你更應(yīng)該：使按鈕看起來(lái)像按鈕（詳見(jiàn)「外形」部分）
使用戶(hù)易于與按鈕交互（詳見(jiàn)「尺寸和內(nèi)邊距」部分）
按鈕的標(biāo)簽體現(xiàn)其功能（詳見(jiàn)「標(biāo)簽」部分）
使用顏色對(duì)比來(lái)指引用戶(hù)行為（詳見(jiàn)「顏色」部分）
此外，還要確保在所有界面交互控制中保持一致性，這樣用戶(hù)就能在 app 或網(wǎng)站的每個(gè)頁(yè)面上從 UI 元素中識(shí)別出按鈕。穩(wěn)妥的方式就是根據(jù)網(wǎng)站或 app 的風(fēng)格來(lái)設(shè)計(jì)方形按鈕或圓角方形按鈕。矩形狀按鈕很久之前就應(yīng)用于數(shù)字世界的設(shè)計(jì)，用戶(hù)對(duì)此也非常熟悉了。據(jù)研究顯示，圓角能促進(jìn)信息處理，并吸引用戶(hù)聚焦到元素正中央。當(dāng)然，你還可以加入更多創(chuàng)意元素，使用如圓形，三角形甚至自定義形狀的其它形狀，但要注意，使用這些形狀可能會(huì)更加冒險(xiǎn)。在幫助用戶(hù)識(shí)別按鈕元素時(shí)，按鈕的尺寸大小也非常重要。你需要考慮按鈕元素的尺寸大小，同時(shí)還要考慮可點(diǎn)擊元素間的內(nèi)邊距。尺寸。當(dāng)你使用輕擊（tap）作為 app 或網(wǎng)站的主要輸入交互方式時(shí)，你可以參考麻省理工大學(xué)觸擊實(shí)驗(yàn)室（MIT Touch Lab）的研究，從而為你的按鈕設(shè)計(jì)選擇合適的尺寸。根據(jù) MIT 的研究發(fā)現(xiàn)，指墊的平均寬度在10-14毫米之間，指尖的平均寬度在8-10毫米之間。因此，10x10毫米是觸屏按鈕最小尺寸的一個(gè)好選擇。
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶(hù)發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
