手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)

2024-8-5    資深UI設(shè)計者

 
 
 
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
先簡單說下表單的定義。在電腦不普及的時代,企業(yè)或者機構(gòu)在收集用戶信息時,通常采用紙質(zhì)單據(jù)讓用戶填寫,而這個單據(jù),就是最原始的表單。我們常說B端產(chǎn)品其實就是把線下已經(jīng)存在的流程搬到線上,有利于擴大市場和提高使用效率和管理效率。而B端表單,其實就是把原先需要線下手工填寫的表單映射到線上,并使其錄入符合線上設(shè)備(如手機、電腦)的使用習慣。
紙質(zhì)表單
紙質(zhì)表單
 
通過上面紙質(zhì)表單,其實我們很容易理解表單的主要任務(wù)場景,就是“錄入”,即用于用戶或產(chǎn)品的數(shù)據(jù)采集。比如常見的快遞單填寫、單位的OA請假流程、CMS后臺配置產(chǎn)品詳情等等。
既然表單的主要功能是“錄入”,那么在設(shè)計表單時,就需要考慮如何盡可能的減少用戶使用成本和理解負擔,提高表單的容錯率和操作效率,讓使用者更高效更準確的完成錄入工作。
 
一、表單的三大設(shè)計原則
1.表意明確
在不同類型的信息錄入時,需要選擇正確的組件,清晰準確的傳達相應(yīng)含義,幫助用戶快速理解需要錄入的信息類型。如需要用戶錄入跟日期相關(guān)的信息,就需要使用DatePicker日期選擇框;如需用戶錄入數(shù)字相關(guān)的內(nèi)容,則需要使用InputNumber數(shù)字選擇框。
2.簡潔高效
高效主要體現(xiàn)在用戶獲取信息的效率和錄入信息效率兩個方面的高效。簡潔則體現(xiàn)在不同的信息體量的情況下使用不同的排布方式和交互方式,使其視覺更加清爽簡潔。
3.安全容錯
分為三個階段,即操作前、操作中、操作后。
操作前:需要做到盡可能的提示接下來用戶需要輸入的內(nèi)容;
操作中:則需要根據(jù)用戶輸入的內(nèi)容進行實時反饋和糾錯,比如格式錯誤需要及時提醒;或者在數(shù)字輸入框輸入“.5”的時候要糾正為“0.5”;或者在僅允許輸入數(shù)字的輸入框內(nèi)輸入其他字符直接判斷為無效輸入等。
操作后:設(shè)計合理的保存機制,如草稿箱;進行清空、取消、或未保存當前頁面內(nèi)容就跳轉(zhuǎn)新頁面時,需二次確認,減少誤操作帶來的損失。
 
二、表單的構(gòu)成
基礎(chǔ)表單通常由表單標簽、表單(數(shù)據(jù))域、提示信息、操作按鈕四部分組成。高階表單由于數(shù)據(jù)類型比較復(fù)雜,會衍生出其他內(nèi)容,如校驗提示、幫助提示、占位信息、動態(tài)增減等內(nèi)容。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
2.1表單標簽
表單標簽用于解釋標明對應(yīng)表單項需要錄入、選擇、上傳的內(nèi)容,引導(dǎo)用戶進行填寫/選擇等對應(yīng)操作。常見的標簽布局有四種:左對齊標簽、右對齊標簽、頂對齊標簽、內(nèi)部標簽。
2.1.1左對齊標簽
左對齊標簽的特點是
閱讀效率高,填寫速度慢,節(jié)約垂直方向空間。
因為左對齊表單解析問題時眼球定位次數(shù)最多,用戶一般情況下都能將左對齊布局中的標簽和輸入框聯(lián)系起來,只是花費時間較長。根據(jù)馬泰奧·彭佐的研究,典型掃視時間為500毫秒,用戶獲取信息時的視線會進行反復(fù)跳動,說明用戶經(jīng)歷了沉重的認知壓力。
左對齊標簽
左對齊標簽
 
適用場景:適用于表單中存在較多復(fù)雜或敏感信息,且希望用戶在填寫時能夠放慢速度仔細思考的場景。多見于注冊類表單。
微信公眾平臺注冊表單
微信公眾平臺注冊表單
 
2.1.2右對齊標簽
右對齊標簽的特點是
填寫效率高,閱讀效率慢,節(jié)約垂直方向空間。
馬泰奧·彭佐的眼動研究發(fā)現(xiàn),專家用戶和新手用戶掃視(眼睛運動)右對齊標簽表單的標簽和輸入框的平均時間分別在170毫秒和240毫秒,而填寫完成時間比左對齊快2倍。
右對齊標簽
右對齊標簽
 
