超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

B端-表單設(shè)計(jì)指南

2023-6-29    博博

一、什么是表單頁

1.1表單頁滿足的核心場景
1、采集/錄入數(shù)據(jù)信息。2、編輯數(shù)據(jù)信息。3、特殊的條件設(shè)置。后臺產(chǎn)品的本質(zhì)是針對數(shù)據(jù)的增、刪、改、查。而增、改、查都可以用表單完成。

1.2常見的應(yīng)用場景
OA系統(tǒng)里面的請假申請,報(bào)銷申請,錄入員工,新建會議。教育類的創(chuàng)建課程。HRM系統(tǒng)里面發(fā)布職位以及物聯(lián)網(wǎng)管理系統(tǒng)新建設(shè)備等等。

二、表單頁設(shè)計(jì)原則

2.1明確
用戶快速定位重要信息和目標(biāo)選項(xiàng)同時(shí)文案和組件能夠準(zhǔn)確傳達(dá)相應(yīng)含義

2.2高效
整體表單排布有合理的交互形式;科學(xué)的信息布局和組織形式;盡可能“少操作一步”用戶在面對50和表單和500個(gè)表單的心理壓力是不一樣的。

2.3安全
操作前:提示和防錯(cuò)。
操作中:實(shí)時(shí)反饋與糾錯(cuò)
操作后:合理的保存、清空、取消、撤銷機(jī)制。

三、表單的構(gòu)成
表單通常由表單標(biāo)簽、表單域、提示提示、操作按鈕四部分構(gòu)成。

3.1表單標(biāo)簽

左標(biāo)簽
優(yōu)點(diǎn):表意明確,節(jié)約縱向空間,多用于web端
缺點(diǎn):不太適用于移動端等狹長空間

頂標(biāo)簽
優(yōu)點(diǎn):對齊舒適,節(jié)約橫向空間,多用于移動端及英文場景下。
缺點(diǎn):縱向空間利用率不高

行內(nèi)標(biāo)簽
優(yōu)點(diǎn):最節(jié)省空間,多用于注冊登錄
缺點(diǎn):輸入狀態(tài)標(biāo)簽消失,用戶陷入迷茫

左對齊標(biāo)簽
視線從標(biāo)簽移動到表單域時(shí)間為500ms,這比右對齊標(biāo)簽所用的時(shí)間長的多,所以更適合閱讀,用于詳情的陳列。
特點(diǎn):閱讀效率高,操作效率較低;

右對齊標(biāo)簽
視覺動線參差不齊,不適合高效閱讀,但適合高效操作,更適合表單填寫。
特點(diǎn):閱讀效率不高,標(biāo)簽指向明確,操作效率高

3.2表單域

如何定義輸入框/選擇框大???
步驟一:根據(jù)業(yè)務(wù)已經(jīng)有的字段長度定義4-5種寬度規(guī)范,建議寬度可以是8或者是40的倍數(shù)。

步驟二:根據(jù)你要搭建的表單,選用合適的規(guī)范,長度與輸入預(yù)期成正比。有人會說排出來的表單左邊沒對齊,右邊也沒對齊,其實(shí)這就是B端產(chǎn)品特征那就是是好用大于好看,就要給用戶一種心智那就是給你的這個(gè)長度那就是要輸入一個(gè)這么長的內(nèi)容。

3.3提示信息

避免“正確的廢話”:給不到用戶任何的幫助還增加了用戶的閱讀成本。

提示信息用哪種展示方式?

3.4操作按鈕
按鈕常見位置:一般出現(xiàn)在頁面頂部、跟隨表單里的內(nèi)容、表單內(nèi)容底部、頁面底部。
按鈕閱讀順序:按鈕出現(xiàn)頁面右上角或右下角時(shí),閱讀順序是從右往左,這符合pc端操作習(xí)慣以及人閱讀習(xí)慣。按鈕跟隨表單內(nèi)容或在表單內(nèi)容底部時(shí),閱讀順序?yàn)閺淖笸遥@符合人的填寫順序從上往下,從左往右。

底部按鈕右對齊:一般用在彈框,因?yàn)閺椏蝽撁姹容^小,右對齊比較符合操作習(xí)慣。
底部按鈕居中:一般用在頁面中,因?yàn)橛蚁陆遣僮骶嚯x會有點(diǎn)遠(yuǎn),所以表單用頁面承載的話按鈕建議居中。

3.5字體和間距規(guī)范
表單中字體全部統(tǒng)一采用14px。表單上下間距一般有三種,1.內(nèi)容與內(nèi)容間距為24px。2.內(nèi)容與說明文案間距為4px。3.內(nèi)容與子內(nèi)容間距以及及子內(nèi)容之間的間距為8px。

四、表單交互

表單交互方式有四種。1.原位編輯;2.氣泡卡片;3.彈窗/抽屜;4.頁面跳轉(zhuǎn)。

原位編輯
編輯內(nèi)容即為展示內(nèi)容,容量低于5個(gè)時(shí)使用。

氣泡卡片
設(shè)置項(xiàng)與看板內(nèi)容緊密相關(guān)時(shí)使用氣泡卡片,建議設(shè)置項(xiàng)低于5個(gè)。

彈窗/抽屜
設(shè)置項(xiàng)與看板內(nèi)容可以有關(guān)聯(lián)也不可以沒有,大于三個(gè)以上的錄入項(xiàng)使用。

