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

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

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

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

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

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

錯(cuò)誤反饋

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

MIUI針對不同情況的反饋提示

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

小結(jié)

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

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

取消&完成

• iOS：新建表單界面中，“取消&完成”幾乎是標(biāo)配格式，左上角取消右上角確認(rèn)，即便注冊頁面也是，一致性非常高。 內(nèi)容項(xiàng)未滿時(shí)，確認(rèn)按鈕灰顯;
• Android：不如iOS統(tǒng)一，登錄注冊的下一步、確認(rèn)按鈕在右下角然而新建日歷事件，保存在右上角;另外，究竟是使用icon或者文字并沒有統(tǒng)一。同樣的是在內(nèi)容項(xiàng)未滿時(shí)，確認(rèn)按鈕灰顯。另外，在某些應(yīng)用中如短信，反饋和取消沒有明確定義及區(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)完成了，而且無需保存，所以直接返回，完成按鈕其實(shí)是完成編輯收起鍵盤的意思。

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

小結(jié)

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

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

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

便簽：iOS vs Flyme

線性任務(wù)流

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

登錄頁：google vs 大眾點(diǎn)評 vs 美團(tuán)

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

取舍

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

細(xì)節(jié)

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

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

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

小結(jié)

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

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

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

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

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

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

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

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

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

3.橫豎屏適配

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

4.icon&文字

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

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

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

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

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

微信：icon+文字

最后

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

海淘科技還提供，近日比較火的MBE風(fēng)格圖標(biāo)設(shè)計(jì)資訊。MBE風(fēng)格圖標(biāo)設(shè)計(jì)資訊中，提供MBE風(fēng)格圖標(biāo)設(shè)計(jì)教程、MBE風(fēng)格圖標(biāo)設(shè)計(jì)欣賞、MBE風(fēng)格設(shè)計(jì)案例。例如，《摩托MBE風(fēng)格圖標(biāo)設(shè)計(jì)教程》、《MBE的水果圖標(biāo)設(shè)計(jì)欣賞》、《移動(dòng)端界面MBE風(fēng)格設(shè)計(jì)案例》。文章下載，點(diǎn)擊：設(shè)計(jì)資訊: 三種表單設(shè)計(jì)規(guī)范