激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

超實(shí)用!6個方法幫你做出優(yōu)秀的UI動態(tài)微交互

發(fā)布時間：2024-01-18 10:18:05 瀏覽量：221次

明確系統(tǒng)狀態(tài)、讓按鈕和操控可觸知、打造有意義的轉(zhuǎn)場、強(qiáng)調(diào)界面的變化、增加愉悅的細(xì)節(jié)…… 今天騰訊設(shè)計師@月焱瞳 這篇譯文，總結(jié)了6個做出細(xì)膩動態(tài)微交互的技巧，建議閱讀。

著名的魔術(shù)師 Dariel Fitzkee 曾說，「魔法既身藏于細(xì)節(jié)，又體現(xiàn)于表演?！菇换ピO(shè)計也是如此。設(shè)計師熱衷于得當(dāng)?shù)恼w結(jié)果，但假如沒有妥善處理細(xì)節(jié)，解決方案將付之東流。所有的魔法藏于細(xì)節(jié)之中。那就是為什么精心設(shè)計的微交互使體驗(yàn)顯得精雕細(xì)琢。

明確系統(tǒng)狀態(tài)

Jakob Nielsen 提出了關(guān)于界面設(shè)計狀態(tài)的啟發(fā)，「系統(tǒng)應(yīng)當(dāng)在合理的時間里，通過合適的反饋來保持告知用戶將要發(fā)生的事情。」這意味著，用戶界面必須持續(xù)給出反饋，帶用戶跟上節(jié)奏。App 不該引起用戶不斷的猜測，而應(yīng)該告訴用戶當(dāng)前發(fā)生的事情。微交互通過合適的視覺反饋來幫助你實(shí)現(xiàn)這一切。

數(shù)據(jù)的上傳與下載場景，是一個應(yīng)用動態(tài)微交互的絕佳機(jī)會。


同類的動畫，還有廣為人知的「下拉刷新，」 這類動畫引發(fā)了移動設(shè)備上的內(nèi)容設(shè)計創(chuàng)新。愉悅的刷新動畫總會博得用戶會心一笑。


要點(diǎn)：對于 App 的過程狀態(tài)，動畫提供實(shí)時的告知，使得用戶可以快速地理解發(fā)生的一切。

讓按鈕和操控可觸知

用戶界面元素和操控元件應(yīng)該是可觸知的，即使它們身處屏幕下方。視覺和動態(tài)指引能夠橋接這個間隙，通過及時響應(yīng)輸入以及主觀操縱感十足的動畫。界面按鈕的交互可以模仿自常見的現(xiàn)實(shí)物體。簡單來說，你可以對用戶的輸入行為給予視覺反饋，以此提升界面感知的清晰度。


要點(diǎn)：視覺反饋因得體地滿足了用戶對接收信息的自然欲望而產(chǎn)生作用。用戶穿梭于 App 之中，時刻感覺掌控一切，這非常棒。

打造有意義的轉(zhuǎn)場

你可以借助動畫讓用戶在導(dǎo)航和內(nèi)容之間順滑地穿梭、來解釋屏幕中布置的元素的變化、或以此強(qiáng)化界面元素的層級。

圖標(biāo)可以在不同的時間里，演變不同的形狀，服務(wù)于雙重功能。


動態(tài)設(shè)計以信息告知和取悅用戶的手段，有效地吸引用戶的注意。在移動設(shè)備和智能手表上顯得尤其出色，畢竟方寸之間容不下大量信息的堆砌。

Apple 的 iOS 用戶界面是個優(yōu)秀的實(shí)例，如下圖所示，用戶選中一個文件夾或者 App，視角會接著拉近到詳情視圖、或直達(dá) App 主界面。


另一個優(yōu)秀的實(shí)例：通過顏色變化或元素的流動，串起兩個狀態(tài)之間的視覺關(guān)聯(lián)。這樣的動畫讓切換顯得輕松順滑。


要點(diǎn)：微交互建立頁面間的視覺聯(lián)系，也明確了用戶界面。

轉(zhuǎn)場動效設(shè)計好文：《高手之路！設(shè)計漂亮有趣的轉(zhuǎn)場動效》

幫助用戶開始

微交互在信息載入過程發(fā)揮了重大作用。出色的載入體驗(yàn)與動畫，對用戶在初次沉浸于 App 時產(chǎn)生了極大的沖擊。它們在喚起 App 時突出最重要的特性和操控，給予用戶引導(dǎo)和教育。


要點(diǎn)：微交互呈現(xiàn)信息并幫助用戶高效地抵達(dá)目標(biāo)。

強(qiáng)調(diào)界面的變化

微交互可以引導(dǎo)用戶的注意力。在許多情況下，動畫用于吸引用戶對重要細(xì)節(jié)的關(guān)注（例如查閱「通知」）。然而，必須確保該動畫服務(wù)于功能，并且在用戶角度，是個得體的存在。


要點(diǎn)：微交互對用戶而言，可以是良好的視覺指引。

增加愉悅的細(xì)節(jié)

微交互動畫最基礎(chǔ)的應(yīng)用是轉(zhuǎn)場。然而，App 動畫在突破標(biāo)準(zhǔn)動作范圍的限制下，真切地取悅于用戶。下面的按鈕無縫地切換狀態(tài)，同時滿足雙重功用：告知用戶、使其怦然心動。


要點(diǎn)：關(guān)注用戶的情緒，它們在界面交互中發(fā)揮了巨大的作用

設(shè)計微交互時需要考慮的

當(dāng)你的視覺設(shè)計包括以上討論的元素時，關(guān)注以下幾點(diǎn)：

  • 讓你的微交互幾乎不可見，并且完全是功能性的


確保動畫適用于服務(wù)功能目的，不要讓用戶感到尷尬或打擾。對于常用的以及次要的操作，建議響應(yīng)是適度的。而對于低頻的、主要的操作，響應(yīng)則應(yīng)該更有份量。

  • 長駐于心


微交互應(yīng)該經(jīng)得起長期使用的考驗(yàn)，初見傾心也可能日漸厭煩。

  • 遵循 KISS 原則


過度設(shè)計的微交互可以是致命的。微交互不應(yīng)該使得屏幕信息過載，造成漫長的載入。相反地，它應(yīng)該通過迅速地傳達(dá)有價值的信息來節(jié)省時間。

  • 不從零開始


你總會了解目標(biāo)受眾以及他們的背景。使用這些信息來讓你的微交互更加精確并且有效。

  • 與其它界面元素建立視覺協(xié)調(diào)


微交互的風(fēng)格應(yīng)該與 App 的整體匹配，營造和諧的產(chǎn)品感知。

總結(jié)

微交互表明，關(guān)注小細(xì)節(jié)可以導(dǎo)向強(qiáng)有力的結(jié)果。正如 Charles Eames 曾說道，「細(xì)節(jié)并非散布于細(xì)枝末節(jié)，它們串成了設(shè)計。」所有的設(shè)計元素都是至關(guān)重要的。細(xì)節(jié)讓你的 App 在競爭中脫穎而出，它們可能是實(shí)用的、不起眼的襯托，抑或使人印象深刻、能夠給到幫助，甚至，引人流連忘返。

堅持別具匠心的設(shè)計，謹(jǐn)記偉大的設(shè)計是完整的存在，上至宏觀功能，下至細(xì)節(jié)微交互。

請私信我回復(fù)“666”，為U妹打Call~，還有更多驚喜哦~

.............................................................

UI妹兒—越努力，越幸運(yùn)

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定