論移動端產(chǎn)品細節(jié)的重要性—表單篇

22 評論 17786 瀏覽 78 收藏 32 分鐘

編輯導(dǎo)語:在各種移動端設(shè)備中,我們經(jīng)常能夠見到表單,表單不僅簡潔清晰的為我們呈現(xiàn)出了信息,還能夠提升用戶的體驗感。表單看似很容易設(shè)計,實則包含許多的細節(jié),稍不注意就會出錯。本文作者作者就以表單為例,為我們談了談移動端產(chǎn)品細節(jié)的重要性。

不管是APP還是Web端界面設(shè)計,我們最常見的元素應(yīng)該就是表單了,表單幾乎是每一款數(shù)字產(chǎn)品都不可或缺的組成部分,也是設(shè)計師必須要親身經(jīng)歷的設(shè)計組件之一,它的作用無可替代。

表單是提升用戶體驗的一個核心點,但在視覺呈現(xiàn)的時候,大部分都忽視了它的體驗。對于一個設(shè)計師來說,就需要根據(jù)實際情況在設(shè)計中進行靈活調(diào)整,設(shè)計出符合用戶預(yù)期的表單。

不僅能帶給用戶操作效率上的提升,節(jié)約時間成本;還能避免錯誤出現(xiàn),在體驗過程中心情更加的愉悅。

下面用Bee Express實際項目案例來帶你全面了解表單設(shè)計:

一、什么是表單

在我們的現(xiàn)實生活中,從小到大都在和表單打交道,從我們在學(xué)習(xí)使用的作業(yè)本、學(xué)?;@球場里的線條、班級里面每個小組區(qū)域的劃分;再到樓層及墻面阻隔、超市里面的貨架、馬路上的斑馬線等。

雖然這些潛在的表單沒有明確的標(biāo)識,但對我們已經(jīng)形成了條件反射,也有了深刻的記憶。它們隨時都在告訴我們,在哪個區(qū)域可以做什么?需要注意什么?以及行動之后的結(jié)果反饋。

表單在產(chǎn)品中主要負責(zé)數(shù)據(jù)采集的功能,用來搜集和呈現(xiàn)一些數(shù)據(jù)、信息和特定的字段,大部分涉及到數(shù)據(jù)采集功能的模塊,我們都可以稱其為表單。

范疇極為廣泛,應(yīng)用情況牽涉到方方面面,可以被靈活運用于多種功能模塊中。

表單并不是表格,是最為常見的頁面模塊, 比如登錄網(wǎng)站填寫信息、購物填寫地址、填寫調(diào)查問卷、修改個人中心信息時……都是在和表單發(fā)生互動。

表單是由多種元素組成,最常用的元素就那么幾個。在設(shè)計過程中,設(shè)計師需要合理組織這些元素,幫助用戶在填寫表單時,輕松愉快的完成。

二、Bee express項目表單存在的問題

Bee Express主要經(jīng)營的是快遞、速遞柜業(yè)務(wù),前期主要經(jīng)營泰國市場,所有APP/網(wǎng)頁的視覺語言定為中文、英文、泰文三種。

那么我們設(shè)計的界面就需要去考慮在表達同一個信息時,中、英、泰三文不同長度的占比,需要預(yù)留足夠的位置以供所有譯文顯示完整。

同時也碰到了諸多問題,在設(shè)計之前,基本就是以中文為主,組織好視覺語言后是沒有辦法隨時提供英、泰兩文的;即使提供了,也會碰到一些比較尷尬問題。

下面我就以表單為主,將存在的問題列舉部分。

從上面的實例,我們能看出來,在中文正常的情況下,翻譯英/泰文時候,很多問題就顯現(xiàn)出來:

  • 標(biāo)簽左對齊的方式在英、泰兩文狀態(tài)下,顯的不夠友好,參差不齊造成視覺有些混亂;
  • 英文翻譯在超過3個單詞或某個單詞過長時,就會出現(xiàn)重疊/覆蓋的情況;
  • 泰文都是非常碎小的單個符號,在標(biāo)簽過長時,無法確定從哪里折行以確保詞組不會脫節(jié);
  • 輸入的部分信息因橫向距離過短,造成顯示不全而自動省略,給用戶帶來記憶負擔(dān);
  • 因視覺的混亂,導(dǎo)致可操作性很差,易用性過低。

