優(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í)間更長。

 

Mykolas Puod?iūnas設(shè)計(jì)。交互不需要大膽而明顯地產(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)下載！