論移動端產(chǎn)品細節(jié)的重要性—表單篇
編輯導(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)前字段的方式,還需要注意一下幾點:
- 需要使用簡潔明了的標(biāo)簽,不要讓用戶思考,使用簡短而明確的詞匯,讓用戶明確行為的意圖和功能;
- 清晰告知用戶完成整個表單的步驟 ,給用戶一個預(yù)期,避免用戶在完成過程中產(chǎn)生不耐煩的情緒;
- 盡可能減少不必要的表單項目,?每多一個項目需要填寫,就有可能流失一部分用戶;
- 填寫順序應(yīng)先易后難、先必填后選填、涉及隱私的內(nèi)容靠后,反之用戶容易被嚇到,從而放棄整個任務(wù);
- 識別代替輸入,善于利用技術(shù)的力量,技術(shù)上能解決的就不要讓用戶輸入;
- 能不填寫就不填寫,能選擇就不要輸入,能選擇一下就不要選兩下;
- 當(dāng)輸入可能更快時,就別讓用戶在菜單選擇;
- 選項過少,避免使用下拉菜單,以免給視覺瀏覽動線造成了不必要的阻礙;
- 選項被禁用或不可用時,將其顯示為灰色。
五、信息保存方式.
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é)議
大佬,移動端表單填寫,存在保存和提交。這樣怎么設(shè)計好呢?是按返回的時候彈窗提示,還是提交和保存設(shè)計為兩個按鈕?還是應(yīng)該怎么樣?
移動端其實很少有直接保存到草稿箱的,一般都是一個流程直接走完。
如果產(chǎn)品有保存到草稿箱的需求,直接做成文字超鏈接的形式“保存到草稿箱”,放在提交按鈕上方即可,同時,在返回是彈窗提醒是否要保存到草稿箱。
說的很詳細!謝謝分享!
感謝認(rèn)可
謝謝分享! 有學(xué)到東西!
感謝支持
謝謝分享,干貨!
客氣客氣
加油,學(xué)到了新東西
一起加油
學(xué)到了,謝謝分享
客氣客氣,相互學(xué)習(xí)!
迄今為止看到最全面最詳細的介紹移動端表單的文章,非常感謝老師的分享,謝謝你。
多謝鼓勵,繼續(xù)加油
方便微信加個好友不 ?
你好,微信lirui-881102
有重復(fù)的
是單選和復(fù)選嗎
寫的真的很詳細,有圖有文,感謝
多謝鼓勵,繼續(xù)加油
最近剛上線完一個動態(tài)表單系統(tǒng),基本文中提到的細節(jié)設(shè)計時都考慮到了,文章總結(jié)的很棒!收藏之~
謝謝認(rèn)可