宝贝过来趴好张开腿让我看看_欧美日韩在线视频一区_国产婷婷成人久久AV免费高清_亚洲AV午夜成人片精品网站

News & Events

新聞動態

所在位置：

首頁新聞動態行業動態手(shou)機版網站建設中長(chang)表單只(zhi)有這(zhe)樣設計才能留住用戶！

手機版網站建設中長表單只有這樣設計才能留住用戶！

時間：2017-10-26 00:00:00瀏覽次數：1748
移動端的(de)應用(yong)(yong)(yong)越來(lai)越廣泛(fan)，用(yong)(yong)(yong)戶(hu)不(bu)(bu)再局(ju)限于B端產(chan)品的(de)需求，網站(zhan)建(jian)設(she)中越來(lai)越多(duo)的(de)企業選擇(ze)同(tong)步(bu)做(zuo)手(shou)機版網站(zhan)。基(ji)于客戶(hu)業務需求，有時候用(yong)(yong)(yong)戶(hu)在操(cao)作過程中，不(bu)(bu)可避免的(de)需要填寫很多(duo)表單，針(zhen)對于移動端長(chang)表單，應該如(ru)何設(she)計才(cai)能(neng)給用(yong)(yong)(yong)戶(hu)更好的(de)體驗呢？



移(yi)動端(duan)網頁長(chang)表單的(de)設計(ji)，按(an)照設計(ji)思路的(de)不同，一般有三(san)種主方案，如下所示：



主方案1——我們(men)常見的(de)設(she)計形式，一個界面將所有表單(dan)信息(xi)展(zhan)示出來；

主方案(an)2——將不同的(de)(de)分組表單放在(zai)不同的(de)(de)下一級界面，用戶填寫(xie)之后返回；

主方案3——分(fen)步(bu)操作，一(yi)個(ge)界面完成一(yi)組(zu)表單內(nei)容，點擊下一(yi)步(bu)進入下一(yi)組(zu)表單；

主方(fang)案1的設計討論


優點：一個界面(mian)將所有(you)表(biao)單(dan)信息展示出來，如果想查找某些填寫的(de)信息也變得更(geng)容易，相對于主方案2和(he)3，減少了頁(ye)面(mian)跳轉操(cao)作和(he)查看。

缺(que)點：基(ji)于移(yi)動端界(jie)面承載能力較弱(ruo)，一個界(jie)面將表單所有展示(shi)出來(lai)，用戶一次性瀏(liu)覽和操作起來(lai)壓(ya)力較大(da)(da)，容易使操作流程失敗，導致成功率大(da)(da)大(da)(da)降(jiang)低(di)。

針對于主(zhu)方案1，用戶完成表(biao)單完成后(hou)，提(ti)(ti)交按鈕有三種(zhong)(zhong)主(zhu)要(yao)的設計方法(fa)，一(yi)(yi)種(zhong)(zhong)是(shi)提(ti)(ti)交按鈕放在表(biao)單最后(hou)，一(yi)(yi)種(zhong)(zhong)是(shi)提(ti)(ti)交按鈕放在導航欄(lan)上。另一(yi)(yi)種(zhong)(zhong)是(shi)，提(ti)(ti)交按鈕底部懸浮。如下(xia)圖所示：


方(fang)案1.0，如果提交(jiao)(jiao)按(an)鈕放在(zai)表單之后(hou)，那么用(yong)(yong)戶的(de)(de)視(shi)覺流(liu)和操作感覺是一(yi)致的(de)(de)，流(liu)暢而自然。但是會(hui)出現(xian)一(yi)個問題，用(yong)(yong)戶在(zai)輸入(ru)信息時(shi)，鍵(jian)盤(pan)調用(yong)(yong)會(hui)遮擋到提交(jiao)(jiao)按(an)鈕。Android手(shou)機(ji)上(shang)的(de)(de)輸入(ru)法都可以點擊輸入(ru)法上(shang)的(de)(de)按(an)鈕將鍵(jian)盤(pan)推下(xia)去。而iOS原生輸入(ru)法沒辦(ban)法推下(xia)去，只(zhi)能點擊其(qi)他(ta)非(fei)編輯區域(yu)才能推下(xia)鍵(jian)盤(pan)。這樣(yang)就顯得(de)很麻煩，用(yong)(yong)戶可能會(hui)忽略(lve)掉提交(jiao)(jiao)按(an)鈕。

