產(chǎn)品經(jīng)理B端設計指南

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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