產品經理B端設計指南

1、編輯導語：在上一篇文章中，本文作者講到對于表格而言，我們要具備的基礎知識點。在本篇文章中，作者又羅列了大家常見的 10 個表格問題，同 時給出了相應的解決方法，一起來學習吧。首先在確定一個單元格的寬度時，我們需要對所有的字段類型進行最小寬度的設定。通常最小寬度是根據 表格字段 內容寬度的決定，不同的內容寬度也會不盡相同：通過上訴的字段舉例，大家會發(fā)現字段寬度無外乎就是幾類情況，通常也會對其寬度大小有所預判，也因此能夠有所了解，咱們將字段寬度梳理出來后，需要最后落實到文檔中，也就是將字段的寬度進行記錄，在后面開發(fā)實現中會十分有用。如果拿到上面類似需求時，我建議大家不要著急上手做，先試著去分析 “

2、如果我是該產品用戶，真正需要哪些字段，理由是什么？ ”這樣的方式對于你而言 有兩點好處：將需求分析清楚后，我們便可著手去做。在面對數據過多的字段展示時，我們通常都是采取信息層級的方式來讓多個字段合理展示，雖然方法都是 相同，但是在設計形式上，還是有三種不同的方式。當橫向數據過多時，為了避免字段的隱藏，只有拓展縱向空間。無論你是使用疊層、銜接，都是將多個同一維度的數據，進行縱向拓展。比如你需要在一行去展示：發(fā)時間、發(fā)貨地點、發(fā)貨人以及物流信息，如果想讓用戶直接了當的看到所有信息，疊層、銜接都能夠達到目的。雖然形式上比較平鋪直敘，但直接在B 端往往能取得不錯的效果。多層展示讓數據平鋪直敘，主次展示

3、讓數據有了輕重。通常在表格中，一列多條數據必定會有主次之分，然而在B 端的表達方式上也會有較大的區(qū)別。我舉一個實際工作中的例子，在我們自身產品的 OS 系統(tǒng)中，會針對客戶開通產品線的八個產品。對于我們而言，就需要展示客戶名稱、客戶等級、余額、開通產品等20+個字端進行展示，我們便采取了上面三種不同的方式，并且OS端作為小部分銷售用，使用標簽、符號對于系統(tǒng)而言認知成本會變低，按鈕快速點擊，產品就可快速開通，使用會更加合理。 OS 系統(tǒng)：主要目的是針對銷售在與客戶溝通時，需要查看客戶的信息、開通相應的產品，并且在為其推薦產品后能夠進行快速開通。隱藏展示并不屬于上面的兩種形式，主要是將大量的非重點信

4、息進行折疊收起，提供一個較深的細節(jié)入口來隱藏掉信息，常見有下拉、浮層、提示框、彈窗這種方式雖然用數據更為簡潔，但是會有一定的認知成本，因此使用時需要多家注意，比如在網頁端的淘寶訂單中，也使用同樣的方法將訂單的物流信息進行收納，使信息更加整潔。在 B 端產品實際工作中，對于很多控件的問題，我們可以從開發(fā)實現的角度去尋找答案。比如我們想要確定表格整體的寬度，就可以從 HTML的table標簽中去尋 找，而寬度其實就是table標簽的width屬性，你可以在w3school這類基礎前端 教程中找答案，有任何疑問都可以嘗試在上面進行搜索研究。我們回到表格，其實表格寬度width 是包含有 Pixels

5、、 %兩種不同的屬性值：同時可以明確告訴大家，兩種方式是可以混合使用，也就是我們常說的表格固定寬度與百分比寬度混用。當表格最小寬度小于字段總和寬度，根據設計方式的不同，可采取不同的解決辦法。這里我再解釋一下為何避免橫向滾動：對于所有的鼠標用戶而言，橫向滾動都是極為痛苦的，因為正常鼠標橫向滾動是需要用戶按住 Shift + 滾動 才會使表格進行滾動。但在我接受到的眾多用戶吐槽中，很多用戶只會選擇使用鼠標對橫向滾動條進行拖拽，因此橫向滾動條不能因此，同時很多用戶也不知如何正確查看橫向的內容，所以如果你做的不是一個aPaaS平臺，盡可能減少用戶橫向滾動的場景。當表格最小寬度大于字段總和寬度，便可采取

