分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)設計中展現形式發(fā)布者:本站 時(shí)間:2021-12-09 09:12:11
圖片,是構成網(wǎng)頁(yè)的基本元素之一。圖片不僅能夠增加網(wǎng)頁(yè)的吸引力,傳達給用戶(hù)更加豐富的信息,同時(shí)也大大地提升了用戶(hù)在瀏覽網(wǎng)頁(yè)的體驗。圖片的展示形式豐富多樣,不同形式的圖片展現也讓瀏覽網(wǎng)頁(yè)的樂(lè )趣變得更加多樣化。
跟隨我們分別來(lái)體驗一下目前存在的各種圖片展現形式,讓我們的眼睛去旅行吧。
一、多圖展現
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
圖片限制最大高度或寬度并進(jìn)行矩陣平鋪展現,這是最常見(jiàn)的多張圖片展現形式。不同的邊距與距離可產(chǎn)生不同的風(fēng)格,用戶(hù)一掃而過(guò)的快速瀏覽可以在短時(shí)間獲得更多的信息。同時(shí),鼠標懸浮時(shí)顯示更多信息或功能按鈕,既避免過(guò)多的重復性元素干擾用戶(hù)瀏覽,又讓交互形式帶有樂(lè )趣。但傳統的矩陣平鋪展現版式略微拘謹,瀏覽體驗略顯枯燥。
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
500px.com在傳統矩陣式平鋪布局基礎上掙脫圖片尺寸一致性束縛,圖片以基礎面積單元的1倍、2倍、4倍尺寸展現。大小不一致的圖片展現打破重復帶來(lái)的密集感,卻仍按照基礎面積單元進(jìn)行排列布局,為流動(dòng)的信息增加動(dòng)感。不規則的圖片為瀏覽帶來(lái)樂(lè )趣,但由于視線(xiàn)的不規則流動(dòng),這樣的展現形式并不利于信息的查找。
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
Pinterest的瀑布流錯落有致,定寬而不定高的設計讓頁(yè)面突破于傳統的矩陣式圖片展現布局,巧妙的利用視覺(jué)層級,視線(xiàn)的任意流動(dòng)又緩解了視覺(jué)疲勞。用戶(hù)可以在眾多圖片中快速地掃視,然后選擇其中自己感興趣的部分。但這樣也讓用戶(hù)在瀏覽時(shí),容易錯過(guò)部分內容。
二、下一張預覽
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
在最大化展示某張圖片的同時(shí),讓用戶(hù)看到相冊中其他內容。下一張的部分預覽,更吸引用戶(hù)進(jìn)行繼續點(diǎn)擊瀏覽。下一張縮略顯示,下一張模糊顯示,或下一張部分顯示,不同的預覽呈現方式都在挑戰用戶(hù)的好奇心。
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
在Photodom中,用戶(hù)瀏覽具體圖片時(shí)并不提供下一張的預覽,只有等用戶(hù)將鼠標懸停在“下一張”按鈕時(shí)才出現下一張的縮略圖。雖然出現縮略圖的動(dòng)畫(huà)效果并不能讓用戶(hù)理想地實(shí)現預覽,但曇花一現的刺激更促使用戶(hù)去進(jìn)行“下一張”的點(diǎn)擊。
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
Dailybooth在可以進(jìn)行下一張圖片預覽的同時(shí),還可以預覽下一張圖片的相關(guān)信息。這種更多內容的展現形式,用戶(hù)不僅會(huì )被下一張圖片的內容所吸引,或許更好奇下一張圖片其他信息的內容。
三、訪(fǎng)客及成員頭像
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
訪(fǎng)客或成員頭像本身也是圖片,不同于用戶(hù)所展示的圖片,頭像更多展示的是歷史互動(dòng)信息,并可進(jìn)行延伸互動(dòng)。頭像懸停時(shí)可顯示更多信息及功能按鈕,或顯示更大尺寸的頭像。
四、QQ空間圖片展現優(yōu)化探索
通過(guò)上文的視覺(jué)體驗,我們可以大致了解到,圖片展現的重點(diǎn)在于:
1.便于用戶(hù)進(jìn)行瀏覽,減少視覺(jué)疲勞
2.展現更多圖片信息及圖片相關(guān)信息
3.通過(guò)鼠標懸停的小動(dòng)畫(huà),提供體驗感強的交互形式
4.吸引用戶(hù)去進(jìn)行點(diǎn)擊,由小圖看大圖,或看下一張
5.吸引用戶(hù)去進(jìn)行圖片的相關(guān)延伸操作,而不是停留在瀏覽
目前QQ空間同樣存在許多圖片元素構成的模塊,通過(guò)上面的總結,我們從這些模塊出發(fā),嘗試一下新的圖片呈現及交互方式,希望起到一個(gè)拋磚引玉的作用。
a.多圖動(dòng)態(tài)
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
當前QQ空間在展示好友多圖動(dòng)態(tài)時(shí),首張圖片顯示大圖,其他圖片以縮略圖顯示。假如定義最小面積單元,然后以1倍、2倍、4倍顯示圖片,形式上更具動(dòng)感,有效減少視覺(jué)疲勞,而且可以匹配不同數量的圖片,用戶(hù)可以看到更多圖片的更多內容。
b.訪(fǎng)客頭像
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
鼠標懸停訪(fǎng)客頭像時(shí),該訪(fǎng)客頭像區域視覺(jué)上強化,并在其他區域顯示功能或信息。體驗感較強的交互形式可以吸引用戶(hù)去進(jìn)行懸停操作從而進(jìn)行點(diǎn)擊。
c.下一張預覽
分析網(wǎng)頁(yè)圖片在網(wǎng)頁(yè)中展現形式,PS教程,
瀏覽圖像時(shí),顯示上一張及下一張的部分內容,鼠標懸停時(shí)顯示全部?jì)热莸目s略圖,并以此作為上一張及下一張的操作入口。
隨著(zhù)互聯(lián)網(wǎng)的發(fā)展,將會(huì )有更多創(chuàng )新的圖片呈現形式的出現,我們不妨拭目以待,看看互聯(lián)網(wǎng)又會(huì )從視覺(jué)上給我們什么驚奇的體驗吧。
選擇我們,優(yōu)質(zhì)服務(wù),不容錯過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò )資源,強大的網(wǎng)站優(yōu)化技術(shù),穩定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設經(jīng)驗,優(yōu)秀的技術(shù)和設計水平,更放心
3. 全程省心服務(wù),不必擔心自己不懂網(wǎng)絡(luò ),更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話(huà):021-58370032
關(guān)鍵詞標簽:上海網(wǎng)站建設 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開(kāi)發(fā)