【微信表單制作】制作一個(gè)用戶友好型表單，用它就夠了！

【微信表單制作】制作一個(gè)用戶友好型表單，用它就夠了！

作為負(fù)責(zé)網(wǎng)頁中數(shù)據(jù)采集功能的頭號猛將，表單扮演著十分重要的角色。當(dāng)然，表單不僅僅是網(wǎng)頁設(shè)計(jì)中的常見元素，也和企業(yè)乃至個(gè)人都有著休戚相關(guān)的聯(lián)系。因?yàn)楸韱斡兄鴱?qiáng)大的數(shù)據(jù)收集/采集功能。注冊、下單、購買，這些日常生活中經(jīng)常見行為，背后都有表單的影子。既然有著數(shù)據(jù)采集的功能，那當(dāng)表單撞上日活超10億的微信會(huì)擦出什么火花呢？那今天就和大家說說微信表單制作的一些事兒。

從簡單的電子郵件搜集和訂閱，到注冊、下單、購買，表單一直伴隨著網(wǎng)頁而存在。涉及到數(shù)據(jù)收集時(shí)，我們大多數(shù)情況下也會(huì)采用表單。因此，創(chuàng)建一個(gè)用戶友好型表單對表單的填寫效率至關(guān)重要。

那如何制作一個(gè)完美級的用戶友好型微信表單呢？我們不妨來看看人人秀H5制作工具的在線表單功能。

人人秀H5制作工具——在線表單

在H5頁面中，一個(gè)簡易的表單通常由姓名、聯(lián)系方式、和表單提交3部分組成；復(fù)雜的表單還可以包括單/復(fù)選框、評分、詳細(xì)信息等更多內(nèi)容。更加高級的表單需要和問卷調(diào)查功能相互配合，二者結(jié)合能夠做出十分復(fù)雜，貼近現(xiàn)實(shí)調(diào)查表單的一份H5表單。

如何制作表單

根據(jù)需求的不同，表單的制作方法也不盡相同，不過最基礎(chǔ)的部分卻是相通的。下面請跟著我來一起做一份表單。如果您沒有時(shí)間一步一步看下去，請直接看最后一步表單模板一鍵套用。

主要步驟

一、創(chuàng)建姓名框

二、創(chuàng)建手機(jī)框

三、創(chuàng)建選擇框（以下拉菜單為例）

四、制作評分系統(tǒng)

五、短信驗(yàn)證

六、提交按鈕

七、表單美化

八、后臺查詢數(shù)據(jù)

完成效果

一、創(chuàng)建姓名框

首先打開您的人人秀制作頁面，并選擇好背景或者模板。

選擇屏幕右側(cè)的表單按鈕，彈出選項(xiàng)欄，在彈出欄中我們可以看到輸入框、單選、下拉菜單等一共14種表單類型和單頁模板的鏈接按鈕。我們現(xiàn)在需要姓名輸入框，鼠標(biāo)左鍵點(diǎn)選輸入框。

選中我們添加的輸入框，在右側(cè)可以調(diào)節(jié)輸入框類型，點(diǎn)擊類型下拉菜單，并選擇姓名。因?yàn)樾彰敲總€(gè)用戶的基礎(chǔ)信息，我們必須獲得，所以勾選必填。然后把輸入框調(diào)整到一個(gè)合適的位置。

二、創(chuàng)建手機(jī)框

再次創(chuàng)建一個(gè)輸入框，將類型選擇為手機(jī)，并調(diào)整至合適位置。

這樣，人人秀系統(tǒng)就會(huì)知道您所需要的數(shù)據(jù)類型是手機(jī)號碼，并自動(dòng)幫您過濾部分虛假手機(jī)號。如果您需要郵箱賬號，也可以選擇郵箱，人人秀系統(tǒng)也會(huì)自動(dòng)幫您識別用戶填寫內(nèi)容是否為有效的郵箱格式。

因?yàn)槊總€(gè)手機(jī)號或郵箱號都只能對應(yīng)一個(gè)有效用戶。所以，您需要在右側(cè)勾選唯一。這樣，當(dāng)有人重復(fù)填寫手機(jī)號碼時(shí)，就會(huì)得到人人秀的提醒，并禁止他填寫此號碼。

如果您需要所有的人都填寫自己的手機(jī)，那么需要勾選唯一上方的必填。

三、創(chuàng)建選擇框

獲得用戶姓名以及聯(lián)系方式后，我們需要獲得一些其他信息，比如性別、職業(yè)等。所以我們需要再次點(diǎn)選表單按鈕，根據(jù)您的需求選擇單選、多選、下拉菜單、多級下拉等類型的表單。

