網頁設計中圖片展現形式的思考

來源:互聯網
上載者:User

  圖片,是構成網頁的基本元素之一。圖片不僅能夠增加網頁的吸引力,傳達給使用者更加豐富的資訊,同時也大大地提升了使用者在瀏覽網頁的體驗。圖片的展示形式豐富多樣,不同形式的圖片展現也讓瀏覽網頁的樂趣變得更加多樣化。

  跟隨我們分別來體驗一下目前存在的各種圖片展現形式,讓我們的眼睛去旅行吧。

  一、多圖展現

  圖片限制最大高度或寬度並進行矩陣平鋪展現,這是最常見的多張圖片展現形式。不同的邊距與距離可產生不同的風格,使用者一掃而過的快速探索可以在短時間獲得更多的資訊。同時,滑鼠懸浮時顯示更多資訊或功能按鈕,既避免過多的重複性元素幹擾使用者瀏覽,又讓互動形式帶有樂趣。但傳統的矩陣平鋪展現版式略微拘謹,瀏覽體驗略顯枯燥。

  500px.com在傳統矩陣式平鋪布局基礎上掙脫圖片尺寸一致性束縛,圖片以基礎面積單元的1倍、2倍、4倍尺寸展現。大小不一致的圖片展現打破重複帶來的密集感,卻仍按照基礎面積單元進行排列布局,為流動的資訊增加動感。不規則的圖片為瀏覽帶來樂趣,但由於視線的不規則流動,這樣的展現形式並不利於資訊的尋找。

  Pinterest的瀑布流錯落有致,定寬而不定高的設計讓頁面突破於傳統的矩陣式圖片展現布局,巧妙的利用視覺層級,視線的任意流動又緩解了視覺疲勞。使用者可以在眾多圖片中快速地掃視,然後選擇其中自己感興趣的部分。但這樣也讓使用者在瀏覽時,容易錯過部分內容。

  二、下一張預覽

  在最大化展示某張圖片的同時,讓使用者看到相簿中其他內容。下一張的部分預覽,更吸引使用者進行繼續點擊瀏覽。下一張縮減顯示,下一張模糊顯示,或下一張部分顯示,不同的預覽呈現方式都在挑戰使用者的好奇心。

  在Photodom中,使用者瀏覽具體圖片時並不提供下一張的預覽,只有等使用者將滑鼠移至上方在“下一張”按鈕時才出現下一張的縮圖。雖然出現縮圖的動畫效果並不能讓使用者理想地實現預覽,但曇花一現的刺激更促使使用者去進行“下一張”的點擊。

  Dailybooth在可以進行下一張圖片預覽的同時,還可以預覽下一張圖片的相關資訊。這種更多內容的展現形式,使用者不僅會被下一張圖片的內容所吸引,或許更好奇下一張圖片其他資訊的內容。

  三、訪客及成員頭像

  訪客或成員頭像本身也是圖片,不同於使用者所展示的圖片,頭像更多展示的是曆史互動資訊,並可進行延伸互動。頭像懸停時可顯示更多資訊及功能按鈕,或顯示更大尺寸的頭像。

  四、QQ空間圖片展現最佳化探索

  通過上文的視覺體驗,我們可以大致瞭解到,圖片展現的重點在於:

  1.便於使用者進行瀏覽,減少視覺疲勞

  2.展現更多圖片資訊及圖片相關資訊

  3.通過滑鼠移至上方的小動畫,提供體驗感強的互動形式

  4.吸引使用者去進行點擊,由小圖看大圖,或看下一張

  5.吸引使用者去進行圖片的相關延伸操作,而不是停留在瀏覽

  目前QQ空間同樣存在許多圖片元素構成的模組,通過上面的總結,我們從這些模組出發,嘗試一下新的圖片呈現及互動方式,希望起到一個拋磚引玉的作用。

  a.多圖動態

  當前QQ空間在展示好友多圖動態時,首張圖片顯示大圖,其他圖片以縮圖顯示。假如定義最小面積單元,然後以1倍、2倍、4倍顯示圖片,形式上更具動感,有效減少視覺疲勞,而且可以匹配不同數量的圖片,使用者可以看到更多圖片的更多內容。

  b.訪客頭像

  滑鼠移至上方訪客頭像時,該訪客頭像地區視覺上強化,並在其他地區顯示功能或資訊。體驗感較強的互動形式可以吸引使用者去進行懸停操作從而進行點擊。

  c.下一張預覽

  瀏覽映像時,顯示上一張及下一張的部分內容,滑鼠移至上方時顯示全部內容的縮圖,並以此作為上一張及下一張的操作入口。

  隨著互連網的發展,將會有更多創新的圖片呈現形式的出現,我們不妨拭目以待,看看互連網又會從視覺上給我們什麼驚奇的體驗吧。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。