我玩弄美艳馊子高潮

<center id="eowky"></center>
<center id="eowky"><div id="eowky"></div></center>
<code id="eowky"></code><code id="eowky"><div id="eowky"></div></code>
<optgroup id="eowky"></optgroup>
產品banner
您當前的位置 : 首 頁 > 新聞資訊 > 行業動態

表單標簽對齊方式如何選?

2021-05-22 08:48:57

格潤導語:表單是最常用的信息錄入工具,日常生活中,我們每個人都在和各種表單打交道。本文作者結合案例對表單標簽的樣式及設計注意事項進行了詳細的說明,相信對表單標簽不熟悉的同學看完后肯定會有不少的收獲~

輸入設計和表單設計是產品經理與交互設計師的核心技能,你可以把它們用在各類軟件和各種平臺上。

一、首先什么是標簽?

我們先來復習一下文本輸入框的構成。膜內標簽,膜內標簽廠家

△文本輸入框的構成

  1. 文本容器/Container—可交互的輸入區域

  2. 輸入文本/Input text—所輸入的文本內容

  3. 標簽文本/Label Text—告訴用戶這個表單字段中要輸入的內容屬性

  4. 占位符文本/Placeholder text—輸入信息的范例,用戶后續需要用自己的內容替代它

  5. 幫助和驗證(可選)/Helper or Validation text(optional)—提供上下文信息和驗證信息

  6. 引導圖標(可選)/Leading icon(optional)—描述文本字段所需的輸入類型和特征

  7. 后綴圖標(可選)/Trailing icon(optional)—對輸入內容進行控制,比如顯示和隱藏

我們今天要聊的就是第3點:標簽文本/Label Text。

標簽應該用人們能明白的語言提出簡潔問題,以便于回答。

但依舊依賴于表單元素的布局。

二、標簽對齊方式

輸入框標簽應當頂對齊、右對齊還是左對齊?

先來看看這幾種對齊方式的優缺點。

1. 頂對齊標簽/Top aligned labels

△頂對齊標簽

優點:

  • 頂對齊時間最快,由于標簽和輸入框的位置非??拷?,處理起來毫不費力。清晰的完成路徑,只需要往下移動。

  • 提供了大量的橫向空間,可以用來擴大或者收縮標簽文字,而不會對整個頁面布局產生負面影響。

  • 比如說法語、德語荷蘭語比英語長很多的語言,容易對表單布局產生破壞力。

  • 橫向空間的富余,可以以多種方式組合相關輸入框。

缺點:

  • 占用額外的縱向空間。

  • 如果可供使用的垂直較小,要謹慎使用。

eg: Amazon 寄送地址表單的頂對齊標簽提供了充??臻g,可水平分組相關內容.

2. 左對齊標簽/Left-aligned labels

△左對齊標簽

優點:

  • 容易瀏覽標簽,只要上下瀏覽表單問題,不會被輸入框打斷。

  • 垂直空間占用少。

缺點:

  • 標簽和相關輸入框相鄰間距過大,延長完成時間。

  • 根據馬泰奧的研究,“典型掃視時間為500毫秒,很長,說明用戶經歷著沉重的認知壓力?!?/p>

  • 雖然速度是最慢的,但從辯證的角度來看,完成時間較長并不一定是壞事。

  • 有時候我們需要用戶謹慎的對待表單的填寫,特別是表單含有大量可選輸入框,類似“使用偏好”或者高級設置陌生數據時,就可以使用左對齊標簽。

3. 右對齊標簽/Right-aligned labels

△右對齊標簽

優點:

  • 標簽和相關輸入框相鄰,能快速填完;

  • 垂直空間占用少。

缺點:

  • 右對齊布局造成左側不齊,可讀性降低;

  • 不夠靈活,如果標簽需要兩行文字進行展示,會導致閱讀困難。

  • 但如果既要減少表單占用的垂直空間,又要減少填表時間的話,右對齊標簽不失為一個較好的選擇。

eg: Jira 創建故事表單采用右對齊標簽布局

4. 輸入框內標簽/Label in the input box

優點:

對屏幕的占用空間非常小

缺點:

  • 填寫輸入框時,輸入框的標簽會消失,因此用戶看不到提示;

  • 填完后,也無法檢查對錯。

  • 且輸入框內的標簽要明確的表明自己是標簽,而不是已填數據。

  • 輸入框內標簽更適合用于只有一個問題(比如搜索框)或者幾個輸入框的表單或者問題非常熟悉的表單(比如通訊錄)。

eg:Dribbble 搜索頁面為輸入框內標簽

5. 浮動標簽/Float label

當用戶在Text field中輸入內容以后,內嵌Label會浮動到Text field上方,成為頂端對齊。

優點:兼具內嵌Label和頂端對齊的優點

缺點:輸入內容后,標簽顯示過小,對于小屏幕和視力不佳的用戶來說是個挑戰。

eg:Yahoo登錄頁面,輸入框為浮動標簽

總結

  • 頂對齊標簽,能減少填寫時間,適用于本地化,標簽長度可以靈活多變。

  • 右對齊標簽,與頂對齊標簽類似,但可以減少垂直空間的占用。

  • 左對齊標簽,要求人們仔細填寫或者回答多個問題中的若干特定問題。

  • 輸入框內標簽,表單問題少,屏幕空間非常有限。

  • 浮動標簽,注意場景與使用者視力問題。

  • 注意區分標簽與數據。


標簽

近期瀏覽:

科技創新 誠信為本

備案號: 蘇ICP備20021146號-1
技術支持:合肥浮云文化

公司信息

聯系方式:

楊先生:13951937374  沈先生:18019960802

座機:

025-52729058

地址:

南京江寧開發區蘇源大道121號

我玩弄美艳馊子高潮