響應式網站設計的(de)圖片處理(lǐ)技巧

響應式網站是當前網站開發的(de)主流。而響應式網頁中的(de)圖片顯示又是老生常談的(de)問題，許多(duō)争論集中在響應式網站的(de)圖片應當怎麽展示。響應式網站中的(de)圖片應當如何設計，有哪些值得(de)注意的(de)基本規則和(hé)技巧?

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

在桌面端上導航的(de)存在可(kě)能沒什(shén)麽，但是在移動端上查看的(de)時(shí)候，導航還(hái)是盡量隐藏起來(lái)，需要的(de)時(shí)候再顯現。而諸如左右切換的(de)按鈕和(hé)标明(míng)浏覽位置的(de)圓 點，最好是在光(guāng)标移動上去之後再顯示，這(zhè)樣的(de)設計不僅可(kě)以避免用(yòng)戶分(fēn)心，而且能避免内容和(hé)導航元素之間的(de)沖突，降低整體設計的(de)混亂感。

 

2、在移動端上支持手勢操作

在設計響應式圖片庫的(de)時(shí)候，滑動操作等手勢操作賦予用(yòng)戶更多(duō)的(de)權力，讓體驗更加逼真。在移動設備上使用(yòng)箭頭導航太過于乏味、老舊(jiù)，手勢交互更加自然也(yě)更符合真實的(de)交互體驗。

 

3、不要讓圖片和(hé)視頻(pín)混淆

通(tōng)常情況下(xià)，不同類型的(de)媒體混到一起沒啥問題，但是用(yòng)戶肯定不想翻看圖片的(de)時(shí)候，突然發現下(xià)一張圖片變成了(le)視頻(pín)，突如其來(lái)的(de)聲音(yīn)和(hé)額外的(de)流量消耗絕對(duì)是他(tā)們不願意碰到的(de)事情!将視頻(pín)和(hé)圖片分(fēn)割開來(lái)，讓他(tā)們知道接下(xià)來(lái)的(de)會是什(shén)麽東西，不要讓意外發生。

 

4、确保圖片顯示尺寸不要超過原始圖片的(de)最大(dà)寬度

這(zhè)一點很重要，盡管很基礎，但是依然需要強調一下(xià)。圖片盡量不要去填充超過本身尺寸的(de)空間，這(zhè)樣會讓圖片表現出象素化(huà)的(de)失真效果。值得(de)注意的(de)是，很 多(duō)情況下(xià)圖片在移動端完全填滿某個(gè)區(qū)塊沒問題，但是在桌面端的(de)時(shí)候，最大(dà)也(yě)不能超過本身寬度。這(zhè)似乎并不難?但是依然有許多(duō)響應式頁面，當你拉寬浏覽器界 面的(de)時(shí)候，會有圖片超出本身尺寸來(lái)顯示。

 

5、圖片縮放

如果你的(de)圖庫中的(de)圖片要牽涉到圖片縮放，那麽盡量讓圖片去縮小，而不是放大(dà)。甚至最好是爲圖片設定精确的(de)尺寸。通(tōng)常，圖片縮放會使用(yòng)百分(fēn)比來(lái)控制它 的(de)大(dà)小變化(huà)，如果你個(gè)屬性被設定爲按照(zhào)百分(fēn)比來(lái)縮放，那麽其他(tā)的(de)相關屬性最好設置爲自動。比如将圖片寬度設定爲50%，那麽高(gāo)度縮放應當設定爲自動。

 

以上這(zhè)些規則并不複雜(zá)，但是當你開始進行響應式設計的(de)時(shí)候，這(zhè)些雞零狗碎的(de)問題開始顯現，在意想不到的(de)地方影(yǐng)響整個(gè)設計和(hé)體驗。以用(yòng)戶爲重心，小心繞過這(zhè)些坑，會讓你的(de)響應式網頁更優秀，也(yě)更快(kuài)搞定。