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

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

△ 插畫來自 icon8

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

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

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

固定表頭

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

設計提示

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

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

固定側欄

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

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

設計提示

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

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

自定義欄

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

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

分頁器

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

設計提示

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

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

過濾器

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

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

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

數據排序

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

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

設計提示

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

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

多選項同時操作

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

設計提示

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

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

簡單且簡約

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

設計提示

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

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

普通的字體樣式

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

設計提示

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

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

項目鏈接

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

設計提示

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

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

鼠標懸停

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

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

最后

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

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

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

表格和網格一直是產品和后臺面板的重要UI組件。然而，即使到了今天，也很容易找出設計不當或用戶體驗不好的數據表。

今天我們邀請了 Gil Bouhnick ，來跟大家一起聊一聊「如何設計出一個可觀的數據表」。

接下來，就進入正題吧～

我使用過 30 多種 SaaS 工具和 SDK ，經常用它們的后臺面板看數據，觀察到了一些問題并做了反饋。實話說，它們在UI設計和基本功能上，對表格的展現形式還挺糟糕的（雖然它們都是很好的Saas產品）。

鑒于我開發使用表格 20 年的經驗，決定為大家來總結一下最基本的處理表格的UI / UX規則了。

本文將從功能、UI設計和美觀性，這三個方面來闡述。

數據表設計之功能

1.從排序和篩選開始： 

是的，我也知道排序和篩選很煩人，我也討厭他們，但必須先說它們。除非你打算做一個不到十條記錄或者類似情況的精美表格。

排序和篩選不僅是可用性或易用性的功能，更是摘要數據的關鍵：了解趨勢，比較記錄，查找特定值，沒有排序和篩選就無法完成這些工作。

如果添加基于列的篩選（如日期，布爾值，字符串等元數據）成本太高，那么可以從更基本的內容開始篩選，例如現代搜索框或一些常用的硬編碼。

2.確保列的大小可調整

這是一種查看信息的方法，無需深入研究每條記錄。

不管你的列寬有多大，也不要將列表固定住，因為有時候用戶需要進一步擴展。

3.允許列重新排序 

對于大型表格，不能一種大小適用于所有情況。

通過重新排序列，用戶可以設置符合它們特定需求的表格。這個相對小的功能可以減少混亂，并節省一些來回滾動。

這時，列的名稱體現了大量信息。重新排序列能夠使用戶可以專注于特定區域并理解小塊信息。

4.內聯的編輯

有許多用于編輯單元格的UI解決方案：內聯框，彈出窗口，可擴展節等。

我不認為上面的方案是最佳的，因為它依賴于功能、數據類型、使用案例。從用戶角度出發，我最喜歡的方案是側視圖（快速視圖）。

一旦選擇一個項目，它就會從側面彈出的方法。

這個方案，我最喜歡的是它可以保持上下文（與彈出窗口不同），易于使用，即使是在垂直滾動視圖中顯示大量字段的情況下也效果良好。

數據表設計之交互設計

5.小屏幕設計

當然，大顯示器看表格，設計和開發都會很爽，但是還是有人在用筆記本電腦或iPad！他們又做錯了什么！/手動狗頭

不停的滾動、縮小的列、隱藏的文本，這些都會干擾用戶體驗，所以一定要在小屏幕上驗證你的設計，并且盡可能使用上一段時間去切實體驗用戶使用情況（而不是隨意測試）。

如果確實很糟糕，你可能需要在解決問題上發揮自主創造力，不過前提是你很了解它。

6.彩色交替行 

使用大型數據表時，很容易丟失。

斑馬紋的表格可以幫助用戶保持其位置，但是彩色的行必須非常淺，否則會引起誤導，看起來像選定的行。

使用淺色時，應該將所有內容設置為淺灰色，避免使用黑色線條和深色邊框。

7.使用固定表頭和“凍結”列錨定一些標識符

我認為在任何屏幕上顯示大量數據時，表格都應該能正常瀏覽。

要瀏覽數據，用戶就需要經常滾動，這意味著需要一些錨點來輔助：

• 向下滾動時，列標題必須固定（這是最基本的）

• 第一列應該被鎖定（MS Excel和Google Sheets稱其為“凍結”），因為，當你水平滾動時，需要該行聯系上下文。 

• 一個全行選擇選項，用于在水平滾動時標記重要行。

8.設置固定的行高

表格和網格是體現結構化信息的，但是，當表格的列寬、行高不同時，就會變得混亂，信息也就會變得沒有體系。

因此，為了整體的可用性和美觀性，我覺得不管內容如何，所有行都應具有完全相同的高度。

為了更好地支持多行文本塊，請考慮以下事項：

• 用換行替換為空格，并將整個文本變成一行（通過調整列寬的大小）

• 將（所有行的）行高設置為2行而不是1行（可以解決某些情況）

• 使用工具提示（可以用，但是最好不要用）

• 通過單擊行來展開/折疊（剛需）

• 采用浮動側視圖顯示所選行的詳細信息。

數據表設計之UI

美學設計可以帶來更好的使用感。

以下是通過簡單的UI設計修改來消除雜亂并提高內容可讀性的幾種方法：

9.增加單元格填充 

使用空格。

加載信息的表，正是用戶想要看到更多空白的地方，即使這會花費他們一些額外的滾動時間。         

10.消除不必要的邊框

一旦數據結構良好并且留有空白，就該擺脫那些多余的邊框，或者讓邊框線條變得超細且顏色淺。

文章來源：優設網    推薦：墨刀_MockingBot

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

文章來源：站酷 作者：再次微笑_

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

什么是表格？

表格頁是公認為展示數據最為清晰和高效的形式，它的信息密度極高，就像是一個家庭衣柜，里面很多抽屜，我們需要把衣物整潔擺放收納，提高空間利用率。

表格頁由三個部分，如下圖所示：

一、數據查看

數據查看可通過四個維度去自檢設計是否合理，分別為信息降噪、呼吸適中、高效易讀、詳情查看。

1、信息降噪-內容

通過對表頭內容刪減，我們一眼就可以看到表格的重要信息，從而幫助用戶能快速進行數據決策。因此，列數控制在7+-2，列表表頭展示更為關注的數據，更多信息在詳情中展示。

另外，如果不同用戶想看到的信息側重不同，我們還可以做自定義設置項，讓用戶自己去選擇想要看到的表格內容。

用最少字數給表頭做精簡，精簡到少一字不可。

另外，當遇到少一字都不可的長標題，我們可以定義專有名詞，并且給一個解釋專有名詞的icon，便于第一次使用的用戶易于理解。

2、 信息降噪-視覺

去掉不必要的分割線和斑馬紋，用對齊和間距來區分列和行，可以鼠標滑上去給斑馬紋，增強交互體驗。

分割線的樣式盡量輕盈，不要搶視覺，突出內容。

去掉不必要的裝飾和顏色，為了防止視覺負擔，少用面性圖標，使用顏色保持克制，刪除如果不是點擊即可刪除，可以不用預警色。

不要出現襯線字體，比如宋體，保持字體統一。

3、 呼吸適中-單元格

定義單元格高度。字號、行高、上下間距進行規范，這里有一個比較常見的規范，將字號設為N，那文字行高就是

1.5N，上下間距為1.2N，單元格高度=內容高度+上間距+下間距。

4、 呼吸適中-列寬

