您當前位置:圖趣網(Tuquu) >> 網頁設計教程 >> 設計理論 >> 瀏覽設計教程

社會化網絡的核心,信息內容設計

 

        在我們生活中,不僅僅有書、雜志、報紙、電視等等這些傳統(tǒng)媒體供我們獲取各種信息,而且還有電腦網絡、移動互聯(lián)網等這些網絡媒介,使得各種信息的獲取更為便捷。我們可以通過各類的社交網絡,來了解朋友、同學、同事、家人,他們又更新了什么新動態(tài),發(fā)了什么新照片,去哪里吃飯了,推薦什么東西好用。。。等等。

 

所以,信息(FEED)是用戶信息獲取的來源,是SNS網站上非常關鍵的元素,在這類網站中,F(xiàn)EED就是那些信息墻,它會給我們推送各類動態(tài)信息,如facebook的wall、開心上的好友動態(tài)。

本質上,從信息設計的角度來說,無論是傳統(tǒng)的平面媒體,還是SNS網站中的FEED,都要考慮到信息的易讀性信息獲取的效率(特別是在信息紛繁復雜的怎么快速讓用戶選擇他需要的內容),同時結合社交網絡的特性來分析如何去更好設計的信息獲取的來源 — FEED。如何提高信息的可讀性和信息獲取效率,當然這兩者之間相互聯(lián)系,易讀性強自然帶來效率的提高,我們通過幾個例子來具體分析說明。

 

        (一)信息區(qū)塊感

        對比Facebook和開心的feed,用戶的識別,前者直接通過頭像照片能夠清晰辨認信息的來源,而后者只有用戶名,相對來說,圖片更容易行程明顯的區(qū)塊感,識別性高于文字。

        然后我們再把這兩個頁面處理成灰框模式,來看下更清晰的信息布局(推薦更快捷的方式:原型工具wirify,可以將任意網頁轉換成線框圖以觀察布局)。前者的信息區(qū)塊感更強,信息布局整齊;后者的信息相對比較散亂,容易造成用戶視線的跳躍。因此我們在設計中,要對不同信息模塊分區(qū)塊布局,相同的內容、功能、操作可以各自區(qū)塊劃分,避免各個信息點太多太散亂。

        Tumblr和輕博客,則是在視覺上通過明顯的色塊區(qū)分來強調信息區(qū)塊,能夠明顯感受到內容清晰,閱讀順暢,提高獲取信息的效率。

 

(二)提供信息分類的過濾

        在一大片信息密集的頁面中,就如在一片七嘴八舌的充滿各種聲音的場合,如何快速選擇你所需要的信息?按照我們的習慣,我們會直接找到感興趣的人,或者感興趣的話題圈子去交流。

同樣在我們設計中,當信息的豐富量達到一定程度時,需要把信息分組,并且提供信息的篩選,有對信息來源的分組,對內容的分組,對內容類型的分類等等。

 

 

 

 

 

(三)重點突出,清晰的信息層次感

我們在小時候學語文的時候總是有一項提煉主要內容,其實這對于我們在設計信息的時候也很有幫助,當我們能夠把最主要的信息提煉出來的時候,也就分清了信息的優(yōu)先層級,決定了之后的信息層次體現(xiàn)。

        如果把sns網站中的feed按照這個方式來提煉,那么每條信息可以重點簡化為“誰說了什么,在什么時間(什么地點/通過什么方式)”當然sns是少不了用戶的互動,因此還有一個信息互動模塊??偨Y每條信息的構成主要由“人+內容+時間(地點/來源/方式)+信息互動”。

一般來說,我們會把“人”和“內容”以突出重點顯示,“時間(地點/來源/方式)”等輔助信息以相對弱化的顯示,使信息層次更清晰。

        再來對比QQ空間和新浪微博,對于信息互動區(qū)塊的處理有比較大區(qū)別,從突出核心信息的角度出發(fā),前者在feed中穿插顯示了部分評論內容,而微博則是不出現(xiàn)評論內容,相對來說后者更為突出信息內容的本身,對于用戶獲取信息的干擾更少。但是兩者是不同定位不同類型的產品,因此前者有可能從提高用戶互動的考慮,需要加重信息互動的重要性。

因此,對于突出核心內容,體現(xiàn)信息層次來說,可能需要平衡產品的各方面考量的情況下,盡量簡潔突出重點。

 

(四)減少在獲取主要內容時頁面的跳轉

 

 

        目前各類社交網站,對于feed中包含的圖片視頻等,基本上都是在本頁面顯示,避免新開頁面,減少信息瀏覽的中斷。對于評論等內容,也是點擊后展開,當評論數(shù)超過一定數(shù)量,才點擊去新頁面查看。

 

 

        甚至twitter有一次改版對于相關內容的處理,當你點擊一條feed時,右側的內容面板會顯示與此用戶相關的其他內容,包括具體內容,該用戶發(fā)布的其他內容等等。這些處理能夠讓我們在瀏覽信息時盡量減少跳到新頁面,保證瀏覽信息的流暢性。

[教程作者:admin]
免責聲明:本站文章系圖趣網整理發(fā)布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://www.likemindfilms.com/tutorial/di1518.html
如何成為配色達人
不要為了1%用戶的需求去影響99%用戶的正常操作
圖趣網微信
建議反饋
×