人妻少妇精品无码专区漫画_亚洲国产精品一区二区sm_内地无码毛片手机在线_亚洲av大精永久无码精品

當前位置: 首頁 > 設計資訊 > 理論文摘 > 正文

15 個用戶體驗設計剖析

2010-09-04 18978 0
內容滾動中的運動視差效果

screenshot



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

[Page: ]


iPhone 的下滑式刷新

screenshot


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

[Page: ]


隨時隨地的提示界面 

screenshot



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

[Page: ]


Convertbot 的圓盤式菜單

screenshot


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

[Page: ]

SlideDeck 的手風琴式導航

screenshot


  Web 上,基于 jQuery 的內容滾動面板非常多,SlideDeck 是其中的佼佼者。使用獨特的手風琴式界面顯示內容,可以看做是 Outlook 風格導航面板的水平版,但視覺效果和體驗更出眾。

[Page: ]

Strongbad 的隨機回信

screenshot


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

[Page: ]

Made By Tinder 的主題色選擇

screenshot


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

Pixelmator

screenshot


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

[Page: ]

Riot Industries 的導航體驗

screenshot


  這個站點的導航很有特色,不僅流暢,而且設計出眾,鼠標在導航條目上盤旋的時候,導航條目從左邊的容器中微微探出,點擊后,以漸變的方式,逐漸顯示當前內容,這一切并沒有使用任何 Flash 技術。

[Page: ]

Web 上的拖放操作

screenshot


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

[Page: ]

在線 Photoshop 的照片堆疊界面

screenshot


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

[Page: ]

隨鼠而動

screenshot


  同樣展示運動視差效果,同時,隨著鼠標的移動,畫面的工作區(qū)也隨著移動。這個站點也實現(xiàn)了類似的效果。(感覺這種體驗并不好 - 譯者)

[Page: ]

雙滾動面板

screenshot


  這又是一個基于 jQuery 的,非常出色的內容滾動面板設計。圖片垂直滾動,而解釋文字同步水平滾動,視覺效果和體驗都十分出眾。

 

基于物理動力的滾動 

screenshot



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

[Page: ]


至簡的界面

screenshot



  漂亮而復雜的 UI 讓人喜歡,有時候,簡潔的界面更吸引人。Mac 的 WriteRoom 是一個非常強大的文本編輯器,這些強大的功能隱藏在至簡的界面下。


213
評論區(qū)(0)
正在加載評論...
相關推薦