杭州嵌入式培訓
達內杭州嵌入式培訓中心

13732203138

熱門課程

B端信息錄入:輸入框基礎設計細節解析(二)

  • 時間:2020-06-08 14:55
  • 發布:杭州嵌入式培訓
  • 來源:網絡

上一期我們已經了解了B端輸入框基礎設計細節有了比較全面的介紹,本期我們來了解下輸入框的一些拓展運用,希望對各位能有所幫助。

目錄

一. 輸入框字段標簽的位置

二. 必填標簽位置

三. 輸入建議枚舉

四. 復合輸入框

五.特殊信息錄入

六.輸入框添加操作區

七 .畫重點

輸入框字段標簽的位置

關于輸入框字段標簽的位置通常分布在左側、頂部

左側標簽

左側標簽是非常常用的字段標簽展示方式,其優點是易于擴展,可以充分利用垂直空間。

其缺點是標簽和輸入框之間的距離由于字段長短的不同,可能會導致字段標簽與輸入框的間距過遠,會對填寫表單的速度造成一定障礙。如下圖所示:


當采用左對齊的方式的時候,字段標簽與輸入框的間距是不可控的,因為字段標簽的文字長度很可能隨著業務的變化無法預計最大寬度,這對設計的通用性造成了一定的困擾。所以我們更推薦右對齊的方式來規避左側標簽所存在的明顯問題。

頂部標簽

頂部標簽的明顯優勢就是縱向布局的信息呈現效果更高,用戶填寫的效率更加流暢。其缺點也很明顯,在縱向空間上會占用一定空間,會使得頁面表單較長。


但頂部標簽在橫向寬度上的空間較為節省,比較適用于橫向寬度較窄的頁面。我們需要根據具體使用場景,去衡量使用不同布局方式的字段標簽其優劣點。

必填標簽位置

當標簽在左側位置的時候,必填標簽的位置在左側或者右側會對用戶閱讀次序有完全不同的影響,如下圖所示:


當必填標簽在右側的時候會發生什么呢?必填標簽由于其足夠醒目的特性,其通常為視覺落點1,視覺落點2為字段標簽,此時用戶需要從右往左去找到字段標簽頭來從頭進行閱讀,視覺落點3為輸入框,最后在進行輸入操作。

這一視覺往返勢必會影響用戶填表的效率,當字段標簽與輸入框的距離較長的時候,其影響會更加明顯。2而當必填標簽在左側的時候,用戶的視覺落腳點會非常順暢,且符合人們從左至右的閱讀習慣。


所以必填標簽在左側是表單填寫效率更高的一種布局方式。那么縱向的字段標簽布局呢,如果必填標簽也左側放置會不會也更好?如下圖所示:


由于縱向布局的特性,其最為明顯的優勢就是無論字段標簽的長短,都不會對縱向布局造成影響,有非常明顯的對齊優勢。所以在不破壞明顯對齊優勢的前提下我們采用必填標簽在右側的方式進行布局,另外由于縱向的閱讀習慣,必填標簽在左側還是在右并不會對因用戶視覺落腳點的不同而對閱讀效率問題造成太多困擾。

輸入建議枚舉

關于輸入建議,除了之前說到的文本及提示、圖標等,這里再補充說明下浮層提示,如下圖所示:


浮層提示的特點是類似于下拉選擇功能,其區別是只能展示一列,不可出現及聯的情況。只需要用戶輸入過程中,自動篩選與用戶填寫最匹配的信息。


另外要注意浮層會隨頁面滾動的位置進行上下定位,當此處滾動到底部的時候,浮層自動切換成頂部展示,不會因頁面滾動而造成信息遮擋。

復合輸入框

1、數字錄入及單位布局

關于數字輸入框通常分為兩種形式,一種是數字計步選擇器,一種是數字輸入框。


數字計步選擇器的優勢是可操作區域較大,用戶更容易操作。其缺點是數量單位只能放置在計步器外側,如果后面還有其它組件,當間距過窄時,單位容易跟后面組件的標簽字段混淆,會對用戶填寫表單造成干擾

