高手課堂！「按鈕系列」之按鈕位置與用戶體驗(yàn)的關(guān)系

@Daidai丶呆  ：本文重要給大家講解：「確認(rèn)」、「下一步」等這類存在于網(wǎng)頁(yè)中的按鈕在擺放時(shí)，對(duì)網(wǎng)頁(yè) or 產(chǎn)品造成的影響有哪些。

這類按鈕在網(wǎng)頁(yè)中的重要情勢(shì)有以下三種：

• 固定于底部
• 固定于底部且追隨鍵盤運(yùn)動(dòng)
• 追隨列表移動(dòng)（用戶體驗(yàn)講解）

固定于底部

當(dāng)「下一步」or「確認(rèn)」等按鈕固定于網(wǎng)頁(yè)底部時(shí)，從統(tǒng)籌全局的角度來(lái)說(shuō)，網(wǎng)頁(yè)的布局會(huì)比較清晰，不同網(wǎng)頁(yè)之間的團(tuán)體性更加同等，吻合設(shè)計(jì)的同一性原則。

所以將按鈕固定于網(wǎng)頁(yè)底部，是許多設(shè)計(jì)師在設(shè)計(jì)此類界面時(shí)會(huì)使用的方法。

但是這并不能說(shuō)明這種方法好，假設(shè)：這三個(gè)網(wǎng)頁(yè)中的列表是必要填寫(xiě)或編輯的，則按鈕置于底部就會(huì)在操作上顯得不是很方便。

首先，對(duì)列表可編輯欄進(jìn)行修改時(shí)，網(wǎng)頁(yè)下方會(huì)彈出鍵盤，而鍵盤的出現(xiàn)會(huì)將確認(rèn)按鈕遮擋住，導(dǎo)致用戶無(wú)法點(diǎn)擊。所以產(chǎn)品在開(kāi)發(fā)時(shí)就必要細(xì)致將鍵盤的「Done」或「完成」鍵與網(wǎng)頁(yè)的「下一步」按鈕做聯(lián)動(dòng)。但其實(shí)有些鍵盤是沒(méi)有「Done」或「完成」鍵的，所以這里對(duì)開(kāi)發(fā)成原本說(shuō)是更大的，當(dāng)然這不是最緊張的。

重點(diǎn)是，對(duì)于一些用戶來(lái)說(shuō)，點(diǎn)擊鍵盤上的「完成」鍵是比較生疏的，包括我本身，其實(shí)都很少直接去點(diǎn)擊鍵盤上的「完成」鍵。就像大部分人一樣，在完成編輯后的第一反應(yīng)不是點(diǎn)擊鍵盤的「完成」按鈕，而是點(diǎn)擊鍵盤的「隱蔽」鍵或網(wǎng)頁(yè)空白處，盼望鍵盤消散，從而表現(xiàn)出「下一步」按鈕，然而如許的操作并不友愛(ài)。

所以從這點(diǎn)考慮，假如在產(chǎn)品列表網(wǎng)頁(yè)的操作過(guò)程中，列表類型屬于查看類的話（即不可編輯），那么同一將按鈕置于網(wǎng)頁(yè)底部，是沒(méi)有題目的。

而假如在產(chǎn)品列表網(wǎng)頁(yè)的操作過(guò)程中，存在需填寫(xiě)或編輯的情況，那么將按鈕固定于底部，就不是特別很是明智的選擇了。

固定于底部且追隨鍵盤運(yùn)動(dòng)

我最開(kāi)始設(shè)計(jì)的方案其實(shí)就是這一種：將按鈕與鍵盤綁定，一開(kāi)始固定于底部，進(jìn)行編輯時(shí)，鍵盤彈出，就將按鈕一路帶上來(lái)。

如許不僅很好的解決了上面提到的「按鈕被遮擋」的題目，而且操作過(guò)程中也特別很是方便，無(wú)需編輯就固定在底部，必要編輯就隨鍵盤移動(dòng)到上方。無(wú)論列表怎么轉(zhuǎn)變，按鈕的位置永久是那兩個(gè)地方，不會(huì)變動(dòng)。

