優(yōu)秀的交互設(shè)計(jì)案例分享

當(dāng)用戶打開網(wǎng)站或應(yīng)用時(shí),他們首先會注意到明顯的設(shè)計(jì)元素:logo,顏色,圖標(biāo),插圖和圖像。

雖然這些元素確實(shí)有助于整體用戶體驗(yàn),但實(shí)際上它們都是交互設(shè)計(jì)的一部分。這個(gè)概念對于最終用戶來說可能比華麗的新主頁更敏感,不過,重要的還是創(chuàng)建引人入勝的直觀數(shù)字體驗(yàn)。

 

什么是交互設(shè)計(jì)?

“交互設(shè)計(jì)(IxD)定義了交互系統(tǒng)的結(jié)構(gòu)和行為。隨著時(shí)代的發(fā)展,從計(jì)算機(jī)到移動(dòng)設(shè)備,再到電器以及其他種種,交互設(shè)計(jì)師努力地在人、產(chǎn)品以及他們使用的服務(wù)之間創(chuàng)造有意義的關(guān)系?!?/strong>

——The Interaction Design Association(IxDA)

從交互設(shè)計(jì)誕生之日起,界面就不僅用來呈現(xiàn)靜態(tài)內(nèi)容。從按鈕到鏈接再到表單域,所有相關(guān)事情都是交互設(shè)計(jì)的一部分。在過去的幾十年中,許多書籍已經(jīng)解釋了交互設(shè)計(jì)的方方面面,并且探索了大量的、與體驗(yàn)設(shè)計(jì)交叉或重疊的領(lǐng)域。

交互設(shè)計(jì)已經(jīng)發(fā)展到促進(jìn)人和他們所處環(huán)境之間交互的地步。不同于用戶體驗(yàn)設(shè)計(jì)(指一個(gè)系統(tǒng)中,用戶面對的各個(gè)層面的問題),交互設(shè)計(jì)師只關(guān)心一個(gè)用戶和一個(gè)界面之間的明確的交互。當(dāng)然,在實(shí)際中,事情并沒有清晰的界限。

在Bill Moggridge的書籍討論會上(書名:Designing Interactions), 一位交互設(shè)計(jì)的學(xué)術(shù)研究者Gillian Crampton Smith提出了“交互設(shè)計(jì)語言”的四個(gè)維度。這些維度組成了交互設(shè)計(jì)本身,也因此構(gòu)建起了用戶與界面之間的交互。最初的四個(gè)維度是:語言、視覺展現(xiàn)、物理實(shí)體或空間和時(shí)間。就在最近, IDEXX實(shí)驗(yàn)室的高級交互設(shè)計(jì)師Kevin Silver,提出了第五個(gè)維度,行為。

第一維度:語言,應(yīng)該易于理解,而且應(yīng)該以易于和用戶交流的方式陳述。

第二維度:視覺表達(dá),指的是所有的圖形或圖像,幾乎就是除了文字的一切。這些都應(yīng)該有節(jié)制地使用,避免溢出而讓用戶難以承受。

第三維度:物理實(shí)體或空間,指的是物理硬件,不論是鼠標(biāo)、鍵盤,或是用戶手中的移動(dòng)設(shè)備。

第四維度:時(shí)間,指的是用戶在與前三個(gè)維度交互時(shí)的時(shí)間長度。這包括用戶了解其所處進(jìn)程的時(shí)間,也包括聲音和動(dòng)畫時(shí)間。

第五維度:行為,這個(gè)維度是Kevin Silver在他的文章(What Puts the Design in Interaction Design)中提出的,指的是用戶和系統(tǒng)交互時(shí)的情感和反應(yīng)。

從這五個(gè)維度去思考,交互設(shè)計(jì)師就可以觀察到用戶和交互系統(tǒng)產(chǎn)生交流和連接時(shí)的確切體驗(yàn)。

 

優(yōu)秀的交互設(shè)計(jì)案例

設(shè)計(jì)互動(dòng)在現(xiàn)實(shí)生活中是什么樣的?以下是Dribbble上我們最喜歡的一些示例。

 

設(shè)計(jì)師:Igor Pavlinski。社交媒體應(yīng)用因信息過載而讓人討厭,一次向您展示所有頭條新聞,熱門視頻或文章以及突發(fā)新聞。這個(gè)新社交媒體應(yīng)用程序的概念將控制權(quán)交還給用戶手中,按來源組織內(nèi)容(如YouTube,Vimeo,Twitter或Reddit),并讓您選擇要探索的渠道。

 

tubik設(shè)計(jì)的app讓您有一百萬種方法來定制你的漢堡。當(dāng)您在手機(jī)上訂購時(shí),漢堡的每種成分都可以靈活操作。Tasty Burger應(yīng)用的這個(gè)UI概念通過按類型分解成分,簡化了訂購體驗(yàn)。

 

Rahul.Design。如果您正在尋找房子而且無法親自到現(xiàn)場,那么虛擬觀看將是最佳選擇。房地產(chǎn)應(yīng)用Spec的這一概念在查看新空間時(shí)利用了我們的自然行為。您可以點(diǎn)擊任何房間,如廚房或起居室,然后移動(dòng)手機(jī)以獲得360度全景。只需輕輕一按即可輕松切換房間。

 

Gil設(shè)計(jì)的這種簡單的頁面交互改善了用戶體驗(yàn),讓訪問者留在頁面上的時(shí)間更長。

 

。交互不需要大膽而明顯地產(chǎn)生影響。這個(gè)應(yīng)用概念簡化了我們都鄙視的行為 - 從長長的名單中選擇我們的居住地。這種微交互首先讓您選擇您所在國家/地區(qū)的第一個(gè)字母,然后從更小,更集中的國家/地區(qū)列表中找到它,而不是讓用戶滾動(dòng)列表并找到他們的國家/地區(qū)。

 

Mykolas Puodziunas設(shè)計(jì)的電商app。越來越多的零售網(wǎng)站讓您更容易“快速查看”某個(gè)產(chǎn)品,而不是點(diǎn)擊每個(gè)詳細(xì)信息頁面,然后必須退回到搜索結(jié)果以瀏覽更多產(chǎn)品。這個(gè)概念設(shè)計(jì)的更好,讓您以不同的顏色查看每個(gè)產(chǎn)品,而無需離開類別頁面。

每天更新,
全站高品質(zhì)素材免費(fèi)下載!