創(chuàng)新互聯(lián)提供一條，設(shè)計(jì)資訊: 三種表單設(shè)計(jì)規(guī)范。表單在移動(dòng)端設(shè)計(jì)中最常見(jiàn)的界面，每個(gè)手機(jī)系統(tǒng)及應(yīng)用對(duì)表單都有不同的設(shè)計(jì)，理應(yīng)存在一套設(shè)計(jì)規(guī)范。然而規(guī)范要自己總結(jié)才是最好最深刻的，我拿手機(jī)系統(tǒng)及app的各種表單設(shè)計(jì)對(duì)比了一番，目標(biāo)是總結(jié)出一套表單設(shè)計(jì)指南，以提高日后工作效率。

本文集中討論移動(dòng)端界面中的典型表單界面：多編輯項(xiàng)頁(yè)面、登錄&注冊(cè)頁(yè)面、發(fā)送&提交頁(yè)面

移動(dòng)端界面中常見(jiàn)表單類型

手機(jī)系統(tǒng)表單設(shè)計(jì)對(duì)比

首先對(duì)四家手機(jī)系統(tǒng)的表單設(shè)計(jì)進(jìn)行對(duì)比：iOS，Android，MIUI，F(xiàn)lyme;對(duì)比范圍是界面中的反饋策略、及界面布局和邏輯。

對(duì)比4個(gè)手機(jī)系統(tǒng)：iOS、Android、MIUI、Flyme

錯(cuò)誤反饋

• iOS：出現(xiàn)錯(cuò)誤時(shí)統(tǒng)一使用彈框提示：提交?—?— 收起鍵盤?—?— loading?—?— 反饋;
• Android：反饋通常顯示在當(dāng)前界面中，在對(duì)應(yīng)的輸入欄底部提示;
• MIUI：兼容了多種反饋方式：普通錯(cuò)誤反饋參照了Android;附帶相關(guān)操作的提示在下方彈框;針對(duì)單個(gè)輸入項(xiàng)在輸入框底部的提示;
• Flyme：反饋提示參照Android。

MIUI針對(duì)不同情況的反饋提示

值得一提的是，在android中，跳過(guò)第一個(gè)輸入項(xiàng)時(shí)輸入欄會(huì)即時(shí)給出反饋，用戶能及時(shí)注意到遺漏。當(dāng)提交的姓和名都不符合格式時(shí)，會(huì)直接提示“確定你輸入的姓名無(wú)誤嗎?”，文案靈活且具親和力。

小結(jié)

模態(tài)提示(彈框)的好處是：重點(diǎn)突出且能聚焦用戶目光，避免用戶進(jìn)行其他操作而忽略掉反饋。當(dāng)前界面反饋的好處顯而易見(jiàn)：錯(cuò)誤項(xiàng)一一對(duì)應(yīng)，用戶可清晰知道錯(cuò)誤在哪，但是表單超過(guò)一屏?xí)r容易被忽略，也容易被鍵盤遮蓋。

我認(rèn)為“彈框提示好還是在當(dāng)前界面提示好?”不是個(gè)好問(wèn)題。判斷設(shè)計(jì)好壞應(yīng)該基于場(chǎng)景，合適就是好。在表單操作過(guò)程中，可即時(shí)反饋結(jié)果的項(xiàng)目適合當(dāng)前反饋，如：手機(jī)號(hào)碼格式、郵箱格式、驗(yàn)證碼。提交時(shí)的反饋(結(jié)束流程)適合用模態(tài)提示，讓用戶明確感知到問(wèn)題存在，同時(shí)可在當(dāng)前界面針對(duì)每一項(xiàng)進(jìn)行提示。

取消&完成

• iOS：新建表單界面中，“取消&完成”幾乎是標(biāo)配格式，左上角取消右上角確認(rèn)，即便注冊(cè)頁(yè)面也是，一致性非常高。 內(nèi)容項(xiàng)未滿時(shí)，確認(rèn)按鈕灰顯;
• Android：不如iOS統(tǒng)一，登錄注冊(cè)的下一步、確認(rèn)按鈕在右下角然而新建日歷事件，保存在右上角;另外，究竟是使用icon或者文字并沒(méi)有統(tǒng)一。同樣的是在內(nèi)容項(xiàng)未滿時(shí)，確認(rèn)按鈕灰顯。另外，在某些應(yīng)用中如短信，反饋和取消沒(méi)有明確定義及區(qū)分。新建短信時(shí)，當(dāng)聯(lián)系人和正文都被填寫，點(diǎn)擊返回可保存草稿;如果僅填寫聯(lián)系人一項(xiàng)并點(diǎn)擊返回，則不會(huì)保存草稿。
• MIUI：與iOS一致，新建表單界面中標(biāo)配“取消&完成”。
• Flyme： 表單中返回、取消同時(shí)存在，算是比較逆天的設(shè)計(jì)。

