展開和收起屬于比較細(xì)節(jié)的問題，按照慣性思維，內(nèi)容多了我就折疊一部分，用戶需要看更多內(nèi)容就點(diǎn)擊「展開」，內(nèi)容展開之后，相應(yīng)的還應(yīng)該支持內(nèi)容的「收起」。

整個(gè)流程這樣看起來沒什么毛病，但是卻缺少一個(gè)重要的前提，哪些場(chǎng)景或者什么情況下才需要展開或收起呢？

如果只是單純給出一個(gè)流程，顯然缺乏對(duì)產(chǎn)品邏輯和用戶體驗(yàn)上的思考?？赡芎芏嘣O(shè)計(jì)師之前沒怎么注意過這個(gè)地方的交互邏輯，或者深入思考需要注意的問題，這次借著答疑的機(jī)會(huì)咱們一起來深入探討下。

1、拋開展開和收起

雖然提出的問題是分析展開和收起的運(yùn)用場(chǎng)景，但是我覺得不應(yīng)該一上來就陷入到具體的細(xì)節(jié)里。

這個(gè)問題相對(duì)來說屬于比較小的點(diǎn)，直接鉆到細(xì)節(jié)里會(huì)讓我們只盯著這一小部分，缺少對(duì)全局的思考，因小失大。

盯著已有的設(shè)計(jì)進(jìn)行推導(dǎo)，這樣多少帶有個(gè)人主觀的臆想。先不要盯著具體的展開和收起功能來想場(chǎng)景，反過來想，在設(shè)計(jì)過程中有哪些地方需要這樣的交互邏輯，為什么需要呢？

無論面對(duì)什么樣的設(shè)計(jì)需求，這樣的思考過程會(huì)一直伴隨著我們。

2、先場(chǎng)景后行為

先回到場(chǎng)景上，考慮哪些場(chǎng)景會(huì)觸發(fā)「展開和收起」行為，再具體問題具體分析。

場(chǎng)景一：當(dāng)某段內(nèi)容字?jǐn)?shù)太多，占據(jù)了大面積的空間，如果用戶不想看這些長篇大論，想看下一個(gè)內(nèi)容，要滑動(dòng)屏幕很久才能略過這些內(nèi)容，顯然我們不想給用戶帶來這樣的操作負(fù)擔(dān)，這時(shí)候就可以考慮添加收起功能，把多余的內(nèi)容收起來。

這里的收起需要注意兩點(diǎn)：

• 內(nèi)容被收起不代表被收起的內(nèi)容不重要；
• 收起相對(duì)節(jié)約屏幕空間，用戶更方便上下滑動(dòng)查看內(nèi)容。

場(chǎng)景二：頁面上仍然有很多內(nèi)容，但是這些內(nèi)容有主次之分，我們想讓用戶最先看到前面的內(nèi)容，后面的內(nèi)容可以考慮收起來突出重點(diǎn)并節(jié)省空間。

這里的收起就和場(chǎng)景一有差異，可能被收起的內(nèi)容相對(duì)沒這么重要，只露出重點(diǎn)/熱點(diǎn)內(nèi)容或權(quán)益來吸引用戶，相對(duì)次要的內(nèi)容被收起，這里的收起會(huì)涉及到內(nèi)容重要程度的排序，這種排序就可以體現(xiàn)在排行榜設(shè)計(jì)中。

3、展開然后收起

展開和收起屬于一組行為，看到展開我們必然會(huì)聯(lián)想到收起。展開是為了看到完整的內(nèi)容，收起則是內(nèi)容看完的標(biāo)志，點(diǎn)擊收起可以繼續(xù)下一個(gè)內(nèi)容。

在知乎問答中，我們首先看到的是標(biāo)題的問題，這些問題往往言簡(jiǎn)意賅，通常光看標(biāo)題我們就能知道這個(gè)問題想表達(dá)什么意思。

▲ 標(biāo)題下面的問題簡(jiǎn)介是對(duì)標(biāo)題的進(jìn)一步解釋和補(bǔ)充，這里的簡(jiǎn)介作為說明性文字，就支持展開和收起。當(dāng)簡(jiǎn)介內(nèi)容太多時(shí)，就要考慮折疊一部分簡(jiǎn)介，這樣能保證在首屏上能同時(shí)看到問題和答案。

另外當(dāng)內(nèi)容很多，以信息流的形式呈現(xiàn)，并且需要上下滑動(dòng)來瀏覽時(shí)，就可以考慮使用現(xiàn)展開后收起。

比如在微信朋友圈，如果文字內(nèi)容較多，就會(huì)被收起一部分，想看完整的內(nèi)容則需要點(diǎn)擊「全文」選項(xiàng)，看完后點(diǎn)擊「收起」，內(nèi)容就會(huì)被折疊起來，方便我們繼續(xù)滑動(dòng)瀏覽其他朋友圈。

4、展開后不收起

點(diǎn)完展開看到了全部內(nèi)容，卻沒有收起選項(xiàng)，但是這樣并不影響我們的觀看體驗(yàn)，而且展開這個(gè)動(dòng)作給用戶和頁面帶來的反應(yīng)都很小，不會(huì)讓用戶感到不適。之所以選擇「展開」，一個(gè)重要的原因是因?yàn)槲覀?strong>有想看完整內(nèi)容的強(qiáng)烈需求。在這種意愿的號(hào)召下，我們會(huì)毫不猶豫地選擇展開功能。

▲ 在豆瓣電影介紹頁中，在劇情簡(jiǎn)介區(qū)域會(huì)有「展開」提示，如果我們選擇展開，說明我們有觀看完整簡(jiǎn)介的意愿，并且是主動(dòng)選擇展開，不添加「收起」選項(xiàng)正好避免了給我們?cè)黾硬僮魃系呢?fù)擔(dān)。

另外，當(dāng)內(nèi)容相對(duì)沒那么多，能在一屏上顯示，不需要用戶上下滑動(dòng)太多時(shí)，可以考慮省去收起，比如在QQ群介紹、抖音個(gè)人頁的簡(jiǎn)介等。

 

最后

以上是我對(duì)展開和收起的運(yùn)用場(chǎng)景的一些小思考，主要從場(chǎng)景角度來考慮交互邏輯。

授人以魚不如授人以漁，關(guān)于展開和收起的場(chǎng)景還有很多，希望大家能掌握這樣的思考邏輯，去發(fā)掘更深層的設(shè)計(jì)內(nèi)容，當(dāng)然有問題咱們可以隨時(shí)溝通～

 

原文地址：Clip設(shè)計(jì)夾（公眾號(hào)）

作者：Clippp

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》展開全文后需要支持收起嗎？從運(yùn)用場(chǎng)景分析交互邏輯

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)