6、百分比的形式。這樣表格的寬度可以跟隨屏幕寬度進行變化。這里設計師可以進行偷懶，因為在現有較為成熟的框架中，對于表格寬度大于字段寬度都做了等比例的拉伸，因此在這里無需過于糾結。當表格寬度需要有預設固定寬度時，你便可采取百分比+ 固定寬度的形式，這種方式可以解決表格信息隱藏過多。因為在表格中，不是所有的字段都需要寬度進行自適應，比如在一些操作、狀態(tài)等字段中，本身系統(tǒng)就能過對其寬度進行預知，為了減少對于其他字段的隱藏，便可采取固定寬度。這種方式也可以解決表格寬度不夠所帶來的困擾，固定寬度通常為操作、狀態(tài)等能夠預知其長度的寬度類型，在設定上盡量在系統(tǒng)中的寬度保持一致，固定寬度的使用有好有壞，常見于表格

7、中尾部的操作。如出現在表格中部，在較長的頁面中進行展示也會帶來許多較差的展示形式。表格最小寬度：表格主要適配到的最小寬度，這一步驟通常的設計系統(tǒng)的初期就要完成，一方面可根據自己項目目前情況，按照導航寬度等固定尺寸確定最小的表格寬度，這樣在處理最小尺寸時，可以有一個明確的邊界，同時能與開發(fā)同學進行理解溝通。很顯然，它們的使用意義并不相同想要了解兩者的區(qū)別可以先明確兩者的功能：復選框(check box)：選擇表格當前及其以下的數據，是數據選擇的一種表現方式。樹形結構收折箭頭：主要在樹形表格中，起到展開數據與收起數據的功能，為了方便父與子的數據都能夠在表格中得以呈現：(不知道樹形表格可以看)但在實

8、際情況中，會出現同時存在兩種方案，我在一個樹形結構中，既需要對結構中子數據的勾選。同時又需要讓用戶對單個條件中的數據進行勾選，這時就需要顯一隱一，對于用戶高頻使用的的一種方式，進行常駐展示，同時在 Hover上去后，進行展示，這樣可以避免兩個復選框帶來的認知迷茫。很多設計師都缺少對小屏幕的處理方式，那么小屏幕的尺寸是多少，最小多少算小屏幕，這是我們首先需要明確的。我們分析一下市面上共有共有多少小屏幕尺寸，數據來自百度流量研究院 2020年 10月份的數據。如果我們把1920 x 1080以下的分辨率都定義為小屏，則有39.55%都是小屏幕用戶。而針對不同的小屏，我們首先需要確定分辨率的下限，這

9、里一般建議大家可以根據用戶自身的使用場景去分析，比如針對銷售的場景，會有許多外出上門拜訪的銷售，這時候就必須考慮到筆記本的小屏幕用戶，一般做到 1440 900兼容、1280X720能用即可。1440900兼容，通常會針對主要頁面去設計，如果產品中，該分辨率下的用戶較多，可提出針對該分辨率情況進行單獨適配，簡單優(yōu)化頁面布局來兼容空間不足的問題。128020能用，我說說我實際工作的思路，我們可以通過前端代碼屏幕縮放，將小分辨率的屏幕縮小，因而能看見更多的內容。通常做法是將1440px 以下的尺寸，進行Zoom 的 90%的縮放，這樣能夠在電腦上看到更完整的信息，但同時也會有相應的缺點，由于整體縮