即便是iOS也有不規(guī)范的時(shí)候：

1.通用/鍵盤/文字替代/新建界面中，使用的是“返回&存儲(chǔ)”而不是“取消&完成”;

2.新建便簽：左上角是返回而非取消，右上角是完成。原因是iOS視作便簽在新建的那一刻就已經(jīng)完成了，而且無(wú)需保存，所以直接返回，完成按鈕其實(shí)是完成編輯收起鍵盤的意思。

這種表達(dá)存在歧義，讓人誤以為完成及保存，建議改為收起鍵盤的icon或文字，相比之下flyme標(biāo)簽處理的更好。另外要吐槽一下：Android網(wǎng)絡(luò)設(shè)置的新建頁(yè)面多年來(lái)堅(jiān)持用彈框展示，項(xiàng)目信息無(wú)法完全展示，實(shí)在讓人難以接受。

小結(jié)

取消&完成如同兩個(gè)出口，在任務(wù)流中明確標(biāo)識(shí)出來(lái)讓用戶有充分的控制權(quán)。自動(dòng)保存意味著離開(kāi)當(dāng)前界面只有一個(gè)出口，明確的暗示尤其重要，如“完成、ok”等帶有正面含義的字眼，而不是還以不明的“返回”。

無(wú)意中找到iOS不遵循規(guī)范的界面便簽：iOS vs Flyme

無(wú)意中找到iOS不遵循規(guī)范的界面

便簽：iOS vs Flyme

線性任務(wù)流

關(guān)于登錄注冊(cè)流程，參考了：Android、美團(tuán)以及大眾點(diǎn)評(píng)。

登錄頁(yè)：google vs 大眾點(diǎn)評(píng) vs 美團(tuán)

Google在無(wú)論登錄或注冊(cè)中使用線性任務(wù)流，線性任務(wù)流的好處是：分別對(duì)每個(gè)提交的信息檢測(cè)并反饋，用戶理解起來(lái)清晰安全，屬于“can’t go wrong” 的設(shè)計(jì)，但其一步步的跳轉(zhuǎn)容易給用戶一種漫長(zhǎng)的感覺(jué)。對(duì)比之下大眾點(diǎn)評(píng)及美團(tuán)拿任務(wù)流清晰度換取了便捷性。

取舍

線性任務(wù)流和集成任務(wù)究竟如何取舍，取決設(shè)計(jì)師如何平衡清晰度和便捷性。我的理解是：登錄是留給老用戶的，用戶對(duì)應(yīng)用有一定的熟悉度，另外結(jié)合場(chǎng)景分析，無(wú)論是主動(dòng)觸發(fā)或是在購(gòu)買商品時(shí)被動(dòng)觸發(fā)登錄，用戶總是不耐煩的希望盡快結(jié)束此流程，因此登錄流程約簡(jiǎn)短越好，選用集成任務(wù);注冊(cè)面對(duì)的是新用戶，用戶此刻更需要的是安全感，明確的說(shuō)明和清晰的步驟比操作便捷更重要，因此選用線性任務(wù)流。

細(xì)節(jié)

google利用了大片空間來(lái)作為文案說(shuō)明，向用戶說(shuō)明為什么google賬號(hào)的作用，界面上沒(méi)有多余的信息，指引明確。美團(tuán)和大眾點(diǎn)評(píng)支持第三方賬號(hào)登錄，更多的入口意味著用戶更難聚焦，要嚴(yán)格控制界面元素，一旦選擇好一種登錄方式，無(wú)用信息應(yīng)該被隱藏或弱化。

處理好功能優(yōu)先級(jí)并通過(guò)視覺(jué)處理，讓界面更具引導(dǎo)性。

