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

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

與傳統(tǒng)閱讀平臺比較，閱讀列表就像是實(shí)體書中的目錄。小說的目錄簡潔：標(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)知效率。

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

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

大多數(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è)的圖片向下快速瀏覽，起到快速篩選的目的。

c. 環(huán)形能夠匯聚視線

d. 視線會隨箭頭，或數(shù)字或編號移動。

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

2) 突出

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

最簡單的方法是使用亮色的樣式，或者改變該項(xiàng)的背景顏色。還可以為這篇文章找一個可以突出于其他層次的位置，比如在標(biāo)題前面放一個縮略圖之類的。但也需要考慮到頁面的整體視覺效果，一個原則是“太多重點(diǎn)等于沒有重點(diǎn)”。

3) 反饋

給予已閱讀內(nèi)容相應(yīng)的視覺反饋，并使用區(qū)別于“突出”內(nèi)容的交互方式。比如已經(jīng)使用不同顏色的圓點(diǎn)區(qū)別內(nèi)容的重點(diǎn)或普通，就不要再用圓點(diǎn)的形式提示已讀。相同的樣式在人們的心中暗示相同的內(nèi)容，而未讀和已讀則是同種內(nèi)容的兩種狀態(tài)。

2. 不打擾

1) 長列表

如果能夠有效的掃視瀏覽，長列表并不會是種麻煩，至少它可以讓瀏覽不用付出多少努力和代價。

在資訊類的長列表中，沒有必要使用標(biāo)準(zhǔn)的頁碼指示，原因如下：

a. 從一個閱讀內(nèi)容的世界到一個導(dǎo)航的世界。

當(dāng)每一次用戶都通過選擇頁碼去看更多內(nèi)容，他需要把自己從一個閱讀內(nèi)容的世界拖出來，再放到一個導(dǎo)航的世界中去。用戶思考的不再是他們要閱讀什么樣的內(nèi)容，而是怎么找到更多的東西去看。選擇頁碼增加了自然的停頓時間，也給了用戶機(jī)會能夠評估他們是否想要繼續(xù)閱讀或者是直接離開。

b. 另外頁碼沒有本質(zhì)的含義。

用戶按頁碼選擇只是為了方便他們找到在第2頁或者更早以前想要閱讀的內(nèi)容而已。給他一個更好的方法，比如按照周、月、年，分類，標(biāo)簽等屬性的方式篩選，遠(yuǎn)比頁碼有效的多。也有很多的移動終端中，使用了分頁的指示控件，但將頁碼數(shù)去掉了，這不失為一種好辦法。

2) 廣告

閱讀的重點(diǎn)在于內(nèi)容，用戶并不在意看到與內(nèi)容相關(guān)的廣告，或不影響列表瀏覽的廣告。

經(jīng)常使用瀏覽器或使用免費(fèi)應(yīng)用的用戶應(yīng)該已經(jīng)較為習(xí)慣廣告的存在，也能夠理解廣告于產(chǎn)品的意義，只要不太打擾他們的正常閱讀就好。

a. 不要假裝廣告是一則有趣的內(nèi)容。

這樣做雖然可以增加廣告的點(diǎn)擊量，但是用戶也會因?yàn)椤笆茯_”而惱怒，帶來不好的體驗(yàn)。

b. 為內(nèi)容提供相關(guān)的廣告。

數(shù)據(jù)表明，用戶愿意點(diǎn)擊與汽車相關(guān)的廣告。當(dāng)用戶查看車型的時候，相應(yīng)的專賣店推薦正好為他提供了購買的渠道，甚至比價的渠道，用戶當(dāng)然欣然前往。

c. 易于忽略。

有時為了列表的整齊和產(chǎn)品的美觀，在設(shè)計(jì)中會將廣告插在列表間，并假裝它是列表中的一條項(xiàng)目。但應(yīng)盡量減少廣告的視覺效果，讓其看起來不起眼，可以輕松跳過而不被意識到。

有些將廣告放在頁頂部的產(chǎn)品，雖然位置明顯，但可以通過按鈕關(guān)閉或只有下拉才顯示，也是種折中的選擇。

3. 閱讀節(jié)奏

整齊而重復(fù)的格式和產(chǎn)品把握“第一屏”的策略，容易使篩選閱讀列表的過程產(chǎn)生一種類似于“白噪音”的屏蔽效果。再好的東西都會產(chǎn)生“審美疲勞”，在稍長時間的閱讀后，用戶往往會覺得內(nèi)容都相對平淡無奇而離開列表。

微博產(chǎn)品作為一種閱讀媒介的優(yōu)點(diǎn)在于它不時的出現(xiàn)亮點(diǎn)，讓閱讀保持節(jié)奏和驚喜。

保持節(jié)奏的呼吸可以讓運(yùn)動更持久，保持內(nèi)容的節(jié)奏也會讓閱讀長時間的延續(xù)下去。有趣與無趣的交替反復(fù)，給用戶休息和從新提起興趣的間歇，加上對于下一個小驚喜的期待，從而產(chǎn)生產(chǎn)品整體的舒適體驗(yàn)，而不是很多有趣之后與很多無趣的平均值。

4. 列表中的項(xiàng)目

大部分產(chǎn)品都會包括的項(xiàng)目有：標(biāo)題，摘要，發(fā)布日期，操作(點(diǎn)擊閱讀更多，查看更多);

常見的項(xiàng)目：分類，縮略圖，評論數(shù)，圖片數(shù)，作者。

文章名稱：分析資訊類產(chǎn)品閱讀列表的交互設(shè)計(jì)思考
文章分享：http://www.muchs.cn/news31/322731.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、App開發(fā)、網(wǎng)站制作、小程序開發(fā)、自適應(yīng)網(wǎng)站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)