13種面向復雜程序的表單設(shè)計樣式

從復雜的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)并注明出處晤硕。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末悼潭,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子舞箍,更是在濱河造成了極大的恐慌舰褪,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件疏橄,死亡現(xiàn)場離奇詭異抵知,居然都是意外死亡,警方通過查閱死者的電腦和手機软族,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進店門刷喜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人立砸,你說我怎么就攤上這事掖疮。” “怎么了颗祝?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵浊闪,是天一觀的道長恼布。 經(jīng)常有香客問我,道長搁宾,這世上最難降的妖魔是什么折汞? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮盖腿,結(jié)果婚禮上爽待,老公的妹妹穿的比我還像新娘。我一直安慰自己翩腐,他們只是感情好鸟款,可當我...
    茶點故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著茂卦,像睡著了一般何什。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上等龙,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天处渣,我揣著相機與錄音,去河邊找鬼蛛砰。 笑死罐栈,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的暴备。 我是一名探鬼主播悠瞬,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼涯捻!你這毒婦竟也來了浅妆?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤障癌,失蹤者是張志新(化名)和其女友劉穎凌外,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體涛浙,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡康辑,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了轿亮。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片疮薇。...
    茶點故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖我注,靈堂內(nèi)的尸體忽然破棺而出按咒,到底是詐尸還是另有隱情,我是刑警寧澤但骨,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布励七,位于F島的核電站智袭,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏掠抬。R本人自食惡果不足惜吼野,卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望两波。 院中可真熱鬧瞳步,春花似錦、人聲如沸雨女。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽氛堕。三九已至,卻和暖如春野蝇,著一層夾襖步出監(jiān)牢的瞬間讼稚,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工绕沈, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留锐想,地道東北人。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓乍狐,卻偏偏與公主長得像赠摇,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子浅蚪,可洞房花燭夜當晚...
    茶點故事閱讀 43,728評論 2 351

推薦閱讀更多精彩內(nèi)容