展開全文后需要支持收起嗎?從運用場景分析交互邏輯

6 評論 11537 瀏覽 12 收藏 8 分鐘

編輯導語:為什么有些產品支持全文收起,有些產品則不支持?此時若要對這個問題進行深入剖析,我們需要從場景出發,思考哪些場景下會觸發“展開”與“收起”行為。本篇文章里,作者針對這一交互設計及其運用場景做了分析,一起來看一下。

今天為大家分享的是「展開和收起」的運用場景。文章靈感來源于一位讀者的提問?:

發現在一些產品中用戶點擊展開全文后就不再支持收起,如網易云搜索頁面、豆瓣短評、QQ群介紹頁等。而有些則是點擊展開全文后則仍然保留收起功能,如朋友圈、知乎、得到關注的動態等。想問下,是什么原因導致交互上的差異?

展開全文后需要支持收起嗎?從運用場景分析交互邏輯

展開和收起屬于比較細節的問題,按照慣性思維,內容多了我就折疊一部分,用戶需要看更多內容就點擊「展開」,內容展開之后,相應的還應該支持內容的「收起」。

整個流程這樣看起來沒什么毛病,但是卻缺少一個重要的前提,哪些場景或者什么情況下才需要展開或收起呢?

如果只是單純給出一個流程,顯然缺乏對產品邏輯和用戶體驗上的思考。可能很多設計師之前沒怎么注意過這個地方的交互邏輯,或者深入思考需要注意的問題,這次借著答疑的機會咱們一起來深入探討下。

一、拋開展開和收起

雖然提出的問題是分析展開和收起的運用場景,但是我覺得不應該一上來就陷入到具體的細節里。

這個問題相對來說屬于比較小的點,直接鉆到細節里會讓我們只盯著這一小部分,缺少對全局的思考,因小失大

盯著已有的設計進行推導,這樣多少帶有個人主觀的臆想。先不要盯著具體的展開和收起功能來想場景,反過來想,在設計過程中有哪些地方需要這樣的交互邏輯,為什么需要呢?

無論面對什么樣的設計需求,這樣的思考過程會一直伴隨著我們。

二、先場景后行為

先回到場景上,考慮哪些場景會觸發「展開和收起」行為,再具體問題具體分析。

場景一:當某段內容字數太多,占據了大面積的空間,如果用戶不想看這些長篇大論,想看下一個內容,要滑動屏幕很久才能略過這些內容,顯然我們不想給用戶帶來這樣的操作負擔,這時候就可以考慮添加收起功能,把多余的內容收起來。

這里的收起需要注意兩點:

  1. 內容被收起不代表被收起的內容不重要;
  2. 收起相對節約屏幕空間,用戶更方便上下滑動查看內容。

場景二:頁面上仍然有很多內容,但是這些內容有主次之分,我們想讓用戶最先看到前面的內容,后面的內容可以考慮收起來突出重點并節省空間。

這里的收起就和場景一有差異,可能被收起的內容相對沒這么重要,只露出重點/熱點內容或權益來吸引用戶,相對次要的內容被收起,這里的收起會涉及到內容重要程度的排序,這種排序就可以體現在排行榜設計中。

三、展開然后收起

展開和收起屬于一組行為,看到展開我們必然會聯想到收起。展開是為了看到完整的內容,收起則是內容看完的標志,點擊收起可以繼續下一個內容。

在知乎問答中,我們首先看到的是標題的問題,這些問題往往言簡意賅,通常光看標題我們就能知道這個問題想表達什么意思。

展開全文后需要支持收起嗎?從運用場景分析交互邏輯

▲ 標題下面的問題簡介是對標題的進一步解釋和補充,這里的簡介作為說明性文字,就支持展開和收起。當簡介內容太多時,就要考慮折疊一部分簡介,這樣能保證在首屏上能同時看到問題和答案。

另外當內容很多,以信息流的形式呈現,并且需要上下滑動來瀏覽時,就可以考慮使用現展開后收起。

比如在微信朋友圈,如果文字內容較多,就會被收起一部分,想看完整的內容則需要點擊「全文」選項,看完后點擊「收起」,內容就會被折疊起來,方便我們繼續滑動瀏覽其他朋友圈。

四、展開后不收起

點完展開看到了全部內容,卻沒有收起選項,但是這樣并不影響我們的觀看體驗,而且展開這個動作給用戶和頁面帶來的反應都很小,不會讓用戶感到不適。

之所以選擇「展開」,一個重要的原因是因為我們有想看完整內容的強烈需求。在這種意愿的號召下,我們會毫不猶豫地選擇展開功能。

展開全文后需要支持收起嗎?從運用場景分析交互邏輯

▲在豆瓣電影介紹頁中,在劇情簡介區域會有「展開」提示,如果我們選擇展開,說明我們有觀看完整簡介的意愿,并且是主動選擇展開,不添加「收起」選項正好避免了給我們增加操作上的負擔。

另外,當內容相對沒那么多,能在一屏上顯示,不需要用戶上下滑動太多時,可以考慮省去收起,比如在QQ群介紹、抖音個人頁的簡介等。

五、最后

以上是我對展開和收起的運用場景的一些小思考,主要從場景角度來考慮交互邏輯。

授人以魚不如授人以漁,關于展開和收起的場景還有很多,希望大家能掌握這樣的思考邏輯,去發掘更深層的設計內容,當然有問題咱們可以隨時溝通~

慢慢來比較快,希望對你有幫助~

#專欄作家#

作者:Clippp,微信公眾號:Clip設計夾。每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。

本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 影響滑動查看其他feed流就要有收起,不影響查看其他就不用有收起

    來自北京 回復
  2. 其實只講了一個事情,展開的內容多會影響滑動瀏覽就加“收起”,內容少不影響繼續瀏覽的就不加“收起”

    來自廣東 回復
  3. 感覺沒講明白

    回復
  4. 沒想到展開收起里也有這么多小巧思

    來自福建 回復
    1. 細節見真章~

      來自北京 回復
  5. 感覺也就是內容少的情況下,可以不用收起,內容多的情況下才用收起。你說那個“不添加收起選項是避免增加操作負擔”,感覺也不一定吧,不操作就好了,有啥負擔。

    來自廣東 回復