按鈕這個(gè)組件，在我們UI設(shè)計(jì)中出現(xiàn)頻率最高，交互使用最重要，確在用戶體驗(yàn)上最容易被忽略的一個(gè)組件元素因此我們要對(duì)按鈕做一個(gè)重新認(rèn)識(shí)在沒有互聯(lián)網(wǎng)的時(shí)代，按鈕就已經(jīng)被人們廣泛使用了，例如：電燈的開關(guān)、電視機(jī)的遙控器、最早的固定電話等等，在物理形態(tài)下的按鈕也將是互聯(lián)網(wǎng)時(shí)代出現(xiàn)后UI按鈕組件的前身，目前物理按鈕仍在被廣泛沿用，作為UI設(shè)計(jì)中的按鈕組件，不管如何演變，萬變不離其宗，依然需要參考現(xiàn)實(shí)環(huán)境物理按鈕，按鈕的交互就是通過觸摸能夠完成用戶的行為需求，所以按鈕的設(shè)計(jì)理念一定是直觀性和易用性優(yōu)先，從而指引用戶完成輕松無障礙的完成任務(wù)。
我們?cè)赨I設(shè)計(jì)環(huán)節(jié)如何將按鈕完美呈現(xiàn)，是我們將要深入研究一個(gè)課題，按鈕的交互體驗(yàn)、視覺體驗(yàn)會(huì)影響到產(chǎn)品的轉(zhuǎn)化、引流、行動(dòng)觸發(fā)等。
按鈕是一個(gè)帶有明確指示性的交互提示組件，它指引用戶準(zhǔn)確的完成下一步的操作，UI設(shè)計(jì)中一項(xiàng)任務(wù)的關(guān)鍵節(jié)點(diǎn)與轉(zhuǎn)折點(diǎn)的操作步驟，都是通過按鈕來完成的。
我們平時(shí)見到UI設(shè)計(jì)中的按鈕，第一眼看上去很簡(jiǎn)單，大多是由一個(gè)底色塊或一個(gè)帶描邊框加上文字注釋組合構(gòu)成的，其實(shí)真正的按鈕是由其大小尺寸、擺放位置、顏色、文案、圓角的大小…等細(xì)節(jié)元素組成，對(duì)細(xì)節(jié)的運(yùn)用和把控，直接關(guān)系到用戶的使用體驗(yàn)。
我們?cè)赨I設(shè)計(jì)中，設(shè)計(jì)按鈕時(shí)，會(huì)深度探究按鈕在當(dāng)前環(huán)境下的意義，出現(xiàn)在哪里？是否需要增加按鈕？為何增加按鈕？
按鈕功能：
展開、收起、下拉、加減等功能，重點(diǎn)強(qiáng)調(diào)的是功能，在操作之后會(huì)發(fā)生一些交互形態(tài)的化這種按鈕主要起到通過功能形態(tài)的變化來告知用戶操作的信息與結(jié)果。
引導(dǎo)用戶接下來的操作：
我們完成一項(xiàng)內(nèi)容編輯或信息的確認(rèn)后，就會(huì)對(duì)當(dāng)前環(huán)節(jié)的頁(yè)面失焦（視覺焦點(diǎn)），而引導(dǎo)型按鈕（如：下一步保存、支付、確定）就會(huì)重新聚焦視覺重點(diǎn)，通過按鈕功能的文案描述告知用戶下一步該怎么辦。
行為習(xí)慣養(yǎng)成：
培養(yǎng)用戶的點(diǎn)擊習(xí)慣，當(dāng)我們?cè)谝粋€(gè)操作按鈕之后會(huì)得到相對(duì)應(yīng)的信息反饋，并且可以持續(xù)的給用戶帶來價(jià)值那么我們?cè)O(shè)計(jì)這個(gè)按鈕時(shí)可以重點(diǎn)突出這個(gè)按鈕的視覺表現(xiàn)力，在同維度不同的區(qū)域保持這個(gè)按鈕視覺上的統(tǒng)一持續(xù)培養(yǎng)用戶的點(diǎn)擊習(xí)慣，以后在遇到類似的按鈕時(shí)思維的慣性就會(huì)引導(dǎo)這個(gè)行為完成點(diǎn)擊操作。
按鈕需要經(jīng)過很多細(xì)節(jié)的設(shè)計(jì)，才能發(fā)揮出按鈕的最大作用例如，內(nèi)容的長(zhǎng)短/邊距；容器的大小、圓角；填充色的主/次之分…等，讓我們來了解按鈕到底是由哪些屬性、元素構(gòu)成。
圓角：通過視覺上給用戶的感受，圓角的大小決定按鈕的氣質(zhì)，小圓角是按鈕經(jīng)常使用的如：4PX圓角，也有比較嚴(yán)謹(jǐn)?shù)?、力量型的全直角也有柔和到極致的全圓角等等。
圖標(biāo)：可視信息抽象化表達(dá)，通過圖形直觀表達(dá)文字的含義，例如：加載中編輯等。
容器：是按鈕上所有信息的載體，包含顏色、紋理、文案、圖標(biāo)等元素。
邊框：確定按鈕的邊界，常用于次級(jí)按鈕描邊。
文案：用文字表達(dá)按鈕的含義，文案要精煉簡(jiǎn)要。
背景：表達(dá)按鈕的狀態(tài)，形象氣質(zhì)，品牌氣質(zhì)。
投影：投影主要運(yùn)用于凸顯層級(jí)關(guān)系，讓按鈕在原有維度提升，達(dá)到視覺聚焦的作用，往往配合紋理與漸變色可以打造更好的視覺體驗(yàn)。
按照功能屬性分類，可以將按鈕分為流程控制和功能選項(xiàng)兩大類別
流程控制：常見的傳統(tǒng)按鈕，如支付、確定、下一步、確定、保存等，容器承載著圖標(biāo)、圖標(biāo)加文案、文案等形式。
功能選項(xiàng)：開關(guān)、加減控件、標(biāo)簽欄、分類、狀態(tài)切換等，操作之后只針對(duì)當(dāng)前頁(yè)面做出屬性上的的調(diào)整，不涉及流程的變化。
視覺呈現(xiàn)上有所區(qū)分，在不同的頁(yè)面可能存在同等級(jí)的權(quán)重
常規(guī)型按鈕：常見的按鈕，在同一個(gè)頁(yè)面出現(xiàn)多個(gè)常規(guī)型按鈕時(shí)，有主次之分。
虛線型按鈕：常用于添加、上傳等操作。
文本按鈕：僅用文字作為觸發(fā)點(diǎn)，部分會(huì)用主色、右側(cè)箭頭、下劃線等方式。
高權(quán)重：帶有填充色的主功能操作按鈕，當(dāng)同一個(gè)頁(yè)面存在多個(gè)按鈕，只允許存在一個(gè)高權(quán)重（主操作）按鈕。
中權(quán)重：帶邊框輪廓的按鈕，同一頁(yè)面可存在多個(gè)中權(quán)重的按鈕。
低權(quán)重：文本按鈕，圖文按鈕、圖標(biāo)按鈕，同一頁(yè)面可存在多個(gè)低權(quán)重按鈕。
是設(shè)計(jì)過程的重要組成部分，在不干擾界面視覺的前提下，對(duì)每個(gè)按鈕的樣式、狀態(tài)有清晰的定義，與其他元素布局區(qū)分開來。
待激活狀態(tài)：需要完成規(guī)定業(yè)務(wù)流程的操作、或滿足一個(gè)以上必要的前置條件后才允許交互。
正常狀態(tài)：按鈕的正常狀態(tài)，可正常進(jìn)行交互操作。
點(diǎn)擊狀態(tài)：按壓效果，表示按鈕正在進(jìn)行交互還未結(jié)束，交互完成后，即會(huì)引發(fā)此按鈕的真實(shí)事件。
加載狀態(tài)：產(chǎn)生交互后沒有立即執(zhí)行、或系統(tǒng)需要一定的時(shí)間才能執(zhí)行完成。
禁用狀態(tài)：暫不允許操作、或需要用戶離開此頁(yè)面去完成一定的前置條件才能操作此按鈕 。
PC端設(shè)計(jì)按鈕時(shí)，注意到鼠標(biāo)的點(diǎn)擊精確度高一些，通常我們會(huì)將按鈕設(shè)計(jì)的小一些同時(shí)也能讓整個(gè)界面看起來更加細(xì)膩，只要不影響操作，36px~48px 范圍內(nèi)的按鈕是比較常見的。
移動(dòng)端的按鈕設(shè)計(jì)，我們要更多的考慮到物理尺寸，即手指（指尖）在操作的時(shí)候需要占用的實(shí)際范圍。
標(biāo)準(zhǔn)參考：設(shè)計(jì)規(guī)范中，將按鈕的最小點(diǎn)擊區(qū)域規(guī)定為 42pt/84PX，一旦小于這個(gè)數(shù)值，操作時(shí)就會(huì)出現(xiàn)精準(zhǔn)度較低的情況，導(dǎo)致操作失誤或無效。
文字按鈕：文字按鈕，自身可視化面積較小，所以我們要在操作熱區(qū)上做規(guī)劃，熱區(qū)大于文字按鈕可視化范圍，方便用戶操控。
「費(fèi)茨定律」告訴我們「目標(biāo)尺寸越大，移動(dòng)至目標(biāo)所花費(fèi)的時(shí)間就越短」，所以在滿足手指觸控范圍的同時(shí)，還要根據(jù)所對(duì)應(yīng)功能的權(quán)重占比來適當(dāng)調(diào)節(jié)按鈕的大小，當(dāng)某個(gè)元素的尺寸越大就越吸引眼球，就更容易被視覺捕捉到，也更容易被「點(diǎn)擊」，精準(zhǔn)度被降低的同時(shí)，也減少了用戶的操作成本。
我們以8像素柵格系統(tǒng)、iOS的2倍圖為例，較為常見的有：小型-64px、中型-80~88px、大型-98px、超大型-隨機(jī)這四種按鈕。
設(shè)計(jì)風(fēng)格常見，例如扁平化、微質(zhì)感、擬物化、新擬態(tài)（概念）...
扁平化按鈕：填充色平鋪風(fēng)格，沒有多余的視覺干擾，這種類型的按鈕一般在應(yīng)用中用的最多，例如：工具型應(yīng)用、B端應(yīng)用等。
微質(zhì)感按鈕：填充漸變色基礎(chǔ)上加入淺淺的投影效果，保持了信息內(nèi)容的簡(jiǎn)潔、同時(shí)讓用戶產(chǎn)生更強(qiáng)的點(diǎn)擊欲望更加耐看。
擬物化按鈕：設(shè)計(jì)的很立體，3D效果、屬性樣式豐富多彩，參考現(xiàn)實(shí)世界中的事務(wù)或攝取應(yīng)用場(chǎng)景中的某些元素，使其更加逼真，有較強(qiáng)的代入感。例如：游戲類應(yīng)用、H5專題、運(yùn)營(yíng)banner等。
新擬態(tài)按鈕：風(fēng)靡一時(shí)的風(fēng)格，目前只有少數(shù)工具類應(yīng)用使用了新擬態(tài)，例如：計(jì)算器、AI設(shè)備控制、有道云筆記等。
頁(yè)面出現(xiàn)多個(gè)按鈕時(shí)，只允許存在一個(gè)主操作按鈕，其他不做特別設(shè)定如果次要按鈕/操作較多，也不益過多的出現(xiàn)次級(jí)按鈕，可根據(jù)權(quán)重降級(jí)處理，以小圖標(biāo)或文字按鈕的方式呈現(xiàn)。
主/次操作按鈕要統(tǒng)一樣式，用戶需操作時(shí)，盡可能的減少其思考及選擇時(shí)間按鈕應(yīng)該迎合用戶固有認(rèn)知及慣性思維，節(jié)省時(shí)間成本，提高操作效率。
常見的按鈕還是以「小圓角」和「全圓角」居多，也有部分按鈕「直角」需要根據(jù)產(chǎn)品的行業(yè)屬性與氣質(zhì)來選擇最合適的圓角類型，盡量避免大圓角（卡片圓角除外），按鈕外形要規(guī)整統(tǒng)一不可以出現(xiàn)不方不圓的奇怪樣式。
小圓角：小圓角按鈕的圓角值通?？刂圃诟叨鹊?/5、1/6，根據(jù)按鈕的尺寸大小，直接將圓角值固定在 4px（目前使用）能減少設(shè)計(jì)組件的數(shù)量也利于開發(fā)做組件封裝后續(xù)調(diào)用。
全圓角：全圓角按鈕的圓角值固定為高度的1/2，或者在軟件的圓角設(shè)置中直接將數(shù)值拉到極限。
直角：不設(shè)圓角值，在PC端較為常見，也有部分較為嚴(yán)謹(jǐn)?shù)囊苿?dòng)端應(yīng)用使用直角按鈕。
按鈕中的文字要便于用戶理解，不能過于陌生或繞口，用戶碰到不易理解的信息會(huì)產(chǎn)生困惑甚至誤導(dǎo)用戶導(dǎo)致操作失誤從而造成損失，文字還需要言簡(jiǎn)意賅，不能過多或折行且能合理的引導(dǎo)用戶完成操作。
如圖：
文案歧義就很明顯，想要挽留用戶，刻意將主次按鈕樣式對(duì)換，希望用戶操作不成功，那么用戶在需要取消訂單時(shí)就疑惑了，到底是點(diǎn)擊「確定」還是主操作按鈕「取消」才能取消成功呢？或許稍加思考，用戶也能反應(yīng)過來但無疑增加了選擇難度、思考時(shí)間及操作成本。
按鈕中的文字太大或太小都會(huì)影響用戶對(duì)信息接收的效率，比例需要適中文字太大會(huì)感覺很擁擠，沒有呼吸感，要給文字四周留下足夠的空間，同時(shí)文字太小會(huì)顯得小氣，看起來也會(huì)比較吃力，不利于信息接收。
按設(shè)計(jì)好按鈕組件之后，頁(yè)面中的其他組件或元素要與按鈕有很明顯的區(qū)別避免讓用戶產(chǎn)生不必要的誤解。
在彈窗中，主按鈕是在左？還是在右？這是一個(gè)爭(zhēng)論不休的問題，在移動(dòng)端的彈窗設(shè)計(jì)中，主按鈕靠右就行了，不一定絕對(duì)正確，但絕對(duì)不是錯(cuò)的，根據(jù)調(diào)查數(shù)據(jù)顯示，單手使用右手操作手機(jī)的用戶比左手操作手機(jī)的用戶量高且用戶也有一定的意識(shí)，左側(cè)為上一步、右側(cè)為下一步，頂部左側(cè)為返回右側(cè)為保存或確定。
可操控性是按鈕設(shè)計(jì)最重要目標(biāo)之一，不僅要樣式統(tǒng)一，還應(yīng)符合用戶的認(rèn)知讓用戶能快速知曉這個(gè)元素能否點(diǎn)擊？如果將按鈕樣式設(shè)計(jì)的與用戶認(rèn)知有較大的偏差，不易于用戶理解。
按鈕設(shè)計(jì)中，大部分都需要用戶完成一定任務(wù)之后才能正常操作下一步按鈕在完成之前，需少用禁用按鈕，在前面有講到「待激活狀態(tài)」，即在按鈕中填充淺淺的主體色等待用戶完成任務(wù)激活。
通常系統(tǒng)默認(rèn)不允許操作或存在時(shí)間限制會(huì)用到「填充為灰色的禁用按鈕」即便如此，也要盡量讓系統(tǒng)將其隱藏萬不得已的情況下需要在按鈕附近說明情況，以免使用不當(dāng)引起用戶的負(fù)面情緒。
對(duì)于設(shè)計(jì)師來說，按鈕作為設(shè)計(jì)組件之一，有很多細(xì)節(jié)容易被忽略，我們需要對(duì)每一個(gè)細(xì)小的元素進(jìn)行深入思考無論任何大小組件，都需要做到精益求精，才能給用戶帶來更好的使用體驗(yàn)，那我們?cè)撊绾螌?shí)現(xiàn)按鈕的正確使用方法？我們總結(jié)了20條把按鈕設(shè)計(jì)到最好的建議，我們一起來看。
按鈕在產(chǎn)品界面中是非常重要的元件之一，按鈕作為用戶引流和行動(dòng)觸發(fā)來說都是至關(guān)重要的，如何把按鈕設(shè)計(jì)做到最好，是設(shè)計(jì)師需要不斷探索的問題，把控好每一個(gè)細(xì)節(jié)才能讓每一個(gè)元件更精致，我們梳理總結(jié)了 20 條在設(shè)計(jì)按鈕時(shí)需要避免的問題，把按鈕設(shè)計(jì)做到最好。
在整個(gè)產(chǎn)品設(shè)計(jì)中我們要根據(jù)信息傳遞的優(yōu)先級(jí)對(duì)按鈕設(shè)計(jì)進(jìn)行主次區(qū)分，設(shè)計(jì)表達(dá)要有強(qiáng)弱差異按鈕設(shè)計(jì)可以通過大小、填充、描邊、色相、飽和度等的不同來進(jìn)行強(qiáng)弱差異，不同強(qiáng)弱的差異表現(xiàn)出按鈕的等級(jí)：行動(dòng)觸發(fā)主要、次要、輔助、禁用等。
對(duì)于按鈕邊框來說，我們通常采用全圓角和小圓角居多，這樣顯得穩(wěn)重大氣。而大圓角按鈕并非不可用，只是相對(duì)較少，會(huì)顯得按鈕不方不圓的，設(shè)計(jì)表現(xiàn)顯得不夠成熟，全圓角的圓角值等于按鈕高度值的一半，而小圓角的圓角值我們通?？刂圃?1/4H（高度值的四分之一）以內(nèi)。
給一個(gè)有彩色系按鈕設(shè)置投影時(shí)，選擇無彩色系（比如黑色）也能達(dá)到效果，只是為了得到更好的視覺效果，提高用戶感官體驗(yàn)。我們也可以嘗試基于按鈕本身色相來確定投影顏色，這樣得到的效果會(huì)顯得更加干凈清爽。
雖然投影的運(yùn)用可以使按鈕更有層次感，但是也需要根據(jù)具體情況慎用，比如對(duì)于一些淺色按鈕來說也許投影反而會(huì)降低按鈕的識(shí)別度，使得按鈕配色環(huán)境顯得不夠干凈清爽。
按鈕文字和邊框的設(shè)計(jì)要預(yù)留一定的留白，不要做“舍不得”的設(shè)計(jì)，使得按鈕給人感覺很擁擠，看看文字大小和負(fù)空間之間是否存在某種比例關(guān)系，找到這個(gè)比例關(guān)系運(yùn)用到按鈕設(shè)計(jì)中，可以給按鈕賦予生命具有呼吸感。
按鈕的存在是為了引導(dǎo)用戶進(jìn)行引導(dǎo)式操作，而不是讓用戶對(duì)其產(chǎn)生困惑，按鈕設(shè)計(jì)別讓用戶思考這是啥，是否可以點(diǎn)擊，需要簡(jiǎn)潔明了的對(duì)此操作進(jìn)行指引，用戶已經(jīng)養(yǎng)成對(duì)按鈕外觀和功能的行為習(xí)慣，如果你設(shè)計(jì)的按鈕樣式與“標(biāo)準(zhǔn)”差異太大，用戶就會(huì)產(chǎn)生疑惑，影響使用體驗(yàn)。
當(dāng)設(shè)計(jì)元素規(guī)范統(tǒng)一時(shí)，用戶操作過程中的理解成本最低，一致性也因此成為最有力的可用性原則之一，我們?cè)谠O(shè)計(jì)按鈕的時(shí)候要注意樣式表達(dá)的一致性，比如：按鈕形狀、色彩定義、風(fēng)格特征等，這樣會(huì)使得我們的設(shè)計(jì)可用性更強(qiáng)。
直接字符輸入形成按鈕內(nèi)部所需箭頭，這樣的表達(dá)方式自然顯得粗糙些，箭頭要當(dāng)成圖標(biāo)來進(jìn)行設(shè)計(jì)，控制好箭頭的粗細(xì)和文字筆畫的粗細(xì)值接近，這樣顯得更有細(xì)節(jié)和態(tài)度。
通過信息對(duì)比才能形成主次之分，按鈕設(shè)計(jì)需要在風(fēng)格上進(jìn)行區(qū)分，達(dá)到層次結(jié)構(gòu)的視覺提示，主要的按鈕需要和次要的、輔助的形成差異，最大化突出主按鈕的視覺效果，更好的引導(dǎo)用戶根據(jù)設(shè)定的軌跡進(jìn)行操作。
在整個(gè)項(xiàng)目設(shè)計(jì)規(guī)范中，我們需要避免讓用戶把非按鈕狀態(tài)的內(nèi)容進(jìn)行誤判，在確定好按鈕樣式特征之后，不要在其它場(chǎng)景運(yùn)用其樣式特征或者類似的風(fēng)格特征，這樣會(huì)讓用戶產(chǎn)生錯(cuò)誤的認(rèn)知，因而進(jìn)行無用的操作。
在進(jìn)行按鈕文本思考的時(shí)候，盡量減少字符和單詞的數(shù)量，內(nèi)容表達(dá)言簡(jiǎn)意賅，只要能夠準(zhǔn)確傳達(dá)信息識(shí)別度即可，有時(shí)候也不一定需要文本，圖標(biāo)可以傳遞的信息可以考慮文本的減少也許可以讓界面的呼吸感更強(qiáng)。
單行文字的可讀性更高，如果出現(xiàn)換行就會(huì)降低可讀性，我們?cè)谠O(shè)計(jì)按鈕的時(shí)候，確保文本內(nèi)容在一行之內(nèi)顯示如果設(shè)計(jì)空間不足要考慮文本內(nèi)容的精簡(jiǎn)。
底部按鈕的運(yùn)用并非固定不變，不同機(jī)型或者特殊場(chǎng)景的考慮需要靈活轉(zhuǎn)變，比如 iPhone X 等類型的機(jī)型，由于底部需要預(yù)留主頁(yè)控制器的位置，所以在設(shè)計(jì)按鈕的時(shí)候需要考慮上中下的過渡銜接，這樣才能帶給用戶更好的感官體驗(yàn)。
按鈕需要方便用戶進(jìn)行點(diǎn)擊操作，如果用戶點(diǎn)擊失敗或者誤點(diǎn)到周邊元素，就會(huì)帶給用戶不友好的體驗(yàn)。若是帶有文本的按鈕，只要文字大小不要小于極限值，通常實(shí)現(xiàn)出來的按鈕交互熱區(qū)都會(huì)滿足點(diǎn)擊需求，如果是純 icon 的按鈕，除了按鈕大小需要控制合適以外，也要確保交互熱區(qū)能夠滿足點(diǎn)擊區(qū)域要求。
在同屬板塊內(nèi)的按鈕設(shè)計(jì)，我們可以通過按鈕的強(qiáng)弱來體現(xiàn)層級(jí)關(guān)系，不要讓按鈕大小不一致這樣視覺平衡會(huì)受到影響。
稍微注意細(xì)節(jié)的設(shè)計(jì)師也不會(huì)讓文本的長(zhǎng)度超過按鈕寬度，這是一個(gè)非常明顯的錯(cuò)誤。但是按鈕文本變得很長(zhǎng)卻是遇見過的，幾個(gè)字即可表達(dá)的意思卻使用了過多修飾詞。在進(jìn)行按鈕文本思考的時(shí)候，要根據(jù)最佳的視覺效果設(shè)定一個(gè)最大值，不要任其無限制發(fā)揮，這樣會(huì)使得最終的視覺效果大打折扣，甚至影響用戶感官體驗(yàn)。
按鈕設(shè)計(jì)需要考慮在不同環(huán)境下的適應(yīng)度，確保用戶可以一目了然的發(fā)現(xiàn)它，現(xiàn)在很多產(chǎn)品都適配了深色主題模式，按鈕的配色不能只考慮白色或者淺色背景下的運(yùn)用，需要考慮大多數(shù)背景下的適配。在進(jìn)行色彩選擇的時(shí)候始終保持按鈕與背景的高對(duì)比度和可讀性。
關(guān)于按鈕文本的設(shè)置需要結(jié)合信息傳遞的識(shí)別性和準(zhǔn)確性，雖然純圖標(biāo)顯得設(shè)計(jì)簡(jiǎn)潔大方，但是需要考慮圖形是否可以準(zhǔn)確的表達(dá)其含義，不會(huì)讓用戶出現(xiàn)誤解或者錯(cuò)誤的認(rèn)知。所以，按鈕去文本需要根據(jù)文案代表的含義來判斷，如果不需要輔助解釋也能判斷出按鈕的意思，那么更為簡(jiǎn)潔的設(shè)計(jì)表達(dá)效果更佳。
色彩在設(shè)計(jì)中是最直觀的體現(xiàn)，不同的顏色會(huì)傳遞不同的性格，帶給用戶認(rèn)知差異。而按鈕的顏色選擇也并非隨性發(fā)揮，需要結(jié)合品牌色和輔助色作出判斷。
通常比較統(tǒng)一的標(biāo)準(zhǔn)是采用品牌色作為大部分按鈕的顏色，遇到一些需要差異化的按鈕會(huì)選擇輔助色來表達(dá)，紅色或者橙色多為行動(dòng)刺激作用，不適合在非品牌色的時(shí)候?yàn)E用。淺灰色或者低飽和度的色系會(huì)帶有不可用、禁用失效等屬性，需要酌情選擇。
引導(dǎo)用戶作出選擇的按鈕應(yīng)該放在左邊還是右邊，根據(jù)操作系統(tǒng)的不同也引起了設(shè)計(jì)師們的爭(zhēng)議。比如 Windows 系統(tǒng)習(xí)慣將確認(rèn)按鈕放在左邊，而蘋果系統(tǒng)卻選擇了放在右邊，用戶運(yùn)用系統(tǒng)的習(xí)慣會(huì)影響其行為的適應(yīng)度。不過要是在移動(dòng)端個(gè)人傾向于將引導(dǎo)用戶作出選擇的按鈕放在右邊，更有利于用戶點(diǎn)擊。
有時(shí)候?yàn)榱朔乐褂脩粽`操作，我們會(huì)將確認(rèn)操作的按鈕放在左邊，通過助力設(shè)計(jì)讓用戶再次確認(rèn)。所以，一方面我們要結(jié)合操作系統(tǒng)的習(xí)慣，另一方面也要結(jié)合用戶習(xí)慣，將按鈕放在最合適的位置，便于用戶操作。
作者：CC小酷
鏈接：https://www.zcool.com.cn/article/ZMTUxNTI4MA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
蘭亭妙微(363858.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
在我們使用的產(chǎn)品中，多多少少都會(huì)有一些微交互的穿插，但由于微交互性能的不搶眼也不明顯的條件下，所以往往會(huì)被很多設(shè)計(jì)和開發(fā)人員所忽略。
但在一個(gè)優(yōu)秀的產(chǎn)品中，微交互卻是必不可少的重要關(guān)口，它直接承載著用戶在使用產(chǎn)品時(shí)對(duì)產(chǎn)品細(xì)節(jié)的細(xì)微體驗(yàn)。雖然在互聯(lián)網(wǎng)產(chǎn)品早期，微交互曾被人稱之為是“很炫酷的特性象征”，但時(shí)隔今日，在這百花齊放的產(chǎn)品大環(huán)境中，其實(shí)微交互已經(jīng)慢慢從膚淺的炫酷轉(zhuǎn)型為附有內(nèi)涵的用戶體驗(yàn)關(guān)鍵要素了。
作為產(chǎn)品細(xì)節(jié)體驗(yàn)的重要承載，微交互的價(jià)值與地位逐漸提升，在用戶使用產(chǎn)品過程中，它不僅僅能促進(jìn)產(chǎn)品與用戶的互動(dòng)性，而且還能激發(fā)用戶對(duì)產(chǎn)品的積極感覺，并且最終影響用戶的整體行為。
微交互的基本概念就是指：關(guān)注一項(xiàng)主要任務(wù)、一個(gè)目的得事件過程。通常情況下，微交互需要關(guān)注得是這個(gè)事件的整體交互過程，并且它存在的目的也是為了讓用戶在使用產(chǎn)品時(shí)能感覺到順暢性、一致性，并產(chǎn)生心理的愉悅感，從而讓用戶喜歡產(chǎn)品，愛上產(chǎn)品，從而留住用戶。
如果籠統(tǒng)概括的話，可以說微交互幾乎會(huì)遍布任何設(shè)備、任何應(yīng)用程序中。并且他們存在的價(jià)值就是讓用戶高興。就單純從產(chǎn)品說起，如果說在產(chǎn)品設(shè)計(jì)中，在大多數(shù)用戶與產(chǎn)品接觸時(shí)都能發(fā)現(xiàn)微交互的存在與應(yīng)用。
1、你在Web看一段話時(shí)結(jié)尾展示是“…”時(shí)，那么通過你的心智程序，你就會(huì)下意識(shí)的將光標(biāo)停留在這段話上，在這樣的情況下，微交互就會(huì)出現(xiàn)了，則在這段話的周圍就會(huì)出現(xiàn)這句話完整的展示從而被你瀏覽。
2、還有一種常見的就是在你輸入錯(cuò)誤的信息時(shí)系統(tǒng)會(huì)自動(dòng)識(shí)別，并在末尾彈出消息提示，提示你需要從新輸入，更有優(yōu)秀的系統(tǒng)會(huì)從你開始輸入時(shí)就跟進(jìn)你的輸入狀態(tài)，時(shí)刻提醒你輸入的結(jié)果是否正確。
其實(shí)這些小的視覺暗示和微妙的指示就是所謂的為微交互，也有人稱之為“圍觀互動(dòng)”。雖然這些微交互平日不太容易能被用戶所直觀的發(fā)現(xiàn)，但也就是這些微小的交互，才能提升一個(gè)產(chǎn)品的整體用戶體驗(yàn)。所以說，無論他們是多么的微妙，你都需要重視起來，并嘗試著將一般的設(shè)計(jì)方案和這些結(jié)合起來使用，并提供一些有效的信息，這樣才能讓你的用戶在瀏覽產(chǎn)品界面和執(zhí)行操作時(shí)有基本的保障。
知道了什么是微交互后，你還需要吃透微交互它到底是怎么工作的，只有這樣才能確保你靈活的使用微交互…
微交互的工作一般要分為四個(gè)基本要素：觸發(fā)、規(guī)則、反饋、循環(huán)。
觸發(fā)簡(jiǎn)單講就是“啟動(dòng)微交互”，例如：點(diǎn)擊按鈕或點(diǎn)擊鼠標(biāo)。這里需要注意的是，觸發(fā)并不單純是人為操作的開始，它也同樣包含系統(tǒng)自動(dòng)啟動(dòng)的操作，比如說在你設(shè)備上收到一份郵件或短信時(shí)，這時(shí)的你其實(shí)并沒有任何操作，但系統(tǒng)就會(huì)有一個(gè)微交互啟動(dòng)為你提示，這時(shí)的微交互就是被動(dòng)的。
這些所謂的啟動(dòng)微交互，需要注意的是必須與一組已經(jīng)擬定好的操作規(guī)則一起工作，這些規(guī)則里包含了什么能做，什么不能做的內(nèi)容。
微交互的規(guī)則就是表明用戶在操作后產(chǎn)品該如何按照用戶正確的心智程序進(jìn)行微交互，它決定了觸發(fā)之后會(huì)發(fā)生什么事情。因此，當(dāng)你在拉下界面時(shí)，產(chǎn)品的規(guī)則就應(yīng)該包含下滑的規(guī)則，這同時(shí)也能表明用戶當(dāng)時(shí)的心理是希望看到界面以上的結(jié)果或者下拉刷新看到更多新的結(jié)果。同樣，規(guī)則就是規(guī)則，在你沒有進(jìn)行操作時(shí)，規(guī)則時(shí)而也在生效，例如：微信里對(duì)方并未添加你為好友，但依然和你說了句話，規(guī)則就是生效的，這里的規(guī)則就是阻止了信息的傳入。
顧名思義反饋在現(xiàn)實(shí)中就是你與人對(duì)話交流，對(duì)方饋贈(zèng)你的信息，在產(chǎn)品中這個(gè)環(huán)節(jié)也同樣必不可少，它的存在可以讓用戶明確知道在用戶操作后產(chǎn)品發(fā)生了什么，出現(xiàn)什么結(jié)果的回饋信息。在微交互中，用戶看到的、聽到的、操作的、甚至包含感覺到的，都是可以反饋的。
例如：
1、看到的：希望打車，看到的反饋就是地圖和輸入起始地/目的地的界面，這就符合了用戶心理；
2、聽到的：在與人聊天時(shí)，其他人也和你說了句話，就聽到手機(jī)“蜂”一聲，這樣的反饋就是提醒用戶聽到有新消息；
3、操作的：在任何產(chǎn)品中都需要用戶操作，那么然后反饋用戶操作結(jié)果；
4、感覺到的：這包含界面樣式、產(chǎn)品交互是否符合用戶心理預(yù)期，并通過預(yù)期實(shí)現(xiàn)操作后得到想要結(jié)果，這里面就包含感覺到的反饋；
循環(huán)在微交互里屬于次數(shù)的說明，在我們手機(jī)設(shè)置鬧鈴時(shí)就經(jīng)?？吹接刑嵝岩淮巍⒁恢芴嵝训日f明，這就是循環(huán)的微交互，循環(huán)的微交互基本上定義了交互的某種性質(zhì)，它會(huì)告訴你隨著時(shí)間的推移發(fā)生了幾次，發(fā)生了多少。
例如：在你去銀行自動(dòng)取款機(jī)取錢時(shí)輸入的密碼，如果輸入錯(cuò)誤，就會(huì)提示你還有幾次輸入，這樣的就是循環(huán)的過程，等于是在原地打轉(zhuǎn)，但當(dāng)你成功進(jìn)入后就會(huì)從這個(gè)環(huán)節(jié)進(jìn)入到下一個(gè)環(huán)節(jié)繼續(xù)循環(huán)。
說了這么多，我想你應(yīng)該知道了微交互的工作方式以及流程，那么接下來要說的就是微交互需要在何時(shí)、何地以及如何才能正確使用了。
現(xiàn)如今產(chǎn)品幾乎都帶有滑動(dòng)的交互，之所以滑動(dòng)越來越多，是因?yàn)榛瑒?dòng)交互可以清楚的展示給用戶行為操作路徑，而點(diǎn)擊確實(shí)短期記憶性的，當(dāng)用戶想要開始滑動(dòng)時(shí)，這是用戶操作前的準(zhǔn)備，而當(dāng)用戶正在滑動(dòng)時(shí)，這是操作中的節(jié)點(diǎn)，這時(shí)滑動(dòng)的界面就會(huì)隨著手勢(shì)的方向進(jìn)行移動(dòng)并告訴用戶界面即將去往哪里，下次想要找到該從哪里找的路徑，在操作結(jié)束后，微交互完成，這時(shí)操作后的結(jié)果，這一整套流程下來，通過短小的微交互，就能很清晰的告知用戶他在做什么以及他做了什么。
下拉/側(cè)拉菜單就像產(chǎn)品某個(gè)界面內(nèi)的一個(gè)抽屜，它里面包含了當(dāng)前界面賦予的更多選擇，并且還能占據(jù)極小的空間，根據(jù)用戶的心智程序來講，竟然是抽屜就應(yīng)該拉取，這才符合環(huán)境映射的條件。當(dāng)前在產(chǎn)品設(shè)計(jì)內(nèi)，幾何都包含了下拉/側(cè)拉菜單的微交互，例如淘寶的側(cè)拉菜單、美團(tuán)的下拉菜單都是微交互的展示，在輕松點(diǎn)擊后，界面tab則下拉或側(cè)拉出一個(gè)抽屜，里面就包含了N多個(gè)附加選擇或者篩選器。
對(duì)于產(chǎn)品的不斷迭代與改版，其界面一定會(huì)發(fā)生一些細(xì)微的變化，更有時(shí)功能會(huì)作為轉(zhuǎn)移，那么為了能更好的引導(dǎo)用戶的操作路徑，就需要用到一些引導(dǎo)頁(yè)，我這里說的引導(dǎo)頁(yè)并不是啟動(dòng)頁(yè)后的大篇章引導(dǎo)，而是在半黑透明遮罩的同時(shí)，流出需要用戶操作的功能引導(dǎo)，在聚焦了操作功能上，賦予一些微交互，會(huì)加大用戶對(duì)產(chǎn)品的認(rèn)可，包括喜歡新產(chǎn)品。
在用戶正在輸入一個(gè)列表菜單時(shí)，最需要的微交互就是即使反饋，作為產(chǎn)品首先應(yīng)該賦予用戶的就是安全與人性，安全是指產(chǎn)品在用戶心理的懷疑指數(shù)多少，指數(shù)越低安全度越高，而人性就需要操作的了路徑與展示是符合用戶的心理預(yù)期的。安全與人性都可以通過微交互來實(shí)現(xiàn)，例如在建設(shè)銀行APP登陸前會(huì)出現(xiàn)安全掃描，在支付寶輸入了支付密碼后出現(xiàn)的結(jié)果符合了人性思維。
有些app會(huì)出現(xiàn)卡片類樣式的界面，并通過用戶的操作實(shí)現(xiàn)卡片淡化和卡片丟棄等微交互，這樣的微交互則更加具象了用戶的真實(shí)空間感受，通過與真實(shí)環(huán)境的結(jié)合，將用戶帶入產(chǎn)品，使用戶在使用產(chǎn)品時(shí)會(huì)有現(xiàn)實(shí)版的感覺。例如：陌陌的附近人卡片丟棄，網(wǎng)易音樂的音樂專輯封面淡化。
微交互在產(chǎn)品內(nèi)可以說是無處不在，雖然這些都是一些很小的細(xì)節(jié)，如果只是靜態(tài)展示可能并沒有太大作用，但通過產(chǎn)品與用戶的這種互動(dòng)，變相交流，微交互在產(chǎn)品的整體體驗(yàn)上就可以增加巨大的價(jià)值，這也可能是所謂的“宜家效應(yīng)”吧，用戶在自己親手制作或行動(dòng)時(shí)，才能賦予產(chǎn)品更大的價(jià)值感。
好的產(chǎn)品必須擁有這種精心設(shè)計(jì)的標(biāo)志，它不僅包含了對(duì)用戶的心智理解，更多的，是對(duì)用戶的一種尊重與情感抒發(fā)。
蘭亭妙微(363858.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
情感是我們生活中不可割舍的元素，UI設(shè)計(jì)師也開始在設(shè)計(jì)時(shí)添加「情感化元素」
蘭亭妙微(363858.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
ui設(shè)計(jì)分享達(dá)人 交互設(shè)計(jì)及用戶體驗(yàn)
ui設(shè)計(jì)分享達(dá)人 交互設(shè)計(jì)及用戶體驗(yàn)
在數(shù)字化時(shí)代，交互設(shè)計(jì)（Interaction Design）已成為產(chǎn)品成功的關(guān)鍵因素之一。無論是移動(dòng)應(yīng)用、網(wǎng)站還是智能設(shè)備，優(yōu)秀的交互設(shè)計(jì)都能為用戶帶來流暢、直觀的體驗(yàn)。今天，我想和大家探討交互設(shè)計(jì)的核心要素，以及如何通過創(chuàng)新思維提升用戶體驗(yàn)。
交互設(shè)計(jì)的核心是“以用戶為中心”。設(shè)計(jì)師需要深入理解用戶的需求、行為和痛點(diǎn)，通過用戶研究、原型測(cè)試等方法，確保設(shè)計(jì)能夠真正解決用戶問題。例如，簡(jiǎn)潔的導(dǎo)航、清晰的反饋和一致的操作邏輯，都是提升用戶體驗(yàn)的基礎(chǔ)。
在追求創(chuàng)新的同時(shí)，設(shè)計(jì)師需要確保功能的實(shí)用性和易用性。過度復(fù)雜的設(shè)計(jì)可能會(huì)讓用戶感到困惑，而過于保守的設(shè)計(jì)則可能缺乏吸引力。如何在創(chuàng)新與功能之間找到平衡，是每個(gè)交互設(shè)計(jì)師面臨的挑戰(zhàn)。
交互設(shè)計(jì)不僅僅是功能的實(shí)現(xiàn)，更是情感的傳遞。通過色彩、動(dòng)畫、音效等元素，設(shè)計(jì)師可以創(chuàng)造更具吸引力和情感共鳴的體驗(yàn)。例如，微交互（Micro-interactions）的巧妙運(yùn)用，能夠增強(qiáng)用戶的參與感和滿意度。
隨著用戶使用設(shè)備的多樣化，跨平臺(tái)設(shè)計(jì)變得越來越重要。設(shè)計(jì)師需要確保在不同設(shè)備和平臺(tái)上，用戶都能獲得一致且無縫的體驗(yàn)。這不僅需要技術(shù)上的支持，更需要設(shè)計(jì)思維的全局觀。
通過數(shù)據(jù)分析，設(shè)計(jì)師可以了解用戶行為，發(fā)現(xiàn)設(shè)計(jì)中的不足，并持續(xù)優(yōu)化產(chǎn)品。A/B測(cè)試、熱圖分析等工具，能夠幫助設(shè)計(jì)師做出更科學(xué)的決策，提升產(chǎn)品的整體表現(xiàn)。
交互設(shè)計(jì)是一門融合藝術(shù)與科學(xué)的學(xué)科，它需要設(shè)計(jì)師不斷學(xué)習(xí)、實(shí)踐和創(chuàng)新。無論是新手還是資深設(shè)計(jì)師，我們都應(yīng)保持對(duì)用戶需求的敏感，以及對(duì)技術(shù)趨勢(shì)的關(guān)注。期待大家在評(píng)論區(qū)分享自己的見解和經(jīng)驗(yàn)，一起探討交互設(shè)計(jì)的未來！
希望能激發(fā)大家的討論和思考！如果你有更多想法或案例，歡迎留言交流
藍(lán)藍(lán)設(shè)計(jì)的小編 http://363858.cn