上面只是根據(jù)展示的單個頁面列舉的部分問題,其實在其他各種類型的表單里,還有更多可改進及優(yōu)化的空間。

比如:完成的先后順序、合適的輸入格式、下拉還是彈窗、狀態(tài)反饋、操作按鈕、如何簡化以及分頁等,都需要設(shè)計師去細心的打磨,以便于用戶高效、愉快的完成表單內(nèi)容。

三、表單的組成結(jié)構(gòu)與類型.

1. 表單的組合元素

表單的目的、內(nèi)容、大小長度等雖然各不相同,但基本元素比較固定,在進行布局和交互設(shè)計的時候,這些元素有著較高設(shè)計要求。合理組織這些元素有助于用戶輕松完成表單填寫,在產(chǎn)品上需要高效、顯著且有良好的可訪問性。

表單主要有以下幾部分組成:

  • 標(biāo)簽:告訴用戶這里應(yīng)該輸入的元素是什么,如:姓名、電話、地址;
  • 輸入域:可交互的輸入?yún)^(qū)域,如:文本框、選項框、下拉選擇、文件上傳;
  • 占位符:占位符是對標(biāo)簽進行額外的信息描述,如:輸入信息的范例、填寫幫助;
  • 前導(dǎo)圖標(biāo)(可選):描述文本所需的輸入類型和特征,如:登錄的賬號、密碼、驗證碼;
  • 后綴圖標(biāo)(可選):對輸入內(nèi)容進行控制,如:下拉的展開與收起、清空;
  • 幫助(可選):提供表單內(nèi)容的注釋或輔助類容,如:說明、注意事項;
  • 反饋(可選):告知用戶當(dāng)前操作可能或已出現(xiàn)的問題,如:提交成功、錯誤提示、網(wǎng)絡(luò)問題;
  • 鍵盤(可選):在文本編輯時需要使用鍵盤,如:設(shè)備系統(tǒng)鍵盤、應(yīng)用內(nèi)置鍵盤;
  • 動作按鈕:動作按鈕是在表單的結(jié)尾,如:提交、下一步、清空所有信息。

2. 選擇合理的對齊方式

常見的對齊的方式有三種,左對齊、右對齊和頂對齊。不同的對齊方式都有各自的優(yōu)點和缺點,我們需要根據(jù)項目實際情況來選擇最合適的對齊方式。

1)標(biāo)簽左對齊

  • 優(yōu)點:左對齊有足夠的垂直空間,可以充分利用,而且便于信息的擴展。
  • 缺點:?需要更多的橫向空間,主要由標(biāo)簽的字?jǐn)?shù)決定,需要刻意控制,否則會顯得參差不齊。與輸入字段關(guān)聯(lián)性弱,完成速度最慢,導(dǎo)致加長用戶完成表單的時間,增加用戶的時間成本。

從上面的實例,Bee Express項目在中文/英文/泰文狀態(tài)下,不適合標(biāo)簽左對齊的方式。

2)標(biāo)簽右對齊

  • 優(yōu)點:標(biāo)簽到輸入框的間距是固定的,用戶在瀏覽時速度更快,減少了用戶完成表單的時間
  • 缺點:所占空間與左對齊相同,左右邊緣呈鋸齒狀,標(biāo)簽與輸入字段距離一致,完成速度一般。感覺上有些隨意,在視覺上不易快速了解表單的全部信息,且缺乏統(tǒng)一感。

從上面的實例,Bee Express項目在中文/英文/泰文狀態(tài)下,相比左對齊可以提升用戶完成效率,但并未解決因不同文本信息過長而造成自動省略的問題,同樣不適合標(biāo)簽右對齊的方式。

3)標(biāo)簽頂對齊

  • 優(yōu)點:符合自然視線,完成速度最快,好布局,適合長短不同的標(biāo)簽;用戶在視覺掃描時能快速的捕捉表單信息,更快的完成操作。
  • 缺點:面對表單內(nèi)容較多、內(nèi)容過長時,需要更多的縱向空間。

