從復雜的ERP系統(tǒng)到Facebook瀑粥,應用程序中無不包含表單輸入的需求。 表單——在其諸多表現(xiàn)形式之下—— 卻統(tǒng)一作為一個用戶提交信息的窗口。本文介紹了13種不同的表單呈現(xiàn)方式,并嘗試探索數(shù)據(jù)輸入的未來音羞。
1、模態(tài)窗口式表單
簡單的模態(tài)窗口適合于復雜性低仓犬、輸入項有限的表單嗅绰。這種形式實現(xiàn)起來容易,對用戶體驗而言也是簡單直接搀继。然而窘面,需要額外模態(tài)或彈出框的復雜交互都可能會導致用戶錯誤。此外律歼,模態(tài)形式的表單阻止了用戶與應用程序的其他部分進行交互民镜,直到它被關(guān)閉啡专。因此险毁,對于長表單,不妨考慮對使用單獨的表單頁面,對于上下文關(guān)系緊密的數(shù)據(jù)畔况,不妨考慮使用內(nèi)聯(lián)編輯樣式鲸鹦。
2、多模態(tài)窗口式表單
多模態(tài)窗口式表單 (或許你能想到更好的名字) 呈現(xiàn)出多個可以拖動的面板跷跪,允許用戶一次性跟多個表單產(chǎn)生交互馋嗜。用戶可以拖動這些面板來查看其下層的那個面板/主視圖內(nèi)容而不用打開多個視圖。但是這種形式對于新手用戶來說可能會有問題吵瞻,他們可能會迷失在多個面板和主視圖中并提交錯誤的操作葛菇。
3、滑出式表單
滑出式表單會覆蓋主視圖的一部分或?qū)⒅饕晥D的內(nèi)容進行推擠以容納表單的大小橡羞。像模態(tài)表單一樣眯停,這種展現(xiàn)形式可以將上下文關(guān)聯(lián)起來,允許用戶參照主視圖中的信息卿泽。另外莺债,滑出式表單允許包含更多的表單項,因為它能夠占用整個窗口的高度签夭。
4齐邦、彈出式表單
彈出式表單非常適用于快速編輯和記錄信息的需要。這種形式將觸發(fā)表單的數(shù)據(jù)和表單面板緊密結(jié)合起來第租,使用戶對他們?yōu)g覽的原始數(shù)據(jù)位置能做到心中有數(shù)措拇。
5、內(nèi)聯(lián)表單
內(nèi)聯(lián)表單允許用戶在數(shù)據(jù)呈現(xiàn)的地方直接進行編輯和記錄慎宾,而不需要被帶入另一個視圖儡羔。這種表單可以有編輯和閱讀模式,或者還可以自動保存輸入的內(nèi)容璧诵。
6汰蜘、可編輯的表格式表單
像內(nèi)聯(lián)表單一樣,可編輯的表格式表單允許用戶在數(shù)據(jù)呈現(xiàn)的位置直接操作表單項之宿。它尤其適用于列表數(shù)據(jù)項族操,比如常會用在電子制表程序中。
7比被、接管式表單
接管模式允許用戶跟一個復雜的表單進行交互色难,同時允許用戶快速返回到之前的視圖。 這種形式非常適合輸入不需要后續(xù)視圖的系統(tǒng)級數(shù)據(jù)等缀。
8枷莉、向?qū)奖韱?/b>
向?qū)奖韱卧试S用戶逐步填寫連續(xù)性的信息。這種形式非常適用于用戶完成后再無交集的相對復雜的表單尺迂,它應該用在一個用戶需要通過一個不熟悉的流程時笤妙。
9冒掌、分段式表單
分段式表單非常適合輸入復雜的信息時。 用戶受益于能夠在一個頁面內(nèi)看到表單完整的上下文蹲盘,而不是像向?qū)奖韱文菢拥男枰囗摮尸F(xiàn)股毫。用戶可以按照自由順序在整個表單中填充信息,而不需要線性地依次填充信息召衔,這就為用戶提供了更大的靈活性铃诬。
10、拖拽式表單
雖然不是一個典型的表單形式苍凛,拖拽式編輯器允許用戶從系統(tǒng)預先定義好的輸入項中進行挑選并拖曳到一個所見即所得的展示區(qū)域趣席。通過模擬真實的物理世界,這種交互方式在一定程度上為輸入操作增加了些許樂趣醇蝴。
11吩坝、所見即所得(富文本編輯)式表單
所見即所得式的編輯器已經(jīng)廣泛使用于諸如Microsoft Word這樣的文本編輯器、像MailChimp的這樣的電子郵件發(fā)送工具哑蔫,以及SquareSpace這樣的自助建站平臺等等程序中钉寝。這種編輯器允許用戶在不了解HTML、CSS和JS的情況下能夠輕而易舉的創(chuàng)建富文本內(nèi)容闸迷。
12嵌纲、填空式表單
有時候,可用性最佳實踐可以忽略美學和有趣的互動腥沽,而不會造成糟糕的用戶體驗逮走,因為我在一篇關(guān)于美學可用性效果的文章中寫道。填空式表單接受句子或段落輸入今阳,允許用戶完全提交他們自己的數(shù)據(jù)师溅。
13、會話式的用戶界面和未來
會話式的用戶界面(CUI)通常由一個能夠響應用戶語音/文本輸入的“機器人”構(gòu)成盾舌。用戶產(chǎn)生輸入后墓臭,機器人可以直接做出回答或提供進一步的表單控件來處理請求。現(xiàn)在妖谴,機器學習技術(shù)已經(jīng)被廣泛用在提升語義理解和自定義響應的效果上窿锉。
關(guān)于會話式的用戶界面,外界的炒作已經(jīng)風生水起膝舅。許多設(shè)計師也已經(jīng)認為CUI就是Web表單的未來嗡载。而微信的成功似乎更是提供了充足的證據(jù)。然而仍稀,正如Yunnoo Cheng和Jakob Nielsen所指出的洼滚,微信在用戶體驗上的核心優(yōu)勢在于其簡潔的圖形用戶界面上,而非會話式的用戶界面技潘。
實際上遥巴,CUI面臨許多可用性問題千康,包括:缺乏可發(fā)現(xiàn)性和完成路徑任意性。其同質(zhì)性不會成為表單設(shè)計的未來挪哄,但它確實可以成為許多聊天應用程序的未來——它們已經(jīng)圍繞這種方式收集用戶的輸入了吧秕。
我期待在未來能有融合了CUI與豐富的圖形界面的下一代設(shè)計方案盡快出現(xiàn)琉闪。 不妨來思考迹炼,微型的嵌入式應用程序可能基于用戶的輸入信息出現(xiàn),進而喚醒更大的應用程序颠毙,也許其本身就獨立于聊天框存在斯入。又或者,當用戶在應用程序中迷失時蛀蜜,可以使用CUI來提供幫助刻两。要獲取更多的信息,不妨閱讀下這篇關(guān)于CUI的未來的文章滴某。
隨著數(shù)據(jù)輸入的標準化磅摹、OCR功能的增加,以及軟件自動化手工操作的過程霎奢,許多表單形式將變得過時户誓。 但是無論如何,一個用戶界面仍然是不可缺少的幕侠。 我謹希望本文總結(jié)的這些不同的表單形式能夠幫助您構(gòu)建更好的應用程序帝美。
作者:三達不留點gpj
鏈接:http://www.reibang.com/p/a83b05ec797b
來源:簡書
簡書著作權(quán)歸作者所有,任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處晤硕。