另外數字輸入框其優勢是單位可放置在輸入框內側或者外側,運用起來更加靈活。但需要注意的一點是此類輸入框如果是限定整數則有必要添加點選功能,如果是非整數則不需要此功能。此類點選功能相比數字計步選擇器,其劣勢是點選面積相對較小,想要提升體驗可以在鼠標移動到上下按鈕的位置的時候擴大選中按鈕的點選面積。


一般金額輸入,由于業務的特性,通常金額單位會放置在前,這個時候采用前后單位放置更符合業務屬性。

2、圖標與輸入框組合

圖標在輸入框中通常起2種作用,一種是類型暗提示的解釋說明的作用,通常多出現在輸入框左側。另一種是具有強功能屬性的標示,比如日歷、時間組件,如下圖所示:


通常一個輸入框放置一個時間或者日期節點,如果是輸入范圍則需要在輸入框內設定范圍分割符及對應的暗提示,而不是拆分成兩個組件。


當圖標在輸入框左側時與刪除按鈕圖標位置不發生沖突,當圖標在右側是與刪除按鈕發生了沖突,則需要兩者占用同一個地方進行配合使用。

3、枚舉與輸入框組合

當枚舉與輸入框組合時,其使用場景通常出現在類別搜索、及某些特殊功能性組件,需要區分錄入信息的時候進行使用。如下圖所示:


類別搜索

用戶選擇想要搜索內容的類別,再輸入關鍵詞進行搜索能夠更精確的定位搜索內容。

特殊功能性組件

與時間組件等某些功能性組件相結合,能夠滿足業務的精細化需求。

特殊信息錄入

關于特殊信息錄入,一般常用于密碼、銀行卡賬號等。

1、密碼

比較早期的時候,為了校驗密碼輸入的是否正確通常會采用二次錄入的方式。如下圖所示:


后來出現了在輸入框右側放置了顯示和隱藏按鈕操作,用戶可以在一個輸入框內自行完成輸入校驗,無效借助系統進行判斷,提高了密碼輸入的正確率,也簡化了表單。

2、銀行賬號錄入

銀行賬號錄入由于數字較長,用戶在錄入信息的時候為了反復檢查正確與否,容易造成困擾,這里采用了自動空格的分割,大大提升了錄入效率。如下圖所示:


反之在特定場景下,我們也可以不允許用戶錄入空格,即輸入空格無效。

輸入框添加操作區

輸入框可添加的操作區通常在左側和右側,左側通常用來調用高級組件。右側的操作區通常是進行整行的添加和刪除操作。另外右側還可放置一些相關聯的附加功能操作,例如勾選等。如下圖所示:


左側操作區與右側操作區通常不會同時使用,具體則需要根據業務場景來。例如左側操作區可以多選多個選項后,右側能自動顯示所選的多個選項。如下圖所示:


關于右側操作區的整行操作如下圖所示:


初始狀態為刪除、添加操作,當用戶新添加一行之后,第一行則變成刪除按鈕。另外附加操作區還可以,可以設置其他組件的開關按鈕,如下圖所示:


添加備注和刪除備注,用戶通過此操作打開或者關閉,通常運用在一些不常用的附加組件上,其好處是盡可能的不破壞表單結構的布局美觀。

畫重點

關于輸入框的基礎設計細節主要講了:

1、輸入框字段標簽的位置:分為左側標簽和頂部標簽

2、必填標簽位置

3、輸入建議枚舉

4、復合輸入框分為:數字錄入及單位布局、圖標與輸入框組合、枚舉與輸入框組合

5、特殊信息錄入:密碼、銀行賬號錄入

6、輸入框添加操作區及其運用場景

預約申請免費試聽課

怕錢不夠?就業掙錢后再付學費!    怕學不會?從入學起,達內定制課程!     擔心就業?達內多家實踐企業供你挑選!

上一篇:B端信息錄入:輸入框基礎設計細節解析(一)
下一篇:沒有下一篇了

B端信息錄入:輸入框基礎設計細節解析(一)

B端產品全局導航樣式與分析

設計師,不要只守著屏幕上的一畝三分地!(三)

設計師,不要只守著屏幕上的一畝三分地!(二)

選擇城市和中心
江西省

貴州省

廣西省

海南省

中文字幕人成乱码在线观看