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

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

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

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

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

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

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

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

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


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


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

讓按鈕和操控可觸知

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


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

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

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

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


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

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


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


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

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

幫助用戶開始

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


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

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

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


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

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

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


要點(diǎn)：關(guān)注用戶的情緒，它們?cè)诮缑娼换ブ邪l(fā)揮了巨大的作用

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

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

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


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

  • 長(zhǎng)駐于心


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

  • 遵循 KISS 原則


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

  • 不從零開始


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

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


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

總結(jié)

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

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

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

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

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

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定