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

提升按鈕設計體驗的三大設計原則

發(fā)布時間：2024-04-03 18:53:42 瀏覽量：138次

今天跟大家分享一下關(guān)于提升按鈕設計的體驗的三大設計原則：按鈕的可點性、按鈕的可交互性、按鈕的良好引導性，一起來看看~

按鈕屬性解剖

按鈕對于UI新手就是一個簡單的長方形矩形，設計時會忽略按鈕設計要注意的細節(jié)，甚至標注時候遺漏一些需要標注的參數(shù)，導致開發(fā)產(chǎn)生偏差，視覺還原度不好。

按鈕在表面看的屬性從遠到近是顏色、形狀、字體，但是真正的按鈕屬性并不止這么簡單的這三個屬性。

這里我以標注一個簡單按鈕為例，分析下按鈕應考慮的屬性。

由此可以推斷出按鈕的有六大屬性：顏色／形狀／字體／大?。队埃舭?。

無論是幾個互聯(lián)網(wǎng)巨頭的設計規(guī)范，以及最近新出的谷歌規(guī)范，能看到關(guān)于組件部分，第一個組件設計的就是按鈕。

在做標注時，我們經(jīng)常就會忽略一個最重要的使用規(guī)則，按鈕中的內(nèi)間距，還有按鈕外間距，這決定了按鈕跟其他元素的合理距離。

在原子理論里UI組件最基礎的元素從原子開始的。

按鈕就是最簡單的原子，通過按鈕的可繼承屬性（按鈕高度，按鈕圓角，按鈕文字字號等屬性）。為了排版布局的整齊和一致，其他原子（輸入框、單選多選框、搜索條等）也會繼承這些屬性，因此按鈕在設計語言的組件設計中占有舉足輕重的地位。

因此當我們在設計語言中定義按鈕時，一定要思考這六大屬性，它不單純影響自己的呈現(xiàn)，還影響了其他原子的屬性。

按鈕的設計原則

了解按鈕設計的這六大屬性，我們就能設計好按鈕了么？

當然沒這么簡單，我歸納了三大設計原則，遵循設計原則，才能保證按鈕真正實現(xiàn)它的商業(yè)價值和用戶價值。

1. 按鈕的可點性

UI界面中如果需要用戶理解設計越長可用性就越差。設計必須在考慮把界面做得酷炫前，讓用戶知道按鈕是“可點擊的”。

因此按鈕至少要考慮從形、色、字上創(chuàng)建識別為可點擊的按鈕。

多種形狀按鈕 圖片來源Dribble

形，按鈕遵循多數(shù)用戶習慣需要有個形狀，判別為可點擊區(qū)域。歸納上面的例子，按鈕一般有以下幾種常見形狀。

以上各種形狀都可以運用到按鈕上，當然其他不一樣的形狀。

變形按鈕 圖片來源Dribble

例如圓角矩形基礎上做適當?shù)淖兓?，按鈕屬性還是可識別的。

色，常見的App按鈕根據(jù)品牌主題色有著不同色彩。

漸變按鈕 圖片來源Dribble

我們能發(fā)現(xiàn)除了單色填充按鈕顏色之外，還有漸變色填充按鈕的做法，這種方式也是能突出按鈕和引導用戶去點擊。

字，作為按鈕的信息引導，必須存在文字或圖形符號引導用戶交互，否則就不是按鈕。

文案會提示用戶如果點擊他們獲得什么收益，文案必須迅速吸引用戶的注意力并引導他們正確行動。

無論是什么顏色什么形狀的按鈕，必須有關(guān)鍵文字描述或者圖標解釋，就無法構(gòu)成按鈕元素。

按鈕目的就是觸發(fā)點擊，缺少點擊語句引導，用戶根本理解不了這形狀是做什么。

2. 按鈕的可交互性

點擊按鈕，一般會進行下一步、確定、以及完成等等恰當?shù)姆答?，按鈕必須有反饋，不然用戶不知道互動成不成功，用戶總是期待得到反饋的。

在網(wǎng)上公開的各種設計語言中都能清晰，按鈕除了默認按鈕，還會有懸停狀態(tài)／點擊狀態(tài)／不可點狀態(tài)的多種交互形式。

我們設計按鈕時不能只設計一種狀態(tài)，在交付給研發(fā)前要把常見的幾種交互都設計好。

多種功能按鈕 圖片來源Dribble

分析現(xiàn)在常見的APP設計，目前按鈕的點擊后交互的反饋場景最常見的有以下幾種：

如果點擊按鈕后無任何反饋，這就不是按鈕應該是信息框，可交互是按鈕的設計原則之一。

3. 按鈕的良好引導性

按鈕的重要性體現(xiàn)在按鈕文字引導／按鈕大小／按鈕周圍留白以及按鈕所處的位置，按鈕數(shù)量的控制。

按鈕要設計合理，才能有良好的引導性，用戶才能正確明白按鈕的操作功能。

如果按鈕文字表達不清晰，用戶會誤解。

一個引人注目的引導性按鈕通常足夠大，可快速找到，但又不能太大，以免影響干擾內(nèi)容閱讀。

根據(jù)格塔式原理，親密性高低不同的組件，根據(jù)留白不同產(chǎn)生不同的關(guān)聯(lián)性。文案跟按鈕之間的間距適當縮小，能讓用戶明白他們之間關(guān)聯(lián)，讓按鈕區(qū)別與其他組件。

不論是網(wǎng)頁還是APP，按鈕一般處在信息正下方，或信息右下方便于用戶的右手操作原則。

（1）如果按鈕過多，不分主次，用戶就會疑惑不知道如何操作

注意避免同飽和不同顏色的按鈕出現(xiàn)，一個用填充顏色（重），一個描邊顏色跟隨主要按鈕顏色（輕）。

（2）如果按鈕場景有特殊情況，就需要設計合適場景的按鈕

按鈕的操作是不可逆的操作應該賦予更多的視覺重量，用戶可能并不明白危害性而下意識操作，或者誤點了操作。

按鈕在不同背景下呈現(xiàn)情況不同，因此要考慮淺色按鈕樣式。

按鈕用色也要經(jīng)過多場景的考驗，不是單純定一個主色解決所有場景。

同樣存在不同使用場景中，按鈕要設計多種尺寸以適應不同的場景需求，小、中、大、特大等等。

最后總結(jié)

設計趨勢隨時在變，按鈕的風格也時刻在變化，唯一不變的就是按鈕的六大屬性以及作者為大家總結(jié)的三大設計原則。

按鈕的設計是UI設計規(guī)范中最簡單的一環(huán)，但是同時也是最重要的一環(huán)。

希望各位大家在工作中學會鞏固自己的知識，以小見大，在追求不同的設計風格趨勢的同時，別忘了UI設計最基礎的基本功之一：保持風格的統(tǒng)一性，從一個簡單的按鈕設計開始。

作者：凌凌，公眾號：我們的設計日記，前阿里資深視覺設計師，關(guān)注設計成長規(guī)劃和toB／C的產(chǎn)品設計

本文由 @凌凌 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

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