建站
咨詢
售后
建站咨詢
新聞中心
不得不說，有太多程序猿或者美工（注意，是美工，真正的設(shè)計師不會這么干）誤把技術(shù)當(dāng)藝術(shù)、把漂亮當(dāng)設(shè)計了，真正重要的交互部分反而被忽略，你可以看看，一大批的產(chǎn)品都是近乎靜態(tài)的，許多操作詭異至極，諸如你想添加一個條目到列表里，它就生硬的出現(xiàn)在那；你想刪除，它就直接消失。這樣的產(chǎn)品經(jīng)理，你們到底有沒有考慮過用戶的感受，有沒有考慮過產(chǎn)品的感受，這種完全不合邏輯的東西也虧你們做的出。
當(dāng)然，還有一部分產(chǎn)品是有交互的，但是，悲哀的是，那些交互完全被用作另一種形式的美化，天才知道那些人在想什么。
交互真正革命性的意義在于，它把時間這一魔幻般的屬性帶入靜態(tài)的產(chǎn)品之中，通過對動作、速度、顯現(xiàn)等等的定義，讓產(chǎn)品的操作體現(xiàn)出真實(shí)感，使得用戶能自然而然的理解每一個動作的含義。不過這不是那些高中時候整天泡妞、看不起書呆子的人能理解的。
一些簡單的例子
這些例子的目的是向各位讀者介紹動畫的精髓，告訴各位讀者時間軸和空間對于動畫意義。而動畫對于交互的意義不言而喻。
例：緩沖效果
以下三個 demo 展示了在最傳統(tǒng)的動畫中，如何通過控制關(guān)鍵幀來控制整個動畫的效果。
在這三段 25 幀的動畫中，設(shè)計師只需要定義第一幀、最后一幀和關(guān)鍵幀（第 13 幀），其余 22 幀由計算機(jī)自動填充，但是，計算機(jī)沒想像中那么聰明，它只能線性的填充空白幀。優(yōu)秀的動畫師和動作設(shè)計師需要花費(fèi)大量時間來學(xué)會如何控制計算機(jī)按照自己設(shè)計的效果工作。有興趣的讀者可以自己做些實(shí)驗(yàn)，本文重點(diǎn)在于闡述概念，所以不著過多筆墨于技術(shù)方面。
另一些稍復(fù)雜的例子：交互動畫所能營造的真實(shí)感
這些例子的目的在于告訴設(shè)計師們，交互所能代替的一些舊功能以及實(shí)現(xiàn)以前所不能做到的功能。
例一 插入元素
以下是三個關(guān)于向列表里添加／刪除元素的 demo，來展示不同的交互動畫所產(chǎn)生的效果
Demo 1 沒有進(jìn)行任何加工，既生硬又粗糙，不能給人以任何自然的感覺。
Demo 2 添加了一些關(guān)鍵幀使得添加的動作順暢了很多，這樣的動畫已經(jīng)能給用戶一些暗示了。
最后一個 demo 是最貼合自然狀態(tài)的，就象我們平時把一本書插入書架一樣，需要先騰出空間，然后再插入／取出。
例一最后一個 demo 的設(shè)計讓人一目了然，因?yàn)檫@和生活中的動作完全相似，用戶不需要其他提示就知道這樣的動作所代表的含義。這樣的交互動作在之前的非觸摸屏上沒有多大用處，但對于如今遍地的 APP 意義重大。
#p#
例二 展開／彈出菜單
同樣是三個 demo，分別展示不同的展開效果所帶來的不一樣的感覺。
第一個是最典型的展開樣式，但是不具有體驗(yàn)上的一致性，這個動作在現(xiàn)實(shí)中并不存在，所以沒有辦法讓用戶輕易的明白它的含義。
再觀察下第二個，這樣的樣式是不是給了你更多的信息？
最后一個樣式可以使關(guān)鍵內(nèi)容突出，可以用來表示強(qiáng)調(diào)。
切記，不要試圖把多種樣式放在一個產(chǎn)品／功能中，這樣會導(dǎo)致用戶不明所以的。
例二后兩個 demo 的設(shè)計可以代替老式導(dǎo)航欄，用戶可以很容易記得自己的動作，從而知道自己所處的位置。
當(dāng)然，所有的例子都不是萬金油，需要視情況而使用。放在這里的目的只是讓大家明白，干凈利落但是邏輯性強(qiáng)的動畫對于改善產(chǎn)品體驗(yàn)的作用。
想要更多的了解動畫在具體產(chǎn)品中的效果，可以體驗(yàn)下Thinglist，這是我與 Kyle Bragger 合作為 Elepath 開發(fā)的一款產(chǎn)品。下圖是該 APP 關(guān)于如何加載內(nèi)容的示范。
動作化界面的設(shè)計原則
你明白的，我不能把很具體的產(chǎn)品名字些在這，但是，有些產(chǎn)品的確是走極端了，一種是界面極端漂亮但沒有一點(diǎn)交互，另一種是拿交互動畫當(dāng)裝飾完全失去交互的本質(zhì)。所以我列出以下幾項(xiàng)原則來定義真正的交互：
一、 動畫干凈利落
二、 節(jié)奏一致、過渡自然
有些人的想法讓我很無語，他們從不認(rèn)為可以添加時間元素到界面中。難道，你們不知道交互能提供更多更有用的信息給用戶么，還是你們覺得這樣做對你們來說太復(fù)雜了？
起初，這份文檔只是用來培訓(xùn)內(nèi)部員工，后來我們覺得如果公開來討論可能會更有用，而且我也愿意與更多同行交換意見。如果有興趣可以在推特@pasql?；蛘咴贐ranch參與我們的討論。
讀者福利：一些值得讀或者看的材料（原文有四個鏈接，但其中兩個已經(jīng)無效，故只取以下兩個）：
The Animator's Survival Kit by Richard Williams
Prologue - Designing Fictional Interfaces for Iron Man 2
英文原文： medium.com
譯文鏈接：http://www.36kr.com/p/203418.html
網(wǎng)站欄目：寫給程序猿們的交互設(shè)計
標(biāo)題網(wǎng)址：http://www.dlmjj.cn/article/cdichdp.html
