社交模組裡的動態卡片,怎麼設計?

首頁 > 科技

社交模組裡的動態卡片,怎麼設計?

來源:減肥餐搭配 釋出時間:2023-06-10 00:20

在社交類APP或APP的社交模組中,我們常常可以看到動態卡片這類資訊展現方式的利用,這類元件的設計常以圖文排版為主,雖然不那麼複雜,但想設計得當,卻仍需注意設計上的一些細節。本篇文章裡,作者就對動態卡片的設計方式進行了解析,一起來看看吧。

一、元件介紹

動態卡片是用來承載一段、一篇、一條UGC (User Generated Content,使用者生成內容) 的資訊展示形式,主要出現在社交類APP,或任何APP的社交模組中。

動態卡片多以圖文排版為主,其排版本身並不複雜,但一旦我們說到排版不復雜,就意味著「親密性」在排版中的重要性前所未有的高,因為越簡單的排版越容易感知到親密性的偏差。

所以簡單的元件想要排好仍是有不少需要注意的點的,下面我們就一起來看看。

二、使用場景

動態卡片的使用場景相對來說仍是比較單一,社交類APP是其主要場景。但目前國內APP的生態習性導致你可能在任何APP中看到社交模組,一旦有社交模組,就必然也會隨之出現動態卡片。

在社交模組中,任何使用者釋出的帖子(post)、推文(tweet)、朋友圈(moment)、筆記(Note)或類似的即時分享型、並可讓其它使用者與之進行互動的內容,我們統稱為「動態」,這些地方都需要用到動態卡片。

三、設計要點

1. 佈局

動態卡片的主流佈局有兩種,傳統社交APP基本上都使用列表流,即一行只展示一個動態的流式佈局;但隨社交產品的越發垂直和整合,一些APP也開始使用瀑布流式佈局來讓頁面一次承載更多的卡片。

1)寬鬆佈局——列表流

列表流是我們常見的動態卡片佈局形式,儘管跟傳統的等高列表流也有所不同,它的高度實際上彈性相當大,但大致上依然遵循一行展示一個動態的核心思想。

這種佈局的優點在於能夠完整地 (或相對完整地) 展示動態釋出的所有內容,缺點在於瀏覽效率比較低,你必須看完這一條才能滑動去看下一條。

這樣的特性讓列表流非常適合更陶醉的動態瀏覽,使用者處於更鬆弛的瀏覽狀態,這種狀態非常適合文字閱讀,所以我們可以從日常使用的APP中體會到,大多數採用列表流的動態,都以文字內容為主,或至少沒有明顯的圖片/富媒體社交傾向。

上一篇:中國網紅經濟... 下一篇:新博88
猜你喜歡
熱門閱讀
同類推薦