高端網站制作公司:5個方面闡述,Web表單設計

　　高端網站制作公司:5個方面闡述,Web表單設計

　　最近，作者正在做一個比較復雜的Web產品交互和視覺設計工作，涉及到很多形式的類型頁面,高端網站制作公司。

　　形式的內容是不確定的，成分是變化的。在工作過程中，用戶輸入過程、頁面布局和形式統一有很多限制，在優化功能交互過程和清除交互布局水平的基礎上，努力提高用戶的輸入信息體驗，提高輸入效率；希望給用戶帶來驚喜。

　　在形式設計的過程中，根據自己的工作經驗，同時尋找一些案例數據，完成表格設計的歸納和總結，為小伙伴的需要做參考。

　　本文的結構框架

　　首先，形式定義

　　表單的核心功能是收集數據和信息，可以作為采集、傳輸和提交數據的中間媒介，作為獲取用戶輸入的重要方式，也起到匹配問答的作用。

　　二。形式形式

　　表單通常由標簽、輸入字段、填充提示、操作按鈕等組成，根據輸入過程，用戶輸入過程可分為輸入、輸入和輸入。

　　表單示例

　　標簽：告訴用戶表單需要填寫什么類型的信息，通常放在窗外或左外的窗體文本框之外。在很少情況下，它也將被放置在文本輸入框中，并且激活輸入框將消失。

　　標簽通常是每個輸入項的名稱（例如：帳號、ID號、服務器名）。根據填寫信息的必要性，{關鍵字47}可以分為所需和不需要的項目。。否則，表單不能正常提交和保存，而非需要的項目是用戶可以填寫，并根據用戶的愿望和需要自愿選擇填寫。

　　輸入域：用于收集用戶操作的信息，每個輸入字段包含一種類型的信息。

　　輸入場不僅是一個文本輸入框，而且從交互的組件的角度，包括文本輸入框、單選框、復選框、開關、選擇器、步進酒吧，上傳，標簽交換（主要是按鍵式），滑塊，步進酒吧等在。

　　填寫提示：幫助用戶有效、正確填寫內容或反饋信息內容。

　　提示可分為引導提示和反饋提示兩種，引導提示發生在用戶輸入之前，引導用戶正確輸入信息或解釋輸入信息的要求，反饋提示發生在輸入或輸入后，界面顯示。根據用戶的輸入提示信息。

　　操作按鈕指的是操作操作（如保存、取消、提交、確定等）以完成當前操作過程或在過程中或之后或在填寫表單內容之后打開新的功能操作。

　　三，形式表達形式

　　表單頁面顯示有三種形式：跳轉、輸入和編輯。影響頁面形式的因素包括表單的輸入容量和操作過程的主次關系。

　?。?/span>1）頁面跳變

　　在頁面中顯示一個功能的主要操作過程，以保證主要功能的流暢性；同時，如果輸入越多，建議使用跳過頁面，頁面跳轉的信息承載能力強，反饋的及時性要求不高。身高、體重感重，穩定性高于關鍵詞105。

　　跳過頁面包括兩種：新頁面打開和當前頁面跳轉。

　　在主進程步驟中，打開新頁面作為分支過程，不會影響用戶主進程的連續操作，并且頁面功能是獨立的。

　　當前頁面跳轉是流程步驟中的關鍵步驟，提示用戶進入下一步，頁面之間的跳躍體現了產品的基本使用過程。關鍵流程關鍵路徑建議打開當前頁面，使產品過程更加清晰，頁面少開，以減少多余信息的分心給用戶的注意力，高端網站制作公司,并讓用戶關注當前頁面的信息。

　?。?/span>2）輸入彈出窗口

　　彈出式的輸入形式，當前頁面的分支操作，反映了頁面之間的層次關系。輸入彈出式的形式，輸入量介于兩種樣式之間的跳過和就地編輯之間。IVE頁面流不適合本地編輯，也沒有達到新頁面的級別。

