我們知道B端產品設計場景更復雜，內容更加不可控，再加上電腦屏幕大小適配，頁面寬度可自由拉伸，種種因素都要我們更加仔細的考慮頁面的各種極限值情況，如何寫全面設計規約是難點。相信在設計評審會上開發和測試最常問到的一個問題也是：這里內容過多怎么展示？雖然我們在設計的時候是按照80%的場景去考慮，但是剩下20%的極限場景也需要我們給出設計規則。我根據工作中遇到的內容過多的情況整理了以下這么多，當然解決辦法也可能有更好的方式，都歡迎大家補充～～

 

【目錄】

一、文字過多

 

1、標題文字過多

       標題因為頁面、模塊等寬度限制，標題文字超長的極限情況如何顯示必然是需要考慮的。

       具體設計和寫設計規則時要考慮場景、功能、頁面布局等等情況再選擇處理方式。

 

1)只有標題

   a打點:

   注意要根據頁面布局結構，給出標題最大寬度，然后標題文字過長打點，hover出tips；優點是保持頁面簡潔、方便對齊；缺點是無法直觀看到全部內容;

   b折行:

   給出標題最大寬度，然后標題文字過長則折行顯示；優點是能夠直觀顯示出全部內容，缺點是內容太多的話視覺不友好：

   c先折行再打點:

   給出標題最大寬度，然后標題文字過長則折行顯示，折超過(比如2行)再打點。適用于大部分場景下最多2行就能顯示全，而且文字內容對用戶非常重要

2）有標題還有其他說明文字時

     當分組標題和說明文字結合時，一般要優先顯示標題區域；當到達說明文字最小間距（比如40px）時，標題打點，說明文字顯示不下也打點；hover時出tips

3）表單的標題

     標題文字較多時一般換行顯示，最多顯示（比如2）行，更多打點顯示，鼠標經過顯示tips；換行后算整體高度，距離下面的表單間距保持一致；

4）打點的規則

    也就是從哪里開始打點，也是需要根據場景考慮的：

   a.尾部打點，也是最常用的

   b.中間打點，比如sketch畫板的標題展示不全時是從中間開始打點的；

  c.特定位置打點，比如標題里人名字過多時，沒辦法展示全，但是后邊的【等120人打標簽】又是極其重要的信息，這時候就需要給定人名稱一個最大展示的寬度，超過最大寬度就在最后一個人名處打點顯示；

2.文本框內文字過多

   文本框需要考慮單行文本/多行文本、激活態/展示態下文字過多如何顯示

 

1）單行文本

   a有字數限制

   很多場景下，輸入框都不是無限輸入的，需要產品給出最大范圍，這時主要考慮校驗報錯問題:

   在搜索框，往往會設置最大字數，超過則會截斷:

   b無字數限制

   輸入狀態時，文字過多，光標定位在輸入框末尾，可無限輸入，輸入框頭部內容向前隱藏/截斷：

   展示態時，內容從頭部開始顯示，輸入框末尾打點，或者漸隱，hover時可以選擇出不出tips：

   輸入完成后的一些交互：

  還有一種處理方式就是，超過字數限制后直接截斷，不讓輸入。

 

2）多行文本

   a有字數限制

   b無字數限制

 

 

3.介紹/說明文字過多

用按鈕，展開收起內容，展開收起可以常駐，也可以設置在鼠標hover時在顯示出來。

 

二、彈層內容過多

1、確認對話框

寬度自適應，文字自動換行，設置最大寬度；設置最大高度，內容過多則出滾動條；還要給出滾動區域，比如標題+內容的區域高度；

2、tips提示

tips寬高根據文字內容自適應，設置最大寬度；文字過長時自動換行，設置最大高度，超過最大高一般多于的數據不展示，因為tips都是比較輕的提示；

3、警告提示

寬度自適應，文字自動換行。設置容器最大高度，標題+內容數據過多，則產生滾動條

 

4、全局提示

容器寬高自適應，給出最大寬高，大于最高高度時出現滾動條，反饋信息建議精簡到一至兩行，icon位置固定不變。

 

5、模式彈層

彈層寬/高度可以給出定值，也可設置占視窗的百分比，設置占視窗的百分比，為了避免在窗口放大和縮小時彈層無限大或者無限小，一般就要同時設置最大最小寬度定值。比如設置彈層最大高度為頁面高度90% ，也可以設置100%，即高度全屏的彈層；高度超過頁面高度 90%時,則顯示滾動條，最小高300px;寬度在600px到1000px之間自適應。