10、放，需要檢查前端代碼對于整體縮放有沒有進行適配，需要對頁面進行再此走查，同時網站內容都會相應縮小，算是一個迫不得已的方式。在表格中，操作的展示方式首先分為以下幾種：將所有操作進行整齊排列，一般是一個操作對應一列，當有操作缺失時，展示為空，這種方式能夠讓用戶直接了解到操作的缺失，但反復的出現會造成表格視覺上的冗余，適合列數較少的表格使用。將所有操作按照一定的預設排列順序進行平鋪，這種方式能夠適應 B 端的大多數場景，將操作都簡單平鋪出來雖然看上去簡單粗暴，但是在實際工作中，也是一種不錯的處理方式。將所有的操作按鈕收起到 “更多 ” 里面，并且用戶點擊后展示操作選項。這種情況常見于當前系統(tǒng)的操作按

11、鈕不可控或重要程度較低時，隱藏能夠盡可能讓頁面進行統(tǒng)一，達到高效整潔的目的。與此同時，隱藏式也會有很多問題，隱藏操作后用戶不能立刻知道我能有哪些操作，對于一些高頻操作而言便是一個噩夢。因此采用隱藏式需要我們對功能上進行相應的取舍，才能滿足目前對于設計上的統(tǒng)一。將所有的操作進行隱藏，當用戶鼠標懸停時進行展開所有操作。這種方式能夠最大程度上滿足用戶快速查看與編輯的需求，但是在實際使用中，用戶的初次使用門檻較高，需要有一定的學習成本。將主要的操作進行展示，次要的操作進行隱藏。這種方式能夠盡可能滿足業(yè)務上對于高頻操作時的需求，同時在設計上，能夠將多余的操作進行隱藏，使得設計出的頁面能夠更加統(tǒng)一有效。表

12、格中用戶的操作也會有多選的存在，因此也需要你去分別到底的用戶單挑數據操作的場景多還是用戶對于多條數據的場景多，需要有所分別。如果是在多選場景較為多時，應首要注意多選時的操作優(yōu)化，可犧牲單條數據所需要應對的操作。上面六種辦法，你可以根據你的實際情況進行對應的處理方式，具體可以看我的視頻講解這涉及到規(guī)范究竟應該如何去表達，其實每一位設計師對于規(guī)范的做法也不盡相同，但是要保證你做的規(guī)范與前端之間，能夠達成相同的默契，這樣對于我們而言，才有規(guī)范的真正價值，這里我分享一下我是如何給交代一個表格。首先，我們需要交付的需求一共幾個：通常是一份Excel 表格，里面記錄了系統(tǒng)中所有字段的常規(guī)寬度，前端可以根據

13、寬度情況進行百分比的縮放，當然你也可以標注在設計稿中，方便前端進行開發(fā)，避免在文檔之間反復橫跳。設計稿本身只需要展示一些簡單的邏輯，盡可能的考慮清楚不同角色、不同狀態(tài)下，你的設計稿所要呈現出的邏輯，方便在設計評審的與大家進行探討；同時可以出一個簡單的調研、分析的文檔，方便大家提前閱讀，更能清晰的明確業(yè)務、功能上的需求點。因為在設計稿中，有很多需要文字與前端進行溝通的地方，比如這里的交互說明、邏輯表述等等，我通常會在設計稿的下方用單獨標注處設計所需要注意的點，同時給出相應的邏輯方便前端進行理解， 同時對于其他同事接手你的工作時，也有更多的幫助。由于國內的使用場景與國外有很大的不同，也就造成國內的

14、很多產品對于移動端都格外的重視，因此本身表格就過于復雜，移植到移動端就會存在大量的問題，要想真正了解其背后的原理，我們先了解一下桌面端與移動端的布局思路。先普及一個知識點，什么是響應式布局、什么是自適應布局。響應式布局：是指網頁（一套前端代碼）同時能兼容多個終端，根據每個終端分辨率大小自動調整尺寸。我舉個例子，響應式布局就是將所有元素進行變形、隱藏，但是對于元素的布局等并沒有實質變化，因此響應式大多出現在官網的場景中，這樣的適配更輕量簡單，不會有太多的困擾，比如常見的：飛書、神策、Eagle、藍湖的官網都是采取響應式的方式進行開發(fā)。對于設計而言，響應式一般是先完成對桌面端的設計后再考慮對于移動

