您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 交互設(shè)計 >> 瀏覽設(shè)計教程

資訊類產(chǎn)品閱讀列表的交互設(shè)計思考

列表,定義為:以表格為容器,裝載著文字或圖表的一種形式。根據(jù)產(chǎn)品類型的不同,大部分都有其各自樣式的列表,有些成為產(chǎn)品的主體,有些則為其他頁面的輔助。列表設(shè)計的主要目的,就是讓用戶快速瀏覽、掃描,從中選擇出自己想要“費(fèi)力”點(diǎn)擊并“費(fèi)時”去仔細(xì)閱讀的內(nèi)容。

與傳統(tǒng)閱讀平臺比較,閱讀列表就像是實體書中的目錄。小說的目錄簡潔:標(biāo)題+頁碼;雜志的目錄則相對豐富:標(biāo)題、副標(biāo)題、圖片、摘要、頁碼,精致的排版,有些甚至還包括廣告。每種內(nèi)容都會有適合其展現(xiàn)的列表形式,資訊類產(chǎn)品的閱讀列表需要考慮的幾點(diǎn):

1.    視覺重心

把產(chǎn)品希望用戶看到的內(nèi)容凸顯出來,引導(dǎo)用戶去閱讀那些重點(diǎn)推薦的內(nèi)容。

在閱讀信息的時候,常常受到周圍文字和圖像的干擾,并不是那么順暢,根據(jù)人眼視覺心理,會有幾種容易引導(dǎo)或者說干擾到視覺移動方向的特點(diǎn)。

 1)  視線引導(dǎo)

a.  一般,暖色比冷色,鮮艷比暗淡,更容易吸引視線。

一般閱讀時,視線是從左到右從上到下的,但顏色的引導(dǎo)會改變視線的順序。合理運(yùn)用能給列表以重點(diǎn),反之則會破壞用戶的心理預(yù)期,造成閱讀的負(fù)擔(dān),影響認(rèn)知效率。

顏色的引導(dǎo)會改變視線的順序

b.  圖片比文字更吸引人。

圖片在視覺傳達(dá)上能輔助文字,幫助理解,更可以使版面立體、真實。

圖片在視覺傳達(dá)上能輔助文字

大多數(shù)資訊類列表中都含有文章配圖的縮略圖??s略圖的擺放位置,根據(jù)產(chǎn)品定位也有所不同。

更專注于資訊本身較為穩(wěn)重的產(chǎn)品,傾向于將縮略圖放在新聞標(biāo)題的后面。這類資訊內(nèi)容的圖片質(zhì)量往往較為一般,同時,能夠讓用戶處于較平穩(wěn)的心態(tài)閱讀每一條標(biāo)題,從而選擇自己喜歡的內(nèi)容,圖片只期待起到輔助標(biāo)題的作用。

而對于偏娛樂化,碎片化的資訊類產(chǎn)品,縮略圖放在標(biāo)題前面能夠更直觀的傳達(dá)出內(nèi)容的含義,從而縮短用戶理解文字標(biāo)題的時間,讓用戶的時間順著右側(cè)的圖片向下快速瀏覽,起到快速篩選的目的。

縮略圖的擺放位置,根據(jù)產(chǎn)品定位也有 所不同c.  環(huán)形能夠匯聚視線

環(huán)形能夠匯聚視線 d. 視線會隨箭頭,或數(shù)字或編號移動。

規(guī)律的箭頭或數(shù)字排布,容易造成頁面一側(cè)過重,或有強(qiáng)烈的提示意味,要注意頁面的平穩(wěn)。

視線會隨箭頭,或數(shù)字或編號移動

2)  突出

如果需要你認(rèn)為用戶會感興趣的文章,或者花了很多功夫設(shè)計的部分真的吸引到他們的注意,那就要想辦法把這些部分“突出&rd

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://likemindfilms.com/tutorial/id1289.html
介紹幾款書簽式響應(yīng)性設(shè)計測試工具
網(wǎng)頁交互設(shè)計細(xì)節(jié)的幾大“凡是”
圖趣網(wǎng)微信
建議反饋
×