網(wǎng)頁(yè)設(shè)計(jì)內(nèi)容網(wǎng)頁(yè)中關(guān)于圖片預(yù)覽的設(shè)計(jì)
之前有寫(xiě)過(guò)《內(nèi)容頁(yè)頁(yè)碼的預(yù)覽導(dǎo)航》跟《照片預(yù)覽導(dǎo)航分析》兩個(gè)文章,想說(shuō)明的是預(yù)覽這一功能在用戶(hù)心理所占有的比重是很大的,如果僅僅只是給出一排順序數(shù)字做為鏈接的標(biāo)題,用戶(hù)的心理會(huì)產(chǎn)生不安全感。雖然給出一排順序數(shù)字做為鏈接幾乎是整個(gè)互聯(lián)網(wǎng)的默認(rèn)分頁(yè)鏈接模...
之前有寫(xiě)過(guò)《內(nèi)容頁(yè)頁(yè)碼的預(yù)覽導(dǎo)航》跟《照片預(yù)覽導(dǎo)航分析》兩個(gè)文章,想說(shuō)明的是預(yù)覽這一功能在用戶(hù)心理所占有的比重是很大的,如果僅僅只是給出一排順序數(shù)字做為鏈接的標(biāo)題,用戶(hù)的心理會(huì)產(chǎn)生不安全感。
雖然給出一排順序數(shù)字做為鏈接幾乎是整個(gè)互聯(lián)網(wǎng)的默認(rèn)分頁(yè)鏈接模式,但也正是因?yàn)槿绱耍脩?hù)的心理安全感被忽視了,變成了隱性因素,在平??梢院雎圆挥?jì)??扇绻谀承┨囟ǖ沫h(huán)境下,這些隱性因素被某些事物所觸發(fā),傷害就會(huì)擴(kuò)大,甚至最終有可能會(huì)演變成一聲激烈的斗爭(zhēng)。
而如果給這個(gè)只有數(shù)字的導(dǎo)航里加入預(yù)覽功能,用戶(hù)在心理上自然會(huì)多出一分安全感,因?yàn)榭梢圆挥萌ゲ聹y(cè)下一頁(yè)跳出來(lái)的是什么內(nèi)容了,通過(guò)預(yù)覽可以提前知曉即將要看到的下一頁(yè)的大概內(nèi)容。特別是對(duì)于圖片新聞來(lái)說(shuō),在分頁(yè)鏈接上有了圖片預(yù)覽功能,可以給用戶(hù)帶來(lái)更佳的使用體驗(yàn),因?yàn)橛脩?hù)可以通過(guò)預(yù)覽導(dǎo)航得知整套新聞圖片的大概內(nèi)容,于是就可以選擇跳過(guò)閱讀或是直接退出閱讀。雖然這樣做可能會(huì)損失一部分的網(wǎng)站PV,但這對(duì)于培養(yǎng)長(zhǎng)期用戶(hù)來(lái)說(shuō),無(wú)疑是更有好處的。
也許有人會(huì)說(shuō),這樣就失去了神秘感,但我要說(shuō)的是神秘感相對(duì)于安全感來(lái)說(shuō),在用戶(hù)的心理上所占的比重還是要輕上一些的,特別是對(duì)于新聞?lì)惖男畔?nèi)容來(lái)說(shuō),神秘感在用戶(hù)心理所占的比重更是要輕上加輕。新聞?lì)悆?nèi)容追求的是信息的相關(guān)性,如果內(nèi)容過(guò)長(zhǎng)有分頁(yè)的話也是追求信息的連貫性。沒(méi)看過(guò)哪個(gè)新聞在第一頁(yè)講人如何在城市里生活,第二頁(yè)就突然講一頭豬能長(zhǎng)到多重的,這是兩個(gè)完全不同的主題信息,如果硬是要把它們講到一塊去,那么張冠李戴就是個(gè)很好的例子,因?yàn)?ldquo;張”跟“李”還是同屬于百家姓里的姓呢,“人”與“豬”都同屬于動(dòng)物吧。
很多網(wǎng)站的內(nèi)容頁(yè)如果內(nèi)容長(zhǎng)有圖片需要分頁(yè)的話,都會(huì)把下一頁(yè)的鏈接在圖片上也加一份,這樣除去從一大堆內(nèi)容里去找下一頁(yè)的鏈接的麻煩外,還可以添加點(diǎn)擊“下一頁(yè)”鏈接的概率。
娛樂(lè)新聞是屬于圖片多過(guò)文字信息的,娛樂(lè)新聞首先是要從視覺(jué)上沖擊用戶(hù)的眼球,而非是用文字來(lái)帶給用戶(hù)震撼的感覺(jué)。對(duì)于常常是多圖片的娛樂(lè)新聞來(lái)說(shuō),分頁(yè)顯示自然是個(gè)很好的方法,即可以加快頁(yè)面的加載速度,又可增加頁(yè)面的點(diǎn)擊量,無(wú)疑是個(gè)一舉兩得的好方法。
騰訊娛樂(lè)的新聞內(nèi)容頁(yè)一直都是采取點(diǎn)擊圖片進(jìn)入下一頁(yè)的方式的,雖然比點(diǎn)擊數(shù)字進(jìn)入下一頁(yè)帶來(lái)更好的使用體驗(yàn),但在使用的過(guò)程中仍難免會(huì)有遺憾。比如某條新聞的標(biāo)題是“某某明星在某某頒獎(jiǎng)典禮上搶盡風(fēng)頭”,于是我點(diǎn)擊標(biāo)題進(jìn)去到內(nèi)容頁(yè),可是我發(fā)現(xiàn)第一頁(yè)的圖片并不是那個(gè)“某某明星”,可是整個(gè)新聞內(nèi)容分頁(yè)達(dá)十幾頁(yè),我該怎么知道這個(gè)“某某明星”的圖片在第幾頁(yè)呢?我是看到這個(gè)“某某明星”才進(jìn)去的,我對(duì)其他的明星不感興趣,怎么辦?不得已只能一頁(yè)一頁(yè)的去翻,也許運(yùn)氣好在前幾頁(yè)就翻到了,也許運(yùn)氣不好一直翻到倒數(shù)第二頁(yè)才看到想看的圖片。雖然最終我所期望的目標(biāo)是達(dá)成了,可是在這實(shí)現(xiàn)的過(guò)程是是否留有遺憾呢?
今天發(fā)現(xiàn)騰訊娛樂(lè)的部分圖片新聞內(nèi)容頁(yè)做了改變,不再只是以往單純的點(diǎn)擊圖片進(jìn)入下一頁(yè)了,而是在新聞內(nèi)容頁(yè)里增加了圖片預(yù)覽導(dǎo)航,終于我上面所說(shuō)的遺憾得到彌補(bǔ),不再需要一頁(yè)一頁(yè)的看過(guò)去只是為了在十幾頁(yè)中尋找一頁(yè)自己喜歡的內(nèi)容。
但是這個(gè)圖片預(yù)覽導(dǎo)航卻并未完善,因?yàn)槊奎c(diǎn)一張圖片都要跳轉(zhuǎn)一個(gè)頁(yè)面,如果當(dāng)前一組圖片仍沒(méi)有我所想要看的內(nèi)容的話,那么我還得要點(diǎn)擊下一組去查看是否有我需要的內(nèi)容。
什么時(shí)候這個(gè)內(nèi)容頁(yè)的圖片預(yù)覽導(dǎo)航能做成跟相冊(cè)一樣的預(yù)覽導(dǎo)航,那就比較完善了。
- 網(wǎng)頁(yè)制作時(shí)可以拿起就用的網(wǎng)頁(yè)制作小技巧總結(jié)
- 詳解移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)實(shí)現(xiàn)內(nèi)滾動(dòng)的四種解決方案
- 網(wǎng)頁(yè)設(shè)計(jì)如何優(yōu)雅的實(shí)現(xiàn)垂直居中
- 網(wǎng)頁(yè)設(shè)計(jì):淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)
- 網(wǎng)頁(yè)設(shè)計(jì)柵格就是你對(duì)頁(yè)面版式的規(guī)劃
- 網(wǎng)頁(yè)設(shè)計(jì):腳本素材重構(gòu)用戶(hù)體驗(yàn)
- 打開(kāi)保存的網(wǎng)頁(yè)顯示英文和數(shù)字的解決方法
- Html網(wǎng)頁(yè)中meta標(biāo)簽及用法詳解
- Dreamweaver網(wǎng)頁(yè)元素怎么制作漸隱漸現(xiàn)效果教程
- Dreamweaver制作網(wǎng)頁(yè)經(jīng)典問(wèn)題大整理
網(wǎng)頁(yè)制作時(shí)可以拿起就用的網(wǎng)頁(yè)制作小技巧總結(jié)
這篇文章主要給大家分享了一些在網(wǎng)頁(yè)制作的時(shí)候,可以拿起就用的小技巧,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考借鑒,下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。...
詳解移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)實(shí)現(xiàn)內(nèi)滾動(dòng)的四種解決方案
這篇文章主要介紹了關(guān)于移動(dòng)端實(shí)現(xiàn)內(nèi)滾動(dòng)的四種解決方案,實(shí)現(xiàn)的效果就是在一個(gè)區(qū)域內(nèi)只允許部分區(qū)域產(chǎn)生滾動(dòng)的效果,而其余部分則不能移動(dòng),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。...
網(wǎng)頁(yè)設(shè)計(jì)如何優(yōu)雅的實(shí)現(xiàn)垂直居中
這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的實(shí)現(xiàn)垂直居中的相關(guān)資料,文中分別給大家介紹了已知寬高的元素、未知寬高的元素以及基于 Flexbox 的解決方案,都分別給出了示例代碼供大家參考學(xué)習(xí),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧...
網(wǎng)頁(yè)設(shè)計(jì):淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)
這篇文章主要介紹了淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧...
網(wǎng)頁(yè)設(shè)計(jì)柵格就是你對(duì)頁(yè)面版式的規(guī)劃
英文原文:http://desktoppub.about.com/od/grids/l/aa_gridsorder.htm柵格就是你對(duì)頁(yè)面版式的規(guī)劃你日常所見(jiàn)的許多頁(yè)面都有柵格存在。你可能注意不到,但它確實(shí)存在,并且支撐著設(shè)計(jì)內(nèi)容,建立整體的架構(gòu),引導(dǎo)著頁(yè)面的元素。柵格是隱形的架構(gòu),用于指導(dǎo)你頁(yè)面...
網(wǎng)頁(yè)設(shè)計(jì):腳本素材重構(gòu)用戶(hù)體驗(yàn)
設(shè)計(jì)網(wǎng)站的同志背景主要有兩種:學(xué)計(jì)算機(jī)、學(xué)藝術(shù)。基本上會(huì)寫(xiě)代碼的不懂設(shè)計(jì),會(huì)設(shè)計(jì)的不懂代碼,這個(gè)格局似乎到今天還沒(méi)變。某些學(xué)計(jì)算機(jī)的同學(xué),有自己的審美品位,也能夠做出看起來(lái)不錯(cuò)的網(wǎng)站,但學(xué)藝術(shù)的同學(xué)普遍難搞懂代碼...
打開(kāi)保存的網(wǎng)頁(yè)顯示英文和數(shù)字的解決方法
打開(kāi)網(wǎng)頁(yè)文件內(nèi)容顯示英文和數(shù)字亂碼怎么辦?將喜歡的網(wǎng)頁(yè)保存到電腦以后,打開(kāi)發(fā)現(xiàn)文件內(nèi)容是亂碼,顯示的英文和數(shù)字,該怎么解決呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考...
Html網(wǎng)頁(yè)中meta標(biāo)簽及用法詳解
<meta> 元素 可提供有關(guān)頁(yè)面的元信息(meta-information),比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。...
Dreamweaver網(wǎng)頁(yè)元素怎么制作漸隱漸現(xiàn)效果教程
Dreamweaver中想要使用jQ效果實(shí)現(xiàn)網(wǎng)頁(yè)元素的漸隱漸現(xiàn)釘釘效果,該怎么制作呢?下面我們就來(lái)看看詳細(xì)的教程。...
Dreamweaver制作網(wǎng)頁(yè)經(jīng)典問(wèn)題大整理
1> 在DW中,如何輸入一個(gè)空格呢? 輸入空格的問(wèn)題,在DW似乎已成了一個(gè)老生常談的問(wèn)題,我們可能在許多介紹DW使用方面的書(shū)籍或文章中看到過(guò)N次。 DW中對(duì)空格輸入的限制是針...