9.23日(rì)音(yīn)訊,分(fēn)析圖片如(rú)★✘何排列才能(néng)更加美(měi)觀大(dà)氣。圖片，<Ω是(shì)構成網頁的(de)基本元素之一(yī)。圖片不(bù)僅能(nén ≠g)夠增加網頁的(de)吸引力，傳達給用(↔®yòng)戶更加豐富的(de)信息，同時(δ✘₹₽shí)也(yě)大(dà)大(dà)地(dì)提升了≥ ♦₽(le)用(yòng)戶在浏覽網頁的(d₩π$e)體(tǐ)驗。圖片的(de)展示形式豐☆≤••富多(duō)樣，不(bù)同形式的(de)圖片展現(₽δ₹≠xiàn)也(yě)讓浏覽網頁的(de)樂(yu₩✘₹€è)趣變得(de)更加多(duō)樣化(huà)。
跟随我們分(fēn)别來(lái)體(tǐ)驗一(yī)下(x↕☆¥ià)目前存在的(de)各種圖片展現(xiàn)形式←Ω，讓我們的(de)眼睛去(qù)旅行(xí₽¶λ ng)吧(ba)。
一(yī)、多(duō)圖展現(xiàn≥∏≈)
圖片限制(zhì)最大(dà)高(←"&gāo)度或寬度并進行(xíng)矩陣平鋪展現(xi®≥àn)，這(zhè)是(shì)最常見(j→∑iàn)的(de)多(duō)張圖片展現(xiàn)形式。不(bù)同&•的(de)邊距與距離(lí)可(kě)産生(shēng)不(bù)同的(dλ™e)風(fēng)格，用(yòng)戶一(yī)掃而♣$過的(de)快(kuài)速浏覽可(kě)以在短(duǎ↕αφn)時(shí)間(jiān)獲得(de)更多(duō)的(de)信息。 $同時(shí)，鼠标懸浮時(shí)顯示更多(du€ō)信息或功能(néng)按鈕，既避免過多(duō∏γ∞↓)的(de)重複性元素幹擾用(yòng)戶浏覽，又( ₩±yòu)讓交互形式帶有(yǒu)樂(yuè)趣↓×β。但(dàn)傳統的(de)矩陣平鋪展現(xiàn∏↑δ∑)版式略微(wēi)拘謹，浏覽體(tǐ)驗略顯枯燥。
500px.com在傳統矩陣式平鋪布局基礎上(↕ ♥shàng)掙脫圖片尺寸一(yī)緻性束縛，圖片以基礎面≈ 積單元的(de)1倍、2倍、4倍尺寸展現(xiàn)。大(dà)小∏₩ ₹(xiǎo)不(bù)一(yī)緻的(de)圖片展現(xiàn)打破重↑δ 複帶來(lái)的(de)密集感，卻仍按照≤≠(zhào)基礎面積單元進行(xíng)排列布≠"←≈局，為(wèi)流動的(de)信息增加動感。不(bù)規則的(deβ☆ )圖片為(wèi)浏覽帶來(lái)樂(yuè)趣，₽¥§♣但(dàn)由于視(shì)線的(de)不(bù)規則流動，這(zhè)樣≈≠的(de)展現(xiàn)形式并不(bù)≤✔利于信息的(de)查找。
Pinterest的(de)瀑布流錯(cu♦¥β'ò)落有(yǒu)緻，定寬而不(bù)定高(gāo)的(de)設計(jì)©讓頁面突破于傳統的(de)矩陣式圖片展現(xiàn)布局，巧妙的(de)利用★α(yòng)視(shì)覺層級，視(shì)線的(de)任意流動又(yòu)緩✔÷♣解了(le)視(shì)覺疲勞。用(yòn♣← g)戶可(kě)以在衆多(duō)圖片中快(k<♦uài)速地(dì)掃視(shì)，然後選♣ α擇其中自(zì)己感興趣的(de)部分(fēn)。∞£ ¶但(dàn)這(zhè)樣也(yě)讓用(yòng)戶在浏$" 覽時(shí)，容易錯(cuò)過部分(fēn)內(nèi)容。
二、下(xià)一(yī)張預覽
在最大(dà)化(huà)展示某張圖片的(de)同時(§ ∏shí)，讓用(yòng)戶看(kàn)到(dào)相(xià♦α₹ng)冊中其他(tā)內(nèi)容。下(x>✔ ià)一(yī)張的(de)部分(fēn)預覽，更吸引用(yòng)戶進行(x♦♦ íng)繼續點擊浏覽。下(xià)一(yī)張縮略顯示，λ≈下(xià)一(yī)張模糊顯示，或下(xià)一← ↑ (yī)張部分(fēn)顯示，不(bù)同的(de)預 ≤≈覽呈現(xiàn)方式都(dōu)在挑戰用(yòng)戶的(de)好(h>₹£βǎo)奇心。
在Photodom中，用(yòng↕)戶浏覽具體(tǐ)圖片時(shí)并不(b×$₩ù)提供下(xià)一(yī)張的(de)預覽，π© £隻有(yǒu)等用(yòng)戶将鼠标懸停在“下(xiε à)一(yī)張”按鈕時(shí)才出現(xiàn)下(÷♦→xià)一(yī)張的(de)縮略圖。雖然出現(xi££®àn)縮略圖的(de)動畫(huà)效果并不(bù)能(néng↑≠₩)讓用(yòng)戶理(lǐ)想地(dì)實現(x ∑↓iàn)預覽，但(dàn)昙花(huā)$φ•↕一(yī)現(xiàn)的(de)刺激更促使用(yòn≈ g)戶去(qù)進行(xíng)“下(xià)一(yī)§♦₩張”的(de)點擊。
Dailybooth在可(kě)以進行(£→ xíng)下(xià)一(yī)張圖片預覽ε↑的(de)同時(shí)，還(hái)可(kě↕♣)以預覽下(xià)一(yī)張圖片的(de)相(xiàng)關信息δ® 。這(zhè)種更多(duō)內(nèi)容的(de)展現(xiàn)形式，→π用(yòng)戶不(bù)僅會(huì)被下(xià)一(yī)張圖片的(d©®✔★e)內(nèi)容所吸引，或許更好(hǎo)奇下(xià)一(yī)張圖片≠≠&γ其他(tā)信息的(de)內(nèi)容。
三、訪客及成員(yuán)頭像
訪客或成員(yuán)頭像本身(shēnπβ)也(yě)是(shì)圖片，不(bù)同≥≥于用(yòng)戶所展示的(de)圖片，頭δγ♣像更多(duō)展示的(de)是(shì)曆史互動信息，并"©☆₹可(kě)進行(xíng)延伸互動。頭像懸停時(shí)可(kě)顯≤® 示更多(duō)信息及功能(néng)按鈕，或顯示更↓↔φ↕大(dà)尺寸的(de)頭像。
四、QQ空(kōng)間(jiān)圖片展現(∑'₩ xiàn)優化(huà)探索
通(tōng)過上(shàng)文(wén)的(de)視₩✘(shì)覺體(tǐ)驗，我們可(kě)以大(dà)緻®•♠≠了(le)解到(dào)，圖片展現(xiàn)的(de)重點★σ"在于：
1.便于用(yòng)戶進行(xíng)浏覽，減少(shǎo)視α≈λ(shì)覺疲勞
2.展現(xiàn)更多(duō)圖片信息及圖片相(xiàng)關信 "©×息
3.通(tōng)過鼠标懸停的(de)小(xiǎ≥φ✘o)動畫(huà)，提供體(tǐ)驗感強的(de)交互$∞形式
4.吸引用(yòng)戶去(qù)進行(xí™♠ng)點擊，由小(xiǎo)圖看(kàn)大(₩εdà)圖，或看(kàn)下(xià)一(yī)張
5.吸引用(yòng)戶去(qù)進行(xπ≥αβíng)圖片的(de)相(xiàng)關延伸操作(zuò₹≤↔)，而不(bù)是(shì)停留在浏覽
目前QQ空(kōng)間(jiān)同樣存在許多(duō)圖片≥"<元素構成的(de)模塊，通(tōng)過上(shàng)面的(d×♣e)總結，我們從(cóng)這(zhè)些(xiē)模塊出發，₹₩嘗試一(yī)下(xià)新的(de)圖片呈現(xiàn βδ)及交互方式，希望起到(dào)一(yī)個(gè)抛磚引玉的(de)作↕ (zuò)用(yòng)。
a.多(duō)圖動态
當前QQ空(kōng)間(jiān)在展示好(hǎo)友(yǒu)多™÷&β(duō)圖動态時(shí)，首張圖片顯示大(dà)圖，其他(tā)圖Ω∑±φ片以縮略圖顯示。假如(rú)定義最小(xiǎo)面積單元©λ，然後以1倍、2倍、4倍顯示圖片，形式上(shàng)更具動感，有(£∏¶yǒu)效減少(shǎo)視(shì)覺疲勞，而且可δ®(kě)以匹配不(bù)同數(shù)量的(de)圖片，用(yònΩ&<÷g)戶可(kě)以看(kàn)到(dào)更多(duō¶ ≠∑)圖片的(de)更多(duō)內(nèi)容。
b.訪客頭像
鼠标懸停訪客頭像時(shí)，該訪客頭像區(qū)域視(shì)覺≤σ上(shàng)強化(huà)，并在其他(tā)區(qū)域顯示功能(néngφ→↔<)或信息。體(tǐ)驗感較強的(de)交互形式可(kě)以吸引☆∞&β用(yòng)戶去(qù)進行(xíng)懸停操作(zuò)α✘">從(cóng)而進行(xíng)點擊。
c.下(xià)一(yī)張預覽
浏覽圖像時(shí)，顯示上(shàng)一(yī)張×÷♠★及下(xià)一(yī)張的(de)部分(fēn)內≈>(nèi)容，鼠标懸停時(shí)顯示全部內(nèi)容的(d↓≠e)縮略圖，并以此作(zuò)為(wèi)上(shà>©φng)一(yī)張及下(xià)一(yī)張的(de)操∞σ作(zuò)入口。
随著(zhe)互聯網的(de)發展，将會(huì)↔Ω∞ 有(yǒu)更多(duō)創新的(de)圖片呈現(xiàn)形式的(d↔e)出現(xiàn)，我們不(bù)妨拭₹↔δ目以待，看(kàn)看(kàn)互聯網又(yòu)會(huì)從(c ✘♦óng)視(shì)覺上(shàng)給我們什(shén)麽驚奇的(d>≠e)體(tǐ)驗吧(ba)。
