用戶體驗：手機端如何最佳地呈現「提示框」？

對於UI中的輸入框，有時候會需要額外的「提示框」來補充信息。因為輸入框的標題往往很簡單，因此意義容易模糊；或者有時需要向用戶解釋為什麼需要他填寫這項內容。

如果在電腦端，提示框很容易顯現，一般用戶用滑鼠懸浮下就可以了。但是到了手機端，由於屏幕非常有限，而且沒有滑鼠懸浮的效果，就要好好考慮呈現提示框的最佳方法了。

易識別 易點擊 易閱讀

手機端的提示框要容易讓用戶識別、點擊、和閱讀。提示框的外觀和位置都有很大影響。

提示圖標的識別和點擊

大的圖標一定比小的圖標更容易識別和點擊。所以，只要提示框圖標的大小不干擾到頁面布局，就越大越好。小的圖標會給用戶的點擊帶來阻礙。

下面這個例子錯誤的地方就在於：提示框圖標放在文本旁邊，太小不容易點擊，另外如果增大尺寸，又會擾亂頁面布局。

所以好的選擇是，將圖標放在文本框內部的右側。文本輸入框的高度一般比標題大，所以這樣提示框圖標也更大，而且不會影響用戶輸入。

不過下面這個例子仍然有缺陷：圖標跟周圍對比度低，不容易識別。

所以，給圖標添上色彩，會增強對比度，有「按鈕」的感覺。

現在這個提示框圖標既容易識別也容易點擊。

提示框的閱讀

提示框不僅要閱讀起來順暢，在視覺上還要跟相關的輸入框聯繫起來。

因此最好採用一種跟輸入框寬度一致的提示框。如果像下圖左邊一樣，提示框出現在圖標的正上方，就會出現被截掉的問題，因此要注意保持提示框跟文本框一致。

另外，為了保證視覺上提示框和輸入框相關聯，提示框要緊挨著輸入框，並且指向圖標，進一步表明這個提示框是屬於哪個輸入框的。

如果用戶看完提示框內容，他們就會緊接著點擊輸入框輸入內容。要確保用戶點擊其他位置時提示框消失，不妨礙他們的下一步動作。

提示框的視覺參考標準

在上文中的案例中我們提到，提示框的大小和位置是以輸入框為基準的，這是因為輸入框是最大、最顯要的一個元素。以它為基準，可以創造視覺上的關聯性和統一性。

那麼對於其他組件元素，比如下拉菜單、勾選選項等，也可以作為視覺參照物。

如上圖所示，提示框圖標放在了下拉菜單的右邊，並且高度一致。這樣既不會干擾下拉菜單中的選項，在視覺上也顯眼。

不同於一般輸入框和下拉菜單的水平延伸，勾選組件在視覺上一般是垂直延伸的。因此我們不能把勾選組件的提示框放在右邊，這樣會干擾選項；也不能放在所有選項的下方，因為這種位置很容易被用戶忽略。

因此好的方法是將提示框圖標跟勾選項垂直水平上排列一致，並置於上方。這樣視覺上產生關聯性，用戶也能根據問號和顏色識別出提示框的存在。

即使用戶不小心點到了提示框，也不會產生負面的結果，只是讓他們接收到幫助信息罷了。

提示框的目的

提示框的目的是讓用戶更順暢地輸入信息，但是並非所有用戶都需要這層提示，因此提示框的設計要滿足：需要提示的人能立刻找到提示，不需要的人則不必閱讀多餘的信息。

有些設計師會採用上圖中的「提示」例子，即直接把信息放在文本標題下方。這樣做的弊端就是，不僅破壞了頁面布局，還會分散用戶注意力。

用戶的注意力是有限的，要保證用戶體驗儘可能順暢，就不要讓提示信息在默認狀態下入侵整個頁面布局。

總之，在為手機端設計提示框時，要做到順暢而不突兀，明顯而不干擾。

來源：網路

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！