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

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

頁(yè)面中有三種主要類型的按鈕：

　固定于底部

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

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

　　固定于底部

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

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

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

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

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

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

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

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

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

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

不幸的是，我是一個(gè)極度強(qiáng)迫癥的人，所以當(dāng)我遇到極端的例子時(shí)，我開(kāi)始糾纏這個(gè)程序的可行性。如下圖所示：

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

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

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

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

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

但與鍵盤運(yùn)動(dòng)相比的優(yōu)勢(shì)在于：符合用戶的操作體驗(yàn)。

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

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

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

因此，根據(jù)列表的閱讀順序，我們從第一行讀取最后一行。從視覺(jué)流的角度來(lái)看，當(dāng)按鈕靠近列表下方的位置時(shí)，對(duì)用戶來(lái)說(shuō)是最快的。

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

因?yàn)橛脩粼谶@樣的列表頁(yè)面的操作下確認(rèn)列表信息是非常重要的，所以只有當(dāng)列表頁(yè)面的內(nèi)容不重要時(shí)才在右上角放置“下一步”或“確認(rèn)”按鈕。它將被設(shè)計(jì)為這樣。

　小結(jié)

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

因此，頁(yè)面中任何元素的放置不僅會(huì)影響頁(yè)面的布局，還會(huì)影響操作期間用戶的體驗(yàn)。

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

太小的說(shuō)，在面試中測(cè)試你的思維能力和邏輯，就是這些問(wèn)題所延伸的個(gè)人觀點(diǎn)。

那么，你認(rèn)為這篇文章對(duì)你有幫助嗎？

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

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