網(wǎng)頁(yè)設(shè)計(jì)中圖片展現(xiàn)形式的思考_網(wǎng)頁(yè)設(shè)計(jì)教程
推薦:淺談頁(yè)面設(shè)計(jì)中光影的特效為了展現(xiàn)頁(yè)面的主題或者是貼近游戲的氛圍,常常會(huì)看見(jiàn)游戲的頁(yè)面中運(yùn)用了許多不同類型的光效的渲染,一個(gè)簡(jiǎn)單的元素有時(shí)候加上一點(diǎn)光效就可以化腐朽為神奇。那么光效究竟是
圖片,是構(gòu)成網(wǎng)頁(yè)的基本元素之一。圖片不僅能夠增加網(wǎng)頁(yè)的吸引力,傳達(dá)給用戶更加豐富的信息,同時(shí)也大大地提升了用戶在瀏覽網(wǎng)頁(yè)的體驗(yàn)。圖片的展示形式豐富多樣,不同形式的圖片展現(xiàn)也讓瀏覽網(wǎng)頁(yè)的樂(lè)趣變得更加多樣化。
跟隨我們分別來(lái)體驗(yàn)一下目前存在的各種圖片展現(xiàn)形式,讓我們的眼睛去旅行吧。
一、多圖展現(xiàn)


圖片限制最大高度或?qū)挾炔⑦M(jìn)行矩陣平鋪展現(xiàn),這是最常見(jiàn)的多張圖片展現(xiàn)形式。不同的邊距與距離可產(chǎn)生不同的風(fēng)格,用戶一掃而過(guò)的快速瀏覽可以在短時(shí)間獲得更多的信息。同時(shí),鼠標(biāo)懸浮時(shí)顯示更多信息或功能按鈕,既避免過(guò)多的重復(fù)性元素干擾用戶瀏覽,又讓交互形式帶有樂(lè)趣。但傳統(tǒng)的矩陣平鋪展現(xiàn)版式略微拘謹(jǐn),瀏覽體驗(yàn)略顯枯燥。

500px.com在傳統(tǒng)矩陣式平鋪布局基礎(chǔ)上掙脫圖片尺寸一致性束縛,圖片以基礎(chǔ)面積單元的1倍、2倍、4倍尺寸展現(xiàn)。大小不一致的圖片展現(xiàn)打破重復(fù)帶來(lái)的密集感,卻仍按照基礎(chǔ)面積單元進(jìn)行排列布局,為流動(dòng)的信息增加動(dòng)感。不規(guī)則的圖片為瀏覽帶來(lái)樂(lè)趣,但由于視線的不規(guī)則流動(dòng),這樣的展現(xiàn)形式并不利于信息的查找。


Pinterest的瀑布流錯(cuò)落有致,定寬而不定高的設(shè)計(jì)讓頁(yè)面突破于傳統(tǒng)的矩陣式圖片展現(xiàn)布局,巧妙的利用視覺(jué)層級(jí),視線的任意流動(dòng)又緩解了視覺(jué)疲勞。用戶可以在眾多圖片中快速地掃視,然后選擇其中自己感興趣的部分。但這樣也讓用戶在瀏覽時(shí),容易錯(cuò)過(guò)部分內(nèi)容。
分享:經(jīng)驗(yàn)分享:PS的3D功能創(chuàng)建標(biāo)識(shí)牌主要是想大家熟悉一下PS中3D功能。廢話不多說(shuō),有問(wèn)題下載PSD,還是不行來(lái)問(wèn)我。(PS:我也是半吊子,能不能幫到是一回事)
- 中國(guó)互聯(lián)網(wǎng)黑色產(chǎn)業(yè)人數(shù)近10萬(wàn) 5分鐘1起網(wǎng)絡(luò)入侵
- 馬云最后的發(fā)布會(huì):打假,打出阿里的新未來(lái)
- 實(shí)踐分享:ACCESS數(shù)據(jù)庫(kù)導(dǎo)入mysql數(shù)據(jù)庫(kù)
- ACCESS數(shù)據(jù)庫(kù)轉(zhuǎn)ORACLE數(shù)據(jù)庫(kù)分享
- CDN.net免費(fèi)CDN申請(qǐng)使用教程:100GB流量香港日本新加坡節(jié)點(diǎn)
- WordPress 教程:為插件自定義數(shù)據(jù)表
- 如何使用查找我的iPhone教程
- 微信公眾平臺(tái)教程(二) 消息管理與群發(fā)
- 中國(guó)IPv4地址今年將告罄 IPv6期待打破政策局
- 移動(dòng)廣告野蠻成長(zhǎng):75%投放在iOS平臺(tái)
- 災(zāi)難面前,互聯(lián)網(wǎng)公司可以如何做的更好?
- 富士康500萬(wàn)部iPhone遭蘋(píng)果退貨 損失10億元
網(wǎng)頁(yè)設(shè)計(jì)教程Rss訂閱網(wǎng)站制作教程搜索
網(wǎng)頁(yè)設(shè)計(jì)教程推薦
- 英文版企業(yè)網(wǎng)站的設(shè)計(jì)要小心
- PHOTOSHOP中改進(jìn)IOS設(shè)計(jì)流程的30個(gè)訣竅
- 網(wǎng)站導(dǎo)航必備的10款jquery插件
- 激發(fā)你靈感的50個(gè)優(yōu)秀的Favicons
- 交互設(shè)計(jì)實(shí)用指南系列(8)—深廣度平衡 - 交互設(shè)計(jì)
- 廣告體驗(yàn)?zāi)阕⒁獾搅藛幔?/a>
- 活動(dòng)網(wǎng)站點(diǎn)評(píng)之信義房屋
- 網(wǎng)頁(yè)設(shè)計(jì)中安全色譜
- Photoshop制作個(gè)性的透明玻璃網(wǎng)頁(yè)用戶信息展示教程
- 三個(gè)細(xì)節(jié)優(yōu)化讓你粘住用戶!
- 相關(guān)鏈接:
- 教程說(shuō)明:
網(wǎng)頁(yè)設(shè)計(jì)教程-網(wǎng)頁(yè)設(shè)計(jì)中圖片展現(xiàn)形式的思考
。