2013-11-6 藍(lán)藍(lán)設(shè)計的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
來源:http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里
這是iOS上的Chrome,有著基于情景的消隱動效。
當(dāng)向下滾動時,導(dǎo)航控件自動消隱。用戶向上滾動時,導(dǎo)航控件出現(xiàn)。優(yōu)設(shè)哥發(fā)現(xiàn)這一點(diǎn)上,騰訊網(wǎng)的新聞詳情頁已經(jīng)采用了。案例圍觀地址(上下滾動鼠標(biāo)滑輪,注意頁面頂部導(dǎo)航的變化):http://news.qq.com/a/20131104/001730.htm。這種方法既能提高瀏覽體驗、也拓展了有限的瀏覽空間。這對于空間限制較大的移動設(shè)備來說,尤為重要。
用戶會快速掃描內(nèi)容,略過不感興趣的內(nèi)容。當(dāng)用戶停止快速瀏覽時,說明上面或者當(dāng)前有用戶感興趣的內(nèi)容,為了便于導(dǎo)航,導(dǎo)航控件再次出現(xiàn)。這是一種動態(tài)的界面。
注意: 基于情景的消隱,目的在于提高用戶的注意力以及節(jié)省屏幕空間。
可能這則動效大家最為熟悉,也就是下拉刷新。通過該動效,用戶可以刷新內(nèi)容。下圖是Twitter的應(yīng)用,看看是怎樣利用這個動效刷新信息流的。
為什么這種動效效果如此好?因為下拉刷新是有依據(jù)的,首先,桌面時代,用戶就喜歡按刷新鍵來載入新內(nèi)容。其次用戶渴望把舊內(nèi)容向下拉開,這樣就給更多的新內(nèi)容騰出了地方。所以下拉和刷新結(jié)合了起來。
注意: 在設(shè)計中,將用戶的習(xí)慣/預(yù)期與行為結(jié)合,能打造無縫的體驗。
可接受性的概念來自認(rèn)知學(xué)理論,主要面向引導(dǎo)用戶這一問題。
用戶界面需要一種可接受性——軟件界面能夠自然、合乎用戶情理的完成轉(zhuǎn)換。
我們可在iOS的照相應(yīng)用中發(fā)展這種UX理論。
比如說解鎖漣漪效果,便說明操作有效。這給用戶以提示,用戶便能接受下一步的轉(zhuǎn)換。然而在iOS7中,蘋果移除了這一特性,因為用戶已經(jīng)全盤習(xí)慣、熟知了這種操作,用戶已經(jīng)適應(yīng)了這種轉(zhuǎn)換,因此動效作為”引導(dǎo)”已經(jīng)沒有存在的必要。我想這大概就是扁平取代擬物的原因——之前iOS的擬物隱喻眾人熟知,已無引導(dǎo)用戶的必要。但是還是要贊一下曾經(jīng)的漣漪效果,用戶引導(dǎo)效果非常棒。推薦閱讀《全世界都被拍扁!你應(yīng)如何理性對待扁平化設(shè)計》
注意: 賦予元素高可接受性,能為用戶指明操作方法。
一周前,Nikita Vasilyev,這位多倫多的UI設(shè)計師提出了一個理念。寫了一個腳本,賦予焦點(diǎn)元素動效。仍處于試驗中,但是非常有趣,感興趣的可以自行youtube這位仁兄的實驗。
當(dāng)使用鍵盤進(jìn)行導(dǎo)航時,用戶按Tab往往無法很好的掌握”自己在頁面中的所處”,這種動效設(shè)計會賦予焦點(diǎn)動效,能夠讓轉(zhuǎn)換更清晰,讓用戶更能明白自己所處的元素位置
這個腳本的地址:http://n12v.com/focus-transition/
注意:引導(dǎo)用戶,無論用戶以何種方式導(dǎo)航,都能一清二楚。
本文例舉的事例不是很多。目的并不是為了展示的交互技術(shù),而是要突出一點(diǎn):一切交互技術(shù)的更新、變革,目的都是為了更好的用戶體驗。以提高用戶體驗為出發(fā)點(diǎn),你的設(shè)計會更棒。
我們不能固步自封,應(yīng)該保持探索和實驗。
最后給英文好的童鞋一點(diǎn)福利:http://webdesign.tutsplus.com/tutorials/ux-tutorials/implementing-the-float-label-form-pattern/非常不錯的動效實現(xiàn)教程。
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com