關(guān)于滾動(dòng)下滑,我有話說

2015-4-8    用心設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來源:莫貝網(wǎng)

 如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

現(xiàn)在有很多網(wǎng)站使用一些無邊框的、看起來高大上的圖片來鋪滿整個(gè)頁面,而且似乎有一大幫受眾都很吃這一套。

但是并不是所有人都喜歡這種設(shè)計(jì)的。。呃,為啥呢?

我只是想問一句,為啥子你要朝我吼,比如網(wǎng)頁上那個(gè)向下的箭頭?得了吧,我知道怎么用我的電腦,OK?我不是腦殘,我靠滾動(dòng)的方式瀏覽網(wǎng)頁已經(jīng)不是一兩年了。所以不要試圖教我怎么做!

解釋是愚者的行為 ——Milton Glaser

致設(shè)計(jì)師們

你們正在打斷用戶瀏覽網(wǎng)頁的邏輯過程,而緣由不過是一些最最基礎(chǔ)的交互動(dòng)作。所有人都知道該怎么滾動(dòng)頁面,而你們卻肆意破壞了這種心智模型。難道你 們不會(huì)睜大眼睛看看?哪里有被折疊的頁面?所有東西都是平鋪展示的。這種設(shè)計(jì)的出發(fā)點(diǎn)就錯(cuò)了,向下箭頭壓根不是個(gè)解決方案,而是不當(dāng)?shù)睦圪槨?/p>

用一個(gè)箭頭告訴用戶滾動(dòng)網(wǎng)頁的行徑就好像在一個(gè)按鍵上標(biāo)注“點(diǎn)擊這里”那樣愚蠢。這不是設(shè)計(jì),甚至不是藝術(shù)。正如我之前所說,你一試圖解釋就已經(jīng)敗了。

這樣的箭頭壓根沒有存在的意義,相反,它是一種懶惰和無用的解決方案,因?yàn)樗噲D強(qiáng)迫用戶去操作,而非和用戶溝通。

“可是我的客戶希望要個(gè)全屏的大圖片!天哪我該怎么做?

冷靜下來,我們都是設(shè)計(jì)師,挑戰(zhàn)就是樂趣所在。

大量的調(diào)研表明當(dāng)用戶不知道可以下滑時(shí)是如何忽略你的內(nèi)容的,以及針對這個(gè)問題的解決方法。即便使用一個(gè)下滑箭頭確實(shí)起到了不錯(cuò)的效果,而對我來說那只不過是因?yàn)轫撁鎸χ脩舸蠼小敖o我滑下去,傻瓜!”。換言之,它能解決問題,但是不能提供優(yōu)秀的體驗(yàn),

嘗試用一些微妙的動(dòng)畫(我不是指那些動(dòng)來動(dòng)去的箭頭)

頁面上的動(dòng)畫元素可以很好地幫助用戶留意到大圖下面是否還有內(nèi)容。我不是說這是個(gè)萬金油的方案,但是動(dòng)畫對我而言可能是解決此類問題優(yōu)先考慮的方案。

從第一個(gè)例子里可以看到,底部的內(nèi)容在頁面加載完初彈起又落下,直至消失于屏幕最底端,就好像在說:“嗨,我在這里,隨時(shí)來找我”。

如果你的網(wǎng)站使用了視差滾動(dòng),或許你可以再玩點(diǎn)更有意思的效果,這樣可以讓整個(gè)頁面的動(dòng)畫看起來更具一致性。如果圖片在用戶滾動(dòng)時(shí)縮小,那么它在頁面加載完底下內(nèi)容蹦出來時(shí)時(shí)也應(yīng)該有一樣的效果。

同樣地,如果你藏在首屏下的內(nèi)容不止一塊,那也可以整點(diǎn)新花樣。

不要把內(nèi)容藏起來

谷歌Fit在大的圓形圖表下露出小半截卡片幫助你了解可以滑動(dòng)瀏覽更多。這是個(gè)很直觀和智慧的方式因?yàn)樗恍枰魏纹渌嘤嘣貋碚f明,同時(shí)它能給予主視圖元素以足夠的空間。

這并不是一個(gè)多么新穎的想法。在2006年,Jared Spool早就討論過此類設(shè)計(jì)

在網(wǎng)頁中,你也同樣可以采用類似的戲法:讓首屏大圖只顯示90%的窗口高度。

我們還降低底下冒尖的內(nèi)容的透明度,這樣用戶的注意力就能更聚焦在首屏上。

關(guān)于底部內(nèi)容的透明度我有話說。。如果透明度太低那也不中,而且最關(guān)鍵的是別忘了當(dāng)用戶向下滾動(dòng)網(wǎng)頁或試圖與這些內(nèi)容產(chǎn)生交互動(dòng)作時(shí)讓透明度回歸100%。

“簡化”是個(gè)大課題,正如我們都知道的。然而有時(shí)候看起來簡單的解決方法不過是懶惰的體現(xiàn)。有的東西看起來容易設(shè)計(jì),實(shí)則無意義于使用。

請向我保證下次別在你的網(wǎng)站中出現(xiàn)向下箭頭了,好嗎?

日歷

鏈接

個(gè)人資料

存檔