Rodrigo Muniz對于網(wǎng)頁指引用戶滾動有些獨到的見解乐疆。
翻譯:勵定洲
現(xiàn)在有很多網(wǎng)站使用一些無邊框的、看起來高大上的圖片來鋪滿整個頁面贬养,而且似乎有一大幫受眾都很吃這一套挤土。
但是并不是所有人都喜歡這種設(shè)計的。煤蚌。呃耕挨,為啥呢?
我只是想問一句尉桩,為啥子你要朝我吼,比如網(wǎng)頁上那個向下的箭頭贪庙?得了吧蜘犁,我知道怎么用我的電腦,OK止邮?我不是腦殘这橙,我靠滾動的方式瀏覽網(wǎng)頁已經(jīng)不是一兩年了。所以不要試圖教我怎么做导披!
解釋是愚者的行為 ——Milton Glaser
致設(shè)計師們
你們正在打斷用戶瀏覽網(wǎng)頁的邏輯過程屈扎,而緣由不過是一些最最基礎(chǔ)的交互動作。所有人都知道該怎么滾動頁面撩匕,而你們卻肆意破壞了這種心智模型鹰晨。難道你們不會睜大眼睛看看?哪里有被折疊的頁面止毕?所有東西都是平鋪展示的模蜡。這種設(shè)計的出發(fā)點就錯了,向下箭頭壓根不是個解決方案扁凛,而是不當(dāng)?shù)睦圪槨?/p>
用一個箭頭告訴用戶滾動網(wǎng)頁的行徑就好像在一個按鍵上標(biāo)注“點擊這里”那樣愚蠢忍疾。這不是設(shè)計,甚至不是藝術(shù)谨朝。正如我之前所說卤妒,你一試圖解釋就已經(jīng)敗了。
這樣的箭頭壓根沒有存在的意義字币,相反则披,它是一種懶惰和無用的解決方案,因為它正試圖強迫用戶去操作纬朝,而非和用戶溝通收叶。
“可是我的客戶希望要個全屏的大圖片!天哪我該怎么做共苛?
冷靜下來判没,我們都是設(shè)計師蜓萄,挑戰(zhàn)就是樂趣所在。
大量的調(diào)研表明當(dāng)用戶不知道可以下滑時是如何忽略你的內(nèi)容的澄峰,以及針對這個問題的解決方法嫉沽。即便使用一個下滑箭頭確實起到了不錯的效果,而對我來說那只不過是因為頁面對著用戶大叫“給我滑下去俏竞,傻瓜绸硕!”。換言之魂毁,它能解決問題玻佩,但是不能提供優(yōu)秀的體驗,
嘗試用一些微妙的動畫(我不是指那些動來動去的箭頭)
頁面上的動畫元素可以很好地幫助用戶留意到大圖下面是否還有內(nèi)容席楚。我不是說這是個萬金油的方案咬崔,但是動畫對我而言可能是解決此類問題優(yōu)先考慮的方案。
從第一個例子里可以看到烦秩,底部的內(nèi)容在頁面加載完初彈起又落下垮斯,直至消失于屏幕最底端,就好像在說:“嗨只祠,我在這里兜蠕,隨時來找我”。
如果你的網(wǎng)站使用了視差滾動抛寝,或許你可以再玩點更有意思的效果熊杨,這樣可以讓整個頁面的動畫看起來更具一致性。如果圖片在用戶滾動時縮小墩剖,那么它在頁面加載完底下內(nèi)容蹦出來時時也應(yīng)該有一樣的效果猴凹。
同樣地,如果你藏在首屏下的內(nèi)容不止一塊岭皂,那也可以整點新花樣郊霎。
不要把內(nèi)容藏起來
谷歌Fit在大的圓形圖表下露出小半截卡片幫助你了解可以滑動瀏覽更多。這是個很直觀和智慧的方式因為它不需要任何其它多余元素來說明爷绘,同時它能給予主視圖元素以足夠的空間书劝。
這并不是一個多么新穎的想法。在2006年土至,Jared Spool早就討論過此類設(shè)計购对。
在網(wǎng)頁中,你也同樣可以采用類似的戲法:讓首屏大圖只顯示90%的窗口高度陶因。
我們還降低底下冒尖的內(nèi)容的透明度骡苞,這樣用戶的注意力就能更聚焦在首屏上。
關(guān)于底部內(nèi)容的透明度我有話說。解幽。如果透明度太低那也不中贴见,而且最關(guān)鍵的是別忘了當(dāng)用戶向下滾動網(wǎng)頁或試圖與這些內(nèi)容產(chǎn)生交互動作時讓透明度回歸100%。