不管是什么彈層，其實都是承載內容的容器，內容很多時，容器不能隨內容無限大就需要設置最大最小值或者百分比。

 

 

三、選項過多

 

1、選項較少

當選項較少，空間足夠時，可以把選項平鋪展示，一方面能讓用戶直觀看到所有選項，另一方面也能減少用戶操作步驟；可以設置單選、復選

2、選項較多

當選項很多，空間不夠時，需要用彈層把選項收起以節省頁面空間；

1）單選下拉選擇器

當下拉內容還很多，而且需要分類，那么就需要：分組下拉選擇器

 

2）復選下拉選擇器

    a.個數過多

    復選下拉框內選中項【個數】過多時，需要給出下拉框的最大高度，超過最大高度則折行，出滾動條：

 

    b.字數過多

    選中項【內容】過多，需要給出選中項文字一個最大寬度，超過打點hover時顯示tips

   c.彈層規則

  【下拉彈層內】根據下拉選項內容自適應撐開，還需要給出彈層的最大高度為（比如290px），內容過多產生滾動條；

    d.加入搜索功能

    如果下拉彈層內，選項非常多，那么用戶應用起來比較費勁，雖然有滾動條能展示全部選項，但是從這么多選項中選出某個選項就比較難了。這時就可以在彈層上加【搜索框】解決，方便用戶搜索；也可以在下拉選擇框上直接設置檢索功能；

 

四、按鈕/標簽過多

1、用按鈕收起

最常用的解決方法就是用【更多按鈕】收起更多不常用的按鈕或標簽；

比如：

 

2、箭頭切換，輪播

還可以用【左右箭頭】的方式進行切換：

 

 

 

3、漸進式設計

預先判斷用戶的操作，在用戶進行特定操作后再出現按鈕；漸進式設計是目前比較流行的，也是用戶體驗比較好的。

1）hover時再出現要操作的按鈕：

2）勾選復選框后出現按鈕：

如下圖，選中選項后，篩選自動收起為一行同時操作區域出現覆蓋篩選區，表格隨著篩選移動；
取消所有勾選項或是點擊關閉按鈕，操作區收起恢復成篩選區，篩選恢復成勾選前的狀態；

還有teambition的文件庫，復選框勾選前：

復選框 勾選后出現行操作按鈕，按鈕覆蓋標題的位置：

3）根據編輯態和展示態進行區分：

  展示態下頁面比較整潔，不顯示多余的按鈕：

 

編輯內容后，出現操作按鈕：

 

輸入完成后的展示依然比較整潔：

五、表格內容過多

B端產品的頁面常常會用到表格來承載一條條數據/記錄，那最好的情況就是表格列數較少，在最常見尺寸的屏幕下就能夠全部展示：

但是，往往表格字段比較多，列數多會出滾動條，行數多出分頁；

出現滾動條時為了關鍵的信息能夠一直顯示，常常會鎖定首列或者操作列：

1、左側列鎖定:

鎖定后，滾動數據列表內的滾動條左側列首位置不動，只滾動右側的數據，向左滾動的數據會被列首區域遮擋；

2、右側列鎖定:

滾動數據列表內的滾動條右側列尾位置不動，只滾動左的數據，向右滾動的數據會被列尾區域遮擋；

3、橫向滾動條

數據寬度超過屏幕寬度，則顯示橫向滾動條

 

4、縱向滾動條

數據高度超過屏幕高度，則顯示縱向滾動條；滾動范圍為表頭與分頁之間的內容區域；

 

六、功能過多

 

1、用導航劃分

頁面結構層面上信息過多一般會用一級導航，二級導航的形式劃分內容

 

2、切換頁簽收納

頁面內容過多還常常用頁簽來收納；

 

 

3、加入面包屑

當頁面層級較多時需要加面包屑引導用戶如何返回，告知用戶的位置；面包屑不僅能讓用戶不迷路，還可以用來快速定位內容，便于用戶快捷的選擇；

 

4、抽屜收納

抽屜可以收納很多內容和操作同時保持頁面整潔。

 

作者：ZZiUP
鏈接：https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

 

藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。

關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司

銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發