我們將首列和尾列定義為N1，列與列之間定義為N2，隨著頁面收縮和拉伸，N1保持不變，N2自適應變寬變窄，這樣頁面會看起來會更均衡，這樣會顯得有呼吸感。一般定義一個最小值，當表格寬度大于頁面寬度時候，固定首尾列，左右滑動。

5、 高效易讀-對齊方式

標題和內容一般采用左對齊，更高效的瀏覽順序，有長短不一的數字時，右對齊方便比較。操作項一般放在尾列右對齊。

6、高效易讀-不做無意義留白

當數據為零時就寫上“零”，當沒有數據時候就寫上“-”。比如開發取不到的后臺數據，我們就可以給“-”作為顯示，如果得到的數據就是零，我們也要讓它顯示出來。

7、高效易讀-選擇合適的翻頁器

選擇合適的翻頁器，利用分頁可以緩解服務器的加載壓力。無限瀏覽如果數據過多很容易使頁面崩掉，使用功能較為強大的翻頁器，每一頁默認10行以上，減少翻頁次數，增強用戶體驗，給出默認行數后，可以讓用戶自定義每頁行數，相比跨屏翻頁，向下滑動更便利。

8、高效易讀-收起低頻操作項

超過四項操作項收起來，可以用圖標指引下一步操作。關于哪些可以操作項可以折疊起來，可以與產品經理溝通收起低頻鏈接，或者埋點一個月時間查看點擊量也可以做出決策。

9、高效易讀-默認行數

當單元格內容長度不固定的時候，定義好內容的寬度和行數以及字數，超出顯示的字數可以用省略號代替。

10、高效易讀-行的排序

默認最近創建的在表格中第一行顯示，使用戶感知最新情況。也可以帶排序的表頭，讓用戶自定義排序。

11、詳情查看-入口

入口可以在操作里加詳情，也可以把發起人做成可以點擊樣式，跳轉詳情，并且可以避免視覺干擾，也就是降噪，當鼠標Hover上去時候，發起人才顯示出跳轉色，提示可點擊狀態。

12、詳情查看-交互方式

第一種是用彈窗的形式。第二種是第一種的延伸，當內容過多時候可以考慮抽屜樣式。這些交互的共同有點就是沒有脫離原頁面。當詳情內容較多且需要編輯時候，我們就考慮跳新頁面，使用新頁面進行承載。(這里有個細節，新開tab頁可以打開多個詳情頁，如果覆蓋原頁面則只能打開一個詳情頁，并且不能同時查看原頁面和詳情頁。所以我們要根據具體場景、業務需求去設計)

二、數據過濾

數據過濾由搜索，篩選和標簽頁構成。

1、搜索

搜索可分為模糊搜索和帶標簽的搜索。工作中常用的搜索為模糊搜索，優點是只要有相關的內容都會搜索出來，減少了精準搜索帶來的記憶負擔。缺點是容易把不相關的信息也帶出來，例如搜索手機號，把相關編碼也匹配了出來。帶標簽的搜索優點是搜索匹配精準度高。缺點是每次只能對單一條件進行搜索，當用戶要搜索的時候都要去切換選擇信息，多了一個步驟。另外，在實際工作中，可以通過埋點或者調研，如果搜索框搜索手機號頻率較大，我們可以把手機號設置為默認選項。

2、篩選

篩選框可以分為下拉篩選和平鋪篩選。下拉篩選的優點是空間利用率高，起到了很好的收納作用。缺點是無法直觀看到所有篩選項。平鋪篩選優點是操作效率高，篩選項一目了然，支持輸入更多篩選條件，可以自定義輸入。缺點是空間利用率低，不適合選項太多的情況。如果用戶點擊其中一個選項概率最多，我們就可以將點擊率高的一項作為默認項，然后選擇第一種下拉篩選框。如果用戶點擊每個選項概率相等，在空間允許情況下我們可以平鋪出來。

當篩選項過多時，信息排序應是用戶目標優于業務邏輯，即排序應該考慮用戶的使用習慣。例如當用戶查找訂單時候，第一反應都是搜索框輸入，而一般通過價格過濾較少的應該放在末尾。

當然，我們還有更多優化空間，當篩選項過多時，我們可以默認折疊低頻篩選項。折疊哪些篩選項還是得基于用戶習慣，可以通過數據埋點或者用戶調研得到用戶使用場景。

當通過數據埋點或者用戶調研發現絕大多數用戶只需要用到搜索項，那么我們就可以只保留搜索框，其他選項全部折疊到高級搜索里面，當點擊高級搜索時候出現一個彈窗，既可以保留更多篩選內容，又可以使頁面不會看起來很擁擠。

