響應式網頁圖片庫設計(jì)的(de)幾個(g≈ è)注意事(shì)項

來(lái)源：lexintech.com 發布時(shí)間(j₽iān)：2017-08-24

響應式設計(jì)無疑是(shì)當前網頁設計(jì)領域當中，不↓₩(bù)可(kě)忽略的(de)必要(yà'£o)組成部分(fēn)。而響應式網頁中的(de)圖↔₹↕片顯示又(yòu)是(shì)老(lǎo☆∏ )生(shēng)常談的(de)問(wèn)$ ∑→題，許多(duō)争論集中在響應式網站(zhàn)的(de)圖片應當怎麽展示。±σ繼續延伸開(kāi)來(lái)，那(nà)麽響應式網站(zh<$àn)中的(de)圖片庫應當如(rú)何設計(jì)呢(ne)?

相(xiàng)比于單個(gè)圖片，圖庫的≈♦♠‍(de)展示無疑更加複雜(zá)，牽涉到(dào)的(de)變量φ≤更多(duō)，所以實現(xiàn)起來(lái)也(yě)更加麻煩費(÷←≥fèi)神。接下(xià)來(lái)，我們來(lái‍×®≠)看(kàn)看(kàn)如(rú)果要(yào)設計(jì)響應±×式的(de)圖片庫，有(yǒu)哪些(x∞γ'iē)值得(de)注意的(de)基本規則和(hé)技(jì)巧。ε✔

1、輪播幻燈片：盡量隐藏導航

在桌面端上(shàng)導航的(de)存在可(≥↕kě)能(néng)沒什(shén)麽，但®™&π(dàn)是(shì)在移動端上(shàng)查看(kàn)的(de)時¶÷(shí)候，導航還(hái)是(shì)盡量隐藏起來(lái)，需π↕÷λ要(yào)的(de)時(shí)候再顯現☆↑'(xiàn)。而諸如(rú)左右切換的(de)按鈕和(h✔δ✔←é)标明(míng)浏覽位置的(de)圓點$∏®，最好(hǎo)是(shì)在光(guāng)标移動上(shàng)去(qù₽♣☆)之後再顯示，這(zhè)樣的(de)設計(jì)不 σ(bù)僅可(kě)以避免用(yòng)戶分(fēn)心，而且✘•♣能(néng)避免內(nèi)容和(hé)導航$<元素之間(jiān)的(de)沖突，降低(dī)整體(tǐ)設計(✘→jì)的(de)混亂感。

2、避免使用(yòng)大(dà)量肖像類圖片§ β

如(rú)果你(nǐ)設計(jì)的(de)圖片庫是(shì)類似網格↓♣₹‍布局的(de)話(huà)，你(nǐ)可(kě)能(néngδ®↕σ)會(huì)盡量挑選和(hé)橫向的(de)圖片，或者方形的(de)圖§♦∑★像。這(zhè)樣的(de)設計(jì)在兼容桌面端設計®‍(jì)的(de)同時(shí)，還(hái)可(kě)以讓用(yòng)戶<λε♦在小(xiǎo)屏幕上(shàng)更好(hǎo)地(dì)查看(‍<©₽kàn)。人(rén)像類的(de)圖片在手機(jī)上(shàng ∑✘)适合縱向屏幕上(shàng)浏覽，如(rú)果橫過來(lá‍∏∏i)的(de)話(huà)，圖片會(huìεσ π)顯得(de)特别小(xiǎo)，浏覽會(huì↑γ∑♥)相(xiàng)當不(bù)方便。橫向是(shì)最佳的(de)，如(←≈≤¶rú)果不(bù)行(xíng)的(de)話(huà)，使用(yòng)↓β₩™方形的(de) 圖片會(huì)是(shì)很(hěn)¥¥≥∏好(hǎo)的(de)兼容性方案。一(yī)個(gè)響應式的(d€e)圖片庫的(de)設計(jì)需要(yào)考慮多(duō)種因素，請(qǐ&¶÷™ng)務必牢記用(yòng)戶的(de)不÷↔(bù)同浏覽場(chǎng)景。

3、在移動端上(shàng)支持手勢操作(zuò)

觸摸屏上(shàng)使用(yòng)收拾操作(zuò)幾乎是(shì)用(♦‌×yòng)戶的(de)本能(néng)了(le)。所以，在設計(jì)¥±↓₽響應式圖片庫的(de)時(shí)候，滑動操作(zuò)等✘ >手勢操作(zuò)賦予用(yòng)戶更多↓∞♣(duō)的(de)權力，讓體(tǐ)驗更加逼真。在移動設備上(¥↕αshàng)使用(yòng)箭頭導航太過于乏味、老(lǎo)舊(jiùβ♣)，手勢交互更加自(zì)然也(yě)更符合真實的(de)交互體<£(tǐ)驗。

4、在移動端上(shàng)禁用(yòng)ligh∑€→tbox效果

Lightbox效果大(dà)概是(shì)桌面端網頁上(shàn↔¶♦₽g)最常見(jiàn)的(de)圖片浏覽模式，圖片以彈出框的(®✘¥de)形式呈現(xiàn)出來(lái)，能(nén↑←δ♦g)随著(zhe)屏幕尺寸和(hé)鼠标操作(zuò)來(lα↕ái)縮放(fàng)。在産品展示的(de)頁面當中，這(zhè)種±≤圖片浏覽模式的(de)使用(yòng)尤其廣α&©泛和(hé)頻(pín)繁，但(dàn)是(sh'§←ì)在移動端上(shàng)的(de)時(shí)候，它可(kě)能←₽(néng)會(huì)引起大(dà)量的(de)用(yòng)戶體(t£≥ǐ)驗上(shàng)的(de)問(wèn)題：蓋住其他< ♥δ(tā)的(de)交互控件(jiàn)、無法退出、尺寸不(bù)合适等π≤φ 等。

5、讓導航元素低(dī)調不(bù)招搖

如(rú)果你(nǐ)使用(yòng)幻燈片的(de)形式來(♥✘∏<lái)展現(xiàn)大(dà)量圖片組成的(de)圖片庫的(dγ<✘e)時(shí)候，導航就(jiù)顯得(de)尤為(wèi)重要(® ∏yào)了(le)。用(yòng)戶肯定不(bù)想λγ在等待加載中耗費(fèi)太多(duō)的(de)時(shí≠♣ ≥)間(jiān)，他(tā)們依然會(huì)按照(zh ≠↑☆ào)自(zì)己的(de) 速度點擊，翻頁，進入，退出，保持，等等。≥✔ ε所以，當你(nǐ)要(yào)使用(yòng)導航元素的(d↕δ≤♠e)時(shí)候，一(yī)定要(yào)設計(jì)在讓他(tā)們覺¶α得(de)不(bù)礙事(shì)的(de)地(d€γì)方。不(bù)要(yào)讓導航的(de)小(xiǎo)圓點蓋在文(wén™<≈)本或者鏈接上(shàng)，并且避免複雜(zá)的(de)控制(zhì)≈¶方式，這(zhè)樣會(huì)分(fē₹♣n)散用(yòng)戶注意力，并讓整個(gè)頁面的(de)設計(jì)都(∑₹¥dōu)趨于複雜(zá)。可(kě)點擊跳(tiào)轉的(d">δ¥e)導航小(xiǎo)圓點能(néng)讓用(yòng)戶快§£(kuài)速跳(tiào)轉到(dào)他(tā)們想要(yào)♥¶✘去(qù)的(de)地(dì)方，提升效率，降低(dī)無謂的(de)消耗φ≤。當然，不(bù)要(yào)弄的(de)太複雜(zá₩&)!平衡最重要(yào)!

6、不(bù)要(yào)讓圖片和(hé)視(shì)頻(pín)∞✘混淆

通(tōng)常情況下(xià)，不(bù★ε&♠)同類型的(de)媒體(tǐ)混到(dào)一(yī)起沒↔♣φ啥問(wèn)題，但(dàn)是(shì)用(y∑→òng)戶肯定不(bù)想翻看(kàn)圖≈<片的(de)時(shí)候，突然發現(xiàn)下(xià)一(y"&>ī)張圖片變成了(le)視(shì)頻(pín∏≤<')，突如(rú)其來(lái)的(de)聲音(yīn)和(hé)額外(wài)&→的(de)流量消耗絕對(duì)是(shì)他(tā)們不(b'₹✘ù)願意碰到(dào)的(de)事(shì)情!将視(shì)頻(pín)和(×φ₽÷hé)圖片分(fēn)割開(kāi)來(lái★★↔¶)，讓他(tā)們知(zhī)道(dào)÷§'✘接下(xià)來(lái)的(de)會(huì)是(shì)什(shén)‌¥♠麽東(dōng)西(xī)，不(bù)要(yào)讓意♥↑ 外(wài)發生(shēng)。

7、确保圖片顯示尺寸不(bù)要(yào)超過原始圖片的(de)最大(dàβ←<φ)寬度

這(zhè)一(yī)點很(hěn)重要(yào)，盡管很(♥φ↕hěn)基礎，但(dàn)是(shì)依然需要(yào)強調一(★★€yī)下(xià)。圖片盡量不(bù)要(yào)去(qù)≈λ 填充超過本身(shēn)尺寸的(de)空(kōng)間(jiān)，↓✔'這(zhè)樣會(huì)讓圖片表現(xiàn)σ♠¥出象素化(huà)的(de)失真效果。值得(de)注意的(de)是(shì)α×÷φ，很(hěn) 多(duō)情況下(xià)圖片在移動端完全填滿Ω‌某個(gè)區(qū)塊沒問(wèn)題，但(dà×↔€n)是(shì)在桌面端的(de)時(s"$↕"hí)候，最大(dà)也(yě)不(bù)能(néng)超ε♥過本身(shēn)寬度。這(zhè)似乎♥"♥并不(bù)難?但(dàn)是(shì)依然有>≈ε↑(yǒu)許多(duō)響應式頁面，當你(nǐ)拉寬浏覽器(qì)×≈★界面的(de)時(shí)候，會(huì)有(yǒu)圖≠☆®片超出本身(shēn)尺寸來(lái)顯示。

上(shàng)一(yī)篇：網頁設計(jì)幾種常見(jiàn)的(de)翻頁方式
下(xià)一(yī)篇：聊一(yī)聊Web網站(zhàn)和(hé)移動App的(‍±de)幾個(gè)差異