大眾點(diǎn)評(píng)主推無(wú)密碼快捷登錄，賬號(hào)密碼登錄作為次要登錄方式在右下角，注冊(cè)入口在右上角，整體主次分明。仍需改善的是“獲取驗(yàn)證碼”驗(yàn)證碼過(guò)于突出，手機(jī)號(hào)輸入完成前可隱藏或灰顯。美團(tuán)登錄界面中兩種登錄方式并存，相對(duì)凌亂。

小結(jié)

不同功能對(duì)應(yīng)不一樣的語(yǔ)境和用戶心情，用戶的需求也大有不同，設(shè)計(jì)之前考慮好功能的前后語(yǔ)境及優(yōu)先級(jí)，能更順利地引導(dǎo)用戶完成任務(wù)。

更多細(xì)節(jié):

1.鍵盤呼出規(guī)則

進(jìn)入界面是否默認(rèn)調(diào)起鍵盤?我總結(jié)了如下規(guī)則幫助自己判斷，與開(kāi)發(fā)溝通的成本大大降低：

判斷當(dāng)前頁(yè)面的任務(wù)流是單線程還是多線程;單線程可默認(rèn)調(diào)起鍵盤(登錄界面中，用戶的潛在行為有登錄、注冊(cè)、忘記密碼。用戶動(dòng)機(jī)不明確的情況下默認(rèn)用戶是要注冊(cè)并調(diào)起鍵盤是錯(cuò)的); 首填項(xiàng)是否用到鍵盤; 關(guān)鍵信息是否被遮擋; 平衡便捷性及可讀性，非常見(jiàn)功能，二次編輯幾率極低的界面，可讀性優(yōu)先于便捷性。

2.防錯(cuò)設(shè)計(jì)

• 必填&選填：在填充完成表單之前完成按鈕都是點(diǎn)擊無(wú)效的，在陌生任務(wù)流用戶會(huì)因此無(wú)法順利完成任務(wù)，有必要明確區(qū)分選填項(xiàng)和必填項(xiàng)。
• 反饋：除了上面提到的當(dāng)前界面反饋外，震動(dòng)和聲效都是有效的反饋方式，配合使用效果更明顯。
• 限制性輸入：固定格式輸入如6位驗(yàn)證碼、11位手機(jī)號(hào)等，可使用輸入限制、分隔顯示(3 4 4);另外使用特殊鍵盤，隱藏不可用的字符。

淘寶退款界面(左)，iOS的添加VPN(右)都對(duì)必填項(xiàng)做了明確標(biāo)識(shí)。如果不加以注明新手用戶可能無(wú)法完成流程。

有效防錯(cuò)的限制性輸入設(shè)計(jì)

3.橫豎屏適配

應(yīng)用如果要適配橫版，就需要注意表單的可讀性，盡量拆分列表，做成線性流程、必要時(shí)強(qiáng)制豎屏界面;

4.icon&文字

某些功能用“icon還是文字?”是設(shè)計(jì)師的日常話題，通常我會(huì)考慮兩個(gè)因素：

通識(shí)度：就功能本身是否被大眾認(rèn)知，且在各種語(yǔ)境下都具有唯一含義。例如左箭頭(返回)、垃圾桶(刪除);

熟知度：一個(gè)陌生且不常見(jiàn)的界面，用戶始終會(huì)保持陌生，即時(shí)是具有通識(shí)度icon，在界面中也會(huì)變得含義不清，例如添加某界面中一個(gè)圖片icon，雖然用戶知道這是添加圖片，icon本身不能告訴用戶為什么需要添加圖片。

如實(shí)在無(wú)零兩可，如功能太多空間不夠，icon+文字也是好選擇。

隱藏或顯示密碼用icon無(wú)法精準(zhǔn)表達(dá)其含義

微信：icon+文字

最后

關(guān)于表單設(shè)計(jì)，在這里僅是作為框架性的總結(jié)，表單的世界千差萬(wàn)別，細(xì)節(jié)更是深似海，后面我會(huì)進(jìn)行更細(xì)范圍的討論。

分享題目：【設(shè)計(jì)資訊】三種表單設(shè)計(jì)規(guī)范
網(wǎng)站地址：http://jinyejixie.com/news/159344.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站、網(wǎng)站維護(hù)、建站公司、微信小程序、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)