從上面的實例看,相比左對齊和右對齊的方式,Bee Express項目在中文/英文/泰文狀態(tài)下,更加適合標(biāo)簽頂對齊。

雖然面對表單內(nèi)容較多、內(nèi)容過長時,會占據(jù)更多的縱向空間,但方便用戶能更加快速便捷的完成表單,提升易用性,視覺更加統(tǒng)一;還能根據(jù)表單內(nèi)容進行分頁來解決單頁縱向空間過長的問題。

3. 選填與必填

需要正確區(qū)分必填及選填的字段信息,盡量避免可填字段,如果不可避免,應(yīng)該做明確區(qū)分。避免用戶不知道哪些字段必須填寫、哪些是選擇性填寫。根據(jù)用戶長期使用產(chǎn)品被培養(yǎng)出來的習(xí)慣,可以用下列方式區(qū)分:

  • 使用帶 * 標(biāo)記加入標(biāo)簽提示,來告知用戶必填字段,選填字段不做標(biāo)記;
  • 必填字段過多時,不用做任何標(biāo)記,選填字段標(biāo)簽處備注“選填”;
  • 避免必填和選填字段同時標(biāo)記或者都沒有任何標(biāo)記。

4. 內(nèi)容分組

在我們設(shè)計表單需要的字段內(nèi)容較多是,需要合理的使用內(nèi)容分組,這樣整體看起來更加有組織性。

接近性(格式塔原理)原則告訴我們:相互靠近的物體被認(rèn)為比相互距離較遠的物體更有關(guān)聯(lián)性,這樣能使設(shè)計界面層次有序,視覺清晰,減少視覺噪音。

分組時需要注意:

  • 內(nèi)容屬性相近或有關(guān)聯(lián)性的放在一組;
  • 根據(jù)信息的重要性及難易程度排列分組,將選填的表單內(nèi)容靠后。

5. 合理分頁

表單信息內(nèi)容過多時,需要合理的使用分頁,避免用戶在事先就覺得需要在這個表單上花費大量的時間,就有可能產(chǎn)生放棄的想法。比如我們申請信用卡,就是采用多個表單頁面逐步完成的。

另外,在表單信息較少時,為了提升易用性和轉(zhuǎn)化率,也可以采用分頁、分步驟完成。

如:問卷調(diào)查,每個問題都是單獨的頁面,這樣可以避免信息的相互干擾,也讓用戶得以放松心情,專注于當(dāng)前選項,提升易用性;還有部分APP登錄,把手機號輸入和驗證碼分為兩個頁面操作,F(xiàn)acebook 的數(shù)據(jù)表明,分步也是可以提高成功率的。

6. 展示與隱藏

部分內(nèi)容在用戶需要的時候可以展示,或者系統(tǒng)強烈推薦的選填內(nèi)容也可以呈現(xiàn)給用戶,但在用戶明確不需要時,適時將信息隱藏;避免多余表單信息的干擾,造成用戶的不確定性。

7. 匹配合適的鍵盤

根據(jù)表單內(nèi)容的不同屬性,應(yīng)對不同的輸入需求,應(yīng)該提供不同的鍵盤類型,以便于用戶使用更加快捷。常見鍵盤有以下類型:

  • 設(shè)備系統(tǒng)內(nèi)置的輸入法,或者下載符合我們長期使用習(xí)慣的輸入法APP;
  • 涉及資產(chǎn)安全方面,提供內(nèi)置鍵盤,打亂鍵盤字母及數(shù)字的固定位置,可以防止窺竊,提高安全性;
  • 數(shù)字輸入,提供純數(shù)字鍵盤,能夠提升用戶的完成效率,讓輸入變的更簡單。

四、信息的錄入方式.

1. 文本輸入類型

用戶在完成表單進行文本輸入時,當(dāng)然希望填寫的信息越少越好,所以我們盡可能提供合適的輸入格式、適當(dāng)?shù)淖詣虞斎?、合理的輸入順序以及避免重?fù)輸入來提升用戶完成表單的效率。