適用場景:右對齊標簽適用于既要減少垂直空間,又要加快填寫速度的場景。
右對齊標簽案例
右對齊標簽案例
 
2.1.3頂對齊標簽
頂對齊標簽的特點是
瀏覽速度和填寫速度都快,節(jié)約橫向空間,且視覺上更加工整但占用垂直空間多。
馬泰奧·彭佐的眼動研究發(fā)現(xiàn),頂對齊標簽從標簽移動到輸入框只需50毫秒。比左對齊標簽快了10倍;比右對齊標簽方式快2倍。能迅速填完頂對齊標簽表單的原因之一,是因為眼球只需要在標簽和輸入框之間進行上下單向運動。
頂對齊標簽
頂對齊標簽
 
適用場景:希望用戶快速填寫表單,完成任務(wù);同時,當輸入項存在主次之分時,對標簽擴展性要求高。
頂對齊標簽案例
頂對齊標簽案例
 
2.1.4內(nèi)部標簽
內(nèi)部標簽的特點是
占用橫向空間少,不用考慮標簽長短不一導(dǎo)致的對齊問題,但輸入時內(nèi)部標簽消失會不太容易判斷信息。
內(nèi)部標簽一般常見于移動端的表單,且表單結(jié)構(gòu)和內(nèi)容相對簡單,適用于極少數(shù)輸入項的表單,不適用于三個以上表單項的場景。
內(nèi)部標簽案例
內(nèi)部標簽案例
 
小結(jié)一下:綜上所述,從效率角度來講,頂對齊標簽>右對齊>左對齊。但根據(jù)B端業(yè)務(wù)場景的不同,效率并不是我們衡量標簽對齊方式的唯一指標。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
所以,
如果你考慮屏效,且希望用戶放慢速度,仔細思考表單中每個表單項,特別是含有大量可選輸入框或高級設(shè)置的陌生數(shù)據(jù),并且希望視覺上保持對齊,犧牲效率,就選擇左對齊標簽;
如果你不考慮屏效,且希望提高用戶的閱讀和填寫效率,并希望表單具有更好的延展性時,就選擇頂對齊標簽。
如果你考慮屏效,且希望提高用戶填寫效率,犧牲視覺對齊,那就選擇右對齊標簽。不過要考慮能否精簡標簽內(nèi)容,確定好表單與界面的間距,標簽長短差異過大謹慎使用右對齊。
 
2.2必填項和選填項的常見處理方式
在表單設(shè)計中,經(jīng)常會碰到三個問題:
1.當表單里全是必填字段的時候,是否要標記它?
2.當表單里既有必填字段,又有選填字段,到底是標記必填,還是標記選填?
3.使用星號*標記必填時,星號在標簽左側(cè)還是右側(cè)?
2.2.1當表單里全是必填字段時,是否要標記它。
理論上來說,一個表單里全部都是必填字段的話,就沒有標記的必要,因為全部都重要的同義詞就是全部都沒那么重要。但是實際使用中,有相當一部分用戶,會下意識的認為沒有標記必填,那就可以不填。
我們通常講設(shè)計要有全局觀和風格的延續(xù)性,站在全局上講,如果其他表單都是遵循“必填的字段不標記,選填的字段做標記”,那么遇到全是必填的表單時,是可以不做標記的。如果其他表單遵循的是“必填的字段做標記,選填的字段不做標記”,那么也要將這個規(guī)則貫徹到底。
2.2.2當表單里既有必填字段,又有選填字段,到底是標記必填,還是標記選填?
用戶體驗設(shè)計是選擇題而非判斷題,
星號*是種視覺標記,可以方便用戶掃描表單時了解輸入信息量的最低限度。必填加星號*肯定不會錯,選填做標記也很對。重要的還是上面的一段表述,要注意全局觀和風格的延續(xù)性。一旦選擇了某種標記規(guī)則,就要貫徹到底。
微信公眾號,只給選填做標記
微信公眾號,只給選填做標記
 
站酷,只給必填做標記
站酷,只給必填做標記
 
