做競品分析時,我們往往會抱怨我們身為設(shè)計師,為什么要知道行業(yè)趨勢?為什么要了解商業(yè)模式?認為那是產(chǎn)品經(jīng)理的工作,其實不然,當我們踏入一個行業(yè),或者在某個行業(yè)扎根做大做強,我們是需要一些專業(yè)的行業(yè)知識的,例如同樣是設(shè)計一個UGC平臺,金融行業(yè)和社交行業(yè)就會有很多不一樣的地方,包括用戶習(xí)慣和商業(yè)模式等。
B端交互設(shè)計之內(nèi)容太多怎么辦
ZZiUP
北京
/
設(shè)計愛好者
/
3年前
/
10353瀏覽
版權(quán)
私信
關(guān)注
B端交互設(shè)計之內(nèi)容太多怎么辦
ZZiUP
關(guān)注
做設(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)容過多的情況整理了以下這么多,當然解決辦法也可能有更好的方式,都歡迎大家補充~~
【目錄】
一、文字過多
1、標題文字過多
標題因為頁面、模塊等寬度限制,標題文字超長的極限情況如何顯示必然是需要考慮的。
具體設(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人打標簽】又是極其重要的信息,這時候就需要給定人名稱一個最大展示的寬度,超過最大寬度就在最后一個人名處打點顯示;
2.文本框內(nèi)文字過多
文本框需要考慮單行文本/多行文本、激活態(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ù)限制
3.介紹/說明文字過多
用按鈕,展開收起內(nèi)容,展開收起可以常駐,也可以設(shè)置在鼠標hover時在顯示出來。
二、彈層內(nèi)容過多
1、確認對話框
寬度自適應(yīng),文字自動換行,設(shè)置最大寬度;設(shè)置最大高度,內(nèi)容過多則出滾動條;還要給出滾動區(qū)域,比如標題+內(nèi)容的區(qū)域高度;
2、tips提示
tips寬高根據(jù)文字內(nèi)容自適應(yīng),設(shè)置最大寬度;文字過長時自動換行,設(shè)置最大高度,超過最大高一般多于的數(shù)據(jù)不展示,因為tips都是比較輕的提示;
3、警告提示
寬度自適應(yīng),文字自動換行。設(shè)置容器最大高度,標題+內(nèi)容數(shù)據(jù)過多,則產(chǎn)生滾動條
4、全局提示
容器寬高自適應(yīng),給出最大寬高,大于最高高度時出現(xiàn)滾動條,反饋信息建議精簡到一至兩行,icon位置固定不變。
5、模式彈層
彈層寬/高度可以給出定值,也可設(shè)置占視窗的百分比,設(shè)置占視窗的百分比,為了避免在窗口放大和縮小時彈層無限大或者無限小,一般就要同時設(shè)置最大最小寬度定值。比如設(shè)置彈層最大高度為頁面高度90% ,也可以設(shè)置100%,即高度全屏的彈層;高度超過頁面高度 90%時,則顯示滾動條,最小高300px;寬度在600px到1000px之間自適應(yīng)。
不管是什么彈層,其實都是承載內(nèi)容的容器,內(nèi)容很多時,容器不能隨內(nèi)容無限大就需要設(shè)置最大最小值或者百分比。
三、選項過多
1、選項較少
當選項較少,空間足夠時,可以把選項平鋪展示,一方面能讓用戶直觀看到所有選項,另一方面也能減少用戶操作步驟;可以設(shè)置單選、復(fù)選
2、選項較多
當選項很多,空間不夠時,需要用彈層把選項收起以節(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è)置檢索功能;
四、按鈕/標簽過多
1、用按鈕收起
最常用的解決方法就是用【更多按鈕】收起更多不常用的按鈕或標簽;
比如:
2、箭頭切換,輪播
還可以用【左右箭頭】的方式進行切換:
3、漸進式設(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)容
2、切換頁簽收納
頁面內(nèi)容過多還常常用頁簽來收納;
3、加入面包屑
當頁面層級較多時需要加面包屑引導(dǎo)用戶如何返回,告知用戶的位置;面包屑不僅能讓用戶不迷路,還可以用來快速定位內(nèi)容,便于用戶快捷的選擇;
4、抽屜收納
抽屜可以收納很多內(nèi)容和操作同時保持頁面整潔。
做設(shè)計的時候,尤其是B端頁面,我們一般按常用的場景去設(shè)計,但是內(nèi)容過多的時候如何在頁面中更好的顯示呢?
在之前文章的基礎(chǔ)上加入了一些圖示,可視化自己的理解
寫文章來整理自己的思路,再談?wù)勛约簩μO果產(chǎn)品的感受,歡迎一起討論啊
本篇旨在簡明扼要地向大家介紹交互設(shè)計中的一些原則,幫助大家理解和真正在工作中應(yīng)用
藍藍設(shè)計(m.91whvog3.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。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。
關(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ā)
隨著ChatGPT在23年初的火熱,AI熱潮已經(jīng)開始席卷各行各業(yè),人們對于AI的熱情就像是看著第一款iPhone發(fā)布或者蒸汽機的發(fā)明,期待著它帶來一場信息時代的工業(yè)革命。同時,AI替代60%崗位的口號也足以讓相關(guān)從業(yè)者感到前所未有的壓力與焦慮。在各大設(shè)計網(wǎng)站上,關(guān)于AI的內(nèi)容肉眼可見的占據(jù)了越來越多的比重,包括AI在設(shè)計流程中的應(yīng)用、各種AI最新工具等介紹、AI的使用技巧、AI生成的海報/插畫等作品……一瞬間,似乎全民都投入到了AI的浪潮之中。
反過頭來看,對于用戶體驗設(shè)計而言,由于產(chǎn)品的底層邏輯被AI改寫,產(chǎn)品的生態(tài)、單個產(chǎn)品的形態(tài)、使用方式等都將發(fā)生翻天覆地的變化。連帶著的,由于生產(chǎn)工具的變革,產(chǎn)品的設(shè)計、開發(fā)流程也將隨之發(fā)生變化,進一步提高效率,對于從業(yè)人員的能力要求也在實時更新。
對于這樣一種浪潮,埋頭當個鴕鳥或者嗤之以鼻是沒有意義的,我們需要看到、認識、擁抱它。所以有人笑稱:打不過就加入。同時,對于各種所謂干掉各個崗位的宣傳,也吸引著、推動著我們?nèi)チ私鈱⒈皇裁锤傻粢约霸趺幢桓傻簟?br />
從另一方面講,只有在技術(shù)變革的時候,彎道超車才有可能。如果只是沿用之前的經(jīng)驗與技術(shù),那么成熟的企業(yè)就會有先發(fā)優(yōu)勢。但是當面對新的技術(shù)變革時,大家被拉回到同一起跑線上,這個時候,就看誰能夠找到正確的方向,率先突圍。
所以,不管是被動也好,還是主動也好,面對著新一輪的技術(shù)變革,也希望從AI能力本身、所帶來的變化、以后的發(fā)展等方面全面了解一下這個新的時代寵兒。
藍藍設(shè)計(m.91whvog3.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。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。
關(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è)計(m.91whvog3.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。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。
關(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.91whvog3.cn