移動(dòng)端Cell欄表單設(shè)計(jì)問題匯總

BingoSun
7 評(píng)論 29327 瀏覽 73 收藏 7 分鐘
🔗 技术知识、行业知识、业务知识等,都是B端产品经理需要了解和掌握的领域相关的知识,有助于进行产品方案设计和评估

表單是用戶用來獲取服務(wù)的重要輸入工具,也是收集UGC的重要入口,更是用戶與服務(wù)商交互的重要途徑,主要交互過程:用戶輸入、編輯數(shù)據(jù),提交給系統(tǒng),系統(tǒng)給予相關(guān)的反饋和提示,設(shè)計(jì)過程中需要注意以下事項(xiàng):

表單分組

表單的輸入項(xiàng)要根據(jù)業(yè)務(wù)規(guī)則劃分好組,把同一類或相關(guān)的內(nèi)容放在一組,減少用戶認(rèn)知和思考;

比如LinkedIn,把個(gè)人基本信息、工作經(jīng)歷、教育背景、技能專長(zhǎng)都各自進(jìn)行了分組,QQ的個(gè)人設(shè)置也根據(jù)內(nèi)容相關(guān)性進(jìn)行了分組:

linkedinQQ

設(shè)置默認(rèn)選項(xiàng)

為某些輸入項(xiàng)提供比較貼心的默認(rèn)值(默認(rèn)值需要能滿足大部分用戶的需求)。

比如團(tuán)購(gòu)產(chǎn)品選擇地點(diǎn)的時(shí)候,默認(rèn)值為當(dāng)前的城市,攜程訂酒店的時(shí)間默認(rèn)值就是從今天到明天:

城市和時(shí)間

給用戶的格式要求

輸入項(xiàng)有格式要求的,用戶輸入前提示用戶,不能等用戶輸入完提交時(shí)才讓用戶知道有格式要求。

很多產(chǎn)品注冊(cè)時(shí),在用戶填完所有信息提交時(shí),才提示用戶密碼格式不對(duì),需要數(shù)字和字母的組合,在用戶填寫的時(shí)候卻沒任何提示,盡量在用戶輸入前提示用戶格式要求、選填或必填。下圖是免撥注冊(cè)和apple sotre賬號(hào)信息頁面,在用戶輸入前就提示了密碼的格式要求和選填/必填:

免撥和apple-sotre

錯(cuò)誤提示

錯(cuò)誤需要及時(shí)提示,不能等提交表單時(shí)再一一提示,否則很容易挑戰(zhàn)用戶的耐心。

例如免撥創(chuàng)建名片的表單,手機(jī)號(hào)碼位數(shù)不對(duì)時(shí),焦點(diǎn)離開號(hào)碼輸入框的時(shí)候立刻將號(hào)碼變紅,提示用戶號(hào)碼輸入有問題:

免撥錯(cuò)誤提示

輸入焦點(diǎn)和鍵盤

進(jìn)入表單填寫頁面時(shí),可以把輸入焦點(diǎn)自動(dòng)放入第一個(gè)輸入項(xiàng),同時(shí)彈出輸入鍵盤,讓用戶少點(diǎn)擊一步,要注意:如果表單頁面的內(nèi)容較多且下面的內(nèi)容比較重要時(shí),不能自動(dòng)彈出輸入鍵盤,以防輸入鍵盤擋住下面的內(nèi)容。

隨著表單項(xiàng)往下一個(gè)個(gè)填的時(shí)候,已填寫的表單項(xiàng)要自動(dòng)往上移,確保焦點(diǎn)所在的輸入項(xiàng)的輸入框一定不會(huì)被輸入鍵盤擋住。

注意幾點(diǎn)細(xì)節(jié):

  • 手機(jī)號(hào)碼3 4 4分開,方便用戶閱讀;
  • 輸入郵箱時(shí),提供后綴選擇,減少用戶輸入;
  • 輸入地點(diǎn),提供當(dāng)前位置和熱點(diǎn)城市供用戶選擇;
  • 焦點(diǎn)在輸入框內(nèi)且框內(nèi)有內(nèi)容的時(shí)候,輸入框右側(cè)提供刪除按鈕,可一鍵刪除框內(nèi)所有內(nèi)容;

