2015-4-8 用心設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( www.newchinaweekly.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)
來(lái)源：莫貝網(wǎng)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
現(xiàn)在有很多網(wǎng)站使用一些無(wú)邊框的、看起來(lái)高大上的圖片來(lái)鋪滿整個(gè)頁(yè)面，而且似乎有一大幫受眾都很吃這一套。
但是并不是所有人都喜歡這種設(shè)計(jì)的。。呃，為啥呢？
我只是想問(wèn)一句，為啥子你要朝我吼，比如網(wǎng)頁(yè)上那個(gè)向下的箭頭？得了吧，我知道怎么用我的電腦，OK？我不是腦殘，我靠滾動(dòng)的方式瀏覽網(wǎng)頁(yè)已經(jīng)不是一兩年了。所以不要試圖教我怎么做！
解釋是愚者的行為 ——Milton Glaser
你們正在打斷用戶瀏覽網(wǎng)頁(yè)的邏輯過(guò)程，而緣由不過(guò)是一些最最基礎(chǔ)的交互動(dòng)作。所有人都知道該怎么滾動(dòng)頁(yè)面，而你們卻肆意破壞了這種心智模型。難道你 們不會(huì)睜大眼睛看看？哪里有被折疊的頁(yè)面？所有東西都是平鋪展示的。這種設(shè)計(jì)的出發(fā)點(diǎn)就錯(cuò)了，向下箭頭壓根不是個(gè)解決方案，而是不當(dāng)?shù)睦圪槨?/p>
這樣的箭頭壓根沒(méi)有存在的意義，相反，它是一種懶惰和無(wú)用的解決方案，因?yàn)樗噲D強(qiáng)迫用戶去操作，而非和用戶溝通。
冷靜下來(lái)，我們都是設(shè)計(jì)師，挑戰(zhàn)就是樂(lè)趣所在。
大量的調(diào)研表明當(dāng)用戶不知道可以下滑時(shí)是如何忽略你的內(nèi)容的，以及針對(duì)這個(gè)問(wèn)題的解決方法。即便使用一個(gè)下滑箭頭確實(shí)起到了不錯(cuò)的效果，而對(duì)我來(lái)說(shuō)那只不過(guò)是因?yàn)轫?yè)面對(duì)著用戶大叫“給我滑下去，傻瓜！”。換言之，它能解決問(wèn)題，但是不能提供優(yōu)秀的體驗(yàn)，
頁(yè)面上的動(dòng)畫(huà)元素可以很好地幫助用戶留意到大圖下面是否還有內(nèi)容。我不是說(shuō)這是個(gè)萬(wàn)金油的方案，但是動(dòng)畫(huà)對(duì)我而言可能是解決此類問(wèn)題優(yōu)先考慮的方案。
從第一個(gè)例子里可以看到，底部的內(nèi)容在頁(yè)面加載完初彈起又落下，直至消失于屏幕最底端，就好像在說(shuō)：“嗨，我在這里，隨時(shí)來(lái)找我”。
如果你的網(wǎng)站使用了視差滾動(dòng)，或許你可以再玩點(diǎn)更有意思的效果，這樣可以讓整個(gè)頁(yè)面的動(dòng)畫(huà)看起來(lái)更具一致性。如果圖片在用戶滾動(dòng)時(shí)縮小，那么它在頁(yè)面加載完底下內(nèi)容蹦出來(lái)時(shí)時(shí)也應(yīng)該有一樣的效果。
同樣地，如果你藏在首屏下的內(nèi)容不止一塊，那也可以整點(diǎn)新花樣。
谷歌Fit在大的圓形圖表下露出小半截卡片幫助你了解可以滑動(dòng)瀏覽更多。這是個(gè)很直觀和智慧的方式因?yàn)樗恍枰魏纹渌嘤嘣貋?lái)說(shuō)明，同時(shí)它能給予主視圖元素以足夠的空間。
這并不是一個(gè)多么新穎的想法。在2006年，Jared Spool早就討論過(guò)此類設(shè)計(jì)。
在網(wǎng)頁(yè)中，你也同樣可以采用類似的戲法：讓首屏大圖只顯示90%的窗口高度。
我們還降低底下冒尖的內(nèi)容的透明度，這樣用戶的注意力就能更聚焦在首屏上。
關(guān)于底部?jī)?nèi)容的透明度我有話說(shuō)。。如果透明度太低那也不中，而且最關(guān)鍵的是別忘了當(dāng)用戶向下滾動(dòng)網(wǎng)頁(yè)或試圖與這些內(nèi)容產(chǎn)生交互動(dòng)作時(shí)讓透明度回歸100%。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.newchinaweekly.com