15、端的適配，是一個元素由多到少的設計過程。自適應布局：是指網頁（多套前端代碼）能夠同時滿足多個分辨率的終端，并且多個終端之間布局差異較大。舉個例子，公司需要設計一個桌面端、Pad端、移動端的三端產品，而且每一個端的布局方式都有著截然不同的思路，而需要滿足這樣的布局場景的最好的辦法就是自適應布局，通過判斷:分辨率、設備ID: ，來進行布局的修改，比如語雀都是采取自適應的方式。了解完響應式與自適應后，我門先看看移動端表格最具代表性的 Excel 文檔產品是如何適配表格，目前調研了 石墨文檔 騰訊文檔 飛書這五大產品。對于傳統(tǒng)類文檔產品而言，表格要做到的就是能夠滿足用戶的預期。雖然在整體設計上幾個產品

16、都及其類似，但是在細節(jié)的處理上，各個產品卻不盡相 同。初始大?。涸趩卧癯跏即笮≈?，明顯感受Office 的初始單元格大小最小，我猜測可能與Office 通常承載的數據量過大有關，但對于國內的其他文檔類型產品而言，在初始大小上，顯然是讓用戶更易讀每一個單元格內的內容。信息錄入：在信息錄入的場景下，騰訊文檔會提供錄入狀態(tài)的放大，這樣錄入體驗明顯更加友好，具體細節(jié)如下圖。值得一提的是，在所有新建場景中，只有WPS在我新建完成表格過后，便立刻彈起輸入框，讓我對需要新建表格的內容進行輸入，顯然這樣的體驗會更 加連貫。但在 B 端實際工作中，處理移動端的交互方式通常會采取一下四種模式：保留表格現有的表現

17、方式，將表格直接展示出來。看起像是并沒有做任何適配，但在移動端中，這也不失為一種合理的做法。因為在頗具代表性的文檔產品中，也同樣如此，而且表格中的操作行為已經深入人心，他們只需要根據自身對于表格的認知，在移動端做出相應的判斷即可，不需要太多思考，但當直接展示遇到大量數據時，這樣處理還是會有點捉襟見肘。由于直接展示相對來說閱讀體驗并不友好，便在此基礎上進行優(yōu)化產生了凍結跳投，將表頭與第一列（通常第一列數據為關鍵數據）的數據進行固定，讓直接展示的數據能夠形成對應的關系，滿足用戶閱讀表格時的基本需求。將表格中的數據進行視圖上的切換，形成 “標題 + 數據 ” 這樣一一對應的關系。這樣處理的方式，可以

18、直接展示表格中的數據，讓移動端的表格像一行行表單一樣。但是直接展示List 在國內的實際場景中使用比較少見，對于較少的數據有比較好的效果。卡片模式主要是將表格中的一些關鍵字段在通過對應的關系實現一個卡片展示一行數據，用戶想要了解數據全貌，可以點擊卡片，進行數據全貌的查看分析，這類做法也是國內移動端常見的做法：在傳統(tǒng)的 Excel 表格中，快捷編輯是最常用的一個狀態(tài)，當用戶觸發(fā)去編輯表格中的數據，便可實現在表格內的編輯操作，這一交互行為在B 端的表格場景中也得以保留。但設計中的細節(jié)還有很多需要直接注意的地方。首先，表格的快捷編輯分為兩個步驟，進入編輯狀態(tài)以及提交編輯數據，因此在這兩種狀態(tài)下，我們都需要設計不同的方式：雙擊觸發(fā)主要還原Excel 用戶操作的習慣，用戶雙擊單元格即可實現編輯單元格內數據的操作，看似沒有問題但是在實際工作中這類方式反而并不常見，究其原因共有兩點：按鈕觸發(fā)在我看到的眾多的 B 端軟件中是最為常見的，通過表格右側的按鈕，提示用戶該數據是可被編輯狀態(tài)。同時當用戶點擊編輯按鈕后，直接進行 編輯。按鈕觸