那些你也會(huì)遇到的 UI 設(shè)計(jì)問(wèn)題

1、 HYPERLINK /s?_biz=MzAwNjM0MzIzNA=&mid=2650341426&idx=2&sn=ec96f06b810123eaf55cc722714a71c1&chksm=83037f1fb474f609f55bf502b823e76605a6268104f56eeda6537860f93feb1d03d02fec174f l rd t _blank 那些你也會(huì)遇到的 UI 設(shè)計(jì)問(wèn)題！來(lái)源：UI頭條（uicner）什么是信息流？信息流設(shè)計(jì)十分常見(jiàn)，我們?nèi)粘Ｊ褂玫膽?yīng)用或網(wǎng)頁(yè)都能見(jiàn)到它的身影。信息流有廣義和狹義兩種。廣義指在空間和時(shí)間上向同一方向運(yùn)動(dòng)過(guò)程中的一組信息，它們有

2、共同的信息源和信息的接收者，即由一個(gè)信息源向另一個(gè)單位傳遞的全部信息的集合。狹義指信息的傳遞運(yùn)動(dòng)，這種傳遞運(yùn)動(dòng)是在現(xiàn)代信息技術(shù)研究、發(fā)展、應(yīng)用的條件中，信息按照一定要求通過(guò)一定渠道進(jìn)行的。用大白話說(shuō)，所謂信息流就是信息像河流一樣從信息的源頭流出，分布到全世界的各種終端設(shè)備。信息流有哪些分類？從信息流的表現(xiàn)形式來(lái)分有：瀑布式、列表式、動(dòng)態(tài)卡片式、全屏式。以上的信息流的展現(xiàn)形式只是作為信息的載體，那么信息的內(nèi)容屬性又包含哪些呢？根據(jù)不同的產(chǎn)品定位、使用場(chǎng)景，針對(duì)信息的側(cè)重點(diǎn)，將其內(nèi)容與展現(xiàn)形式進(jìn)行組合，產(chǎn)生出符合業(yè)務(wù)需求以及用戶體驗(yàn)的效果。經(jīng)常有聽(tīng)到所謂的Feed流，實(shí)際上并不能稱為一種表現(xiàn)形式，

3、feed是一種給用戶持續(xù)提供內(nèi)容的數(shù)據(jù)形式，是由多個(gè)內(nèi)容提供源組成的資源聚合器，由用戶主動(dòng)訂閱消息源并且向用戶提供內(nèi)容接下來(lái)將逐步對(duì)瀑布流、列表流、動(dòng)態(tài)卡片流、全屏流的定義、形式特征、優(yōu)缺點(diǎn)進(jìn)行分析解讀。瀑布流什么是瀑布流瀑布流是“瀑布流式布局”的簡(jiǎn)稱，專業(yè)的英文名稱為Masonry Layouts。因滑動(dòng)時(shí)會(huì)像瀑布一樣“飛流直下”“源源不斷”，故而得名。是一種以圖片信息為主導(dǎo)的頁(yè)面布局形式，視覺(jué)表現(xiàn)為參差不齊的多欄布局，側(cè)重圖片展示，以圖片或視頻（主）+文字（輔）形式出現(xiàn)，最早是由Pinterest首先運(yùn)用。瀑布流的優(yōu)點(diǎn)1.瀑布流給用戶琳瑯滿目的視覺(jué)體驗(yàn)，其主要特性便是錯(cuò)落有致，定寬而不定高

4、的設(shè)計(jì)讓頁(yè)面區(qū)別于傳統(tǒng)矩陣布局模式，巧妙的利用視覺(jué)層級(jí)，視線的任意流動(dòng)又緩解了視覺(jué)疲勞。2.瀑布流使用懶加載的方式不間斷的加載信息展現(xiàn)給用戶，滑動(dòng)的時(shí)候會(huì)不停的出現(xiàn)新的東西，通過(guò)給出不完整的視覺(jué)圖片去吸引你的好奇心，讓你停不下來(lái)想要不斷的向下探索，適合用戶目的性不強(qiáng)，隨意瀏覽的場(chǎng)景。采用這種方案的產(chǎn)品，往往可以通過(guò)瀑布流加強(qiáng)用戶的停留時(shí)間，提高用戶的使用粘度。從體驗(yàn)的心理講，女性是一種逛街?jǐn)?shù)小時(shí)都不需要停歇的生物，一眼望不到頭的瀑布流契合了這種心理。瀑布流的圖片就像商品，就像逛街、就像掃貨。女性只要不斷往下拉伸頁(yè)面，就像置身在一條沒(méi)有盡頭的購(gòu)物街，沒(méi)有層高限制的商場(chǎng)中一樣。傳統(tǒng)布局中的下一頁(yè)就

