B端交互設計之內容太多怎麼辦

B端交互設計之內容太多怎麼辦

B端交互設計之內容太多怎麼辦,觀點,ZZiUP,原創文章站酷網,中國設計師互動平台。

我們知道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、抽屜收納

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



Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。