中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

1. 3D 按鈕

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

注意按鈕是如何凸顯的

Windows 95 對話框使用了厚重陰影和高光來制造 3D 效果，以輔助用戶識別視覺層次，并了解哪些元素是交互元素。

凸顯的交互元素看似能（通過點擊鼠標(biāo)）按下去

2. 擬物按鈕

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

下圖中對計算器的擬物設(shè)計即通過用戶對計算器實物的先驗知識，從而幫助用戶在數(shù)字環(huán)境中更好地去認(rèn)識和使用它。

圖片來源：theultralinx

3. 扁平按鈕

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

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

整齊排列的扁平按鈕

蘋果 iOS 系統(tǒng)的計算器 App

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

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

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

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

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

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

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

Android 系統(tǒng)上的 Google Maps

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

安卓系統(tǒng)上的 Evernote 應(yīng)用

5. 虛擬按鈕

2014年，UI 設(shè)計領(lǐng)域的主導(dǎo)性演變趨勢之一就是虛擬按鈕的應(yīng)用。虛擬按鈕是有基本形狀的透明或中空按鈕，按鈕形狀通常是矩形或正方形。

虛擬按鈕也被稱為「中空（empty）按鈕」、「裸露（naked）按鈕」或「鏤空（hollow）按鈕」。虛擬按鈕的邊框通常是一條非常細(xì)的線條，框內(nèi)即純文本。

普通設(shè)計（左）和聚焦設(shè)計（右）

虛擬按鈕最初始于扁平化設(shè)計的發(fā)展演變，當(dāng)蘋果發(fā)布 iOS 7 后就變得非常流行。蘋果 iOS 界面有很多虛擬按鈕的應(yīng)用。

簡約的矩形方框加上框內(nèi)整潔的字體，使得扁平化界面看起來非常完美。

「Name」、「Release Data」以及「Featured」類似虛擬按鈕?！窯ET」是虛擬按鈕。

虛擬按鈕通?？此菩袨樘栒伲–all to Action, 簡稱 CTA）按鈕，同時展示其清爽外觀。Specular 網(wǎng)站是應(yīng)用此類按鈕的一個很好的范例。

Specular 網(wǎng)站上使用了扁平化按鈕「立即購買（PURCHASE NOW）」作為主要操作按鈕，同時使用虛擬按鈕「瀏覽（TAKE TOUR）」作為次要操作按鈕。

二、按鈕設(shè)計的基本最佳實踐

在開始設(shè)計按鈕之前，要考慮你的設(shè)計如何向用戶傳達出可供性（Affordance，可供性就設(shè)計而言，其著重于物體與用戶之前的關(guān)系，以及其達到的效果和提示作用）。那用戶如何將交互界面元素理解為按鈕呢？鑒于此，在設(shè)計中你更應(yīng)該：

此外，還要確保在所有界面交互控制中保持一致性，這樣用戶就能在 app 或網(wǎng)站的每個頁面上從 UI 元素中識別出按鈕。

1. 外形

穩(wěn)妥的方式就是根據(jù)網(wǎng)站或 app 的風(fēng)格來設(shè)計方形按鈕或圓角方形按鈕。矩形狀按鈕很久之前就應(yīng)用于數(shù)字世界的設(shè)計，用戶對此也非常熟悉了。

據(jù)研究顯示，圓角能促進信息處理，并吸引用戶聚焦到元素正中央。

圓角矩形按鈕

當(dāng)然，你還可以加入更多創(chuàng)意元素，使用如圓形，三角形甚至自定義形狀的其它形狀，但要注意，使用這些形狀可能會更加冒險。

FAB 示例

2. 尺寸和內(nèi)邊距

在幫助用戶識別按鈕元素時，按鈕的尺寸大小也非常重要。你需要考慮按鈕元素的尺寸大小，同時還要考慮可點擊元素間的內(nèi)邊距。

尺寸。當(dāng)你使用輕擊（tap）作為 app 或網(wǎng)站的主要輸入交互方式時，你可以參考麻省理工大學(xué)觸擊實驗室（MIT Touch Lab）的研究，從而為你的按鈕設(shè)計選擇合適的尺寸。

根據(jù) MIT 的研究發(fā)現(xiàn)，指墊的平均寬度在10-14毫米之間，指尖的平均寬度在8-10毫米之間。因此，10×10毫米是觸屏按鈕最小尺寸的一個好選擇。

圖片來源：uxmag

這個建議本意不是讓那些易按錯的按鈕更加完美，而是盡可能將按錯次數(shù)最小化到實用水平，同時，還要平衡其他重要特性（比如屏幕信息密度）。

圖片來源：ux.stackexchange.com

當(dāng)鼠標(biāo)和鍵盤作為主要的輸入交互方式時，對按鈕尺寸的要求則可以稍微降低，以便于適應(yīng)密集型的用戶界面。

內(nèi)邊距。按鈕間內(nèi)邊距是為更好地區(qū)分各交互控制按鈕而設(shè)計，同時給用戶界面足夠多的空間。

Google 的 Material Design 對話框中扁平化按鈕間的內(nèi)邊距

3. 標(biāo)簽

你應(yīng)該為按鈕選擇一個合適的標(biāo)簽。選擇標(biāo)簽的方法應(yīng)該基于最小驚訝原則（principle of least astonishment）：如果某必要按鈕有個高驚訝因素的標(biāo)簽，那就要考慮更換這個標(biāo)簽了。

經(jīng)驗法則——按鈕的標(biāo)簽要體現(xiàn)其功能。添加一條清晰信息來告知用戶在點擊/輕擊后會發(fā)生什么，或者通過行為動詞提示用戶某界面元素的功能。

下圖示例是在 Dropbox 網(wǎng)頁版上傳文件的一個對話框，該對話框中有一個帶有「棒極了！（Awesome!）」標(biāo)簽的單獨按鈕。這個標(biāo)簽對普通用戶來說可能有困惑性，因為它并沒有說明點擊該按鈕后有什么用。

圖片來源：uxmatters

4. 顏色

在調(diào)色板上選擇顏色時，要思考顏色可以怎樣幫助用戶導(dǎo)航和理解該行為的。

使用顏色和對比來幫助用戶查看和了解 app 的內(nèi)容，與正確的元素進行交互，并理解相關(guān)行為。

下圖示例中，我們使用了紅色按鈕來標(biāo)識一個潛在的毀滅性行為（該按鈕標(biāo)簽「UNINSTALL」意為「卸載」）。

注意「卸載（Uninstall）」動作按鈕是如果通過顏色和對比更吸人注意的。圖片來源：Material Design

使最為重要的按鈕（特別是行為號召按鈕）看似最重要的。例如，亞馬遜使用了對比性較強的黃色按鈕來吸引用戶采取正確的行為。

亞馬遜的CTA按鈕「加入購物車（Add to Cart）」使用了對比顏色

結(jié)束語

所有按鈕（比如經(jīng)典按鈕或者像虛擬按鈕或浮動操作按鈕等現(xiàn)代按鈕）的作用都是指導(dǎo)用戶實施你想讓他們?nèi)ゲ扇〉男袨椤?/strong>