這里我們以獲得用戶所在部門為例，選擇下拉菜單，并調(diào)整選框位置。更改標(biāo)題為“部門”。

選擇選項(xiàng)中的設(shè)置按鈕，可以更改下拉選項(xiàng)。點(diǎn)擊添加按鈕添加選項(xiàng)，點(diǎn)擊已添加選項(xiàng)后面的刪除按鈕可以刪除它。我們添加5個(gè)選項(xiàng)，并分別填寫“人事”、“財(cái)務(wù)”、“技術(shù)”、“生產(chǎn)”、“其它”作為5個(gè)下拉選項(xiàng)。

如果我們還需要反饋意見或個(gè)人簡介等無法使用選擇獲得的信息，可以再次添加一個(gè)輸入框，將鼠標(biāo)放在輸入框的邊界可以調(diào)節(jié)大小。然后更改標(biāo)題，并調(diào)整至合適位置，選擇類型為文本。這里我們想要獲得用戶的個(gè)人簡介，那么可以更改標(biāo)題為“個(gè)人簡介”。

四、制作評分系統(tǒng)

五、短信驗(yàn)證

六、提交按鈕

七、表單美化

完成表單的基本功能后，我們需要對它進(jìn)行美化，使其更加符合我們的需求。在這里，我們將對表單的整體樣式做一個(gè)調(diào)整。

首先選擇您所創(chuàng)建的每一個(gè)表單分項(xiàng)，按住鼠標(biāo)左鍵拖動(dòng)它，將其調(diào)整至合適位置。

然后點(diǎn)擊右側(cè)彈出欄中的樣式選項(xiàng)，分別對顏色等屬性進(jìn)行調(diào)整。其中的透明度選項(xiàng)是文字透明度，而非表單透明度。

依次調(diào)整每一個(gè)表單，調(diào)整完后如圖所示。使用位置可以對表單的位置進(jìn)行細(xì)微調(diào)整。

接下來只需要點(diǎn)擊發(fā)布，就可以使用啦！

八、后臺查詢數(shù)據(jù)

發(fā)布成功后，如果有用戶填寫了您的表單內(nèi)容，您可以在個(gè)人中心看到用戶所填寫的資料，并對其進(jìn)行管理。鼠標(biāo)移動(dòng)到自己制作的H5上，點(diǎn)擊數(shù)據(jù)，即可查看。

無論是注冊流程、多屏分步表單，或者是單調(diào)的數(shù)據(jù)列表界面，表單都是數(shù)字產(chǎn)品設(shè)計(jì)中的重要組成部分。本文會(huì)探討表單設(shè)計(jì)的注意事項(xiàng)。記住這些只是通用規(guī)范，每條準(zhǔn)則總有例外。

下面分享一些表單設(shè)計(jì)中應(yīng)當(dāng)注意的事項(xiàng)。

注意事項(xiàng)1：表單應(yīng)該只有一列

多列布局會(huì)擾亂用戶垂直方向的視線移動(dòng)。

注意事項(xiàng)2：頂部標(biāo)簽

頂部標(biāo)簽的表單比左側(cè)標(biāo)簽有更高的完成率。頂部標(biāo)簽的表單也易于移植到移動(dòng)端。但是，對于有多種選擇項(xiàng)的大量數(shù)據(jù)列表而言，請考慮使用左側(cè)標(biāo)簽，因?yàn)樗鼈冊谝黄鸶子跒g覽，能夠減少高度，比頂部標(biāo)簽更貼心。

注意事項(xiàng)3：把標(biāo)簽與輸入框成組排列

把標(biāo)簽和輸入框貼近排列，確保項(xiàng)目之間留有足夠高度，防止用戶困惑。

注意事項(xiàng)4：避免全大寫標(biāo)簽

全大寫標(biāo)簽更難閱讀和瀏覽。

注意事項(xiàng)5：逐行說明錯(cuò)誤

告訴用戶哪里錯(cuò)了，說明原因。

逐行驗(yàn)證要在用戶填完一行之后進(jìn)行（除非填寫中驗(yàn)證更有幫助）

別在用戶打字的時(shí)候進(jìn)行逐行驗(yàn)證，除非這對他們有幫助——例如創(chuàng)建密碼、用戶名之類，或者字符數(shù)提示信息。

注意事項(xiàng)6：不要隱藏基本的幫助提示文案

盡可能直接展示基本的幫助提示文案。對于復(fù)雜的提示文案，可以考慮在輸入框激活時(shí)，展現(xiàn)在它旁邊。

讓表單變得有趣，就用人人秀H5制作工具——在線表單制作功能！

人人秀原創(chuàng)文章，如若轉(zhuǎn)載請注明出處：http://www.bydok.cn/content-wxbiaodanzz