在線咨詢表單設計圖(在線咨詢表單設計圖怎么做)
本文目錄一覽:

表單如何制作
在線表單是用戶可以通過瀏覽器向服務器端提交信息的功能,如我們常用的用戶注冊、在線聯系、在線調查表等都是在線表單的具體應用形式。在網頁的HTML代碼中,表單的內容位于標簽之間。在網絡營銷中,在線表單與電子郵件一樣可以作為一種在線顧客服務手段。在線表單的作用
在線表單的作用與Email類似,顧客無需利用自己的電子郵件發送信息,而是通過瀏覽器界面上的表單填寫咨詢內容,提交到網站,由相應的顧客服務人員處理,由于可以事先設定一些格式化的內容,如顧客姓名、單位、地址、問題類別等,通過在線表單提交的信息比一般的電子郵件更容易處理,因此有為數不少的網站采用這種方式。
從功能上說,在線表單和電子郵這兩種常用的在線聯系方式都可以實現用戶信息傳遞的目的,但從效果上來說卻有著很大的區別,但如果處理不當,在線表單可能會存在很大的潛在問題,因此應該對此給予必要的重視。
作為市場、運營人員,相信大家對表單工具都不陌生,但如果你還認為表單工具只是做信息搜集、問卷調查時才會用到,那你就大錯特錯了。近兩年,國內涌現出不少具有創新性的表單工具,比如為用戶提供CRM解決方案的麥客,滿足商家訂單支付需求的金數據,人人秀將這些表單移植到h5頁面中,推出了在線表單插件,方便用戶在線使用,并且為企業提供更多創意、新穎的營銷玩法。
制作在線表單的步驟
一、創建姓名框
首先打開人人秀制作頁面,并選擇好背景或者模板。
選擇屏幕右側的表單按鈕,彈出選項欄,在彈出欄中我們可以看到輸入框、單選、下拉菜單等一共14種表單類型和單頁模板的鏈接按鈕。我們現在需要姓名輸入框,鼠標左鍵點選輸入框。
選中我們添加的輸入框,在右側可以調節輸入框類型,點擊類型下拉菜單,并選擇姓名。因為姓名是每個用戶的基礎信息,我們必須獲得,所以勾選必填。然后把輸入框調整到一個合適的位置。
二、創建手機框
再次創建一個輸入框,將類型選擇為手機,并調整至合適位置。
這樣,人人秀系統就會知道您所需要的數據類型是手機號碼,并自動幫您過濾部分虛假手機號。如果您需要郵箱賬號,也可以選擇郵箱,人人秀系統也會自動幫您識別用戶填寫內容是否為有效的郵箱格式。
因為每個手機號或郵箱號都只能對應一個有效用戶。所以,您需要在右側勾選唯一。這樣,當有人重復填寫手機號碼時,就會得到人人秀的提醒,并禁止他填寫此號碼。
如果您需要所有的人都填寫自己的手機,那么需要勾選唯一上方的必填。
三、創建選擇框
獲得用戶姓名以及聯系方式后,我們需要獲得一些其他信息,比如性別、職業等。所以我們需要再次點選表單按鈕,根據您的需求選擇單選、多選、下拉菜單、多級下拉等類型的表單。
FineReport怎么進行表單設計 FineReport的表單設計簡單示例
不同于普通報表設計,表單設計擁有很多普通報表設計無法企及的優勢,如下:
整體性:普通報表是一個整體,無法實現局部刷新,表單是由各個組件組件,可以實現組件內刷新,即局部刷新;
自適應:普通報表無法實現自適應,表單可以完美的實現自適應,更好的支持移動端的使用;
控件:普通報表實現參數查詢,只能將控件添加到參數面板中,表單不僅可以在參數面板中添加控件,同時還可以單獨使用控件,實現數據的過濾;
聯動:普通報表中單元格或圖表無法直接與單元格實現聯動,表單卻可以實現報表塊或圖表塊與報表塊的聯動。
打開設計器,點擊文件新建表單,即可新建一張表單,如下圖:
表單設計的一般步驟如下圖所示:
新建表單:FineReport支持新建工作薄,即普通cpt模板,還支持新建表單,兩種設計模式;
拖入組件:FineReport表單支持多種不同的組件類型,包括報表、參數、圖表和控件,后續詳細介紹;
定義數據集:定義各個組件數據來源,與普通模板的數據來源一樣,圖表組件數據即可來源于數據集,也可來源于單元格
設置表單樣式:即設置表單的顯示樣式,詳細請查看表單樣式
表單設計2:表單的基本要素
上一篇文章我們講到了表單設計的基本原則,這一篇我們來了解表單的基本要素。我們知道每個表單至少都有三個基本要素:標簽、輸入框和動作。標簽用來提出問題,輸入框用來填寫答案,動作則用來提交答案。每一個要素的設計好壞都會對表單產生影響。下面我們詳細說明:
標簽應當采用簡潔易懂的語言來提出問題,以便于回答。那在布局上標簽是左對齊,右對齊,還是頂對齊?— —答案是根據需求而定。
這并不是一句廢話,之前的文章中提過,脫離了業務需求和用戶需求的設計是沒有意義的,需求不同對表單的設計要求也不一樣。比如:有的表單希望用戶在最短時間內填完,而有的表單希望降低用戶的填寫速度,以此來讓用戶對每一個問題都能夠深思熟慮的作答。
下面我們來看看標簽的不同對齊方式都有哪些優缺點及其適用場景。
下圖是網易云課堂申請開課的表單,其標簽為左對齊標簽
左對齊標簽的優點:
(1)容易瀏覽
標簽左對齊更方便用戶瀏覽,用戶只需要上下閱讀標簽便可快速瀏覽表單,而不會被輸入框打斷;
(2)占用的垂直空間較少
由于標簽與輸入框在同一行,在頁面中占用的垂直空間相對更少;
左對齊標簽的缺點:
填寫速度最慢
左對齊標簽與輸入框之間的間距由最長的標簽決定,這就導致部分較短的標簽和輸入框之間的距離較大,用戶將標簽和對應輸入框聯系起來的時間也就稍微長一些。
左對齊標簽的適用場景:
雖然左對齊標簽是3種方式中填寫速度最慢的,但完成時間長并不一定是壞事。如果你希望用戶仔細考慮表單中每個問題和答案時,左對齊標簽是個好辦法。
而當你選擇采用左對齊標簽時,你可以讓標簽長度盡量保持一致,來避免瀏覽不方便這一問題。
另外,如果表單中既有必填項也有選填項,而你想讓用戶能夠很方便的整體瀏覽表單問題時,也可以采用左對齊標簽。
下圖是騰訊課堂申請開課的表單,標簽采用了右對齊的方式。
右對齊標簽優點:
(1)輸入框與標簽相鄰
標簽與輸入框相鄰,使用戶能很好的將二者聯系在一起,從而更快速的回答問題。采用標簽右對齊方式設計的表單其完成速度是3種方式中居中的一個。
(2)占用的垂直空間較少
由于標簽與輸入框在同一行,在頁面中占用的垂直空間相對更少;
右對齊標簽缺點:
表單的可讀性降低
由于大部分人的瀏覽習慣是從左到右,所以左側不齊的話,用戶的視線需要來回移動,降低了整體表單的瀏覽效率。如果標簽文字折行的話,效率會更低。
(這里需要注意,整體瀏覽效率與表單完成率不是一個概念,整體瀏覽效率可以理解為表單的可讀性,表單完成率可以理解為完成表單所需的時間)。
右對齊標簽的適用場景:
如果希望用戶快速完成表單填寫,且占用更少的垂直距離時,可以采用右對齊標簽,但是要注意,不要讓標簽文字折行而影響表單可讀性。
下圖是藍湖網站意見反饋頁面,是一種頂對齊標簽方式的表單。
頂對齊標簽的優點:
(1)完成表單所需時間最短
頂對齊標簽與輸入框之間的位置緊密相鄰,使表單填寫變得很快,而且用戶的瀏覽順序是一直向下的,使得表單有清晰的完成路徑。
(2)橫向空間可延伸
由于標簽和輸入框是垂直排列的,這樣在橫向上就有充足的空間,標簽文字也可以有更大的擴展性。
頂對齊標簽的缺點:
占用較大的垂直空間
相對于前2種方式,頂對齊標簽會占用額外的垂直空間。
如果你選用了頂對齊標簽的設計方式,那么要注意采用合適的垂直間距,最好使用輸入框50%-75%的高度作為相鄰輸入框的間距。
頂對齊標簽的適用場景:
如果希望用戶最快速的完成表單,或者表單的標簽很長(如英文標簽),希望在橫向上有更大的擴展性且垂直方向不受限制時,可以采用頂對齊標簽。
標簽的布局除上述三種外,還有輸入框內標簽和混合對齊標簽。
輸入框內標簽適用于表單非常短,或屏幕空間極度有限的情況。如下圖是新浪微博未登錄時的首頁,其中登錄注冊表單只占了很小的部分,所以采用了輸入框內標簽的方式。
如果你選擇使用輸入框內標簽,需要注意以下幾點:
(1)當焦點定位在輸入框時,標簽不要立即消失,而要保證用戶能夠看到問題(標簽內容);
(2)當用戶輸入時,標簽應該消失,而不要成為答案的一部分;
(3)輸入框內標簽更適合只有一個輸入框(比如搜索)或者用戶對幾個輸入框的問題非常熟悉的表單(比如登錄注冊);
(4)如果表單較長,不建議使用輸入框內標簽。因為用戶會忘記要回答的是什么問題,而且填寫完表單再檢查時也會因為看不見問題而無法核對;
還有一種布局是混合對齊標簽,我們是不建議使用的。因為混合對齊的方式瀏覽起來很不方便,也會破壞用戶完成表單的明確路徑。
常見的輸入框類型有以下幾種:
文本框: 允許用戶輸入任意數量(或限定數量)的字符;
單選框: 允許用戶從2個或多個選項中選擇一個,由于選項之間互斥,因此建議有默認選項。當選項不多或希望將選項全部展示出來時,建議使用單選框;
使用時應當保證點擊單選框或者標簽都能選中。
復選框: 允許用戶選擇一個或多個,或用于選擇“是”或“否”的問題。
使用時應當保證點擊復選框或者標簽都能選中;
下拉菜單: 允許用戶從2個或多個選項中選擇一個。適用于選項較多時使用,但是要注意控制選項數量。
輸入框不只被用來填寫答案,其長度對用戶填寫答案還能起到暗示作用。
如下圖所示:“手機號碼”、“輸入短信驗證碼”和“簡介三個標簽對應的輸入框長度是不一樣的,因為它們對答案的長度要求不同。
所以輸入框的長度對人們填寫答案時起到了有效的暗示,我們在設計時,如果答案有固定的規則(如郵編、電話號碼、短信驗證碼、郵箱,備注、簡介等),可通過長短不同的輸入框來暗示用戶。
如果答案沒有規則無法暗示,則輸入框應保持長度一致,足夠填寫答案即可,避免長度不一導致用戶混亂。
動作是完成表單的關鍵一步,因為我們填寫完表單之后要“提交”。我們可以把一些重要的行為視為“主動作”,如:提交、保存、下一步等。另一些與完成表單填寫的目標相悖的行為可以視為“次動作”,如:取消、撤銷、返回等。
還有一些在表單填寫過程中的動作可以視為“進程中動作”,如:查詢、上傳附件等。
在動作設計時,需要注意以下幾點:
表單中動作的數量不宜過多,不然會讓用戶無從選擇。如果表單中既有主動作又有次動作,那么應該從視覺上區分。
表單設計應當為用戶提供明確的完成路徑,減少填表所花費的時間,上文的可用性測試實驗也驗證了主動作與輸入框對齊是表單完成最快的方案。
這里需要說明,由于PC端屏幕可視區域較大,因此信息的展示方式是重要考慮的因素,應該便于用戶瀏覽,方便用戶在復雜的信息中快速找到需要的信息并完成操作。而在手機端,我們發現大部分主動作放在了右側,是因為手機端屏幕有限,信息已經是極度精簡后的內容,此時在有限的空間內方便操作則變得更加重要。
進程中的動作應該讓進程可視化。當后臺正在處理用戶的某一“動作”時,用戶是看不到的,所以我們最好能給予用戶反饋,告知用戶我們接到了指令并且動作正在進行,這樣能夠減少用戶的焦慮,也可避免表單重復提交。
下圖是郵箱上傳附件的截圖:
用戶選擇附件后能夠看到當前上傳的進程,這樣既給了用戶成功反饋,又能減少用戶等待時的焦慮。
還有一種方式是把進程直接放在按鈕上顯示。如下圖,正在登錄和獲取驗證碼按鈕,用戶點擊按鈕后有一個后臺處理信息的過程可視化。將進程放在按鈕上能夠給予用戶最輕量的提示,同時不會占用多余的空間。
關于動作按鈕,還有一種常見的方式是禁用主動作,就是將主動作按鈕置灰不可點擊,只有當用戶完成表單后才可點擊。這時需要注意,后臺要對每個問題的答案進行校驗且要知道什么時候用戶回答完所有問題。
關于表單的基本要素就寫到這里。都是我在工作中的積累和總結。其實,表單設計還有很多細節,且不同的場景和目標對表單的要求也各不相同,我們要不斷的積累,尋求更好的解決方案,做出更符合產品和用戶需求的設計。
最常見也最基礎的表單設計-下拉列表
前三篇說了表單中的"輸入框"、“單選按鈕”、“復選框”在線咨詢表單設計圖,那這次就說下拉列表。下一篇說文本域和按鈕。
眾所周知沒有任何人,愿意填寫表單,輸入框讓過程看起來會變得很復雜。那此時就會用到另外一個組件就是 - 下拉列表。
在線咨詢表單設計圖他所包含的是選項,因為不需要讓用戶去進行輸入,所以就可以防止用戶在輸入時帶來錯誤這問題了。
實際在設計中,下拉列表也有很多的“弊端”,所以需要嘗試不同的方法去解決問題。
· 下拉列表組成
·?下拉列表步驟
·?下拉列表提示也很重要
·?合理排列下拉選項
·?下拉列表選項數量
·?下拉列表還能做的更多
·?簡單的數字可以輸入
· 選日期沒那么麻煩
·?步進器原則
·?步進器組成
·?滑塊原則
·?滑塊的細節
·?最后
下拉列表由標簽[Label]、下拉的列表和選項組成,下拉列表常見的選擇為單選。
呼出下拉列表的步驟在線咨詢表單設計圖:點擊下拉列表控件→展開列表→滾動掃描列表選擇選項關閉→關閉下拉列表。
在輸入框中有個元素叫暗提示[placeholder],作用是在用戶填寫信息時提供幫助,這條原則也同樣適用于下拉列表。這個提示需要簡短準確且告訴用戶需要選什么,且在展開菜單之后依舊能夠看得到選的是什么。
例如上圖:“出發日期”就比“請選擇”要好的多。
可以根據以往用戶的選擇數據進行分析,嘗試將選擇較多的選項放置在優先級靠前的位置。
選項較多時可以嘗試只列出幾個用常選的,好處在于90%的用戶會立即選擇滿足自己目的的選項,還有10%的人可以選擇“其他”(可以嘗試加入一個下拉選擇或輸入框再滿足目的)。雖然這樣做會忽略10%的用戶,但這樣優先級排序能夠提高90%用戶體驗。
90%以上的用戶最常選的選項,就可以作為默認選項了。
避免在列表中放置太多的選項,當下拉列表中的選項超過15個時,他們將變得很難掃描。在Web端用戶需要不斷的滾動鼠標才可以找到滿足自己目的的選項。再說在移動端有限的屏幕空間內滾動,體驗可以說是非常不好了。
假設我們現在有個下拉列表,是需要收集用戶的國家信息。一眼就能看出這個下拉列表是按照拼音首字母進行排序的,那“阿爾巴尼亞(A)”是排在首位的。當我要選擇“中國(Z)”時候,就會很費力了。
當我要選擇“中國”時在線咨詢表單設計圖?那我很清楚我需要選擇的是什么,那就可以考慮把下拉選擇改變成自動填充選擇的列表?那這樣只需要通過鍵盤輸入一個“中”,就過濾出包含“中”(或者zhong)的候選選項了。通過簡單的輸入配合去提高選擇的效率。
選項太多需要避免使用下拉列表,選項太少也避免使用下拉列表。
之前在 《最常見也最基礎的表單設計-單選按鈕》中說當2≤選項個數(單選)≤7時, 當下拉列表中選項少于7個時,可以考慮使用單選按鈕了。
使用單選按鈕,用戶只需通過掃描就可以了解這問題有幾個選項和每個選項是什么,從而可以去除點擊觸發下拉框的動作。
同樣如果是簡單的問題,需要回答(是/否)或(打開/關閉)時,就避免使用下拉列表了,使用復選框和開關。
通過程序的幫助去減少選擇次數。
例如:如果在充值手機號必須需要用戶選擇運營商,當用戶輸入手機號后,那下拉列表就可以幫助用戶選擇運營商。如果在支付綁卡時需要用戶選擇銀行,當用戶輸入了銀行卡號后,下拉列表就可以幫助用戶選擇發卡銀行和卡片類型了。對于不同的下拉選擇會有著成千上萬種的設計方法。
在移動端,我們也可以通過“調用位置”這個系統硬件功能來預填選項給到用戶。
下拉列表中選項是簡單數字的話,下拉列表相比輸入費力度更高。可以考慮配合數字鍵盤輸入,這樣比下拉選擇更簡單。根據場景的不同有著不同的解決方法,適合 精確數值小范圍調整 可以考慮使用步進器;那 不精確數值大范圍調整 可以考慮使用滑塊;選日期可以使用日期選擇器。
選擇日期肯定會也經常遇見,如果使用多個(年/月/日)下拉列表給用戶帶去的是非常不好的體驗。那我們可以嘗試去使用日期選擇器(date picker)。
步進器[Stepper]由增加按鈕、減少按鈕和按鈕控制的數值組成。每次點擊增加按鈕(或減少按鈕)數字去增加(或減少)固定的數量。比方用戶更喜歡在電商App里用步進器選擇商品數量,此時步進器比起下拉列表更直觀,使用起來也就更輕松了。
需要注意最大限制和最小限制,在最大或最小限制時,加入禁用增加(減少)按鈕。如果能通過數據分析(90%用戶經常選擇的)預填一個默認值是提升效率的辦法。
試想:步進器的默認值離用戶預期的數值越遠,點擊的次數也就越多,那完成選擇的效率也就越低。當默認值無法滿足(10%用戶經常選擇的),還可以把數值顯示改成輸入框,再配合上數字鍵盤輸入去做精確的修改。
常見的滑塊[Sliders]由可以拖動的按鈕、軸、最大數值、最小數值組成。和單選按鈕一樣,滑塊這個行為受現實生活的行為所影響。
場景:我在聽歌聲音有點輕,我想讓聲音響點。我使用滑塊配和聽覺在0%-100%這個區間內調整音量,而不是我要75%的音量這個精確值,這個范圍內(近似值)就行,那此時滑塊比起下拉列表使用起來更簡單了。
根據不同的設計場景,精確值可能是很重要的,那滑塊也可以滿足。加入一個數值顯示,數值隨著每次滑動改變。同時數字也當可以點擊變成輸入框,再配合上數字鍵盤輸入去修改滑塊位置。
在移動端,建議把滑塊的最大數值、最小數值的位置放置在上方。那在使用時永遠可以保持可見。如果在下方就容易被手指遮蓋。
拖動時,使用動效做加持,給與用戶交互的反饋
選擇比輸入的效率高,但也不是說什么時候都可以使用下拉列表。根據不同的場景利用他們(下拉列表/步進器/滑塊)的原則做出變形,選擇也可以變很不一樣。例如:可以在下拉列表中把相關的選項分組展示,也可以讓下拉列表變形為多選控件等。方便好用的選擇和表單目的一樣:表單只是個收集用戶信息的方式,用戶需要的是高效愉快的完成填寫。
在上面提到一個日期選擇器(date picker)沒往細里說,之后在另外說一下。
以上的觀點從我個人總結出發,雖說文筆拙劣,但是如果你有不同的意見,歡迎交流~
如果你看到這,下面就是其他組件的文章(廣告)了:
《最常見也最基礎的表單設計-輸入框》
《最常見也最基礎的表單設計-單選按鈕》
《最常見也最基礎的表單設計-復選框》
能放三條廣告,心里覺得超爽了...
版權聲明:本文內容由網絡用戶投稿,版權歸原作者所有,本站不擁有其著作權,亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容,請聯系我們jiasou666@gmail.com 處理,核實后本網站將在24小時內刪除侵權內容。
版權聲明:本文內容由網絡用戶投稿,版權歸原作者所有,本站不擁有其著作權,亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容,請聯系我們jiasou666@gmail.com 處理,核實后本網站將在24小時內刪除侵權內容。