• 
• 
• 
• 
• 
• 
• 

知識普及 ? 網(wǎng)站設(shè)計上的圖片表現(xiàn)方式

網(wǎng)站設(shè)計上的圖片表現(xiàn)方式

奈薇網(wǎng)頁設(shè)計 于2020-01-13 16:40發(fā)表 閱讀次數(shù) 2612次

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

網(wǎng)站設(shè)計上的圖片表現(xiàn)方式相關(guān)標(biāo)簽：企業(yè)網(wǎng)站制作，網(wǎng)站推廣，網(wǎng)站建造，申請網(wǎng)站

相關(guān)熱點推薦

網(wǎng)頁設(shè)計中的圖片運用與 青島網(wǎng)站建設(shè)布局好關(guān)鍵 網(wǎng)站關(guān)鍵詞擺放的四個關(guān) 青島網(wǎng)站設(shè)計哪家好 常見的排版方式與表現(xiàn)類 優(yōu)化用戶體驗，讓網(wǎng)站呈 影響網(wǎng)站排名的一些不必 青島網(wǎng)站設(shè)計容易犯的幾 用戶體驗中溝通的技巧 如何計算搜索引擎關(guān)鍵詞 網(wǎng)頁設(shè)計中的版式原理- 什么是網(wǎng)站的轉(zhuǎn)化率？ 做網(wǎng)站的一些定律 為什么網(wǎng)站制作價格越來 網(wǎng)頁配色密碼 響應(yīng)式網(wǎng)頁你了解嗎？ 如何創(chuàng)建一個用戶體驗良 店鋪推廣之SEO入門 寫給在職設(shè)計師們 分類目錄 一個好的網(wǎng)站應(yīng)該同時具 網(wǎng)頁設(shè)計制作應(yīng)注意的問 網(wǎng)頁界面設(shè)計教程四：色 化妝品的網(wǎng)站策劃分析 網(wǎng)站設(shè)計如何做好風(fēng)格統(tǒng) 網(wǎng)站重建怎么保護(hù)已有的 頻繁改版引發(fā)的合意性思 迅速提高網(wǎng)站流量的方法 企業(yè)建站誤區(qū) 防止IE主頁被修改的辦 WEB設(shè)計經(jīng)驗 網(wǎng)站推廣技巧之鏈接策略 如何做出創(chuàng)意設(shè)計的網(wǎng)站 網(wǎng)頁的版式設(shè)計—文字的 平度網(wǎng)站設(shè)計公司哪家好 搜索引擎的算法 一個網(wǎng)站，5個目標(biāo) 軟件與網(wǎng)站設(shè)計的區(qū)別

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點地區(qū)：青島網(wǎng)站建設(shè)價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