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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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