方案1.1，解決了提交按(an)鈕會被鍵盤擋住的缺陷(xian)，但是視(shi)覺流和(he)(he)操(cao)作行為(wei)錯亂，用(yong)戶在屏幕底(di)部輸入完成之后(hou)，視(shi)覺和(he)(he)手指要返回到頂部操(cao)作。

方案1.2，提(ti)交(jiao)按鈕底部懸(xuan)浮(fu)，解決(jue)了方案1.1的視覺(jue)流和操作紊(wen)亂(luan)的問題(ti)，解決(jue)了方案1.0提(ti)交(jiao)按鈕被(bei)隱(yin)藏的問題(ti)，但是當輸入(ru)文本，調出鍵盤(pan)時，依舊會被(bei)擋住。


使用底(di)部懸浮按鈕的(de)場景是操作按鈕非(fei)常重要，例如(ru)手機(ji)淘(tao)寶(bao)的(de)立即(ji)購買和加入購物車。

同(tong)時底部(bu)懸浮按鈕不適用于文本(ben)(ben)操作類。例(li)如文章說的長表單文本(ben)(ben)輸入。當輸入文本(ben)(ben)，調(diao)出鍵盤時，依舊(jiu)會被(bei)擋住。

底部(bu)懸浮按鈕適用于非(fei)(fei)文本(ben)輸入的使用場景。從手機淘寶(bao)、新(xin)浪微(wei)博(bo)可(ke)以看出，適用于在(zai)界(jie)面中非(fei)(fei)文本(ben)輸入、提(ti)供一(yi)個功(gong)能入口或者是(shi)界(jie)面非(fei)(fei)文本(ben)輸入的選擇信息的確(que)認(ren)。

主方案2的設計(ji)討論

優(you)點：與主方(fang)(fang)案3相比(bi)不(bu)同分組表單之前切(qie)換查看信息(xi)(xi)方(fang)(fang)便快(kuai)捷。申請流(liu)程(cheng)的首(shou)頁(ye)簡潔，填寫信息(xi)(xi)全部隱藏到(dao)下一級(ji)界面。

缺(que)點：來回跳轉，操作負荷(he)較(jiao)大，會(hui)把用戶繞(rao)暈(yun)。


在方案2.0中用戶(hu)填寫(xie)完(wan)成(cheng)的(de)分組和未分組填寫(xie)分組區分不(bu)開，將(jiang)方案2.0進行優化，例如填寫(xie)完(wan)成(cheng)后，會出現已完(wan)成(cheng)的(de)標簽，提(ti)示用戶(hu)已完(wan)成(cheng)和未完(wan)成(cheng)不(bu)同的(de)狀態(如方案2.1)

主方案3的(de)設計討論

Facebook曾針對分(fen)(fen)(fen)步注(zhu)(zhu)(zhu)冊與非(fei)分(fen)(fen)(fen)步注(zhu)(zhu)(zhu)冊做過A/B Test，其結論指(zhi)出分(fen)(fen)(fen)步注(zhu)(zhu)(zhu)冊的轉化(hua)率遠高于非(fei)分(fen)(fen)(fen)步注(zhu)(zhu)(zhu)冊。由此可見，非(fei)分(fen)(fen)(fen)步注(zhu)(zhu)(zhu)冊強行減少注(zhu)(zhu)(zhu)冊頁面，不如適當拉長戰線(xian)，給用戶輕負(fu)荷(he)的操(cao)作，讓用戶在不知(zhi)不覺中完成注(zhu)(zhu)(zhu)冊流程。

優點：流程分步操作(zuo)，相對(dui)于(yu)主方案1，用戶(hu)操作(zuo)成功率大幅度提高。

缺(que)點：如(ru)果用(yong)戶(hu)操(cao)作到了第三步(bu)，需(xu)要返(fan)回(hui)第一步(bu)確認(ren)填寫信息的準確性，那么用(yong)戶(hu)需(xu)要兩次返(fan)回(hui)。