　　用戶在不離開當前頁面的情況下繼續插入性。對于過程步驟中的分支行為，可以由用戶選擇，不覆蓋用戶已經閱讀的內容，輸入窗口較輕，信息負載弱于頁面跳過，比本地編輯強，并且輸入內容具有較大的彈性空間。

　　這種類型的表單會中斷當前的主操作過程，高端網站制作公司能及時響應，給人們帶來更多的局部性，所以輸入內容不應太多，不能太過關注用戶，否則會造成用戶主要操作過程的強烈分離。減少輸入的流暢性。

　?。?/span>3）地方編輯

　　就地編輯是一種輕量級的信息采集形式，適用于輸入較少、頻率較低、主要功能分支的場景，其優點是操作方便、隨時啟用和退出，保證了用戶在主要功能上的流暢性。

　　本地編輯通常嵌入在列表和卡片中，并且通過雙擊或單擊特定操作按鈕將信息顯示區域更改為活動編輯狀態。其存在的意義在于改進或增強主功能的操作，而不是中斷{關鍵字298}。

　　2。標簽樣式

　　根據標簽與輸入域之間的位置關系，其對齊可分為右對齊、左對齊和頂部對齊三種類型，每種對齊方法都有一定的優勢和局限性，因此在適當的SCN中選擇合適的標簽樣式。E可以提高用戶的輸入效率。

　?。?/span>1）右對齊

　　當你想要減少垂直空間和加速場景時，使用右對齊。右對齊標簽的表單瀏覽時間比頂部對齊標簽長，但比左對齊時間短。如果頁面高度有限，公司推薦這種對齊方式。

　　優點：節省垂直空間。

　　缺點：減少可讀性，標簽長度和輸入框的靈活性。

　　板栗：騰訊藍鯨故障自愈平臺的新收斂規則表頁收斂，左對齊布局用于促進用戶的快速操作，并完成新的收斂規則形式的完成。

　?。?/span>2）頂部對準

　　希望用戶可以快速填寫表格并使用頂部對齊來完成任務。頂部對齊比其他對齊方法需要更少的眼睛移動。移動表單主要用于這種形式，移動電話用于下拉交互。垂直高度不受限制。

　　優點：瀏覽速度和處理速度最快；標簽長度靈活。

　　缺點：非常垂直的空間。

　?。?/span>3）左對齊

　　希望用戶在使用左對齊類型的情況下減慢并仔細考慮表單中每個輸入框的場景。在三中，帶有左對齊標簽的窗體是最長的，但是當用戶希望用戶放慢速度并仔細思考時，可以使用這種對齊方式（例如IM）。輸入端）。

　　優點：閱讀文本開頭的視線，便于閱讀，節省垂直空間。

　　缺點：灌裝速度慢，標簽長度和輸入箱靈活性小。

　　取板栗：騰訊云，購買云產品的表單界面，讓用戶仔細觀察，慎重選擇，采用左對齊的方式。

　　三。輸入域風格

　　輸入字段是表單的主題和核心。

　?。?/span>1）組件風格

　　組價格的常見形式包括表單、文本字段、選擇器、開關、復選框、無線電、步驟、滑塊、上傳、標簽等。下面將詳細討論建立的選擇。

　　輸入部件之間的間距不應窄。更大的文本輸入框和適度的空白空間會使人們更想填寫。在表單間距處理中，每個塊之前的空間，例如在一列中的一組字段輸入框之間的間距，以及雙列中左右列之間的距離。需要特別注意。

　?。?/span>2）單排和多排布局

　　在網頁中，由于頁面關系，跳轉頁面和彈出窗口的水平空間較大，垂直空間不足。如果有更多的輸入內容，當不能使用模塊、步驟和更高層次的交互布局時，一些設計者會使用雙列表或多列表形式來改善水平空間的使用，這也是可以接受的，此時，我們應該注意T的合理性，高端網站制作公司。他在列和列之間的距離，并觀察用戶的視覺流。我們可以參考費茲定律。