2.2.3使用星號*標記必填時,星號在標簽左側(cè)還是右側(cè)?
都可以,放左還是放右不一定有實際影響,但建議將其放在標簽左側(cè)的一個原因是,只需掃視標簽的最左邊字符,就能輕松定位必填哪些字段。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
2.3表單域
表單域即表單的輸入?yún)^(qū)域,輸入域是用來采集用戶數(shù)據(jù)信息的核心內(nèi)容,每個輸入域字段都包含一個類型的數(shù)據(jù)信息。
表單域包含輸入框、內(nèi)容選擇器、時間選擇器、數(shù)值選擇器、上傳五種常見類型。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
設(shè)計師在表單設(shè)計的時候要盡可能減少用戶的思考、理解成本,所以選擇合適的表單域類型,提升表單的輸入效率。如果亂用,就很容易出問題,比如讓用戶在輸入框輸入時間,輸入效率慢不說,還很容易出現(xiàn)格式不一致的問題,導(dǎo)致系統(tǒng)無法做出準確的識別和統(tǒng)計。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
2.3.1如何定義輸入框/選擇框的大小
絕大部分的開源組件都會提供一定的尺寸規(guī)范,一般情況下使用默認的尺寸規(guī)范即可。比如像時間選擇器、數(shù)值選擇器這種,由于字段有明確的格式顯示,所以字段長度也是有預(yù)期的。
而像輸入框、內(nèi)容選擇器這種,就需要做到框長度與輸入預(yù)期成正比。唐納德·諾曼的著作《設(shè)計心理學》中詳細講解過心理暗示方面的內(nèi)容。而寬度的變化就是一種有效暗示。在真實場景中,大部分輸入框是存在理想長度的,那么就應(yīng)該向用戶暗示所需輸入內(nèi)容的長度來減輕判斷負擔。所以建議跟產(chǎn)品經(jīng)理進行溝通,咨詢該字段的長度極限值是多少,然后制定該輸入項框的長度,通常建議是40的倍數(shù),如80/120/160/240/400等。一個平臺的所有輸入框長度統(tǒng)一在5種以內(nèi)最佳,不要設(shè)定太多的寬度,反而會讓表單顯得凌亂;太少又會讓表單看起來都像四四方方的盒子。
雖長短不一但錯落有致的表單
雖長短不一但錯落有致的表單
 
2.3.2表單域提供默認值的必要性
美國著名心理學家巴里·施瓦茨在《選擇的悖論》一書中討論了生活中選擇過多的影響。并提出策略應(yīng)付無處不在的過多選擇。他特別敘述了智能默認的作用,即在滿足多數(shù)人需要的地方放置默認選項來幫助人們做出輕松的明智的選擇。
所以通過提供合理的默認值,能有效節(jié)省用戶時間。填寫表單本身就是一個枯燥無趣的事情,如果這個模式能把表單填寫的時間減少一半,用戶會非常感激。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
如上圖所示,左邊案例是站酷的表單,它提供幾個大家常用的選項做默認項,減少用戶做決策時間;右邊案例是通過使用合理的控件根據(jù)前面用戶輸入的信息進行動態(tài)識別解析。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
 
2.3.3表單域的提示信息
常見的提示信息有以下四種表現(xiàn)方式:
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
設(shè)計師在進行提示信息的文案設(shè)計時,要思考如何進行有效提示,避免“正確但無用”的話。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
2.4操作按鈕
按鈕常見位置:一般出現(xiàn)在頁面頂部、跟隨表單里的內(nèi)容、表單內(nèi)容底部、頁面底部。
按鈕閱讀順序:按鈕出現(xiàn)頁面右上角或右下角時,閱讀順序是從右往左,這符合 pc 端操作習慣以及人閱讀習慣。按鈕跟隨表單內(nèi)容或在表單內(nèi)容底部時,閱讀順序為從左往右,這符合人的填寫順序從上往下,從左往右。
表單按鈕不同位置的閱讀順序
表單按鈕不同位置的閱讀順序
 
底部按鈕居右對齊:一般用在彈窗頁面中,因為比較符合從左到右的閱讀習慣,閱讀完畢后視覺中心自然停留在右側(cè),所以右對齊效率最高。
底部按鈕居中對齊:一般用在頁面中,因為WEB端頁面通常較大,右下角操作距離會有點遠,所以表單用頁面承載的話按鈕建議居中。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
 
三、表單常見布局類型
表單頁面常見布局方式有四種。1.基礎(chǔ)表單;2.錨點(Anchor)定位表單;3.標簽頁(Tab)表單;4.分步(Steps)表單
3.1基礎(chǔ)表單
當表單類目在7個以內(nèi)或7個左右,且字段構(gòu)成比較單一,這時候采用基礎(chǔ)表單即可。
antdesign的基礎(chǔ)表單
antdesign的基礎(chǔ)表單
 
