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

這類按鈕在頁面中的主要形式有以下三種：

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

固定于底部

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

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

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

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

重點(diǎn)是，對于一些用戶來說，點(diǎn)擊鍵盤上的「完成」鍵是比較生疏的，包括我自己，其實(shí)都很少直接去點(diǎn)擊鍵盤上的「完成」鍵。就像大部分人一樣，在完成編輯后的第一反應(yīng)不是點(diǎn)擊鍵盤的「完成」按鈕，而是點(diǎn)擊鍵盤的「隱藏」鍵或頁面空白處，希望鍵盤消失，從而顯示出「下一步」按鈕，然而這樣的操作并不友好。

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

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

固定于底部且跟隨鍵盤運(yùn)動

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

這樣不僅很好的解決了上面提到的「按鈕被遮擋」的問題，而且操作過程中也非常方便，無需編輯就固定在底部，需要編輯就隨鍵盤移動到上方。無論列表怎么變化，按鈕的位置永遠(yuǎn)是那兩個(gè)地方，不會變動。

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

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

所以我繼續(xù)開始想方案了。

跟隨列表移動（用戶體驗(yàn)講解）

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

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

但相較于跟隨鍵盤移動的好處是：符合用戶的操作體驗(yàn)。

我相信第三個(gè)方案（跟隨列表移動）是絕大部分人在設(shè)計(jì)時(shí)都能想到的，但是很多人一定不知道這么設(shè)計(jì)的原因。

在設(shè)計(jì)這個(gè)流程的時(shí)候，其實(shí)有一個(gè)誤區(qū)，也就是我開頭提到的，即：頁面遵循設(shè)計(jì)的統(tǒng)一性原則。

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

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

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

因?yàn)樵谶@類列表頁的操作下，用戶去確認(rèn)列表信息是非常重要的過程，所以將「下一步」或「確認(rèn)」按鈕置于右上角，只有是在列表頁的內(nèi)容并不重要的情況下才會如此設(shè)計(jì)。

總結(jié)

本篇文章主要說的是：按鈕的位置對頁面的影響，不要被一致性原則所束縛，而要懂得靈活運(yùn)用。

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

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

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

「細(xì)節(jié)決定成?。∪绾翁嵘脩趔w驗(yàn)」

• 《按鈕的優(yōu)先級選取與用戶體驗(yàn)最佳實(shí)踐》
• 《如何從4個(gè)方面實(shí)打?qū)嵉靥岣哂脩趔w驗(yàn)？》
• 《用戶為王！揭秘三個(gè)迅速提高用戶體驗(yàn)的魔鬼細(xì)節(jié)》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com