中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：版面設(shè)計(jì)經(jīng)常會(huì)存在內(nèi)容放不下的情況，主流策略就是先在當(dāng)前版塊展示一部分內(nèi)容，剩余內(nèi)容以查看更多的方式來隱藏。但同時(shí)，我們也要考慮到業(yè)務(wù)及交互層面的使用。本文作者結(jié)合以主流APP為例，分析它們在不同場景下的應(yīng)用情況，與你分享。

我們在設(shè)計(jì)一個(gè)版塊時(shí)，總是會(huì)遇到內(nèi)容放不下的情況。對(duì)應(yīng)的主流策略之一是先在當(dāng)前版塊展示一部分內(nèi)容，剩余內(nèi)容以查看更多的方式來隱藏，以保證用戶當(dāng)前良好的閱讀體驗(yàn)。

但是我們總不能所有場景直接往標(biāo)題右邊一放了事，而不考慮業(yè)務(wù)及交互層面的使用。接下來我結(jié)合一些主流APP來總結(jié)它在不同場景下的應(yīng)用情況，同時(shí)會(huì)涉及到我之前文章講到的理論。但愿這篇攻略能對(duì)你有所啟發(fā)和幫助。

一、跳轉(zhuǎn)式場景

這應(yīng)該是我們最常見、最普遍的一種場景了。此時(shí)的查看更多承載的功能是二級(jí)頁面的入口，用戶通過點(diǎn)擊來進(jìn)入二級(jí)頁面查看更多信息。這種場景的位置通常有以下三個(gè)。

1. 標(biāo)題右側(cè)

放在版塊標(biāo)題的最右側(cè)的形式已經(jīng)深入用戶心智，屬于最常見的做法。通過文案或者文案+指向性圖標(biāo)的形式為用戶傳達(dá)這里的可點(diǎn)性。并且通常使用字號(hào)、字重及明度進(jìn)行弱化。

放在標(biāo)題右側(cè)的好處是能夠更高效得利用右側(cè)的空間，為其他內(nèi)容節(jié)省更多的高度。而且易于擴(kuò)展，可以與下面講到的幾種形式結(jié)合使用。

不過它的缺點(diǎn)就是非常容易被用戶忽略，點(diǎn)擊感弱。結(jié)合我之前所講的福格行為模型（敲黑板！），一個(gè)人行為的發(fā)生需要同時(shí)具備觸發(fā)、能力和動(dòng)機(jī)三個(gè)條件。

而標(biāo)題右側(cè)弱化的方式并不能很好得滿足這些條件：

• 用戶對(duì)跳轉(zhuǎn)后加載的新頁面內(nèi)容是沒有預(yù)期的，他們不知道新頁面展示的數(shù)量、內(nèi)容是否值得我花時(shí)間跳轉(zhuǎn)，而這些這些不確定性和認(rèn)知壓力很容易產(chǎn)生負(fù)面影響。因此它會(huì)削弱動(dòng)機(jī)，導(dǎo)致點(diǎn)擊欲望不足。
• 查看更多入口通常是被弱化存在的，所以用戶總是被引導(dǎo)著注意那些更顯眼的標(biāo)題和內(nèi)容，這就導(dǎo)致了觸發(fā)不足。
• 查看更多是以文本鏈接的形式存在，即便增加點(diǎn)擊域，我們潛意識(shí)中的點(diǎn)擊目標(biāo)依然是這條小面積文本，根據(jù)費(fèi)茨定律也意味著難以高效得點(diǎn)擊。另外新頁面跳轉(zhuǎn)的整頁加載形式相當(dāng)于增加一條鏈路——將用戶從A點(diǎn)轉(zhuǎn)移到B點(diǎn)。導(dǎo)致增加短期記憶的成本、loading時(shí)間成本。而后續(xù)的返回也增加了交互步驟。這些要求都導(dǎo)致了能力的不足。

綜合來看，在用戶動(dòng)機(jī)不是足夠強(qiáng)大的前提下，點(diǎn)擊行為發(fā)生的可能性，很低。（福格行為模型想了解可以參考我之前的那篇百日挑戰(zhàn)文章，里面講得非常詳細(xì)~）

不過我們依舊可以嘗試其他方式去緩解這些負(fù)面影響。比如拉鉤通過加入主色讓它更加醒目，網(wǎng)易云音樂通過加入形狀容器讓它成為一個(gè)次按鈕。這些做法都可以通過提升層級(jí)、降低成本來增強(qiáng)觸發(fā)和能力。豆瓣通過加入數(shù)字讓用戶對(duì)數(shù)量有所預(yù)期，減弱不確定性的負(fù)面影響。