　　但作為一種形式，瀏覽和填充單柱形式的效率是最高的，用戶的視覺流程更順暢，從而提高灌裝效率和降低用戶的疲勞。因此，單欄布局用于建議的形式。

　?。?/span>3）子模塊

　　要形成輸入組件過多的內容、分類、子模塊布局，讓用戶感覺更好，而不是一個大密集、組織良好的用戶。用戶可以在心理暫停中填補一段內容，減少視覺疲勞和心理壓力。

　　板栗：網易七魚服務平臺的基礎是基于表單頁面，它分為幾個小模塊，如歡迎設置、未選擇的分類提示、在線會話關閉的兩個確認、重復的咨詢識別、會話定時設置、服務時間設置、連接確認設置、會話訪問提示等。層次清晰明了。

　　子模塊實例

　?。?/span>4）一步一步

　　對于輸入組件的內容過于豐富，有一個清晰的操作關系，可以逐步選擇。在該步驟中，每個屏幕僅顯示表單輸入部件，并且還可以逐級執行檢查反饋。

　　板栗：云平臺的注冊分為3個步驟：賬戶設置、數據完成和注冊完成，用戶可以一步一步地填寫，每個屏幕只顯示當前步驟下的輸入組件，允許用戶一步一步地清除用戶行為和RE。減輕用戶的心理負擔，及時反饋檢查，避免發現其中一個輸入不正確。

　　階梯式殼體

　?。ǜ呒墸ú槐匾捻椖繎谀J情況下停用）

　　有很多形式的形式，有一些非必要的項目，并不那么重要。默認情況下，您可以選擇隱藏它。當用戶想要填寫時，可以填寫?；蛘咚阉魈嗟臈l件，默認情況下，顯示更多的信息內容；當搜索時，點擊開始。

　　栗子：Ali云的云服務器ECS購買詳細價格概述模塊形式的頁面，有許多形式的搜索，并默許默認；用戶點擊過濾按鈕搜索形式展開。保存網頁空間，讓用戶看到其他更重要的信息在列表中的默認。

　　高級示例（默認）

　　先進實例（展開）

　　4。提示風格

　　根據提示信息的位置和提示的時間，提示可分為輸入框提示、輸入框提示、激活輸入框提示、圖標懸停提示和單獨區域提示等。有兩種提示方式：引導提示和反饋提示。

　?。?/span>1）指南提示

　　引導提示符是用戶輸入信息規則的注釋和描述。在用戶輸入之前，輸入框中的提示、輸入框中的提示以及輸入框提示的激活可以被分類為引導提示。

　　可以分為：全局提示和定位提示。

　　全局提示：場景的使用是：告訴用戶填寫表單，并幫助用戶改善相關表單的內容（好處提示）會帶來什么好處。登錄頁面中沒有很多項目，或者沒有很多提示，U在信息的收集和使用保證（安全提示）的使用，減輕用戶輸入的關注。

　　位置提示：適用于形式較多的內容，當字段的內容較少時，應提示在相應的錯誤位置，幫助用戶快速查找錯誤內容。

　?。?/span>2）反饋提示

　　反饋提示是頁面系統檢查用戶輸入并顯示驗證結果的提示形式，反饋提示由用戶輸入提示，輸入和輸入可分為即時檢查反饋、本地檢查反饋和全局檢查反饋。

　　更常見的即時檢查反饋是對輸入的字符數的基礎上顯示密碼的強度，從而提示用戶當前的密碼強度滿足要求。該方法的驗證條件大多是本地的，不需要發送命令對服務器實時得到反饋。

　　板栗：BHANCE網站的一頁，密碼設置要求用戶輸入密碼以滿足其下的條件，并根據用戶輸入的密碼實時作出相應的反饋。

　　即時驗證案例

　　本地檢查反饋：當注冊一個帳戶時，輸入完整的用戶名，指示用戶名是否可用，然后本地檢查反饋。檢查的內容存儲在遠端，程序需要完整的輸入信息以在遠端和饋送進行測試。背面提供。