1)輸入格式

通過合理的格式約束,能夠方便用戶更快的完成填寫,而減少錯誤出現(xiàn)。自動對焦第一個輸入字段可以引導(dǎo)用戶開始進行輸入。

2)自動輸入

根據(jù)已知信息,幫助用戶預(yù)判內(nèi)容并自動錄入。

如:用戶在輸入電話號碼前,需要先輸入國家的代碼,我們可以根據(jù)產(chǎn)品的運營市場所在的國家自動錄入。

3)輸入順序

先易后難;先必填后選填;先公開信息后隱私信息;有關(guān)聯(lián)性的合成一組,特殊問題后置,用戶輸入時、不會覺得突兀、門檻太高 。

4)避免多次詢問相同信息,重復(fù)輸入的內(nèi)容盡量減少

比如:用戶可以顯示和隱藏所設(shè)置的密碼,不是讓用戶輸入2次來進行驗證,這對于生成有效的密碼更重要。

2. 信息選擇類型

在用戶完成表單的過程中,為了應(yīng)對不同的信息,除了文本輸入之外,還會有選擇的方式。通常會包含有至少2個或以上的選項,用戶可以選擇其中的一個或多個。

選擇的類型最常見的有單選、復(fù)選(多選);選擇樣式有彈窗、下拉菜單、跳轉(zhuǎn)新頁面。

它們看起來不復(fù)雜,但是在實際使用的時候講究非常之多,不僅關(guān)乎用戶體驗,而且涉及到一些界面邏輯問題,每種選擇方式也都有各自不同的狀態(tài)顯示。

1) 單選

單選項是界面中非常常見的表單元素。它通常被用來從一組互斥的相關(guān)選項中選擇一個單獨的選項。當(dāng)點擊一個未選中的單選項時,它會被選中,其他按鈕則會變成未選中狀態(tài)。

單選可根據(jù)用戶最可能會選中或者數(shù)據(jù)統(tǒng)計選擇最多的一個標(biāo)簽作為默認(rèn)選項,如果此字段屬于非必填,需要有一個“無”的標(biāo)簽選項,以方便用戶在選擇之后又不想做出選擇時能夠更改。

單選的樣式有單選框、按鈕、波動開關(guān),請根據(jù)不同需求選擇不同的樣式:

單選框

存在兩個以上的選項且標(biāo)簽是一句/多句話組成,需要選擇一個正確的選項。使用單選框時,靠左對齊的選框+標(biāo)簽的樣式是效果最好的,單選框有選中、未選中、不可選狀態(tài)。

按鈕:

存在2~6個選項時且選項信息是一個詞語,文本一般不超過4個字,需要選擇一個正確的選項,使用按鈕樣式——有選中、未選中、不可選狀態(tài);

波動開關(guān):

只存在兩個選項且選項具有判斷性質(zhì),需要選擇一個正確的信息,觸發(fā)之后能夠立即生效,使用波動開關(guān),有開啟、關(guān)閉兩種樣式。

2)復(fù)選

復(fù)選也是界面中很常見的表單元素,通常會有一個或多選項供用戶選擇,同時選項的內(nèi)容是不互斥的,可以選擇一個或多個正確的選項。

復(fù)選無需提供默認(rèn)選項,也不需要提供“無”的標(biāo)簽,用戶可在同一選項上重復(fù)點擊進行選中/未選中操作。復(fù)選最常見的樣式就只有復(fù)選框、按鈕兩種:

復(fù)選框:

一個具有判斷性質(zhì)(用戶協(xié)議)的選項或者有兩個正確答案以上的多個選項組成,復(fù)選框有選中、未選中兩種常用狀態(tài);另外當(dāng)選項存在子父級關(guān)系時,還有一種未定狀態(tài),常用于Web端管理后臺。

按鈕:

存在2~6個選項時且選項信息是一個詞語,文本最好不超過4個字,有兩個以上的正確選項,使用按鈕樣式;有選中、未選中、不可選狀態(tài);

3. 選擇方式