可惜，我是一個(gè)有極度強(qiáng)迫癥的人，所以當(dāng)我碰到極端例子的時(shí)候，我又開(kāi)始糾結(jié)這個(gè)方案的可行性。如下圖：

是不是似曾相識(shí)？我在畫(huà)草圖的時(shí)候，碰到如許的情況，立馬能聯(lián)想到平時(shí)用 App 遇到類似的場(chǎng)景：按鈕露出一丟丟，填寫(xiě)完成后，不是想著先把鍵盤隱蔽或者是點(diǎn)擊鍵盤的確認(rèn)鍵，而是用本身纖細(xì)的手指去點(diǎn)按鈕露出來(lái)的那一部分，然后經(jīng)常點(diǎn)錯(cuò)。

所以我繼承開(kāi)始想方案了。

追隨列表移動(dòng)（用戶體驗(yàn)講解）

按鈕追隨列表移動(dòng)，是我想了很多方案后定下的，雖然也存在瑕疵，但已經(jīng)是我能想到的方案中最好的一種了。

瑕疵就是：使用這個(gè)方案雖然能解決鍵盤彈出的題目，但其實(shí)照舊會(huì)出現(xiàn)遮擋征象，如圖。

但相較于追隨鍵盤移動(dòng)的益處是：吻合用戶的操作體驗(yàn)。

我信賴第三個(gè)方案（追隨列表移動(dòng)）是絕大部分人在設(shè)計(jì)時(shí)都能想到的，但是許多人肯定不知道這么設(shè)計(jì)的緣故原由。

在設(shè)計(jì)這個(gè)流程的時(shí)候，其實(shí)有一個(gè)誤區(qū)，也就是我開(kāi)頭提到的，即：網(wǎng)頁(yè)遵循設(shè)計(jì)的同一性原則。

導(dǎo)致設(shè)計(jì)師在設(shè)計(jì)的過(guò)程中，盼望將網(wǎng)頁(yè)元素盡可能的同一化，包括圖標(biāo)、按鈕、位置等等。從而忽略了其實(shí)每個(gè)網(wǎng)頁(yè)都是一個(gè)「單獨(dú)的個(gè)體」，我們必要的是讓用戶在每一個(gè)網(wǎng)頁(yè)都能順利的完成操作，而不是從設(shè)計(jì)者的角度來(lái)說(shuō)「網(wǎng)頁(yè)布局」的同一性。

所以根據(jù)列表的閱讀順序，我們從第一行開(kāi)始讀到最后一行，從視覺(jué)流的角度來(lái)說(shuō)，按鈕在接近列表下面的位置時(shí)，對(duì)于用戶來(lái)說(shuō)是接收的最快的。

同時(shí)，我在設(shè)計(jì)的過(guò)程中，否決了將「確認(rèn)」按鈕置于右上角的方案。

由于在這類列表頁(yè)的操作下，用戶去確認(rèn)列表信息是特別很是緊張的過(guò)程，所以將「下一步」或「確認(rèn)」按鈕置于右上角，只有是在列表頁(yè)的內(nèi)容并不緊張的情況下才會(huì)如此設(shè)計(jì)。

總結(jié)

本篇文章重要說(shuō)的是：按鈕的位置對(duì)網(wǎng)頁(yè)的影響，不要被同等性原則所約束，而要懂得天真運(yùn)用。

所以網(wǎng)頁(yè)中的任何一個(gè)元素的擺放，影響的都不僅僅是網(wǎng)頁(yè)的布局，更多的其實(shí)是用戶在操作過(guò)程中的體驗(yàn)。

其實(shí)工作中有許多類似的小題目，許多人只是理所當(dāng)然的覺(jué)得是如許，沒(méi)有去深究過(guò)為什么，而這些細(xì)節(jié)每每是產(chǎn)品是否成功的關(guān)鍵。

迎接關(guān)注作者的微信公眾號(hào)：「呆呆U理」