B端交互設(shè)計(jì)之內(nèi)容太多怎么辦

2024-6-21    資深UI設(shè)計(jì)者

 

 

做設(shè)計(jì)的時(shí)候,尤其是B端頁面,我們一般按常用的場景去設(shè)計(jì),但是內(nèi)容過多的時(shí)候如何在頁面中更好的顯示呢?

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

 

【目錄】

一、文字過多

 

1、標(biāo)題文字過多

       標(biāo)題因?yàn)轫撁妗⒛K等寬度限制,標(biāo)題文字超長的極限情況如何顯示必然是需要考慮的。

       具體設(shè)計(jì)和寫設(shè)計(jì)規(guī)則時(shí)要考慮場景、功能、頁面布局等等情況再選擇處理方式。

 

1)只有標(biāo)題

   a打點(diǎn):

   注意要根據(jù)頁面布局結(jié)構(gòu),給出標(biāo)題最大寬度,然后標(biāo)題文字過長打點(diǎn),hover出tips;優(yōu)點(diǎn)是保持頁面簡潔、方便對齊;缺點(diǎn)是無法直觀看到全部內(nèi)容;

   b折行:

   給出標(biāo)題最大寬度,然后標(biāo)題文字過長則折行顯示;優(yōu)點(diǎn)是能夠直觀顯示出全部內(nèi)容,缺點(diǎn)是內(nèi)容太多的話視覺不友好:

   c先折行再打點(diǎn):

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

2)有標(biāo)題還有其他說明文字時(shí)

     當(dāng)分組標(biāo)題和說明文字結(jié)合時(shí),一般要優(yōu)先顯示標(biāo)題區(qū)域;當(dāng)?shù)竭_(dá)說明文字最小間距(比如40px)時(shí),標(biāo)題打點(diǎn),說明文字顯示不下也打點(diǎn);hover時(shí)出tips

3)表單的標(biāo)題

     標(biāo)題文字較多時(shí)一般換行顯示,最多顯示(比如2)行,更多打點(diǎn)顯示,鼠標(biāo)經(jīng)過顯示tips;換行后算整體高度,距離下面的表單間距保持一致

4)打點(diǎn)的規(guī)則

    也就是從哪里開始打點(diǎn),也是需要根據(jù)場景考慮的:

   a.尾部打點(diǎn),也是最常用的

   b.中間打點(diǎn),比如sketch畫板的標(biāo)題展示不全時(shí)是從中間開始打點(diǎn)的;

  c.特定位置打點(diǎn),比如標(biāo)題里人名字過多時(shí),沒辦法展示全,但是后邊的【等120人打標(biāo)簽】又是極其重要的信息,這時(shí)候就需要給定人名稱一個(gè)最大展示的寬度,超過最大寬度就在最后一個(gè)人名處打點(diǎn)顯示;

2.文本框內(nèi)文字過多

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

 

1)單行文本

   a有字?jǐn)?shù)限制

   很多場景下,輸入框都不是無限輸入的,需要產(chǎn)品給出最大范圍,這時(shí)主要考慮校驗(yàn)報(bào)錯(cuò)問題:

   在搜索框,往往會(huì)設(shè)置最大字?jǐn)?shù),超過則會(huì)截?cái)?

   b無字?jǐn)?shù)限制

   輸入狀態(tài)時(shí),文字過多,光標(biāo)定位在輸入框末尾,可無限輸入,輸入框頭部內(nèi)容向前隱藏/截?cái)啵?/p>

   展示態(tài)時(shí),內(nèi)容從頭部開始顯示,輸入框末尾打點(diǎn),或者漸隱,hover時(shí)可以選擇出不出tips:

   輸入完成后的一些交互:

  還有一種處理方式就是,超過字?jǐn)?shù)限制后直接截?cái)?,不讓輸入?/p>

 

2)多行文本

   a有字?jǐn)?shù)限制

   b無字?jǐn)?shù)限制

 


 

3.介紹/說明文字過多

用按鈕,展開收起內(nèi)容,展開收起可以常駐,也可以設(shè)置在鼠標(biāo)hover時(shí)在顯示出來。

 

二、彈層內(nèi)容過多

1、確認(rèn)對話框

寬度自適應(yīng),文字自動(dòng)換行,設(shè)置最大寬度;設(shè)置最大高度,內(nèi)容過多則出滾動(dòng)條;還要給出滾動(dòng)區(qū)域,比如標(biāo)題+內(nèi)容的區(qū)域高度;

2、tips提示

tips寬高根據(jù)文字內(nèi)容自適應(yīng),設(shè)置最大寬度;文字過長時(shí)自動(dòng)換行,設(shè)置最大高度,超過最大高一般多于的數(shù)據(jù)不展示,因?yàn)閠ips都是比較輕的提示;

3、警告提示

寬度自適應(yīng),文字自動(dòng)換行。設(shè)置容器最大高度,標(biāo)題+內(nèi)容數(shù)據(jù)過多,則產(chǎn)生滾動(dòng)條

 

4、全局提示

容器寬高自適應(yīng),給出最大寬高,大于最高高度時(shí)出現(xiàn)滾動(dòng)條,反饋信息建議精簡到一至兩行,icon位置固定不變。

 

5、模式彈層

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

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

 

 

三、選項(xiàng)過多

 

1、選項(xiàng)較少

當(dāng)選項(xiàng)較少,空間足夠時(shí),可以把選項(xiàng)平鋪展示,一方面能讓用戶直觀看到所有選項(xiàng),另一方面也能減少用戶操作步驟;可以設(shè)置單選、復(fù)選

2、選項(xiàng)較多

