當(dāng)前位置: 首頁(yè) > 設(shè)計(jì)資訊 > 理論文摘 > 正文

15 個(gè)用戶體驗(yàn)設(shè)計(jì)剖析

2010-09-04 18874 0
內(nèi)容滾動(dòng)中的運(yùn)動(dòng)視差效果

screenshot



  Parallax scrolling 是讓多層背景以不同的速度移動(dòng),形成運(yùn)動(dòng)視差 3D 效果,雖然純屬視覺效果,但在內(nèi)容滾動(dòng)時(shí)形成的視覺體驗(yàn)仍然非常出色。Charlie Gentle’s portfolio 網(wǎng)站就是該效果的絕佳展示,點(diǎn)擊左右導(dǎo)航按鈕,除了滾動(dòng)進(jìn)入不同內(nèi)容區(qū)域之外,上方的多層背景圖以不同速度移動(dòng)而形成的 3D 運(yùn)動(dòng)視差效果非常漂亮。

[Page: ]


iPhone 的下滑式刷新

screenshot


  iPhone 的多數(shù)社會(huì)化網(wǎng)絡(luò)應(yīng)用都包含數(shù)據(jù)刷新功能,有的是晃一晃機(jī)器,有的是按某個(gè)按鈕,在我看來(lái),最好的方法是下滑式刷新。包括 Gowalla, Foursquare 以及 Tweetie 等應(yīng)用都默認(rèn)使用該方法,你在用手指翻動(dòng)列表的時(shí)候,如果想刷新一下數(shù)據(jù),你的手指還沒(méi)離開那個(gè)區(qū)域,如果使用按鈕,手指必須離開當(dāng)前的位置,導(dǎo)致操作上的不連貫,而下滑式刷新,手指繼續(xù)留在原來(lái)操作的位置,只是改變一下動(dòng)作。
我們從這里可以學(xué)習(xí)到的東西是,經(jīng)常檢查你的 UI,看看是不是存在讓用戶注意力轉(zhuǎn)移的操作。

[Page: ]


隨時(shí)隨地的提示界面 

screenshot



  一些深受歡迎的 Mac 程序經(jīng)常是在后臺(tái)默默運(yùn)行,到了需要用戶介入的時(shí)候彈出界面,完成后又默默消失,象 The Hit List, 隨時(shí)隨地會(huì)將需要通知的消息顯示出來(lái),看上去,象操作系統(tǒng)本身的功能。

[Page: ]


Convertbot 的圓盤式菜單

screenshot


  Convertbot 是為數(shù)不多的事實(shí)上并不好用但用起來(lái)又妙趣橫生的 UI 設(shè)計(jì)之一。這個(gè) iPhone 程序用來(lái)進(jìn)行單位轉(zhuǎn)換,iPhone 的應(yīng)用商店這樣的程序數(shù)不勝數(shù),但都沒(méi)有這個(gè)這么有趣。它設(shè)計(jì)了一個(gè)圓盤式操作界面,很形象,很漂亮,讓人有時(shí)不時(shí)想拿出來(lái)用一下的沖動(dòng),這個(gè)案例告訴我們,有時(shí)候,中看也很重要。

[Page: ]

SlideDeck 的手風(fēng)琴式導(dǎo)航

screenshot


  Web 上,基于 jQuery 的內(nèi)容滾動(dòng)面板非常多,SlideDeck 是其中的佼佼者。使用獨(dú)特的手風(fēng)琴式界面顯示內(nèi)容,可以看做是 Outlook 風(fēng)格導(dǎo)航面板的水平版,但視覺效果和體驗(yàn)更出眾。

[Page: ]

Strongbad 的隨機(jī)回信

screenshot


  Strongbad 是 Homestarrunner 推出的經(jīng)久不衰的網(wǎng)絡(luò)動(dòng)畫中的卡通形象,每周,Strongbad 會(huì)給觀眾回復(fù)很搞笑的郵件,這些郵件慢慢越積越多,最近,站點(diǎn)開發(fā)方推出一個(gè)隨機(jī)郵件瀏覽功能,點(diǎn)一下那個(gè)隨機(jī)按鈕,就像抽獎(jiǎng)機(jī)那樣隨機(jī)選中一封過(guò)去的郵件顯示。這個(gè)隨機(jī)顯示的過(guò)十分生動(dòng),讓人忍不住一點(diǎn)再點(diǎn)。這個(gè) UI 案例告訴我們,有時(shí)候,你在用戶界面上的一點(diǎn)微小改動(dòng),有可能帶來(lái)意想不到的效果。

