Unveiling the genius of multi-touch interface design | Jeff Han

譯者: Bill Hsiung 審譯者: Calvin Chun-yu Chan

I'm really excited to be here today.

我真的，真的非常興奮，今天能夠在這邊，

I'll show you some stuff that's just ready to come out of the lab,

因為，我將要向你們展示一些，剛剛完成研發的技術，

literally, and I'm really glad that you guys

真的，而且我非常高興，你們能夠成為世界上，親眼目睹這個技術，最早的一群人之一，

are going to be among the first to see it in person,

因為我真的，真的認為這將會改變，

because I really think this is going to really change

真真正正的改變，從今以後我們與機器互動的方式。

the way we interact with machines from this point on.

Now, this is a rear-projected drafting table.

現在，這邊有一個背投影式繪圖桌。它大概有 36 吋寬，

It's about 36 inches wide

and it's equipped with a multi-touch sensor.

而且它配備有多點觸控感應器。平日所見的一般觸控感應器，

Normal touch sensors that you see,

像是自動櫃台，或是互動式白板，

like on a kiosk or interactive whiteboards,

can only register one point of contact at a time.

在同一時間，只能辨識一個接觸點。

This thing allows you to have multiple points at the same time.

而這東西，能允許你同時間，具有多點控制。

They can use both my hands; I can use chording actions;

這些觸控點，可以是從我的雙手而來，我可以單手使用多指，

I can just go right up and use all 10 fingers if I wanted to.

或者，如果我想要，我可以一次使用全部十根手指。

You know, like that.

你知道的，就像這樣。

Now, multi-touch sensing isn't completely new.

雖然多點觸控不是全然嶄新的概念。

People like Bill Buxton have been playing around with it in the '80s.

我是說，像是著名的 Bill Buxton 早在 80 年代就已經開始嘗試這個概念。

However, the approach I built here is actually high-resolution,

然而，我在這裡所建造的這個方法，是具有高解析度、

low-cost, and probably most importantly, very scalable.

低價，並且也許最重要的是，其硬體可以非常簡單的調整尺寸。

So, the technology, you know,

因此，這個技術，如我所言，並不是現在你所見到，最令人興奮的東西，

isn't the most exciting thing here right now,

other than probably its newfound accessibility.

可能除了它與眾不同的低價位以外。

What's really interesting here is what you can do with it

這邊真正令人感興趣的是，你能夠用它來做什麼事？

and the kind of interfaces you can build on top of it.

以及你將能夠利用它，所創造出來的介面。現在讓我們來看看。

So let's see.

So, for instance, we have a lava lamp application here.

舉例來說，這邊我們有一個岩漿燈軟體。你可以看到，

Now, you can see,

I can use both of my hands to kind of squeeze and put the blobs together.

我可以使用我的雙手，將這些斑點經由擠壓，而使它們變成一團。

I can inject heat into the system here,

我可以像這樣將系統加熱，

or I can pull it apart with two of my fingers.

或者我可以用我的兩跟手指，將它們分開。

It's completely intuitive; there's no instruction manual.

這是完全直覺性的操作，你將不會需要使用手冊。

操控介面似乎就這樣憑空消失了。

The interface just kind of disappears.

This started out as a screensaver app

這一開始，是我們實驗室的一個博士班學生，所創造的一個類似螢幕保護程式的軟體

that one of the Ph.D. students in our lab, Ilya Rosenberg, made.

他的名字叫做 Ilya Rosenberg. 但是我認為，這個軟體真正的價值，在這邊顯現了。

But I think its true identity comes out here.

Now what's great about a multi-touch sensor is that, you know,

多點觸控感應器厲害的地方在這邊，像這樣，

I could be doing this with as many fingers here,

我可以使用許多手指來操控這個，

but of course multi-touch also inherently means multi-user.

但是當然，多點觸控本質上也意味著多使用者。

Chris could be interacting with another part of Lava,

所以克里斯 (Chris) 可以到台上來，與岩漿的另一部份互動，

