小龔

根據組件的用途,可以分為六大類:Feedback 反饋、form 表單、basic 基礎、data 數據 、navigation 導航、other 其他。

 

表單在網頁中主要負責數據采集功能;用戶需要填寫輸入數據并且提交到數據庫,則這種組件就是表單類。

本文主要講解表單中的文本和選擇器,其中文本分為input短文本、InputAutocomplete 短文本聯想和InputMultiline 長文本。

 

input 短文本

定義:用于用戶文本輸入,并以字符串的方式提交到數據庫。

使用場景:

  • 1.用戶需要輸入字符時
  • 2.通過鼠標鍵盤輸入內容
  • 3.輸入的文本通常置于輸入框

例如網易考拉優惠券兌換的表單填寫,就是短文本輸入組件,前面是標題,后面是文本輸入框。

input短文本組件的展示形式可以分為三類。

  • 第一類是標題和輸入框左右排列;
  • 第二類是標題和輸入框上下排列;
  • 第三類不需要標題的排列。

 

標題和輸入框左右排列時,短文本組件存在的狀態有:初始態、激活態、報錯態、完成態和禁用態。

常見的表單類排版都是左右排版,同時表單之間,標題采用左對齊,輸入框左對齊的情況比較多。有時候標題名字過長這樣話 左右排列就不夠好,這時候需要采用上下排列。

標題和輸入框上下排版時,存在狀態和左右排列是一致的。

 

當沒有標題時,存在狀態同左右排列的規則和邏輯。

 

InputAutocomplete 短文本聯想

定義:用戶用于文本輸入,在輸入過程中會聯想匹配文本選項,并以字符串的方式提交到數據庫。

使用場景:

  • 1.需要用戶輸入文本時。
  • 2.提供聯想匹配文本,減少用戶輸入成本。
  • 3.在輸入過程中根據用戶輸入的內容,出現匹配選項,提交的數據是文本而非枚舉項。

 

例如百度搜索,在輸入框輸入關鍵詞時會出現對應的聯想匹配文本。

和input短文本組件相比,短文本聯想唯一的不同就是新增了聯想匹配選項,并且提交的是文本而非枚舉項。

 

標題和輸入框左右排列時,短文本聯想組件存在的狀態有:初始態、激活態、報錯態、完成態和禁用態。

 

上下排列的狀態和規則邏輯同左右排列。

 

不含標題的狀態和規則邏輯同左右排列。

 

InputMultiline 長文本

定義:用戶用于長文本輸入,并以文本的方式提交到數據庫。

使用場景:

  • 1.多段文字輸入
  • 2.需要換行
  • 3.輸入的文本通常置于輸入框中

 

例如新浪微博,在輸入框發微博時,就是長文本輸入,可以換行。

 

標題和輸入框左右排列時,InputMultiline 長文本存在的狀態有:初始態、激活態、報錯態、完成態和禁用態。在輸入過程中一般有字數統計,超過限制字數,不允許用戶輸入。

 

上下排列邏輯和規則同左右排列。

 

不含標題的邏輯同左右排列。

 

 

select 選擇器

定義:用戶通過選擇枚舉項,提交到服務器。后端存儲為枚舉項。

使用場景:

  • 1.彈出一個下拉選項給用戶選擇操作
  • 2.當選項少時(少于 5 項),建議直接將選項平鋪,使用?Radio?是更好的選擇。

 

例如淘寶賣家后臺篩選訂單的狀態時,點擊選擇器,出現下拉列表。這就是一個常見的選擇器,選擇器分為多選和單選兩大類,

 

下圖為選擇器基本樣式,就是簡單的下拉選項,不可進行關鍵詞的搜索。

 

下圖是可以搜索的選擇器,當輸入框處于激活態時,浮出下拉列表。在輸入過程中,出現匹配枚舉項,點擊枚舉項,則輸入的關鍵詞清空,同時下拉選項收起。輸入框出現選擇的選項。

有時候存在一個場景。用戶對需要填寫的選項設為空選項,則需要空值的選項。

有時候存在一個場景,用戶選擇了一個選項,但是后面想去掉選擇的選項,不進行選擇。

選擇器多選組件中需要注意的一點就是:用戶在輸入關鍵詞中,選擇對應下拉選項,則輸入的字符串清空,同時出現該選項tag。

 

相關閱讀

如何構建Web端設計規范

設計規范 | Web端設計理念篇

設計規范 | Web端設計組件篇-反饋類

 

封面作者:Kateryna Musayeva

作者:Echo(微信公眾號:UEDC)

Echo-erweima2

轉載請注明:學UI網 » 設計規范 | Web端設計組件篇-文本與選擇器

登錄收藏
 
你可能喜歡的:
從「科學方法」到「設計實踐」 – 云產品設計師會夢見服務器么?從「科學方法」到「設計實踐」 – 云產品設計師會夢見服務器么?
從「物種起源」到「設計進化論」- 阿里云設計語言哲思從「物種起源」到「設計進化論」- 阿里云設計語言哲思
中臺系統基礎知識- 文字規范系統中臺系統基礎知識- 文字規范系統
組合組件的交互規范整理方法組合組件的交互規范整理方法
今天,我對標簽的理解,透了!今天,我對標簽的理解,透了!
既然已經有了iOS、Android規范了,為什么我們還是要整理規范既然已經有了iOS、Android規范了,為什么我們還是要整理規范
組件化思維的設計流程組件化思維的設計流程
設計沉思錄丨如何搭建一份高質量的設計規范設計沉思錄丨如何搭建一份高質量的設計規范
iOS13 的設計趨勢及思考分享iOS13 的設計趨勢及思考分享
聽說你們設計稿里的控件總是亂糟糟的?聽說你們設計稿里的控件總是亂糟糟的?
?
街机捕鱼城金库券