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