2021-1-20 周周
降本增效一直是為B端賦能的首要宗旨,那么我們?cè)撊绾螐脑O(shè)設(shè)層面為用戶提高表單錄入的效率呢?
什么是表單頁(yè)
表單都是界面中最 常見、最 重要 的組件之一,屬于 數(shù)據(jù)錄入 板塊。
表單是2B產(chǎn)品“管理”的第一步。軟件/系統(tǒng)/平臺(tái)本身是沒有信息的,像是一個(gè)空的架子,表單是用戶向系統(tǒng)輸入信息的一種非常重要的手段,只有用戶向系統(tǒng)添加了豐富的信息,系統(tǒng)才能實(shí)現(xiàn)其價(jià)值。
表單是信息添加、錄入的通用形式;主要作用是負(fù)責(zé)數(shù)據(jù)采集,是最常用的信息錄入工具,隨著互聯(lián)網(wǎng)興起,特別是最近幾年B端的興起,表單的重要性顯得越來(lái)越突出。
表單的設(shè)計(jì)原則
- 充分考慮用戶填寫表單的目的,區(qū)分必填項(xiàng)和非必填項(xiàng),刪減不必要的表單信息(例如:填寫了身份證就無(wú)需再填寫出生日期,因身份證信息內(nèi)包含出生日期,系統(tǒng)自動(dòng)識(shí)別即可),確定完表單內(nèi)容。必要的時(shí)候?qū)π畔⒎纸M,表單項(xiàng)并非從上到下無(wú)序羅列,而是根據(jù)表單內(nèi)容,按照一定的邏輯或者用戶熟悉的模式順序,對(duì)表單項(xiàng)進(jìn)行排序和分組,才能讓用戶瀏覽和填寫流暢且。
準(zhǔn)確- 信息表達(dá)要準(zhǔn)確無(wú)誤,避免歧義,提示說(shuō)明要合適,不要給正確的廢話,例如:填寫備注的提示用“請(qǐng)輸入備注”沒有意義,換成“不超過(guò)100字”更有助用戶對(duì)表單的理解。
一致- 組件的規(guī)范和操作的規(guī)范同樣重要。同一套系統(tǒng)同一個(gè)組件使用一個(gè)樣式即可,這樣才能保證頁(yè)面的視覺統(tǒng)一。同一個(gè)功能按鈕,在A頁(yè)面點(diǎn)擊給的彈窗,在B頁(yè)面也同樣要為彈窗。
易懂- 給予高質(zhì)量的信息提示及反饋,如果需要輸入某種特殊格式,請(qǐng)給出具體要求(例如:密碼長(zhǎng)度8-20位);錯(cuò)誤提示的時(shí)候要給用戶錯(cuò)誤的具體內(nèi)容(例如:登錄時(shí)不能單純?nèi)ヌ崾尽澳斎氲男畔⒂姓`”,需準(zhǔn)確提示是賬號(hào)格式錯(cuò)誤,還是密碼長(zhǎng)度錯(cuò)誤)。
我們先看看表單主構(gòu)成,表單主要由這5部分構(gòu)成:
分組標(biāo)題:表單項(xiàng)較多的情況下建議分組,分組標(biāo)題有引導(dǎo)用戶完成表單填寫的作用。
表單標(biāo)簽:也就是填寫或操作內(nèi)容的標(biāo)題。標(biāo)簽規(guī)范的方式時(shí)標(biāo)題后帶冒號(hào),還是不帶冒號(hào)呢?這個(gè)其實(shí)都可以,沒有硬性的標(biāo)準(zhǔn),自定義一個(gè)規(guī)范去執(zhí)行就可以了。
表單域:表單是用來(lái)數(shù)據(jù)采集的容器,也可以視為一個(gè)對(duì)象。包含了文本框、多行文本框、密碼框、隱藏域、復(fù)選框、單選框、下拉選擇框和文件上傳等,用于采集用戶的輸入或選擇的數(shù)據(jù)。
提示信息:分為說(shuō)明性提示信息和操作反饋提示。提示信息可以放在表單域里邊(例如:備注的提示“不超過(guò)100字”),也可以在表單域或后邊,還可以收進(jìn)“問號(hào)icon”里,鼠標(biāo)hover后給氣泡提示展示信息即可。
操作按鈕:操作按鈕為頁(yè)面的全局操作,為滿足用戶隨時(shí)對(duì)表單進(jìn)行操作的需求,操作按鈕會(huì)懸浮在頁(yè)面底部。一般情況按鈕最多只有一個(gè)主按鈕,可以有多個(gè)次按鈕。
(1) 分類
左標(biāo)簽:優(yōu)勢(shì)-節(jié)約縱向空間,信息表達(dá)明確,多用于web端;劣勢(shì)-橫向空間利用率不高,不適用移動(dòng)端等狹窄空間。
頂標(biāo)簽:優(yōu)勢(shì)-視覺舒適,節(jié)約橫向空間;劣勢(shì)-縱向空間利用率不高。
行內(nèi)標(biāo)簽:優(yōu)勢(shì)-最節(jié)省空間,多用于注冊(cè)登錄等字段少的表單;劣勢(shì)-輸入時(shí)和輸入后標(biāo)簽消失,令用戶迷茫(可優(yōu)化為浮動(dòng)標(biāo)簽,在光標(biāo)鍵入時(shí),標(biāo)簽展示輸入框上),字段多的表單不建議使用行內(nèi)標(biāo)簽及浮動(dòng)標(biāo)簽。
(2) 對(duì)齊方式
左對(duì)齊:從左至右的閱讀順序,符合人們的閱讀習(xí)慣,一般用于詳情的陳列。
右對(duì)齊:也被稱為“冒號(hào)對(duì)齊”,右對(duì)齊使得標(biāo)簽和輸入之間的距離固定,有明確的視覺關(guān)聯(lián),操作效率高,非常適合表單錄入。
表單域大致分為以下5個(gè)大類:輸入、內(nèi)容選擇、日期時(shí)間選擇、數(shù)值范圍和上傳。
選擇適合的控件,不光能在視覺上做到統(tǒng)一規(guī)范,還能提高用戶操作效率。
(1) 輸入
文本框:選擇適合的大小,它的大小應(yīng)該向用戶暗示所需輸入內(nèi)容的長(zhǎng)度,以此減輕判斷負(fù)擔(dān)(注意:文章類超長(zhǎng)文本不適用于長(zhǎng)文本輸入框,建議使用富文本編輯器)。
特定前/后綴:涉及到金額輸入時(shí),當(dāng)用戶輸入的金額超過(guò)千時(shí),出現(xiàn)千分位最數(shù)據(jù)進(jìn)行分組,方便用戶快速識(shí)別金額。
帶icon或按鈕:“日期選擇”和“時(shí)間選擇”一般都附帶icon,便于用戶快速識(shí)別。帶按鈕的表單項(xiàng)在“密碼輸入”用的最多,可做隱藏密碼和顯示密碼的切換用,因?yàn)槊ぽ敿翱赡軙?huì)出錯(cuò)。
(2) 選擇
內(nèi)容選擇:含單選、多選、選擇器(常用的有下拉單選/多選)、級(jí)聯(lián)選擇(多層級(jí)聯(lián)動(dòng)選擇)、樹選擇、穿梭框、開關(guān)。
1、單選框、復(fù)選框:一般用于選項(xiàng)不多且相對(duì)固定的情況,選項(xiàng)控制在6個(gè)以內(nèi)為宜,用戶可以一眼看到所有內(nèi)容。單選框只能是其中一個(gè)選項(xiàng),多選框則可以選擇其中一個(gè)或多個(gè)選項(xiàng)。
2、開關(guān):使用開關(guān)控件的條件是選項(xiàng)的性質(zhì)互斥(例如:是和否、打開和關(guān)閉、開啟和禁用等);
3、選擇器:當(dāng)選擇項(xiàng)超6個(gè),就需要考慮用到選擇器了。下拉列表是網(wǎng)頁(yè)中一種最省頁(yè)面空間的選擇方式,單擊下拉按鈕后能看到最多展示的8個(gè)選項(xiàng),少于8個(gè)則顯示實(shí)際個(gè)數(shù)自適應(yīng),多余8個(gè)則出現(xiàn)滾動(dòng)條。下拉選擇器根據(jù)屏幕位置決定向下展示或者向上展示。
選擇器適用廣泛,同類選項(xiàng)(例如:選擇客戶、商品名稱、貨物編號(hào)等)、增量選項(xiàng)(例如:年份選擇)。
4、級(jí)聯(lián)選擇、樹選擇:二者都屬層級(jí)選擇,區(qū)別在于級(jí)聯(lián)選好選項(xiàng)后框內(nèi)顯示的是含層級(jí)的內(nèi)容選項(xiàng),且只能選擇需最子集選項(xiàng)(例如:江蘇省/蘇州市/工業(yè)園區(qū),不能選擇江蘇省,因?yàn)榍懊娴倪x項(xiàng)只為導(dǎo)航至最子集),而樹選擇框內(nèi)展示的是單個(gè)選項(xiàng)的內(nèi)容,不展示層級(jí),但可以選擇任何層級(jí)(例如下圖:浙江?。?
日期及時(shí)間選擇:分為日期選擇、時(shí)間選擇、日期時(shí)間選擇,可以是單個(gè)時(shí)間,也可以是時(shí)間區(qū)間;他們很特殊,只為日期和時(shí)間選項(xiàng)而生。
1、日期、時(shí)間選擇:當(dāng)用戶需要一個(gè)時(shí)間/日期,可以點(diǎn)擊標(biāo)準(zhǔn)輸入框,彈出選擇面板進(jìn)行選擇,或者輸入時(shí)間后自動(dòng)定位到該選項(xiàng),無(wú)需手動(dòng)選擇。
2、日期時(shí)間選擇:相當(dāng)于將日期和時(shí)間這兩個(gè)選擇項(xiàng)集為一身,在同一個(gè)選擇器里選擇(年月日時(shí)分秒);下例相當(dāng)于兩個(gè)下拉框切換使用,步驟1先彈出日期選擇框選擇年月日,選擇好日期后點(diǎn)擊“確定按鈕”旁邊的“選擇時(shí)間”,則切換為步驟2的時(shí)間選擇框。
數(shù)值范圍:
1、滑動(dòng)輸入器:滑動(dòng)型輸入器,展示當(dāng)前值和可選范圍,通過(guò)拖動(dòng)滑塊在一個(gè)固定區(qū)間內(nèi)進(jìn)行選擇。
2、步進(jìn)器:也稱為計(jì)數(shù)器,僅允許輸入自定義范圍內(nèi)標(biāo)準(zhǔn)的數(shù)字值,當(dāng)自定義標(biāo)準(zhǔn)數(shù)字值為整數(shù)時(shí),輸入小數(shù)點(diǎn)后回車,帶小數(shù)點(diǎn)的數(shù)字只保留整數(shù)呈現(xiàn)。上下按鈕也不是每點(diǎn)擊一次數(shù)值±1,可以設(shè)置跳每點(diǎn)擊一次±N,N可以為任何數(shù)字,也可以為小數(shù)。
(3) 上傳
文件、圖片上傳:第一種情況是上傳圖片和文件合在一個(gè)上傳控件里;第二種情況是區(qū)分了圖片上傳和除了圖片之外的其他文件的上傳,這種情況下的圖片成功上傳后是有縮略圖的;根據(jù)需求選擇其中一種即可。要注意的是上傳有四種狀態(tài):上傳前、上傳中、上傳后的成功狀態(tài)、上傳后的失敗狀態(tài),UI都需要設(shè)計(jì)出來(lái),一個(gè)都不能少。
(1) 占位符
占位符就是先占據(jù)一個(gè)固定的位置,等著用戶往里面添加內(nèi)容的符號(hào)或文字。在鍵入信息前,出現(xiàn)在輸入框和下拉框里的提示信息就是占位符。占位符需要注意的是,要避免使用“正確的廢話”,因?yàn)榻o不到用戶任何提示幫助,如果表單項(xiàng)沒有制定規(guī)則,可用表單項(xiàng)編輯方式占位“請(qǐng)輸入”/“請(qǐng)選擇”,以新增商品為案例:
(2) 幫助信息
幫助信息和占位符類似,也是在輸入編輯前給用戶的提示信息。和占位符不同點(diǎn)在于“幫助信息”不占據(jù)輸入編輯的位置,不會(huì)因?yàn)殒I入信息后消失,屬于表單中的常駐信息。三種方式可以同時(shí)運(yùn)用在一套系統(tǒng)內(nèi),視當(dāng)前表單情況選定。
(3) 校驗(yàn)信息
校驗(yàn)信息是在輸入后或者提交后,系統(tǒng)對(duì)編輯的信息進(jìn)行的校驗(yàn),分為前端校驗(yàn)和后端校驗(yàn)兩種。
前端校驗(yàn):一般校驗(yàn)顯示錯(cuò)誤和格式錯(cuò)誤:必填項(xiàng)、(郵箱、電話號(hào)、地址)格式、密碼強(qiáng)度等??焖俜答仯苯犹嵝延脩翦e(cuò)誤內(nèi)容,讓用戶及時(shí)知曉并更改。
后端校驗(yàn):唯一性驗(yàn)證、驗(yàn)證碼、敏感詞等,觸發(fā)校驗(yàn)請(qǐng)求后系統(tǒng)會(huì)去數(shù)據(jù)庫(kù)查詢校驗(yàn)信息,再給予用戶相應(yīng)的反饋。
(1) 分布的位置
表單頂部、表單底部:用于放置全局按鈕,兩個(gè)位置的功能按鈕是一樣的,只是出現(xiàn)的條件不同。默認(rèn)顯示表單頂部按鈕,當(dāng)頂部按鈕因?yàn)轫?yè)面上滑被遮蓋了,底部按鈕才懸浮在窗口底部。目的在于用戶無(wú)需上下滑動(dòng)到固定位置才能對(duì)表單進(jìn)行操作,省時(shí)增效。
跟隨表單項(xiàng):這種情況很少用到,一般是需要校驗(yàn)的情況下使用,或者可手動(dòng)增減的表單項(xiàng)。
分組底部:一般是對(duì)于這個(gè)分組進(jìn)行的操作按鈕。
溫馨提示:當(dāng)操作按鈕超三個(gè)時(shí),可以將相對(duì)低頻的操作按鈕折疊收起,點(diǎn)擊或鼠標(biāo)hover“更多操作”時(shí)下拉展開顯示所有按鈕。
(2) 閱讀順序、按鈕層級(jí)、對(duì)齊方式
其實(shí)這三者的規(guī)則都是一樣的,當(dāng)按鈕右對(duì)齊頁(yè)面的時(shí)候,閱讀順序自然是從右向左,而按鈕層級(jí)也是從右向左遞減,比如頂部的提交、保存、取消三個(gè)按鈕;商品列表的“添加商品”和“刪除全部商品”,左對(duì)齊頁(yè)面,閱讀順序和層級(jí)自然也是從左至右。
表單頁(yè)面主要的交互方式有四種:原位編輯、氣泡卡片、彈窗/抽屜、頁(yè)面跳轉(zhuǎn)。表單頁(yè)面在交互方式的選擇取決于表單容量及表單親密度。
原位編輯是輕量型信息采集表單,適用于表單編輯項(xiàng)較少(盡量低于5個(gè)編輯項(xiàng)),且屬于主功能分支的場(chǎng)景。其優(yōu)點(diǎn)在于操作便捷,隨時(shí)啟用與退出,能夠保證用戶對(duì)主要功能的操作流暢度。其存在的意義在于完善或者增強(qiáng)主功能的操作,而不是打斷。
使用場(chǎng)景:常用于列表及卡片,詳情內(nèi)也可以使用原位編輯(例如:詳情內(nèi)只有A和B可以編輯,且需分別編輯,此時(shí)建議用原位編輯進(jìn)行操作),需要注意的是,盡量不要用在長(zhǎng)文本編輯。
激活方式:信息展示區(qū)域通過(guò)雙擊、單擊、hover或點(diǎn)擊“編輯”按鈕即變?yōu)榧せ罹庉嫚顟B(tài)。最常見的比如:微信/企業(yè)微信修改群名就是單擊激活,列表、表格的點(diǎn)擊“編輯”激活,相比之下hover去激活相對(duì)用的少。
與頁(yè)面的親密度:親密度高,編輯內(nèi)容即為展示內(nèi)容,當(dāng)編輯內(nèi)容不止表格內(nèi)展示的字段數(shù)量,且存在聯(lián)動(dòng)關(guān)系時(shí),需慎重(例如:“部門”和“班次”屬于上下級(jí)聯(lián)動(dòng)關(guān)系,列表內(nèi)只顯示“部門”,而“班次”在詳情頁(yè)面顯示,則不適用原位編輯)。
使用場(chǎng)景:常用于條件篩選的設(shè)置,點(diǎn)擊或hover后顯示氣泡卡片內(nèi)容(建議不超過(guò)5個(gè)設(shè)置項(xiàng))。觸發(fā)生效機(jī)制可以是設(shè)置項(xiàng)點(diǎn)擊即生效,也可以多個(gè)設(shè)置項(xiàng)選擇后,觸發(fā)操作按鈕生效(操作按鈕建議不超過(guò)2個(gè)),觸發(fā)機(jī)制可以根據(jù)項(xiàng)目實(shí)際需求而定。
與頁(yè)面的親密度:親密度高,所見即所得,編輯前/后都不遮擋列表,用戶剛剛操做了什么,即在當(dāng)前展示操作后的結(jié)果,讓用戶感受到一切都在掌握之中,不會(huì)出現(xiàn)斷裂感,交互很友好;
(1) 彈窗
雖說(shuō)設(shè)計(jì)上對(duì)彈窗的使用都是持謹(jǐn)慎態(tài)度的,但希望大家也不要談彈窗就色變。彈窗的好處在于讓用戶更聚焦,且不用離開當(dāng)前頁(yè)面就能更快速更容易完成任務(wù)。
其實(shí)該使用彈窗的時(shí)候也是要用的,特別是在B端,如果彈窗能解決的問題,不建議頻繁的跳頁(yè)面去操作。如下例:下單錄入涉及添加產(chǎn)品,而產(chǎn)品信息字段又很多,不是一個(gè)模糊搜索就能解決的,此時(shí)建議使用彈窗而不是跳頁(yè)面去操作。來(lái)回跳頁(yè)面頻繁刷新,不如用彈窗選擇操作更為簡(jiǎn)單,在當(dāng)前頁(yè)的彈窗選擇產(chǎn)品,再將產(chǎn)品信息帶入當(dāng)前錄入頁(yè)面,此流程更符合用戶操作時(shí)的心理預(yù)期。
使用場(chǎng)景:所有頁(yè)面均可,3個(gè)以上的錄入項(xiàng)即可使用彈窗;需要注意保持交互一致性(例如:在列表“新增會(huì)員”點(diǎn)擊觸發(fā)是彈窗,在其他頁(yè)面也同樣要是彈窗);當(dāng)然也有特殊情況,例如:快捷新增時(shí)只需錄入一個(gè)名稱,可以先使用快捷操作添加極少的信息,后續(xù)在編輯頁(yè)面進(jìn)行補(bǔ)充;
與頁(yè)面的親密度:可以有強(qiáng)關(guān)聯(lián),也可以沒有關(guān)聯(lián)。有強(qiáng)關(guān)聯(lián)指的是,比如說(shuō):點(diǎn)擊“新增會(huì)員”按鈕彈出來(lái)的此彈窗,在其他也要用這個(gè)“新增會(huì)員”名稱,避免用戶迷茫(當(dāng)然了,很多新增和編輯其實(shí)用的同一個(gè)彈窗,這個(gè)特殊情況除外)。沒有關(guān)聯(lián)是指,可以在列表頁(yè)面使用“新增會(huì)員”彈窗,也可以在工作臺(tái)或者其他有需求的頁(yè)面去使用“新增會(huì)員”彈窗。
(2) 抽屜
抽屜彈窗也被稱為側(cè)彈窗,彈窗抽屜和彈窗很類似,使用場(chǎng)景和親密度都是一樣的。相比彈窗,抽屜的側(cè)邊彈出的交互方式,其操作成本和用戶使用心理負(fù)擔(dān)會(huì)小很多。
注意事項(xiàng):如果系統(tǒng)大部分用的彈窗,就優(yōu)先選用彈窗,如果表單內(nèi)增加了更多字段,可以換成抽屜彈窗;
使用場(chǎng)景:超出了彈窗/抽屜的承載量,就要用到頁(yè)面跳轉(zhuǎn)了,一般一級(jí)模塊的設(shè)置項(xiàng)也會(huì)用到頁(yè)面跳轉(zhuǎn),因?yàn)闀?huì)牽一發(fā)動(dòng)全身。還有初始化入駐也需要跳轉(zhuǎn)頁(yè)面進(jìn)行操作,不光因?yàn)樾枰峤淮罅啃畔?,還因?yàn)楦鞣N認(rèn)證審核需要一項(xiàng)一項(xiàng)進(jìn)行,此時(shí)用抽屜和彈窗承載內(nèi)容顯然不合適,因?yàn)閺棿昂统閷希碇焖偻瓿伞?
與頁(yè)面的親密度:跳轉(zhuǎn)了頁(yè)面,不管是新開頁(yè)面還是刷新原頁(yè)面,與原頁(yè)面的關(guān)聯(lián)性已經(jīng)沒那么強(qiáng)了,只能說(shuō)他們屬于同一條路徑下不同頁(yè)面。
根據(jù)內(nèi)容的多少及親密程度來(lái)決定,我們?cè)O(shè)計(jì)時(shí)應(yīng)選用哪種交互方式,或者可以直接根據(jù)內(nèi)容承載量做判斷也是可以的,從少到多依次此為:氣泡卡片-原位編輯-彈窗-抽屜-頁(yè)面跳轉(zhuǎn)。
排版布局的方式有四種:平鋪、分組、標(biāo)簽頁(yè)、分步驟。根據(jù)內(nèi)容項(xiàng)的多少及實(shí)際需求相應(yīng)合理的布局。
輸入信息的分類,是有效的減少用戶操作疲勞度的方法。分類的維度有多種,根據(jù)表單輸入內(nèi)容的相關(guān)性、內(nèi)容的所屬類別,可以將同類型的數(shù)據(jù)統(tǒng)一輸入,減少用戶輸入信息的跨度,提高輸入效率。
使用場(chǎng)景:平鋪顧名思義就是指表單項(xiàng)不做分組,全部平鋪展開,很多注冊(cè)和登錄都是這種布局。適用于表單項(xiàng)少,或者多但表單項(xiàng)之間親密性很強(qiáng),就無(wú)需額外分組,直接將表單項(xiàng)平鋪開展示,簡(jiǎn)單明了。
對(duì)于內(nèi)容過(guò)多的表單輸入頁(yè)面,分組、分模塊的排版方式讓用戶感覺更友好,不是密密麻麻一大片,讓人喘不過(guò)氣來(lái),而是有條理的布局,張弛有度,疏密有致。用戶可以在填寫好一段內(nèi)容后進(jìn)行心理上停頓休息,減少視覺疲勞和心理壓力。
(1) 標(biāo)題分組
使用場(chǎng)景:超過(guò)了7個(gè)設(shè)置項(xiàng),且較為復(fù)雜的表單,標(biāo)題分組之間的關(guān)聯(lián)性較弱,就可以去分類歸納表單信息,位的是降低用戶的認(rèn)知負(fù)擔(dān),提高用戶體驗(yàn)。注意:分組內(nèi)組內(nèi)設(shè)置項(xiàng)要有強(qiáng)關(guān)聯(lián)性,否則不能歸為一組,不能因?yàn)樽侄味?,為了分組去分組。
(2) 卡片分組
使用場(chǎng)景:7-15個(gè)設(shè)置項(xiàng),用標(biāo)題分組不足以給信息做層級(jí)區(qū)分,為了讓用戶在操作時(shí)更聚焦,也需要給用戶更明確的操作引導(dǎo),即可使用卡片分組。
卡片分組之間關(guān)聯(lián)性更弱,分類更明確,多個(gè)設(shè)置項(xiàng),多個(gè)分類。需要注意,一個(gè)表單項(xiàng)不要分過(guò)多的卡片分組,不能每?jī)身?xiàng)做一個(gè)分組,這反而會(huì)造成用戶視覺壓力和操作負(fù)擔(dān)。
使用場(chǎng)景:當(dāng)標(biāo)題分組和卡片分組都不足以對(duì)表單進(jìn)行分組時(shí),就可以考慮用tab切換了。每個(gè)設(shè)置都包含多個(gè)錄入,且使用了標(biāo)簽。
注意事項(xiàng):tab標(biāo)簽的填寫沒有先后順序的規(guī)則,標(biāo)簽頁(yè)彼此之間沒有特定的關(guān)聯(lián)性,可獨(dú)立去設(shè)置。也就是說(shuō)先填寫tab1還是先填寫tab2,對(duì)表單的其他tab項(xiàng)沒有任何影響,不存在聯(lián)動(dòng)關(guān)系。
標(biāo)簽頁(yè)對(duì)應(yīng)的詳情展示:一項(xiàng)一項(xiàng)上下鋪出來(lái),但如果表單詳情信息過(guò)長(zhǎng),可以考慮將錨點(diǎn)定位,點(diǎn)擊錨點(diǎn)定位的標(biāo)題即可自動(dòng)定位到該區(qū)域,方便用戶快速定位瀏覽位置。
使用場(chǎng)景:對(duì)輸入表單進(jìn)行分步驟的處理,可以降低用戶的操作頻率,給與用戶一定的休息空間,用戶會(huì)有階段性的成就感,同時(shí)分步驟的輸入還有利于減少信息的錯(cuò)誤率。如果輸入表單的內(nèi)容較多,同時(shí)輸入內(nèi)容有邏輯上的先后順序,此時(shí)可以考慮將輸入表單進(jìn)行分步驟處理。
利用步驟條,將大型、復(fù)雜任務(wù)拆解為多個(gè)部分,并按照相關(guān)性分組,可以提高用戶處理的專注度,降低頁(yè)面的復(fù)雜性,減輕用戶操作負(fù)擔(dān),降低用戶出錯(cuò)率,提高用戶體驗(yàn)。
根據(jù)內(nèi)容關(guān)聯(lián)性的強(qiáng)弱程度來(lái)決定,我們?cè)O(shè)計(jì)時(shí)應(yīng)選用哪種布局方式,或者可以直接根據(jù)復(fù)雜程度做選擇也是可以的,從弱到強(qiáng)依次此為:平鋪-標(biāo)題分組-卡片分組-標(biāo)簽頁(yè)/分步驟轉(zhuǎn)。
提高易用性的方式有以下四種分別為:視覺清晰、信息降噪、智能、準(zhǔn)確易懂,每個(gè)表單,每個(gè)頁(yè)面都要應(yīng)用這四項(xiàng)準(zhǔn)則,不光是在表單頁(yè)面,所有頁(yè)面都適用。
布局方式-單列布局:常見的表單布局為單列信息展示布局,比如:蘋果、飛書、釘釘、有贊、微盟等首選使用單列布局進(jìn)行頁(yè)面排版。設(shè)計(jì)中盡量采用單列布局,是為保證用戶的視覺動(dòng)線流暢,不容易遺漏信息;
在輸入項(xiàng)較多時(shí),每次填寫完一項(xiàng)都要鼠標(biāo)選中下一個(gè)輸入框,很容易讓用戶失去耐心,而單列布局恰好能解決這個(gè)問題并提高用戶體驗(yàn),輸入完一項(xiàng)按enter鍵可快速切換至下一項(xiàng),提高用戶操作效率。
當(dāng)然了按Tab鍵也是一樣的效果,只是,一般情況下,大眾都更習(xí)慣也更熟悉回車鍵的位置,需要注意的是,長(zhǎng)文本輸入框的屬性里回車鍵是文本換行的意思,需要區(qū)別設(shè)置兩者的操作機(jī)制。
布局方式-橫向布局:橫向布局也是單列布局,是它的發(fā)散版本。如果出于業(yè)務(wù)方復(fù)雜需求的考慮,必須在橫向增加內(nèi)容,那增加的表單項(xiàng)一定要和前表單項(xiàng)有關(guān)聯(lián),才可作為分組橫向排列,還需注意不能出現(xiàn)Y軸平行豎向分組(如下圖),避免用戶迷?;蜻z漏信。
(1) 合理設(shè)置必填項(xiàng)
正常情況下,我們標(biāo)示“*”標(biāo)就是為了提示用戶此項(xiàng)必須要填寫方能提交單據(jù)。
但當(dāng)一個(gè)編輯頁(yè)面的必填項(xiàng)非常多時(shí),就可以無(wú)需標(biāo)注必填,只標(biāo)明哪些是非必填項(xiàng)就行。
當(dāng)編輯頁(yè)全部都是必填項(xiàng)時(shí),可在大標(biāo)題處用標(biāo)示必填即可。
(2) 折疊不重要非必填信息
在能完整獲取需要信息的前提下,輸入項(xiàng)越少越好,當(dāng)表單頁(yè)很長(zhǎng),且有些信息非必填,或者說(shuō)填寫后的意義不大。這樣的情況下可以考慮將非必要信息折疊收起,點(diǎn)擊“展示更多”下拉展開全部表單項(xiàng),讓用戶可以選擇性錄入不重要的信息。
(1) 智能填寫
根據(jù)上下文信息可自動(dòng)獲取的,無(wú)需用戶再次填寫。如下例:通過(guò)客戶名稱數(shù)據(jù)庫(kù)可自動(dòng)匹配客戶手機(jī)號(hào),或者通過(guò)手機(jī)號(hào)匹配客戶名稱。填寫郵寄信息的時(shí)候,只需選擇省市區(qū),郵政編碼便自動(dòng)填充,減少了用戶查找郵政編碼的繁瑣(甚至可以提議“郵政編碼”字段直接去掉)。而生日和性別都可以在身份證號(hào)內(nèi)提取。
(2) 智能排序
默認(rèn)高頻:當(dāng)選擇器內(nèi)容超過(guò)5個(gè)選則項(xiàng)時(shí),可以對(duì)內(nèi)容選項(xiàng)進(jìn)行一定排序規(guī)則(首字母排序、數(shù)字排序或設(shè)置默認(rèn)高頻選項(xiàng)等),方面用戶提前預(yù)知選項(xiàng)的大致位置,檢索找到相應(yīng)的選項(xiàng)。
(3) 智能聯(lián)想
智能聯(lián)想是給予用戶鍵入字段的聯(lián)想功能,用戶少量輸入后進(jìn)行選擇。錄入方式由原來(lái)的輸入變成半輸入后選擇,減少用戶的輸入成本,提高用戶操作效率。
自動(dòng)搜索:當(dāng)下拉選項(xiàng)超過(guò)16個(gè)時(shí),建議加入輸入選擇功能,用戶可使用下拉選擇,也可以輸入關(guān)鍵字后智能匹配顯示對(duì)應(yīng)的選項(xiàng)?;蛘呖梢栽偌由闲畔⑴判颍鶕?jù)點(diǎn)擊頻次進(jìn)行排序,高頻選項(xiàng)前置。
后綴聯(lián)想:一般用于郵箱信息的錄入,當(dāng)輸入內(nèi)容后,自動(dòng)將默認(rèn)高頻的郵箱后綴作為補(bǔ)充數(shù)據(jù)填充在后方,減少用戶的輸入。
操作直觀:去除冗余且無(wú)用的部件:切換“開關(guān)”操作后會(huì)立即生效展示結(jié)果,無(wú)需與操作按鈕搭配使用,避免造成用戶的誤解,導(dǎo)致體驗(yàn)不友好。
準(zhǔn)確的錯(cuò)誤提示:反饋提示是頁(yè)面系統(tǒng)對(duì)用戶的輸入的內(nèi)容進(jìn)行的校驗(yàn),并對(duì)校驗(yàn)結(jié)果予以展示的提示形式。可分為前端校驗(yàn)和后端校驗(yàn)兩種。
錯(cuò)誤提示的時(shí)候要給用戶錯(cuò)誤的具體內(nèi)容,而非簡(jiǎn)單粗暴的錯(cuò)誤提示。例如:登錄時(shí)不能單純?nèi)ヌ崾尽澳斎氲男畔⒂姓`”,需準(zhǔn)確提示是賬號(hào)信息錯(cuò)誤,還是密碼校驗(yàn)錯(cuò)誤。
前端校驗(yàn):也被稱為“即時(shí)校驗(yàn)”,一般是校驗(yàn)顯現(xiàn)的數(shù)據(jù)內(nèi)容,比如字符長(zhǎng)度、格式(是否包含非法字符)、是否為空等。該方式的校驗(yàn)條件多在本地,無(wú)需實(shí)時(shí)向服務(wù)器發(fā)命令而得到反饋。
后端校驗(yàn):包含“局部校驗(yàn)”和“全局校驗(yàn)”,局部校驗(yàn):在注冊(cè)賬號(hào)時(shí),輸入完整用戶名以后,提示用戶名是否可用,則為局部校驗(yàn)反饋。全局校驗(yàn)反饋:多指在輸入完成提交或者階段性完成(分步驟跳轉(zhuǎn)下一步)時(shí),系統(tǒng)給出的校驗(yàn)反饋。在用戶操作反饋動(dòng)作按鈕后,界面在相應(yīng)位置(一般為單個(gè)輸入框的下方或右側(cè))一次性給出對(duì)應(yīng)的錯(cuò)誤提示。
文章來(lái)源:UI中國(guó) 作者:AI-玲玲
藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com