標(biāo)題右側(cè)的方式適用于，單行可橫向滑動(dòng)版塊以及宮格類布局版塊，并且宮格通常在兩行以內(nèi)，比如上面的這些例子。這些版塊的特征就是所占高度空間夠?。ㄒ黄烈詢?nèi)），從而便于用戶在當(dāng)前位置迅速定位到”查看更多“。

為什么不適用在列表呢？

因?yàn)榱斜淼奶攸c(diǎn)之一就是占據(jù)大量高度空間，不便于迅速定位到“查看更多”，而且列表屬于尼爾森老爺子所提的垂直向下的F型掃視動(dòng)線，所以標(biāo)題右側(cè)的方式更易被忽略。

而列表的處理一般有這四種（放心我后面會(huì)講）：

1. 作為一整頁排序，類似商品列表那樣的信息流；
2. 作為多版塊中的一個(gè)獨(dú)立版塊，置于頁面底部，充分利用列表本身可無限加載的優(yōu)勢；
3. 以展開交互進(jìn)行分段式增量加載；
4. 將查看更多放置在版塊底部，并且控制好一屏內(nèi)的高度。這也是下面所要講的方式——

2. 版塊底部

版塊底部即將查看更多的入口從標(biāo)題右側(cè)轉(zhuǎn)移到所屬版塊的末尾。相比標(biāo)題右側(cè)的形式，版塊底部能夠更好得提升點(diǎn)擊。

為什么這么說？

因?yàn)閺臉邮缴现v，它的優(yōu)點(diǎn)正好彌補(bǔ)了標(biāo)題右側(cè)形式在觸發(fā)和能力上的短板。

• 底部富裕的空間讓”查看更多“由原本被弱化的文字鏈接可以強(qiáng)化為更顯眼的次按鈕，按鈕文字可以通過字號(hào)、字重、明度甚至顏色進(jìn)行強(qiáng)化。另外也可以通過線性或者面型的容器承載文字，讓它看起來更易辨識(shí)和易點(diǎn)。這些方式讓”查看更多“的層級(jí)得到了顯著的提升，我們很難不去注意到它。所以點(diǎn)擊行為的觸發(fā)條件夠足。
• 點(diǎn)擊域面積的大量擴(kuò)增很好得提升了點(diǎn)擊感，便于進(jìn)行高效點(diǎn)擊行為。點(diǎn)擊能力要求得到降低。

這兩個(gè)條件的充分，導(dǎo)致了即便用戶初始動(dòng)機(jī)較弱，也依然具備執(zhí)行點(diǎn)擊行為的可能性。

而從位置上講，底部的位置符合用戶垂直向下的視覺動(dòng)線，所以也更易被注意到。

而版塊底部的缺點(diǎn)依然是新頁面跳轉(zhuǎn)本身的劣勢，短期記憶及加載負(fù)擔(dān)，同時(shí)用戶對(duì)后續(xù)內(nèi)容沒有預(yù)期易引發(fā)壓力。不過airbnb針對(duì)這些問題采用了一個(gè)比較明智的做法，它類似豆瓣那樣，在”顯示更多“后加入了數(shù)字提示，讓用戶對(duì)后續(xù)內(nèi)容的數(shù)量有所預(yù)期，一定程度上降低了不確定性及認(rèn)知壓力產(chǎn)生的負(fù)面情緒。

另外，位置的原因?qū)е滤荒苡糜趩涡谢瑒?dòng)的版塊，不過列表以及宮格都可以考慮使用。當(dāng)然也得視情況具體問題具體分析。

3. 金剛區(qū)

金剛區(qū)是位于首圖banner下的功能、業(yè)務(wù)的聚合版塊，通過宮格布局的圖標(biāo)來承載功能及業(yè)務(wù)的入口。當(dāng)業(yè)務(wù)數(shù)量過多時(shí)，往往會(huì)加入一個(gè)表意”更多“的icon來承載那些非高頻的業(yè)務(wù)，引導(dǎo)用戶點(diǎn)擊來查看更多。

放在這里的好處是能夠通過新頁面承載相當(dāng)多的業(yè)務(wù)內(nèi)容，并且宮格的布局也讓它能被更好得注意到。壞處依舊是上述的新頁面跳轉(zhuǎn)帶來的各種問題。

二、橫向滑動(dòng)場景

自ios11中加入了卡片這個(gè)嶄新的容器后，卡片獨(dú)立可排列的特征就解鎖了橫向更多的空間。用戶可以通過scroll左右滑動(dòng)手勢獲取到更多的內(nèi)容。而這種交互場景即我們經(jīng)常用到的橫向滑動(dòng)場景。

1. 卡片式

布局上通過展示卡片的一部分，暗示用戶可以通過側(cè)滑看到更多。

