社會(huì)化網(wǎng)絡(luò)的核心,信息內(nèi)容設(shè)計(jì)
在我們生活中,不僅僅有書、雜志、報(bào)紙、電視等等這些傳統(tǒng)媒體供我們獲取各種信息,而且還有電腦網(wǎng)絡(luò)、移動(dòng)互聯(lián)網(wǎng)等這些網(wǎng)絡(luò)媒介,使得各種信息的獲取更為便捷。我們可以通過各類的社交網(wǎng)絡(luò),來了解朋友、同學(xué)、同事、家人,他們又更新了什么新動(dòng)態(tài),發(fā)了什么新照片,去哪里吃飯了,推薦什么東西好用。。。等等。
所以,信息(FEED)是用戶信息獲取的來源,是SNS網(wǎng)站上非常關(guān)鍵的元素,在這類網(wǎng)站中,F(xiàn)EED就是那些信息墻,它會(huì)給我們推送各類動(dòng)態(tài)信息,如facebook的wall、開心上的好友動(dòng)態(tài)。
本質(zhì)上,從信息設(shè)計(jì)的角度來說,無論是傳統(tǒng)的平面媒體,還是SNS網(wǎng)站中的FEED,都要考慮到信息的易讀性和信息獲取的效率(特別是在信息紛繁復(fù)雜的怎么快速讓用戶選擇他需要的內(nèi)容),同時(shí)結(jié)合社交網(wǎng)絡(luò)的特性來分析如何去更好設(shè)計(jì)的信息獲取的來源 — FEED。如何提高信息的可讀性和信息獲取效率,當(dāng)然這兩者之間相互聯(lián)系,易讀性強(qiáng)自然帶來效率的提高,我們通過幾個(gè)例子來具體分析說明。
(一)信息區(qū)塊感
對(duì)比Facebook和開心的feed,用戶的識(shí)別,前者直接通過頭像照片能夠清晰辨認(rèn)信息的來源,而后者只有用戶名,相對(duì)來說,圖片更容易行程明顯的區(qū)塊感,識(shí)別性高于文字。
然后我們?cè)侔堰@兩個(gè)頁(yè)面處理成灰框模式,來看下更清晰的信息布局(推薦更快捷的方式:原型工具wirify,可以將任意網(wǎng)頁(yè)轉(zhuǎn)換成線框圖以觀察布局)。前者的信息區(qū)塊感更強(qiáng),信息布局整齊;后者的信息相對(duì)比較散亂,容易造成用戶視線的跳躍。因此我們?cè)谠O(shè)計(jì)中,要對(duì)不同信息模塊分區(qū)塊布局,相同的內(nèi)容、功能、操作可以各自區(qū)塊劃分,避免各個(gè)信息點(diǎn)太多太散亂。
Tumblr和輕博客,則是在視覺上通過明顯的色塊區(qū)分來強(qiáng)調(diào)信息區(qū)塊,能夠明顯感受到內(nèi)容清晰,閱讀順暢,提高獲取信息的效率。
(二)提供信息分類的過濾
在一大片信息密集的頁(yè)面中,就如在一片七嘴八舌的充滿各種聲音的場(chǎng)合,如何快速選擇你所需要的信息?按照我們的習(xí)慣,我們會(huì)直接找到感興趣的人,或者感興趣的話題圈子去交流。
同樣在我們?cè)O(shè)計(jì)中,當(dāng)信息的豐富量達(dá)到一定程度時(shí),需要把信息分組,并且提供信息的篩選,有對(duì)信息來源的分組,對(duì)內(nèi)容的分組,對(duì)內(nèi)容類型的分類等等。
(三)重點(diǎn)突出,清晰的信息層次感
我們?cè)谛r(shí)候?qū)W語(yǔ)文的時(shí)候總是有一項(xiàng)提煉主要內(nèi)容,其實(shí)這對(duì)于我們?cè)谠O(shè)計(jì)信息的時(shí)候也很有幫助,當(dāng)我們能夠把最主要的信息提煉出來的時(shí)候,也就分清了信息的優(yōu)先層級(jí),決定了之后的信息層次體現(xiàn)。
如果把sns網(wǎng)站中的feed按照這個(gè)方式來提煉,那么每條信息可以重點(diǎn)簡(jiǎn)化為“誰(shuí)說了什么,在什么時(shí)間(什么地點(diǎn)/通過什么方式)”當(dāng)然sns是少不了用戶的互動(dòng),因此還有一個(gè)信息互動(dòng)模塊??偨Y(jié)每條信息的構(gòu)成主要由“人+內(nèi)容+時(shí)間(地點(diǎn)/來源/方式)+信息互動(dòng)”。
一般來說,我們會(huì)把“人”和“內(nèi)容”以突出重點(diǎn)顯示,“時(shí)間(地點(diǎn)/來源/方式)”等輔助信息以相對(duì)弱化的顯示,使信息層次更清晰。
再來對(duì)比QQ空間和新浪微博,對(duì)于信息互動(dòng)區(qū)塊的處理有比較大區(qū)別,從突出核心信息的角度出發(fā),前者在feed中穿插顯示了部分評(píng)論內(nèi)容,而微博則是不出現(xiàn)評(píng)論內(nèi)容,相對(duì)來說后者更為突出信息內(nèi)容的本身,對(duì)于用戶獲取信息的干擾更少。但是兩者是不同定位不同類型的產(chǎn)品,因此前者有可能從提高用戶互動(dòng)的考慮,需要加重信息互動(dòng)的重要性。
因此,對(duì)于突出核心內(nèi)容,體現(xiàn)信息層次來說,可能需要平衡產(chǎn)品的各方面考量的情況下,盡量簡(jiǎn)潔突出重點(diǎn)。
(四)減少在獲取主要內(nèi)容時(shí)頁(yè)面的跳轉(zhuǎn)
目前各類社交網(wǎng)站,對(duì)于feed中包含的圖片視頻等,基本上都是在本頁(yè)面顯示,避免新開頁(yè)面,減少信息瀏覽的中斷。對(duì)于評(píng)論等內(nèi)容,也是點(diǎn)擊后展開,當(dāng)評(píng)論數(shù)超過一定數(shù)量,才點(diǎn)擊去新頁(yè)面查看。
甚至twitter有一次改版對(duì)于相關(guān)內(nèi)容的處理,當(dāng)你點(diǎn)擊一條feed時(shí),右側(cè)的內(nèi)容面板會(huì)顯示與此用戶相關(guān)的其他內(nèi)容,包括具體內(nèi)容,該用戶發(fā)布的其他內(nèi)容等等。這些處理能夠讓我們?cè)跒g覽信息時(shí)盡量減少跳到新頁(yè)面,保證瀏覽信息的流暢性。
本文地址:http://m.likemindfilms.com/tutorial/di1518.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