国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

按鈕屬性解剖

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

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

這里我以標(biāo)注一個(gè)簡單按鈕為例，分析下按鈕應(yīng)考慮的屬性。

由此可以推斷出按鈕的有六大屬性：顏色／形狀／字體／大小／投影／留白。

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

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

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

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

因此當(dāng)我們?cè)谠O(shè)計(jì)語言中定義按鈕時(shí)，一定要思考這六大屬性，它不單純影響自己的呈現(xiàn)，還影響了其他原子的屬性。

按鈕的設(shè)計(jì)原則

了解按鈕設(shè)計(jì)的這六大屬性，我們就能設(shè)計(jì)好按鈕了么？

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

1. 按鈕的可點(diǎn)性

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

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

多種形狀按鈕 圖片來源Dribble

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

以上各種形狀都可以運(yùn)用到按鈕上，當(dāng)然其他不一樣的形狀。

變形按鈕 圖片來源Dribble

例如圓角矩形基礎(chǔ)上做適當(dāng)?shù)淖兓粹o屬性還是可識(shí)別的。

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

漸變按鈕 圖片來源Dribble

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

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

文案會(huì)提示用戶如果點(diǎn)擊他們獲得什么收益，文案必須迅速吸引用戶的注意力并引導(dǎo)他們正確行動(dòng)。

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

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

2. 按鈕的可交互性

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

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

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

多種功能按鈕 圖片來源Dribble

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

如果點(diǎn)擊按鈕后無任何反饋，這就不是按鈕應(yīng)該是信息框，可交互是按鈕的設(shè)計(jì)原則之一。

3. 按鈕的良好引導(dǎo)性

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

按鈕要設(shè)計(jì)合理，才能有良好的引導(dǎo)性，用戶才能正確明白按鈕的操作功能。

如果按鈕文字表達(dá)不清晰，用戶會(huì)誤解。

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

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

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

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

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

（2）如果按鈕場景有特殊情況，就需要設(shè)計(jì)合適場景的按鈕

按鈕的操作是不可逆的操作應(yīng)該賦予更多的視覺重量，用戶可能并不明白危害性而下意識(shí)操作，或者誤點(diǎn)了操作。

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

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

同樣存在不同使用場景中，按鈕要設(shè)計(jì)多種尺寸以適應(yīng)不同的場景需求，小、中、大、特大等等。

最后總結(jié)

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

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

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

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

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

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