　　本地校準主要應用于更多的輸入項，輸入有先決條件，并確定下一個輸入，這樣可以避免對用戶輸入不完整造成的干擾，減少服務器上的壓力。一般的注冊、登錄、網頁頁面將使用部分檢查F。反饋。

　　全局檢查反饋：當輸入完成或分階段時，給出來自接口的輸入反饋，用戶需要觸發操作。當用戶操作反饋動作按鈕時，接口在相應位置給出不兼容的反饋提示（一般為B）。ELOW或在單個輸入幀的右側）。

　　5。操作按鈕窗體

　　操作按鈕：在完成表單內容后，將要執行的動作（如保存、取消、提交、確認等）。

　　在完成表單輸入字段后，必須執行最終的操作反饋，以使用戶清楚地知道其輸入的數據信息是否可以有效地保留或放棄。操作按鈕不保存、取消、提交、重置、上下、保存和提交。

　　四?？丶倪x擇

　　對于用戶來說，最好的體驗是沒有表單輸入，無論形式如何，都不能滿足用戶的心理預期。因此，在設計表單時，應盡可能減少用戶的思維、操作和理解負擔，減少用戶的疲倦感。形成和提高表單的輸入效率，這是表單輸入的核心原則，因此，控制類型和風格的選擇尤為重要。

　　1。選擇框優于輸入框

　　任何高密度操作都會引起用戶的不適。因此，在選擇輸入項時，選擇而不是鍵盤輸入。

　　一方面，它簡化了用戶的操作，點擊次數遠小于輸入，從而降低了用戶的操作密度。

　　另一方面，可以減輕用戶的認知和記憶負擔，與輸入框相比，操作步驟的選擇較少，效率相對較高。同時，用戶考慮輸入值，不需要重新輸入輸入錯誤的風險，用戶可以清楚地選擇項目，明確哪些值是可用的。對于一些無關緊要或更難理解的輸入項，您可以預制默認值并在所有階段照顧用戶。

　　2。單選框和下拉選擇框

　　作為同一類型的輸入項，選擇框具有與下拉框相同的優點，所使用的場景是完全不同的。

　　復選框更適合較少的選項（小于五），同時，選擇項更相似。此外，當選擇可視性和快速響應優先級時，應優先選擇框，因為與下拉選擇相比，使用RS可以通過顯示的選項直接選擇目標選項，以提高輸入效率。

　　下拉選擇框更適合多選項（五以上），有默認選項，或者選擇項之間存在很大差異。同時，下拉的選擇不應引起輸入項的數量和頁面的變化。否則，頁面的選擇和頁面的變化會很容易導致用戶的不適。

　　如果有太多的選項和超過二十個，最好引入模糊匹配和某些排序規則（字母排序、數值排序等）。用戶預先預覽選項的一般位置，或者通過模糊檢索找到合適的選項。

　　3。合并相鄰字段/結構格式

　　當兩個輸入幀高度相關時，它們可以來回拼接以減少頁面空間，即合并相鄰字段。例如，服務器的IP和端口、區域代碼和聯系方式的數量以及時間范圍的選擇，高端網站制作公司。

　　雖然用戶輸入或現場操作的選擇沒有減少，但是它的視覺簡單性和用戶心理壓力會降低，用戶熟悉輸入的內容，并且系統不希望接受任何偏離預期格式，并且可以使用結構化的。放盒格式。

　　栗子：當淘寶帳號注冊時，淘寶網絡用戶群遍布世界各地，電話號碼是在電話號碼前結構化的。前者只需由用戶選擇，同時在驗證過程中添加一個簡單有效的動畫，給用戶帶來一定程度的驚喜。

　　4。水平連桿機構

　　這個區域與郵政編碼有關。在用戶選擇該區域后，郵政編碼將自動識別并填充，當然它支持用戶再次編輯，有許多類似的城市，如級聯選擇、組織級等。

　　5。智能聯想

