2024-6-21 濤濤
做設(shè)計的時候，尤其是B端頁面，我們一般按常用的場景去設(shè)計，但是內(nèi)容過多的時候如何在頁面中更好的顯示呢？
我們知道B端產(chǎn)品設(shè)計場景更復(fù)雜，內(nèi)容更加不可控，再加上電腦屏幕大小適配，頁面寬度可自由拉伸，種種因素都要我們更加仔細的考慮頁面的各種極限值情況，如何寫全面設(shè)計規(guī)約是難點。相信在設(shè)計評審會上開發(fā)和測試最常問到的一個問題也是：這里內(nèi)容過多怎么展示？雖然我們在設(shè)計的時候是按照80%的場景去考慮，但是剩下20%的極限場景也需要我們給出設(shè)計規(guī)則。我根據(jù)工作中遇到的內(nèi)容過多的情況整理了以下這么多，當然解決辦法也可能有更好的方式，都歡迎大家補充～～
【目錄】
標題因為頁面、模塊等寬度限制，標題文字超長的極限情況如何顯示必然是需要考慮的。
具體設(shè)計和寫設(shè)計規(guī)則時要考慮場景、功能、頁面布局等等情況再選擇處理方式。
1)只有標題
a打點:
注意要根據(jù)頁面布局結(jié)構(gòu)，給出標題最大寬度，然后標題文字過長打點，hover出tips；優(yōu)點是保持頁面簡潔、方便對齊；缺點是無法直觀看到全部內(nèi)容;
b折行:
給出標題最大寬度，然后標題文字過長則折行顯示；優(yōu)點是能夠直觀顯示出全部內(nèi)容，缺點是內(nèi)容太多的話視覺不友好：
c先折行再打點:
給出標題最大寬度，然后標題文字過長則折行顯示，折超過(比如2行)再打點。適用于大部分場景下最多2行就能顯示全，而且文字內(nèi)容對用戶非常重要
2）有標題還有其他說明文字時
當分組標題和說明文字結(jié)合時，一般要優(yōu)先顯示標題區(qū)域；當?shù)竭_說明文字最小間距（比如40px）時，標題打點，說明文字顯示不下也打點；hover時出tips
3）表單的標題
標題文字較多時一般換行顯示，最多顯示（比如2）行，更多打點顯示，鼠標經(jīng)過顯示tips；換行后算整體高度，距離下面的表單間距保持一致；
4）打點的規(guī)則
也就是從哪里開始打點，也是需要根據(jù)場景考慮的：
a.尾部打點，也是最常用的
b.中間打點，比如sketch畫板的標題展示不全時是從中間開始打點的；
c.特定位置打點，比如標題里人名字過多時，沒辦法展示全，但是后邊的【等120人打標簽】又是極其重要的信息，這時候就需要給定人名稱一個最大展示的寬度，超過最大寬度就在最后一個人名處打點顯示；
文本框需要考慮單行文本/多行文本、激活態(tài)/展示態(tài)下文字過多如何顯示
1）單行文本
a有字數(shù)限制
很多場景下，輸入框都不是無限輸入的，需要產(chǎn)品給出最大范圍，這時主要考慮校驗報錯問題:
在搜索框，往往會設(shè)置最大字數(shù)，超過則會截斷:
b無字數(shù)限制
輸入狀態(tài)時，文字過多，光標定位在輸入框末尾，可無限輸入，輸入框頭部內(nèi)容向前隱藏/截斷：
展示態(tài)時，內(nèi)容從頭部開始顯示，輸入框末尾打點，或者漸隱，hover時可以選擇出不出tips：
輸入完成后的一些交互：
還有一種處理方式就是，超過字數(shù)限制后直接截斷，不讓輸入。
2）多行文本
a有字數(shù)限制
b無字數(shù)限制
用按鈕，展開收起內(nèi)容，展開收起可以常駐，也可以設(shè)置在鼠標hover時在顯示出來。
寬度自適應(yīng)，文字自動換行，設(shè)置最大寬度；設(shè)置最大高度，內(nèi)容過多則出滾動條；還要給出滾動區(qū)域，比如標題+內(nèi)容的區(qū)域高度；
tips寬高根據(jù)文字內(nèi)容自適應(yīng)，設(shè)置最大寬度；文字過長時自動換行，設(shè)置最大高度，超過最大高一般多于的數(shù)據(jù)不展示，因為tips都是比較輕的提示；
3、警告提示寬度自適應(yīng)，文字自動換行。設(shè)置容器最大高度，標題+內(nèi)容數(shù)據(jù)過多，則產(chǎn)生滾動條
容器寬高自適應(yīng)，給出最大寬高，大于最高高度時出現(xiàn)滾動條，反饋信息建議精簡到一至兩行，icon位置固定不變。
彈層寬/高度可以給出定值，也可設(shè)置占視窗的百分比，設(shè)置占視窗的百分比，為了避免在窗口放大和縮小時彈層無限大或者無限小，一般就要同時設(shè)置最大最小寬度定值。比如設(shè)置彈層最大高度為頁面高度90% ，也可以設(shè)置100%，即高度全屏的彈層；高度超過頁面高度 90%時,則顯示滾動條，最小高300px;寬度在600px到1000px之間自適應(yīng)。
不管是什么彈層，其實都是承載內(nèi)容的容器，內(nèi)容很多時，容器不能隨內(nèi)容無限大就需要設(shè)置最大最小值或者百分比。
三、選項過多
當選項較少，空間足夠時，可以把選項平鋪展示，一方面能讓用戶直觀看到所有選項，另一方面也能減少用戶操作步驟；可以設(shè)置單選、復(fù)選
當選項很多，空間不夠時，需要用彈層把選項收起以節(jié)省頁面空間；
1）單選下拉選擇器
當下拉內(nèi)容還很多，而且需要分類，那么就需要：分組下拉選擇器
2）復(fù)選下拉選擇器
a.個數(shù)過多
復(fù)選下拉框內(nèi)選中項【個數(shù)】過多時，需要給出下拉框的最大高度，超過最大高度則折行，出滾動條：
b.字數(shù)過多
選中項【內(nèi)容】過多，需要給出選中項文字一個最大寬度，超過打點hover時顯示tips
c.彈層規(guī)則
【下拉彈層內(nèi)】根據(jù)下拉選項內(nèi)容自適應(yīng)撐開，還需要給出彈層的最大高度為（比如290px），內(nèi)容過多產(chǎn)生滾動條；
d.加入搜索功能
如果下拉彈層內(nèi)，選項非常多，那么用戶應(yīng)用起來比較費勁，雖然有滾動條能展示全部選項，但是從這么多選項中選出某個選項就比較難了。這時就可以在彈層上加【搜索框】解決，方便用戶搜索；也可以在下拉選擇框上直接設(shè)置檢索功能；
四、按鈕/標簽過多
最常用的解決方法就是用【更多按鈕】收起更多不常用的按鈕或標簽；
比如：
還可以用【左右箭頭】的方式進行切換：
預(yù)先判斷用戶的操作，在用戶進行特定操作后再出現(xiàn)按鈕；漸進式設(shè)計是目前比較流行的，也是用戶體驗比較好的。
1）hover時再出現(xiàn)要操作的按鈕：
2）勾選復(fù)選框后出現(xiàn)按鈕：
如下圖，選中選項后，篩選自動收起為一行同時操作區(qū)域出現(xiàn)覆蓋篩選區(qū)，表格隨著篩選移動；
取消所有勾選項或是點擊關(guān)閉按鈕，操作區(qū)收起恢復(fù)成篩選區(qū)，篩選恢復(fù)成勾選前的狀態(tài)；
還有teambition的文件庫，復(fù)選框勾選前：
復(fù)選框 勾選后出現(xiàn)行操作按鈕，按鈕覆蓋標題的位置：
3）根據(jù)編輯態(tài)和展示態(tài)進行區(qū)分：
展示態(tài)下頁面比較整潔，不顯示多余的按鈕：
編輯內(nèi)容后，出現(xiàn)操作按鈕：
輸入完成后的展示依然比較整潔：
五、表格內(nèi)容過多
B端產(chǎn)品的頁面常常會用到表格來承載一條條數(shù)據(jù)/記錄，那最好的情況就是表格列數(shù)較少，在最常見尺寸的屏幕下就能夠全部展示：
但是，往往表格字段比較多，列數(shù)多會出滾動條，行數(shù)多出分頁；
出現(xiàn)滾動條時為了關(guān)鍵的信息能夠一直顯示，常常會鎖定首列或者操作列：
1、左側(cè)列鎖定:
鎖定后，滾動數(shù)據(jù)列表內(nèi)的滾動條左側(cè)列首位置不動，只滾動右側(cè)的數(shù)據(jù)，向左滾動的數(shù)據(jù)會被列首區(qū)域遮擋；
2、右側(cè)列鎖定:
滾動數(shù)據(jù)列表內(nèi)的滾動條右側(cè)列尾位置不動，只滾動左的數(shù)據(jù)，向右滾動的數(shù)據(jù)會被列尾區(qū)域遮擋；
3、橫向滾動條
數(shù)據(jù)寬度超過屏幕寬度，則顯示橫向滾動條
4、縱向滾動條
數(shù)據(jù)高度超過屏幕高度，則顯示縱向滾動條；滾動范圍為表頭與分頁之間的內(nèi)容區(qū)域；
六、功能過多
1、用導(dǎo)航劃分
頁面結(jié)構(gòu)層面上信息過多一般會用一級導(dǎo)航，二級導(dǎo)航的形式劃分內(nèi)容
頁面內(nèi)容過多還常常用頁簽來收納；
當頁面層級較多時需要加面包屑引導(dǎo)用戶如何返回，告知用戶的位置；面包屑不僅能讓用戶不迷路，還可以用來快速定位內(nèi)容，便于用戶快捷的選擇；
4、抽屜收納
抽屜可以收納很多內(nèi)容和操作同時保持頁面整潔。
藍藍設(shè)計(m.ocunn.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司
銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
藍藍設(shè)計的小編 http://m.ocunn.cn