之間的關(guān)系下一次，我打算為您帶來一系列專門用于設(shè)計按鈕的文章。一篇文章解釋了一個邏輯點，我相信它會對你有所幫助。

本周，我將主要向您解釋：“確認”，“下一步”等。當頁面上的按鈕被放置時，對頁面或產(chǎn)品有什么影響？

頁面中有三種主要類型的按鈕：

　固定于底部

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

　　跟隨列表移動(用戶體驗講解)

　　固定于底部

當“下一頁”或“確認”按鈕固定在頁面底部時，頁面布局將從全局角度更加清晰，頁面的完整性將更加一致，符合均勻性原則設(shè)計。

因此，將按鈕固定到頁面底部是許多設(shè)計人員在設(shè)計此類界面時使用的方法。

但這并不意味著這種方法很好。如果我假設(shè)需要填寫或編輯這三個頁面中的列表，則按鈕位于底部，操作起來不太方便。

首先，當修改列表可編輯列時，鍵盤將彈出頁面底部，鍵盤的存在將阻止確認按鈕，使用戶無法點擊。因此，在開發(fā)產(chǎn)品時，您需要注意鍵盤的“完成”或“完成”按鈕以及頁面上的“下一步”按鈕。但事實上，有些鍵盤沒有“完成”或“完成”鍵，所以這是一個更大的開發(fā)成本，當然，這不是最重要的。

重點是：對于某些用戶，單擊鍵盤上的“完成”按鈕相對不熟悉，包括我自己。實際上，只需單擊鍵盤上的“完成”按鈕即可。像大多數(shù)人一樣，編輯后的第一反應(yīng)不是單擊鍵盤上的“完成”按鈕，而是單擊鍵盤上的“隱藏”按鈕或頁面的空白區(qū)域，并希望鍵盤消失，從而顯示“下一步”按鈕。但是，這樣的操作并不友好。

因此，從這個角度來看，如果在產(chǎn)品列表頁面的操作期間列表類型屬于視圖類（即，它不能被編輯），則統(tǒng)一頁面底部的按鈕是沒有問題的。

如果在產(chǎn)品列表頁面的操作過程中需要填寫或編輯，則將按鈕固定到底部不是一個非常明智的選擇。

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

我最初設(shè)計的程序?qū)嶋H上是這個：將按鈕綁定到鍵盤，并在開始時將其固定到底部。編輯時，鍵盤彈出，按鈕組合在一起。

這不僅解決了上述“按鈕遮擋”問題，而且在操作過程中非常方便：它固定在底部而不需要編輯，需要編輯才能用鍵盤移動到頂部。無論列表如何變化，按鈕的位置始終是兩個位置，并且不會改變。

不幸的是，我是一個極度強迫癥的人，所以當我遇到極端的例子時，我開始糾纏這個程序的可行性。如下圖所示：

你遇到了似曾相識的事嗎？當我在素描時，我遇到了這樣的情況。我立刻想到使用App遇到類似的場景：按鈕暴露，填寫后，我不想隱藏鍵盤或先點擊它。鍵盤的確認按鈕，但用你自己的瘦手指指出暴露的按鈕部分（然后經(jīng)常是錯誤的）。

所以我繼續(xù)考慮這個計劃。

　跟隨列表移動(用戶體驗講解)

按鈕跟隨列表移動，我在許多場景后決定。雖然有瑕疵，但它已經(jīng)是我能想到的最好的了。

訣竅是：雖然這個解決方案可以解決鍵盤彈出的問題，但實際上仍然會出現(xiàn)遮擋現(xiàn)象，如圖所示。

但與鍵盤運動相比的優(yōu)勢在于：符合用戶的操作體驗。

我相信第三個選項（在列表移動之后）是大多數(shù)人在設(shè)計時所想到的，但很多人不知道為什么。

在設(shè)計這個過程時，實際上存在一個誤解，這就是我在開頭提到的那個，即：頁面遵循設(shè)計一致性的原則。

引領(lǐng)設(shè)計師盡可能多地設(shè)計頁面元素，包括圖標，按鈕，位置等。因此忽略每個頁面實際上是“單個人”，我們需要的是讓用戶在每個頁面上順利完成操作，而不是從設(shè)計者的角度看“頁面布局”的一致性（當然，它當你想學會靈活使用它時，這也很重要。

因此，根據(jù)列表的閱讀順序，我們從第一行讀取最后一行。從視覺流的角度來看，當按鈕靠近列表下方的位置時，對用戶來說是最快的。

同時，在設(shè)計過程中，我拒絕了將“確認”按鈕放在右上角的計劃。

因為用戶在這樣的列表頁面的操作下確認列表信息是非常重要的，所以只有當列表頁面的內(nèi)容不重要時才在右上角放置“下一步”或“確認”按鈕。它將被設(shè)計為這樣。

　小結(jié)

本文的要點是：按鈕在頁面上的位置的影響，不受一致性原則的約束，而是要了解如何靈活使用它。

因此，頁面中任何元素的放置不僅會影響頁面的布局，還會影響操作期間用戶的體驗。

事實上，工作中存在許多類似的小問題。許多人認為這是理所當然的。他們沒有研究過為什么，而這些細節(jié)往往是產(chǎn)品成功的關(guān)鍵。

太小的說，在面試中測試你的思維能力和邏輯，就是這些問題所延伸的個人觀點。

那么，你認為這篇文章對你有幫助嗎？

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

« 網(wǎng)站的排名不穩(wěn)定。怎么辦才好呢？其實可以這樣優(yōu)化網(wǎng)站 | 企業(yè)網(wǎng)站建設(shè)中開發(fā)的設(shè)計程序需要注意什么？ »