　　智能關聯是一種聯想功能，它賦予用戶輸入字段的能力，使得用戶很容易選擇并將原始輸入轉換為選擇。例如：郵件可以提供公共域名關聯， 將出現163.com、126com、qqcom和其他域名允許用戶使用。選擇。

　　栗色：當注冊百度帳戶時，由于百度注冊用戶的基礎和數量眾多，注冊了許多公共字段。當用戶輸入已注冊用戶名時，除了用戶的用戶名之外，還有類似的推薦用戶名。反饋提示出現在后方。

　　也就是說，用戶輸入字段智能地與用戶可選擇的類似用戶名相關聯，高端網站制作公司，雖然最終用戶可能不選擇由較低的智能關聯推薦的用戶名，但它在一定程度上優化了用戶體驗，使得用戶感覺到對設計師有一點小小的驚喜。

　　五、應用原則和技巧1。明確告知要輸入的信息內容。

　　確保用戶知道他們想要提供什么信息以及他們為什么要提供信息。

　　為本地用戶提供一個標簽，偶爾訪問用戶，為領域專家提供專業術語作為標簽。當用戶需要提供敏感信息時，輸入提示符被用來解釋系統為什么這樣做，例如，當您需要獲得身份證號碼和電話號碼。

　　2。讓用戶在上下文中獲取信息并幫助他完成輸入

　　使用良好默認值

　　3。標簽簡單準確

　　標簽領域的簡潔，有利于標簽排版對齊，減少了用戶的閱讀和理解的難度。措辭準確防止用戶有其他的解釋，導致輸入錯誤的信息。此外，標簽可以省略如果輸入項是清晰的，如登錄的用戶名和密碼。

　　4。必需品

　　所要求的項目一般都需要清楚地識別，除非它們都是必需的，高端網站制作公司，并且所需項目的數量小于7。當項目相對較小時，通常不需要識別因特網產品，并且不需要這些詞。

　　5。是容錯的

　　對錯誤敏感，盡可能容忍，具有容錯性。

　　反饋是通過不同的審查規則和形式，這樣用戶不開始檢查之前，點擊提交，以便用戶可以糾正錯誤提前。根據容錯格式

　　6。簡化不必要的輸入項

　　在充分獲取所需信息的前提下，越少的條目，越能充分利用用戶的輸入信息。例如：讓用戶輸入身份證號碼，不要讓用戶再次進入生日，此時，您可以閱讀用戶的生日。從用戶的身份證號碼，從而減少用戶的輸入。

　　7。合理分類

　　輸入信息分類是減輕用戶疲勞的有效方法，分類有多種。根據表單的輸入內容與內容類別的相關性，可以輸入相同類型的數據，以減少用戶輸入信息的跨度，提高輸入效率。

　　根據輸入信息的優先級或重要性，進行分類，將高優先級放在前面，將低優先級放在最終或折疊中，將默認值的輸入項放在較低的值中，普通用戶可以忽略輸入。這部分。

　　8。合理分步

　　一步一步地處理輸入表單，可以減少用戶的操作頻率，高端網站制作公司，給用戶一定的休息空間，用戶會有成就感，并且輸入的步驟也有利于降低信息的錯誤率。

　　如果輸入表單內容較多，輸入內容具有邏輯順序，則可以逐級處理輸入表單。

　　禁用9的原理。主按鈕

　　當輸入框非常?。ㄍǔＰ∮?/span>3）時，如果用戶不輸入所需項目中的內容，則可以禁用諸如提交的主按鈕。當輸入框很長（超過5或更多）時，不建議禁用主按鈕。

　　當輸入框非常小時，用戶在輸入時會得到反饋，因此主按鈕的禁用規則非常清晰，易于用戶理解。

　　板栗：禁止網易七魚密碼設置模塊保存主按鈕。當用戶正確填寫所需密碼和新密碼時，保存按鈕就可用了?！　?/span>

　　轉載請注明:高端網站制作公司:http://www.yykbh.com/newsshow/238.html