5、是打斷，好比男朋友輕聲在耳邊說(shuō)了句：休息一下吧，我累了結(jié)果不言而喻瀑布流的缺點(diǎn)1.從用戶層面上來(lái)說(shuō)，瀑布流容易造成用戶不清楚目前所在的位置，當(dāng)希望需要進(jìn)行回溯操作，例如，在電商網(wǎng)站當(dāng)中，用戶時(shí)常需要在商品列表與詳情頁(yè)面之間切換，這種情況下，傳統(tǒng)的、帶有頁(yè)碼導(dǎo)航的方式可以幫助用戶更穩(wěn)妥和準(zhǔn)確的回到某個(gè)特定的列表頁(yè)面當(dāng)中。2.通常瀑布流適合呈現(xiàn)圖片或視頻為主，文字為輔的信息，因此當(dāng)信息需要呈現(xiàn)詳細(xì)的文字時(shí)，就不太適用了。例如當(dāng)在淘寶搜索關(guān)不同類目的時(shí)候會(huì)呈現(xiàn)不同的信息流形式，比如搜索服飾的時(shí)候會(huì)呈現(xiàn)瀑布流，搜索數(shù)碼產(chǎn)品的時(shí)候會(huì)以列表流的形式出現(xiàn)。這是因?yàn)榉椛唐犯鼈?cè)重圖片的視覺(jué)效果沖擊，數(shù)碼產(chǎn)品更

6、側(cè)重參數(shù)的對(duì)比，當(dāng)然現(xiàn)在也會(huì)同時(shí)提供2種閱讀方案的切換功能提供給用戶自主選擇。列表流什么是列表流顧名思義，列表式設(shè)計(jì)就是通過(guò)列表的形式將信息排版呈現(xiàn)，通常出現(xiàn)在以文字為主，圖片為輔的場(chǎng)景。常見(jiàn)于新聞、閱讀、聊天類APP。呈現(xiàn)形式上可以細(xì)分成3種，左圖右文，左文右圖，上文下圖。列表流的優(yōu)點(diǎn)1.列表流加載速度快，單一頁(yè)面呈現(xiàn)數(shù)量多，密度大。2.視覺(jué)上排版整齊，方便用戶進(jìn)行信息瀏覽、對(duì)比、查找定位。例如上文的提到的電商平臺(tái)通常會(huì)在數(shù)碼產(chǎn)品的類目使用列表流的形式。3.當(dāng)（橫向與豎向）信息較多時(shí)，列表視圖可以提供一種概覽性的方案來(lái)呈現(xiàn)，也可以快速掃描。4.列表視圖可以承載豐富的過(guò)濾與檢索功能，滿足復(fù)雜的

7、用戶搜索場(chǎng)景。5.當(dāng)用戶需要批量選擇操作時(shí)，列表視圖提供了便捷的交互方式。列表流的缺點(diǎn)1.針對(duì)單條信息，呈現(xiàn)效果不夠豐富，對(duì)于圖片的展示效果不佳，更著重展示文字信息2.由于單一頁(yè)面信息密度大，同級(jí)內(nèi)容過(guò)多時(shí)，用戶瀏覽容易產(chǎn)生視覺(jué)疲勞動(dòng)態(tài)卡片流什么是動(dòng)態(tài)卡片流卡片流實(shí)際上就是一種高級(jí)版本的列表流，其展示的內(nèi)容更加豐富，通常包含的信息元素有：頭像/圖片、名稱、文字內(nèi)容、標(biāo)簽/話題、贊評(píng)轉(zhuǎn)、時(shí)間等。具備極強(qiáng)的拓展性，更注重交互的引導(dǎo)。動(dòng)態(tài)卡片流的優(yōu)點(diǎn)1.卡片流展示的內(nèi)容更豐富，經(jīng)常會(huì)伴隨圖片，屏占比較大，用戶的閱讀體驗(yàn)更好，幫助用戶快速聚焦。2.視覺(jué)上便于將信息組合成區(qū)塊，增加可讀性，增加瀏覽識(shí)別度

8、。3.卡片式可以拓展更多交互行為，可以有更多操作，如點(diǎn)贊、收藏、評(píng)論等。4.打破傳統(tǒng)列表狀態(tài)下只能縱向滾動(dòng)，可以實(shí)現(xiàn)橫行卷動(dòng)，空間利用的方式會(huì)得到極大的拓展。動(dòng)態(tài)卡片流的缺點(diǎn)1.由于單個(gè)動(dòng)態(tài)卡片占用的屏幕空間較大，單個(gè)屏幕最多呈現(xiàn)3-4個(gè)卡片，信息呈現(xiàn)效率偏低。2.同時(shí)動(dòng)態(tài)卡片并不適合用戶需要進(jìn)行、對(duì)比、查找定位的場(chǎng)景。全屏流什么是沉浸流所謂沉浸流，就是將單個(gè)信息詳情，通過(guò)圖文或者視頻的形式直接展現(xiàn)在信息流中，常見(jiàn)的如抖音類的短視頻產(chǎn)品、一個(gè)、潮汐等。全屏式的優(yōu)點(diǎn)1.顧名思義，全屏式核心就是希望將信息的內(nèi)容盡量最大化展現(xiàn)給用戶，聚焦度高，降低用戶使用成本：向下滑動(dòng)就能快速切換內(nèi)容，伴隨用戶無(wú)意識(shí)行為的加強(qiáng)，沉浸度越來(lái)越高，這也是抖音的成癮機(jī)制。2