不管是單選還是復(fù)選、按鈕還是框選的形式,都需要結(jié)合表單當(dāng)前選項的實際需求,以對應(yīng)不同選擇方式。最為常見的選擇方式有彈窗、下拉、新頁面跳轉(zhuǎn)等。

不同的選擇方式有各自的優(yōu)勢和劣勢,選擇不當(dāng)可能會造成用戶體驗差而導(dǎo)致轉(zhuǎn)化率低或用戶流失。

  • 彈窗:在完成表單需要選擇的字段內(nèi)容時,當(dāng)選項超過6條或特定(低于6條但文本過長、調(diào)用系統(tǒng)功能…)情況,可使用動作欄彈窗的方式;
  • 下拉(展示與隱藏):有多種樣式,正確使用下拉可以有效幫助用戶縮小選擇范圍;
  • 新頁面:當(dāng)選項信息較多且復(fù)雜時,使用新頁面跳轉(zhuǎn)更便于操作。如:選擇用戶地址則跳轉(zhuǎn)至地址列表。

對于如何選擇適合表單當(dāng)前字段的方式,還需要注意一下幾點:

  1. 需要使用簡潔明了的標(biāo)簽,不要讓用戶思考,使用簡短而明確的詞匯,讓用戶明確行為的意圖和功能;
  2. 清晰告知用戶完成整個表單的步驟 ,給用戶一個預(yù)期,避免用戶在完成過程中產(chǎn)生不耐煩的情緒;
  3. 盡可能減少不必要的表單項目,?每多一個項目需要填寫,就有可能流失一部分用戶;
  4. 填寫順序應(yīng)先易后難、先必填后選填、涉及隱私的內(nèi)容靠后,反之用戶容易被嚇到,從而放棄整個任務(wù);
  5. 識別代替輸入,善于利用技術(shù)的力量,技術(shù)上能解決的就不要讓用戶輸入;
  6. 能不填寫就不填寫,能選擇就不要輸入,能選擇一下就不要選兩下;
  7. 當(dāng)輸入可能更快時,就別讓用戶在菜單選擇;
  8. 選項過少,避免使用下拉菜單,以免給視覺瀏覽動線造成了不必要的阻礙;
  9. 選項被禁用或不可用時,將其顯示為灰色。

五、信息保存方式.

1. 手動保存

手動保存即依賴用戶做額外操作才可以達成的保存行為,此類保存,我們往往依賴保存按鈕。

這種保存方式大多用于網(wǎng)頁,如:個人信息、簡歷等。大多用于表單內(nèi)容較多的頁面,根據(jù)表單信息將內(nèi)容屬性相近或有關(guān)聯(lián)性的放在一組,組的下方提供一個保存按鈕。

2. 自動保存

自動保存的目的是記住用戶已經(jīng)填寫的內(nèi)容,從而避免用戶需要再次輸入而放棄。

可以設(shè)定間隔時間或者用戶未操作后的一段時間進行自動保存,比如:每隔30秒或者用戶在10秒內(nèi)未操作,系統(tǒng)進行自動保存一次,比較適合需要大量編輯功能的表單(這種保存方式屬后臺發(fā)送請求,視覺無任何變化)。

3. 兜底保存

其實前面兩種保存方式在移動端都有局限性,手動保存不利于用戶體驗,自動保存比較占資源和影響用戶操作,那么我們就需要有一個更好的方案。

類似信息較多的表單,系統(tǒng)檢測到用戶填寫了部分內(nèi)容但沒有完成表單就要離開時,以彈窗的形式給用戶一個溫馨提示,讓用戶自行選擇保存還是直接離開。

另外在用戶使用網(wǎng)絡(luò)問題或應(yīng)用意外退出,都應(yīng)自動保存用戶已完成的信息,以便用戶再次使用時不會因為重新填寫嫌麻煩而放棄。

六、視覺反饋

設(shè)計表單時,對于一些專業(yè)詞匯或較難理解的概念,要給予明確的解釋,有較高要求的表單信息也要給予明確的示例供用戶參考。

復(fù)雜的流程,還可以提供在線咨詢幫助,協(xié)助用戶完成整個表單的填寫。

