UI交互設(shè)計(jì)的10個(gè)絕妙示例

　　當(dāng)用戶打開(kāi)網(wǎng)站或應(yīng)用程序時(shí)，他們首先會(huì)注意到顯而易見(jiàn)的設(shè)計(jì)元素：徽標(biāo)，顏色，圖標(biāo)，插圖和圖像。這些元素確實(shí)有助于整體用戶體驗(yàn)，但實(shí)際上卻是一個(gè)更大的難題：交互設(shè)計(jì)。與浮華的新首頁(yè)相比，此概念對(duì)最終用戶可能更微妙，但對(duì)于創(chuàng)建引人入勝的直觀數(shù)字體驗(yàn)而言，這一概念至關(guān)重要。所以今天AAA教育武老師為大家分享UI交互設(shè)計(jì)的10個(gè)絕妙示例。
 

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

　　交互設(shè)計(jì)是為了促進(jìn)用戶和產(chǎn)品之間的交互(大多數(shù)情況下，這些產(chǎn)品是應(yīng)用或網(wǎng)站)。根據(jù)交互設(shè)計(jì)基金會(huì)的說(shuō)法，“交互設(shè)計(jì)的目標(biāo)是創(chuàng)建使用戶能夠以最佳方式實(shí)現(xiàn)其目標(biāo)的產(chǎn)品。” 換句話說(shuō)，交互設(shè)計(jì)者負(fù)責(zé)在屏幕上創(chuàng)建用戶可能與之交互的每個(gè)元素，無(wú)論是通過(guò)單擊，滑動(dòng)，敲擊還是某種操作。
 

　　交互設(shè)計(jì)的五個(gè)維度是了解其涉及的有用模型。該模型由交互設(shè)計(jì)學(xué)者Gillian Crampton Smith首次提出，僅包含四個(gè)維度。IDEXX實(shí)驗(yàn)室的高級(jí)交互設(shè)計(jì)師Kevin Silver添加了第五個(gè)。交互設(shè)計(jì)和界面設(shè)計(jì)區(qū)別是什么。
 

　　1D：?jiǎn)卧~應(yīng)該易于理解，并且應(yīng)該向用戶傳達(dá)適當(dāng)數(shù)量的信息(太多的細(xì)節(jié)可能會(huì)淹沒(méi)，而信息太少則會(huì)引起混亂)。
 

　　2D：圖像，字體和UI圖標(biāo)之類的視覺(jué)表示應(yīng)補(bǔ)充文字以向用戶傳達(dá)信息。
 

　　3D：物理對(duì)象或空間是指用戶與之交互的實(shí)際硬件和對(duì)象。例如，他們使用的是智能手機(jī)還是帶鼠標(biāo)的筆記本電腦?他們?cè)谀睦铮谵k公桌前還是在擁擠的地鐵上?
 

　　4D：時(shí)間是指用戶如何衡量進(jìn)度，例如聲音和動(dòng)畫(huà)，以及與前三個(gè)維度互動(dòng)花費(fèi)的時(shí)間。
 

　　5D：行為由Kevin Silver添加，其中包括先前的尺寸如何定義產(chǎn)品的相互作用。它還包括用戶和產(chǎn)品的反應(yīng)。
 

　　UI交互設(shè)計(jì)如何提升用戶體驗(yàn)？
 

　　交互設(shè)計(jì)的10個(gè)示例
 

　　設(shè)計(jì)交互在現(xiàn)實(shí)生活中看起來(lái)像什么?這是在Dribbble上找到的一些我們最喜歡的示例。
 

　　由強(qiáng)尼維諾。與您的朋友分?jǐn)傎~單并不總是那么容易，特別是如果您更像是一個(gè)視覺(jué)人物而不是數(shù)字人物。這個(gè)應(yīng)用程式概念可讓您輸入總帳單，選擇小費(fèi)百分比，然后查看每個(gè)人要支付的金額。最好的部分?您無(wú)需手動(dòng)調(diào)整每個(gè)人的角色并不斷更新每個(gè)人的份額，而只需在應(yīng)用程序中調(diào)整每個(gè)人的部分的大小，數(shù)字就會(huì)自動(dòng)為每個(gè)人重新計(jì)算。
 

　　由Prem Gurusamy著。在大多數(shù)電子商務(wù)網(wǎng)站上，您必須導(dǎo)航到網(wǎng)站或應(yīng)用程序的完全不同的部分才能查看購(gòu)物車。通過(guò)這種互動(dòng)，您只要單擊“添加到購(gòu)物車”按鈕，即可立即看到商品“飛入”購(gòu)物車。即使您瀏覽網(wǎng)站的其他部分，購(gòu)物車仍會(huì)繼續(xù)在視覺(jué)上顯示您的物品。
 