原生電話吧和免撥

匹配和識(shí)別

輸入鍵盤自動(dòng)根據(jù)輸入類型匹配,比如輸入電話號(hào)碼,那么焦點(diǎn)移入該輸入框時(shí)自動(dòng)把鍵盤切換為數(shù)字鍵盤,以減少用戶手動(dòng)操作次數(shù);在填寫表單的非最后一項(xiàng)時(shí),點(diǎn)擊輸入鍵盤右下角的return、換行時(shí),可以自行切換到下一個(gè)輸入項(xiàng)。

比如IOS原生通訊錄添加新聯(lián)系人時(shí),點(diǎn)擊鍵盤右下角的return和換行都會(huì)自動(dòng)切換到下一輸入項(xiàng):

IOS原生電話本

盡量減少頁面的跳轉(zhuǎn)

能在一個(gè)頁面完成的盡量不要再跳轉(zhuǎn)新頁面;如果編輯的時(shí)候跳轉(zhuǎn)新頁面編輯,那一定要在編輯前的頁面可以看到設(shè)置值。下圖的兩種性別設(shè)置方法,個(gè)人更喜好第一種,因?yàn)榈谝环N減少了頁面的跳轉(zhuǎn),降低了用戶的認(rèn)知:

微博和微信

微信和來往的個(gè)人信息的每項(xiàng)都是跳轉(zhuǎn)新頁面編輯的,但是在總頁面上就能看到設(shè)置值

微信和淘寶

二次確認(rèn)

表單填到一半,點(diǎn)擊返回或退出最好能有二次對(duì)話框確認(rèn)。

鍵盤輸入始終是移動(dòng)端的痛點(diǎn)之一,好不容易才完成幾項(xiàng)內(nèi)容的填寫,不小心點(diǎn)了后退或退出就白忙活了,加上使用環(huán)境的影響(比如在公交車上、地鐵上),誤操作概率更大,所以如果表單填到一半退出,一定要二次對(duì)話框確認(rèn),如果什么都沒填退出,則不需要二次確認(rèn)了。

 

本文由 @BingSun 原創(chuàng)投稿,并經(jīng)人人都是產(chǎn)品經(jīng)理編輯。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 請(qǐng)問 cell的概念是什么呢

    回復(fù)
  2. 不錯(cuò),學(xué)習(xí)了~

    來自北京 回復(fù)
  3. ??

    來自陜西 回復(fù)
  4. 很實(shí)用,好的產(chǎn)品設(shè)計(jì)就是應(yīng)該方便用戶,減少用戶思考的,學(xué)習(xí)了

    來自北京 回復(fù)
  5. 很實(shí)用

    來自廣東 回復(fù)
  6. 學(xué)習(xí)了

    來自北京 回復(fù)
  7. 學(xué)習(xí)了,很有啟發(fā)~

    來自江蘇 回復(fù)
专题
11675人已学习12篇文章
2023年双十一逐渐临近,各个电商平台也摩拳擦掌开始准备。本专题的文章分享了双十一营销玩法。
专题
145842人已学习15篇文章
作为产品经理,你多多少少得懂点技术。
专题
13475人已学习13篇文章
情绪板由能代表用户情绪的文本、元素、图片拼贴而成,能够很好地帮助我们定义设计的方向。本专题的文章分享了如何应用情绪板。
专题
18976人已学习13篇文章
一款名为ChatGPT的聊天机器人引起了广泛关注,许多人由此思考ChatGPT究竟有多厉害。本专题的文章分享了对于ChatGPT的看法。
专题
14438人已学习13篇文章
作为一名运营,需要持续对自己的经验进行总结并不断更新迭代。本专题的文章分享了运营方法论。
专题
43084人已学习17篇文章
谈到互联网产品,我们不得不谈的就是它的盈利方式,这也是产品人经常会被问到的问题。