當(dāng)選項(xiàng)很多,空間不夠時(shí),需要用彈層把選項(xiàng)收起以節(jié)省頁面空間;

1)單選下拉選擇器

當(dāng)下拉內(nèi)容還很多,而且需要分類,那么就需要:分組下拉選擇器

 

2)復(fù)選下拉選擇器

    a.個(gè)數(shù)過多

    復(fù)選下拉框內(nèi)選中項(xiàng)【個(gè)數(shù)】過多時(shí),需要給出下拉框的最大高度,超過最大高度則折行,出滾動(dòng)條:

 

    b.字?jǐn)?shù)過多

    選中項(xiàng)【內(nèi)容】過多,需要給出選中項(xiàng)文字一個(gè)最大寬度,超過打點(diǎn)hover時(shí)顯示tips

   c.彈層規(guī)則

  【下拉彈層內(nèi)】根據(jù)下拉選項(xiàng)內(nèi)容自適應(yīng)撐開,還需要給出彈層的最大高度為(比如290px),內(nèi)容過多產(chǎn)生滾動(dòng)條;

    d.加入搜索功能

    如果下拉彈層內(nèi),選項(xiàng)非常多,那么用戶應(yīng)用起來比較費(fèi)勁,雖然有滾動(dòng)條能展示全部選項(xiàng),但是從這么多選項(xiàng)中選出某個(gè)選項(xiàng)就比較難了。這時(shí)就可以在彈層上加【搜索框】解決,方便用戶搜索;也可以在下拉選擇框上直接設(shè)置檢索功能;

 

四、按鈕/標(biāo)簽過多

1、用按鈕收起

最常用的解決方法就是用【更多按鈕】收起更多不常用的按鈕或標(biāo)簽;

比如:

 

2、箭頭切換,輪播

還可以用【左右箭頭】的方式進(jìn)行切換:

 

 

 

3、漸進(jìn)式設(shè)計(jì)

預(yù)先判斷用戶的操作,在用戶進(jìn)行特定操作后再出現(xiàn)按鈕;漸進(jìn)式設(shè)計(jì)是目前比較流行的,也是用戶體驗(yàn)比較好的。

1)hover時(shí)再出現(xiàn)要操作的按鈕:

2)勾選復(fù)選框后出現(xiàn)按鈕:

如下圖,選中選項(xiàng)后,篩選自動(dòng)收起為一行同時(shí)操作區(qū)域出現(xiàn)覆蓋篩選區(qū),表格隨著篩選移動(dòng);
取消所有勾選項(xiàng)或是點(diǎn)擊關(guān)閉按鈕,操作區(qū)收起恢復(fù)成篩選區(qū),篩選恢復(fù)成勾選前的狀態(tài);

還有teambition的文件庫,復(fù)選框勾選前:

復(fù)選框 勾選后出現(xiàn)行操作按鈕,按鈕覆蓋標(biāo)題的位置:

3)根據(jù)編輯態(tài)和展示態(tài)進(jìn)行區(qū)分:

  展示態(tài)下頁面比較整潔,不顯示多余的按鈕:

 

編輯內(nèi)容后,出現(xiàn)操作按鈕:

 

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

五、表格內(nèi)容過多

B端產(chǎn)品的頁面常常會(huì)用到表格來承載一條條數(shù)據(jù)/記錄,那最好的情況就是表格列數(shù)較少,在最常見尺寸的屏幕下就能夠全部展示

但是,往往表格字段比較多,列數(shù)多會(huì)出滾動(dòng)條,行數(shù)多出分頁;

出現(xiàn)滾動(dòng)條時(shí)為了關(guān)鍵的信息能夠一直顯示,常常會(huì)鎖定首列或者操作列:

1、左側(cè)列鎖定:

鎖定后,滾動(dòng)數(shù)據(jù)列表內(nèi)的滾動(dòng)條左側(cè)列首位置不動(dòng),只滾動(dòng)右側(cè)的數(shù)據(jù),向左滾動(dòng)的數(shù)據(jù)會(huì)被列首區(qū)域遮擋;

2、右側(cè)列鎖定:

滾動(dòng)數(shù)據(jù)列表內(nèi)的滾動(dòng)條右側(cè)列尾位置不動(dòng),只滾動(dòng)左的數(shù)據(jù),向右滾動(dòng)的數(shù)據(jù)會(huì)被列尾區(qū)域遮擋;

3、橫向滾動(dòng)條

數(shù)據(jù)寬度超過屏幕寬度,則顯示橫向滾動(dòng)條

 

4、縱向滾動(dòng)條

數(shù)據(jù)高度超過屏幕高度,則顯示縱向滾動(dòng)條;滾動(dòng)范圍為表頭與分頁之間的內(nèi)容區(qū)域;

 

六、功能過多

 

1、用導(dǎo)航劃分

頁面結(jié)構(gòu)層面上信息過多一般會(huì)用一級導(dǎo)航,二級導(dǎo)航的形式劃分內(nèi)容

 

2、切換頁簽收納

頁面內(nèi)容過多還常常用頁簽來收納;

 

 


3、加入面包屑

當(dāng)頁面層級較多時(shí)需要加面包屑引導(dǎo)用戶如何返回,告知用戶的位置;面包屑不僅能讓用戶不迷路,還可以用來快速定位內(nèi)容,便于用戶快捷的選擇;

 

4、抽屜收納

抽屜可以收納很多內(nèi)容和操作同時(shí)保持頁面整潔。

 

作者:ZZiUP
鏈接:https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
 

藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)軟件wpf開發(fā)、軟件vue開發(fā)

 

 

 

 

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