交互設計模式分析- 信息流

1. 定義

此處討論的信息流是指:頻繁更新的,以期高效傳達主題或者觀點的包含不同類型或主題的圖文消息的頁面模塊。

信息流(Newsfeed)一詞最早來源于Facebook在2006年對App功能所進行的一次重大更新,將好友的最新動態以時間線的順序顯示在首頁。這一做法最初受到許多用戶的抵制和抨擊,但漸漸的它卻成為了Facebook的標志性功能,并開始廣泛應用于其他移動產品中,成為確保用戶留存的一大利器。

Josh Clark曾分析過移動應用用戶的三種心態:1)我有個微任務要做;2)我想看看附近的情況;3)我有些無聊。不斷更新內容的信息流無疑完美契合了場景2和3的需求,配合搜索與分類,也可以滿足特定場景1的需求。


信息流界面示例


2. 模式構成

單個信息條目的典型構成



一類/組信息流的典型構成



設計要點:有效信息的高效展示

a. 有效信息:

這里的“有效信息”是指根據具體的業務和用戶需求所提煉出的信息種類;

b. 高效展示:

信息呈現方式越是結構化和精煉,人們就能夠更快地感知和理解

我們所選用的展現方式,能夠影響用戶對界面進行認知的效率,因此在進行信息條目設計時,我們需要:

1)了解用戶的心智模型

2)確定優先級,并對信息進行歸類和分組

3)適當使用視覺“線索”


信息條目構成示意(左:Etsy,右:Quora)


3. 布局

典型布局

垂直信息流



水平信息流



比較常見的情況是,這兩種布局模式在一個信息流中相互穿插使用。


設計要點:效率與感染力之間的平衡

效率:

1)充分利用首屏的中上部 - 價值最高的展示區域

2)綜合考慮運營量、首要信息的類型、可用空間大小選擇整體布局方式

感染力:

《思考快與慢》中將人腦的活動分為兩個系統,系統一(快思考 - 無意識的直覺思維)和系統二(慢思考 - 有意識的受控思維)。系統一是人類感知和行為的主要控制器,自主發生,無需費力,非常擅長于聯想。

給予媒體更大的空間,充分利用系統一,加強與用戶間的情感聯系:

1)圖像比文字更能調動情緒

2)直視用戶的人臉最具感染力


效率與感染力的權衡 示意-Instagram


4. 交互

在瀏覽信息流的過程中,主要的交互事件有:1)上拉加載 2)下拉刷新 3)點擊展開 4)切換視圖 5)通過按鈕進行相關操作。在常規交互模式之外,我們可以適當考慮以下幾個方面:

趣味性

讓瀏覽過程不僅是機械性地滑動視圖;在用戶可能感覺無聊的時候(加載時;刷新完所有內容時),適時地采用一些動畫。

便捷VS沉浸

在滑動過程中,“欄“們是固定還是隱藏?

當信息層級扁平時,可以考慮在滑動過程中對導航進行隱藏,以將更多的頁面空間留給信息流。



手勢的運用

為基于界面的導航和操作提供補充性質的快捷手勢:如右滑返回。

尊重用戶的瀏覽習慣

頁面布局改版/或設計與常規瀏覽方式不同時,提供視圖切換的選項,讓用戶能夠回到自己的“舒適區”。



巧妙地吸引注意力

空間緊張的情況下,使用微動效使入口更加引人注目。



最后,好的內容需要精心的設計為之提供舞臺,好的設計也需要精彩內容的填充。設計信息流,不僅僅需要為內容搭好框架,也需要根據內容的來源確定真實內容的規格參數,避免用戶所見與構想的偏差。


封面圖基于CC0協議

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網絡請求組件 FMDB本地數據庫組件 SD...
    陽明AGI閱讀 16,008評論 3 119
  • 期中考試結束了,為了讓家長更好的了解孩子在學校的學習、成長。家長會是很有必要開的。下面是中心小學六一班家長會上孩子...
    菩提花香閱讀 1,952評論 0 0
  • 休言一醉解千愁,醉睇空斛愁未休。 攜手并肩多日月,笑嗔嬉怒幾春秋。 橫紋已渡劍眉岸,華發貫生云鬢頭。 離淚難干秋已...
    Hanna_20af閱讀 385評論 0 0
  • 從昨天還背著書包唱著歌 考試不得雙百都羞愧難當 到現在只要六十分就謝天謝地 不掛科就是萬事大吉 從小到大的我們經歷...
    米布私人檔案館閱讀 279評論 0 0
  • 在《美女與野獸》(Beauty and the Beast )映禮上,看看曾經的小美女和野獸如今··· 艾瑪·沃特...
    獨秀荷花閱讀 300評論 0 0