卡片滑動(dòng)方式兼容性很強(qiáng)。它可以單獨(dú)使用，完完全全得代替新頁面跳轉(zhuǎn)的形式以避免跳轉(zhuǎn)引發(fā)的負(fù)擔(dān)。

它也可以和標(biāo)題右側(cè)或者版塊底部的”查看更多“結(jié)合使用，來覆蓋后續(xù)內(nèi)容過多的情況。而且可以在滑動(dòng)終點(diǎn)增加”查看更多“的卡片來充當(dāng)另一個(gè)入口，以足夠的面積優(yōu)勢提升點(diǎn)擊感，增加二級(jí)頁面的曝光。

比如美團(tuán)酒店的推薦榜單就是將標(biāo)題右側(cè)和卡片滑動(dòng)結(jié)合使用，同時(shí)在終點(diǎn)增加“查看更多”的卡片來作為入口，雙管齊下引導(dǎo)用戶點(diǎn)擊。

喜馬拉雅的直播版塊和淘票票的即將上映版塊則屬于卡片滑動(dòng)單獨(dú)使用，并且也增加了“查看更多”的卡片提升點(diǎn)擊。其中，淘票票和airbnb一樣，通過加入數(shù)字提示的方式來給予用戶對(duì)后續(xù)內(nèi)容的預(yù)期。

2. 金剛區(qū)

通過橫向滑動(dòng)展示更多的業(yè)務(wù)品類，為了讓用戶產(chǎn)生可以橫向滑動(dòng)的認(rèn)知，一般會(huì)使用類似輪播指示器的進(jìn)度條表示當(dāng)前所在位置。

它完全避免了跳轉(zhuǎn)新頁面帶來的各種負(fù)擔(dān)，幫助用戶在當(dāng)前頁面通過滑動(dòng)手勢即可查看到所有內(nèi)容。而缺點(diǎn)則是無法承載更多的業(yè)務(wù)。

三、即時(shí)刷新場景

這里的即時(shí)刷新即我們常見的“換一批”功能。用戶通過點(diǎn)擊“換一批”，實(shí)現(xiàn)當(dāng)前版塊更多內(nèi)容的即時(shí)更換。

這種交互大幅降低了新頁面跳轉(zhuǎn)帶來的弊端，用戶不需要承受多鏈路所帶來的短期記憶和整頁的加載成本，也無需返回。

位置和新頁面跳轉(zhuǎn)的”查看更多“類似，可以放置于標(biāo)題右側(cè)、也可以放置在版塊底部，優(yōu)缺點(diǎn)也基本一致。

但可惜的是這種交互場景通用性不強(qiáng)，由于這種方式下的內(nèi)容被局限在一個(gè)版塊中，無法實(shí)現(xiàn)內(nèi)容的全覽，而且隨機(jī)性很強(qiáng)，所以它更適用于類似猜你喜歡、隨便看看的推薦類版塊，相對(duì)比較局限。

四、展開場景

展開場景有點(diǎn)類似手風(fēng)琴組件的下拉折疊功能，用戶通過點(diǎn)擊直接在當(dāng)前版塊向下展開更多內(nèi)容。

需要注意的是，展開內(nèi)容的數(shù)量通常以一個(gè)增量進(jìn)行分段加載，比如評(píng)論區(qū)中的展開更多，一屏固定展示10個(gè)評(píng)論，當(dāng)用戶點(diǎn)擊”更多“后，會(huì)再次向下加載5條左右的評(píng)論。再點(diǎn)一次會(huì)再加載5條。

這種場景好處在于，相比即時(shí)刷新場景，它能夠更全面得進(jìn)行信息瀏覽和選擇，而且降低新頁面跳轉(zhuǎn)帶來的負(fù)面影響。

壞處是則大幅增加了頁面的長度，增加滾動(dòng)交互負(fù)擔(dān)。所以它所在的版塊位置需要盡量靠后甚至末尾。

這一種展開場景通常還有另外兩種衍生場景，上拉加載和自動(dòng)加載。也就是我在前面所說的列表的前兩個(gè)處理方式。它們由于無限加載的特性，所以僅適用于最底部的列表信息版塊，比如feed流和瀑布流。這部分不在討論范圍之內(nèi)，這里挖個(gè)坑后面再填。

五、總結(jié)

以上就是“查看更多”在不同場景下的運(yùn)用研究，以及各自的優(yōu)缺點(diǎn)及適用情況。當(dāng)然這里僅做粗略總結(jié)，我們設(shè)計(jì)師在平日的項(xiàng)目中也需要盡可能得基于用戶場景及業(yè)務(wù)需求進(jìn)行靈活運(yùn)用！

但愿這篇文章對(duì)你有所幫助。

作者：Andrewchen；微信公眾號(hào)：轉(zhuǎn)行人的設(shè)計(jì)筆記

本文由 @Andrewchen 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。