當(dāng)用戶填寫內(nèi)容出錯的時候,應(yīng)當(dāng)指明發(fā)生錯誤的條目,以及錯誤的原因,最好將反饋定位到具體位置。反饋的前提是不打擾用戶,但在用戶需要的時候及時出現(xiàn)。

1. 提示反饋(輸入前)

  • 聚焦?fàn)顟B(tài):光標(biāo)插入輸入框,當(dāng)前輸入框應(yīng)予以不同的樣式,便于用戶清楚當(dāng)前處于什么位置;
  • 標(biāo)簽提示:針對用戶容易出錯的格式問題,可在標(biāo)簽中提示,如:字?jǐn)?shù)限制、格式要求等;
  • 引導(dǎo)提示:部分完成難度較大的表單,以圖表或按鈕引導(dǎo)用戶點擊,用彈窗或跳轉(zhuǎn)新的頁面詳細解答。如:需要用戶填寫相對隱私的信息時,請給予解釋這么做的原因及目的。

2. 驗證反饋(輸入后)

  • 行內(nèi)提示:行內(nèi)提示不需要服務(wù)器上傳驗證的數(shù)據(jù),就可以判斷,例如手機格式,當(dāng)光標(biāo)離開時理解為用戶輸入完成,通過前端對格式進行驗證;
  • toast提示:屬于后臺驗證,需要服務(wù)器上傳驗證數(shù)據(jù),或者其他類型的突發(fā)事件。如果是表單問題,需要有清晰的定位提示位置,就近原則,方便用戶發(fā)現(xiàn)并修改操作。請注意錯誤的字段,請勿在鍵入后直接清除,請給用戶在此基礎(chǔ)上修改的機會,記住用戶才是決定者。
  • 彈窗提示:彈窗提示是直接打斷當(dāng)前的操作,同時會引導(dǎo)用戶進行新的操作。比如成功提示,是對用戶完成信息輸入的提示和感謝;失敗提示則會通過彈窗引導(dǎo)用戶返回或者重新提交。

七、操作按鈕.

操作按鈕是在表單的結(jié)尾,有個確認(rèn)提交的動作控件,是專門為觸控而設(shè)計。不僅可點擊,更需要容易點擊;還需要根據(jù)表單的不同條件反饋不同的按鈕狀態(tài),清晰可預(yù)測,應(yīng)該準(zhǔn)確地描述用戶點擊按鈕后會發(fā)生什么,比如提交、復(fù)位、下一步等。

按鈕是關(guān)系到頁面的最終轉(zhuǎn)化的重要元素,在按鈕的設(shè)計上要更加費心。

顏色是影響按鈕隔離效果的首要因素,多個按鈕基本都是通過顏色來區(qū)分主次;其次才是樣式,設(shè)計師利用同理心來理解用戶「心理模型」,利用設(shè)計手段將「實現(xiàn)模型」改變成用戶可以接受和理解的「心理模型」,給用戶提供最常用樣式,如果設(shè)計和常規(guī)樣式差異過大的按鈕,容易帶來額外的認(rèn)知負擔(dān)。

1. 按鈕位置

  • 右上角:以純文字的形式固定在導(dǎo)航欄的右側(cè)(屏幕右上角);
  • 表單底部:置于表單的最下方,根據(jù)表單內(nèi)容縱向空間的大小而上下移動。表單內(nèi)容較多時,容易下沉過多而導(dǎo)致按鈕不可見;
  • 設(shè)備底部懸?。簯腋≡谠O(shè)備底部,隨時可見,會占用一定的縱向空間;
  • 跟隨鍵盤:固定在鍵盤的某個位置,跟隨鍵盤展示或隱藏,常用于單個字段內(nèi)容的表單。如:登錄頁面,填寫完手機號碼,點擊鍵盤上的確定,會跳轉(zhuǎn)至驗證碼頁面,輸入驗證碼后確定,直接登錄成功。

綜合實例,Bee Express項目為了適配中文/英文/泰文狀態(tài),綜合了每個位置的利弊得出:當(dāng)表單內(nèi)容+按鈕少于一屏內(nèi)容時,操作按鈕置于表單底部;超過一屏則在設(shè)備底部懸浮。