[Page: ]

Made By Tinder 的主題色選擇

screenshot


  這是一個(gè)很神秘的小站點(diǎn),神秘到我們不知道它到底是做什么的。但這個(gè)網(wǎng)站的頂部,有幾個(gè)小色塊,點(diǎn)擊后,整個(gè)站點(diǎn)就按色塊上的色調(diào)重新配色,雖然很簡(jiǎn)單,但用戶體驗(yàn)實(shí)在太妙了。

Pixelmator

screenshot


  Pixelmator 是一個(gè)很出色的圖像編輯工具,雖然遠(yuǎn)不如 Photoshop 強(qiáng)大,但包含很多創(chuàng)新功能。它的用戶界面中有一個(gè)很有趣的功能,你在為圖像的某個(gè)位置設(shè)置效果的時(shí)候,設(shè)置點(diǎn)和設(shè)置界面之間會(huì)顯示一條很自然的連線,移動(dòng)設(shè)置點(diǎn)的時(shí)候,連線也跟著改變,雖然這條連線并沒(méi)有多少實(shí)際意義,但給用戶帶來(lái)一種操作上的暗示,也很有趣味。

[Page: ]

Riot Industries 的導(dǎo)航體驗(yàn)

screenshot


  這個(gè)站點(diǎn)的導(dǎo)航很有特色,不僅流暢,而且設(shè)計(jì)出眾,鼠標(biāo)在導(dǎo)航條目上盤旋的時(shí)候,導(dǎo)航條目從左邊的容器中微微探出,點(diǎn)擊后,以漸變的方式,逐漸顯示當(dāng)前內(nèi)容,這一切并沒(méi)有使用任何 Flash 技術(shù)。

[Page: ]

Web 上的拖放操作

screenshot


  在我看來(lái),任何應(yīng)用都應(yīng)該支持拖放操作,當(dāng)然 Web 有它的局限性,不過(guò),近年來(lái),Web 上的拖放操作已經(jīng)很常見了。在上面的站點(diǎn),你可以直接將喜歡的程序拖放到下載按鈕處,直接下載。IconDock 的購(gòu)物車也支持列斯的操作。(Wufoo 和 Polldaddy 的拖放式表單設(shè)計(jì) UI 在我看來(lái)是 Web 拖放界面的最佳實(shí)現(xiàn) - 譯者)

[Page: ]

在線 Photoshop 的照片堆疊界面

screenshot


  這是另一個(gè)沒(méi)有實(shí)際意義,但很吸引人的界面設(shè)計(jì),Adobe 的在線 Photoshop 在加載的時(shí)候,會(huì)顯示一堆照片,你可以把他們抓起來(lái)亂扔,讓它們相互碰撞,其物理效果十分出色,非常吸引人。

[Page: ]

隨鼠而動(dòng)

screenshot


  同樣展示運(yùn)動(dòng)視差效果,同時(shí),隨著鼠標(biāo)的移動(dòng),畫面的工作區(qū)也隨著移動(dòng)。這個(gè)站點(diǎn)也實(shí)現(xiàn)了類似的效果。(感覺這種體驗(yàn)并不好 - 譯者)

[Page: ]

雙滾動(dòng)面板

screenshot


  這又是一個(gè)基于 jQuery 的,非常出色的內(nèi)容滾動(dòng)面板設(shè)計(jì)。圖片垂直滾動(dòng),而解釋文字同步水平滾動(dòng),視覺效果和體驗(yàn)都十分出眾。

 

基于物理動(dòng)力的滾動(dòng) 

screenshot



  我第一次使用 iPhone 的時(shí)候,對(duì)它的基于物理動(dòng)力的交互 UI 印象深刻,在 Safari 上用手指翻動(dòng)頁(yè)面的時(shí)候,頁(yè)面并不是按線性速度滾動(dòng),而是象現(xiàn)實(shí)物理世界中的物體那樣,擁有曲線速度,先是快速滾動(dòng),然后慢慢慢下來(lái)。

[Page: ]


至簡(jiǎn)的界面

screenshot



  漂亮而復(fù)雜的 UI 讓人喜歡,有時(shí)候,簡(jiǎn)潔的界面更吸引人。Mac 的 WriteRoom 是一個(gè)非常強(qiáng)大的文本編輯器,這些強(qiáng)大的功能隱藏在至簡(jiǎn)的界面下。


213
評(píng)論區(qū)(0)
正在加載評(píng)論...