寫給工程師看的互動設計

評論
評論

編者按:看到此文時恍惚回到自己學習網頁的時候,那時候只知有程式,不知有設計。各個論壇大多討論的也是如何用 Frame 規劃頁面區塊,如何做出圓角,以及寫一大段 javascript 程式或者做個 Flash 只為讓頁面看起來更炫。後來 css1.0, 2.0 陸續出現,html 4.0 4.1 以及如今的 html 5 也逐漸淘汰掉了表現樣式的標籤。視覺傳達思想開始陸續進入工程師與產品經理的視野,從網頁到現在的 app,經歷過野蠻生長階段後,只有那些功能與視覺傳達同樣優秀的產品才能永久存活。

2007 年蘋果給業界帶來了耳目一新的感覺,之後無數 app 展現了幾乎讓人驚豔的新概念,但是,不是每一個新奇的想法都能被稱作設計。設計師需要經過嚴格訓練,才能把想法轉化為最終的設計,而在整個轉化過程中,無數的想法是經不起仔細推敲的。設計師更多的時候在觀察生活,觀察自然,靈感不是隨時就有,但是一個經過嚴格訓練的設計師可以把普通的生活細節經過加工融入設計,最終打造出合格甚至優秀的產品。

本文作者 Pasquale D'Silva 是 Elepath 的一位互動設計師兼產品設計師,在本文中,他從互動的角度闡釋了優秀的設計應該具有的一些品質,或者說,突出的產品該如何達到與使用者自然溝通的目標。

不得不說,有太多工程師或者美工(注意,是美工,真正的設計師不會這麼不專業)誤把技術當藝術、把漂亮當設計,真正重要的互動部分反而遭到忽略,你可以看看,一大批產品都是近乎靜態的,許多操作詭異至極,諸如你想新增條目到列表裡,它就生硬的出現在那;你想刪除,它就直接消失。這樣的產品經理,你們到底有沒有考慮過使用者的感受,有沒有考慮過產品的感受,這種完全不合邏輯的東西虧你們做得出來。

當然,還有一部分產品是具有互動性的,但是,悲哀的是,那些互動完全被用作另一種形式的美化,完全不知所云。

互動性真正革命性的意義在於,它把時間這一魔幻般的屬性帶入靜態的產品之中,通過對動作、速度、顯現等等的定義,讓產品的操作體現出真實感,使用者因而能夠自然而然的理解每一個動作的含義。不過這不是那些高中時候整天泡妞、看不起書呆子的人能理解的。

一些簡單的例子

這些例子的目的是向各位讀者介紹動畫的精髓,告訴各位讀者時間軸和空間對於動畫意義。而動畫對於互動的意義不言可喻。

例如:緩衝效果

以下三個 demo 展示了在最傳統的動畫中,如何透過控制關鍵格(frame)來控制整個動畫的效果。

01 02 03

在這三段 25 格的動畫中,設計師只需要定義第一格、最後一格和關鍵格(第 13 格),其餘 22 格由電腦自動填充,但是,電腦沒想像中那麼聰明,它只能線性填充空白格。優秀的動畫師和動作設計師需要花費大量時間來學會如何控制電腦按照自己設計的效果工作。有興趣的讀者可以自己做些實驗,本文重點在於闡述概念,所以不著過多著墨於技術方面。

另外一些稍微複雜的例子:互動動畫所能營造的真實感

這些例子的目的在於告訴設計師們,互動所能代替的一些舊功能以及實現以前做不到的功能。

例如:插入元素

以下是三個關於向列表裡添加/刪除元素的 demo,來展示不同的互動動畫所產生的效果

04 05 06

demo 1 沒有進行任何加工,既生硬又粗糙,不能給人任何自然的感覺。
demo 2 添加了一些關鍵格使得添加的動作順暢了很多,這樣的動畫已經能給使用者一些暗示了。

最後一個 demo 是最貼合自然狀態的,就像我們平時把一本書插入書架一樣,需要先騰出空間,然後再插入/取出。

例一最後一個 demo 的設計讓人一目了然,因為這和生活中的動作完全相似,使用者不需要其他提示就知道這樣的動作所代表的含義。這樣的互動在之前的非觸控螢幕上沒有多大用處,但對於如今遍地的 app 意義重大。

例二:展開/彈出 Menu

同樣是三個 demo,分別展示不同的展開效果所帶來的不一樣的感覺。

07 08 09 第一個是最典型的展開樣式,但是不具有體驗上的一致性,這個動作在現實中並不存在,所以沒有辦法讓使用者輕易的明白它的含義。

再觀察下第二個,這樣的樣式是不是給了你更多的訊息?

最後一個樣式可以使關鍵內容突出,可以用來表示強調。

切記,不要試圖把多種樣式放在一個產品/功能中,這樣會導致使用者不明所以。

例二後兩個 demo 的設計可以代替舊式導航欄位,使用者可以很容易記得自己的動作,從而知道自己所處的位置。

當然,所有的例子都不是萬靈丹,需要視情況而使用。放在這裡的目的只是讓大家明白,乾淨利落但是邏輯性強的動畫對於改善產品體驗的作用。

想要更多的了解動畫在具體產品中的效果,可以體驗 Thinglist,這是我與 Kyle Bragger 合作為 Elepath 開發的一款產品。下圖是該 app 關於如何加載內容的示範。

10

動作化介面的設計原則

你明白的,我不能把很具體的產品名字些在這,但是,有些產品的確是走得太極端,一種是介面極端漂亮但沒有一點互動,另一種是拿互動動畫當裝飾,完全失去互動本質。所以我列出以下幾項原則來定義真正的互動:

一、動畫乾淨利落
二、節奏一致、過渡自然

有些人的想法讓我很無言,他們從不認為可以增加時間元素到介面中。難道,你們不知道互動能提供更多更有用的訊息給使用者嗎?還是你們覺得這樣做對你們來說太複雜了?

最初,這份文件只是用來培訓內部員工,後來我們覺得如果公開來討論可能會更有用,而且我也願意與更多同行交換意見。如果有興趣可以追蹤 Twitter 帳號  @pasql。或者 在 Branch 參與我們的討論

讀者福利:一些值得讀或者看的材料(原文有四個連結,但其中兩個已經無效,故只取以下兩個):

The Animator's Survival Kit by Richard Williams
Prologue -- Designing Fictional Interfaces for Iron Man 2

相關文章

評論

知名廠商強力徵才中