對用戶而言，要判斷網站的用戶體驗是否足夠優秀是很容易的事情，因為主觀感受是很難被欺騙的。但作為網站設計師而言，需要花費大量的時間和精力去面對和體驗各種復雜問題，才能完善整個網站用戶體驗的閉環。
數據表單是一種常見的平臺設計樣式，在看似乏味呆板的設計中，沉淀著許多優質的設計體驗方法。尤其是在信息組織、信息傳達、信息承載和閱讀性方面，數據表單蘊含了許多設計規則和設計模式，使用戶能夠輕松地獲取、處理信息。該篇文章介紹了固定表頭、固定側欄、自定義欄、分頁器、過濾器、數據排序、多選項同時操作、簡單且簡約、普通的字體樣式、項目鏈接、鼠標懸停這 11 個設計指南，為大家提供有關數據表單設計的實用性建議。
當然，在實際的數據表單設計中，還需要根據產品要求和用戶目標進行相應的調整。你對數據表單設計有什么經驗體會？有過哪些很棒的設計案例？歡迎交流分享～
對于大多數 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.設置固定的行高
表格和網格是體現結構化信息的，但是，當表格的列寬、行高不同時，就會變得混亂，信息也就會變得沒有體系。
因此，為了整體的可用性和美觀性，我覺得不管內容如何，所有行都應具有完全相同的高度。
為了更好地支持多行文本塊，請考慮以下事項：
用換行替換為空格，并將整個文本變成一行（通過調整列寬的大?。?/span>
將（所有行的）行高設置為2行而不是1行（可以解決某些情況）
使用工具提示（可以用，但是最好不要用）
通過單擊行來展開/折疊（剛需）
采用浮動側視圖顯示所選行的詳細信息。
美學設計可以帶來更好的使用感。
以下是通過簡單的UI設計修改來消除雜亂并提高內容可讀性的幾種方法：
9.增加單元格填充
使用空格。
加載信息的表，正是用戶想要看到更多空白的地方，即使這會花費他們一些額外的滾動時間。
10.消除不必要的邊框
一旦數據結構良好并且留有空白，就該擺脫那些多余的邊框，或者讓邊框線條變得超細且顏色淺。
文章來源：優設網 推薦：墨刀_MockingBot
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編者按：互聯網的誕生本就是一個奇跡，作為其中最重要的載體之一，網頁就是這個大時代最重要的縮影，相關技術、設計伴隨著信息共享催動著整個時代滾滾向前。這是一段簡短的網頁設計發展史，我們可以看到技術、設計與思想的演進，看到無數有識之士改變世界的剪影。本文作者是網站Froont.com的聯合創始人Sandijs Ruluks。
當我發現設計網頁有多投機取巧的方法之時，就逐漸開始對手打網頁代碼失去興趣。的確，許多網頁設計的問題并不止一種解決方案，但是很少有方案能解決所有的瀏覽器兼容性問題。最令我納悶的是，為什么會有做設計和寫代碼的分工？隨著技術的發展，許多在過去難以解決的問題現在可以輕松搞定，但為什么與此同時一些簡單的事情反而越來越難以實現？這些問題的答案并不是簡單的是與否，對與錯，也許我們需要從網頁設計的整個發展歷程來尋找答案，找到真正彌合設計與代碼之間隔膜的原因所在。
溫故歷史之前，不妨看看2014年最優秀的網頁設計：《愛不釋手！2014年最佳的20個優秀網頁設計》
在互聯網真正開始之時，黑色的顯示屏僅能顯示單色的像素?？梢哉f，當互聯網天地初開之時，Web Design 僅僅意味著字符和空格的排列組合。雖然圖形化的界面早在80年代初就有了，但在此時普及率并不高。直到90年代，圖形化界面才真正進入千家萬戶，而那時候，才是屬于互聯網的狂野西部。
能夠顯示圖片的瀏覽器的誕生，是促使網頁設計這個行業誕生的重要先決條件。實際上在當時，最接近于信息結構化的概念，是HTML中已有的元素：表格（Table）。所以，David Siegel 在他的網頁設計書《Creating Killer Sites》講述了他設計優秀網站的秘訣：在表格中嵌套表格，將靜態的表格和動態的表格以巧妙的方式結合到一起。盡管表格本身是用來承載數據的，用來承載內容和圖片有點奇怪，但是在那個時代，這種方法依然顯得頗為靠譜，并且大行其道。
網頁設計所面臨的另外一個問題，就是如何保持網頁那脆弱的結構。也正是因為這種需求，切片設計（Slicing Design）逐漸流行了起來。設計師創建出漂亮的網頁布局，隨后開發者將整個設計稿切片，找出呈現設計的最佳方法。另一方面，表格還有一些炫酷的功能，比如垂直對齊，以像素為單位或者以百分比來控制對齊。在那個時代，表格可是近乎柵格系統一般的靈活的設計神器，也正是因此，那個時代的開發者并不喜歡前端的代碼。（表格嵌套表格有多亂？）
JavaScript的出現補足了尚且原始的HTML。舉個例子，如果你想寫個彈出窗，或者想動態修改某些對象的順序？HTML不行，但是JS可以！不過此時JS的主要問題在于，它處于整個網頁布局的頂層并且需要單獨加載。很多時候它僅僅被懶惰的開發者用作一個簡單的補丁，但如果使用得當，JS可以非常強大。今天，同樣的功能如果CSS能實現，我們會盡量避免使用JS。不可否認的是，JS本身確實很強大，前端常用的jQuery，后端的Node.js都是不可多得的好東西。
作為一門新技術，Flash為網頁開發者/設計師帶來了前所未有的自由，它打破了之前網頁設計所固有的限制。借助Flash，設計師可以隨心所欲地在網頁上展現任何形狀、布局、動畫和交互，可以使用任何喜歡的字體，他們借助Flash熔于一體。所有的這一切最終會被打包成為一個文件，然后被發送到瀏覽器端顯示出來。這也就意味著，用戶只需要擁有最新的Flash插件和些許等待時間，就可以享有一個魔術般的網頁。這是啟動頁面（splash pages）、介紹動畫以及各種交互特效的黃金時代。不幸的是，這種設計并不開放，也不利于搜索，還需要消耗計算機大量的運算能力。2007年，當蘋果發布他們的第一臺iPhone的時候，就決定徹底放棄Flash，也正是在這個時候，Flash開始走下坡路——至少在網頁設計領域。
差不多是在Flash崛起的同時，一種更好的網頁結構化設計工具CSS誕生了。CSS的基本概念是將網頁內容的樣式分離出來，所以網頁的外觀和格式等屬性將會在CSS中被定義，但內容依然保留在HTML中。早期版本的CSS并沒有現在那么靈活，和許多新事物一樣，它最大的障礙在于許多瀏覽器還沒來得及接納這一新技術，對于開發者而言，這是一個頭疼的事情。需要明確說明的是，CSS并非全新的編程語言，它僅僅只是一種聲明性語言。那么網頁設計師需要學習編程嗎？可能需要。但是網頁設計師需要懂得CSS么？當然需要。
此刻，在手機上瀏覽網頁本就是一種全新的挑戰。設計師除了要為不同設備設計不同的布局，還面臨著內容控制的問題：小屏幕上展示的內容要和桌面端一樣多，還是需要剝離開來？桌面端網頁上閃亮精致的小廣告要如何在手機上呈現？加載速度也是一個大問題，移動端設備的網絡加載速度不夠快，而且桌面端網頁會消耗大量的流量。網頁設計亟待改進。
第一個重大的改進是柵格系統的出現。經過摸索，960柵格系統最終勝出，經典的12欄柵格被設計師們廣泛的接納，甚至成為許多設計師最常用的設計工具。接下來，各種常見的設計元素諸如表格、導航、按鈕被標準化，打包成為可復用的套件，這基本上就構成了視覺元素庫，其中還納入了常見的代碼。其中最典型的代表就是Bootstrap和Foundation，它們也使得網站和APP之間的界限逐漸模糊。當然，它們也不是沒有缺點，借助這些庫設計出來的網頁往往大同小異，而且網頁設計師要想使用它們還得深入了解相關的代碼知識。
驚才絕艷的設計師Ethan Marcotte決定挑戰傳統的網頁設計，它讓網頁在內容不變的前提下，布局隨著窗口和屏幕的變化而變化，并且將這種設計命名為響應式網頁設計。網頁設計師依然只需要HTML和CSS就可以實現這種功能，不得不承認這種設計理念非常超前。不過大家對于響應式設計依然有些許誤解。對于設計師而言，響應式設計意味著為設計許多不同的布局。對于用戶而言，響應式設計就意味著這個網頁可以在手機上完美瀏覽。對于開發者而言，響應式設計意味著如何控制好網站圖片應付移動端和桌面端，在不同情形和語義下，擁有良好的下載速度和呈現效果，等等。簡而言之，就是一個網站能在任何情況下良好展現。至少在這一點上，所有人能達成共識。
設計網頁布局總會花費大量的時間，好在這個時候我們開始拋棄復雜的光影效果，重新專注于根本的內容呈現。在此之前，網頁設計講求精美的圖片和排版效果，漂亮的插畫與周到的布局設計，而簡化這些視覺元素之后，就是我們說所的“扁平化設計”。將復雜的效果淡化之后，視覺的扁平化，也促使內容和信息層級的扁平化。充滿光影特效的按鈕被扁平化的圖標所替代，矢量圖形和圖標字體也開始被大范圍使用，網頁字體和版式設計的結合令網頁視覺更加漂亮。有趣的是，這時候的網頁設計開始有返璞歸真的感覺。
技術的革新已經開始將網頁設計推動到一個全新的境界。在許多設計平臺上，設計師只需要在屏幕上移動不同的控件就可以生成整潔可用的代碼出來，并且這些代碼非常靈活，可控度極高！試想一下，開發者無需擔心瀏覽器兼容性，可以專注于更加實際的問題！
新誕生的概念正在推動網頁設計。CSS中新誕生的屬性，諸如vh和vw（viewport height 與 width1），就使得網頁元素的位置控制更加靈活自由，一次性解決了設計師糾結多年的頑疾。作為CSS一部分的Flexbox則是另一個新事物，它可以快速創建布局，輕松修改屬性而無需編寫過多代碼。
網頁設計正在飛速發展，未來還會有越來越多的創新，就讓我們拭目以待吧！
文章來源：UI中國 推薦：陳子木
藍藍設計( 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 工具
文章來源：優設網 作者：百度MEUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
圖表是數據可視化中最常用的一種表現形式，一定要吃透它。
隨著互聯網數字化越來越完善，數據可視化這個詞的使用頻率也越來越高，而圖表是數據可視化中最常用的一種表現形式。無論是工作匯報還是后臺設計，都離不開圖表的使用。然而關于圖表類相關的資料太零碎了，不成體系，對于初學者非常不友好，本篇文章我從圖表的祖輩開始，把它都給挖了出來，希望對你有幫助。
圖表的定義：可直觀展示統計信息的屬性，對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構，是一種很好的將對象屬性數據直觀、形象地可視化的手段。
英文叫法：Chart。
用戶對圖形的敏感程度遠遠大于文字，所以產品就需要把數據信息可視化，用簡單的圖形表示出更多的信息量，而圖表是數據可視化中最常用的表現形式。
接下來我們來介紹圖表的具體構成及元素解析。
圖表是由：標題、圖例、刻度軸、數據展示、網格線、提示信息、水位線、時間軸組成，每一個元素都有它存在的意義。在實際使用中不一定非得把元素全部展示出來，精簡化顯示想要展示的內容即可。
顧名思義，標題就是圖表的名字，標題是必不可少的元素。標題的內容一定要言簡意賅，不要太長，能兩個字寫清楚絕對不用三個字。
標題的常用位置有 3 個：左上角、頂部居中、底部居中。
一般情況下，標題字號 / 色值要突出一些，用戶第一眼看到 chart 的時候，要清晰的看到這個圖表是做什么的。
特殊情況下，如果需要對標題有額外解釋的話，兩種展現形式：
圖例的組成
顏色、名稱、數值、單位。
圖例的展現形式
圓形、開關、矩形、鼓包線、實線、虛線。
圖例的位置
從左至右、從上至下。
圖例的作用
圖例的顏色選擇
同一組圖例中，不要出現相近的顏色，否則在圖表顯示中分不清彼此。
產品使用中，要規范圖例顏色使用，一般分為兩種：
圖例過多時如何展示
共用圖例
如果多個 chart 的圖例一樣，可進行合并，減少冗余圖例。
圖例省略
如果 chart 中只有一個圖例的話，可省略。
圖例名稱限制
根據不同使用場景，為了更好的展示效果，要給圖例名稱設置一個最大值，超過最大值后省略展示。
坐標軸分為 X 軸和 Y 軸，常規情況下為 1 個 X 軸+1 個 Y 軸。不過特殊情況下也會用到 2X+Y 或 X+2Y。
刻度值代表的意義
坐標軸使用規則
是否帶單位：
對齊方式（常用，但非必須）：
刻度值過多時如何顯示：
刻度值的選用一定要是同一個規律，禁止同距離的刻度值代表不同數據。
刻度點的樣式使用規則：
刻度的線朝外。
數據的展示是 chart 中最為明顯的地方，可以說如果只顯示一個元素的話，就是他了。
數據展示的使用規則：
網格線的作用
呼應坐標軸，美觀度。
網格線的使用規則
網格線使用實線居多，盡量不用虛線。
使用場景
橫、縱、橫縱結合、無網格線。
通常情況下，提示信息用來標識出 chart 中重要點的數據信息，需要注意的是：重要信息盡量簡化，信息量不要太大，言簡意賅就好。
根據不同產品的使用場景，有的時候會用到閾值，當達到某個閾值后，就會觸發某種聯動。這個時候就需要有個水位線了，它起到警示的作用。
形式有兩種，實線和虛線，顏色的選取則取決于產品的警告級別。
水位線可以是一個，也可以是多個，視情況而定。
時間軸可以靈活地調節刻度值的上下限，從而更精確的看到自己想看的數據。
時間軸的功能及限制沒有不是很復雜，所以就不過多解釋了，需要用的話就用。
定義
折線圖可以顯示隨時間（根據常用比例設置）而變化的連續數據，因此非常適用于顯示在相等時間間隔下數據的趨勢。折線圖是通過線條的波動來表示數據的波動，主要體現的是數據隨著時間的推移而變動的圖表。
使用場景
常用于觀察一段時間內數據波動的浮動變化，比如：一天內內存的使用情況。
使用建議
Y 軸刻度值選擇要合理，當前顯示的數據波動要最大化的顯示；
重要節點可以單獨做重點標注；
數據拐點要平滑，不要太鋒利。
定義
面積圖和折線圖比較類似，區別在于面積圖把數據區域做了個面積劃分，讓數據的顯示更加清晰。
使用場景
面積圖展示盡量不要超過 3 個圖例，否則數據多的情況下，數據的展示會特別亂，影響觀看。
使用建議
面積區域要和折線的顏色用統一色系，不要換色系；
面積區域一般要比折線顏色淺一些，這樣視覺上更加讓人舒適；
如果多條數據情況下也用面積圖的話，面積區域盡量使用透明度，否則有的數據會被遮擋看不到。
定義
柱形圖，又稱長條圖、柱狀統計圖。用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常利用于較小的數據集分析。
使用場景
使用建議
柱狀圖的厚度不要是固定值，要做成自適應來應對不同尺寸的分辨率顯示；
厚度與間距的對比要合理設計；
可使用小圓角，千萬不要用大圓角，太丑了……
如果想要強調某個柱子的話，可以進行顏色區分，但是柱子顏色不要超過 2 個（同一維度下）；
如果想要在柱子上顯示數值的話，使用建議（下面的順序為推薦順序）：
定義
餅圖僅排列在工作表的一列或一行中的數據，它是有一個總和數據，方面查看每個類別分別占總數據的百分比的一種圖表。
使用場景
使用建議
定義
環形圖是由兩個不同大小的圓疊在一起，切割中心部分得到的一種圖形。
使用場景
使用建議
環形圖的兩個圓要從中心對齊。
定義
堆疊面積圖是把數據面積按順序逐步堆疊起來的一種圖形。
使用場景
常用于不同資源中流量 / 容量的使用。
使用建議
定義
堆疊柱狀圖是把數據柱狀圖按順序逐步堆疊起來的一種圖形。
使用場景
常用于不同維度下相同幾個指標的展示。
使用建議
上面介紹了常用的圖表的使用建議，但是圖表類型遠遠不止于此，還有很多非常用的圖表類型，這次我先給大家列出來，如果大家感興趣的話，我后面再寫一期冷門圖表的使用建議：
雷達圖，散點圖，K 線圖，盒須圖，熱力圖，旭日圖，桑基圖，樹圖，漏斗圖，儀表盤。
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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
再過幾天就又雙叒叕到「雙十一」了，身邊的許多朋友已經開始忙著囤優惠券，找鏈接了，而做為「設計“獅”」的我卻還在連夜趕著各大品牌和公司的「宣傳海報」，整天埋在做圖—改圖—再做圖的循環中，不知道各位設計大大們最近的生活是不是也跟我一樣呢。
好了，在開始今天的干貨分享之前，我想先請大家一起來看幾張海報：
看完之后，大家有沒發現這幾張海報有什么特點呢？
沒錯，他們的共同之處就在于，雖有通篇的文字，但畫面依舊充滿著空間結構感、層次感，而輔助圖形的運用更是起到了點睛之筆的作用，給人眼前一亮的感覺。想必有的小伙伴肯定在思考，這是為什么呢？
版式設計，對，就是「版式設計」。
相信大家都曾有過，熬了一整晚，好不容易設計出幾個畫面的元素，結果看著一大堆的文字和圖片，心中頓時思緒萬千，腦海中卻一片茫然，折騰來折騰去，還是不知道該如何排版才好的經歷。
在當今這個高速發展的時代，無論是紙質媒體還是新媒體，信息的傳播都離不開版式設計，一副好的版式設計作品，可以在有限的頁面內，以最快速、最直接、最有效的方式傳遞出核心的內容和信息，并讓讀者和受眾留下深刻而良好的印象。
所以，今天我就給大家分享一些版式設計知識，希望可以帶給你些許靈感，幫助你早日做出爆款的設計作品~
曾在一本版式設計書上看到其對板式設計是這樣定義的：“版式設計既版面編排，就是把特定的視覺信息要素，根據主題表達的要求在特定的版面上進行的一種編輯和安排?！?/span>
即排版并不是指簡單的「東拼西湊」，而是需要經過合理化的對照排列整合，以此傳遞出高效的信息和特性差異的畫面。
對比又稱為「對照」，即把具有明顯差異和矛盾的視覺元素配置在一起，碰撞出特性差異的現象，從而使主題更加的突出，視覺效果更加跳躍。具體又分為大小對比、粗細對比、虛實對比、主次對比等。通過利用不同方向、大小、粗細的字體重新排列整合，以突顯出畫面的主次信息，正如下面的幾張海報。
△ 圖一：大小對比
△ 圖二：虛實對比
△ 圖三：主次對比
文字作為「語言符號」，無論在何種視覺媒體中都直接影響版式的視覺效果，在提高作品訴求力的同時也賦予了版面審美的價值觀。在選用字體時，我們應當依據設計風格來決定，不同風格的作品，選擇不同的字體形式。而協調則是指畫面內在的東西，元素、字體配合得適度和恰當。即說明他們內在相似的東西或狀態，以達到畫面相統一的風格。
△ 圖四：風格統一
△ 圖五：顏色統一
△ 圖六：元素統一
版式設計有很多種的構成方式和方法，一切美的東西皆有規律，三分法、白銀比例、黃金比例就是其中的代表。
三分法（1:2）即「井字構圖法」，是日常生活中最常見的一種構圖手法，通過將視覺重心或者最吸引人的東西靠近四條線的相交處，使「畫面和諧」的同時，也達到了「突顯主體」的目的。
△ 圖七：三分法
白銀比例（1:1.414），也是在排版設計中最為常見的比例，給人一種「安穩恬靜」，「愜意」的感覺。
△ 圖八：白銀比例
相對于其他比例而言，黃金比例（1:1.618）則顯得更加突出，正如它的名字，常常給人一種「恰到好處」、「自然」的感覺、無論是在LOGO設計中、還是排版設計、抑或是攝影中，靈活的運用黃金比例，都能夠帶來不錯的效果。
△ 圖九：黃金比例
怎么樣，看完之后，有沒有找到一些靈感呢
文章來源：優設網 作者：藝海拾貝Design
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編者按：設計原則總是看起來簡單抽象不言自明的，但是在細分的設計領域，這些原則其實有著各自不同適用情況，有著「特定的條件」。圖標設計，就是如此。今天的這篇文章，來自專業的圖標設計師 Helena Zhang，她結合自己制作 Phosphor 系列圖標的經驗，來分享她對于圖標設計原則的理解。
這些設計原則就像一份清晰的設計框架，或者設計自查表單一樣，幫你規避設計陷阱，讓你的設計成果更加出色。
創建高質量系列圖標，你得使用一套周到系統的方法，需要有訓練有素的雙眼，大量的迭代學習，以及堅持實踐，才能做到。下面，我將結合7項設計原則，和大量的實際案例，來為你詳細說明，如何創建高質量的圖標。
掌握這些設計原則，就是創造出優質圖標的關鍵。
圖標存在的目的，是快速傳達概念。
下圖是 Prius Prime 儀表板上的圖標。
在這一系列符號當中，你能明白其中哪些的含義？對于這款車的駕駛者而言，可能會隨著使用時間的積累，逐漸明白其中一部分圖標的含義。很大程度上，這是因為這些圖標本身并不直觀。你可能需要對著說明書，才能明白它們各自的含義。
我們可以從下面看到，圖標是怎么一步步變得難以識別的：
當圖標開始使用我們不熟悉的含義和隱喻時候，它就自然變得難以理解。從左往右數第三個圖標，是安全帶的提示燈圖標，當它亮起的時候，意味著你沒有系好安全帶。這個含義相對直觀，你可能能夠很快掌握。而最右邊的這個「電動助力轉向系統警告燈」含義就非常模糊了。
通常，不清晰的圖標設計會讓你感到沮喪，但是對于開車的人而言，含義模糊的圖標意味著誤解，而誤解的結果可能是生命安全。
下面是我們更為熟悉的圖標——喜愛、警告、音樂和向上。
上圖為 Phosphor Carbon 中的圖標
向上的箭頭在很多場景當中，都是非常清晰、實用的符號。
紐約地鐵中的標識
最成功的圖標設計，不僅僅是讓圖標本身易于理解，而且對于不同的文化背景、不同年齡段、不同知識背景的人都能理解，只有做到這樣才行。
如果你想要表達的信息過于抽象，那么單獨使用圖標，可能不是最清晰的解決方案，應當將圖標和文本標簽結合起來使用。
有了易于理解的圖標之后，你需要確保它的可讀性足夠強。
Icons in the Amtrak mobile app
由于細節太過精細，很難讓 Amtrak 的圖標被清晰地感知到。
Transit 應用圖標也有相同的問題。它們的剪貼板這個圖標中的細節很難看清：
Icons in the Transit mobile app
稍加調整之后，好了很多：
Adjusted clipboard icon
當你在處理圖標中多個不同的圖形元素的時候，應該確保其中的空間留足。太細小的筆觸細節、更多的信息量會讓圖標顯得更加難以閱讀。
Google Maps 的公交車圖標就非常的出色——它看起來足夠小，但是可讀性也很強。
Google Map icons
確保每個圖標都感覺平衡，盡量進行視覺對齊
不平衡的播放圖標
Unbalanced play icon
在這個播放圖標當中，盡管三角形被放置在中間位置，但是它并沒有視覺對齊，我們的眼睛看到的時候，會覺得中間的三角形說向左靠的。三角形靠左的這一邊在視覺上更重，因此它應該向右移動一點來確保平衡。
就像字體排版設計師，他們也經常會微調文字的布局來確保視覺平衡。比如字母 i 和 j 頂上的小圓點會偏移，而字母 O 的上下部分則為稍微超出邊界，來確保字體的平衡。
設計的時候，適當的微調就能達到平衡的效果。
Balanced play icon
明顯更好了。
要點：不要單純的相信數據，要用你的雙眼來進行檢查和修正。
用盡可能少的詞匯來進行表達和描述，這樣會更加優雅高效。
「將你所學的知識分享出去，可以增強你對于這門學科的理解?！?/span>
Material Design 在他們的導視系統中，使用的圖標大都足夠簡潔，他們善用圖標而是說話：
這是一個復雜的船的圖標：
它還有更為簡約的版本：
Succinct boat icon (Source: Material)
簡潔是圖標設計的精髓之一，因為我們經常需要在很小的屏幕上操作，圖標可以傳達很多信息，而不同文本或者其他復雜的內容。
在用戶界面當中，簡約準確的設計風格能夠凸顯重點，讓內容發揮效用。Telegram 的圖標設計，就非常的簡約有趣：
Telegram icons
有的時候，UI圖標會選用更偏向插畫風的樣式。下面這些關于美食的圖標就設計得非常令人愉悅，代表泰國菜的圖標中，蝦的描繪就非常傳神：
Yelp icons by Scott Tusk
圖標可以適用于各種不同的硬件平臺，手機、 電腦、平板，適當的信息量意意味著設計師可以在色彩、層次縱深上，有更大的操作空間。因為圖標本身會應用于特定的APP 或者網站當中，因此圖標可以適時地凸顯品牌和產品特征。
iOS 平臺上的 Procreate 、火狐和 Netflix 的圖標
為了讓圖標家族顯得更加和諧，始終保證相同的樣式和設計規則
在 iOS 13 之前，蘋果的圖標設計有著各種不同的粗細筆觸，不同的填充樣式，大小也各不相同：
仔細看看這套圖標，是不是有的圖標看起來比其他的更重？
任何圖標都有著相應的視覺重量。而視覺重量取決于圖標筆觸的粗細、填充模式、大小和形狀這幾個屬性。而圖標設計的難點就在于，如何控制所有的這些參數，做到整體的一致性。
蘋果公司最近引入了 SF Symbols 這個功能，將圖標直接制作成為圖標字體，在這套字體當中，圖標有 9 種不同的「字重」和3種不同的的風格（也許有點復雜，但是絕對充分夠用）。從圖標到符號，在填充模式、筆觸輪廓等多個不同的屬性上，確保你能挑出感覺更加和諧的圖標。
Icons from Apple’s SF Symbols
對于一個大型的成套圖標而言，保持一致性并不是一件容易的事情，尤其當這套圖標涉及到多個制作者的時候。遵循清晰的原則和規范在此時上至關重要的。
這套 Phosphor 圖標是由我和另一位朋友共同制作并嚴格測試的，我們使用一套準則確保這 700 個圖標保持一致性。盡管每個形狀都不盡相同，但是它們給人的整體視覺重量是完全相同的，并且很好地相互組合到一起：
Subset of the Phosphor Carbon icon family
每套圖標都應當尤其獨有的風格和氣質。是什么讓它們與眾不同？它們對于品牌是否有所助益？它們會給人什么樣的情緒？
Waze icons
Waze 大受歡迎的用戶界面，很大程度上是它本身所使用的圖標設計所造就的。這些用色跳脫斑斕的圖標，仿佛在說「我們就是特立獨行！」
Twitter 的圖標是柔和、清晰明亮的：
Sketch 的圖標則是精致而通透的：
Freemojis 的圖標是可可愛愛的：
而這些 Android 的圖標則風格各異，抽象風、像素風、霓虹風，不一而足：
完美地繪制了整套圖標之后，你的工作并沒有完成。接下來，你需要繼續做測試和其他的準備工作，比如讓參與圖標制作的志愿者可以更好地參與后續的制作和完善，讓設計師在日常設計工作當中使用和測試，在數字屏幕和印刷品上應用確保效果，讓開發者將它們集成到其他的服務當中，確保能夠應用。
一套高質量的圖標，需要經過良好的組織、記錄，并且在不同的應用場景中進行測試，并且最好能夠得到個性化圖標制作工具的支持。
7.1、組織性
你需要確保圖標集的整齊規范，有合理的命名，便于查找，并且想清楚以什么樣的方式來進行分類。按照字母順序？按照大小，還是類型？
這套 Nucleo Sketch 圖標，是按照也沒類型來進行組織分類的
7.2、有據可查
你需要闡明整套圖標的核心原則：
我以我所制作的 Phosphor 系列圖標為例（和以上原則內容有重復）來進行說明：
下面是技術規則。我還是以 Phosphor 圖標作為返利：
按照這這樣的步驟來進行設計，并根據需求來公開相應的文檔，就像下面這樣：
7.3、進行測試
檢查一致性。確保圖標在不同場合可以使用，并且尺寸合理。確保它們和大型是視覺系統能夠協調存在。
將圖標排列在一起，并且按照以上的 7 個原則來進行檢測。
Phosphor 的品質控制流程中所用到的測試表。
7.4、定制化工具
最后，如果你有足夠的資源，可以開發相應的工具來方便用戶使用圖標。
Material Design 讓用戶可以通過自定義庫來訪問圖標，搜索文件，選擇喜歡的格式、配色、大小和主題。
Font Awesome 的圖標設計并沒有完全遵循上面所提到的全部原則，但是它依然是目前來說最易用的圖標集。它提供的功能甚至超出了以上提到的范疇：它支持前端框架、CDN、圖標字體以及 SVG。
下面是一些額外的圖標素材資源。
7.5、資源
這個圖標合集項目雖然在質量上參差不齊，但卻是非常適合拿來搜集靈感、作為參考好地方。
Icon Managers
這是一款來自 Nucleo 的應用程序，你可以導入圖標集，查看，修改，導出，非常實用。
文章來源：優設網 作者：Helena Zhang
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn