中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：作為數(shù)據(jù)展示的一個重要形式，合理的表格設(shè)計可以幫助用戶更清晰快捷地獲取信息，進而提升用戶體驗。那么，我們應(yīng)當(dāng)如何根據(jù)業(yè)務(wù)需求對表格進行合理設(shè)計？本篇文章里，作者針對表格列寬的設(shè)置問題進行了分析探討，一起來看一下。

表格是展現(xiàn)行列數(shù)據(jù)較為清晰、高效的形式。對于表格列寬的設(shè)置，是關(guān)系到表格是否清晰、高效的一個重要方面。對于表格應(yīng)用場景多且復(fù)雜的B端產(chǎn)品來說，表格是數(shù)據(jù)的主要展示形式之一，良好的表格列寬設(shè)置對提升產(chǎn)品體驗非常重要。

一、先導(dǎo)性問題

在討論表格列寬設(shè)置之前，需要先明確幾個先導(dǎo)性問題。

1. 列數(shù)量

應(yīng)盡可能將列數(shù)最小化?？筛鶕?jù)實際業(yè)務(wù)需求，在表格中僅展示對用戶決策有重要意義的字段，將更多詳細字段納入「詳情」頁。

如果業(yè)務(wù)需求具有特殊性，列數(shù)難以精簡時，則可以考慮在表格內(nèi)使用橫向滾動條。

不要通過收縮列寬度來增加更多的列數(shù)量。

2. 列的內(nèi)邊距

合適的內(nèi)邊距將使表格列寬設(shè)置效果更優(yōu)。各列的內(nèi)邊距應(yīng)適中且統(tǒng)一，太大會造成表格橫向空間的浪費，太小會造成內(nèi)容擁擠，缺乏呼吸感。

3. 列內(nèi)字符數(shù)

列內(nèi)字符數(shù)對于表格的列寬設(shè)置具有積極的參考作用。表格中所展示的結(jié)構(gòu)化數(shù)據(jù)，通常是嚴格地遵循數(shù)據(jù)格式與長度規(guī)范的。因此，對于列內(nèi)的字符數(shù)，是可以結(jié)合實際的業(yè)務(wù)數(shù)據(jù)進行預(yù)估的。

對每一列字符數(shù)的預(yù)估，通常有以下兩種情況：

1. 字符數(shù)的確定性較高，能夠準(zhǔn)確預(yù)判出字符數(shù)；
2. 字符數(shù)的確定性較低，僅能夠預(yù)估出一個寬泛的范圍。

4. 表格的寬度

表格的寬度通常有兩種設(shè)置方式，一是固定寬度，二是跟隨瀏覽器窗口自適應(yīng)。這兩種表格寬度的設(shè)置方式，將會對列寬設(shè)置產(chǎn)生不同的影響。另外需注意的是，當(dāng)總列寬小于表格寬度時，最后一列的右側(cè)會出現(xiàn)空白列；當(dāng)總列寬大于表格寬度時，則會出現(xiàn)橫向滾動條。

二、列寬設(shè)置方式

表格列寬設(shè)置通常有三種方式，

1. 不特意進行設(shè)置，列寬根據(jù)內(nèi)容自適應(yīng)；
2. 列寬以百分比設(shè)置；
3. 列寬以固定的像素單位設(shè)置。

1. 列寬自適應(yīng)

表格列寬的自適應(yīng)，通常是根據(jù)各列可見的最長的字符數(shù)，按比例進行分配的（具體需看底層框架的實現(xiàn)情況）。在列寬自適應(yīng)時，總列寬不會小于表格寬度，通常正好等于表格寬。只有當(dāng)大部分或所有列收縮至極限時，才可能出現(xiàn)總列寬大于表格寬度的情況，才會出現(xiàn)橫向滾動條。

1）優(yōu)點

• 實現(xiàn)簡單，不需要對每一列的列寬進行設(shè)置。
• 靈活，可自動根據(jù)內(nèi)容進行調(diào)節(jié)。

2）缺點

• 表格的顯示情況具有較大的不確定性，可能會出現(xiàn)某些列過度收縮的情況。
• 在有分頁時，每一頁表格的列寬可能不一致，會出現(xiàn)視覺上的跳躍。

3）適合場景

• 表格使用場景較少且簡單。
• 相對于表格寬度來說，列數(shù)不多，無需使用橫向滾動條。

2. 列寬以百分比設(shè)置

表格列寬以百分比設(shè)置時，可結(jié)合實際的業(yè)務(wù)數(shù)據(jù)對字符數(shù)進行預(yù)估，據(jù)此給出各列所占百分比。無論表格寬度為固定值，還是跟隨瀏覽器窗口自適應(yīng)，都需保證所有列的百分比之和大于等于100%。

1）最小列寬

將表格列寬設(shè)置為最小寬度，是一種特殊設(shè)置方式，這能夠避免出現(xiàn)列過度收縮的情況。在實際列寬大于最小列寬時，列寬將以百分比的方式進行分配。

例如，當(dāng) Column 1 的最小寬度為100px，Column 2 的最小寬度為200px，Column 3 的最小寬度為300px，則當(dāng)各列的實際列寬大于最小列寬時，三列的列寬比將按照1:2:3進行分配，即 Column 1 占 17%，Column 2 占 33%，Column 3 占 50%。

2）優(yōu)點

• 表格寬度跟隨瀏覽器窗口自適應(yīng)時，列寬能夠自動調(diào)整。
• 相比于列寬自適應(yīng)，能夠避免出現(xiàn)列寬被過度壓縮的情況。

