火星網校
經典的UI設計轉場動效
發(fā)布時間：2024-01-15 16:54:00 瀏覽量：245次
UI設計
功能性動畫是一種微妙的動畫，有著明確、合理的目標。它能減少認知負荷，防止變化視盲，在空間上營造更好的印象。但還有一點，動畫讓用戶界面鮮活起來。
通過組合與分割、改變形狀和尺寸，運動可以使外表感覺鮮活。應當運用功能性的動畫，流暢地在導航內容間引導用戶，解釋屏幕元素和排列的變化，并且強調元素層級。
成功的動效設計具有以下6個特征：
1. 響應
視覺反饋在UI設計中極度重要。因為它符合了用戶確認應答的天然需要，所以它管用。在現實生活中，按鈕、遙控和各種物體，會響應我們的操作，人們對事物的期待就是如此。
UI設計
界面應當快速響應用戶輸入，準確地說是要在用戶觸發(fā)的一剎那響應，展現出新界面和元素與觸發(fā)它們的操作之間的關聯。在整個應用中到處點擊，并且總是能知道正在發(fā)生什么，這感覺就非常棒。
UI設計
物體對于用戶意圖的恰當反饋。
2. 關聯性
把新產生的界面，與觸發(fā)它們的元素或操作關聯起來。關聯性背后的邏輯，能幫助用戶在界面布局中理解剛發(fā)生的變化，是什么導致了變化。
下圖中，可以看到兩個菜單過渡效果。第一個例子中，菜單出現位置遠離觸發(fā)它的接觸點，破壞了與這種輸入方式的關聯。
UI設計
錯誤做法。
第二個例子中，菜單正是從觸點產生。這就把這個元素與觸點關聯起來了。
UI設計
正確做法。
另一個例子，是操作按鈕在特定情境下改變功能。“播放”和“暫?！卑粹o或許是開關按鈕中最普遍的例子。播放變?yōu)闀和?，表現出這兩者是相關聯的，點按其中一個，就會看到另一個。應該設計好狀態(tài)間的過渡動畫，讓它看起來流暢不間斷。
UI設計
播放控件的流暢過渡，向用戶展現按鈕功能的同時，也為這個操作增加了一絲驚嘆。圖片來源：Material Design
3. 自然
避免令人意外的過渡效果。所有的運動都應該遵循真實世界中力的作用?，F實中，一個物體加速減速的快慢，受它的重量和表面摩擦力影響。類似的，在好的界面設計中，啟動和停止不會立刻發(fā)生。
下圖中，可以看到一個很好的例子，用戶選中列表中的一項，展開進入詳情視圖。展開的過程中，小卡片沿著一條弧線移動到目標位置，并且展開成一張更大的卡片。
UI設計
正確做法。在屏幕上向上移動的物體，應該在移動時體現出加速的力。圖片來源：Material Design
4. 有目的
在合適的時機，將視線引導到適當的位置。動畫天生就是最高一級的突顯。無論文字段落還是靜止圖片都無法與之相提并論。好的過渡效果引導用戶到下一步操作。
用戶第一次無法預料某個操作觸發(fā)的結果，但適當的動畫能幫助用戶保持方向，不會感覺內容的突然改變。
Mac OS在最小化窗口時用了一種功能性動畫。動畫把前后兩個狀態(tài)聯系起來。
UI設計
Mac OS的最小化動畫
另一個好例子是由父及子的過渡，用戶選中一個列表項或卡片元素，放大進入詳情視圖。這個操作讓用戶了解來龍去脈。
UI設計
由父及子的過渡動畫。
5. 快速
元素在不同位置和狀態(tài)間運動時，運動要足夠快，不要讓人等待；也不可過快，讓過渡能夠理解。
不要緩慢的動畫，因為它產生了不必要的停頓，延長了整個過程。
UI設計
錯誤做法。
交錯和減緩多個元素的運動會延長整個過程。
UI設計
錯誤做法：
快速完成動畫，用戶就不必等待動畫結束。
UI設計
正確做法。
保持過渡動畫簡短，因為用戶會頻繁看到它們。讓動畫持續(xù)時間保持在300ms或更短。
UI設計
正確做法。
6. 明確
過渡效果應當避免一次做太多事情，因為如果許多物體往不同方向或沿著不同路徑運動，它們就會令人困惑。
UI設計
錯誤做法。
過渡效果應當明確、簡潔、條理清晰。記住，關于動畫，少即是多。我們應該只專注于動畫能為用戶帶來的實際價值。
UI設計
正確做法。
結論
綜上所述，動畫不是隨意為之。每個操作背后都有其目的。動畫對它加以引導，顯示出重要內容，以防忽略。無論你的應用是歡樂幽默還是嚴肅直接，動畫的運用原則有助于提供明確、快速、有粘性的體驗。
謹慎地設計。注意每一個細節(jié)，是成功打造易用人機交互的關鍵。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
