激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI設(shè)計中的按鈕:風(fēng)格的演變和最佳實踐

發(fā)布時間：2024-03-11 09:17:40 瀏覽量：149次

按鈕是界面中最普通的交互設(shè)計元素。雖然按鈕看起來是一個非常簡單的UI元素，但它的設(shè)計在過去幾十年中發(fā)生了很大的變化。不過不管怎么變化，圍繞著按鈕設(shè)計的核心始終是識別度和清晰度。

在本文中，我們將概述按鈕設(shè)計的演變，并找出為設(shè)計有效按鈕應(yīng)遵循的方法。

風(fēng)格的演變

三維按鈕

從早期開始，操作系統(tǒng)按鈕就依賴于浮雕和陰影的外觀來區(qū)分它們與周圍元素。這種設(shè)計解決方案基于簡單的原理 - 使用邊框、漸變和陰影使元素突出，更易于識別為可點擊元素。

注意按鈕是如何凸起的

此Windows 95對話框利用重陰影和高光來創(chuàng)建3D效果，用于幫助用戶了解視覺層次結(jié)構(gòu)并知道哪些元素是可點擊的。

出現(xiàn)凸起的元素看起來像是可以按下的（用鼠標(biāo)點擊）

寫實按鈕

在數(shù)字設(shè)計中，寫實按鈕是指UI元素看起來像現(xiàn)實生活中的物體，無論是復(fù)制現(xiàn)實中的紋理，還是使按鈕看起來像現(xiàn)實生活中的按鈕。寫實設(shè)計旨在延續(xù)用戶對現(xiàn)實世界的一些認(rèn)知，來幫助用戶理解如何使用這個產(chǎn)品。以下示例中的計算器比喻是為了幫助用戶將有關(guān)物理計算器的使用知識到數(shù)字環(huán)境中的應(yīng)用。

圖片來源：theultralinx

扁平設(shè)計按鈕

近幾年在UI設(shè)計中發(fā)生的一個主要變化是從擬物元素轉(zhuǎn)向扁平元素，剝離了3D效果。與擬物設(shè)計不同，扁平風(fēng)格設(shè)計被視為探索直接傳達(dá)信息而不重視擬物外觀的一種方式。因此，它刪除了傳統(tǒng)上用于向用戶傳達(dá)可點擊性的重視覺提示。

常規(guī)和扁平按鈕

適用于Apple iOS的計算器應(yīng)用

當(dāng)一切都扁平化的時候，用戶如何知道哪些是按鈕？

用戶仍然需要符號來了解他們可以在頁面上單擊/點擊的位置：幫助他們理解如何使用界面的指示性元素。因此，顏色在扁平化設(shè)計中尤為重要，因為當(dāng)您使用平面按鈕時，這些顏色將成為幫助用戶識別它們的主要標(biāo)識符之一。

輕擬物設(shè)計和懸浮按鈕

輕擬物設(shè)計是原有設(shè)計的演變。這種風(fēng)格大多是扁平的，但利用微妙的陰影，高光和圖層在UI中創(chuàng)建一些深度。谷歌的Material Design語言是輕擬物設(shè)計的一個例子，具有良好的優(yōu)先級，它帶來了一種新型按鈕：懸浮按鈕。這些按鈕分層在界面的頂部，引起人們對主要操作的注意。它們充當(dāng)提示性按鈕，用于表示用戶在該特定屏幕上執(zhí)行的操作最多的單個操作。

Google地圖就是懸浮按鈕做得很好的一個很好的例子。用戶在地圖上執(zhí)行的主要操作是獲取方向，因此對于完成此操作的懸浮按鈕來說非常有意義。

Android中的Google地圖

在UI設(shè)計中使用懸浮按鈕的另一個好例子是Evernote。盡管具有大致扁平的UI設(shè)計，但應(yīng)用程序在導(dǎo)航欄和懸浮按鈕上提供了一些微妙的陰影。

適用于Android的Evernote應(yīng)用

幽靈按鈕

在2014年，UI設(shè)計的主要設(shè)計趨勢之一是幽靈按鈕。幽靈按鈕是具備基本的按鈕形狀的透明按鈕。幽靈按鈕通常以非常細(xì)的線條為邊界，而內(nèi)部部分由純文本組成。

正常狀態(tài)（左）和聚焦?fàn)顟B(tài)（右）

幽靈按鈕的起源來自扁平設(shè)計革命，當(dāng)Apple發(fā)布iOS 7時，幽靈按鈕變得時髦.iOS UI上的許多按鈕都是我們稱之為鬼按鈕的按鈕。簡潔明了的矩形形狀與框架內(nèi)的整潔字體相結(jié)合，在扁平化UI中完美的呈現(xiàn)了出來。

‘Name’, ‘Release Data’ 和‘Featured’都是類似的幽靈按鈕。'Get'是一個幽靈按鈕。

它們通常顯示為CTA按鈕，并提供干凈的外觀。網(wǎng)站首頁是此類按鈕一個很好的使用示例。