如果錄入項(xiàng)較多,用彈框承載出現(xiàn)翻頁的情況下可考慮使用抽屜。

頁面跳轉(zhuǎn)如果容量超出了彈框/抽屜的承載量并且錄入項(xiàng)與看板沒有那么強(qiáng)的關(guān)聯(lián)性可采用頁面跳轉(zhuǎn)的方式。
五、頁面布局

頁面布局方式有四種。1.分組;2.錨點(diǎn)定位;3.標(biāo)簽頁;4.分步驟

5.1分組

5.1.1標(biāo)題分組
設(shè)置項(xiàng)超過7個(gè);彼此間的關(guān)聯(lián)性較弱且可以分類去歸納

5.1.2卡片分組有多個(gè)設(shè)置項(xiàng),多個(gè)分類;彼此之間的關(guān)聯(lián)性更弱,分類明確

5.2錨點(diǎn)定位
有多個(gè)分類的情況可通過錨點(diǎn)定位迅速找到相關(guān)信息

5.3標(biāo)簽頁
彼此之間沒有特定的相關(guān)性,可以獨(dú)立設(shè)置。每個(gè)設(shè)置包含了多個(gè)錄入項(xiàng)且使用了標(biāo)題分組。

小結(jié)當(dāng)錄入項(xiàng)少于7個(gè)時(shí)使用基礎(chǔ)布局;當(dāng)錄入項(xiàng)在7-15個(gè)時(shí)可采用標(biāo)題分組,卡片分組、錨點(diǎn)定位布局;當(dāng)錄入項(xiàng)大于15個(gè)時(shí)需采用標(biāo)簽頁布局。
5.4分步驟
利用步驟條將大型,復(fù)雜任務(wù)拆解為多個(gè)部分,并按照相關(guān)性分組。

建議3種分組依據(jù)1.采用必填項(xiàng)劃分,把必填的選項(xiàng)分在一起;2.采用相關(guān)性劃分;3.以操作成本劃分。把好填的簡單的表單放在前面,復(fù)雜的放在后面。

六、提升表單易用性
提升表單易用性方式有5種。1.信息降噪;2.清晰易讀;3.高效智能;4.防錯(cuò)糾錯(cuò);5.所見即所得

6.1信息降噪
場景一:當(dāng)表單中大多數(shù)都是必填只有極少數(shù)非必填時(shí)

場景二:表單項(xiàng)非必填項(xiàng)比較多,可將低頻的非必填項(xiàng)收起

6.2視覺清晰
場景一:盡量采用單列布局,視覺動線流暢,不容易遺漏信息;按enter鍵換行。

場景二:如果出于業(yè)務(wù)方需要,必須在橫向添加內(nèi)容,那最好有一定的分組依據(jù)。但這樣就不應(yīng)該出現(xiàn)豎向分組,以免遺漏信息。

6.3高效智能

6.3.1根據(jù)上下文信息可以自動獲取的,無需用戶再次填寫。
例如根據(jù)手機(jī)號帶出用戶姓名;根據(jù)地址帶出郵政編碼;根據(jù)身份信息帶出生日。

6.3.2提供合適的“默認(rèn)項(xiàng)”。
例如根據(jù)行業(yè)現(xiàn)狀提供常規(guī)的比例分配;根據(jù)定位把地區(qū)做默認(rèn)的填充。

6.3.3提供搜索、聯(lián)想,自動顯示匹配的信息
用戶在進(jìn)行輸入等操作時(shí)可以提供智能輔助,例如表單填寫時(shí)對需要錄入信息的區(qū)域提供輔助提示,通過自動補(bǔ)全或聯(lián)想詞來幫助用戶快速錄入信息,在保持用戶的操作自由度的情況下提效。

6.3.4 OCR識別文件內(nèi)容
對于一些標(biāo)準(zhǔn)證件信息的錄入,可以通過OCR識別文件內(nèi)容。當(dāng)用戶上傳圖片后,運(yùn)用圖像識別技術(shù)提取關(guān)鍵信息并自動填入結(jié)果。

6.4防錯(cuò)糾錯(cuò)

6.4.1對于長數(shù)字,四位一空格,用來分段
例如輸入銀行卡號;充值場景下輸入手機(jī)號等

6.4.2為用戶封閉不正確道路
將超出時(shí)間選擇范圍的日期置灰。電話號、身份證錄入時(shí)只允許輸入數(shù)字同時(shí)設(shè)置字?jǐn)?shù)上限。

6.4.3告訴用戶哪里錯(cuò)了,而非簡單粗暴的錯(cuò)誤提示

6.5所見即所得
表單頁對填寫的物料內(nèi)容進(jìn)行映射,展示真實(shí)效果預(yù)覽,降低用戶心理的不確定性。適合對移動端、小程序、H5頁面的設(shè)置。

七、體驗(yàn)衡量指標(biāo)
體驗(yàn)衡量指標(biāo)有4種。1.任務(wù)完成率;2.任務(wù)完成時(shí)長;3.必填項(xiàng)目數(shù);4.易用度評分

7.1任務(wù)完成率

7.2任務(wù)完成時(shí)長

7.3必填項(xiàng)目數(shù)
結(jié)合業(yè)務(wù)場景給出最適合的必填項(xiàng)設(shè)定,提高用戶填寫效率。

7.4易用度評分(用戶完成某項(xiàng)任務(wù)的難易程度)
易用度可通過調(diào)研問卷和評分量表獲取。

作者:鯤sky
來源:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加微信ban_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