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

2018/1/8 9:20:43來源：互聯(lián)網(wǎng)

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

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

固定于底部
固定于底部且追隨鍵盤運動
追隨列表移動（用戶體驗講解）

固定于底部

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

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

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

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

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

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

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

固定于底部且追隨鍵盤運動

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

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

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

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

所以我繼承開始想方案了。

追隨列表移動（用戶體驗講解）

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

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

但相較于追隨鍵盤移動的益處是：吻合用戶的操作體驗。

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

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

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

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