響應式設計 無疑是當前 網頁(yè)設計 領域當中(zhōng),不可(kě)忽略的必要組成部分(fēn)。而響應式網頁(yè)中(zhōng)的圖片顯示又(yòu)是老生常談的問題,許多(duō)争論集中(zhōng)在響應式網站的圖片應當怎麽展示。繼續延伸開來,那麽響應式網站中(zhōng)的圖片庫應當如何設計呢(ne)?
相比于單個圖片,圖庫的展示無疑更加複雜,牽涉到的變量更多(duō),所以實現起來也更加麻煩費神。接下來,我們來看看如果要設計響應式的圖片庫,有(yǒu)哪些值得注意的基本規則和技(jì )巧。
1、輪播幻燈片:盡量隐藏導航
在桌面端上導航的存在可(kě)能(néng)沒什麽,但是在移動端上查看的時候,導航還是盡量隐藏起來,需要的時候再顯現。而諸如左右切換的按鈕和标明浏覽位置的圓點,最好是在光标移動上去之後再顯示,這樣的設計不僅可(kě)以避免用(yòng)戶分(fēn)心,而且能(néng)避免内容和導航元素之間的沖突,降低整體(tǐ)設計的混亂感。
2、避免使用(yòng)大量肖像類圖片
如果你設計的圖片庫是類似網格布局的話,你可(kě)能(néng)會盡量挑選和橫向的圖片,或者方形的圖像。這樣的設計在兼容桌面端設計的同時,還可(kě)以讓用(yòng)戶在小(xiǎo)屏幕上更好地查看。人像類的圖片在手機上适合縱向屏幕上浏覽,如果橫過來的話,圖片會顯得特别小(xiǎo),浏覽會相當不方便。橫向是最佳的,如果不行的話,使用(yòng)方形的圖片會是很(hěn)好的兼容性方案。一個響應式的圖片庫的設計需要考慮多(duō)種因素,請務(wù)必牢記用(yòng)戶的不同浏覽場景。
3、在移動端上支持手勢操作(zuò)
觸摸屏上使用(yòng)收拾操作(zuò)幾乎是用(yòng)戶的本能(néng)了。所以,在設計 響應式圖片 庫的時候,滑動操作(zuò)等手勢操作(zuò)賦予用(yòng)戶更多(duō)的權力,讓體(tǐ)驗更加逼真。在移動設備上使用(yòng)箭頭導航太過于乏味、老舊,手勢交互更加自然也更符合真實的交互體(tǐ)驗。
4、在移動端上禁用(yòng)lightbox效果
Lightbox效果大概是桌面端網頁(yè)上最常見的圖片浏覽模式,圖片以彈出框的形式呈現出來,能(néng)随着屏幕尺寸和鼠标操作(zuò)來縮放。在産(chǎn)品展示的頁(yè)面當中(zhōng),這種圖片浏覽模式的使用(yòng)尤其廣泛和頻繁,但是在移動端上的時候,它可(kě)能(néng)會引起大量的用(yòng)戶體(tǐ)驗上的問題:蓋住其他(tā)的交互控件、無法退出、尺寸不合适等等。
5、讓導航元素低調不招搖
如果你使用(yòng)幻燈片的形式來展現大量圖片組成的圖片庫的時候,導航就顯得尤為(wèi)重要了。用(yòng)戶肯定不想在等待加載中(zhōng)耗費太多(duō)的時間,他(tā)們依然會按照自己的速度點擊,翻頁(yè),進入,退出,保持,等等。所以,當你要使用(yòng)導航元素的時候,一定要設計在讓他(tā)們覺得不礙事的地方。不要讓導航的小(xiǎo)圓點蓋在文(wén)本或者鏈接上,并且避免複雜的控制方式,這樣會分(fēn)散用(yòng)戶注意力,并讓整個頁(yè)面的設計都趨于複雜。可(kě)點擊跳轉的導航小(xiǎo)圓點能(néng)讓用(yòng)戶快速跳轉到他(tā)們想要去的地方,提升效率,降低無謂的消耗。當然,不要弄的太複雜!平衡最重要!
6、不要讓圖片和視頻混淆
通常情況下,不同類型的媒體(tǐ)混到一起沒啥問題,但是用(yòng)戶肯定不想翻看圖片的時候,突然發現下一張圖片變成了視頻,突如其來的聲音和額外的流量消耗絕對是他(tā)們不願意碰到的事情!将視頻和圖片分(fēn)割開來,讓他(tā)們知道接下來的會是什麽東西,不要讓意外發生。