探討一下移動動效設計

來源:互聯網
上載者:User

   首先,為什麼要有動效?

  產品設計師經常說的一個詞叫“情感化設計”,我們設計了漂亮的介面,整理了清晰的邏輯,除了這兩樣之外,我們還需要動效來把這些漂亮的設計銜接起來,介面、互動、動效構成了情感化設計的三大載體。

  “介面跳轉太生硬了”“軟體卡死了嗎?”“菜單在哪”… 大家在移動產品設計中一定都經曆過這樣的問題,動效協助我們很好的解決這些問題,同時又帶來了新的協助。

  我整理為如下6大作用:

  1 過渡流暢

  過渡流暢是我們對於動效的認識裡對容易想到也最被認可的一點,通過介面及其元素的出現和消失,以及大小、位置和透明度的變化,使使用者和產品的互動過程更流暢。 在AppFlow中,頁面的滑動、元素的出現整個操作如水般流暢。

  2 高效反饋

  高效反饋可以說是行動裝置 App最原始的需求,其通過動效讓使用者瞭解程式目前狀態,同時對使用者操作(平移、放大、縮小、刪除)做出及時反饋。 譬如說在使用者點擊下載按鈕後,我們需要給使用者展示程式當前的狀態(未下載-下載中-下載完成),如果我們不把反饋給使用者,使用者可能就覺得“手機卡死了嗎?”,同樣的對平移、放大等操作,及時友好的反饋也是必要的。

  3 引導作用

  行動裝置 App不比PC應用,行動裝置 App可用的空間就螢幕那麼大點兒,很多功能的入口可能都是隱藏的,此時動效的作用就來了。其通過動效對功能的方向、位置、喚出操作、路徑等進行暗示和指導,以便使用者在有限的移動螢幕內發現更多功能。 譬如說,iOS7鎖定畫面的動效提示使用者向右滑動;百度手機IME的熊頭菜單滾動提示使用者翻頁;微信的朋友圈引導使用者一步一步操作。

  4 層級展現

  隨著行動裝置 App越來越複雜,承載的功能越來越多,原來的三層結構原則 已經不能完全適用,合理清晰的結構層級對使用者理解應用和使用應用有著至關重要的作用。具體的方式為:通過焦點縮放、覆蓋、滑出等動效協助使用者構建空間感受。 就像iOS7一樣,通過動效上來構建了整個系統的空間結構,Appflow的頁面跳轉也是同樣的道理。

  5 增強操縱

  一些動效通過動效對現實世界的類比並且不需要任何提示,迎合使用者的意識認知。使產品的互動方式更接近真實世界。 使用者通過對現實世界的認知來理解動效,增強了使用者對應用的操縱感和帶入感。像Paper的設計,可以讓使用者感覺到紙面的翻動,再如iOS中刪除的動效,一陣霧霾散去。

  6 創新體驗

  隨著大家對設計越來越重視,大家的體驗越來越趨於統一水平範圍內的時候,體驗的差異化就越來越小。那在可用性良好的前提下,通過細節設計和互動方式創新為產品增加亮點,可以帶來更驚喜的體驗和表達產品的氣質與態度(X格)。 注意,是可用性良好哦。最近出現的Facebook Paper的亮點就不少。

  說到動效,就一定要說時間,動效對於某些等待頁面的體驗提升是尤為重要的,下面我們來看看那些等的設計:

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。