Specular有一個平面按鈕作為主要的“立即購買”動作，一個鬼按鈕“Take Tour”作為輔助按鈕。

按鈕的基本最佳實踐

在開始設(shè)計按鈕之前，現(xiàn)在應(yīng)該考慮設(shè)計如何傳達(dá)可供性。用戶如何將元素理解為按鈕，你應(yīng)該考慮下面這幾條：

  • 使按鈕看起來像按鈕
  • 讓用戶輕松與按鈕交互
  • 用按鈕的作用標(biāo)記按鈕
  • 使用顏色對比來引導(dǎo)用戶采取行動

并確保在整個界面控件中保持統(tǒng)一，以便用戶能夠識別UI界面里各個按鈕。

形狀

一個安全的選擇是根據(jù)網(wǎng)站或應(yīng)用程序的風(fēng)格制作帶圓角的正方形或方形按鈕。很久以前，矩形按鈕已被引入互聯(lián)網(wǎng)，用戶對它們很熟悉。

一些研究表明：圓角可以增強(qiáng)信息處理能力，并將我們的眼睛吸引到元素的中心。

圓角矩形按鈕

你可以更有創(chuàng)意，并使用其他形狀，如圓形，三角形甚至自定義形狀，但請記住，其他形狀可能會有風(fēng)險。

圓角按鈕更容易被識別。

大小和間距

按鈕的大小在幫助用戶識別方面也起著關(guān)鍵作用。您應(yīng)該考慮按鈕元素的大小以及可點擊元素之間的間距：

尺寸。 當(dāng)點擊被用作您的應(yīng)用或網(wǎng)站的主要輸入法時，您可以依靠MIT Touch Lab學(xué)習(xí)，以便為您的按鈕選擇合適的大小。麻省理工學(xué)院的研究發(fā)現(xiàn)，手指墊的平均值在10-14mm之間，指尖的平均值為8-10mm，使得10mm x 10mm的最小觸摸目標(biāo)尺寸很好。

圖片來源： uxmag

這個建議不是針對完美容易出錯的觸摸目標(biāo)，而是在平衡其他重要特征(如屏幕信息密度)的同時，將錯誤的數(shù)量降到實際水平:

圖片來源：ux.stackexchange.com

當(dāng)鼠標(biāo)和鍵盤 是主要輸入方法時，可以略微減少按鈕距離以適應(yīng)密集的UI。

間距。按鈕之間的間距有助于分離控件并為用戶界面提供足夠的呼吸空間。

在“材質(zhì)設(shè)計”對話框中的平面按鈕之間的間距

按鈕文本描述內(nèi)容

您應(yīng)該為按鈕選擇合適的文本內(nèi)容。選擇應(yīng)基于用戶一眼就可以明白的原則：如果按鈕顯示的文本內(nèi)容無法讓用戶明白，則失去了按鈕本身的交互意義。

經(jīng)驗法則 - 添加明確的文本內(nèi)容，說明點擊/點擊后會發(fā)生什么，或者使用動作動詞指示元素的作用來告知用戶。

在下面的示例中，您可以看到當(dāng)用戶嘗試使用Web應(yīng)用程序?qū)⑽募陷d到Dropbox時出現(xiàn)的對話框。這條消息提供了一個標(biāo)簽' Awesome！'的按鈕。對于普通用戶來說，這個標(biāo)簽可能會讓人感到困惑，因為一旦你點擊它就不清楚這個按鈕會做什么。

圖片來源：uxmatters

顏色

選擇調(diào)色板時，請記住顏色是如何幫助用戶引導(dǎo)和理解按鈕來進(jìn)行操作：

  • 使用顏色和對比度可幫助用戶查看和解釋應(yīng)用的內(nèi)容，與正確的元素進(jìn)行交互并了解操作。在下面的示例中，我們使用紅色，表示此按鈕是破壞性操作的按鈕。

請注意“卸載”操作的顏色和對比度更強(qiáng)。圖片來源：材料設(shè)計

  • 重要的按鈕信息讓它變得更突出（尤其是當(dāng)你使用它們進(jìn)行行動時）。例如，亞馬遜使用一個對比黃色的按鈕來吸引用戶注意到這個的操作。

亞馬遜使用對比色的CTA按鈕'添加到購物車'

結(jié)論

每個按鈕（經(jīng)典或現(xiàn)代按鈕，如幽靈按鈕或懸浮按鈕）都是為了引導(dǎo)用戶執(zhí)行您希望他們執(zhí)行的操作存在的。按鈕在對話中起著至關(guān)重要的作用——順暢的互動讓對話繼續(xù)進(jìn)行，而小故障(比如找不到正確的按鈕)會造成中斷，最壞的情況下，還會導(dǎo)致故障。

原著鏈接：

https://uxplanet.org/buttons-in-ui-design-the-evolution-of-style-and-best-practices-56536dc5386e

作者：Nick Babich

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定