　　作者：伊戈?duì)?middot;帕夫林斯基(Igor Pavlinski)。社交媒體應(yīng)用程序因信息超載而臭名昭著，可立即向您顯示所有熱門新聞，熱門視頻或文章以及突發(fā)新聞。新社交媒體應(yīng)用程序的這一概念將控件放回用戶手中，按來(lái)源(例如YouTube，Vimeo，Twitter或Reddit)組織內(nèi)容，并讓您選擇要探索的渠道。這種類似于卡片的布局也消除了在應(yīng)用之間跳轉(zhuǎn)以使用您喜歡的內(nèi)容的需求。取而代之的是，可以輕松地在同一體驗(yàn)中的各個(gè)來(lái)源之間進(jìn)行切換。
 

　　自定義漢堡有上百萬(wàn)種方法。而且，當(dāng)您在智能手機(jī)上訂購(gòu)時(shí)，在小屏幕上選擇每種成分都可以提高靈活性。“美味漢堡”應(yīng)用程序的此UI概念通過(guò)按類型存儲(chǔ)配料來(lái)簡(jiǎn)化訂購(gòu)體驗(yàn)。首先，您無(wú)需單擊奶酪，農(nóng)產(chǎn)品，肉或bun頭的所有可能變化的長(zhǎng)清單，而是單擊成分的類別(如奶酪)，然后顯示不同的類型，如荷蘭扁圓形或玉米粥。
 

　　由Rahul.Design設(shè)計(jì)。如果您是找房子的人，但不能親自看物業(yè)，那么下一個(gè)最佳選擇是進(jìn)行虛擬導(dǎo)覽。Spec這一房地產(chǎn)應(yīng)用程序的概念利用了我們?cè)趯ふ倚驴臻g時(shí)的自然行為。您可以單擊任何房間，例如廚房或客廳，然后移動(dòng)手機(jī)以獲取360度視角。只需輕按一下即可在房間之間輕松切換。
 

　　篩選器提供了一種強(qiáng)大而簡(jiǎn)單的方法來(lái)顯示不同的信息片段。但是，許多過(guò)濾器交互的問(wèn)題在于它們會(huì)在應(yīng)用程序中打開(kāi)一個(gè)彈出窗口或新頁(yè)面，從而隱藏了您要過(guò)濾的信息。這種微交互使所有內(nèi)容都保持在同一視圖中，即使您進(jìn)行過(guò)濾也是如此。這樣，當(dāng)您選擇其他過(guò)濾條件時(shí)，您可以立即看到數(shù)據(jù)變化。
 

　　通過(guò)Dmitro彼得連科。有了智能手機(jī)應(yīng)用程序，武裝和監(jiān)控房屋變得比以往任何時(shí)候都容易，但是介于94%-99%之間
 

　　相關(guān)：創(chuàng)建一個(gè)記錄用戶交互的工具，UI交互原則是什么。
 

　　由吉爾。這種簡(jiǎn)單的頁(yè)面互動(dòng)可改善現(xiàn)場(chǎng)用戶體驗(yàn)，并幫助公司將訪問(wèn)者留在其頁(yè)面上的時(shí)間更長(zhǎng)。該站點(diǎn)的主要目的是展示這些屬性如何在自然界，辦公室和擴(kuò)展中使用。該頁(yè)面沒(méi)有為每個(gè)目的創(chuàng)建單獨(dú)的體驗(yàn)，而是模仿了用戶比較和對(duì)比不同用途并在它們之間無(wú)縫跳動(dòng)的流程。
 

　　由多米尼克馬丁。互動(dòng)無(wú)需大膽且引人注目即可產(chǎn)生影響。這個(gè)應(yīng)用程序的概念簡(jiǎn)化了我們所有人都鄙視的行為-從一長(zhǎng)串清單中選擇居住國(guó)。無(wú)需讓用戶滾動(dòng)列表并找到他們的國(guó)家，此微交互功能首先讓您選擇您國(guó)家的首字母，然后從更小，更集中的國(guó)家列表中找到它。
 

　　由Mykolas Puodziunas撰寫(xiě)。越來(lái)越多的零售站點(diǎn)使您更輕松地“快速查看”商品，而不是單擊進(jìn)入每個(gè)詳細(xì)信息頁(yè)面，然后又不得不返回搜索結(jié)果以瀏覽更多商品。這一概念使它更進(jìn)一步，使您無(wú)需離開(kāi)類別頁(yè)面就可以以不同的可用顏色查看每種產(chǎn)品。這篇文章的UI交互案例你你學(xué)到了嗎，更多資訊請(qǐng)持續(xù)關(guān)注AAA教育~