<menu id="2q246"><menu id="2q246"></menu></menu><menu id="2q246"><menu id="2q246"></menu></menu>
<menu id="2q246"><strong id="2q246"></strong></menu>
<menu id="2q246"></menu><menu id="2q246"><menu id="2q246"></menu></menu>
<nav id="2q246"></nav>
  • <input id="2q246"><menu id="2q246"></menu></input>
    <tt id="2q246"><tt id="2q246"></tt></tt>
  • 您當前位置:圖趣網(Tuquu) >> 網頁設計教程 >> 移動前端 >> 瀏覽設計教程

    光音移動設計規范 — 表單類

    表單在產品中主要負責數據采集功能。表單類組件指的是需要用戶手動填寫或者選擇信息的組件。

    光音移動端設計規范針對表單類組件,目前收錄了8個(后續會增加),分別為:

    1、開關

    2、單選和復選

    3、步進器

    4、滑塊

    5、單文本框

    6、數字輸入框

    7、多行文本框

    8、選擇器

     

    開關

    定義:

    開關組件是在仿照物理開關,讓用戶打開或關閉某個項目。

    一般是用戶的設置項,通常和列表相結合,放置在每個單元格的右側,同時格內部允許再放置其他操作按鈕。

    開關應該有開和關兩種狀態,設計按鈕時要避免狀態和操作的歧義。

     

    用途:

    表示兩種相互對立的狀態間的切換,例如開/關、是/否狀態。

    1、基礎類:

    App最常見的開關樣式,當開關開啟時,所展示的開關顏色和產品的主色保持一致。

    開關存在三個狀態,分別為:開啟、關閉和禁用狀態(用戶點擊無交互事件)。

     

    交互說明:

    根據業務需要,需自定義選項默認開啟還是關閉。點擊開關按鈕,進行開關的兩種狀態切換。

    2、擴展類:

    擴展類常見的有三類:

    • 第一類:開啟后出現解釋,方便用戶理解開關開啟或者關閉所代表的含義。

    • 第二類:帶文字開關,解釋當前開關狀態,避免用戶對開關狀態理解錯誤。

    • 第三類:帶icon,通過icon的隱喻,進一步解釋當前開關的狀態。

     

    關鍵信息及標注:

     

    單選和復選

    定義:

    單選:單選用來表示單元格已被選中,通常在2個或2個以上的選項中進行單個選擇時用到,當選項超過5個時,建議使用選擇器。

    復選:多選項中有選中態、未選中態、禁用態。一般放置在可選信息左側(圖片、視頻等以宮格形式表現的選擇頁面除外)

     

    用途:

    單選:用于對一組選項中選擇其中一項。

    多選:1.在一組可選項中進行多項選擇時;2.單獨使用時可以表示是/否狀態之間的切換。

    1、基礎類

    單選組件,文字在左,單選在右邊,如下圖所示:

    交互說明:點擊整個條目選中或取消選中,并顯示對應狀態的標記,未選中的不做任何標記,單選標記位于單元格右側。

    復選組件,文字在左,復選在右邊,如下圖所示:

    交互說明:

    • 1.在列表上進行多選時,支持在多選項框上縱向滑動來進行批量選擇或取消選擇;

    • 2.在網格視圖上進行選擇時,支持橫向滑動來進行批量選擇或取消選擇

    單選組件,文字和單選組件均在左側,其中單選組件在文字前面,如下圖所示:

    多選組件,文字和復選組件均在左側,其中復選組件在文字前面,如下圖所示:

     

    2、擴展類

    圖片,視頻等以宮格的形式出現,用于單選or多選。

     

    3、復合類

    用于選項比較復雜,選擇層級較深的場景,選項之間存在父子層級關系,當未全部選中,則父級為半選狀態,如下圖所示:

     

    關鍵信息及標注:

     

    步進器

    定義:

    用于增加或減少數量的控件。

     

    用途:

    用戶可通過步進器對數值進行設置。

    1、基礎類:

    最簡單的步進器,可對數量增加或刪除。

    界面UI設計中的進步器,越簡單越好。故盡量減少對步進器的改動,對進步器外觀更改過多,用戶可能會不清楚該組件功能。

    交互說明:

    • 1. 點擊加減按鈕進行相應的增減

    • 2. 一般存在上限和下限值,當達到上限或者下限時,加減存在不可點擊狀態

    • 3. 有些進步器支持點擊數字區域直接填寫數量

     

    2、強化類:

    為使操作更為明顯,進步器的加減會有顏色。

     

    關鍵信息及標注:

     

    滑塊

    定義:

    幫助用戶選擇某個特定值(或值范圍)。

    通常,用戶通過讀取滑塊上的標簽就能獲取有關值的信息。同時,將可視化數據連接到滑塊還可以創建更佳的用戶體驗。

     

    用途:

    • 1.當用戶需要在數值區間/自定義區間內進行選擇時,可為連續或間續值。

    • 2.調整反映強度級別(如音量、亮度或色彩飽和度)的設置組件。

    1、基礎類:

    最為簡單的滑塊樣式,用戶長按拖動即可進行設置數值,存在常態和禁用態。

    交互說明:

    手指長按,滑動滑塊設置數值進行控制。

     

    2、擴展類-數字提醒

    出現對應數值展示。左右滑動滑塊時,數值對應進行改變。

     

    3、擴展類-上下滑塊

    圖片查看時上下滑動,起到快速定位的作用。

    擴展類-雙向滑塊,左邊滑,右邊滑,雙向滑。樣式存在起始狀態、按壓狀態、不可滑動態。

     

    4、擴展類-驗證碼滑塊

    安全驗證,長按滑動完成拼圖。

     

    關鍵信息及標注:

     

    單文本框

    定義:

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

    基本要素為內容標題+輸入區域,還可能會有內容標識/取消輸入icon/當前輸入狀態/輸入內容反饋等部分構成,可依據場景對內容進行增刪。

     

    用途:

    • 1.通過鍵盤輸入內容

    • 2.用戶需要輸入文本字符時

     

    1、基礎類

    一般由內容標題+輸入引導提示語組成。

    當用戶輸入內容時,直接將引導提示語替換為內容本身。

    對于需要驗證的文本內容,用戶光標停留在其他位置時,進行驗證,并通過toast的形式提醒用戶。

     

    2、驗證碼類

    驗證碼格式樣式。

    3、變種類

    構成內容包含基本要素,形式上更多變。

     

    關鍵信息及標注:

     

    數字輸入框

    定義:

    用于輸入數字內容,一般情況下,輸入框僅限于輸入數字內容,否則需要進行錯誤提示。

     

    用途:

    僅提供數字輸入的輸入框。

     

    1、驗證碼類:

    驗證碼類輸入,通過點擊發送驗證碼按鈕觸發,一般當手機號不可使用時,可能會存在驗證碼無法發送的情況,此時為不可點狀態即可。

    目前越來越多的手機驗證通過分步設計,以此減少界面的復雜度,提升完成率。用戶輸入手機號后,進入輸入驗證碼新頁面,如下圖所示:

    2、手機號/證件號等號碼類輸入號碼,并伴隨號碼格式檢驗。一般還用于轉賬金額的輸入等場景。關鍵信息及標注:


     

    多文本框

    定義:

    提供換行功能,用于輸入多段落文字內容。

     

    1、基礎類

    一般由內容標題+輸入引導組成。

    當用戶輸入內容時,直接將引導替換為內容本身。

    需要輸入內容較多時,可能會有字數限制提示。

    區別于傳統的左右結構,內容標題和輸入內容也可以上下結構展示,如下圖所示:

     

    關鍵信息及標注:

     

    選擇器

    定義:

    選擇器是一個可滾動視圖,用于選取列表項中的值。通常出現在屏幕的底部,高度小于屏幕。

     

    用途:

    • 1.臨時浮層,用戶出發選擇操作時出現。

    • 2.從眾多選項中選項中選擇一個選項。

     

    1、單類型信息選擇類

    一般由選擇框觸發,彈層的形式建立可滾動視圖,并在視圖中選取值。

    交互說明:

    點擊確定,選項被選中,點擊遮罩選擇框消失。

     

    2、日期選擇類

    可選擇日期和時間的選擇器,如下圖所示:

    可選擇具體時間段,默認停留在開始時間項,點擊確定,切換到結束時間項。

    3、拓展類

    基于業務需求,擴展出復雜的選擇器樣式,如下圖所示:

     

    關鍵信息及標注:

     

    結語

    以上為表單類常見的8個組件,后續會繼續增加表單類組件,完整設計規范源文件正在后期整理中,預計下周一發,敬請期待。

     

    原文地址:Echo的設計筆記(公眾號)

    作者:三牛


    [教程作者:三牛]
    免責聲明:本站文章系圖趣網整理發布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業用途!
    本文地址:http://www.iamyunfeng.com/Tutorial/wd4208.html
    下一篇:沒有了
    ios系統和某些移動端background-attachment:fixed不兼容
    沒有了
    圖趣網微信
    建議反饋
    ×
    挺进h孕妇的孕肚视频
    <menu id="2q246"><menu id="2q246"></menu></menu><menu id="2q246"><menu id="2q246"></menu></menu>
    <menu id="2q246"><strong id="2q246"></strong></menu>
    <menu id="2q246"></menu><menu id="2q246"><menu id="2q246"></menu></menu>
    <nav id="2q246"></nav>
  • <input id="2q246"><menu id="2q246"></menu></input>
    <tt id="2q246"><tt id="2q246"></tt></tt>