交互設(shè)計模式分析- 信息流

1. 定義

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

信息流(Newsfeed)一詞最早來源于Facebook在2006年對App功能所進(jìn)行的一次重大更新沉馆,將好友的最新動態(tài)以時間線的順序顯示在首頁冠绢。這一做法最初受到許多用戶的抵制和抨擊抚吠,但漸漸的它卻成為了Facebook的標(biāo)志性功能,并開始廣泛應(yīng)用于其他移動產(chǎn)品中弟胀,成為確保用戶留存的一大利器楷力。

Josh Clark曾分析過移動應(yīng)用用戶的三種心態(tài):1)我有個微任務(wù)要做;2)我想看看附近的情況孵户;3)我有些無聊萧朝。不斷更新內(nèi)容的信息流無疑完美契合了場景2和3的需求,配合搜索與分類夏哭,也可以滿足特定場景1的需求检柬。


信息流界面示例


2. 模式構(gòu)成

單個信息條目的典型構(gòu)成



一類/組信息流的典型構(gòu)成



設(shè)計要點:有效信息的高效展示

a. 有效信息:

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

b. 高效展示:

信息呈現(xiàn)方式越是結(jié)構(gòu)化和精煉竖配,人們就能夠更快地感知和理解

我們所選用的展現(xiàn)方式何址,能夠影響用戶對界面進(jìn)行認(rèn)知的效率酱固,因此在進(jìn)行信息條目設(shè)計時,我們需要:

1)了解用戶的心智模型

2)確定優(yōu)先級头朱,并對信息進(jìn)行歸類和分組

3)適當(dāng)使用視覺“線索”


信息條目構(gòu)成示意(左:Etsy运悲,右:Quora)


3. 布局

典型布局

垂直信息流



水平信息流



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


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

效率:

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

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

感染力:

《思考快與慢》中將人腦的活動分為兩個系統(tǒng)烁巫,系統(tǒng)一(快思考 - 無意識的直覺思維)和系統(tǒng)二(慢思考 - 有意識的受控思維)署隘。系統(tǒng)一是人類感知和行為的主要控制器,自主發(fā)生亚隙,無需費力磁餐,非常擅長于聯(lián)想。

給予媒體更大的空間阿弃,充分利用系統(tǒng)一诊霹,加強(qiáng)與用戶間的情感聯(lián)系:

1)圖像比文字更能調(diào)動情緒

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


效率與感染力的權(quán)衡 示意-Instagram


4. 交互

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

趣味性

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

便捷VS沉浸

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

當(dāng)信息層級扁平時,可以考慮在滑動過程中對導(dǎo)航進(jìn)行隱藏旁赊,以將更多的頁面空間留給信息流桦踊。



手勢的運(yùn)用

為基于界面的導(dǎo)航和操作提供補(bǔ)充性質(zhì)的快捷手勢:如右滑返回。

尊重用戶的瀏覽習(xí)慣

頁面布局改版/或設(shè)計與常規(guī)瀏覽方式不同時彤恶,提供視圖切換的選項钞钙,讓用戶能夠回到自己的“舒適區(qū)”。



巧妙地吸引注意力

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



最后瘫怜,好的內(nèi)容需要精心的設(shè)計為之提供舞臺术徊,好的設(shè)計也需要精彩內(nèi)容的填充。設(shè)計信息流鲸湃,不僅僅需要為內(nèi)容搭好框架赠涮,也需要根據(jù)內(nèi)容的來源確定真實內(nèi)容的規(guī)格參數(shù)子寓,避免用戶所見與構(gòu)想的偏差。


封面圖基于CC0協(xié)議

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末笋除,一起剝皮案震驚了整個濱河市斜友,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌垃它,老刑警劉巖鲜屏,帶你破解...
    沈念sama閱讀 218,682評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異国拇,居然都是意外死亡洛史,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評論 3 395
  • 文/潘曉璐 我一進(jìn)店門酱吝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來也殖,“玉大人,你說我怎么就攤上這事务热∫涫龋” “怎么了?”我有些...
    開封第一講書人閱讀 165,083評論 0 355
  • 文/不壞的土叔 我叫張陵崎岂,是天一觀的道長霎褐。 經(jīng)常有香客問我,道長该镣,這世上最難降的妖魔是什么冻璃? 我笑而不...
    開封第一講書人閱讀 58,763評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮损合,結(jié)果婚禮上省艳,老公的妹妹穿的比我還像新娘。我一直安慰自己嫁审,他們只是感情好跋炕,可當(dāng)我...
    茶點故事閱讀 67,785評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著律适,像睡著了一般辐烂。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上捂贿,一...
    開封第一講書人閱讀 51,624評論 1 305
  • 那天纠修,我揣著相機(jī)與錄音,去河邊找鬼厂僧。 笑死扣草,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播辰妙,決...
    沈念sama閱讀 40,358評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼鹰祸,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了密浑?” 一聲冷哼從身側(cè)響起蛙婴,我...
    開封第一講書人閱讀 39,261評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎尔破,沒想到半個月后街图,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,722評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡呆瞻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年台夺,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片痴脾。...
    茶點故事閱讀 40,030評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡颤介,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出赞赖,到底是詐尸還是另有隱情滚朵,我是刑警寧澤,帶...
    沈念sama閱讀 35,737評論 5 346
  • 正文 年R本政府宣布前域,位于F島的核電站辕近,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏匿垄。R本人自食惡果不足惜移宅,卻給世界環(huán)境...
    茶點故事閱讀 41,360評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望椿疗。 院中可真熱鬧漏峰,春花似錦、人聲如沸届榄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,941評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽铝条。三九已至靖苇,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間班缰,已是汗流浹背贤壁。 一陣腳步聲響...
    開封第一講書人閱讀 33,057評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留鲁捏,地道東北人芯砸。 一個月前我還...
    沈念sama閱讀 48,237評論 3 371
  • 正文 我出身青樓萧芙,卻偏偏與公主長得像给梅,于是被迫代替她去往敵國和親假丧。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,976評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 1动羽、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,982評論 3 119
  • 期中考試結(jié)束了包帚,為了讓家長更好的了解孩子在學(xué)校的學(xué)習(xí)、成長运吓。家長會是很有必要開的渴邦。下面是中心小學(xué)六一班家長會上孩子...
    菩提花香閱讀 1,933評論 0 0
  • 休言一醉解千愁,醉睇空斛愁未休拘哨。 攜手并肩多日月谋梭,笑嗔嬉怒幾春秋。 橫紋已渡劍眉岸倦青,華發(fā)貫生云鬢頭瓮床。 離淚難干秋已...
    Hanna_20af閱讀 379評論 0 0
  • 從昨天還背著書包唱著歌 考試不得雙百都羞愧難當(dāng) 到現(xiàn)在只要六十分就謝天謝地 不掛科就是萬事大吉 從小到大的我們經(jīng)歷...
    米布私人檔案館閱讀 267評論 0 0
  • 在《美女與野獸》(Beauty and the Beast )映禮上癣亚,看看曾經(jīng)的小美女和野獸如今··· 艾瑪·沃特...
    獨秀荷花閱讀 291評論 0 0