while I play around with it here.

在此同時，我在這邊玩弄這一部份。你可以將之想像為一種新的雕塑工具，

You can imagine a new kind of sculpting tool,

where I'm kind of warming something up, making it malleable,

在這邊我將部份加熱，增加它的可塑性，

and then letting it cool down and solidifying in a certain state.

然後讓它冷卻、硬化到某個程度。

Google should have something like this in their lobby.

谷歌 (Google) 在他們大廳應該要有個像這樣的東西。（笑聲）

(Laughter)

I'll show you a little more of a concrete example here,

我將要向你們展示某樣東西，一個比較實際的應用範例，等它載入完成。

as this thing loads.

This is a photographer's light-box application.

這是一個攝影師的燈箱工具應用程式。

Again, I can use both of my hands to interact and move photos around.

再一次地，我可以使用我的兩隻手，來與這些照片互動並移動它們。

But what's even cooler is that if I have two fingers,

但是更酷的是，如果我用兩跟手指，

I can actually grab a photo and then stretch it out like that really easily.

事實上我可以抓取一張照片，並且非常簡單的將之放大，就像這樣。

I can pan, zoom and rotate it effortlessly.

我可以任意地拖移、縮放並旋轉這張照片。

I can do that grossly with both of my hands,

我可以使用我的雙手掌來這樣做，

or I can do it just with two fingers on each of my hands together.

或者，我可以只用我任何一隻手的兩隻手指一起來完成。

If I grab the canvas, I can do the same thing -- stretch it out.

如果我抓住整個畫板，我可以做同樣的事，將之放大。

I can do it simultaneously, holding this down,

我可以同時操作，現在我一邊抓住這個不放，

and gripping on another one, stretching this out.

然後握住另外一張，把它像這樣放大。

Again, the interface just disappears here.

同樣的，在這裡我們也看不到操控介面。

There's no manual.

不需要說明書。它的操作結果完全如你所預期，

This is exactly what you expect,

especially if you haven't interacted with a computer before.

特別是如果你以前沒有接觸過電腦的話。

Now, when you have initiatives like the $100 laptop,

現在，如果你想創造一個事業，像是一百美元的筆電，

I kind of cringe at the idea

其實，我對於我們將要向一個全新世代的族群介紹

of introducing a whole new generation to computing

傳統電腦的視窗滑鼠點擊介面這個想法，有所保留。

with this standard mouse-and-windows-pointer interface.

This is something that I think is really the way

多點觸控才是我認為從今爾後，我們所應該與機器互動的真正方法。（掌聲）

we should be interacting with machines from now on.

多點觸控才是我認為從今爾後，我們所應該與機器互動的真正方法。（掌聲）

(Applause)

Now, of course, I can bring up a keyboard.

當然，我可以在這邊叫出鍵盤。

(Laughter)

And I can bring that around, put that up there.

我可以將我打的字帶出來，將之放在這邊。

Obviously, this is a standard keyboard,

很明顯的，這與一般標準鍵盤並無不同，

but of course I can rescale it to make it work well for my hands.

但是當然，我可以重新縮放這個鍵盤的大小，讓它適合我的雙手使用。

That's really important, because there's no reason in this day and age

這是非常重要的，因為在今日的科技下，沒有理由

that we should be conforming to a physical device.

我們應該去適應物理性的裝置。

That leads to bad things, like RSI.

那將會導致不好的後果，例如：重複性勞損。

We have so much technology nowadays

今日我們有許多這麼好的科技，

that these interfaces should start conforming to us.

這些操控介面應該開始來適應我們。

There's so little applied now to actually improving

直到今日，真正改善我們與介面互動的應用還太少。

the way we interact with interfaces from this point on.

直到今日，真正改善我們與介面互動的應用還太少。

This keyboard is probably actually the really wrong direction to go.

這個虛擬鍵盤，事實上可能是一個錯誤的發展方向。

You can imagine, in the future, as we develop this kind of technology,

你可以想像，在未來，當我們開始發展這種技術之後，

