為大家梳理一個web表格設計框架，希望能夠給大家帶來完整的不一樣的內容。全文12,598字 ，預計閱讀30分鐘，建議收藏。
在網頁或桌面端為載體的B端產品和生產力工具中，越來越多的設計師需要和數據打交道，查詢和處理數據的能力是當前正在設計的大多數產品的關鍵要求之一，表格被公認為是展現數據最為清晰、的形式之一，也是世界上最常用的用戶界面工具，其重要性不言而喻。
表格，展示行列數據，既是一種可視化交流模式，又是一種整理數據的手段。表格幫助我們組織和展示信息，同時保證信息的可讀性，從大量信息中找到所需內容；通過合理布局，感知不同信息間的關聯與區別，進行分析和比較；對數據進行排序、搜索、分頁、自定義操作等復雜行為。
表格的行元素和列元素行和相交就會形成一個簡單的二維表，行，列元素的空間組合就確定了一個個單元格。常見的表格布局有水平型、垂直型和矩陣型三種基本布局，分別強調行、列、單元格。
水平型會弱化列的存在，強調行信息的連貫性，適用于用戶閱讀信息時是從左到右，然后自上而下逐條掃描。垂直型是通過強化列的視覺特征來突出不同列信息的對比。矩陣型的表格有均勻統一的分割線，單元格比較明顯，適用于列信息較多而沒有足夠空間用留白來分割信息的表格，同時我認為單元格合并的情況也屬于矩陣型。
還有比較常用的表格類型層級型：
層級表
是表達結構性關系的表格，表現得如同樹的分支，所以又叫樹列表。每一個條目可展開或折疊包含的更詳細的行信息，也包含嵌套子表格。
層級表并不如矩陣表直觀，但通過結構化的組織方式逐級展示表的數據內容，讓整體信息架構一目了然，非常適合大型數據表。
結合層級表的使用場景，多以查看為主，編輯需求較少。
同時還有特殊的表格類型，圖表型與卡片型：
圖表型
除了在單元格中引用圖表之外，很多時候都會提供圖表/表格視圖切換，便于用戶從圖形角度查看、分析自己關注的數據。有時也會有“圖表+表格”的形式，這時候，表格往往只作為明細放在頁面底部。大量的表格也會導致視覺的單調。
卡片型
可以用卡片的形式來展示信息，將信息以組的概念呈現，單張卡片內的信息按優先級進行排列。此外，卡片彼此之間又形成一個整體。
卡片是一種承載信息的容器，對可承載的內容類型無過多限制，它讓一類信息集中化，增強區塊感的同時更易于操作；卡片通常以網格或矩陣的方式排列，傳達相互之間的層級關系。適合較為輕量級和個性化較強的信息區塊展示。
注：在有限的表格空間內需注意卡片信息之間的間距，若卡片信息過長可做截斷處理。
在實際工作中，上述表格類型還有可能互相結合，以更好的達到相應的分析目的。
比如垂直–層級，矩陣–數據立體表等。
從視覺結構的表現角度，個人將“表格”的構成分為：標題、表上方篩選操作區、表頭、表體、底欄。由表頭、表體構成內部區域，由標題、篩選操作、底欄構成外部區域。
標題是對表格信息內容的整體概括，可包含數據來源及屬性(日期、地區等)，以便用戶對表格內容有整體認知。給數據表格起一個清晰簡明的標題，與其他的設計同等重要。有了好的標題，表格就可以獨立使用，如果導航菜單層級清晰，同樣能起到標題的作用。標題作為最重要的識別元素，默認展示在左上角。
這里特指位于表頭的上方的操作區域，包含篩選，操作按鈕等其他操作。篩選區包含模糊搜索和條件篩選，按鈕分為增刪改和其它業務處理操作，合理設計篩選區可以大大提高用戶的效率。
表頭對數據性質的歸類。表頭按慣例要對數據的簡況做出反映，如被調查者的性別、年齡、學歷、收入、家庭成員組成、政治背景、經濟狀況等。表頭的字段名稱應當符合人們的思維習慣，保證用戶理解。如果有需要解釋，則在字段名稱旁邊加說明小圖標(小問號)。表頭在這里也能指列行標簽，是對所屬行或列數據的描述。
除了容納行/列標簽之外，表頭也可以進行排序、搜索、篩選等。
表體是表格的主體內容，具體信息數據內容的填充區域，由一個個基礎的單元格組成，單元格是表格呈現數據信息的基本單位，可以是計數、百分比、均值、"-"等任何數據。表體包含數據，分割線，背景，單元格數據可進行點擊操作，如鏈接跳轉(項目或者商品等)、展開嵌套表的子集信息(子表格)、操作按鈕(查看編輯)等。
表尾一般是統計類數據，例如合計、平均數等。表尾使用頻率較少，且重要性明顯不如表頭，我就把它歸到表體這類。
底欄在表格最下方，主要展示正文中的數據量或單頁數據的概覽信息，也常提供統計功能，供用戶了解總體進展。底欄一般放統計信息、分頁控件、備注說明、操作按鈕(加載更多)等內容。
底欄最常見的元素就是分頁，分頁可以放在頭部或底部，常見的還是放到底部，分頁固定能省去用戶需要翻到頂部或底部進行操作的麻煩。分頁可分為整體頁碼平鋪式、全功能版、簡易版等，需要根據不同的場景選擇最優的設計方案，比如有的時候并不需要定點跳轉。
無限滾動可以替代分頁，但對于功能優先的應用未必適用。下圖為查看更多按鈕，比較少見：
同時，在選中操作的下，操作按鈕也可以位于底欄，在未選中時操作置灰。
采用格式一致外觀，突出有利于對象識別的關鍵信息。
合適的填充和邊距對于視覺設計至關重要，既包括保證數據單元格之間的留白，又包括單元格內部留白，以保證易讀性，當創建表格設計規范并嚴格遵循后，就可以創建視覺一致的表。表格本身應具有最小寬度，在不同畫面中寬度應可以增長到整個空間，所以每個列也需具備最小寬度。如果頁面寬度小于表格，那么表格應水平可拖拽。
數據合適的位置排列能夠提升數據的瀏覽效率和準確度。對齊能夠很好的形成視覺引導線，會讓表格更加規范易理解，給用戶視覺上的統一感，視線流動更順暢，讓用戶快速的捕捉到所需內容。
正如連續律所描述的，人們傾向于把那些經歷最小變化或阻斷的直線或圓滑曲線知覺為一個整體，傾向于使知覺對象的直線繼續成為直線，使曲線繼續成為曲線。在界面設計中，將元素進行對齊，既符合用戶的認知特性，也能引導視覺流向，讓用戶更流暢地接收信息。
數字應該右對齊
在表格中，諸如金額、數量等數值排列時，通常采用“右對齊”方式，既方便用戶快捷讀取數據，還可以使用戶進行縱向數據對比。數字是從右向左讀的，是因為我們對比數字時，首先看個位，然后十位、百位。當個位數值對齊時，我們就可以快速查看前面的數值，比較多個數據的大小。因此，表格的數字應當右對齊。
當我們常用的字體如果不同數字寬度不一致時，會導致千位分隔符不在一條直線上，所以要選擇數字等寬的字體，等寬的數字在同一豎線時更容易對比。
文字信息左對齊
因為我們閱讀文字信息是從左向右讀，如果不采用左對齊，會降低瀏覽文字的效率。
混合型文本左對齊
當數字、文字、字母組成混合數據時，標題和正文左對齊，使用了一個視覺起點。
在實際工作中，主流框架組件，表格列數據對齊同時針對分割線，雖不是完美中的對齊，但開發成本低。
不論何種對齊方式，都需要考慮到該字段可能存在的極端情況。如：普通文本若過長，可在鼠標懸停狀態時單元格展開列出全部字段信息。
一般表格具有的顏色盡可能少。顏色和可讀性是密切相關的，要合理的使用顏色，普通表盡量使用簡單的背景色和點綴色。背景色方面，除了行/列交替顏色(可以區隔內容，引導視線)、懸停高亮底色(便于準確辨別光標所在行)等處理方法，還可以對表頭表尾進行視覺區分。但不能增加過多顏色以引起混亂。
分割線顏色盡量不要與背景色相差太大。當字體選擇深灰色，背景為淺白色時，邊框選擇淺灰色，這樣可以減少我們視覺疲勞，不會使表格看起來令人生畏。
表頭標簽應該簡煉準確，以達到節省表頭空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數據本身。當然對于產品而言，先能把事情說清楚，再考慮文字的簡潔性。
當數據結構比較復雜的時候，使用多級表頭來體現表頭與數據的層次關系，如下圖：
當數據有看不懂或生僻的信息時，用戶期望有人告訴他為什么會這樣，就需要在表頭標簽后加上小問號，鼠標懸停彈出說明文字的提示框。
不需要表頭
如果表格數據可以自我解釋，表頭就可以不需要。電子郵件的表格是一個好例子，郵件主題，發送者，發送日期都區別度高不會混淆的。當然有的情況表頭是不能去掉的，例如有兩個不明確的日期，這時候你就需要定義一個表頭。
所有行按邏輯排序，比如按風險由小到大，將最安全的操作放最前面；或按照信息時間排序，由新到舊，以創建時間進行排序，即創建的排在最前面。
行高是非常重要的參數，直接影響著閱讀體驗。較小的行高承載更多信息，讓用戶無需滾動鼠標即可看到更多數據，但會降低掃描效果，導致視覺解析錯誤。適宜的行高使得數據更易于被閱讀，但這不代表行高越大越利于閱讀。
設置行高的原則：
A.單行數據顯示時，數據顯示緊湊、有序。
B.多行數據顯示時，弱化表格形式，提供豐富的視覺展現。
因此，對于單行顯示的表格，建議行高為字體高度的2.5倍到3倍；對于多行顯示的表格，建議內容區到上下邊框的距離略小于文字高度。當然，也可以提供切換按鈕讓用戶自己控制顯示密度。
斑馬線又稱作間行換色、隔行變色、行的交替樣式。它能讓行間界限更為明顯，同時加強視覺流的橫向引導，避免在閱讀表格時出現迷失情況，要注意兩種顏色不能反差過大。另外，可以根據實際情況選擇是否與邊框同時使用。
有時為了強調行內信息的連續性，可去掉單元格的縱向分割線，僅使用橫向分割線和底色分割，使橫向信息更加連續通暢，以提升閱讀效率。
表格還可以通過顏色來指示狀態，顏色指示可以幫助用戶識別哪些行可能需要特別注意的行數據。
同時可以對行內信息進行擴充，進一步弱化表格形式，豐富各類信息的視覺呈現，同時兼顧行與行之間的關鍵信息的對比，如上文表格布局提到的圖表的使用。
盡量減少列的數量，關注用戶需要的必要信息。當數據列過多時，要分清主次列，非重點、輔助性信息可以通過次級入口來解決，如固定重要列(主體名稱/操作列)，次級列在表格中間區域左右拖動。
列寬嚴謹的處理方式有三種。第一，通過柵格，由列的數量決定列寬，主流框架組件一般是這種；第二，可以固定部分列的寬度，其余列則按百分比處理；第三，在固定寬度的基礎上，允許用戶自由拖動調整列寬的大小。（當然我覺得不要太拘泥這個，合適就好）
為便于用戶對數據進行對比分析，可以在原始數據的基礎上給出差值、升降變化等數據處理結果，減少用戶數據加工的過程，直達用戶獲取信息的目標(需要明確用戶目標)，提高用戶的閱讀速度。
一般列的強調是配合列排序功能使用的，如點擊率、訪問量的排序。有時會使用不同粗細的縱向分割線或不同底色對列信息進行區隔，增加同類信息的對比性。
其中的關鍵區別在于數字的大小。數據的度量單位無需重復，一般在表頭標識清楚即可。
一般指空數據或零數據的情況，空白單元格容易造成用戶困惑甚至誤解，用戶會搞不清楚到底是沒有數據，還是數值為零？正確做法是，對于數據為零的單元格，要填上0，且小數點后位數、單位，都要與上下數據格式保持一致；對于沒有數據的單元格，通常是用“－”表示。
B端后臺數據類型較多，最好能為空數據做出釋義，可以在“列標簽”或底欄給出解釋文案。
單元格的寬度根據列中字符的長短自動變化寬度，超過該列寬可以省略顯示，末尾以"..."顯示，鼠標懸停時出現氣泡顯示完整內容。
比如用戶重點關注數據狀態、某些數據的上升和下降等，可用符號進行標識，幫助用戶快速定位到目標信息。
水平分隔線，能顯著減輕表格在垂直方向的視覺重量，內容更加條理清晰，便于用戶對比查看數據。
垂直分隔線，在表格中使用適合的對齊方式后，那么就可以省略；數據量級比較大的表格，列之間過于緊密時建議保留，可以使用較淡的分隔線，將不同列數據區分開來，提升瀏覽速度。
下圖采用了同時使用水平和垂直分隔線：
如果在表格中使用適合的對齊方式，分隔線就是多余的。但由于表格數據量級不同，即使要用，分隔線也要淡，不能妨礙快速瀏覽。
在web端，表格的的數據內容超過一定“數量”時需要提供翻頁功能，這個“數量”由表頭的高度、表格的行間距、目標用戶群體的顯示設備的配置等因素來決定，原則是不要超過一屏，考慮到每個用戶的使用習慣，可以讓用戶自定義每頁的顯示的數量。相比于跨屏翻頁而言，向下滾屏會更便利，在下文控制表內容中展開比較了無線滾動與分頁。
分頁控件內容 ：用戶自定義每頁顯示的數量，當前頁碼(行數)，全部數據的頁數(行數)，向前翻頁，向后翻頁，到達第一頁，到達最后一頁等。
當用戶的數據未超過一頁時，可以隱藏翻頁控件。翻頁按鈕不可用時，須給出置灰態或不可點擊。
分頁控件做為篩選數據的一種方式，通常可以結合排序、篩選等其它控件一起使用，來提升用戶的操作效率，如網易的郵箱，翻頁與日歷結合使用，對于有大量郵件數據的用戶來說，查閱郵件的效率更高。
除了無限滾動，還有第三種翻頁方式，鼠標點擊“加載更多”按鈕以查看更多數據。
干凈的表格使人愉悅。特別是在處理大量數據時，巨大的數據量會增加用戶的壓力，因此要減少視覺干擾。刪除不必要的分隔符與背景，去除陰影等。信息內容的有效傳達是表格設計的本質，讓用戶注意力聚焦在核心內容上。所以，做減法設計就顯得可貴了。
實現簡化的方法是適當刪減。如果畫面視覺很糟糕，請刪除輔助信息、不常用的控件和分散注意力的樣式，但要小心刪除必要內容。“簡單并不意味著沒有雜亂，這是簡單的結果。簡單性在某種程度上基本上描述了對象和產品的目的和位置。想設計出一個井然有序的產品。這并不簡單。“ - Jonathan Ive
這必須是在數據允許的情況下。水平分隔線能顯著減輕長表格在垂直方向的視覺重量，加快數值的對比效率。但如果在表格中使用適合的對齊方式，豎直分隔線就是多余的。它們最大的貢獻就是縮減元素之間的距離，明確了單元格范圍。即使要用垂直分割線，也要淡，不能妨礙快速瀏覽。
不使用斑馬線，使用不同底色區分指示不同類型的數據是有必要的，但是用來區分同一類數據，斑馬線在很多時候又是沒有必要的，因為水平分割線已經明顯區隔了。
省去分隔線，對于較小的，動態性較小的表，可以省去所有分隔線，并獲得醒目的外觀。當然，這更多是數據量不大且易分辨的情況。
運用彩色表達組織或含義可能會增加誤解，并且引發視覺障礙者的易用性問題。普通表格一般使用顏色代表狀態或進度。
其他圖形元素，如星號、三角、圓點、對勾、叉等，雖然能夠幫助組織數據、更直觀的傳達信息，但要注意數量，物極必反，要注意克制這些元素的使用。
優秀的表格交互給予用戶操控感，不讓其迷失在數據中。提供便捷的過濾篩選組件，配合鼠標懸停、點擊、框選等操作，方便用戶查看更多數據信息，快速定位目標數據，或根據特定規律對數據進行排序、突出、降維等處理。當我們將這些組件與交互動作結合，用一些習以為常的交互去操縱表格時，用戶將更清晰、有信心、提效率。
篩選和搜索是用戶目標數據的好方法，這是一項基本功能，可讓用戶從默認的表格數據輕松獲取要查找的內容，在數據量較大的表中特別有用，一般位于表上方的操作區域或表頭區域。
當表格的數據量較大時，可在表上方操作區域增加對象搜索或數據分類來提升用戶查找效率，且能同時使用。提供多維的篩選和排序，是增加用戶效率的有效方式。
輸入搜索框輸入用戶關心的內容，既可以實時篩選，也可以點擊觸發，一般須支持模糊查詢，否則用戶必須記住所有內容，才能查出要找的目標項，成本過高。也有特殊情況，如保密性較高的賬號密碼列表查詢需輸入。
無論手動查詢還是自動查詢，如果查詢條件是組合的幾個，那么一般是填好全部篩選條件再讓用戶點擊查詢按鈕。因為如果用戶要查詢的表格數據具有多個屬性且相互聯系時，組合條件的查詢顯然是更合理的。
如果篩選操作是單個條件獨立查詢，各個篩選條件都是相互獨立的，那么最好填好一個條件便自動查詢。
篩選條件有時候既需要匯總數據的，又需看單一條件下的數據，比如狀態包含“待付款、待發貨和待收貨等”，此時則是做成Tab單選較好，如下圖所示。
放置在表頭標簽上的篩選，受列內容的影響，一般做單次篩選。通過對表頭標簽旁按鈕的點擊，使用戶更快捷進入到自己的篩選條件中。通常，表單越左的列數據越重要的，也是篩選頻率與需求最高的，因此高頻的篩選場景基本可以得到滿足。
垂直滾動時，固定表頭可以讓用戶明白當前單元格數據信息的屬性和含義，體現界面友好性。當數據列差異不大，用戶不能直接根據表格數據分辨類型時，尤其需要固定表頭。當表頭有操作時，固定表頭更能提升使用效率。
數據列表相當龐大而復雜的時候，使用固定表頭可以幫助用戶區分列與屬性。
當呈現大量數據時，表包含的列數超出了該表的最大寬度，水平滾動就無法避免。第一列(前幾列)或操作列固定能更方便信息的對比與操作。基于我們讀取信息的方式，從左到右放置關鍵列。最左側的列會引起最多的關注，當我們感興趣時，才會查看其他列，它會影響用戶閱讀所需時間與精力。
在大型表格中，我們才可以水平滾動，最好是尋找可替代方案。表格中文本為什么這么長？能減少字數嘛？可以將文本換至第二行以減少水平寬度嗎？能否為過長的文字選擇別名嗎？可否用圖形條目取代？是否可以采取工具提醒？是否可以安排在窗口或對話框里？
一般有兩個解決辦法：文本換行，對它縮排；在單元格區域截斷文本，在提示中顯示完整文本。方法一意味著我們要增加表格高度，且每行高度可能不同；方法二，如果不同文本內容的頭幾個字一樣就存在問題了。但這兩種方法都比水平滾動好。
表格初始有一個默認排序，也叫初始排序。但有時，用戶希望將表格中某一行位置換到另一位置。
拖放似乎很簡單。就是抓住某個元素把它放到另一個地方而已。可是，事實上，拖放過程涉及到了大量細節，在拖放期間，需要處理許多特定的狀態。
用戶在拖動模塊時，頁面整體布局基本保持不變。因為移動的不是模塊，而是插入條。插入條指明了放置模塊時的目標位置。常用于數據量較小，有拖曳排序需求的場景。又可以運用在多個表一起的情況。
穿梭表格
就是多表格拖拽的情況。比如左側的表格內容可拖拽至右側列表框，同時支持表內上下拖拽更換位置順序，也可直接選中對象在兩欄中按鈕移動，完成拖拽行為。
那如何讓用戶知道可拖拽呢？
增加意向符號；改變光標樣式；增加被拖拽對象臨時性底色，突出顯示。
如何讓用戶知道怎么拖拽到哪里？
被拖入區域應增加插入位置符號，可以明確指出放置模塊的目標位置，減少用戶困惑，也可以對放置操作發生后的頁面外觀提前給出預覽。同時設計時考慮上下左右兩個方向的拖拽運動分別可以觸發什么結果，超出表格范圍拖拽對象消失。
被拖動對象應呈現為輕微透明的樣式？應該顯示為完全不透明？或者改為使用縮略圖表示？我認為這三種方法都可以。透明效果也會讓更多表格內容對用戶可見，有助于用戶預覽最終放置后的結果。從而方便用戶查看頁面，也會表明該模塊處于一種特殊模式中。透明可以表明相應被拖拽對象尚未定位，或者說正處于過渡狀態。
排序又分為降序和升序，比如，事件相關的表格，默認時間降序排列；風險相關的表格，默認安全降序排序。
表頭排序可以輔助用戶快速挖掘出需要關注的信息，發現數據信息之間的關系，一般可按數字大小、文字拼音順序、字母順序等其它數據特征進行排序。如果表格中不是所有數據都能排序時，則需要標識出可排序操作的列，一般采用三角箭頭做為標識，實時反饋當前操作狀態。
可伸縮列
由于存在多個數據標題和列，我們只能根據表格的寬度來展示數據。在某些情況下，表格可允許用戶選擇他們關注的列，在其固定寬度基礎上，讓用戶可以自由拖動列寬邊緣以調整列寬。
自定義選擇列
由于數據報表，往往需要滿足各種不同的角色在不同場景下的需求，因而在表格數據顯示上，一般采取寧多勿少的原則，即盡可能提供詳細的數據，由此會數據指標過多，難以在表內完整展示，導致需要水平拉伸，降低了表格的可讀性。
針對上面這個問題上，可將所有的指標名稱羅列在表格上方，并提供多選操作，在默認情況下僅展示最常用、最重要的幾個指標（如下圖）。這樣能讓用戶在表格上方看到所有指標名稱，避免了原來需要水平拖拽而導致指標瀏覽不全的情況。其次，用戶可以根據自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。
B端后臺通常會對應不同的角色及不同的需求，可讓用戶根據自己的需求來定義表格的展示列及列的順序。同時系統應記住用戶上一次自定義列的設置。
控制行高
較小的行高讓用戶無需滾動頁面就能查看到更多的數據，但可掃描性的效果易導致視覺迷失。這就是為什么許多成功的數據表設計包含了控制行高(顯示密度)的功能。
樹形表
行也可以結構化分為不同的類別，前面提到了層級表/樹形表，可以嵌套子表格，展開和折疊?？刹僮靼粹o一般位于各級行標題左側，具有獨特的視覺效果并具有擴展或折疊的功能。單擊表中的類別標題會在類別的展開或折疊狀態之間切換。展開與折疊也將極大的影響行內容顯示。
分頁可以將表內容信息劃分成獨立的頁面來顯示。
優點：
1.良好轉換：當用戶是在結果列表中查找特定信息而不僅僅瀏覽信息流時，分頁就是好的選擇。你會知道表格總量與當前頁的準確數量，能夠決定在哪里停下或者去哪里。
再次尋找特定數據時，分頁方案讓我們能夠大概定向到目標數據位置。用戶可能難以記錄目標數據頁數字，但一般能記錄大概范圍，而頁碼鏈接能讓用戶更容易到達那里。
2.掌控感：無限滾動就像個無止境空間——無論你滾動多久，你會感覺永遠結束不了。當用戶知道可用行數量時，他們可以自己主觀做出決定而不是被動滾動。同樣的，當用戶能夠看到結果的數量時，他們將能夠預估他們查看表數據大概要花費多長時間。
缺點：
額外的動作：在分頁方案中，用戶要到達下一頁表內容，就必須點擊分頁控件上的按鈕跳轉，等待表格新內容的加載。
表格無限下拉加載使用戶在數據內容面前一直滾動查看。向下滾動的時候不斷加載新內容，雖然十分方便與誘人，但不是什么場景都適用。
優點：
1.瀏覽：無線滾動提供了一個的方法讓用戶瀏覽表數據信息，而不必等待表格新內容的加載。當用戶并不特意尋找特定的內容時，他們需要通過查看大量內容找到自己中意的信息。
2.體驗更好：用戶使用滾動能獲得比點擊分頁有更好的體驗。滾動行為要比點擊更快更容易，對于那些連續且冗長的內容，無限滾動要比把分頁的有更好的易用性。尤其在表格區域狹小時，使用無線滾動更能節省空間。
缺點：
1.受限性能：頁面加載速度是良好體驗的一切。尤其是表格計算數據時需注意使用無限滾動，緩慢的加載速度會造成用戶的不耐煩與離開。用戶在一個表格頁面中越向下滾動，就會加載更多的內容，當數據量過大時，結果就是頁面性能越來越低。
2.位置丟失：無線滾動同分頁相比，沒法標記當前位置且不能再隨意回到之前位置。一旦離開，就會丟失當前的瀏覽記錄，如果要回到上次的位置，必須得重新滾動去尋找。當用戶有這種行為的話，無線滾動就會讓用戶產生困擾厭煩。尤其當你刷新頁面時發現自己又回到表格頂部，不得不重新滾動等待結果的加載以繼續查看。
3.信息缺失：滾動條并沒有反映出實際數據量。假設快要接近底部了，當受到引誘滾動條再滾動一點點時，結果卻會發現表格數據量又刷新了。從一個可用性的角度來說，打破滾動條的正常使用規則對用戶來講是糟糕的。
一般來說，無限滾動適用于在數據有限且信息重復的表格，有利于內容探索。分頁則適用用戶在尋找特定信息及瀏覽記錄，易快速訪問。
表格內容的取舍要建立在對業務的了解之上，盡量精簡指標，隱藏不必要信息，減少干擾，避免無主次的鋪出所有信息。不要讓用戶一次性接收過于龐大的信息量，建議默認只展示用戶所必須的信息，其他次要信息通過展開下拉等方式展示，為輔助信息提供深層入口。
展開行允許用戶無需打開新頁面在表格內即可查看附加信息，防止用戶迷失。
表格中打開表格，表格組節把相關的行組合在一起，并且能夠收縮和展開，各組節層級要有樣式區別。如有需要，在每個組節里可以顯示數據概要信息。
包括模態彈窗和非模態彈窗，模態彈窗是僅支持打開一個彈窗進行詳細查看，非模態彈窗是可以同時打開多個，并允許拖動彈窗位置進行信息對比。
模態允許用戶留在表格視圖中，且更多地關注附加信息和操作：
非模態彈窗對于主動使用的用戶來說可能很有用，可以通過一系列操作，比較不同行數據的細節：
可以通過視圖切換查看更多細節，比如在“表格”和“左列表+右詳情”之間切換，或者提供“只看文本，看文本和縮略圖，只看縮略圖”幾種查看方式。相比彈窗減少了頁面層級和隔離感。單擊行鏈接將表格轉換為左側的列表項目和右側的其他詳細信息，這讓用戶能夠解析大型數據集，而且在涉及到多個項目時不會丟失位置。
編輯表格數據在大眾化的Web應用程序中并不常見。不過，在企業級Web應用程序中，表格則占據統治地位。此時，最常見的用戶需求，就是想要像使用Excel一樣實現表格編輯。畢竟Excel早已成為編輯網格數據的一種標準。
表格數據的操作大體可分為顯性與隱性。顯性操作，指操作選項顯示在行內，直觀明了；隱性操作，當鼠標懸停時或勾選才顯示操作選項，界面簡潔明快，可減輕空間壓力，減少干擾。
操作項一般存在于行數據最后，為固定列，或表上方位置，兩者對應多種操作場景。
單行數據操作
文字按鈕操作項一般不多于三個時，圖標按鈕不多于四個時，操作項跟在行條目后面；當超過時，建議將操作折疊收起，點擊更多彈出多個操作選項。當操作按鈕致灰時，鼠標選中可顯示原因。
如果行操作不那么重要，或者說行操作過于啰嗦影響用戶閱讀時，可使用隱形操作，鼠標在行區域懸停時，可對當前行背景作出區分，或放大懸停區域，同時行尾出現可操作按鈕，進行行操作。如谷歌郵箱：
批處理操作
對于數據批量操作的場景，建議將操作放到表格上方，與復選框操作配合使用。批處理操作模式允許用戶對一行或多行對象執行操作，并在選中復選框后激活表上方操作按鈕，如刪除、批準、拒絕、復制之類的操作，這將節省用戶時間，避免重復對多行進行相同操作。
表格上方的所有篩選或搜索按鈕可能會因操作按鈕出現過多而暫時隱藏，如果空間限制導致操作按鈕排列不下，則使用“更多操作”按鈕。
二次確認提示：對于用戶操作結果給出提示窗反饋，用戶點擊「刪除」后，直接操作；出現提示框告知用戶操作成功，并提供用戶「撤銷」的按鈕；用戶進行下一個操作或者15s內不進行任何操作，提示框消失，用戶無法再「撤銷」。
在執行某些無法撤銷的操作時，點擊刪除后，出現模態彈窗進行二次確認，在當前頁面完成任務。同時禁止濫用模態彈窗進行二次確認，就既打斷用戶心流（無法將上下文帶到彈出框中），也無法避免失誤的發生。
數據較多時，單個選擇數據費時費力。單選框是只能單選，而復選框是能選擇單個、多個或全部選擇項，而實際上純粹的單選很少見，所以建議一般場景下在表格最左側加上復選框，如前面說到的批量操作，多選后，就可以批量操作。點擊選框所在行的局部能讓整行被選中，每個選定的行都接受突出顯示處理，這種做法可增大點擊區域減少界面的混亂。
具體設計時，可以按照數據類型進行選擇，如郵件已讀、未讀等。
可進行選擇的表格需告知用戶已選數據量，在翻頁時是否允許跨頁選擇；全選是當前頁視圖中的所有項目還是選擇表格中的所有項目。
針對于需要進行數據編輯的表格。表內編輯能使數據更具可操作性，表內編輯一般優于彈窗。要啟動編輯功能，必須通過鼠標單擊，而非鼠標懸停。這樣就能確保整潔的網格顯示效果。假如是通過鼠標懸停來觸發，鼠標每經過一個單元格就得顯示一個編輯框，那這種編輯模式就會干擾到不同單元格間的切換，會有多么煩人。
單元格編輯：針對單個，不連續的可編輯的單元格，為了讓功能更容易被發現，可以在單元格數據旁放置編輯圖標，這樣可編輯和不可編輯的單元格視覺對比就十分明顯。單擊該圖標即可觸發編輯，單元格內出現輸入框，保存數據并退出。有了這個隨時可見的鏈接后，編輯功能就更容易被注意到了。
單元格編輯時，也可以設置整個單元格為熱區，以便用戶觸發。
覆蓋層編輯：點擊編輯圖標觸發；通過在頁面上方添加一層來放置編輯數據。雖然編輯期間也不會離開當前頁面，但卻不是在頁面中直接實現編輯。而是把一個輕量級的彈出式覆蓋層（如對話框）作為編輯窗口。
選擇覆蓋層編輯而非行內編輯的原因也很多。有時候，不可能把某個復雜的編輯任務安排在同一個頁面中完成，如果嵌入頁面的編輯區域太大，會因為把內容過多地推向下方而損害頁面的整體感。
而其他情況下，也可以選擇中斷當前頁面流，尤其是被編輯的信息本身非常重要時。覆蓋層能夠為用戶提供明確的編輯空間。提示如果有必要占用專門的屏幕空間放置編輯窗格，而且頁面的上下文對編輯任務也不重要，就可以考慮使用覆蓋層編輯。
行編輯：針對同一行標簽下的數據編輯。新增數據行后，視圖定位到新增的行并高亮顯示，讓用戶快速聚焦。幾秒后高亮消失，以免過度干擾用戶。
不過，表內編輯圖標會涉及平衡頁面中視覺干擾的問題，如果功能及其提示在頁面中的數量過多，很可能造成功能的利用率下降。如果一行有多個編輯選項，則可以適當使用彈窗編輯數據；如果表格有大部分單元格數據需要編輯，則可以全局編輯。 
全局表格編輯：點擊表格編輯按鈕，當前表格所有可編輯的數據單元格內顯示文本修改框或類似XLSX的角標，進入一種特殊得編輯狀態，不會給人直覺造成混亂。這一功能基本用于大面積需要填寫和修改時，如大型填寫報表。
大型數據表由于支持編輯數據處多，這種方法的另一個問題是容易填錯單元格，想象單元格的密集，用戶意外編輯錯誤也時有發生，這樣的話需要編輯/暫存/提交三個操作。如果發現編輯的內容報錯可被更正，應直接引導用戶更正；如果報錯內容不可被更正，則告知用戶原因。
大型數據表如需減少與表格無關的視覺干擾，提供表格的沉浸式閱讀體驗，可提供全屏查看的入口，但應注意可以讓用戶便捷的退出。全屏模式可以直接屏蔽掉頁面其它內容，只留下表格區域，用戶通過ESC鍵或按鈕隨時退出全屏模式，學習成本較低。
當表格數據為空時，在表格的空白內容處加入可創建的快捷入口，引導用戶新建表格數據，或者導入數據。如下圖郵箱已發送郵箱為空時：
當沒有創建訴求的，直接告之暫無數據。如數據是系統產生的，不是由用戶創建的，直接告之暫無數據，話術的表述則需與后臺文案的整體風格保持一致。
個人關于web表格設計的看法基本寫完了，在總結歸納中也發現了自己平常設計表格中的其他問題。大多表格設計在不同場景中需要隨機應變，沒有絕對的規范，只有相對的規范。我們要理解規范背后的原則，推導出適應其他場景的規范。
文章來源：站酷 作者：小龍哈
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：你有沒有設計過結構復雜、內容繁多的表單？在設計時有沒有什么技巧可以化繁為簡、提升填寫者的體驗感呢？本文作者為我們羅列出了表單設計中可能遇到的一些問題，并且提供了解決方案，讓我們一起來學習吧。
距離上次發文已經快半年多了，實在是慚愧，好久沒有輸出內容了，看著每周增加的零星關注人數，內心更加焦灼難安。
這半年來我換了工作，也適應了新的環境，同時也在思考新的方向，估計和大多數的設計師一樣，迷茫時常伴隨著我。前段時間寫了幾周的產品體驗日記，但覺得缺乏深度就沒發上來，后續我將會繼續寫產品體驗日記，完善后分享給大家。
2020所剩無多了，我也會將積攢下的一些內容陸陸續續發上來與大家分享，感謝關注，感謝閱讀。哈哈哈哈
你平時填寫過的最復雜的表單是什么？調查問卷還是文檔信息錄入？如果一個表單字段內容巨多、結構多變、填寫耗時耗力，那你將如何設計你的表單使之體驗更佳？
面臨的問題:
不知道大家是否看過法律合同之類的文件，多則好幾籮筐，少也有厚厚一疊；類似的文檔如果進行線上結構化，勢必要同樣要花費巨大的人力去填寫表單，完成基礎信息的錄入工作。
同時，由于錄入的時間不確定，流程不明確等問題，也制約著表單的填寫。
多個不同表單之間的互有關聯又相互區別，填寫的時候需要來回查看以確認信息，查閱和填寫相互并行，操作繁瑣。
幾乎每一個字段都有對應的關聯項，每個單選字段的不同項決定不同的內容。同時，由于字段數量，層級劃分不明確，會使填寫的人失去定位，產生迷惑。
根據業務內容分級，合理運用顏色、間距、字體大小、卡片層級等進行信息分級。
一般表單是與某項功能掛鉤的，信息會在多個入口錄入。因此在填寫長表單的時候，如果能從系統中自動獲取到數據，就可以自動為其填充，可根據業務場景，判斷是否讓其修改和更新。
一般的長表單在涉及非審批流的時候，可以讓其無限二次編輯；如果是處于審批流，則需要根據業務場景限制其編輯次數或者限定其編輯規則（草稿可編輯，一旦提交則不可編輯）。
如果一個長表單，需要多個不同的業務域的人來填寫，那么需要協同編輯，并實時顯示編輯的人員信息。
同時，為了避免信息丟失和編輯錯亂，在同一個表單下，同一時間應該限制只允許一個人進行編輯，等其提交完后，可允許其他人進行編輯。
前端實時校驗字段輸入規則，后端統一校驗信息交換規則。
比如對于數字輸入框的校驗、電話號碼的校驗、身份證號的校驗，應該在前端實時完成。
在鼠標離開焦點區域或定位到下一個字段的時候，提示其填寫有誤；這樣做的目的是減少后續修改的次數，在長表單下，統一提示其填寫錯誤會是一場災難。
在點擊保存并填寫下一步或點擊提交信息的時候，就需要跟后端交換數據，驗證錄入的信息；如果不匹配，則提示錯誤，并從上至下定位至相應的錯誤字段。
要通過多種方式，引導表單的填寫。
1）在開始填寫之前，簡要說明該表單的業務目標，大概需要花費的時間等；
2）開始填寫后，關于每個字段的特殊說明，都需要標注出來。重要的要顯示在頁面上，不重要的就收起在注釋符號中；
3）填寫的過程中，切記不要到最后才告訴用戶哪里出錯了，重要的信息一定要提示到位，否則一旦出錯，前功盡棄；
4）填寫完成后，引導其下一步的操作，或者返回至列表。
表單填寫完畢后的產出物就是詳情頁，詳情頁是需要瀏覽的。因此在設計詳情頁的時候，應該本著讓用戶瀏覽方便的原則去設計，需要注意以下幾個點：
1）結構清晰
結構清晰是指不要講內容一股腦的全堆在頁面上，要做好信息的分類；同時，注意規劃頁面的層級。
2）設置快捷導航
如果一個表單是長且復雜的，那么其對應的詳情頁也會變得復雜和冗長，因此在頁面的右側或者頂部設置合理的快捷導航是很有必要的。
快速返回頂部按鈕的使用要注意場景，如果你的頁面比較長，且沒有分組瀏覽的導航，那就需要設置快速返回頂部的按鈕。
但是在存在分組瀏覽導航和頂部懸浮標簽的情況下，不建議使用快速返回頂部的按鈕，因為在填寫表單的時候，使用快速置頂的場景比較少。
當一個模塊混雜著各種信息的時候，單純的模塊分組已經無法處理它的復雜度了，因此需要收起高頻且信息量大的模塊，可以合理的減少頁面的復雜度。
步驟條可以單純的作為步驟指示器使用，也可以作為一個表單完成度的提示區域。
在填寫大量字段的表單時，閱讀表單內容和填寫表單同樣耗時耗力。
如果我們將所有的提示信息隱藏在提示符中，一般情況下用戶不會去查看；但是如果去挨個查看提示信息，則會多花費一個步驟去點擊或者懸停來查看提示信息，浪費了大量的時間。
因此如果涉及到重要的提示信息，請直接展示在字段的后面，不要隱藏起來。
在后臺產品上，關于組件的規范統一，想必是人盡皆知的設計原則。
無論是各類平臺型設計組件，還是各個公司自造的設計組件，保持統一和規范對產品設計有著重要的作用，在這里不贅述組件應該怎樣規范統一。
因為無論是Ant Design還是其他設計語言，都有詳盡的關于組件的定義方法，我在這里講述一個產品設計更高層面或者更深層面的原因：
組件的規范統一并不僅僅是為了省時省力，而是為了使用戶在使用的過程中達到認知上的統一和行為上的統一，在進行高頻次的操作后，界面的流程或者組件樣式已大致在用戶腦海中形成固定印象。
因此在操作相同類的流程時，用戶會有更多的掌控感，試想一下：如果你在操作人事相關的流程后，去填寫績效部分的內容時，發現一個迥異的界面或者彈窗，你肯定覺得這是不是哪里出錯了，甚至會懷疑這是否是同一個系統。
目前大多數公司的管理系統經過多次縫縫補補，內部的跳轉邏輯已經異常感人，界面風格也大放異彩，但是使用起來卻無從下手，深感迷茫。
因此大到界面樣式，小到間距大小，產品設計的規范和統一應該是最基礎又不可缺少的原則。
對付復雜的表單，你需要解決的主要問題并不是填寫方式或者頁面設計，而是信息分級和結構拆分。解決了這個問題，基本上就解決了業務問題，其余部分就跟我們常用的表單一致。
將復雜度降低并不意味著減少頁面的信息，而是通過設計師合理的信息劃分，降低視覺上的復雜度和流程上的復雜度，這樣才會達到當前場景下的“最佳解決方案”。
隨著互聯網信息化的深入發展，復雜是避免不了的。
我知道大家都推崇簡潔的設計，但那只是對視覺和樣式的定義，而非對信息的定義。
我們所處的世界是復雜的，行業更是復雜的。信息的復雜度與日俱增，想要處理復雜的信息，就需要從復雜中尋求規律，這規律與業務息息相關。
B端360行，行行深如海，小伙伴們，我們一起慢慢修煉吧~
一、導語
1. 業務復雜，功能較多
2. 流程較長，操作繁瑣
3. 字段較多，關聯項較多
二、解決方案
1. 內容分組，分步填寫
2. 實時保存，避免數據丟失，提供草稿功能，避免任務中斷
3.字段分組，示意結構，聯動項隱喻
4. 信息自動帶入，節省時間
5. 提供二次編輯功能，防止信息輸入有誤
6.提供多人協作編輯功能
7. 實時檢驗
8.做好填寫引導功能
9. 詳情頁也需要注意信息分級
三、小細節，大體驗
1. 提供快速返回頂部的按鈕
2. 提供分組模塊收起展開功能
3. 步驟提供信息填寫完成度提示
4. 重要說明性文字盡量顯示而非收起
5. 產品內組件應該規范統一
6.龐大的信息錄入，表單內部要分步填寫，外部可拆分成不同的表單分別填寫
四、結語
文章來源：人人都是產品經理 作者：米蘭小鐵匠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
目前我主要深耕于B端設計中，深知B端表格設計與C端有很大的不同，無論是表格的展示形式以及承載內容上都有非常大的差異。而現在網上有不少關于表格如何設計的文章，但要真正落到實處的少之又少，因此今天我們就來聊聊表格，探討一下B端表格究竟應該如何設計。
由于表格組件類型復雜，因此分為上下兩篇，上篇主要講基礎知識點，下篇主要針對交流群中的20個問題進行解答，歡迎持續關注～
在我們B端表格頁中，由導航、篩選、表格幾大模塊構成，因為表格面積占比最大，頁面呈現最為重要，會直接影響用戶的使用體驗。
在我們對表格的設計思考過程中，需要注意兩項原則：易讀與易用
前者是提升使用者在表格瀏覽時的體驗，主要是從信息密度、色彩分隔、以及視覺節奏三個方面去理解；后者是使用表格時的操作感受，比如快捷操作、多數據編輯等方面去理解。無論是B端的任何頁面，表格都是必不可少的部分。
想要把這三種形式講透，需要將數據的形式結合起來說，我會從展示形式、數據結構、前端標簽 三個方面去解釋三者的區別。
表單擁有一對一的數據結構，能夠讓用戶明白數據間的對應關系。同時使用表單的門檻，擁有更合理的錄入形式，比如在常見的問卷調查、登陸注冊都是采取表單的形式。
在前端展示方面，表單采用的標簽一般會包含：text、password、radio、checkbox、button、submit、reset、image、file等屬性，我們也要針對不同的屬性進行相應的設計區分。
列表能夠將數據在一列中井然有序的展示，保持數據的有序與整潔。列表擁有一對多的數據結構，能夠讓用戶理清一條數據下的多個對應關系，并且多個對應關系是相互并列。比如在常見地待辦事項、走查清單中里，就是使用單維度數據進行排列。
在前端展示上，列表中的標簽分為有序與無序。
? 有序列表：即有順序的列表，其各個列表項按照一定的規則排列定義，前端標簽上采取<ol><li>的結構。
通常有序列表一般為數字序號（1、2、3、4...）或者字母序號（a、b、c、d）
? 無序列表：無序列表的各個列表項之間沒有順序級別之分，為并列關系。前端標簽上采取<ul><li>的結構。
在多維度的數據分析中，你是永遠的逃離不了表格，使用多維度數據進行統一的結構化展示，讓用戶清晰的看到在同一主題下的多條數據的對比，使數據能夠進行多維度的展示，保證數據的完整性。
在前端的方面，表格中都是采取 <table> 標簽進行展示，同時表格中的行與列分別用 <tr> 與 <td> 標簽，我們通常說的表頭，則為 <th> 標簽。但要注意，在前端眼中表格永遠沒有列的概念，列都是每行拼接而成。
正式開始之前，我們先定義一下表格～
表格是一種常見的信息展現形式，它是所有B端組件中信息展示密度最高，同時涵蓋了B端的所有場景，因此是B端設計中的一個重要的組件。
在我們常見的B端產品改版中，除了對頁面流程調整以外，更多就是圍繞表格而展開的一系列優化。因此表格的設計，做為B端設計師的基礎能力之一，也是檢驗一個B端設計師是否合格的關鍵因素。
表格屬于形式十分單一的組件，對于沒有經驗的設計師來說，會認為能夠調整的地方實在太少，往往在思考層面就會有所不足。對于一個B端表格來說，它需要具備數據瀏覽、數據新增、數據操作、數據統計，因此功能多而全，很難思考解決問題思路。
通常設計師設計單個組件，都會有較好的全量意識。而到了多組件的聯動時，就會出現問題。
比如在表格中，除了表格本身，還會有搜索、篩選、視圖、分頁等操作，如果不對多組件的交叉使用進行思考，也會缺少對于這些場景的設計。
在表格中，會承載多種多樣的字段類型，而每一個字段類型都會有相應的差異。形式的不同落到表格上就會有不同的呈現形式，在關鍵數值的處理上，也會差強人意。因此看上去簡單的一個表格，其實會有很多需要設計的點。
而深入到表格的內部中，你會發現能做的遠遠不止于此，如果剛開始沒有對表格進行梳理，那么你在設計的過程中，對于反復出現的表格將束手無策，為了讓大家能夠對表格有更深的理解，我將表格進行系統的拆解，結合實際案例，能夠讓表格更淺顯易懂。
首先問大家一個問題，你覺得表格一共有幾個部分組成，分別是什么？給大家五秒鐘時間思考～
5
4
3
2
1
～
在我看來，表格一共分為五部分：
概括整個表格的內容信息，讓用戶一眼就知道該表格的用途是否符合自己心中的預期。
在實際場景中，除了通過標題文字去的形式之外，你還可以為每一個表格去設計不同類型的圖標，這樣能夠讓用戶看到圖標就能聯想到內容，這也是現在無代碼開發平臺常見的處理方式。
但在工具欄的排列方式會有非常多的講究，在市面上的操作區域一般可分為單行與雙行的狀態，可根據自身產品要求的特點進行隨意的變化，會在文章后半部分具體講到工具欄的設計思路，這里就不再過多贅述。
概括每列的主要信息，在用戶使用表格中，起到數據解釋作用，讓數據能與之進行匹配，使用戶能夠看懂數據。同時在表頭處會擁有一些操作，比如凍結、篩選、排序都會放置于此，因此需要進行留意。
承載用戶的每一條數據，也是整個表格的核心。單元格的大小行高都會直接影響用戶使用表格的體驗，單元格的設計上也會有很多設計思路，在后半部分也給他家提供了我自己的看法，與大家進行探討，在這個就先按下不表。
嚴格意義上講，分頁是不屬于表格當中，但當數據超過用戶所設定的閾值時，就需要使用分頁拆解數據，所以分頁和表格是經常聯系在一起的。分頁一共有：基礎型、迷你型、完整型三種類型。
而如何進行跨頁的操作，一直都是分頁在B端中的難點，需要有好的思路與邏輯，在分頁模塊中與大家聊聊。
你知道表格類型的多少決定你了設計表格的下限。
雖然在大多數業務場景中都是使用基礎表格，但在B端產品中業務的多樣性使得很多特殊的表格有它獨特發揮的空間。
我發現在我的B端交流群都有著類似的問題，他們不知道表格還存在這么多的類型，這時候你與別人之間的認知的差距就是你設計優勢所在。
基礎表格是根基，是由行與列的單元格組成。在使用層面上能滿足用戶多維度查看數據的需求。因為大家都很熟知，在這一章節并不是主角，我們就不做過多贅述。
當表格中的數據為包含與被包含的結構時，可采取樹形表格。
通過逐級大綱的形式來展現數據間的層級關系，讓整個信息結構變得一目了然。這一表格形式常出現于項目管理工具中，比如 Teambition、Tapd、飛蛾都有這樣的設計。
作為騰訊最重要的項目管理工具，在產品設計之初，就考慮到類似情況，你能夠在Tpad單列數據編輯點擊入口，創建子數據，這樣在項目管理的場景下，有著較為友好的交互體驗。
前段時間，Teambition正式成為阿里旗下的辦公套件，而釘釘的云釘一體化，或許證明這樣龐大的市場仍然還要等待時間的挖掘。期待資本對于B端行業的更多動作
我們回到設計上，Teambition在9月份經歷的改版，變化很多，有機會可以總結一個改版分析分享給大家，作為一個項目管理軟件，Teambition也擁有樹形表格的這樣一共功能，它的添加入口出現在每個數據詳情頁的最下方，同時在視圖層面，也可以篩選展示為：所有任務、僅父任務、僅子任務四種場景，更能滿足用戶的需求～
當一條主數據下有多條數據結構不同的關聯數據進行嵌套時，這時候就可以用子表格進行創建。它能夠對主數據進行更加細致的解釋，詳細的了解主數據中數據的含義。從表象上看，就是在一個表格中還能嵌套另一個表格。
比如在對某集團對旗下子公司的銷售表格中，它能夠通過嵌套子表格的形式，將每一個子公司下的銷售人員的銷售記錄進行記錄，從而能夠更加細的了解到每一個公司、每一個人員的具體情況。
在國外報表中，這類表格很少出現，而在中國的報表中，嵌套子表格算是一種不折不扣的中國式報表。
當然這里我們依舊可以深入理解，比如在兩個表格之間，用戶是通過什么樣的方式建立一個父子的關系？表格中當父數據刪除時，子數據如何處理？設計上對父子之間的關聯有著何種限制，這都是我們需要思考的，因為這里牽涉到業務實在太多，我也無法抽象出一個規律供大家學習，因此只有具體問題具體分析。
當一個表格里面有多條數據在同一個小范圍的維度進行展示時，它就是交叉表格。從表象上看，就是表頭有很多分組進行區分，因此它也叫做表頭分組。
它能夠通過硬拆分將數據進行切割，但是這樣數據的易讀性就是有很大的差距，比如在2010-2020公司年度收支表格中，需要同時展示每一年份的收入、支出與利潤，使用交叉報表能夠讓用戶一眼就是看清數據，而基礎表格卻不行。交叉表格也算是中國式表格中的一種，能夠滿足具體業務上的需求。
當一個表格里面有多種圖表數據進行展示時，他就是圖表表格。
在對一些項目做定制化開發時，這是十分常見的場景。用戶點擊某一數據后，直接跳出數據的統計圖，方便用戶進行對比。同時這一功能也可以通過儀表盤這樣的功能去解決，也就說到國內最愛做的數據可視化。
這是很多人都會忽略的一個點，主要是大家對于表格的理解各不相同，也沒有具體的文章對于表格尺寸有個非常明確的限制，在這里分享一個我常用的數據點，用于判斷表格設計的優劣：表占比。
表占比：表占比是指在1920x1080的屏幕大小下，表格占整個頁面的比例 即：表格面積 / 頁面面積 = 表占比
這里需要指出，這里的表格面積是指，表頭+單元格+分頁（不包含工具欄）
在我對十幾款主流B端軟件的總結分析中，驚奇的發現大多數產品「表占比」都是在65-70%之間，而一些不注重交互設計上的產品則會有所偏差。
那為何65-70%是一個更為合理的數據？
因為只要在頁面中出現表格，就代表這個頁面一定是以表格作為核心。而表占比低于65%，代表頁面中的表格不處于內容的核心，你需要重新審視這個頁面所需要傳達的功能。
如果表占比高于80 %，則代表表格出現面積過大，要考慮用戶是否能夠接受如此大的占比。
因此，設計的合理性來說，占比在65-70%之間能夠保證數據展示的合理性，同時這主要是針對CRM產品，大家可以使用這個占比去衡量自己設計的B端產品～
當然這樣的情況并不是一塵不變的，B端最大的魅力便是業務邏輯，我們來看一個看起來像是反面的例子：在銷幫幫中，表占比為：61.2% ，看似是一個并不合格的成績，而且數據十分異常，讓我想要深挖，為何會如此的低。
通過進一步的分析，發現銷幫幫是一款與釘釘生態深度綁定的產品，其產品只能通過釘釘軟件進行使用，而釘釘本身默認并不是1080px的寬度，用戶打開并且全屏的尺寸偏小。默認尺寸大小的不同，最終讓銷幫幫選擇去滿足業務而犧牲表占比去換取更多的功能。
因為在B端的工具欄的設計中，市面上缺少思路與方法的指導，會出現非常多的問題，因此我展開講講工具欄的設計，就不出單獨系列進行講解～
首先，對于工具欄，不同的產品，會對它有著不同的定義。比如在Apple MacOS 系統當中經常提到的Toolbars和Toolbar Items；又或者是Microsoft 產品中采取的Ribbon設計模式。在設計底層思路上截然不同，平臺級產品思路與定制化產品思路存在很多截然不同的做法，我們今天簡單聊聊大家遇到過多的表格工具欄設計，不做深挖～
在表格工具欄的設計中，信息分區與頁面透氣是非常重要的兩個設計核心。
信息分區：
因為工具欄是由標題、篩選、搜索、視圖、新建等操作組成，而功能間的區分是工具欄設計的一個關鍵。
當一個工具欄中，需要將如此多的元素進行組合排列時，必然會有其排序的規則，這時我們就可以通過親密性原則，對工具欄中的信息進行相應區分
在設計的親密性原則中，我們可以將功能相近的工具放在一起，比如：搜索與篩選都是數據過濾的操作，應該放在同一分區；
同樣，工具欄也會存在一些功能點不太相近操作，我們就應該通過分區將其間隔開，比如在下圖中，每個功能都將其用線條區分。
當然，在信息的去區分上，也有強弱兩種不同的方式，一種是通過線條直接分割；另一種是將工具欄進行空間上的區分。因此可以通過信息區分去檢查你的工具欄設計是否合理。
內容呼吸：
在一個定制化項目中，設計師一定要讓自己的頁面具有呼吸感。在B端業務中，信息量本身就已經足夠龐大，而頁面的中的疏密關系就顯得尤為重要。
通常列表都承載著繁雜、冗余的數據，是一個信息集中的密；工具欄作為與表格關聯的上部分，呼吸感便成為表格的重要因素。通常在表頭處要將空間盡量分散開，這樣才能滿足整體的疏密關系。
經常看到一些十分冗雜的表頭，甚至它喪失了表頭的真正含義。在實際情況下，盡可能明確、簡單的講出表頭的內容，以免造成表格的宣兵奪主。當然也會存在一些專業術語，這時候，給一個Tooltips再合適不過。
在表格中，單元格的行高是一直都是一個難以控制的變量，因為行高會直接控制表格中的信息密度，而信息密度永遠是一個無法量化的元素。而在我們設計過程中，需要采取盒子模型的方式，讓你的設計更加落地。
知識點補充：盒子模型
從前端開發而言，單元格是一個最為基礎的盒子模型。而HTML中的所有元素都可以看作是一個盒子。而我們所設計的頁面也正是由這個樣的原理去還原出來。
Margin(外邊距)：清除邊框外的區域，外邊距是透明的。
Border(邊框)：圍繞在內邊距和內容外的邊框。
Padding(內邊距)：清除內容周圍的區域，內邊距是透明的。
Content(內容)：盒子的內容，顯示文本和圖像。
a.單元格內容
內容一般為文字、圖標、頭像等等，而對于數據中你想要格外突出的內容，這里稱為關鍵數據標識別。從盒子模型的角度來看，它就是當中的Connect，但單元格內容中，一般會有一些處理技巧：
關鍵數據標識：
用戶在使用表格時，會經常去留意一些關鍵的數據。比如數據的狀態、變化的多少…
如果在系統中，你能夠很明確知道用戶想要了解的數據時，便可在關鍵數據上進行標識。這樣能夠幫助用戶快速定位到自己想要的信息，減少數據尋找所化的時間。但如果你對關鍵數據標識出現誤判，這條數據便是一條十分干擾的數據，因此在這里的設計，需要慎重考慮。
比如在飛書的成員與部門中，對于賬號狀態就是一個關鍵數據的標識，一方面用戶可以快速了解到已經激活的成員，另一方面對于未激活狀態的進行突出展示，同時給予用戶未激活后的再次發送提醒的操作，是對用戶使用的優化提升。但，如果將不重要的數據進行標識，例如手機號，那么這將會是一個令人痛苦的設計。
人員角色展示
人員角色展示在表格中十分常見，通常會是以用戶名稱+頭像的形式展示。
但在真實場景的表格中，頭像需要給予默認的形式，比如釘釘、飛書就是以用戶“姓”作為頭像的默認值，而在多個人員角色展示時，就需要考慮特殊情況，無論是極值省略展示與獲取全量數據中，都需要我們進行設計上的處理。
進度條
進度條是屬于關鍵數據的一種，它所涉及到的功能與圖表表格類似，能夠更直觀展示數據的占比，方便用戶對于多條數據間的值進行判斷。進度條常見于“容量、使用量”的數據中。
表格空白處理
表格中經常出現空數據的情況，而表格的留白對于用戶而言會造成一些困擾，特別存在與頁面中的大面積留白，感覺像是數據沒有加載出。因此在表格空白數據處理上，可以使用“-”來進行默認展示。
b.單元格行高
單元格行高一般由：文字大小、文字行高、左右上下邊距共同組成。
從盒子模型的角度來看，它就是其中的Padding。因此行高的確定，是由上方四個條件共同組成。
文字大?。?/strong>一般出現在表格中的文字大小都在12-16px之間，通常13、14px最為常見，建議大家設計也在此范疇內。
文字行高： 行高是一行文本垂直方向的高度，這個高度和字高無關，文字內容水平居中?？稍O置為字號的1.2-1.8倍，文字與分割線間距離可以設定為字號的1-1.5倍。
邊距（Padding）：表格中的邊距分為左上右下四個方向，而左上右下恰好就是對應前端去編寫Padding代碼的順序，在對頁面驗收時，便可采取這樣的形式。
單元格行高可配置：單元格行高直接影響著信息排列的密度，而在實際業務中，真正落地也有著不同的做法。
在對定制化項目的開發中，通常會設計一套設計師認為更加合理的單元格高度，一般為32px-56px區間內，而在很多通用化產品中，存在多個設備屏幕分辨率的差異，為了讓每一個分辨率下的產品都能夠有較好的展示效果，于是乎將選擇權交給用戶，在表格左下角會設置舒適、標準、緊湊三種高度來滿足需求，使得表格更加落地合理。
總結：整個單元格的行高，就是由這三部分組成，它們的嵌套與組合，所形成了單元格的行高
c.表格分割
在表格設計當中，每一條線都有著它存在的意義。
當表格中展示橫線；隱藏縱線。
用戶的橫向閱讀體驗更佳，強調一條數據的完整性，能夠讓用戶進行快速的對應。
當表格中展示縱線；隱藏橫線。
用戶的縱向閱讀體驗更佳，強調數據上下間的對比，能夠讓用戶找到同一緯度數據下的對比。
比如在一個組織架構的成員列表中，我相信大家都設計過類似頁面，同樣的設計方式，我一個采取展示橫線、一個展示縱線，結果明顯，我成員需要閱讀完整條數據，因此橫線會更加合理。
當然，在我們日常的設計中，展示橫線的場景顯然會更多，但我們日常使用時，數據對應的場景還會更多這是需要有更強的設計形式：
d.行、列凍結
當表格的行與列的數量過多時，會導致一屏展示不下，而表格中的關鍵信息與操作是需要在任何時候都展示，這是采取行、列凍結，能讓用戶快速觸達。
表頭凍結：通常出現在垂直滾動時，通過固定表頭的信息，能夠讓用戶閱讀時對應不同的數據，使用戶更好理解數據。
首尾凍結：通常出現在水平滾動，通過固定首列的主屬性字段以及尾列的數據操作，來滿足用戶對于一列數據的認知，從而使用戶進行快速操作。
在對分頁設計的分析中，我們需要對分頁中的元素進行拆解，才能明白分頁的類型所帶來的不同。
表格信息：會展示表格信息當中的數據總量、更新時間、默認排序方式等...
數據總量主要展示用戶需要瀏覽的內容的總量；常見于管理后臺搜索、篩選符合條件的數據記錄時，搜索結果頁通常會展示這個信息，這讓銷售人員在操作時有心理預期。
更新時間主要是展示用戶當前表格所操作時的日期時間；常見于金融類產品中，他們對于表格中數據的時效性尤為關注，這樣可以方便用戶對表格數據中的有效性進行判斷
默認排序方式主要是展示表格中是按照哪一個字段進行的排序；通常這種做法多出現于表頭直接展示icon，但對于可配置化的產品而言，隨著列數的增多，你越來越找不到你想要的默認排序方式，因此在表格的固定位置展示，就再好不過（記住，只針對特定場景）
頁面展示數量：結構為「X條/頁」
它能控制每個頁面展示多少條數據；當在系統中有很多數據時，你可以直接通過「頁面展示數據 * 分頁總數」 直接算出整個表格的數據總和。
上一頁和下一頁翻頁：分頁中基本組成元素通過用戶點擊上一頁、下一頁的按鈕，實現表格的翻頁功能。翻頁通常會根據場景不同，去省略翻頁中的不同元素，比如在下面馬上那個講到的三種翻頁類型，但是上一頁和下一頁是絕對不可省略的。翻頁也如同你翻書一樣，可以進行對數據的逐頁閱讀，遵從用戶之前的使用習慣。
當前頁碼：當前頁碼說明了頁面中數據當前所處的位置，方便用戶進行翻頁的操作。
相鄰頁碼展示：相鄰頁碼通常展示前后兩頁，比如你在第6頁時，頁面需要展示：4、5、6、7、8；但頁碼在第1頁時，就需要展示：1、2、3、4、5；頁尾同理。
更多分頁：當表格數據過多時，就需要使用分頁，同樣，當分頁過多時，我們需要進行處理，就是省略，采用更多分頁，去展示多余的分頁情況，當用戶需要查看更多的分頁，點擊更多圖標即可。
總頁數：代表大概會有多少頁此類數據，通過使用總頁數才能讓用戶知道
總頁數說明了內容一共有多少頁，就像一本紙質書有總頁數，一本有聲書有總時長；通過這個元素，用戶才能了解內容的多少，對整理內容有個把握。
頁碼跳轉：頁碼跳轉幫助用戶從當前頁面跳轉到其他某個頁面；比如用戶在搜索了某件商品，按銷量排序，這時瀏覽到了第15頁，滿意度越來越低；于是打算從前5頁選一個，這時就能通過頁碼跳轉快速跳轉到第1-5頁了。
簡潔型：
當分頁數量較少時，通常在7頁以內，就只有最基礎的展示：上一頁、分頁數量、下一頁。
迷你型：
當頁面空間不足或者降低分頁的視覺影響時，可以采用迷你型，主要為當前頁/總頁數，可以直接跳轉到某頁面。
完整型：
當表格數據較多，為了滿足更多的用戶需求，可以根據需求選擇分頁類型。比較完整的分頁還包括如下功能：顯示總數、調整每頁顯示條數、直接跳轉到某頁。完整型的雖然滿足各種功能需求，但是所占空間較大，所以我們要根據自己的需求合理拆分使用。
分頁固定：
在表格中使用分頁，除了選擇合理的分頁類型外，我們還需要注意當數據過多的時候，是否要固定分頁。這個需要根據需求來決定，如果用戶翻頁很頻繁，表格數據又特別長，就可以考慮分頁固定在底部，免得每次用戶翻頁都要跑到表格的最底部才能分頁，還可以在表頭也放迷你型分頁。但通常在設計表格的時候就沒有固定，也很少使用表頭分頁，所以根據需求來定。同樣按鈕的設計也會存在類似的情況。
另外就是當數量過少時，只有一頁或者無數據的時候，我們是不需要分頁的，這個時候最好去掉分頁，展示在這里沒有什么意義了。但很多時候我們設計沒有做區分，開發也就不管了。
老讀者都知道，我會反復去強調“場景”這一概念（比如在導航菜單、篩選、彈窗、圖標中經常提到這一詞），因為你只有明白用戶真正的業務場景，才能夠真正的明白用戶的痛點。我們回到表格中，在表格的場景主要分為五類不同場景：數據瀏覽、數據新增、數據操作、數據統計與通用場景。我會通過不同場景的梳理分析我們在不同場景中存在那些優化點，可以進行深入探討。
在數據瀏覽的場景中，本質上是對大量數據進行尋找與確認。用戶需要在此場景下進行準確的數據查找。而伴隨著用戶的尋找，就需要使用表格當中的工具進行輔助查找，比如篩選、搜索，這些工具的出現，都能夠幫助用戶進行數據的清洗，使得用戶想要的數據能夠快速的被找到。
比如：我們公司的銷售人員在每天早上，都需要去 check in 今天自己所要跟進、回訪的客戶，銷售人員就會通過表格中的各種工具，去幫助銷售人員找到自己想要的那部分數據。
常見行為及設計點：
數據篩選瀏覽：通過自己對數據的一定了解，結合各種篩選條件，配合得到用戶想要的篩選結果。
數據多選：用戶可以通過多選，為他尋找的數據進行標記，方便之后的操作。
數據新增本質上是將復雜的數據結構，通過系統字段類型的相應規則，錄入保存到系統中。這也就我們常說的增刪改查的“增”
比如：銷售人員在對新增的客戶進行登記時，需要登記公司名稱，聯系人，聯系方式，跟進記錄等等。且需要不斷更新跟進記錄，因此銷售人員在表格上的新增是一個非常高頻操作～
數據操作分為對單個數據的操作、單行數據的操作、多行數據的操作三種情況
單個數據的操作，就是我們常見的快捷編輯，可以點擊快捷編輯按鈕，對單個數據進行錄入，
為何需要快捷編輯，在銷售使用場景中，使用表格去編輯一條信息是一個循序漸進的過程，比如在對客戶進行溝通時，數據的不斷更改，跟進內容也在不停修改，導致用戶需要每次進入用戶詳情點擊編輯之后才能進行操作，而在表格內進行快捷編輯直接滿足實時編輯的需求，在交互層面上這是一個非常OK的需求
但落到開發層面上，就意味著要在用戶進入表格中去判斷權限，才能讓用戶知道是否能夠點，點擊過后需要判斷字段屬性，明確該字段是與哪些字段進行聯動
單條數據主要通常會采取兩種路徑進行操作：進入用戶詳情頁界面，對一整列數據進行編輯，這種情況通常都需要多個數據進行處理，因此進入編輯頁面更容易尋找，同時也是最為正常的一種做法
多行數據操作主要采取多選過后的操作方式：當用戶想要對多條數據進行操作時，就需要對多個數據進行checkbox 的勾選，從而滿足多行操作的需求
數據統計主要針對用戶需要審查分析。目的是在通過大量的數據分析去得出自己的某一些結論，由于關注的數據會有主次之分，數據與數據之間也會有內在聯系，用戶會更加跳躍地掃視頁面，而且會更加反復地審查數據。例如，銷售人員需要查閱本月的銷售情況，進入到商品銷售明細表中，分析本月的經營狀況，若其中某些商品
了解了表格的使用場景過后，針對不同的場景，在設計上它的思路就會有所不同
使用上就會有不同的設計思路。由于篇幅原因，我們主要了解了表格的基本形態，如果對于表格的場景還不太清楚，我會在下篇中與大家通過20個問題，了解B端表格中究竟應該如何設計～
文章來源：站酷 作者：CE青年
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
扁平化網頁設計的表現大多體現在配色、字體以及布局排版方面，這三樣結合得當都能制作出漂亮的網站。在國內很多企業網站的布局架構幾乎是一樣的，最多就是LOGO和一點顏色變化，看不出什么特色和創新。
作為設計師，應該多花點心思在創新上，比如網頁上的布局，其實它是可以變化多樣的，正如今天為大家分享yi xie布局排版好看的網頁設計作品，大家可以參考這些布局的設計，從中獲得一些靈感。
附加精美流程圖設計與賞析。
（以上圖片均來源于網絡）
（精美流程圖設計）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
ui界面設計之網站設計案例欣賞(一)
牛津詞典上有對Navigation一詞在互聯網領域的解釋：
the way that you move around a website or the Internet when you are looking for information
翻譯為：你在瀏覽網頁時四處移動尋找信息的方式
也就是說用戶看到的，影響其尋找信息的因素都可視為導航。
交互上：
用戶在使用傳統方式閱讀時，所處的空間是單向的，只能向前或向后翻頁；
而在網頁領域，所有的內容都存放在各自的URL里，信息在多維度多空間里相互交錯，各有聯系，可跳躍的閱讀方式讓用戶很容易失去位置感。
試想一下我們在大型商場里暈頭轉向的場景，會常常抱怨其導視系統的糟糕，網站有過之而無不及。
業務上：
從潛在用戶想要了解某個產品時，導航就開始起作用了
影響點擊量：網站排名高低，搜索帶來的點擊量
影響轉化：網站的易用性，訪問者轉化為潛在客戶和客戶的概率
設計者創造易用的表單，展示有用的信息，建立流暢的交互，這些都要靠導航來引導用戶達到。
內容涉及到的東西很多，內容之間的相互關系也不確定，因此不同內容導航需要不同的導航模式
1）種類
不同行業，不同業務重點對內容的分類方式不同
種類可以是符合大眾認知，具有并列關系的信息，
也可以是按照設計者的意圖創造出的種類，并區分其優先級
種類導航的出現無形中建立了用戶心中對某類產品的預期信息架構，使其在瀏覽信息時更有方向性，例如在瀏覽一家服裝店鋪時，用戶在進入導航列表前就對種類有了預期，諸如男士上裝，男士下裝，女士上裝、女士下裝、配飾，包袋等。
2）字母
以字母順序排列信息。適用于信息量超大，且不存在主次、重要級關系的內容。常見于聯系人列表，地區導航，介紹人名，合作伙伴等場景。
3）自然屬性
以時間，地理位置等屬性組織信息架構。
時間：展示在一段時間內發生的事情，以時間為導航可以直觀地感受到信息的變遷，立體感更強。例如一個企業的發展歷史
地理位置：展示在不同地理位置的事件信息，空間感更強
也叫做結構導航，根據信息的上下級關系、主體信息架構等因素將信息有序排列。分為全局導航和局部導航。
全局導航往往指頁眉和頁腳，存在于網站的大部分頁面，便于用戶隨時跳轉。
頁眉：用戶進入網站關注到的點，將網站進行功能分類后，將導航文字放置在頁眉上
頁腳：此空間是為隱私和法律鏈接保留的，還會加上聯系方式，也有許多內容繁重的網站會把站點地圖放置在頁腳。
雅各布·尼爾森把全局導航在網站中的作用形象地比喻為機艙座位下的救生衣 ，你只要知道它哪 ，而不必時時關注它，需要時立即找到穿上即可。
局部導航是是更深層級的導航，不作用于全局，存在于特定的功能區，可分布在頁面各部分。
業務上必要的一些功能入口，通常貫穿全局，例如很多網站的個人信息，用戶需要在大部分時刻都可直接接觸到該功能。根據用戶的心理模型，這類功能會存在于頁面的右上角。
用戶使用較多，也是最重要的導航方式之一。當帶有明確的目的性或無法通過內容，層級導航找到想要的信息時，用戶會在搜索框內嘗試輸入一些信息。
而讓用戶主動搜索會出現下面的情況：用戶無法清晰表達或錯誤地表達其想要搜索的內容，導致系統無法匹配上對應的信息，
為了讓搜索導航更有效地發揮其作用，出現了自動填充，模糊搜索，推薦搜索，搜索歷史，搜索糾正等一系列導航功能，這些功能都是為了想辦法將用戶引導到他可能需要的頁面上。
以類似地圖的樣式來展示網站頁面之間的層級關系，并提供相應的鏈接?？梢曅詮姡阌谟脩粽业较胍男畔?。
考慮到排版布局，樣式美觀，除了用文字本身的含義用作導航外，圖標也經常被用作導航，分為純圖標導航和文字+圖標導航，這里圖標的風格會很大程度上影響這個頁面的視覺效果
將導航文字橫向有序地排列，獨立性強，占用空間較少，可放置的導航條目有限，但這個局限性也可以成為優點，它要求設計師創造出簡短，易于理解，且滿足業務需求的標題。
當內容過多時會選擇在單個導航下放置下拉顯示二級導航，下拉顯示的二級導航可以很長或采用滾動顯示的方式，這種臨時的模態導航可以最大限度地利用到屏幕空間。
很多網頁的橫向頁眉導航會保持滑動時固定的樣式，便于用戶時時找到主頁面的入口。
占用空間較多，通常放置在頁面左邊位置，用不同的底色或分割線將其與主內容分開，內容文字一般采用左對齊，便于閱讀，導航層級過多時會采用點擊展開的樣式，上下滾動的常用交互也讓豎向導航容納的內容更多。
部分豎向導航是可隱藏或收縮的
在擁有復雜信息的網頁中，會將橫向導航，豎向導航等其他樣式混合使用，
面包屑導航是位于頁面頂部或底部的一行內部鏈接，在不同層級的鏈接之間用“>”分隔，可讓訪問者快速返回上一版塊或根網頁。許多面包屑導航都將內容最寬泛的頁面（通常為根網頁）設置為最左邊的首個鏈接，并在右側列出更具體的部分。
占用很少的空間并提供主導航實現不了的深層次定位功能。
面包屑的使用讓網站的結構更加清晰，強化用戶的心理層級模型，并實現跨層級跳躍
分頁顯示的內容數量固定，有時用戶可自定義內容數量，此外頁面上通常有當前頁，任意頁，上一頁，下一頁，首頁，末頁的鏈接。具有定位性，當用戶需要回到之前瀏覽過的某個位置時，可采用分頁的形式
無限滾動希望用戶只注意當前頁的內容且不能快速到達頁面的底部，適用于無法預測用戶何時能夠找到需要的信息的情況。在一些圖片展示，內容推送的網站上設計者不知道用戶想要的內容，同時也要展現網站內容豐富，資源庫深不見底的特質會采用交互上更簡單的無限滾動模式。
一些設計者想要用戶優先注意到的內容，會采用突出的版面設計，通過改變文字圖形的大小，顏色等與其他一般性內容形成對比或使用海報，彈窗等形式試圖引導用戶行為。
根據上面第三和第四點，分別從信息層和表現層給出導航設計的建議
1.信息結構盡可能扁平
多花一些時間去考慮信息體系結構，可根據首頁規劃全局的導航，首頁是用戶在網站中導航的起點，考慮如何讓用戶盡可能方便地從網站上的寬泛內容（首頁）轉到他們所需的更加具體的內容。
2.重視導航的順序
當同一級別的導航數量很多時，順序變的更加重要。根據用戶的認知習慣，開頭和結尾作為關注度（看到的）和保留度最高（剛剛發生的）的地方，其內容更加突出。
3.SEO優化
良好的網站導航結構可以幫助搜索引擎了解哪些是網站站長認為重要的內容，盡量用一些具體的描述詞語而非大而寬泛的詞匯，例如“產品”，“服務”。雖然搜索引擎的搜索結果是在頁面級別提供的，但它也希望了解頁面在網站這個更大層面上的角色。導航中關鍵詞的使用會影響其在搜索引擎中被搜到的質量。
4.創建網站地圖
用于顯示網站結構的一個簡單頁面，通常包含網站頁面的分層列表。如果在網站上查找頁面時遇到問題，用戶可能會訪問此頁面。此外搜索引擎也會訪問此頁面，以便使抓取范圍盡量覆蓋網站的全部頁面。
1.一致性
同一類型導航的視覺表現與交互操作在整個網站頁面中要保持一致，清晰一致的導航可以讓用戶預見每一步操作的結果。
2.清晰性
顏色與大小：文字顏色與背景顏色的對比，標題與內容的字號大小，這些最基本的元素直接影響導航的清晰度
留白與裝飾：與平面設計中原理一樣，留白讓網站頁面布局平衡，張弛有度；裝飾與留白相結合，讓導航表現得更精美，也有助于視覺分割
強調與弱化：有些導航起引導作用需要突出，有些起輔助作用需要弱化，強弱對比結合豐富了視覺層次，并讓導航起到它該起的作用
3.凸顯超鏈接
將可點擊的超鏈接文本與常規文字在樣式和交互上進行區分，常見做法有下劃線，文字顏色，加粗，鼠標懸浮變色。
4.在常規位置放置導航
網頁發展的幾十年讓用戶對網頁產生了一些常識性認識，例如用戶會在進入一個網站時去頁眉或側邊欄尋找主導航，盡量遵循這些常規用法。
5.導航數量不宜過多
無論是全局或局部導航，數目越多用戶處理和記住信息的難度越大，可以通過分組分層來提高信息瀏覽效率
6.側邊欄
側邊欄導航會占據一部分的屏幕空間，將其與主內容部分進行分割有助于用戶，例如用反差較大的背景色形成導航區與內容區
加入導航收縮功能，以便更好地利用屏幕空間，特別是在一些小尺寸屏幕上。
在做完網頁設計后可以根據瀏覽網頁的一般習慣，通過以下幾個方面對導航設計進行簡單審查
問自己以及團隊其他成員以下幾個問題
1.這是什么網站
2.網站有哪些主要內容
3.導航看上去是否像是導航，可點擊的
4.導航的名稱是否會引起歧義
5.現在處在網站的哪個層級
6.如何進退
7.具體的功能是否會在預想的地方出現
8.怎么進行內容搜索
借助工具
9.使用Google Analytics對網站的訪問情況進行回顧并進行一些評估
例如一些頁面的瀏覽量極低于預期或相較于同類頁面瀏覽差距過大，就要考慮是否是指向該頁面的導航出現了問題。
導航的最終目的是簡化獲取信息的過程，具體以何種方式表達還需要取決于業務內容，但總體上要以用戶易接受的方式呈現。用戶若是能在獲取信息的過程中按照設計者所想的方式前進并感受到暢通無阻的快感，導航便是成功的。