當表單類目在7個以上,字段構(gòu)成比較復(fù)雜,就需要根據(jù)表單字段的復(fù)雜度與邏輯性、關(guān)聯(lián)性進行分組,從而對內(nèi)容進行歸納,將強關(guān)聯(lián)的內(nèi)容劃為一組,降低表單填寫時的認知負荷。
數(shù)藏項目CMS分組表單
數(shù)藏項目CMS分組表單
 
3.2錨點定位表單
當表單信息量比較龐大,在信息分組的前提下也會占用很大的垂直空間,查看不同組需要劃好幾屏,但是每個組之間的關(guān)聯(lián)性又比較強,不適合分開,這種情況下推薦使用錨點定位,點擊定位項可以快速定位到相應(yīng)的表單內(nèi)容。功能上有點像可跳轉(zhuǎn)目錄。
錨點定位表單演示
錨點定位表單演示
 
 
3.3標簽頁表單
當表單信息量比較龐大,但是每個信息組之間并沒有強關(guān)聯(lián)性,每個組屬于獨立表單,這時推薦使用標簽頁分組方式。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
3.4分步表單
如果每個信息組之間有邏輯先后順序,那么推薦使用分步表單,分步表單可以給用戶一定程度的填寫進度預(yù)期。
數(shù)藏CMS系統(tǒng)的分步表單
數(shù)藏CMS系統(tǒng)的分步表單
 
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
 
四、表單常見交互方式
表單常?的交互形式有??跳轉(zhuǎn)、抽屜、彈窗、?泡卡?、原位編輯。選擇什么樣的交互形式,通常會根據(jù)內(nèi)容的承載量以及關(guān)聯(lián)度來判斷,從少到多依次為:?泡卡? – 原位編輯 – 模態(tài)對話框 – 抽屜 – ??跳轉(zhuǎn)。
4.1Popover氣泡卡片
當目標元素有進一步的描述和相關(guān)操作時,可以收納到氣泡卡片中,根據(jù)用戶的操作行為(如鼠標移入/聚焦/點擊時)進行展現(xiàn)。
它的特點是不會影響原有任務(wù)進程,承載內(nèi)容少。把內(nèi)容的編輯修改操作及校驗放在氣泡卡片上完成,不會打斷原有任務(wù)進程。
antdesign的氣泡卡片演示
antdesign的氣泡卡片演示
 
白貓貸借貸系統(tǒng)的氣泡卡片
白貓貸借貸系統(tǒng)的氣泡卡片
 
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
4.2原位編輯
其編輯內(nèi)容也為展示內(nèi)容,默認展示狀態(tài)操作,可切換為編輯狀態(tài),屬于輕量型的信息采集表單。
激活表單后直接編輯,回車保存
激活表單后直接編輯,回車保存
 
4.3Modal模態(tài)對話框
很常見的交互方式之一,?戶在不離開當前?的情況下繼續(xù)操作,是流程步驟中的分??為,只能承載簡單的表單內(nèi)容。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
4.4Drawer抽屜
抽屜就是從屏幕邊緣滑入的浮層面板,覆蓋住部分主體內(nèi)容。它的特點是用戶在抽屜內(nèi)操作時不必離開當前任務(wù),操作完成后,可以平滑地回到原任務(wù)(一般默認點擊蒙層部分就可以收起抽屜)。
通常用于在當前任務(wù)流中插入的臨時任務(wù),如創(chuàng)建、預(yù)覽等。抽屜大多情況一層就可以,如果遇到分支任務(wù)復(fù)雜的情況,也可以使用多層抽屜。
單層抽屜
單層抽屜
 
多層抽屜
多層抽屜
 
 
4.5頁面跳轉(zhuǎn)
最常?的?式,適?于絕?部分的表單,?持構(gòu)建復(fù)雜的表單。特點是必定打斷當前操作,返回上一級操作通常利用面包屑或瀏覽器的返回。
B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(上)
 
 
 
這次分享就到這里,下一篇《B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第二彈:表單設(shè)計(下)》稍后就來~
 
 
 
 

作者:MoeDesigner
鏈接:https://www.zcool.com.cn/article/ZMTYxNzk2OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

藍藍設(shè)計(m.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.88yangsc.com

存檔