3）缺點

表格寬度跟隨瀏覽器窗口自適應(yīng)時，可能會出現(xiàn)某些列有橫向空間浪費，某些列卻橫向空間不足。

4）適合場景

表格使用場景較少且簡單，無需精細設(shè)置列寬度。

3. 列寬以固定的像素單位設(shè)置

列寬以固定的像素單位設(shè)置時，表格的顯示情況，是完全可以預(yù)知的。各列寬可根據(jù)實際的業(yè)務(wù)數(shù)據(jù)對字符數(shù)進行預(yù)估。列寬需根據(jù)表格寬度設(shè)置方式來進行設(shè)置：

當(dāng)表格寬度為固定值時，為每一列設(shè)置合適的固定寬度值即可，但需保證總列寬大于等于表格寬度。

列寬度取值建議：為字符數(shù)的確定性較高的列，設(shè)置剛剛合適的列寬度；為字符數(shù)的確定性較低的列，根據(jù)字符數(shù)范圍取一個較富余的列寬度。

當(dāng)表格寬度跟隨瀏覽器窗口自適應(yīng)時，需為其中至少一列設(shè)置最小寬度，讓其跟隨瀏覽器窗口自適應(yīng)，以保證總列寬始終不小于表格寬度；其余各列設(shè)置合適的固定寬度值。

列寬度取值建議：為字符數(shù)的確定性較高的列，設(shè)置剛剛合適的列寬度；為字符數(shù)的確定性較低的列設(shè)置最小寬度，讓其跟隨瀏覽器窗口自適應(yīng)。

以上列寬取值建議為一種簡單便捷的方式，在實際應(yīng)用時，可根據(jù)情況適當(dāng)調(diào)整，以取得更和諧的顯示效果。如在有橫向空間盈余的情況下，為各列適當(dāng)增加留白空間。

1）優(yōu)點

• 完全可控，可避免復(fù)雜場景中難以預(yù)料的極端顯示效果。
• 可結(jié)合橫向滾動條，優(yōu)化表格列數(shù)過多時的顯示情況。

2）缺點

• 需為每一列預(yù)估字符數(shù)，略費工時。

3）適合場景

• 表格使用場景較多且復(fù)雜。
• 相對于表格寬度來說，列數(shù)較多。

三、單元格內(nèi)字符溢出處理

表格單元格內(nèi)的字符溢出處理，是表格列寬設(shè)置過程中必將面臨的一個問題。在表格場景中，比較常見的字符溢出處理方式是換行和截斷。

鑒于用戶通常對表格數(shù)據(jù)具有快速地掃視與對比的需求，建議優(yōu)先使用換行的溢出處理方式。但當(dāng)換行超過2行時，會占用過多高度，表格將損失易讀性。因此，建議在換行超過2行時截斷，鼠標(biāo)懸停時使用tooltip顯示完整內(nèi)容。

對于核心字段列，以及重復(fù)率較高的字段列，應(yīng)保證其在默認狀態(tài)下的識別度，避免在截斷后，因暴露的字符數(shù)過少或重復(fù)度極高而失去識別性。

四、手動調(diào)節(jié)列寬

手動調(diào)節(jié)列寬擴展了表格的適應(yīng)性，以符合更復(fù)雜多變的場景。手動調(diào)整某一列的寬度后，其余列寬度的適應(yīng)性取決于列寬的設(shè)置方式，具體如下：

• 列寬以自適應(yīng)方式設(shè)置時，某一列的寬度被手動調(diào)節(jié)后，會導(dǎo)致其余各列的寬度按比例自動進行調(diào)整。
• 列寬以百分比設(shè)置時，某一列的寬度被手動調(diào)節(jié)后，其余列的寬度不受影響。調(diào)整后，如果列寬百分比之和大于100%，則出現(xiàn)橫向滾動條；如果列寬百分比之和小于100%，則在最后一列的右側(cè)會出現(xiàn)空白列。
• 列寬以固定的像素單位設(shè)置時，某一列的寬度被手動調(diào)節(jié)后，其余列的寬度不受影響。調(diào)整后，如果列寬之和大于表格寬度，則出現(xiàn)橫向滾動條；如果列寬之和小于表格寬度，則在最后一列的右側(cè)會出現(xiàn)空白列。

1）最小列寬

如果列寬設(shè)置為最小列寬，手動調(diào)節(jié)列寬時仍可將列寬縮小至最小列寬以下。但當(dāng)其它列在手動調(diào)整時，設(shè)置了最小列寬的列，只能被壓縮至最小列寬。

2）注意事項

• 對于列寬以百分比設(shè)置和以固定像素單位設(shè)置時，為了避免出現(xiàn)空白列的情況，應(yīng)選擇一列為其設(shè)置最小寬度。
• 對于具有手動調(diào)節(jié)列寬功能的表格，建議使用截斷的溢出處理方式，不要換行，這在用戶手動調(diào)節(jié)列寬時，能避免出現(xiàn)表格因行高變化而出現(xiàn)的上下跳動。

3）適合場景

表格使用場景較多且復(fù)雜。

五、結(jié)語

從提升開發(fā)效率的角度來說，表格列寬的設(shè)置方式應(yīng)有一個全局統(tǒng)一的設(shè)置方式。從適應(yīng)性的廣泛度來說，列寬以固定的像素單位設(shè)置的方式更適合表格應(yīng)用場景較多的B端產(chǎn)品。

本文由@xulu 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議