中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

如何從交互與UI的層面來設(shè)計(jì)移動(dòng)端長(zhǎng)表單？

首先App移動(dòng)端面臨的兩個(gè)問題：

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

問題一解決方案

在移動(dòng)端設(shè)計(jì)to B的表單，可謂是螺螄殼里做道場(chǎng)。橫向空間的受限，所以我們?cè)谠O(shè)計(jì)表單時(shí)特別要注意這點(diǎn)。

1. 選擇合適的標(biāo)簽對(duì)齊方式

多數(shù)情況下，移動(dòng)設(shè)備上輸入框標(biāo)簽頂部對(duì)齊，這是最好的選擇，因?yàn)椴恍枰加锚M窄的水平空間。

優(yōu)點(diǎn)：

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

缺點(diǎn)：占用額外的垂直空間。

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

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

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

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

移動(dòng)端的保存（Save）按鈕一般放置在右上角更為合適，一方面用戶可以及時(shí)找到，不會(huì)隨著頁面移動(dòng)而不見蹤影，另一方面是不會(huì)因?yàn)檩斎胍疰I盤的彈出而遮蓋。

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

3. 提供幫助的時(shí)機(jī)

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

eg：通過點(diǎn)擊圖標(biāo)觸發(fā)提示。

問題二解決方案

能不讓用戶動(dòng)手，就不讓用戶動(dòng)手，能不動(dòng)腦子就不動(dòng)腦子。

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

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

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

eg：銀行列表

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

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

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

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

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

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

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

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

（2）同時(shí)注意輸入的長(zhǎng)度設(shè)計(jì)要符合預(yù)期；

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

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

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

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

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

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

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

eg：表單輸入框選填項(xiàng)示意。

（2）如果大部分輸入字段是可選字段時(shí)，把必填項(xiàng)表示出來即可。

eg：表單輸入框必填項(xiàng)示意。

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

因?yàn)槠驔]有寫明為什么要這么做，在后面分享的文章里面我會(huì)具體寫寫這么做的原因，

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

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

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