旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設計 > UI交互設計的10個絕妙示例

UI交互設計的10個絕妙示例

時間:2020-11-18來源:lb577.com點擊量:作者:Arya
時間:2020-11-18點擊量:作者:Arya

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

UI交互設計的10個絕妙示例
 

  什么是交互設計?
 

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

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

  1D:單詞應該易于理解,并且應該向用戶傳達適當數(shù)量的信息(太多的細節(jié)可能會淹沒,而信息太少則會引起混亂)。
 

  2D:圖像,字體和UI圖標之類的視覺表示應補充文字以向用戶傳達信息。
 

  3D:物理對象或空間是指用戶與之交互的實際硬件和對象。例如,他們使用的是智能手機還是帶鼠標的筆記本電腦?他們在哪里,在辦公桌前還是在擁擠的地鐵上?
 

  4D:時間是指用戶如何衡量進度,例如聲音和動畫,以及與前三個維度互動花費的時間。
 

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

  UI交互設計如何提升用戶體驗
 

  交互設計的10個示例
 

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

  由強尼維諾。與您的朋友分攤賬單并不總是那么容易,特別是如果您更像是一個視覺人物而不是數(shù)字人物。這個應用程式概念可讓您輸入總帳單,選擇小費百分比,然后查看每個人要支付的金額。最好的部分?您無需手動調(diào)整每個人的角色并不斷更新每個人的份額,而只需在應用程序中調(diào)整每個人的部分的大小,數(shù)字就會自動為每個人重新計算。
 

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

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

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

UI交互設計的10個絕妙示例
 

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

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

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

  相關:創(chuàng)建一個記錄用戶交互的工具,UI交互原則是什么。
 

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

UI交互設計的10個絕妙示例
 

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

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

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

?2007-2022/ lb577.com 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