? ? ? 昨天遇到了恩師陳教官，聊了一下移動端在線考試的話題济丘，他提到想優(yōu)化一下培訓(xùn)時的測試谱秽，希望能做出一個“駕考寶典”式手機考試工具。我一聽就來勁了摹迷，難得遇到喜歡探索培訓(xùn)新事物的良師益友疟赊，于是立馬推薦了幾個方案，其中一個成本最低的方案就是用表單工具設(shè)計峡碉。

? ? ? ?當(dāng)晚近哟，我在宿舍用表單做了兩個小模板，一個是測評工具鲫寄，即可用于培訓(xùn)測試的山寨“駕考寶典”吉执，另一個是評選工具，可用于活動投票或內(nèi)部講師打分地来，今天正好借助這兩個模板講一講進(jìn)階版表單制作戳玫。

? ? ? 先看案例，請點擊藍(lán)色標(biāo)題進(jìn)入鏈接進(jìn)行體驗未斑，要答題才會看到效果哦：

? ? ? 案例1 ?讀書活動知識競賽復(fù)習(xí)自測題

? ? ? 案例2 ?格力五星奮斗者評選

案例1——讀書活動知識競賽復(fù)習(xí)自測題

? ? ? 這個模板是用金數(shù)據(jù)做的咕宿， 涉及的要點有3個：表單標(biāo)簽的選擇、UI設(shè)計、表單規(guī)則荠列。

? ? ? 1类浪、表單標(biāo)簽的選擇

? ? ? 要實現(xiàn)案例1的“自測題”功能，用到的標(biāo)簽有選擇（標(biāo)題+選項）肌似、分節(jié)（標(biāo)題+提示）费就、提交按鈕，標(biāo)簽種類比較單一川队，所以內(nèi)容的填充不復(fù)雜力细，只需要按部就班地編輯。

? ? ? 但是如果考試題型較多固额，則需要用到一些別的標(biāo)簽眠蚂，例如下拉框、矩陣填空等斗躏。操作方法很簡單逝慧，點擊選擇標(biāo)簽，然后編輯標(biāo)簽文字內(nèi)容和選項模板即可啄糙。

? ? ? ?金數(shù)據(jù)常見的表單標(biāo)簽如下圖所示笛臣，非常豐富，絕對能滿足日常所需隧饼，當(dāng)然沈堡，組合使用口味更佳哦。

? ? ? 2燕雁、UI設(shè)計

? ? ? UI（user interface）是表單給人的第一印象诞丽，在一定程度上決定了受眾會不會好好填表，所以做一個好的UI非常重要拐格。

? ? ? 這個案例是用空白模板直接新建的僧免，我在網(wǎng)上找了一張書籍的圖片做頁眉填充，背景采用和圖片相似色系的系統(tǒng)背景捏浊，這樣避免了純色的單調(diào)和頁眉圖片的突兀猬膨。在文字的處理上，采用咖啡色作為主題色呛伴，再調(diào)整大小勃痴，讓整體趨于和諧。

? ? ? 3热康、表單規(guī)則

? ? ? 這是實現(xiàn)選擇答案后出現(xiàn)提示的關(guān)鍵沛申，也是這套“答題系統(tǒng)”的核心所在。

? ? ? 內(nèi)容區(qū)域完成編輯后姐军，在“規(guī)則”欄選擇“字段規(guī)則”铁材，針對每個問題的每個選項分別設(shè)置對應(yīng)規(guī)則（本質(zhì)其實就是超鏈接）尖淘，若問題較多的話設(shè)置起來有點麻煩，但設(shè)置完成后效果還是不錯的著觉。用字段規(guī)則可以實現(xiàn)不同選項出現(xiàn)不同結(jié)果的提示村生，也就實現(xiàn)了答題后顯示是否正確以及出現(xiàn)答案解析的功能。

案例2——格力五星奮斗者評選

? ? ? 這是我YY出來的一個評選饼丘，僅作模板使用趁桃。制作工具是兔展，涉及的要點依然是3個：H5排版肄鸽、UE優(yōu)化卫病、表單按鈕使用。

? ? 1典徘、H5排版

? ? ? H5可以理解為手機上的PPT蟀苛，排版思想也和PPT排版類似，只是由橫向變?yōu)榭v向逮诲，而且動畫更加豐富和重要帜平。用H5做表單的好處在于可以將表單的背景環(huán)境（situation）生動地演繹出來，讓受眾能夠更好地理解將要填寫的表單梅鹦。

? ? ? 和PPT制作一樣罕模，事先準(zhǔn)備好素材（圖片、文案）帘瞭，然后再根據(jù)你設(shè)置的故事，將素材以恰當(dāng)?shù)姆绞教畛溆谄渲休锛ィ僬{(diào)整動畫即可蝶念。需要注意的是，由于目的是讓受眾填表芋绸，H5的引入部分不能太長媒殉，否則就喧賓奪主了。

? ? ? 2摔敛、UE優(yōu)化

? ? ? 其實用H5做背景導(dǎo)入就是UE（user experience）優(yōu)化的一種廷蓉，這里想要說明的是細(xì)節(jié)的改善。從受眾的角度考慮马昙，他們既然要填這個表桃犬，首先需要知道填表的意義所在（H5故事導(dǎo)入），知道怎么填（適當(dāng)?shù)奈淖终f明行楞，文字顏色大小合適）攒暇，填寫時的注意事項（提交提醒，提交之后的提示語提醒）子房，填寫完成后的感謝形用。做好這些就已經(jīng)脫離屌絲表單的行列了就轧。

? ? ? 3、表單按鈕的使用

? ? ? 這個案例是一個評分案例田度，我采用的是星級評定妒御，其實還有一些可替代的個性化方式，比如點贊镇饺、直接點選等乎莉，雖然H5中的表單種類較少，但可以適當(dāng)組合兰怠，經(jīng)過組合的表單會非常新穎有趣梦鉴，吸引受眾。操作方法是點選表單工具揭保，選擇表單按鈕肥橙，編輯相關(guān)內(nèi)容。

? ? ? 除此之外秸侣，利用H5平臺還可以實現(xiàn)交互的效果存筏，做法是設(shè)置一個超鏈接，調(diào)整透明度為100%味榛，與按鈕組合椭坚，就可以愉快地跳來跳去了。如果愿意花時間進(jìn)一步優(yōu)化搏色，還可以自制H5小游戲善茎，以游戲的形式導(dǎo)入表單，這是高階的玩法了频轿。

? ? ? 介紹了半天垂涯，其實都是形式上的東西。表單要想吸引人航邢，關(guān)鍵還在于表單內(nèi)容的撰寫耕赘，有優(yōu)質(zhì)內(nèi)容，永遠(yuǎn)不怕沒有受眾膳殷。