<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 11個超實用的數據表單設計技巧,全是關鍵知識點!

    2021-5-13    周周


    數據表單是一種常見的平臺設計樣式,在看似乏味呆板的設計中,沉淀著許多優質的設計體驗方法。尤其是在信息組織、信息傳達、信息承載和閱讀性方面,數據表單蘊含了許多設計規則和設計模式,使用戶能夠輕松地獲取、處理信息。該篇文章介紹了固定表頭、固定側欄、自定義欄、分頁器、過濾器、數據排序、多選項同時操作、簡單且簡約、普通的字體樣式、項目鏈接、鼠標懸停這 11 個設計指南,為大家提供有關數據表單設計的實用性建議。

    當然,在實際的數據表單設計中,還需要根據產品要求和用戶目標進行相應的調整。你對數據表單設計有什么經驗體會?有過哪些很棒的設計案例?歡迎交流分享~

    11個超實用的數據表單設計技巧,全是關鍵知識點!

    △ 插畫來自 icon8

    對于大多數 SaaS 平臺,數據表單是必不可少的組件,可讓用戶獲得相關數據和洞察,從而采取正確的決策。

    作為一個前企業家,我使用過各種 SaaS 平臺,例如 Mailchimp,Shopify,Klaviyo,Zendesk 等。它們提供不同的服務 —— 電子郵件、訂單管理、客戶服務等解決方案,其共同點是,都需要將數據反饋給用戶。而數據表單則是傳輸大量數據最好的方法。

    數據表單之所以有效,是因為它們能夠有序地組織信息和數據,使用戶能夠輕松地掃描、比較和分析自己選擇的信息。這篇文章介紹了我在設計數據表時遵循的關鍵設計模式。

    固定表頭

    這一點對于超過 30 行的表單尤其重要。當用戶必須向下滾動才能查看所有可用信息時,如果沒有固定表頭,用戶將很難理解和區分多行數據 —— 其中大部分可能是隨機數。一個固定的表頭可以幫助他們輕松地使用數據表,避免了向上滾動查看字段含義 。

    設計提示

    我傾向使用 8px 網格系統進行設計,將表頭尺寸保持在 16px(最小值)—— 防止你的設計看起來過于沉重和擁擠。

    11個超實用的數據表單設計技巧,全是關鍵知識點!

    △ 當用戶不理解某個數據字段時,固定的表頭使得用戶無需重復向上滾動查看表頭內容

    固定側欄

    對于數據表單,需要兩個組件對所有信息進行排序。一是表頭,用于理解顯示的數據。二是固定側欄 ,與每一行數據相連接 ,常用于項目名稱,例如活動名稱、產品名稱、股票名稱等。

    當數據表單需要水平滾動展示隱藏列時,通過固定第一列項目名稱,可以獲得與固定表頭相同的組件優勢,提升信息傳達效率。

    設計提示

    設計固定側欄時,請在該列的右側添加陰影和垂直分隔線,提示用戶該表支持水平滾動。

    11個超實用的數據表單設計技巧,全是關鍵知識點!

    △ 當數據表有太多列時,通過固定第一列項目名稱,使表單更易理解

    自定義欄

    自定義欄允許用戶根據自己的偏好選擇表單顯示內容。當涉及多個指標和數據集時,該功能可以滿足不同的用戶目標 。常用于自助廣告平臺,例如 Facebook Ad Manager、Google Ads、AdRoll 等,在這些平臺上有多種營銷指標,每個用戶的優先級都不同。

    11個超實用的數據表單設計技巧,全是關鍵知識點!

    △ 自定義欄允許用戶根據自己的喜好對數據表進行個性化設置

    分頁器

    我從開發朋友那里學會了對表單進行分頁,通過限制正在處理的信息量,減少加載時間。另一種方法是使用漸進式加載,當鼠標滾動到最后一行時,表單自動加載一組新的數據。對比后者,分頁器允許用戶一次跳過好幾個組數據,滿足用戶非連續性瀏覽的需求。

    設計提示

    大多數表單每頁顯示行數可能超過 30 行,因此,將分頁器固定在表單頂部或底部會更加友好,方便用戶在頁面之間切換,無需過度地快速滾動。

    11個超實用的數據表單設計技巧,全是關鍵知識點!

    △ 使用分頁可以減少加載時間,因為它限制了正在處理的信息量

    過濾器

    過濾器組件對于篩選目標信息、屏蔽無關數據量至關重要。日期篩選是最基本的過濾器,能夠根據用戶指定日期來顯示信息。當每列具有固定的展示字段,這意味著信息不是隨機的,而是固定的選擇,您還可以設置單項信息的過濾器。

    最好在過濾器下拉列表中提供復選功能,允許用戶選擇多個變量 —— 過濾系統越靈活,用戶就越容易操縱他們的信息。

    11個超實用的數據表單設計技巧,全是關鍵知識點!

    △ 過濾器組件對于減少根據用戶要求顯示的數據量至關重要

    數據排序

    排序類似于過濾,可以根據用戶的需要重新排列信息,調整信息展示順序。在大多數情況下,左列會對表單進行默認排序,用戶可以單擊標題對表單進行相應的排序設置。

    您可以將排序添加到表頭中,例如按數字或字母順序對各個數據進行排序。但請不要濫用此功能,它對于狀態或類別等特定指標,可能是多余的 —— 過濾器處理這些數據會更合理。

    設計提示

    盡量避免使用線型圖標,選用面型圖標來增加可見性。懸停狀態能夠傳達整個區域可單擊的視覺提示 。

    11個超實用的數據表單設計技巧,全是關鍵知識點!

    △ 排序類似于過濾,根據用戶的需要重新排列信息

    多選項同時操作

    復選框允許用戶選擇多個項目,并對所選項目執行某種操作 。幫助用戶節省時間和精力,不必重復相同的步驟。想象一下,所有的行都有相同的選框,這些選框會重復出現 —— 這會使你的表單看起來雜亂無章。

    設計提示

    我通常將復選框的大小保持在 24px(最小尺寸),居中布局,提高可用性。此外,高亮顯示被選定的行,增強對比性 。

    11個超實用的數據表單設計技巧,全是關鍵知識點!

    △ 復選框允許用戶選擇多個項目并對所選項目執行操作

    簡單且簡約

    “極簡主義” 這個詞已經被廣泛地使用,空白似乎是現在的趨勢,但在這種情況下,少就是多。在設計數據表單時,重點應該放在數據本身而不是用戶界面上。用戶已經在與大量的數字和信息交互,復雜的界面只會增加用戶的認知負荷。

    設計提示

    沒有必要添加額外的視覺干擾,例如不必要的圖標、斑馬行、隨機顏色等。

    11個超實用的數據表單設計技巧,全是關鍵知識點!

    △ 當你讓你的 UI 設計師瘋狂的時候會發生什么?

    普通的字體樣式

    在設計中,排版是樣式指南中的一個關鍵元素,對于品牌推廣至關重要。但在設計表格時,您應該遵循上面的指示(簡單和簡約),不要在表格中使用任何復雜的字體樣式。

    設計提示

    沒有推薦的字體,但建議盡量避免使用襯線字體,因為它們往往會吸引人的注意力,導致額外的視覺負擔。此外,避免出現大寫單詞,它會使你的設計看起來沉重。

    11個超實用的數據表單設計技巧,全是關鍵知識點!

    △ 襯線字體在表格上看起來很奇怪 —— 不知道你們是否看到過使用襯線字體的數據表單

    項目鏈接

    對于特定的表單,項目名稱還可以充當鏈接,這是一種符合用戶習慣的交互形式,用戶很容易理解鏈接會將其帶到何處。

    設計提示

    設計文本鏈接時,請使用不同的顏色向用戶展示此鏈接 —— 僅在文本上加粗或設置下劃線并不能提供足夠的視覺提示。

    11個超實用的數據表單設計技巧,全是關鍵知識點!

    設計文本鏈接時,請使用不同的顏色向用戶展示此鏈接

    鼠標懸停

    表單的操作通常放在最后一列。當沒有太多的信息列,需要水平滾動信息時,這種模式就很適合。也可以將操作放在第一列或第二列,這樣用戶就不需要在滾動時跟蹤這一行,但操作較多時,可能會產生認知過載,導致不必要的錯誤。

    鼠標懸停可以保持簡約的外觀 —— 只有當用戶將鼠標懸停在相應的行上時, 操作圖標和文本才會出現。

    11個超實用的數據表單設計技巧,全是關鍵知識點!

    最后

    以上內容只是原則性說明,主要為你提供一般性的建議,在實際的數據表單設計中,還需要根據具體的產品要求和用戶目標進行相應的調整。


    文章來源:優設網    推薦:TCC翻譯情報局


    藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



    日歷

    鏈接

    個人資料

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

    存檔

    主站蜘蛛池模板: 国产精品成人免费观看 | 国产精品久线在线观看| 91精品国产自产在线老师啪| 亚洲精品国产va在线观看蜜芽| 日韩麻豆国产精品欧美| 国产亚洲精品a在线无码| 欧美精品整片300页| 成人精品一区二区三区在线观看 | 秋霞午夜鲁丝片午夜精品久| 无码人妻精品一区二区三区99仓本| 国产农村妇女毛片精品久久| 精品日产一区二区三区手机| 精品国产一区二区三区无码| 亚洲精品无码精品mV在线观看 | 天天爽夜夜爽精品视频app| 日韩人妻无码精品久久免费一| 黄床大片免费30分钟国产精品| 欧美一区二区精品系列在线观看| 国产综合色在线精品| 亚洲国产精品嫩草影院在线观看| 精品日本一区二区三区在线观看 | 精品一区二区三区中文字幕| 久久久久人妻一区精品性色av | 精品人妻V?出轨中文字幕| 国产成人精品免费大全| 九九热在线视频观看这里只有精品| 久久精品中文騷妇女内射| 亚洲精品无码午夜福利中文字幕 | 欧美精品福利在线视频| 国产乱码精品一区二区三| 777被窝午夜精品影院| 久久这里只精品国产99热| 成人国产精品免费视频| 精品久久久久久无码专区 | 国产精品无码专区| 国语自产少妇精品视频| 精品日韩亚洲AV无码| 国产亚洲精品岁国产微拍精品| 国产精品丝袜一区二区三区| 精品久久久久中文字幕日本| 精品福利一区二区三区免费视频 |