a keyboard that kind of automatically drifts as your hand moves away,

一個鍵盤，當你移開手的時候，也會自動漂移開來，

and really intelligently anticipates which key you're trying to stroke.

而且會非常聰明地預測，你將要用你的手打擊那一顆按鍵。

So -- again, isn't this great?

因此～ 再問一次，很棒吧？

(Laughter)

聽眾：你的實驗室在哪裡？

Audience: Where's your lab?

Jeff Han: I'm a research scientist at NYU in New York.

韓傑夫：我是紐約市紐約大學的研究科學家。

Here's an example of another kind of app. I can make these little fuzz balls.

這是另一種應用程式的範例。我可以創造出這些小毛球。

It'll remember the strokes I'm making.

它會記憶我所做過的點擊。當然，我可以使用兩手操作。

Of course I can do it with all my hands.

It's pressure-sensitive.

你會注意到，它具有壓感功能。

What's neat about that is,

但是，真正棒的在這邊，我已經向你們示範過兩指操控手勢，

I showed that two-finger gesture that zooms in really quickly.

它能夠讓你很快的放大。因為你不需要事先切換到手掌工具

Because you don't have to switch to a hand tool

or the magnifying glass tool,

或者放大鏡工具;

你可以連續地在多個不同的比例上，即時的創造東西，一次完成。

you can just continuously make things

in real multiple scales, all at the same time.

I can create big things out here,

我可以在這邊建造大東西，我也可以回去，非常迅速的回去

but I can go back and really quickly go back

to where I started, and make even smaller things here.

回到我一開始的地方，然後甚至在這邊建造更小的東西。

This is going to be really important

這將會變得非常重要，當我們一旦開始從事像是

as we start getting to things like data visualization.

資料視覺化的工作。舉例來說，我想我們都非常喜歡 Hans Rosling 的演說，

For instance, I think we all enjoyed Hans Rosling's talk,

and he really emphasized the fact I've been thinking about for a long time:

而且他真正的，著重在強調一個我也已經思考許久的事實，

We have all this great data,

我們都擁有這些了不起的資料，但是，基於某些原因，它們只是被擺在那邊。

but for some reason, it's just sitting there.

We're not accessing it.

我們並沒有真正的去使用它。我認為其中一個原因就是，

And one of the reasons why I think that is

will be helped by things like graphics and visualization and inference tools,

藉由圖像、視覺化和參考工具，可以幫助我們處理這些資料。

but I also think a big part of it

但是，很大的一部分，我也著重在開始能夠創建更好的使用者介面，

is going to be having better interfaces,

to be able to drill down into this kind of data,

能夠鑽研深入像這樣的資料，但同時仍能保持對整體的宏觀性。

while still thinking about the big picture here.

Let me show you another app here. This is called WorldWind.

現在，讓我向你們展示另一個應用程式。這個程式叫做「世界風」。

It's done by NASA.

是太空總署 (NASA) 所研發的。它就像我們都見過的谷歌地球 (Google Earth);

We've all seen Google Earth;

this is an open-source version of that.

這就好像是它的開源碼版本。有附加檔能夠載入

There are plug-ins to be able to load in different data sets

太空總署經年蒐集的各種資料集。

that NASA's collected over the years.

As you can see, I can use the same two-fingered gestures

但是，如你所見，我可以使用同樣的兩指手勢

非常迅速的下潛、進入地球。又一次的，我們看不到操控介面的存在。

to go down and go in really seamlessly.

There's no interface, again.

It really allows anybody to kind of go in --

這真的能讓所有人，感覺非常地融入那個環境，而且操作就如同你所預期一般，

and it just does what you'd expect, you know?

你能體會嗎？再一次，在這邊你看不到操作介面。介面就這樣消失了。

Again, there's just no interface here. The interface just disappears.

I can switch to different data views.

我可以切換到不同的資料瀏覽。這就是這個應用程式厲害的地方。

That's what's neat about this app here.

NASA's really cool.

就像這樣。太空總署非常的酷。它們有這些超光譜影像

