超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

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

ZZiUP
北京
/
設(shè)計(jì)愛好者
/
3年前
/
10353瀏覽
版權(quán)
私信
關(guān)注
B端交互設(shè)計(jì)之內(nèi)容太多怎么辦

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

【目錄】

一、文字過多

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

   標(biāo)題因?yàn)轫?yè)面、模塊等寬度限制，標(biāo)題文字超長(zhǎng)的極限情況如何顯示必然是需要考慮的。

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

1)只有標(biāo)題

a打點(diǎn):

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

b折行:

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

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

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

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

 當(dāng)分組標(biāo)題和說(shuō)明文字結(jié)合時(shí)，一般要優(yōu)先顯示標(biāo)題區(qū)域；當(dāng)?shù)竭_(dá)說(shuō)明文字最小間距（比如40px）時(shí)，標(biāo)題打點(diǎn)，說(shuō)明文字顯示不下也打點(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ù)場(chǎng)景考慮的：

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ǎng)景下，輸入框都不是無(wú)限輸入的，需要產(chǎn)品給出最大范圍，這時(shí)主要考慮校驗(yàn)報(bào)錯(cuò)問題:

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

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

輸入狀態(tài)時(shí)，文字過多，光標(biāo)定位在輸入框末尾，可無(wú)限輸入，輸入框頭部?jī)?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無(wú)字?jǐn)?shù)限制

3.介紹/說(shuō)明文字過多

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

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

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

寬度自適應(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è)置最大寬度；文字過長(zhǎng)時(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)條，反饋信息建議精簡(jiǎn)到一至兩行，icon位置固定不變。

5、模式彈層

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

不管是什么彈層，其實(shí)都是承載內(nèi)容的容器，內(nèi)容很多時(shí)，容器不能隨內(nèi)容無(wú)限大就需要設(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é)省頁(yè)面空間；

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)用起來(lái)比較費(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的文件庫(kù)，復(fù)選框勾選前：

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

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

展示態(tài)下頁(yè)面比較整潔，不顯示多余的按鈕：

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

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

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

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

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

出現(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)范圍為表頭與分頁(yè)之間的內(nèi)容區(qū)域；

六、功能過多

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

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

2、切換頁(yè)簽收納

頁(yè)面內(nèi)容過多還常常用頁(yè)簽來(lái)收納；

3、加入面包屑

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

4、抽屜收納

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

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

任務(wù)，到底是怎么來(lái)的？是原本就存在的？還是人為設(shè)計(jì)而來(lái)的？

在之前文章的基礎(chǔ)上加入了一些圖示，可視化自己的理解

寫文章來(lái)整理自己的思路，再談?wù)勛约簩?duì)蘋果產(chǎn)品的感受，歡迎一起討論啊

本篇旨在簡(jiǎn)明扼要地向大家介紹交互設(shè)計(jì)中的一些原則，幫助大家理解和真正在工作中應(yīng)用

隨著ChatGPT在23年初的火熱，AI熱潮已經(jīng)開始席卷各行各業(yè)，人們對(duì)于AI的熱情就像是看著第一款iPhone發(fā)布或者蒸汽機(jī)的發(fā)明，期待著它帶來(lái)一場(chǎng)信息時(shí)代的工業(yè)革命。同時(shí)，AI替代60%崗位的口號(hào)也足以讓相關(guān)從業(yè)者感到前所未有的壓力與焦慮。在各大設(shè)計(jì)網(wǎng)站上，關(guān)于AI的內(nèi)容肉眼可見的占據(jù)了越來(lái)越多的比重，包括AI在設(shè)計(jì)流程中的應(yīng)用、各種AI最新工具等介紹、AI的使用技巧、AI生成的海報(bào)/插畫等作品……一瞬間，似乎全民都投入到了AI的浪潮之中。
反過頭來(lái)看，對(duì)于用戶體驗(yàn)設(shè)計(jì)而言，由于產(chǎn)品的底層邏輯被AI改寫，產(chǎn)品的生態(tài)、單個(gè)產(chǎn)品的形態(tài)、使用方式等都將發(fā)生翻天覆地的變化。連帶著的，由于生產(chǎn)工具的變革，產(chǎn)品的設(shè)計(jì)、開發(fā)流程也將隨之發(fā)生變化，進(jìn)一步提高效率，對(duì)于從業(yè)人員的能力要求也在實(shí)時(shí)更新。
對(duì)于這樣一種浪潮，埋頭當(dāng)個(gè)鴕鳥或者嗤之以鼻是沒有意義的，我們需要看到、認(rèn)識(shí)、擁抱它。所以有人笑稱：打不過就加入。同時(shí)，對(duì)于各種所謂干掉各個(gè)崗位的宣傳，也吸引著、推動(dòng)著我們?nèi)チ私鈱⒈皇裁锤傻粢约霸趺幢桓傻簟?br /> 從另一方面講，只有在技術(shù)變革的時(shí)候，彎道超車才有可能。如果只是沿用之前的經(jīng)驗(yàn)與技術(shù)，那么成熟的企業(yè)就會(huì)有先發(fā)優(yōu)勢(shì)。但是當(dāng)面對(duì)新的技術(shù)變革時(shí)，大家被拉回到同一起跑線上，這個(gè)時(shí)候，就看誰(shuí)能夠找到正確的方向，率先突圍。
所以，不管是被動(dòng)也好，還是主動(dòng)也好，面對(duì)著新一輪的技術(shù)變革，也希望從AI能力本身、所帶來(lái)的變化、以后的發(fā)展等方面全面了解一下這個(gè)新的時(shí)代寵兒。

寫在前面
研究結(jié)果最壞的情況是什么，無(wú)法回答研究問題，或者研究結(jié)果不能得到認(rèn)可。畢竟做完一場(chǎng)用戶訪談投入了大量的成本，發(fā)現(xiàn)的卻是一些大家都已知的結(jié)果那就比較失敗了，或者分析出的問題不具備深刻性，對(duì)落地實(shí)施起不到幫助作用。在前面兩個(gè)系列中，我已經(jīng)分享了如何做好訪談前的準(zhǔn)備，以及訪談中一些好用的訪談技巧，最終就是為了訪談后，我們能夠獲得專業(yè)性且能形成指導(dǎo)的建議和洞察。
訪談數(shù)據(jù)分析的難點(diǎn)主要是來(lái)源于訪談收集到的數(shù)據(jù)是大量碎片的，凌亂無(wú)序的。如何從這無(wú)條理的資料中找出新的線索，洞察出新的機(jī)會(huì)？這似乎是沒有一個(gè)固定的標(biāo)準(zhǔn)流程。定性數(shù)據(jù)的分析非常依賴研究者本人的分析能力，同樣一份定性數(shù)據(jù)，經(jīng)過不同人的分析，很可能有完全不一樣的結(jié)論和見解。所以本文也無(wú)法給出像數(shù)學(xué)公式一樣的規(guī)則和標(biāo)準(zhǔn)，滿足所有人去套用。在這里我想更多地去揭示定性數(shù)據(jù)分析的面紗，掀開裙子地一角，看看這個(gè)過程究竟是如何的，提供研究者們一個(gè)參考思路。