資訊類產(chǎn)品閱讀列表的交互設(shè)計(jì)思考
列表,定義為:以表格為容器,裝載著文字或圖表的一種形式。根據(jù)產(chǎn)品類型的不同,大部分都有其各自樣式的列表,有些成為產(chǎn)品的主體,有些則為其他頁(yè)面的輔助。列表設(shè)計(jì)的主要目的,就是讓用戶快速瀏覽、掃描,從中選擇出自己想要“費(fèi)力”點(diǎn)擊并“費(fèi)時(shí)”去仔細(xì)閱讀的內(nèi)容。
與傳統(tǒng)閱讀平臺(tái)比較,閱讀列表就像是實(shí)體書(shū)中的目錄。小說(shuō)的目錄簡(jiǎn)潔:標(biāo)題+頁(yè)碼;雜志的目錄則相對(duì)豐富:標(biāo)題、副標(biāo)題、圖片、摘要、頁(yè)碼,精致的排版,有些甚至還包括廣告。每種內(nèi)容都會(huì)有適合其展現(xiàn)的列表形式,資訊類產(chǎn)品的閱讀列表需要考慮的幾點(diǎn):
1. 視覺(jué)重心
把產(chǎn)品希望用戶看到的內(nèi)容凸顯出來(lái),引導(dǎo)用戶去閱讀那些重點(diǎn)推薦的內(nèi)容。
在閱讀信息的時(shí)候,常常受到周圍文字和圖像的干擾,并不是那么順暢,根據(jù)人眼視覺(jué)心理,會(huì)有幾種容易引導(dǎo)或者說(shuō)干擾到視覺(jué)移動(dòng)方向的特點(diǎn)。
1) 視線引導(dǎo)
a. 一般,暖色比冷色,鮮艷比暗淡,更容易吸引視線。
一般閱讀時(shí),視線是從左到右從上到下的,但顏色的引導(dǎo)會(huì)改變視線的順序。合理運(yùn)用能給列表以重點(diǎn),反之則會(huì)破壞用戶的心理預(yù)期,造成閱讀的負(fù)擔(dān),影響認(rèn)知效率。
b. 圖片比文字更吸引人。
圖片在視覺(jué)傳達(dá)上能輔助文字,幫助理解,更可以使版面立體、真實(shí)。
大多數(shù)資訊類列表中都含有文章配圖的縮略圖??s略圖的擺放位置,根據(jù)產(chǎn)品定位也有所不同。
更專注于資訊本身較為穩(wěn)重的產(chǎn)品,傾向于將縮略圖放在新聞標(biāo)題的后面。這類資訊內(nèi)容的圖片質(zhì)量往往較為一般,同時(shí),能夠讓用戶處于較平穩(wěn)的心態(tài)閱讀每一條標(biāo)題,從而選擇自己喜歡的內(nèi)容,圖片只期待起到輔助標(biāo)題的作用。
而對(duì)于偏娛樂(lè)化,碎片化的資訊類產(chǎn)品,縮略圖放在標(biāo)題前面能夠更直觀的傳達(dá)出內(nèi)容的含義,從而縮短用戶理解文字標(biāo)題的時(shí)間,讓用戶的時(shí)間順著右側(cè)的圖片向下快速瀏覽,起到快速篩選的目的。
c. 環(huán)形能夠匯聚視線
d. 視線會(huì)隨箭頭,或數(shù)字或編號(hào)移動(dòng)。
規(guī)律的箭頭或數(shù)字排布,容易造成頁(yè)面一側(cè)過(guò)重,或有強(qiáng)烈的提示意味,要注意頁(yè)面的平穩(wěn)。
2) 突出
如果需要你認(rèn)為用戶會(huì)感興趣的文章,或者花了很多功夫設(shè)計(jì)的部分真的吸引到他們的注意,那就要想辦法把這些部分“突出&rd
本文地址:http://m.pkvc.cn/tutorial/id1289.html
您可能還喜歡
- 關(guān)于第三方注冊(cè)和本地注冊(cè)的選擇
- 8大網(wǎng)頁(yè)前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動(dòng)設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁(yè)設(shè)計(jì)中引人入勝的引導(dǎo)頁(yè)設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開(kāi)始
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(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ì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