<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • B端表單標簽」要怎么對齊才好

    2025-4-23    藍藍設計的小編

    B端表單標簽的對齊方式對用戶體驗和界面設計至關重要。本文深入探討了不同表單標簽對齊方式的優劣勢及適用場景,包括行內標簽、頂標簽、左標簽文字右對齊和左標簽文字左對齊等,幫助設計師在實際工作中做出最佳選擇,提升表單填寫效率和用戶體驗。

    表單作為B端系統最常見的組件之一,一些常見的do、don’t想必大家已經十分熟。今天我們嘮一嘮【表單標簽】這個細節。

    在一些成熟的組件庫中,大都提供了上下布局的頂標簽、左右布局的左標簽等樣式可供選擇。左標簽樣式,在不同的產品中,又存在標簽文字左對齊、右對齊的情況,那它們之間差異在哪呢?如何選擇呢?

    最近工作中,正好在梳理相關的規范,于是把自己的一些思考及處理經驗整理了一下,分享出來~

    先對齊一下語言:表單標簽、表單域。

    會從這幾個維度進行比較,放一個簡易版表格,下文細說。

    ① 行內標簽

    優勢:

    • 瀏覽速度快:可用性測試結果顯示,行內標簽樣式下,人眼從標簽移動到域的時間僅為10ms,是幾種樣式中最快的。視覺路徑一路向下,很流暢。
    • 標簽文字彈性寬度大,可與域等寬。
    • 節約空間:標簽、域合二為一,不單獨占空間。

    劣勢:

    用戶操作阻塞:如輸入框聚焦,輸入內容時,行內標簽隱藏,用戶操作會受阻。

    使用場景:

    一般用于用戶心智已經十分成熟的頁面,比如登錄頁、注冊頁等。

    ② 頂標簽

    優勢:

    • 瀏覽查看、填寫均有優勢:標簽與域的距離接近,同時符合用戶從上到下的視覺動線,操作會很連貫、流暢。
    • 標簽文字彈性寬度大。
    • 頁面橫向空間節約。

    劣勢:

    Y軸屏效低:對頁面縱向空間的利用率會比較低。

    使用場景:

    • 適合移動端表單填寫場景。
    • 適用于英文等語言場景,相同意思下需要更多的字符表示,寬度更寬。
    • web端頁面兩側狹長工具欄。
    • 希望用戶快速填寫表單且錄入項數量不多時,比如,將復雜的長難表單拆解分步驟填寫,每一步驟表單用頂標簽表單。

    ③ 左標簽-文字右對齊

    優勢:

    • 填寫優勢:標簽和域的距離比文字左對齊更近,視覺關聯較明確,便于用戶填寫。
    • 提升Y軸屏效:較于頂標簽,節省頁面縱向空間。

    劣勢:

    • 影響閱讀效率:文字右對齊導致左側參差不齊,不利于快速瀏覽表單。
    • 標簽文字彈性寬度小:標簽文字需精簡,超過規定寬度出現換行,不適合狹長的空間場景。

    使用場景:

    • 常用于web端表單填寫場景。
    • 頁面縱向空間緊張,但又需要保證填寫效率時使用。

    ④ 左標簽-文字左對齊

    優勢:

    • 快速查看優勢:標簽文字左側對齊,方便用戶從上到下快速掃視表單整體情況。
    • 提升Y軸屏效:相較于頂標簽,節省頁面縱向空間。
    • 相較于文字右對齊視覺上更規整。

    劣勢:

    • 標簽與域的距離最遠,人眼從標簽移動到域的時間為500ms,視覺動線頻繁跳動影響填寫表單的效率。
    • 標簽文字彈性寬度小:標簽文字需精簡,超過規定寬度出現換行,不適合狹長的空間場景。

    使用場景:

    • 敏感數據表單填寫:希望用戶進行仔細閱讀確認、放慢填寫速度時使用,比如,準入資格認證等場景
    • 陌生數據表單填寫:表單中含有大量可選的表單域、大量需要高級設置的陌生數據時,或問題無法被分成易處理的內容組,左對齊標簽更易于用戶多次瀏覽閱讀標簽信息。
    • 表單詳情查看場景。
    • 表單域也分左、右對齊,常見于移動端,兩種對齊方式也一起對比一下。

    ⑤ 域-右對齊

    優勢:

    • 標簽文字彈性寬度大、更靈活。
    • 視覺上兩端對齊,填寫時不容易漏填。
    • 縱向空間利用率高。

    劣勢:

    • 標簽與域的距離遠,視覺跳動影響填寫效率。
    • 使用場景:
    • 移動端表單填寫。
    • web端兩側狹長工具欄,兩端對齊會更美觀。

    ⑥ 域-左對齊

    優勢:

    • 相較于域右對齊,標簽、域距離更接近,視覺移動速度更快,從上到下的視覺動線更舒服。
    • 縱向空間利用率高。

    劣勢:

    • 選擇器等類型的表單域,提示圖標距離選項較遠。
    • 標簽文字彈性寬度小,需要寬度限制換行顯示。

    使用場景:

    • 移動端表單查看/填寫。

    本文由人人都是產品經理作者【Clippp】,微信公眾號:【Clip設計夾】

    原文鏈接:https://www.woshipm.com/share/6208137.html

    原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。

    題圖來自Unsplash,基于 CC0 協議。

    蘭亭妙微(藍藍設計)m.skdbbs.com 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計APP界面設計圖標定制用戶體驗設計交互設計UI咨詢高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

    image.png

    關鍵詞:UI咨詢UI設計服務公司軟件界面設計公司、界面設計公司、UI設計公司UI交互設計公司數據可視化設計公司用戶體驗公司高端網站設計公司銀行金融軟件UI界面設計能源及監控軟件UI界面設計氣象行業UI界面設計軌道交通界面設計地理信息系統GIS UI界面設計航天軍工軟件UI界面設計醫療行業軟件UI界面設計教育行業軟件UI界面設計企業信息化UI界面設計、軟件qt開發軟件wpf開發軟件vue開發

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://m.skdbbs.com

    存檔

    主站蜘蛛池模板: 午夜精品久久久久久久无码| 人妻精品久久无码区| 自拍偷在线精品自拍偷| 久久国产精品久久精品国产| 亚洲午夜国产精品无码| 国产在线精品一区二区高清不卡| 91精品国产色综合久久| 中文成人无码精品久久久不卡| 国产成人精品日本亚洲专区| 97精品国产91久久久久久| 亚洲综合精品香蕉久久网| 国产午夜精品一区二区三区不卡| 99精品国产自在现线观看| 亚洲av成人无码久久精品| 欧美成人精品第一区二区| 国产精品第1页| 2021国产三级精品三级在专区| 国产精品无码AV一区二区三区| 亚洲一区二区精品视频| 精品无码综合一区| 国产精品无码专区在线观看| 夜色www国产精品资源站| 国产成人精品综合网站| 精品一区二区三区在线观看视频| 在线涩涩免费观看国产精品| 久久久久99精品成人片| 国产精品高清2021在线| 3级黄性日本午夜精品| 国产精品久久久久久福利漫画 | 99久久久精品免费观看国产| 无码国产69精品久久久久网站 | 日本VA欧美VA欧美VA精品| 精品国产免费一区二区三区香蕉| 日韩精品无码一区二区三区不卡| 日韩欧美亚洲国产精品字幕久久久| 精品人妻伦九区久久AAA片69| 国产欧美日韩综合精品二区| 国产亚洲色婷婷久久99精品91| 狠狠精品干练久久久无码中文字幕 | 69国产成人综合久久精品| 国产精品无码无片在线观看|