These hyper-spectral images are false-colored so you can --

這些影像是人工成色的，對於決定植物的繁茂程度非常有幫助。讓我們回到剛剛那裡。

it's really good for determining vegetative use.

Well, let's go back to this.

地圖軟體的偉大之處在於，

The great thing about mapping applications --

它不只是 2D 平面，它也可以是 3D 立體影像。所以再一次，應用多點觸控介面，

it's not really 2D, it's 3D.

So, again, with a multi-point interface, you can do a gesture like this --

你可以使用像這樣的手勢，所以你可以使畫面像這樣傾斜，

so you can be able to tilt around like that --

(Surprised laughter)

你知道。不只是受限於簡單的 2D 平面攀移與移動。

It's not just simply relegated to a kind of 2D panning and motion.

This gesture is just putting two fingers down --

我們已經研發出了這些手勢，像這樣，只要放入你的兩跟手指，

it's defining an axis of tilt -- and I can tilt up and down that way.

它界定了傾斜的軸線，如此這般我就可以向上或向下任意傾斜。

We just came up with that on the spot,

這是我們在這邊，剛剛想出來的點子，

it's probably not the right thing to do,

你知道嗎？也許這不是這樣做最好的方法，

but there's such interesting things you can do with this interface.

但是使用這種介面，你可以做許多很有趣的事情。

It's just so much fun playing around with it, too.

就算你什麼都不做，只是玩玩，也會感覺愉快。（笑聲）

(Laughter)

And so the last thing I want to show you is --

所以，最後一件我想要向你們展示的東西是，

I'm sure we can all think of a lot of entertainment apps

你知道，我確信我們都可以想到很多，你可以利用這個東西所做的

that you can do with this thing.

娛樂方面的應用。

I'm more interested in the creative applications we can do with this.

我對於我們可以利用這東西，所做的創意性應用更感興趣。

Now, here's a simple application here -- I can draw out a curve.

現在，這邊有一個簡單的程式，我可以畫曲線。

And when I close it, it becomes a character.

當我將曲線封閉起來的時候，它就變成一個人偶。

But the neat thing about it is I can add control points.

但是有趣的事情是，我可以增加控制點。

And then what I can do is manipulate them with both of my fingers at the same time.

然後我可以用我雙手的手指同時操控它們。

And you notice what it does.

你會注意到它是怎麼做的。

It's kind of a puppeteering thing,

這就像是操控木偶一般，這邊我可以使用

where I can use as many fingers as I have to draw and make --

我的十跟手指去畫出並做出玩偶。

Now, there's a lot of actual math going on under here

事實上，在這表象之下需要很多數學運算，

for this to control this mesh and do the right thing.

然後它才能控制這些圖案，並正確的反應。

This technique of being able to manipulate a mesh here, with multiple control points,

我的意思是，在這邊這個能夠操控圖案的技術，

並使用多個操控點，事實上是屬於一種尖端科技。

is actually state of the art.

It was released at SIGGRAPH last year.

這個技術去年才在計算機圖形學會議上公開，

It's a great example of the kind of research I really love:

但這是我真正喜好研究領域的良好範例。

所有這些需要使事情做「對」，背後的電腦運算。

all this compute power to make things do the right things,

intuitive things, to do exactly what you expect.

直覺性的事情。做如你所預期一模一樣的事。

So, multi-touch interaction research is a very active field right now in HCI.

多點觸控互動研究，現在在人機介面領域非常地活躍。

I'm not the only one doing it, a lot of other people are getting into it.

我不是唯一一個在做這方面研究的，還有很多其他的人也在這領域。

This kind of technology is going to let even more people get into it,

而這種技術，將會讓更多人加入這個領域的研究，

I'm looking forward to interacting with all of you over the next few days

我真的非常期待，跟在場各位接下來幾天的互動

看看這技術，將能如何應用在你們所處的領域。

and seeing how it can apply to your respective fields.

謝謝大家。

Thank you.

（掌聲）

(Applause)