1. <form id="txfev"><source id="txfev"></source></form>

        <wbr id="txfev"></wbr>

      1. 重慶小潘seo博客

        當前位置:首頁 > 重慶網站建設 >

        重慶網站建設

        網頁設計表單制作代碼(附:優秀表單模板)

        時間:2020-09-16 20:00:07 作者:重慶seo小潘 來源:
        常見的表單設計背后藏著許多秘密,如何讓用戶快速準確的填寫表單,是本文在思考解決的問題。本文偏理論和實踐結果,實例較少,供大家參考和學習。 常見問題: 在設計表單時,你是否會有如下疑問或思考:誰會填寫表單?為什么要填寫?如果表單跨多個網頁,需

        常見的表單設計背后藏著許多秘密,如何讓用戶快速準確的填寫表單,是本文在思考解決的問題。本文偏理論和實踐結果,實例較少,供大家參考和學習。網頁設計表單制作代碼(附:優秀表單模板)常見問題:

        在設計表單時,你是否會有如下疑問或思考:誰會填寫表單?為什么要填寫?如果表單跨多個網頁,需要告訴人們當前處在哪一頁么?輸入框標簽應當頂對齊、右對齊還是左對齊?表單中如何使用智能默認選項?何時在表單中使用幫助文字?如何表示必填項?主動作和次動作有什么區別?(提交/保存/繼續、取消/重置)一、表單設計原則盡量減少痛苦,填寫過程盡量簡潔容易;說明完整填寫路徑,清晰地告訴人們如何填寫完成考慮情景,受眾群體、應用、業務確保一致溝通,保證客戶與公司只用一種聲音說話二、表單的組織花時間評估表單中的問題,去除不必要的問題;表單所提問題(標簽)應當盡量簡潔,如果人們誤解簡潔標簽,應當尋找使用自然語言澄清的機會;表單所提的問題可能來自不同的人或部門,確保表單統一口徑;可以將表單內容組織成邏輯組,有助于瀏覽和完成填寫;可以以對話的形式構建表單,主題自然間斷;表單包含大量問題,若干主題,需要多個網頁來組織表單;表單包含大量問題,一個主題,需要較長網頁來組織表單;表單填寫完成后提出可選問題,可能會獲得更多答案;應當采用最少的必要視覺信息來區分內容組;如果表單需要較長時間或查詢信息才能填寫,可采用起始頁說明(暫存)方式滿足;由始至終采用清晰的瀏線和有效視覺引導表單填寫(清晰唯一路徑);如果表單分為多個已知有序網頁,可以采用進程指示來傳達范圍、狀態和位置等信息。三、標簽對齊每個表單至少都有三個基本要素:標簽、輸入框和動作。

        標簽負責提出問題,輸入框供給人們填寫信息,而動作允許人們提交答案,還有一類——無標簽表單。1. 頂對齊標簽頂對齊標簽由于輸入框和標簽的位置非常近,處理起來毫不費力,所以填寫整個表單很快很容易,是最能減少填寫時間的方式。網頁設計表單制作代碼(附:優秀表單模板)頂對齊標簽還提供了大量的橫向空間,可以擴大或收縮標簽文字,而不會對整個頁面的布局產生負面影響。大量橫向空間可用于以多種方式組合相關輸入框。

        但是,頂對齊標簽也會占用額外的垂直空間,若可使用的垂直屏幕空間較小,應當謹慎使用頂對齊標簽。

        頂對齊標簽還應當采用合適的垂直間距。表單輸入框之間的間距太少或太多都會阻礙移動。一般而言,最好使用輸入框50%~75%的高度作為相鄰輸入框的間距。2. 右對齊標簽右對齊標簽同樣有輸入框與標簽相鄰的有點,因此也能快速填完且減少垂直屏幕空間的占用,但是速度沒有頂對齊快。

        由于右對齊布局造成左側參差不齊,會降低快速瀏覽表單問題的效率,還會產生靈活性問題,如果標簽需要兩行字,瀏覽表單會更加困難。網頁設計表單制作代碼(附:優秀表單模板)3. 左對齊標簽如果人們不熟悉表單要收集的數據,或者問題無法分成易處理的內容組,左對齊標簽瀏覽表單問題會更容易,只需上下瀏覽標簽左欄,不會被輸入框打斷。網頁設計表單制作代碼(附:優秀表單模板)三種方案中,左對齊表單填寫速度最慢,人們一般將左對齊布局中的標簽與相應輸入框聯系起來,只是花費時間較長。

        但是,完成時間較長也不是壞事,也有適用場景。如果希望人們速度放慢,并仔細思考表單中的每個輸入框,特別是表單含有大量可選輸入框、類似“使用偏好”或者高級設置陌生數據時。4. 輸入框內的標簽如果屏幕空間寶貴,應當將標簽和輸入框組合成單一的用戶界面元素。光標放入輸入框時,標簽要迅速消失,以便用戶能輕松填寫。

        填寫輸入框時,輸入框內的標簽會消失,因此答案情境也會消失;如果忘記了要回答什么問題或者檢查答案時,體驗也是不好的。

        因此,如果表單較長、甚至中等長度,輸入框內標簽并不是好的解決方案。輸入框內標簽更適合用于只有一個問題(例如,搜索框)或者幾個輸入框的表單或者問題非常熟悉的表單(例如,通訊錄)四、輸入框表單中何時使用文本框、復選框、單選按鈕、下拉菜單、列表框呢?輸入框的長度能提供有意義的暗示,幫助人們有效回答問題;若不需要暗示,輸入框的長度應當盡量保持一致,為答案提供足夠空間;盡量避免出現可選輸入框;標明表單中的必填項;如果答案明顯有多種格式,應當考慮使用彈性輸入框;確保彈性輸入框不會導致填寫簡單問題變得復雜。五、動作標簽列出表單要求人們回答的問題,輸入框讓人們填寫答案,完成表單的單一職責屬于動作。綠色標識主動作(成功),紅色標識次動作(未成功);盡量避免表單中出現次動作,應當提供完成表單的單一路徑;如果需要使用次動作,應當確保主動作和次動作視覺差異清晰;如果表單所提問題分布在多個網頁,主動作應當讓人們更接近完成表單,而次動作應當允許人們返回;主動作與輸入框對齊,能提供明確路徑完成表單;如果需要采用具有破壞性的次動作(重置或清除),應當提供簡便的撤銷方法;處理表單時,應當明確表達,避免重復提交;不要依賴幫助文字來提醒人們不要兩次點擊主動作,而應當通過禁用主動作按鈕來阻止;思考組合服務條款和主動作的機會,以確保法律要求合理化。六、幫助文字常見幫助文字是在標簽或輸入框旁增加幫助文字,告訴應該如何回答問題。

        幫助文字最合適解釋人們不熟悉的數據,例如,為什么要問這些問題、安全和隱私、建議回答問題的方式及說明可填項。如果人們知道問題的答案,但是不確定如何回答或為什么回答,可以考慮使用自動即時幫助系統;如果表單問題人們不熟悉或者復雜,而且同樣的人會多次使用,可以采用用戶激活的幫助系統;如果幫助內容很多,可以使用一致的幫助區域,不要使用即時幫助;圖標、鏈接或按鈕用于用戶激活的幫助文字觸發器,應放在標簽旁,不要放在輸入框旁;如果要求用戶填入敏感資料,考慮使用有操作含義的幫助文字,允許人們確認資料安全。七、即時驗證直接反饋有助于再次確保人們的回答有效。這種實時的溝通方式即為即時校驗(Inline Validation)??紤]使用即時驗證,以確認或者建議有效答案,并幫助人們在限制范圍內輸入(例如,銀行賬號);即時確認適用于錯誤率高、或者有特定格式要求;即時建議適用于有大量可供選擇有效答案的情況;即時質量指示條能引導人們回答復雜的問題;如果需要即時驗證答案,應當在人們輸入答案之后進行,不要在輸入過程中進行;校驗數據唯一也是這樣,需要等待輸入完成時校驗;如果輸入有限制,應當采用實時、動態更新的方法傳遞輸入限制。八、多余輸入/額外輸入通過恰當的設施滿足多數人需要的默認選擇,智能默認可以幫助人們回答問題;設置個性化默認選擇,客戶能更快完成表單,因為“答案”具有粘性;如果有可能,單選按鈕都應當設置成默認項;額外輸入可以提供更多的選項或者高級選項,滿足有需要的用戶,同時不妨礙不需要的用戶;根據客戶需求的優先順序,安排額外輸入;如果需要顯示大量額外輸入,可以考慮疊層方式代替即時顯示方式,避免網頁跳動用戶迷失方向??偨Y表單的設計方式多種多樣,不能完全按照設計規則來進行產品設計,需要具體分析應用場景,填寫情境來設計。

        彩神welcome注册