国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

編輯導語：基于B端產(chǎn)品業(yè)務需求，有時候用戶在操作過程中，不可避免的需要填寫很多表單。針對于移動端長表單，我們應該如何去正確的設計？本文作者從具體項目實踐出發(fā)，對B端長表單設計過程中遇到的問題及相對應方法技巧進行了梳理總結(jié)，與大家分享。

這個月參與了一個關于新加坡銀行商戶入網(wǎng)移動端to B的項目，涉及到長表單的設計，所以開一個表單專欄，詳細講講表單設計。以下內(nèi)容源自于自己資料查找以及實戰(zhàn)總結(jié)出一些設計經(jīng)驗，希望能幫助到同樣有困惑的設計師。

如何從交互與UI的層面來設計移動端長表單？

首先App移動端面臨的兩個問題：

1. 狹小的屏幕
2. 受限的輸入方式

問題一解決方案

在移動端設計to B的表單，可謂是螺螄殼里做道場。橫向空間的受限，所以我們在設計表單時特別要注意這點。

1. 選擇合適的標簽對齊方式

多數(shù)情況下，移動設備上輸入框標簽頂部對齊，這是最好的選擇，因為不需要占用狹窄的水平空間。

優(yōu)點：

1. 提供了大量的橫向空間，可以用來擴大或者收縮標簽文字，而不會對整個頁面布局產(chǎn)生負面影響。這對于B端的一些長標簽或者跨文化的本地化標簽（多語言版本）特別有用。
2. 其次頂對齊節(jié)約時間，用戶只需要上下掃讀即可快速捕獲信息。

缺點：占用額外的垂直空間。

表單輸入框設計小技巧：首字母應當大寫，使內(nèi)容更容易瀏覽；用戶更喜歡帶有圓角的輸入框。

2. 執(zhí)行按鈕的位置

長表單還一個棘手之處在于，應該在何處放置執(zhí)行和退出按鈕。

提交（Submit）、保存（Save）或者繼續(xù)/下一步（Continue/Next）等表示填表完成動作，對于填表的人都是主動作。

移動端的保存（Save）按鈕一般放置在右上角更為合適，一方面用戶可以及時找到，不會隨著頁面移動而不見蹤影，另一方面是不會因為輸入引起鍵盤的彈出而遮蓋。

退出鍵（返回/取消）放在左上角。

3. 提供幫助的時機

對表單做任何設計都需要考慮情境，我們的業(yè)務主要是針對業(yè)務員，所以只需要用戶激活時提供幫助即可。

eg：通過點擊圖標觸發(fā)提示。

問題二解決方案

能不讓用戶動手，就不讓用戶動手，能不動腦子就不動腦子。

移動端往往只能依靠觸摸屏來完成輸入，對于B端的錄入來說這是非常痛苦的事情，可點擊區(qū)域小且輸入的東西又非常多。

1. 可以先從以下幾個方面來減少輸入的成本

（1）選擇代替輸入：維護一套數(shù)據(jù)，讓用戶從輸入變?yōu)檫x擇，保證格式規(guī)范。例如：銀行列表。

eg：銀行列表

（2）提供默認值（基于這個產(chǎn)品大多數(shù)用戶的選擇）

eg：大部分選擇都是manage，所以這里可以提供一個默認值，無需讓用戶再操作一次。

（3）技術(shù)手段：OCR（圖像識別技術(shù)），語音輸入，系統(tǒng)自動獲取數(shù)據(jù)。

eg：系統(tǒng)自動獲取數(shù)據(jù)（根據(jù)所填信息自動計算門店數(shù)量）

2. 解決了前面輸入的問題，輸入的過程中也要做到及時的反饋

（1）通過不同的樣式來顯示當前的狀態(tài)，默認狀態(tài)（Inactive）、輸入狀態(tài)（Focus/Active）、禁用狀態(tài)（Disable）、出錯狀態(tài)（Error）。

出錯狀態(tài)（Error）的提示技巧：

• 錯誤提示需靠近輸入框；
• 有些表單設計將錯誤提示設計成toast彈窗一閃而過，有時候用戶都沒注意到；
• 有的放在頁頭或者尾部，這樣遠離出錯框，無法立馬確認是什么問題；對色盲的人更加不友好，當時根本不知道發(fā)生了什么，等在其他地方看到提示，還需費神去茫茫表單中查找；
• 用戶完成當前字段填寫后再進行驗證，而不是邊填邊報錯，會讓人覺得你這個表單很傻。

（2）同時注意輸入的長度設計要符合預期；

在有些情況下還可以使用結(jié)構(gòu)化格式，例如：日期、電話號碼、信用卡號碼等，這些有特定格式的輸入；

更進一步在占位符中使用輸入提醒來為用戶提供更多的線索，例如“DD-MM-YYYY”，確保所填數(shù)據(jù)萬無一失。

eg：日期與月份都是2位數(shù)字，而年份是4位數(shù)字，需要通過輸入框長度暗示用戶。

3. 注意適當?shù)拇怪遍g距，太少或者太多都會阻礙移動，輸入框高度50%～75%作為問題之間的間隔

有節(jié)奏的流動需要有合適的間隔。

4. 如何提示輸入框是必填還是選填

（1）如果表單的大部分輸入字段要求必填，把少數(shù)可選項標明即可。

eg：表單輸入框選填項示意。

（2）如果大部分輸入字段是可選字段時，把必填項表示出來即可。

eg：表單輸入框必填項示意。

交互與UI的層面來設計移動端長表單的實戰(zhàn)部分就分享到這里，這只是大概講了一下怎么做；

因為篇幅原因沒有寫明為什么要這么做，在后面分享的文章里面我會具體寫寫這么做的原因，

作者：Neko，支付產(chǎn)品經(jīng)理/UI/UX；公眾號：吱了一聲

本文由 @Neko 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自pexels，基于CC0協(xié)議