用(yong)戶填(tian)寫(xie)(xie)的信息做保(bao)存(緩存)，用(yong)戶返回(hui)上一步，填(tian)寫(xie)(xie)的數(shu)據做保(bao)留。H5依舊適用(yong)，用(yong)戶填(tian)寫(xie)(xie)的數(shu)據保(bao)存在數(shu)據庫(ku)，用(yong)戶返回(hui)上一步時，同時刷(shua)新載(zai)入(ru)數(shu)據庫(ku)記錄(lu)的數(shu)據。

對(dui)于方案3.0和3.1 。下(xia)一(yi)步按(an)鈕不同。究(jiu)竟采取哪種?方案3.0視覺流和操作(zuo)流是正(zheng)常(chang)情況，且不存在按(an)鈕被鍵盤擋住，所(suo)以方案3.0最佳(jia)。

網站健(jian)身中(zhong)的移動端(duan)長表單設計總結分析：

主方案1、2和3，都有各自不同的優(you)缺點。

一個(ge)交互流(liu)程(cheng)的(de)好壞，一個(ge)最重(zhong)要的(de)標準之一是讓用(yong)戶(hu)順利完成操作流(liu)程(cheng)，保證操作流(liu)程(cheng)的(de)成功率，才能完成用(yong)戶(hu)的(de)目標。以此標準來看，主方案3是最好的(de)。

接下來(lai)探討一個細節問題，就是提交(jiao)按鈕是放在頂部(bu)(bu)導航欄、信息內(nei)容(rong)區內(nei)還是底部(bu)(bu)懸浮？

這里分為4種情(qing)況：

情況1：內容區(qu)加上操作按鈕不被鍵盤覆蓋。建議按鈕放在內容區(qu)內。


情況2：必填的內容未(wei)被(bei)鍵盤覆蓋，非必填被(bei)覆蓋，建議操作(zuo)按鈕放在導航欄(lan)上，例如朋友圈、QQ空間(jian)和新浪微(wei)博。



情況3：必填的(de)表單超過一(yi)屏，建議按鈕(niu)放在內容區。

放在導航欄上不行(xing)的原因(yin)有兩個(ge)：

視覺(jue)流錯誤，從(cong)上(shang)(shang)往下(xia)(xia)，信(xin)息量很(hen)大，用戶滑動(dong)瀏覽時，會(hui)忽略且很(hen)難聯想點擊右(you)上(shang)(shang)角(jiao)下(xia)(xia)一(yi)步，行業常見放(fang)在導(dao)航欄上(shang)(shang)是因為必填的不(bu)超過一(yi)屏；

當(dang)必(bi)填(tian)(tian)項過多時，要滑動屏幕才能(neng)填(tian)(tian)完。 把按鈕放在右上(shang)角的導(dao)航欄(lan)，當(dang)用戶還沒填(tian)(tian)寫(xie)完成，那么在按鈕放在導(dao)航欄(lan)上(shang)很容(rong)易去點擊，容(rong)易引(yin)導(dao)用戶犯錯。

情況4：必填超過(guo)一屏，且無非文本輸入，建議(yi)可適用底(di)部懸浮。


綜(zong)上，我們在網(wang)站建設的(de)(de)過程中總(zong)結了很多(duo)設計經驗(yan)，網(wang)頁(ye)設計并非簡單(dan)的(de)(de)內(nei)容(rong)組(zu)合排版(ban)，網(wang)頁(ye)設計需要站在用(yong)戶的(de)(de)角(jiao)度思考問題，方便用(yong)戶，為用(yong)戶解決問題。更多(duo)人(ren)性化的(de)(de)體驗(yan)因(yin)素直接(jie)影響網(wang)頁(ye)作(zuo)品的(de)(de)完整度及成熟度
400-0592-888

15周(zhou)年慶鉅惠活動，免費獲取(qu)報價方案請致(zhi)電(dian)400-0592-888或提交留言，我(wo)們馬上為(wei)您服(fu)務！

廈門
廈門市思明區軟件園二期望海路19號之二3層
泉州
泉州晉江市青陽泉安中路與湖光路交叉處嘉誠商廈10層
        版權所有?廈門會心信息科技有限公司    網站地圖
導航