(當彈窗內容選擇完畢時候，高級搜索按鈕會呈現高亮顏色，未選擇更多篩選內容時候則呈現默認態。）

3、標簽頁

標簽頁是比較常用的數據過濾方式，切換樣式包括基本樣式、卡片樣式以及膠囊樣式。一般和時間、狀態的流轉有關。

同樣我們可以通過數據埋點或者調研，將用戶最關注的選項設置為默認選項，減少用戶的選擇，提高用戶體驗。例如下圖，用戶更關注的是銷售中的商品，即將到店的客戶，以及即將發貨的商品，所以我們將這些選項作為默認項。

三、數據操作

數據操作從控制范圍可以分為單行操作、批量操作和全局操作。從操作屬性可以分為新增數據、編輯數據和刪除數據。

當從產品那里拿來一個原型圖堆疊很多操作項，我們就可以根據控制范圍來區分判斷，從而明確擺放位置。單行操作可以放到表格里，批量操作根據親密性原則放在左上方，這樣可以離打勾矩形近一些，如果有利于用戶操作，也可以放在左下方。全局操作則可以放單獨一行，使得層級更加清晰。

調整后，我們發覺雖然解決了多個操作放一塊的行為，但是層級還是不夠清晰，我們可以通過割裂板塊或者板塊顏色不同來調整，使得識別性更強。

后記

B端設計強調的是在好用的基礎上讓頁面變好看，所以更考慮用戶體驗。所有設計方式不局限與一種，只要操作上是順手，業務上是合理的，都是優秀的設計。如果一個頁面占據半屏都是篩選項，那么我們就得好好反思，因為所有篩選項不可能都是高頻操作，接下來就需要去做數據埋點并進行頁面優化了。另外，一張只有篩選項和表格的頁面，表格數據查看區域建議占整個頁面的百分之六十到百分之七十，這個時候瀏覽起來是比較舒適的。

文章來源：UI中國    推薦：最多三分糖

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

一個完整的后臺，由菜單/導航、數據/圖形展示、表格、表單、控件/組件以及彈窗等構成，下面跟大家分享后臺中的表格和表單的設計細節。

當接到一個全新的網頁后臺項目時，首先確定設計風格，然后考慮這個后臺尺寸是做居中固定式，還是全屏響應式。全屏響應式的網頁設計，除非有規定，否則你可以選擇任意主流尺寸作為基尺寸來設計網頁。當然，不管選擇什么尺寸，都得基于做好一個后臺而開展工作。

如何定義一個后臺是好的？領導說好，用戶說好，你自己也覺得好，那應該就是好的。大部分情況下產品已經定制好了每個功能模塊，UI上只需要對著原型加以美化，如果你是這樣做的，那么做出的東西一定會讓人覺得有問題但是又不知道問題在哪里，總是想讓你改。

跟產品經理好好溝通，他們只是把功能模塊設計出來而已，并沒有設計這些模塊如何呈現，如何操作，如何結合，如何分類等等。交互上在后臺設計很重要，如果有專業的交互設計師，這些可以交給他們，畢竟，交互設計的收入比UI要高。然而在很多中小企業，產品原型直接給到設計是很常見的。當缺少專業的交互設計時，不要讓產品覺得我們只是按照他們的原型做美化，那跟美工有什么區別，不是看不起美工，美工的全程是美術設計工程師，很高大上的職稱，但是大家還是不太愿意這樣被稱呼吧，可能覺得頭銜套太大壓力會很大吧。事實上，UI本來就應該具備基本的交互技能。

風格選定是很客觀的，需要經過產品經理/領導確認，如果他們很相信你的實力，你得說出足夠充分的理由，為什么要選擇這種風格，而并不只是看起來更高大上或只是個人喜歡。

本人對后臺網頁設計的風格理解，大致可以分為三類：純白背景風，輕淡背景風，深色背景風。在后臺開始設計之前，你最好先選定其中一種風格，因為后面的所有元件的設計，都得基于這個風格來設計。剛剛好，在早些時間就已經發布了一個后臺的三種風格界面設計的作品，大家可以看出每個模塊的搭配和區分：

純白背景風：線框/輕淡色（灰）背景（文字一般采用黑色）

輕淡背景風：純白色塊背景（文字一般采用黑色）

深色背景風：帶有透明度的純色背景（文字一般采用白色）

設計過程是很主觀的，所有設計參數都取決于設計師，但是要嚴格按照設計規范，并且讓所有設計看起來和用起來都是合適的。

全屏響應式+輕淡色背景風是目前很主流的設計，也是很保守和安全的設計。對于輕淡色的HSB色值，可參考：H:0-360；S:0-5；B:90-97，當然沒有絕對大部分情況用的淺灰是最多的，如H0;S0;B93-95。

以下將依據這個設計風格做例子展示。

一個完整的后臺，由菜單/導航、數據/圖形展示、表格、表單、控件/組件以及彈窗等構成，我把這些稱為元件。這里主要分享的是構成后臺中的模塊和元件設計中的細節。下面重點跟大家分享表格和表單的設計。

你應清楚的是

為了避免在設計后臺時一個人在YY，請保持左跟產品溝通，右跟前端溝通，這點非常重要?；蛟S很多朋友在接到項目的時候不知道從何做起，會在網上尋找一些相關素材，然后會看到很多很炫的風格樣式，像是各種各樣的數據/圖形展示，各種各樣的統計曲線圖，還有各種各樣的展示動效，真想拖到自己要設計的后臺。

如果合適當然可以，然而，很多情況下，統計分析一類的圖表設計，產品已經有很多現成套用的模板，你可以做的很炫，但前端不一定會按照UI效果圖來制作。從技術上來說，沒有前端實現不了的效果，你真的不必懷疑前端的實力。所以，保持設計跟前端的良好溝通，更能提高工作的質量和效率，并且，很多時候口頭/文字描述如何展示，是淡入淡出，還是彈出等等，前端是能理解的。通常地，做動效只是產品的一種展示，而并不是產品的本身，就當自己練手做動畫吧。

簡潔又靈活的表格

一個典型的表格(table)包含標題（表頭單元格th），內容（標準單元格td），通常都是一行行(tr)展示。設計時，應該將標題和內容區分，比如標題文字加粗/顏色加深/字號加大，或標題背景加深。因選擇淡灰背景風，一般用白色塊區分的原則，表格設計也盡量不使用線框，然而一行行的標準單元格如果都是白色的就不便于預覽，因此可以隔一行給背景設置比主背景更淡的背景。標題和內容一般有兩種對齊方式，居中對齊，居左對齊，整個站的列表只選擇一種對齊方式保持一致性。為了更簡潔顯示，我們還可以把每一列的間隔線去掉，但并不意味著間隔不存在。每一列的文字都不要貼邊，給前端標記間距（內間距padding）值，告訴前端鼠標點擊表頭單元格的空白地方仍然可以拖動該列的寬度，拖動寬度時保持每一列的最小寬度并且標題仍然完全展示。

我們都遇到過這樣頭痛的問題，當列表字段太多，一屏無法完全展示，這時應該怎么做？給表格設計一個左右滑動的滾動條？如果內容真的太多并且已經確定，這也未嘗不是一種辦法，但是，重新設計過表格的字段或許會更好，這個時候應該跟產品好好溝通了。有以下方法：

• 減少不必要的文字（如下圖中表頭的“全選”去掉）。
• 縮略內容或者用…省略后面內容，鼠標經過出現更多內容（如時間可以縮略后面的時分，鼠標經過出現具體時間）。
• 將不重要的列表隱藏，表頭右邊設計一個>>按鈕，點擊跳到隱藏的列表，點擊以后表頭左邊出現一個<<返回默認表格的狀態。

因為每個列表的寬度是可以拖動的，我們不能決定其固定的寬度，但每一行的高度可以設置一個值，建議所有元件的高度、寬度、間距的數值參數都設置為偶數。

如果列表的數據很多，一般都會設計page控件，但是也有一些列表會設計點擊加載更多，或者直接滑動滾動條加載更多。另外一種情況更常見，即設計固定高度的列表，一頁最多展示5/10/20…條數據，不管多少條，它的高度都是相對固定的。然而有時候數據太少只有一兩條，這個時候仍然要固定默認最多展示條數的高度，如圖：

那么問題來了，在響應式設計當中，可沒有什么參數是固定的值，一般都是用百分比來設置。因為默認顯示的數據條數在任何寬度的情況下仍然保持不變，因此當列表寬度縮小時，內容出現換行會增加高度而拉高整個列表的高度。值得注意的是，當其中一條數據的內容有出現換行而又有其他數據沒有出現換行的時候，每一行的高度都應該按出現換行的且最高的高度保持一致，并且內容仍然保持垂直居中顯示。另外，當前端做成這種響應式的列表時，一般不再讓鼠標拖動列的寬度了。

同一組數據的不同寬度顯示

當寬度拖到第三種情況，按鈕也出現了換行，那每一行的高度都應該按照這個高度保持一致，即使有一些數據只有一個按鈕/地址并沒有出現換行，如圖：

當然，如果你不想讓內容出現換行，就可以用上面說的那三種方法來實現了。

不要再說為什么別人做的表格那么高大上，明明自己做的效果圖還挺好看，為什么實現出來卻那么丑，當你了解這里面的各種參數和邏輯，并且很好的跟前端溝通，參照以上規則，不管再復雜的列表都可以做的得心應手并且得以實現。

整齊并帶有交互功能的表單

在后臺設計中，表單出現的頻率并不低于表格，甚至可以說幾乎所有類型的網頁都會出現。比如登錄注冊、信息錄入、搜索、選擇器等等。常見的表單有輸入框、普通按鈕、開關按鈕、單選框、復選框、下拉菜單。

一個輸入框，通常有標簽名稱label、提示信息placeholder（輸入信息后提示文字消失）、初始值value（需手動刪除）。如果是必填表單，在適當位置（標簽的前后，輸入框后）加上紅色*號（或其他符號）。

一些有字數規定的輸入框，可以增加一個剩余字段提示

事實上，在設計表單之前，我們就要先對表單的標簽進行優化，標簽字段盡可能的簡約。每個組的表單，標簽都必須是對齊的，輸入框/選擇框也應是對齊的。當這個組的表單的標簽字數較少并且較對應時，可以采用左對齊的方式，并且最長標簽的名稱離輸入框有margin值。

另一種情況，也是更經常遇到的情況，當一組表單的標簽很多時，某些標簽字段不能更好的簡化，標簽的字段都不對應，這個時候可以采用右對齊的方式，這種方式更靈活。

當一組表單的標簽太多時，請跟產品溝通并對其進行分類。

有些表單是有邏輯/順序的，比如地區的選擇、出生年月與生肖/星座的對應等等。例如，在選擇省份之前，市區是不可操作的，在UI上做灰度顯示不可操作。除了灰度代表不可操作，透明度也可以起到同樣作用，這種方式也可以運用在按鈕上。

帶有識別功能的輸入框：

當輸入有誤時，盡量避免彈出框提示，可以直接對輸入框設計不同的狀態顯示默認狀態、選中狀態、錯誤狀態、成功狀態。

通過以上方式設計的一組信息錄入型的表單設計，如圖：

表單的設計可以單獨出一篇更詳細的文章，還有篩選/選擇器一類的表單，這里就不一一描述了。

友好舒適的彈窗

彈窗在后臺的出現頻率非常高，其強度一般分為三種，弱彈窗、強彈窗、重彈窗。字面上已經很好理解，輕彈窗，一般鼠標經過的時候即可出現而不用點擊，比如提示說明，顯示更多信息，鼠標移過后立即消失，它不會影響下一層（當前頁面內容）頁面的視覺效果和操作，因此這個彈窗通常會設計一個浮動帶有陰影效果的框。

而強彈窗則是一個對話框，它暗示你必須對這個對話框進行操作后才可以離開，如確認信息、錯誤提示信息。而重彈窗更像是一個新的頁面，比如彈出的列表，詳情，表單等。這兩種彈窗通常是點擊某一個按鈕/經過某一個操作觸發的。這兩種彈窗一般會對下一層頁面的視覺做蒙版處理，比如加上一定透明的黑色/白色，給下一層頁面的內容做模糊濾鏡等等。

當然，這三種彈窗式可以結合的，針對不同場景使用不同的彈窗設計這點非常重要，這直接關系到用戶體驗效果。你是否可曾遇到過使用一款產品時，動不動就彈窗，并且需要去點某一個按鈕才可以關閉。

任何一種場景在設計上都可以得以解決，什么情況下使用什么彈窗設計，或者有時候必須使用強彈窗，但是又不想讓用戶操作關閉，我們可以設計幾秒后自動關閉，或者點擊彈窗以外的區域直接關閉。

彈窗還有兩種主要的表現形式，一種是頂部有關閉按鈕，另外一種是直接點擊確認按鈕或者讀秒關閉。在保持規范性的同時，盡量避免按鈕功能的重復，比如一個提示信息必須讓用戶點擊確認按鈕才可以關閉，那么就使用沒有頂部關閉按鈕的設計。對于重彈窗，一般都會采用頂部有關閉按鈕的設計。

彈窗并不是后臺的專利，它在移動端更高頻率的出現，例如活動頁面的彈窗，趣味性就顯得更重要了。

總結：

這篇文章主要跟大家分享的是，當開始網頁后臺項目設計的時候，保持跟產品和前端的良好溝通。確定風格后開始設計，并分享了3個主要的點：

• 制作靈活又簡潔的表格
• 設計整齊并帶有交互功能的表單
• 選擇友好舒適的彈窗

后臺還有其他元件設計，歡迎大家共同探討。

文章來源：優設網    推薦：程遠

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

隨著大數據的興起，數據價值的不斷挖掘，圖表作為數據呈現與分析的有效手段，正扮演著越來越重要的角色。我們在進行 B 端平臺設計時也在思考：如何讓圖表清晰的傳達信息，同時帶來美觀的視覺感受。

為了達到清晰傳達和視覺美觀的目標，我們結合實際項目，進行大量探索及思考，梳理總結了一套適用于 B 端后臺類產品的圖表設計思路及方法，涵蓋了曲線圖、柱狀圖、餅圖、雷達圖、漏斗圖等各類常用圖表類型。

圖表視覺層級

圖表能夠承載大量數據信息，同時視覺元素較多，如果只是憑借設計師的審美喜好進行視覺設計，沒有整體信息讀取考量，可能會導致重要信息未能凸顯，降低用戶讀取效率。

為清晰傳達信息，進一步提升讀取效率，我們采用元素重要程度與視覺強度相綁定的方法。依據元素重要程度，將圖表元素分為三類，分別為“底層元素”、“中層元素”和“頂層元素”，并依據不同視覺強度分別設計三類元素。底層元素最弱，頂層元素最強。通過這種方法，梳理圖表元素的前后關系，能夠清晰把握元素視覺層次，保證信息傳遞效率。

1. 底層元素設計

在各類圖表中，我們把輔助說明數據的軸線、刻度等定義為底層元素。為了減少視覺干擾，最大程度突出主圖形，底層元素全部使用淺灰色進行設計。我們發現，當元素與背景顏色的明度對比在 1.2:1 時，人眼較難看到元素；當對比度在 2.0:1 時，視覺強度過強，易吸引用戶注意力。通過元素視覺強度的調研及視覺嘗試，最終確定元素與背景對比度在 1.6:1 左右，視覺強度偏弱但人眼能夠看清的程度。以保證元素視覺不突兀，只在需要查看時可以被發現。

2. 中層元素設計

中層元素的內容包括數據圖形、數據線段等承載主要數據信息的元素，是圖表中表達數據的關鍵元素。與底層元素相比，中層元素采用更低明度與更高飽和度的數據色來表現，使元素從頁面中凸顯出來，保證可讀性。同時在樣式上適當加入漸變、描邊等樣式，豐富視覺層次，帶來美觀的視覺感受。

3. 頂層元素設計

我們把頂層元素定義為圖表高亮信息，內容包括懸停樣式、懸停后的詳細數據說明等。在設計上為保證視覺樣式突出，使用深灰色、強調色等強對比度樣式，并輔以動畫、投影等手法保證明顯的視覺強調效果，保證頂層信息最有效的傳達給用戶。

4. 最終效果

通過層級梳理，并綁定元素重要程度和視覺強度的方法，設計后圖表主次信息均按重要程度進行對應視覺強度的展示，讓用戶能夠在第一時間接收到最重要的信息，提升信息讀取效率。

圖表排版設計

圖表排版是指各元素在圖表中的尺寸及布局等，對于 B 端后臺類產品來說，不同排版對用戶使用體驗造成較大影響。如何建立一套合理的規范保證用戶的使用體驗？我們經過大量討論推敲，梳理出一套針對 B 端后臺類產品的排版規則，力求保證用戶圖表的使用體驗。

1. 圖表尺寸

圖表尺寸指圖表整體長寬高。在項目中我們發現不同尺寸的圖表對數據展現效果影響巨大，例如巨量數據的圖表擠在名片大小的區域例顯示，這使得信息讀取的效率大打折扣。為此我們收集并提取出“全貌概覽”、“多角度環視”、“詳情分析”三類典型場景，并制定了“迷你圖”、“中號圖表”、“大號圖表”三類尺寸，針對不同尺寸優化圖表的信息展示密度，以達到高效讀取信息的目的。

“迷你圖”尺寸最小，舍棄了 Y 軸等不必要信息，利用小面積展示最關鍵的圖表信息，并控制數據密度，保證信息高效讀取。

“中號圖表”尺寸受限，限制坐標軸刻度數量和數據的密度，例如曲線圖數據點不高于每 4 像素 1 個數據點，Y 軸坐標刻度不超過 5 個，以確保信息密度不過載，這類圖表尺寸通常用在針對某大類內容進行多方面檢視時。

“大號圖表”尺寸最大，不限制數據信息密度，給予最全最詳細的展示，這類尺寸通常用在數據詳情頁等詳細分析場景中。

最后考慮到多圖表混合排列時，餅圖、地圖等大面積填色圖表，相較折線圖等描邊型圖表，視覺感受更加膨脹。我們縮小了填色類圖表的實際高度，保證多種圖表混合排列時，視覺感受的均衡。

2. 坐標軸

坐標軸在圖表中出現的頻率較高，那么坐標軸常見的設計問題有哪些呢？

第一是橫縱坐標軸的刻度出現過密情況。

如果坐標軸所承載的是連續數據（連續數據指可量化的，連續不斷的，在區間內可任意取值的數據，如時間、金額、人數等），設計師可自行增減刻度數量以保證視覺舒適度。如果承載是離散數據（離散數據指不可量化的，無關聯的，不可在區間內任意取值的數據，如分類、軟件版本、省份等），可采取增加坐標軸縮放功能解決。

第二個常見問題是刻度的說明文字過長。

如果是 X 軸（橫軸）文字過長，除了在可控范圍內減少刻度，還可采取文字傾斜 45°~90°的辦法(如文字全部為中文，可用豎排代替傾斜 90°)，緩解信息過密看不清的情況。

如果是 Y 軸（縱軸）文字過長，需聯合研發一起調整數據的單位，比如把“元”調整為“百萬元”。

如果不能調整，那就要根據所使用的圖表庫有針對性調整。例如常用的 Echarts 圖表、D3 圖表等開源圖表庫，需要提前預估刻度文字長度并預留出來，否則刻度文字可能會被頁面裁掉而不能完全顯示。如你是用的是 AntV 等可自適應的圖表庫，則不必提前處理，圖表庫會自動按刻度長度進行整體調整。

3. 圖例

圖例作為圖表中不可或缺的部分，在各類圖表庫中位置不盡相同，由于不同圖表樣式差異很大，圖例的位置需整體考慮并適當布局擺放，但在同一產品或頁面內，過于隨意的擺放圖例，會導致頁面統一性較差，同時增加用戶的瀏覽成本。我們團隊所負責的 B 端商業產品矩陣，作為面向用戶的產品集合，產品間聯系非常緊密。過于靈活隨意的圖例擺放不利于用戶對于圖表的瀏覽。為解決此問題，我們基于業務特點，針對 B 端商業產品矩陣制定了圖例布局指導原則。

我們以提升屏幕信息密度為目標，分析不同場景的頁面排布，制定了頂部和右側兩種較為寬松的指導原則，供設計師在沒有明確的更優方案時選用。

當圖表是左右兩端對齊的類型，例如折線圖、柱狀圖時，建議將圖例放置在圖表頂部。這樣能結合標題等其他元素進行統一排布，減少占用空間。當圖表本身左右都有空余空間時，例如餅圖，建議將圖例放置于圖表的右側。也能夠節省頁面的空間。

數據色板設計

色板作為常見的數據表達手段，能夠利用不同顏色明確體現分類信息、數值高度、狀態信息等。但目前市面上鮮有專業用途圖表的配色工具。我們經過大量探索嘗試，梳理總結出圖表色彩的兩個關鍵維度：辨識度與統一性。既需要顏色間突出強烈可清晰辨別，又需要顏色整體能形成統一風格，以達到清晰傳遞和美觀的目標。如何平衡辨識度與統一性，是我們遇到的難題。

1. 辨識度

辨識度在圖表中有兩方面：顏色與頁面底色的辨識度，各顏色之間的辨識度。對于第一種，我們采用控制顏色的明亮程度來確保色彩辨識度，尤其對于黃色、青色等本身較亮的顏色，降低顏色的明度，確保在淺色背景下顏色可辨識。

對于第二種也就是各顏色之間的辨識度，通過實驗發現單純的顏色色相變化，例如紅色與橙色的區分，人眼不容易分辨。所以采用了色相變化+明度變化的方法，即深紅色與亮橙色，深藍色與亮紫色等，這樣用戶能在第一眼就明確分辨，保證顏色間的辨識度。最終把顏色映射到色彩空間的三維坐標中，運用歐幾里得距離公式測算顏色間的距離長短，來衡量各顏色間色差數值。顏色間距離越遠代表色差越大，利用數據輔助衡量辨識效果。

2. 統一性

色彩統一性的作用在于確保圖表整體風格一致，色彩搭配舒適，從而帶來美觀、統一的視覺感受。為達目的，我們首先提煉商業產品設計風格為明亮、強對比，其次把設計風格轉化為色彩數值。經過實驗，把顏色明度限制在 50%-70%，把飽和度限制在 75%-85%，并在區間內不斷波動。這樣既保證了色彩視覺感受的統一，各顏色間又能夠有清晰的辨識度。

3. 顏色量化與工具

量化顏色，將色彩轉化為數值，利用數值來驗證設計師的「感覺」，能夠保證方案合理性，保證設計質量。但通過嘗試，我們常用的色彩模式均不能科學合理的量化顏色。通過查閱大量資料，我們最終決定以小眾的 HCL 色彩模式來衡量色彩。其中 H 表示色相、C 表示飽和度、L 表示明度。HCL 區別于傳統的 RGB 或 HSB 模式，它能夠將人眼對顏色的感知精確的量化為數值，例如黃色相比藍色明度更高，都能如實的反饋到數值上。也由于此特性，HCL 模式在誕生距今不到 20 年間，已被一些先鋒設計師用于數據可視化的呈現中。

但是 HCL 作為小眾色彩模式，目前設計軟件鮮有支持，造成了 HCL 色彩不直觀、不方便調色等的問題。為解決此問題，我們已初步完成智能配色程序，只需輸入品牌色，就能自動生成圖表色版，并在風格上與品牌色匹配，達到整體色彩的統一。我們也將一套調配好的色板及 HCL 實用小工具附在文末，幫助大家直觀的查看和使用 HCL 模式顏色。

結語

數據價值就像不為人知的寶藏，隱藏在一條條枯燥晦澀的數據背后。而圖表則是開啟寶藏的鑰匙，是發掘數據價值的強有力武器。通過對圖表的不斷探索優化，我們希望能夠最大化數據的價值。通過圖表，讓數據最直觀的展現；通過圖表，讓其背后的規律浮出水面被人探知；通過圖表，讓 B 端不再有難懂的數據。

附：色板及 HCL 工具

• HCL 調色 Sketch 插件：https://github.com/petterheterjag/chromatic-sketch
• HCL 顏色生成器：http://medialab.github.io/iwanthue/
• 色彩可用性檢查工具：https://color.review/

文章來源：優設網    作者：百度MEUX

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

圖表是數據可視化中最常用的一種表現形式，一定要吃透它。

隨著互聯網數字化越來越完善，數據可視化這個詞的使用頻率也越來越高，而圖表是數據可視化中最常用的一種表現形式。無論是工作匯報還是后臺設計，都離不開圖表的使用。然而關于圖表類相關的資料太零碎了，不成體系，對于初學者非常不友好，本篇文章我從圖表的祖輩開始，把它都給挖了出來，希望對你有幫助。

什么是圖表

圖表的定義：可直觀展示統計信息的屬性，對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構，是一種很好的將對象屬性數據直觀、形象地可視化的手段。

英文叫法：Chart。

用戶對圖形的敏感程度遠遠大于文字，所以產品就需要把數據信息可視化，用簡單的圖形表示出更多的信息量，而圖表是數據可視化中最常用的表現形式。

接下來我們來介紹圖表的具體構成及元素解析。

圖表的構成

圖表是由：標題、圖例、刻度軸、數據展示、網格線、提示信息、水位線、時間軸組成，每一個元素都有它存在的意義。在實際使用中不一定非得把元素全部展示出來，精簡化顯示想要展示的內容即可。

圖表元素解析

1. 標題

顧名思義，標題就是圖表的名字，標題是必不可少的元素。標題的內容一定要言簡意賅，不要太長，能兩個字寫清楚絕對不用三個字。

標題的常用位置有 3 個：左上角、頂部居中、底部居中。

一般情況下，標題字號 / 色值要突出一些，用戶第一眼看到 chart 的時候，要清晰的看到這個圖表是做什么的。

特殊情況下，如果需要對標題有額外解釋的話，兩種展現形式：

• 增加提示圖標；
• 增加提示語。

2. 圖例

圖例的組成

顏色、名稱、數值、單位。

圖例的展現形式

圓形、開關、矩形、鼓包線、實線、虛線。

圖例的位置

從左至右、從上至下。

圖例的作用

• 標識出每個顏色所代表的的類別；
• 開啟 / 隱藏數據顯示；
• 圖例顯示的數值一般為當前值。

圖例的顏色選擇

同一組圖例中，不要出現相近的顏色，否則在圖表顯示中分不清彼此。

產品使用中，要規范圖例顏色使用，一般分為兩種：

• 常用的圖例顏色（顏色本身代表著行業中的某種含義），此類顏色需要是固定色值，無論哪個 chart 中，都是這個顏色；
• 無特殊含義的圖例，可以規范出一個圖例顏色的使用順序表。那些無特殊含義的 chart 可以按順序使用圖例顏色，圖例整齊劃一。

圖例過多時如何展示

• 如果圖例可整合前提下，展示主要圖例 / top n 圖例，其他的圖例做整合，增加個詳情頁來展示完整的；
• 如果圖例不可整合/省略，則需要給出足夠的展示空間。

共用圖例

如果多個 chart 的圖例一樣，可進行合并，減少冗余圖例。

圖例省略

如果 chart 中只有一個圖例的話，可省略。

圖例名稱限制

根據不同使用場景，為了更好的展示效果，要給圖例名稱設置一個最大值，超過最大值后省略展示。

3. 坐標軸

坐標軸分為 X 軸和 Y 軸，常規情況下為 1 個 X 軸+1 個 Y 軸。不過特殊情況下也會用到 2X+Y 或 X+2Y。

刻度值代表的意義

• 時間點：12:00；
• 時間段：周一、周二。

坐標軸使用規則

是否帶單位：

• 如果刻度值的含義明確的情況下，可以不用帶單位，比如：2018、2019、2020…；
• 如果刻度值含義有歧義的情況下，必須加上單位（具體是統一一個位置加單位，還是每個刻度值上加單位，則需要根據場景來判斷）。

對齊方式（常用，但非必須）：

• X 軸：居中對齊；
• Y 軸：右對齊。

刻度值過多時如何顯示：

• 可選擇規律性省略刻度名稱；
• 傾斜文字以顯示更多的文案。

刻度值的選用一定要是同一個規律，禁止同距離的刻度值代表不同數據。

刻度點的樣式使用規則：

刻度的線朝外。

4. 數據展示

數據的展示是 chart 中最為明顯的地方，可以說如果只顯示一個元素的話，就是他了。

數據展示的使用規則：

• 邊界要清晰，不可虛化；
• 多個數據同時顯示的時候，要保證每個數據都能清晰的看到，可以采用透明度來保證所有數據的顯示。

5. 網格線

網格線的作用

呼應坐標軸，美觀度。

網格線的使用規則

• 線的顏色要弱化，不要喧賓奪主；

網格線使用實線居多，盡量不用虛線。

使用場景

橫、縱、橫縱結合、無網格線。

6. 提示信息

通常情況下，提示信息用來標識出 chart 中重要點的數據信息，需要注意的是：重要信息盡量簡化，信息量不要太大，言簡意賅就好。

7. 水位線

根據不同產品的使用場景，有的時候會用到閾值，當達到某個閾值后，就會觸發某種聯動。這個時候就需要有個水位線了，它起到警示的作用。

形式有兩種，實線和虛線，顏色的選取則取決于產品的警告級別。

水位線可以是一個，也可以是多個，視情況而定。

8. 時間軸

時間軸可以靈活地調節刻度值的上下限，從而更精確的看到自己想看的數據。

時間軸的功能及限制沒有不是很復雜，所以就不過多解釋了，需要用的話就用。

圖表使用建議

1. 折線圖 line

定義

折線圖可以顯示隨時間（根據常用比例設置）而變化的連續數據，因此非常適用于顯示在相等時間間隔下數據的趨勢。折線圖是通過線條的波動來表示數據的波動，主要體現的是數據隨著時間的推移而變動的圖表。

使用場景

常用于觀察一段時間內數據波動的浮動變化，比如：一天內內存的使用情況。

使用建議

Y 軸刻度值選擇要合理，當前顯示的數據波動要最大化的顯示；

重要節點可以單獨做重點標注；

數據拐點要平滑，不要太鋒利。

2. 面積圖 area

定義

面積圖和折線圖比較類似，區別在于面積圖把數據區域做了個面積劃分，讓數據的顯示更加清晰。

使用場景

面積圖展示盡量不要超過 3 個圖例，否則數據多的情況下，數據的展示會特別亂，影響觀看。

使用建議

面積區域要和折線的顏色用統一色系，不要換色系；

面積區域一般要比折線顏色淺一些，這樣視覺上更加讓人舒適；

如果多條數據情況下也用面積圖的話，面積區域盡量使用透明度，否則有的數據會被遮擋看不到。

3. 柱狀圖 bar

 定義

柱形圖，又稱長條圖、柱狀統計圖。用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常利用于較小的數據集分析。

使用場景

• 柱狀圖分為橫向和縱向兩種展現形式；
• 用于在同一維度下不同數據的對比，用柱狀圖更能清晰的對比出數據的差異化。

使用建議

柱狀圖的厚度不要是固定值，要做成自適應來應對不同尺寸的分辨率顯示；

厚度與間距的對比要合理設計；

可使用小圓角，千萬不要用大圓角，太丑了……

如果想要強調某個柱子的話，可以進行顏色區分，但是柱子顏色不要超過 2 個（同一維度下）；

如果想要在柱子上顯示數值的話，使用建議（下面的順序為推薦順序）：

• hover 的時候出現數值；
• 數值默認在柱子上顯示；
• 數值在柱子頂部 / 右側顯示。

4. 餅圖 pie

定義

餅圖僅排列在工作表的一列或一行中的數據，它是有一個總和數據，方面查看每個類別分別占總數據的百分比的一種圖表。

使用場景

• 常用于做總結、年度匯報等；
• 所有數據相加必須是 100% 才可用。

使用建議

• 每個數據要使用單獨的顏色來表示，不要有相同顏色；
• 餅圖中不能有負值；
• 圖例數量沒有限制，但是如果遇到可以合并的圖例，可以進行合并；
• 餅圖的開始點為 0/12 點位置。

5. 環形圖

定義

環形圖是由兩個不同大小的圓疊在一起，切割中心部分得到的一種圖形。

使用場景

• 環形圖有一個獨有的特點，就是可以在中心圓的位置突出某一項指標的數值。
• 它常用于做數據的監控，監控某一類指標是否正常。

使用建議

• 環形圖的開始點為 0/12 點位置；
• 環的粗細要合理，不要太粗和太細；

環形圖的兩個圓要從中心對齊。

6. 堆疊面積圖

定義

堆疊面積圖是把數據面積按順序逐步堆疊起來的一種圖形。

使用場景

常用于不同資源中流量 / 容量的使用。

使用建議

• 不要有重復的顏色；
• 盡可能的把數據量按大小的順序，由下至上的堆疊。

7. 堆疊柱狀圖

定義

堆疊柱狀圖是把數據柱狀圖按順序逐步堆疊起來的一種圖形。

使用場景

常用于不同維度下相同幾個指標的展示。

使用建議

• 不要有重復的顏色；
• 按重要等級由下至上排序。

8. 非常用圖表

上面介紹了常用的圖表的使用建議，但是圖表類型遠遠不止于此，還有很多非常用的圖表類型，這次我先給大家列出來，如果大家感興趣的話，我后面再寫一期冷門圖表的使用建議：

雷達圖，散點圖，K 線圖，盒須圖，熱力圖，旭日圖，?；鶊D，樹圖，漏斗圖，儀表盤。

常用的圖表開源網站

1. echartsecharts

網站鏈接：https://echarts.apache.org/zh/index.html

2. highcharts

網站鏈接：https://www.highcharts.com.cn/

3. antv

網站鏈接：https://antv-g2.gitee.io/zh/examples/gallery

總結

Chart 是數據可視化必修課中最重要的模塊之一，不可忽略。只有了解每個 chart 的定義及使用場景，才能在產品中用到最合適的那一個。

文章來源：優設網    作者：Luck gg

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

對于任何手機應用程序，如果沒有來自用戶的一些初始和正在進行的輸入，就不會發生任何事情。因此，手機產品設計師、開發人員和產品經理必須了解允許用戶這樣做的最佳方式。

雖然手機應用程序以及使用它們的用戶通常是獨一無二的，但是有許多常見的模式(新模式和舊模式)被用來解決這個特定的問題。

用戶輸入設計的6個目標

在我們深入研究模式之前，了解用戶輸入設計的六個主要目標是很重要的：

1. 選擇合適的輸入和資料登錄方法

2. 減少輸入量

3. 設計有吸引力的數據輸入屏幕

4. 使用驗證檢查來減少輸入錯誤

5. 設計所需的輸入文檔

6. 制定有效的輸入控制

模式的概述

在記住以上設計目標的前提下，下面是我們在將本文中詳細介紹的設計模式的概述，在我們的電子書《2014年手機用戶界面設計模式》中有更詳細的介紹:

1.智能鍵盤
2.默認值&自動完成
3.立即沉浸(或“惰性注冊”)
4.操作欄
5.社交賬號登錄
6.巨大按鈕
7.滑動操作
8.通知
9.顯性控件
10.可擴展輸入
11.撤銷

1.智能鍵盤

Facebook記事本，Android聯系人

問題
用戶希望快速輸入信息。

解決方案
當用戶點擊應用程序中允許輸入信息的部分時，給他們與輸入數據相關的鍵盤。這使他們不必在字母數字屏幕之間尋找正確的按鈕，或者多走一步來訪問鍵盤。這不僅方便了用戶，而且還指示了需要從用戶那里得到什么類型的輸入。手機平臺允許相應地標記文本字段，這允許在哪些按鈕顯示在更顯著位置方面有一定的靈活性。

例如，在地址簿或撥號器中輸入電話號碼時，用戶不需要完整的鍵盤。當他們點擊這些字段時，數字小鍵盤就會彈出，而不是整個鍵盤，這樣就減少了不必要的按鈕，簡化了操作過程。類似地，點擊瀏覽器中的URL欄會彈出一個稍微修改過的鍵盤，其中“/”和“。com”按鈕顯示在空格鍵旁邊，而不是符號鍵后面。通過連接到系統提供的這些智能鍵盤類型，你的UI可以根據用戶當前嘗試的操作進行調整。

2.默認值&自動完成

Skype, Flightboard

問題
用戶希望快速完成操作。

解決方案
通過為用戶提供預先填充的默認值或基于先前輸入的數據的提示，預測頻繁選擇的項并使用戶更容易地進行數據輸入。這可以與自動完成功能相匹配，比如在谷歌Play Store搜索中，通過加速來顯著改善用戶體驗。這種模式在標準化用戶輸入和在問題發生之前預測問題方面特別有用。例如，Skype會自動為輸入的電話號碼匹配國家代碼。從用戶的角度來看，這是有意義的，因為他們不習慣定期輸入這些信息，但在這種情況下，這種匹配很重要，因為Skype是一個國際電話應用程序。

另一種實現方法是保存用戶輸入的最后一項，并在用戶再次輸入或搜索時顯示這些最近使用過的項。例如，Flightboard在搜索框下面列出了以前使用過的位置，以避免用戶再次輸入。大多數地圖或導航應用程序也采用這種模式，在搜索方向時自動輸入用戶當前位置，為用戶節省幾次點擊，因為這是最常見的情況。

3.立即沉浸（或“惰性注冊”）

Wunderlist

問題
用戶希望在注冊之前先嘗試一下。

解決方案
越來越多的應用程序允許用戶在任何事情發生之前——甚至是注冊或登錄之前——立即沉浸在應用程序中。

記住，他們一次只能做一件事，而且測試每個新產品的時間有限。隨著應用程序的日益專業化，在扶持它們之前找到高質量的用戶或客戶越來越重要——他們可能會討厭你的產品或很快意識到它不是他們想要的。向用戶詢問注冊賬戶所需的信息可能是一件很困難的事情，而且會降低甚至是適合的訪問者的注冊率。在積極的方面，通過讓他們立即體驗你的產品，他們更有可能被吸引，因為他們能夠在第一次體驗時深入探索應用程序。這比我們接下來討論的onboarding walkthrough UI模式更好，因為它向用戶展示而非告訴他們應用程序如何工作。

對于Carousel或Duolingo等依賴用戶數據來運行的應用程序來說，允許延遲注冊是沒有意義的，但Wunderlist或Houzz等應用程序可以允許用戶在要求他們確認身份之前進入并使用該應用程序。通常情況下，注冊會帶來一些額外的好處，比如在Wunderlist中進行跨設備同步，或者在Houzz中創建一本想法書，這會讓注冊變得更有吸引力。延遲注冊并不總是一個好主意，但是選擇“注冊前試用”可以很好地提高你的應用程序的參與度。

4.操作欄

Facebook Paper, Behance

問題
用戶希望快速訪問常用的操作。

解決方案
從應用程序的操作欄(或iOS術語中的“工具欄”)提供對重要操作的快速訪問。雖然導航條主導了web和早期的手機應用程序設計, 但其他模式的使用，如折疊、滑出式工具欄和側邊欄、指向所有內容的鏈接、按鈕轉換、垂直的和基于內容的導航，產生了更簡單的應用程序視圖，用戶可以專注于一級和二級操作，而不是二級導航。常見的操作有：在應用程序中搜索、共享和創建新內容。這個存留的菜單可以幫助用戶熟悉UI，還可以通過專注于與用戶相關的重要操作清除一些混亂。

5.社交賬號登錄

Beats Music, Flipboard

問題
用戶需要一種更簡單的注冊和登錄方式。

解決方案
整合社交賬號登錄方法，允許用戶通過現有賬戶登錄。這意味著他們少了一個需要擔心的用戶名/密碼組合，同時，你也不必擔心密碼的安全性。Facebook、Twitter和谷歌是主要的OAuth登錄提供商，根據平臺和目標受眾的不同，你可以在你的應用程序中提供所有這些或其中之一，而不是讓用戶建立一個他們可能會也可能不會在未來使用的單獨的帳戶。使用這個注冊和登錄模式也可以為你提供一些基本的關于用戶的數據(當他們使用應用程序時，會自動填充數據), 同時，通過不強迫用戶在剛下載的陌生應用程序中輸入他們的詳細信息，讓他們更加舒適。這個簡單的特性可以在很大程度上改進你的UX，因此這種模式正在成為一種期望。

6.巨大按鈕

Tinder, Shazam

問題
用戶希望立即知道他們可以采取哪些操作。

解決方案
理想的觸屏點擊目標大小可能是72 px,但是一些應用程序，像Tinder，也會給你巨大的按鈕讓你確切地知道該做什么, 無論你在什么位置，無論你在做什么，你都能很快完成操作——很難錯過這些巨大的按鈕,即使你沒在仔細看。這在更簡單的應用程序中尤其有價值，因為在這些應用程序中，用戶需要執行的操作非常有限，因此更有理由讓他們在各種情境中更容易地執行這些操作。例如，Shazam是用來看電視或聽音樂的，它實際上只做一件事。對于試圖在這種分心狀態下進行多任務處理的用戶來說，巨大的按鈕是一個巨大的改進。

7.滑動操作

Carousel

問題
用戶希望關注特定的內容。

解決方案
允許內容被滑動或移動。這為用戶提供了一種非常直觀的方式來處理屏幕上的信息。例如，谷歌中的“卡片”現在可以在你不需要的時候被滑走，以清理雜物;類似地，Tinder中的配置文件可以向左或向右滑動，以表示積極或消極的響應。這個模式與我們在導航模式中討論的滑動視圖不同。在這里，滑動手勢被用于一項操作，而不僅僅是瀏覽。有些應用程序結合了兩種滑動模式，比如Carousel，它可以讓你通過將照片滑動到一邊來瀏覽多張照片，也可以通過向上或向下滑動來分享或隱藏照片。郵箱推廣了電子郵件客戶端的左右滑動操作，允許你分別通過向右或向左滑動將郵件標記為已讀或安排為待處理。Secret用讓你發現新菜單的方式來讓你發現新動作。向左滑動一個secret代表你喜歡它。

8.通知

LinkedIn, Facebook

問題
用戶希望了解他們應該瀏覽的新活動或操作。

解決方案
通過標記新內容來突出最近的活動。這個模式有幾種實現方式。例如，在標簽上放置一個計數徽章是由iOS推廣開來的，但現在這也可以在許多其他應用程序中看到，如LinkedIn、Facebook或Quora。Twitter在通知按鈕上也這樣做，但它在時間軸圖標的頂部還有一個小點，以更微妙的方式指示新的活動。另一種顯示通知的方式是在應用程序中使用一個向下拉的橫幅來顯示新活動。Facebook應用程序也能做到這一點，當新聞推送中出現新條目時，它會彈出一個小窗口。

9.顯性控件

Secret

問題
用戶希望快速訪問那些二級的或僅與應用程序中的特定部分或內容相關的控件。

解決方案
清理雜物，讓用戶只在需要時才發現特定的操作。這些看不見的控件可以通過任何手勢來訪問——滑動、輕擊、雙擊、長按等等(我們在手勢模式中討論過)。這使你能夠將這些操作保留在屏幕之外，從而節省一些寶貴的空間。例如，Secret使用手勢而不是可視控件。向右滑動，就會出現一個動作菜單，這是我們前面介紹過的折疊模式的簡化版。在創建內容時，用戶可以在背景上水平滑動或垂直滑動手指來改變背景的顏色和圖案，或者在使用圖片時，可以改變圖片的亮度、飽和度或模糊度。沒有其他控件允許你這樣做——也不應該有其他控件。這種UI設計模式非常直觀、清晰，你一定會看到更多這種類型的交互。Pinterest是另一個使用手勢隱藏動作按鈕的應用程序。長時間按下一個圖像，就會出現一個按鈕，用戶可以通過將彈出控件拖動到該按鈕上來對其進行固定或評論。

Uber是這種設計模式的另一種實現方式。Uber還可以讓你在預訂和查看車費估算之間進行切換，只要你選擇了你想要的乘車類型，就可以通過點擊滑塊按鈕來查看車費估算。這是一個簡單而又重要的UI設計模式，每當我在做五件事的同時還想搭個便車，同時還要確保Uber不會用峰時價格來騙我的時候，它都會讓我微笑。Snapchat和Facebook Messenger允許你在需要的時候通過滑走所有朋友的賬戶來訪問這些功能。

10.可擴展輸入

YouTube

問題
用戶希望關注內容，而不是犧牲屏幕空間給控件。

解決方案
設計當用戶點擊時會展開的控件。這使得大多數控件在用戶需要它們之前都不會出現。例如，YouTube和Facebook通過將搜索欄隱藏在一個圖標后面來節省屏幕空間，當用戶點擊這個圖標時，它就會展開成一個搜索欄。

11.撤銷

Gmail, Chrome

問題
用戶希望在沒有中斷(例如:確認)的情況下快速地執行操作，但是可以選擇恢復意外操作。

解決方案
為用戶提供一個簡單的方法來撤銷他們的操作，而不只是要求他們事先確認。在某些情況下，某個操作可能會導致不方便或數據丟失，例如刪除電子郵件或編輯一些文本。用戶可能因為不知道會發生什么而完成了一個動作;一個寬容的用戶界面可以讓他們體驗到更多的參與感和友好。對于高級用戶來說，撤銷功能也很強大，他們會喜歡在整個過程中不用UI反復詢問他們是否確定要繼續操作，就能更好地控制局面。在解釋將要發生的事情時，確認彈出窗口可能很有用，但是用戶可能直到看到操作的結果才會理解其含義。在這種情況下，最好是讓開，同時提供一個安全網絡，以防出現錯誤。

獲取用戶的輸入
時刻記錄你應該從用戶那里獲得輸入的位置，他們是否曾經查看過這些輸入區域，他們使用這些輸入控件的頻率，他們從哪里來，又從哪里進入應用程序(即用戶流)，等等。不斷地重新安排、重新排序、調整大小和調整這些控件，直到你獲得更多所需的操作。當然，當用戶能夠提供輸入時，要深入考慮他們實際上是如何使用你的移動應用程序的——確保你在設計應用程序時沒有遺漏什么明顯的東西。

文章來源：站酷  作者：馬克筆設計留學

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