2. 交互狀態(tài)

  • 待激活狀態(tài):需要完成表單中的部分條件方可激活,變成正??山换顟B(tài);
  • 正常狀態(tài):已完成表單必填的內(nèi)容,按鈕是可交互的,并且可用的狀態(tài);
  • 激活狀態(tài):用戶已點擊按鈕后的狀態(tài)(且還未結(jié)束按按鈕的動作);
  • 加載狀態(tài):送出表單后,正在加載中,但操作還未完成,沒有立即實現(xiàn)的狀態(tài);
  • 禁用狀態(tài):非交互狀態(tài),目前不可交互,但以后可以使用。

3. 多按鈕樣式

  • 主操作按鈕:一個表單頁面只能存在一個主操作,也是最醒目、最突出、最重要的按鈕;
  • 次操作按鈕:存在多個等級,可以通過弱化主操作按鈕、圖標(biāo)或突出文字來表現(xiàn)次操作按鈕,次級按鈕可以多個同時存在。

八、總結(jié)

以上只是對表單設(shè)計的一些總結(jié),視覺體驗只占了整體體驗一部分 。

一個表單是否真的好用,還需要深入研究表單設(shè)計,從結(jié)構(gòu)化的思維分析表單的設(shè)計問題,從而能夠全面的認(rèn)識一個事物并進行了解掌握。

通過優(yōu)化視覺表現(xiàn)提升表單體驗只是表象,更多是要考慮到表單最終要幫用戶解決什么問題,先想好為什么,再想怎么做。

 

作者:大漠飛鷹;公眾號:能量眼球

本文由 @大漠飛鷹 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 大佬,移動端表單填寫,存在保存和提交。這樣怎么設(shè)計好呢?是按返回的時候彈窗提示,還是提交和保存設(shè)計為兩個按鈕?還是應(yīng)該怎么樣?

    來自廣東 回復(fù)
    1. 移動端其實很少有直接保存到草稿箱的,一般都是一個流程直接走完。
      如果產(chǎn)品有保存到草稿箱的需求,直接做成文字超鏈接的形式“保存到草稿箱”,放在提交按鈕上方即可,同時,在返回是彈窗提醒是否要保存到草稿箱。

      來自香港 回復(fù)
  2. 說的很詳細!謝謝分享!

    來自湖南 回復(fù)
    1. 感謝認(rèn)可

      來自廣東 回復(fù)
  3. 謝謝分享! 有學(xué)到東西!

    來自浙江 回復(fù)
    1. 感謝支持

      來自廣東 回復(fù)
  4. 謝謝分享,干貨!

    來自廣東 回復(fù)
    1. 客氣客氣

      來自廣東 回復(fù)
  5. 加油,學(xué)到了新東西

    來自廣東 回復(fù)
    1. 一起加油

      來自廣東 回復(fù)
  6. 學(xué)到了,謝謝分享

    來自廣東 回復(fù)
    1. 客氣客氣,相互學(xué)習(xí)!

      來自廣東 回復(fù)
  7. 迄今為止看到最全面最詳細的介紹移動端表單的文章,非常感謝老師的分享,謝謝你。

    來自上海 回復(fù)
    1. 多謝鼓勵,繼續(xù)加油

      來自廣東 回復(fù)
    2. 方便微信加個好友不 ?

      來自上海 回復(fù)
    3. 你好,微信lirui-881102

      來自廣東 回復(fù)
  8. 有重復(fù)的

    回復(fù)
    1. 是單選和復(fù)選嗎

      回復(fù)
  9. 寫的真的很詳細,有圖有文,感謝

    來自廣東 回復(fù)
    1. 多謝鼓勵,繼續(xù)加油

      回復(fù)
  10. 最近剛上線完一個動態(tài)表單系統(tǒng),基本文中提到的細節(jié)設(shè)計時都考慮到了,文章總結(jié)的很棒!收藏之~

    來自廣東 回復(fù)
    1. 謝謝認(rèn)可

      回復(fù)