媒介的信息接收與發送

本章將介紹圖中黃色區域里的內容，交互環的4、5、6、1過程

在上一章中，我們充分理解了當使用者是人時，人會容易注意到什麼樣的信息線，能夠發出什麼樣的信息線。這些都是人所具有的特性，這些特性並不會隨著科學技術的發展而變化。

但媒介所能接收的信息和發出的信息是跟科學技術息息相關的。比如引擎的點火，以前是通過手搖動或者腳踏打火器。但現在可以一個按鍵便能啟動引擎。你無法讓一台黑白電視顯示出彩色，因為當時的技術不允許它顯示彩色內容。還有很多例子這裡就不過多講述了。

隨著技術發展媒介的信息接收器和信息發送器已經做到比人類自身更強，我們能清楚看到千里之外的人，看到細菌。但黑箱子在某些方面暫時還不能跟人類相比，即便現在的人工智慧已經打敗了世界上頂級的圍棋高手。因為媒介的黑箱子不屬於交互設計的範疇，我們關心的是媒介的信息發送器和信息接收器的設計。

那麼媒介的信息接收器和發送器究竟該怎麼去設計？就是這章要說的內容。我們首先要分析媒介功能，媒介的信息接收器，信息發送器的自身特性是怎麼樣的，再進行三者間的關係分析。（本章內容較為複雜，如果有沒理解的地方可以先不管，再讀的時候可能就懂了）

功能自身特性思考環節：

既然萬事萬物都可以分解成為原子。那麼一個功能的原子又是什麼？

讓我們回到最開始的開燈照明的例子，我的目的是看清楚周圍環境，開關是信息接收器，電流是黑箱子，燈是信息發送器。黑箱子的功能是讓燈亮起來，從不發光到發光。

功能可以理解為燈光的是否亮起來的區別即可以分為0/1兩種狀態，要麼不亮，要麼亮？

那功能只能分為0/1嗎？當然不是，我讀大學的時候，要在宿舍看書，考慮到燈如果太亮了，會影響到舍友休息，我買了一盞可以調節亮度的燈。除了亮度調節外，我的那個檯燈還可以調節色溫，從冷到暖。

那這個時候檯燈的功能可以分為亮度調節和色溫調節。亮度是從0到一定的流明（流明是亮度的單位）。色溫是從偏藍慢慢變化到偏黃。這個時候功能就可以分為兩個連續的維度。

我的這盞檯燈有兩個旋鈕，一個調節色溫一個調節亮度。當然這盞檯燈也可以用1個按鍵控制色溫和亮度，比如正常點擊不停增加亮度，到了設定的最大值後再點擊熄滅或者亮度減少，長按按鍵則色溫不停變化。但沒有設計師會這麼設計，時間不限的情況下，無論多複雜的功能都可以用一個按鍵來進行控制。

雖然我房間里的燈沒有控制亮度和色溫的功能，但這盞燈亮的時候也是有色溫和亮度的，只不過在出廠之時就已經設置好了。那麼功能可以根據自有的屬性分為很多維度，這些維度能否讓我們控制就會影響信息接收器的相關設計了。不給控制，我們就需要一個開關按鍵就行了，如果要控制，那可能就需要兩個旋鈕來控制了。

功能的原子化

一般媒介的功能不止一個，想你家的電飯煲，有煲飯功能，煲粥功能等。上面提到的燈，打開開關發出光亮是一個功能。但這個功能還可以細分成亮度調節和色溫調節。功能可以不停細分，直到只剩一個維度了，功能就無法再細分了。

一個維度可以繼續細分為不同的狀態，比如亮度。我房間的燈只有亮和不亮，這種情況下亮度只有兩種狀態，0流明和1000流明。但我的檯燈可以調節很多檔位，亮度的狀態就有很多，而狀態越多需要的控制數量就越多。

功能的3種特性功能具有三種特性：邊界性，連續性，變化方向性

一、邊界性

邊界性根據狀態的數量多少分為無邊界，單邊界，雙邊界三種情況。

1、無邊界

無邊界的功能，狀態數量無窮無盡

比如數學的負無窮到正無窮，有時光機之後，選擇穿越時間的日期，過去的某一天，未來的某一天，如果做得到的話。

2、單邊界

單邊界的功能，狀態數量也是無窮無盡的，但有最小值

比如：聲音頻率（頻率最低為0），響度（響度最低為0），亮度（亮度最低為0），溫度（有最低溫度，-273.15℃），速度（從0到無限大，極限為光速，但可以視作是單邊界的情況）

3、雙邊界

雙邊界的功能，狀態數量有限（其實嚴格說是無限的）

比如：透明度變化，0～100%，rgb顏色數值

實際媒介功能的邊界性：

實際大部分情況下，因為人的自身性質，或者科學技術水平或實際需求。我們所進行控制的都是一定範圍以內的維度，而不是控制整個維度。即便是單邊界或者無邊界，我們也只是選取其中一部分區域當作功能。比如亮度是單邊界的功能，但我們的燈的最高亮度會是xx流明。音量也是單邊界功能，但手機的音量再怎麼大，也不會比汽車喇叭聲音大。根據實際需求，我們會將音量控制在合適的範圍里。

當然這是大部分情況，在某些情況下，我們也會使用單邊界和無邊界的功能，比如在太空飛行模擬中選擇你要飛躍的距離（單邊界），或者發明時光機後，穿越到過去的某一天，未來的某一天（無邊界）

即便是雙邊界，像透明度是0%～100%，因為需要的精度不同，這個功能的狀態數量也會非常不一樣。所以當要考慮功能邊界時，落到實處，最終要考慮的是該功能狀態的數量。

二、連續性

連續性，0/1是兩點，不連續。多少點才是連續的。其實是人的感知決定的，你覺得包括了人為設定的散點。這些散點都是從這個連續的維度中選定某一點。風扇的檔位，亮度的檔位等。

這裡的連續性是給人的感覺，並不是說這個東西就真的是連續的。比如有的微波爐的使用旋鈕控制時間，最低單位是分鐘，給我們感覺是多個點，而有的微波爐時間控制單位精確到秒，我們感覺就是連續的。

三、變化方向性

功能狀態發生變化時具有方向性，比如音量變大變小，亮度變大變小。

功能間關係

一、交叉關係：有我必有你

移動時的速度和方向，水龍頭的水溫和水流量，燈的亮度和顏色。一者的出現另一者必然也會出現，兩者是必定捆綁在一起的。

二、平行關係 ：我倆隨便玩

射擊遊戲中移動人物和調整視角，音量的大小和畫面亮度大小

三、互斥關係：有你沒我

音樂播放器的循環模式：單曲循環，順序播放，隨機播放，電磁爐的烹飪模式：燒烤模式，蒸煮模式，煲湯模式

小結：

有關功能的特性分析，到這裡就告一段落了，接下來要進行的是信息接收器和信息發送器的自身特性分析

信息接收器和信息發送器

思考環節：

讓我們回到開燈的例子，我的檯燈有控制亮度和控制色溫的功能。亮度是一個單邊界的維度，亮度為0，描述亮度的單位為流明。那麼這盞檯燈的最大亮度肯定不會比操場的照明燈還亮。亮度最大會在某個流明下。

假設我的這個檯燈最大亮度為1000流明，那麼0～1000的亮度該用什麼東西控制呢？用旋鈕可以嗎？

假設都通過一個旋鈕控制。精度是1的話，就得將這個旋鈕分成1000份。那這個旋鈕可以設計的像普通手錶的旋鈕那麼小嗎？

如果不需要這麼高的精度。這裡的1000份，其實也是人為認定的。假如有需求需要精確到0.1，那就要分成10000份。這下該怎麼辦？用一個超級大旋鈕控制嗎？沒有那麼大的旋鈕又要精確控制怎麼辦？

如果這盞燈還要控制顏色的話，要增加另一個旋鈕來控制嗎？還是可以用一個接收器同時控制兩個維度？

要回答上面的這些問題，你需要了解信息接收器和信息發送器的相關內容，當你看完本章之後，回過頭來，自己對上面的問題進行思考，能夠思考出來答案就是已經學會了。

信息接收器和信息發送器的特性

信息接收器和信息發送器有3種特性：邊界性，維度性，方向性。信息接收器和信息發送器的邊界性

媒介都會控制在一定的空間大小，太大了無法進行操作，手移動的幅度就大。就好比現在手機屏幕越做越大，但再怎麼大，也不會比iPad大。因為你還要放褲兜里。還記得當年三星手機變成一個護盾，蘋果手機變成一把劍嗎？這是不可能發生的

屏幕有邊界，喇叭有邊界性，燈泡有邊界，信息接收器和發送器都有邊界，但信息線可能沒有邊界，比如聲波和光波都屬於信息線，聲音就有邊界，傳播的距離不遠。太陽的光線信息沒有邊界，可以傳到宇宙盡頭。

邊界間的交流

一般硬體產品的信息接收器和信息發送器從一開始就已經設定好應該放在產品的什麼地方了，比如手機的開關按鍵是在頂部還是在右側，大小形狀什麼的也都確定下來不會變動。但到了軟體界面，情況就有所不同了，顯示屏上的內容可以隨意變動。這就會讓信息接收器和信息發送器的邊界關係發生變化，還記得我在信息線中提到的一句話嗎？「有變化就有信息線，問題是我們能不能察覺並利用上。」我們可以利用這種變化，比如網頁的頂部邊界和頂部欄邊界相離時進行刷新，也就是我們熟悉的下拉刷新。

信息接收器和信息發送器的維度性

我們所看到的東西都是有維度的，一個點，一條線，一個面，一個正方體等。這裡的維度指的是人感知層面，不是說物理層面。因為就算薄如蟬翼，也是有厚度的，哪怕是一個原子也是有長寬高的。

信息發送器發出的信息：

1、視覺：

點：一個指示燈

多點/線：多個指示燈，下載進度條

面：屏幕展示的畫面

體：3d投影，AR，VR

如下圖所示：

2、聽覺：

點：迅雷下載任務完成的一聲「滴」

多點/線：一段音樂

3、嗅覺：

點/多點：一種氣味，多種氣味

4、觸覺：

點：一個小凸起，現在電腦鍵盤上F鍵和J鍵上面的凸起

多點：盲文

面：手摸臉

5、味覺：

點：酸甜苦咸

多點：混合味道

信息接收器接收的信息：

1、空間移動

按下按鍵，拖動滑塊，轉動旋鈕，觸控板上觸摸操作。如下圖所示：

2、聲音

語音控制

3、畫面

人的面容，表情，肢體動作

信息接收器和信息發送器的方向性

因為接收器和發送器，都會佔據空間位置。一旦有空間位置就會涉及到方向位置問題。所以當至少有兩個點或一條線，或者一個面才有方向性。

信息接收器和信息發送器的方向性其實不是絕對存在的。一個點無所謂方向可言，即一個功能只有兩個狀態，但接收器和發送器都是一個點，比如電燈的開關、喇叭和麥克風等，屬於點，沒有方向可言。除非以人作為參考系或者以物品作為參考系。

至少有兩個點或一條線，或者一個面才有方向性可言。比如手機音量鍵是兩個按鍵，他們有上下關係。

功能、信息發送器，信息接收器的關係

在道-媒介篇里，我們已經詳細介紹了。目前我們所擁有的各種媒介的接收器發送器。那麼究竟什麼時候該用哪種媒介接收器，用哪種發送器呢？我們需要了解功能，信息接收器，信息發送器三者間都具有什麼樣的關係。

三者的關係有3種：邊界關係，維度關係，方向關係。信息接收器發送器的邊界性限制著它們的維度性，我們不可能放下1千個按鍵在手機大小的東西上。確定了收發器的維度性之後，才考慮方向性。所以我們最先要考慮的是三者的邊界關係。

功能，信息接收器，信息發送器三者的邊界關係

邊界關係理解起來不難，A>B，A=B，A<B。但這3種關係決定了，你使用的是絕對控制還是相對控制

為什麼這麼說呢？還記得本小節的思考環節我提出的幾個問題嗎？

假設我的這個檯燈最大亮度為1000流明，那麼0～1000的亮度該用什麼東西控制呢？用旋鈕可以嗎？

假設都通過一個旋鈕控制。精度是1的話，就得將這個旋鈕分成1000份。那這個旋鈕可以設計的像普通手錶的旋鈕那麼小嗎？

如果不需要這麼高的精度。這裡的1000份，其實也是人為認定的。假如有需求需要精確到0.1，那就要分成10000份。這下該怎麼辦？用一個超級大旋鈕控制嗎？沒有那麼大的旋鈕又要精確控制怎麼辦？

我們不可能用一個手錶上的旋鈕精準控制0～1000流明的亮度。但如果把1000分成10份，也就是功能邊界（狀態數量）是10的時候，我們是可以用手錶大小的旋鈕進控制的。

一、邊界關係決定了使用絕對控制和相對控制：

1、絕對控制含義

絕對控制代表功能的邊界和信息接收器的邊界在空間上一一對應

2、相對控制含義

相對控制代表著功能的邊界和信息接收器的邊界不是一一對應的。

二、兩種控制的優缺點

絕對控制的優勢：控制速度快。缺點：當功能的邊界很長且狀態非常多，但接收器的邊界很短，會導致控制精準度低。

相對控制的優勢：控制精準度高，控制速度慢，往往會比絕對控制花費更多時間

三、兩者取捨

絕對控制，速度快，但速度快有速度快的弊端

1、絕對控制時，信息接收器邊界不變的前提下，功能邊界越大，控制精準度越低。功能邊界越小，控制精準度越高。

2、絕對控制時，功能邊界不變的前提下，信息接收器邊界越大，控制精準度越高。信息接收器邊界越小，控制精準度越高。

3、絕對控制時，控制精準度不變的前提下，功能邊界越大，需要的信息接收器邊界越大，功能邊界越小，需要的信息接收器邊界越小。

相對控制，精準度高，速度慢

1、相對控制時，精準度不變，功能邊界不變的前提下，信息接收器邊界範圍越大的，控制的速度越快。信息接收器邊界範圍越小的，控制的速度越慢。

2、相對控制時，功能邊界不變，信息接收器邊界不變的前提下，控制精準度越高，控制速度越慢。控制精度越低，控制速度越快。如果功能邊界和信息接收器邊界一致時，就變成了絕對控制。

3、相對控制時，精準度不變，信息接收器邊界不變的前提下，功能邊界越小，控制速度越快，功能邊界越大，控制速度越慢。

四、例子說明：

上面的東西比較抽象，有的讀者可能沒弄懂，我下面配一些例子進行簡要說明。假設你的MP3的音量控制大小邊界是0～10，這個功能是有連續性的。下面的4張圖的信息接收器都是可以控制這個MP3音量的，但存在接收器邊界不同以及絕對控制和相對控制的區別。

圖1是絕對控制，圖2也是絕對控制，但圖2信息接收器的邊界會比圖1大1倍，有更高的控制精準度。圖3是相對控制，往上滑到盡頭，音量就會增加2，鬆開手後，滑塊自動返回底部，再往上滑，音量再增加2。圖3的信息接收器的邊界和圖1一樣，但控制的精準度是圖1的幾倍。但圖3存在一個問題，就是你音量只能往上漲，不能減少。所以圖4的相對控制方案是比較好的，音量可以變大，也可以變小。

但為什麼我們生話種圖3和圖4的方案基本都沒有見過呢？因為這種相對控制的信息接收器，速度很慢，需要等滑塊恢復原來位置再進行操作，我們的手指也需要返回到起點位置。不能持續性操作。所以我們要想辦法做到持續操作，讓信息接收器的邊界「消失不見」。我們可以首尾相連，形成一個圓環，如下圖1所示。

這樣我們就可以進行持續性操作，圖2和圖1是一樣的，也是可以看作是頭尾相連形成的圓。

問：有沒有更好的相對控制方案？

相對於絕對控制的速度快，我們採用相對控制一般是為了追求精準度，而捨去了速度。因為功能邊界很大，信息接收器邊界卻很小時，採用絕對控制，精準度會很低。有什麼辦法既可以控制精準度高，控制的速度也快呢？

答：加入時間維度

肯定是有的，上面的規則建立在空間維度進行的控制，假如我們再加入一個維度：時間，那麼我們就有移動速度這個變數了。對於絕對控制來說，移動速度並不會影響到它。無論你是1秒鐘從0移動到10還是用了10秒，只要你將滑塊移到了頂部，那音量就只能是10。絕對控制的功能的狀態都是跟空間位置一一對應的。

而相對控制就沒有這種對應關係，原本只使用空間維度時，你移動1厘米，音量加大1，滑軌的邊界只有有5厘米，那麼你從頭移到尾，只能將音量加大5。但如果加上移動速度的維度進行控制，那麼如果你移動速度快，你移動1厘米，音量可以加大到2或者3，而不是之前的1。

技術進步的影響

上面的那些信息接收器都是通過機械性進行操作的，隨著技術的發展，我們有了觸摸操作的方案後，這些機械的方案可以怎麼樣進行變化呢？

圖1是絕對控制，剛才已經介紹過了，你想要將音量調整到10，你就把滑塊移動到10那裡就行了。而圖2的觸摸方案，你不需要移動滑塊，而是直接觸摸10的位置，就能將音量調整到10。

再多思考一下？

當功能是1個維度的時候，我們使用1條線控制。當功能是兩個維度的時候，我們可以使用2條線或者一個面進行控制。既然一條線首尾相連可以形成圓，進行持續性的相對控制。如果是面首尾相連，形成一個圓柱，是不是也可以進行持續性的相對控制呢？這種思路很好，但一個面的首尾相連，並不是一個圓柱。因為面有4條邊，有兩個首尾，形成的應該是一個球。筆記本電腦的軌跡球的構思就被你想出了。下圖是蘋果電腦首次搭載軌跡球進行游標控制，游標位置是有X軸坐標和Y軸坐標的。

像我上面提到的，如果科技進步了，我們有觸摸的實現方式，這個軌跡球又該如何演變的？其實思路是一樣的，下面就是機械方案和觸摸方案的對照圖，各位讀者可以思考一下。

思考練習：

生活中的很多東西都可以按照上面的思路進行分析，比如摩托車加油的扭動是線性交互，汽車加油，腳踏下去也是線性交互。

一般我們所使用的汽車，方向盤旋轉是相對控制。可以左右分別可以打兩圈半的圓，但F1賽車使用絕對控制的。生活中還有哪些例子呢？各位讀者可以去思考一下。

功能，信息接收器，信息發送器三者的維度關係

上面是我梳理下來三者維度關係的表格，每一格都是一種設計思路。這個表格裡面包含了我知道的所有可能的交互方式。（如果有讀者能夠舉一個不在這個表格上的交互例子，記得留言給我，讓我膜拜一下）

其中有些格子你在現實中可能找不到相應的例子，因為根本就不符合交互設計的邏輯。比如讓你用1個按鍵移動電腦屏幕的游標

信息接收器和信息發送器的點線面其實也沒有一個客觀標準。下圖是iOS的音量顯示方式，從這裡我們就能知道點和線的區別在什麼地方了。

有的小朋友可能會問了，為什麼沒有4維5維呢？我們生活在3維的空間，想像都想像不到4維空間是怎麼樣的。

表格部分案例講解：

一、功能為點：以開關電燈為例

二、功能為多點/線：以iPhone的音量調節為例

三、功能為2線/面：

對於功能為2線/面的例子，我想通過一個我很喜歡的遊戲進行詳細說明。

上圖是任天堂知名遊戲塞爾達傳說-夢見島的畫面，整個遊戲的地圖是比較大的，假設橫坐標有1000個點，縱坐標有600個點。功能的邊界是很大的（功能狀態很多），如果顯示器採用絕對顯示，且只有你手機屏幕那麼大。那你控制的主人公：林克，可能就只是屏幕上的幾個像素點。（別問我塞爾達傳說的主人公為什麼叫林克）所以從交互層面肯定是不可能這麼做的。

我們現在知道了功能的邊界很大，是2維的面。屏幕（信息發送器）也是2維的面。我將會對信息接收器的設計進行簡要介紹，接下來請各位讀者仔細閱讀下圖中的文字內容

功能維度和信息發送器和信息接受器即便維度一樣，但因為功能邊界（狀態數量多），遠大於信息發送器和接收器邊界，要保持精確操作，一般採取相對控制。

2. 線和面控制的區別在哪？

圖中的例子很好地說明了2線和面的區別，面接收器比2線接收器要更加快速，使用兩條線需要操作2次而使用面需要操作1次。

思考環節：

為了精確度，在功能邊界遠大於信息接收器邊界時，使用的都是相對控制。如果功能的邊界比較小跟信息接收器邊界差不多時，我們是不是就能採取絕對控制的方案了呢？這個留給大家去思考吧，下面是知名遊戲《吃豆人》的示意圖，整張地圖都在屏幕（信息輸出器）上顯示出來了。

四、功能為3線/體：RGB顏色數值

上面4張圖都是控制RGB顏色的交互方式。左邊的圖輸入和輸出都是3線，中間的圖和右邊的圖都是1線和1面，區別只是選擇RGB的哪一個維度為線功能。下面的圖是蘋果電腦Touch Bar的示意圖，為2點和1線。具體的分析過程，其實跟上面的遊戲是一致的，我就不帶大家重複分析一遍了。

功能，接收器，發送器三者的方向關係

功能變化的方向性

功能的狀態並沒有方向，音量是100分貝就是100分貝，亮度是100流明就是100流明。但狀態變化是有方向的，音量減小或者增加。我們很容易將接收器和發送器的方向和功能狀態變化的方向混淆在一起，認為功能是有方向的。比如手機上的音量加減按鍵。上面的按鍵是增加，下面的按鍵是減少。那如果我通過語音控制，讓手機調節音量為50%，這該如何去解釋？

三者間的方向關係

1、左小右大，下小上大原則

媒介功能狀態的變化方向要和接收器和發送器的方向匹配才能讓人使用起來比較好，而所謂的匹配一般有以下形式。

音量調節，一共兩個按鍵，調大，和調小。一般調大按鍵在上，調小按鍵在下。或者調大按鍵在右，調小按鍵在左。

顯示音量也是如此。至於為什麼會有這種情況，我猜測是跟我們的經驗相關的。比如一片空地上什麼也沒有，你不停地放磚頭上去，就會越來越高。大和高就聯繫起來了。

除了上下左右之外，體積，面積，長度，數量，順時針，逆時針的變化都可以表示功能狀態大小變化

2、平衡原則

上面的4張圖是隨處可見的水龍頭，咋一眼看上去沒啥區別，但它們的交互設計其實每一個都不相同。圖1關閉狀態時開關在Y軸上，逆時針旋轉則是打開水龍頭，如圖2所示。那麼圖1和圖2的交互設計區別在哪裡呢？

我們需要知道，媒介的姿態是會說話的，即便沒有文字，沒有圖案。圖1的設計方案，開關是豎著且扁的，就是說「你可以捏著我左右移動」。而圖2的設計方案，是橫著且扁的，是在說「你可以捏著我上下移動。但實際上圖2是通過左右移動來開啟關閉水龍頭的。如果是橫著扁的設計，就應該像圖4那樣，上下移動開啟關閉水龍頭。

那麼請接下來大家思考一下圖3和圖4有什麼區別。自己思考完了再往下看，這樣更容易將別人的知識轉化為自己的知識。

======

圖3和圖4的區別在於圖3開關在水平時是開啟狀態，圖4則是向上斜45度時是開啟狀態，水平時是關閉狀態。這有什麼關係呢，這就要提到平衡原則了。下圖是平衡原則的示意圖。

如果開關不在XYZ軸上時，是打破了平衡狀態，認為開關是開啟的，而開關處於平衡狀態時，我們會認為開關是關閉的。

其實這種平衡原則在生活中隨處可見。你可以看一下你家的門把手，是不是也是遵循平衡原則的。

那有的讀者就會問了，圖1為什麼是向右旋轉打開，而不是向左旋轉呢？向左旋轉打開，即符合平衡原則，也是豎著扁的設計呀。之所以設計成向右旋轉，是因為絕大部分人是右利手。考慮到這點，如果向左旋轉打開開關，是極其不符合手的運動規律的。圖3和圖4就是一個對左右手都很公平的例子。

剛才說起了門，我又想起來關於門的交互。下面這種情況相信每個人都遇到過，當你想打開一扇門時，你往前推，發現推不動，看一下門上的「拉」字，才知道這扇門是拉開的。如果你在另一側開門，則是推開的。這種單向門的設計隨處可見，但我們經常都會犯錯，我們很少會去看門上的字，直到無法打開時才會注意到。那有什麼好的解決辦法嗎？

我上面提到過這麼一句話：「媒介的姿態是會說話的，即便沒有文字，沒有圖案」，媒介可以通過觸覺來告訴人們怎麼開啟這扇門。

上圖的里側有和人手指契合的形狀，這種形狀會告訴人們往外用力。當然你還可以在外側加一些稍微有點尖銳的東西。當人想要推門時，會察覺到不好的觸覺。但這種設計實用卻不美觀，其實不給門把手也是可以的。

思考環節：

通過上面的學習，我給下面4幅圖，讓大家思考一下這4種交互設計有什麼不同，哪個更加好。

我們再嘗試加上一個功能維度：溫度。去朋友家住，洗澡的時候，往往不知道扭到哪邊才是升高溫度，哪邊才是降低溫度，需要反覆去試，摸一下水是變涼了還是變熱了。下面是4種控制水溫和流量的水龍頭，怎麼樣設計，才能讓人直接知道向哪邊轉動是加熱，哪邊轉動是降溫呢？我就不帶大家分析了，大家可以自己進行分析，有機會再聊這個。

（PS：這個平衡原則是我自己隨便起的名字，因為我目前沒有找到有專門的詞描述這種情況，如果有哪位讀者知道這個是什麼原則，可以留言說一下。）

小結：

1、功能具有3種特性：邊界性，連續性，變化方向性

2、信息接收器和信息發送器有3種特性：邊界性，維度性，方向性。

3、功能，信息接收器，信息發送器間的關係有3種：邊界關係，維度關係，方向關係

時空的魔力

一、時間的魔力

無論多複雜的功能，只要有足夠的時間，一個按鍵即可實現任意功能。

有的小朋友可能會有疑問了，簡單的功能用一個按鍵控制可以理解，比如開關燈。難道電視，電腦還能用一個按鍵控制？難道還能用一個按鍵把這本書寫出來？可以的，只有給我足夠的時間。

比方說摩斯密碼就是通過一個點光源，通過不同的時間間隔，就能表達26個字母的含義。雖說一個按鍵可以實現任何功能，但一般也就只有這3種常用的操作方式。一般我們使用的只有單擊，雙擊，長按等操作，偶爾也會使用三擊。

二、空間的魔力

無論多複雜的功能，只要有足夠的空間，瞬間即可實現任意功能。這點也是一樣的道理，就好比在你面前有一塊巨型屏幕，你手機上所有的頁面都排列在上面。想像一下有一個比月球還大的屏幕。

三、時空結合

時間和空間都有其局限的一面，我們需要將時空結合起來，這種結合的表現就像是你手機上的播放歌曲軟體。每首歌的播放界面，變化的只是一部分內容，不同歌曲都有相同的屬性，播放暫停，歌詞等。

如果是時間，只通過一個按鍵，我們的記憶力有限，無法記住按鍵的間隔和對應功能。如果是空間，我們的人就這麼高，這麼大，給我一塊這麼大的屏幕，所有的歌都同時擺在這塊屏幕上，我也很難去點到我想要播放的歌曲。

信息接收器的極限

電燈，用一個按鍵可以瞬間控制，音量調節，可以用一個滑塊瞬間控制，遊戲人物在地圖的位置，可以用一個觸控屏幕瞬間控制，遊戲里的飛機，可以用VR設備瞬間控制。如果想要在一瞬間控制某功能。那麼這個功能最多只能有3個維度。再多的話，則需要第二個信息接收器

但你要說開燈，開電視，開熱水器，開電腦4個功能都捆綁在一個按鍵上。那就可以一個按鍵控制多個功能了。這樣想是不對的，畢竟火箭發射也只用一個按鍵就能發射上天。

這裡說的控制是自由控制，3個維度的自由控制。比如面的接收器可以在一瞬間同時控制亮度和色溫。但如果還想要控制顏色。那就不是面的接收器可以解決的問題了，需要使用VR設備，在空中控制。

例子：和平精英的操作

為了讓大家更好地理解，我舉一個遊戲的例子吧。玩和平精英，無法邊移動邊開槍。因為兩個面接收器，對應兩個面發送器。除非加入另一個維度，比如3dtouch。你就可以重按屏幕進行開槍，左邊的也可以做成重按跳躍，很多人在電腦玩fps遊戲就喜歡的這樣邊走邊跳，來增加敵人打中自己的難度。如果你的手機沒有3dtouch的功能，你就只能再用一個手指了。如下圖所示：

優化策略

一、維度變化性

1、高維度節省時間，低維度節省空間

第一點，高維度節省時間的例子，其實上面的塞爾達的案例已經很好地說明了2線控制和面控制效率間的區別了。還有一個經常說到的例子，通過旋鈕去調控聲音大小和用兩個按鍵去控制聲音大小，效率完全不一樣。

第二點，低維度節省空間也很好理解，兩根線控制兩個維度，雖說需要操作兩次，但相同精度控制下佔用面積遠比面控制要小。

2、高維度容納低維度

當有互斥的點功能時，可以將這些點功能組合成線

線是由很多狀態組成的，處於其中一種狀態。點功能一般狀態只有0/1兩種狀態。很多點功能都是0/1，那麼既然都有0，是不是可以整合在一起呢。比如線的接收器上有著很多點功能的1狀態。又因為線控制，只會在某個狀態上停止。如果點功能間的關係是平行關係，那就不行了，你選擇了一個功能，就無法選擇另一個功能。如果想要理由高維度容納低維度，需要點功能是互斥關係。

思考環節

如果我們兩個功能都想要線接收器，但媒介的空間又不允許我們使用面接收器，即便是兩個線接收器都不允許。那麼我們該怎麼辦呢？可以採取的策略有組合性，可變性。

二、組合性

有限的按鍵，想要即刻做不同的操作，有組合的形式，電腦鍵盤的快捷按鍵，複製，粘貼等。都是通過組合來實現的。比如玩遊戲時我們想要向左上角右上角移動，但手柄只有十字鍵，就可以通過組合向左上角和右上角移動了。很多遊戲都會通過組合來形成不同的功能操作。當然也可以更換維度更高的接收器。比如變成搖桿。但如果有太多的組合，肯定是不合適的，學習成本太高了。

三、可變性

在不同情況下，同一個信息接收器控制不同功能，同一個信息發送器可以展示不同功能狀態。比如電腦鍵盤，按下caps lock按鍵，整個鍵盤就會從小寫字母變成大寫字母。小米電磁爐的選擇功能和溫度控制。我們現在的手機屏幕就是可變性的最佳例子

四、多樣性

1、同一個功能可以有多個信息發送器

有人打電話給你，你的手機會發出聲音，會震動，會有燈光閃爍，同時發送信息觸覺，視覺，聲音的信息線。當然也不是越多越好，說出的「話」能讓人感知的並準確理解即可。

當同一個狀態有兩個輸出器，一個輸出器變化了，另一個輸出器沒有變化就會讓人感到疑惑了。比如你按下開關，燈沒有亮。是開關壞了？還是燈壞了。這裡的開關其實是信息輸入器也是信息輸出器

2、同一個功能可以有多個信息接收器

在電腦輸入文字，你可以通過實體鍵盤打字，也可以通過滑鼠點擊虛擬鍵盤，也可以用語音輸入。

五、泰思勒定律（複雜性守恆定律）

該定律認為每一個過程都有其固有的複雜性，存在一個臨界點，超過了這個點過程就不能再簡化了，你只能將固有的複雜性從一個地方移動到另外一個地方。如對於郵箱的設計，收件人地址是不能再簡化的，而對於發件人卻可以通過客戶端的集成來轉移它的複雜性。

學以致用

上面的內容是這本書核心中的核心，當你能夠熟練使用上面的知識後，你就可以創造性地發明很多交互方式了，下面我就舉兩個我們現實中的例子，一個是改進小米電磁爐的交互案例，另一個是蘋果觸控板的手勢操作發明，揭示手勢發明的歷史必然性。

小米電磁爐的控制

在小米電磁爐出現前，我所接觸過的的電磁爐基本都布滿密密麻麻的按鍵，而小米電磁爐相比於其他的電磁爐最大的不同在於使用一個旋鈕去控制大部分功能：啟動，暫停，溫度控制，定時控制，功能選擇等。米家電磁爐的交互方式是怎麼想出來的，我也不清楚。但可以嘗試一下用書里的內容去進行剖析，看看能不能想出來，以及怎麼改進。

我們先來分析一些這些功能：

啟動功能

開機啟動，屬於0/1點功能，我們可以用一個按鍵來進行開關機

暫停功能

使用過程中的暫停開始可以使用一個按鍵進行控制。

功能選擇

功能有蒸煮，炒菜，煲湯，火鍋等等，這些功能的關係是互斥的，我們可以給每一個功能都對應給予一個按鍵（點接收器）進行控制，根據優化策略維度變化性中的高維度容納低維度的方案。也可以將這些互斥的點功能整合成線，使用線接收器進行控制。

溫度控制

雙邊界，0～100度，中等邊界範圍（實際上不止一百度，只是讓人有個大概的感知）。可使用線接收器絕對控制，也可使用線接收器相對控制。

定時控制

時間屬於無邊界功能，時間1分鐘到幾小時不等。為了精準度，我們需要使用相對控制。為了速度，我們使用線接收器而不是點接收器。所以我們不使用線接收器的絕對控制方案。選擇使用線接收器進行相對控制方案。持續性操作需要線接收器收尾相連，形成圓。

優化策略

現在的分析結果是：

1、功能選擇使用線接收器控制

2、溫度控制也是線接收器控制

3、定時控制使用線接收器控制

3個信息接收器分別控制3個功能

產品經理覺得太多了，需要精簡。那我們還有一個優化策略是可變性，都是線接收器，我們使用另外的點控制來進行旋鈕功能切換就能夠做到了。這種交互設計思路大體上是已經跟現在小米電磁爐的交互設計是一樣的。將定時和功能選擇單獨做一個按鍵出來，點擊相應按鍵，旋鈕就切換控制不同的功能。

產品經理問，還能不能再簡約一些？當然是可以的，這3個功能也可以再使用線接收器來整合優化。比如旋鈕向上移動是選擇烹飪功能，中間是火力控制，下移是定時控制。我在這裡只是提供一種思路給大家，我提到的這個方案究竟能不能實際應用，還得看實際需求。比如這種結構容易壞或者信息發送器不直觀等等，並不代表這種方案就比現在小米的方案要好。我所想的方案如下圖所示：

其實小米電磁爐的空間要素沒有考慮的非常好。我們使用過程中，需要彎下腰才能看見屏幕，可能是為了美觀考慮吧。不過我覺得設計這款電磁爐的交互設計師是考慮到了使用者信息接收器（眼睛）和媒介信息發送器（屏幕）的相對位置關係的，所以才在旋鈕上面加上了多盞白燈來表示火力。

上面的只是粗略的分析，鑒於時間關係，我還沒有進行進一步詳細的分析，比如這個旋鈕默認是在中間，我們下移後鬆開是否有彈簧自動恢復中間位置，還是只能手動移動回中間位置。

如果是自動恢復的方案會導致我們旋轉的時候不能持續性地轉動，因為一鬆開手就會復原，定時控制沒有達到自己想要的時間，還要再將旋鈕往下移動再旋轉。

如果是手動方案，又會有其他的不足，這裡就不詳細談了。

MacBook的觸控板

用過蘋果筆記本電腦的讀者應該都知道那塊觸控板有多麼好用，我們接下來就研究研究蘋果觸控板發明的歷史必然性。我們使用電腦，少不了滑鼠這個東西。通過本章的學習，我們知道面接收器（滑鼠）在同一時間同一空間，其坐標的橫坐標和縱坐標的是唯一的（游標在電腦屏幕的位置）。比如我們只能用滑鼠控制游標在顯示屏上上下移動。當你瀏覽網頁的時候，你需要用滾輪來滑動頁面，當你需要打開更多功能時，需要右擊滑鼠。還有就是左擊選中，左擊按住拖動等等，我就不一一列舉了。如果你的滑鼠只能移動，沒有滾輪，沒有左擊按鍵，右擊按鍵，你是無法只靠移動滑鼠完成上面說到的那些行為的。

我們瀏覽網頁，需要上下滾動頁面，是線功能。一個滾輪可以勝任，如果頁面很大，屏幕寬度不足，還需要左右滾動頁面，那麼一個滾輪控制上下滾動，無法做到左右滾動，那麼我們可以再加入一個橫向的滾輪進行左右滾動控制。

這麼一想，幹嘛不直接再做第二個滑鼠出來控制頁面的上下左右移動。一個滑鼠控制游標移動，一個滑鼠控制頁面移動。我們再想想，我們已經有一個滑鼠來控制游標的上下移動了，能不能將它切換成控制頁面上下左右移動的滑鼠而不是控制游標上下左右移動呢這個時候就是利用優化策略里的可變性，我們可以設計一個鍵盤上的按鍵來進行這種切換。按住進行滑鼠控制切換，那麼這個滑鼠就可以平時控制游標。按住這個按鍵時控制頁面移動，當然點擊一次就切換一次模式也是可以的，我個人比較傾向按住的方式而已。

上面的只是思路，實際上滑鼠是有滾輪控制頁面上下滾動的。頁面的左右移動也可以通過拖動頁面下方的滑動條來控制。

我們就先不管滑鼠了，讓我們來到筆記本電腦觸控板這個地方來。觸控板沒有滾輪，我們滑鼠上有滾輪控制頁面上下移動。我們也要在觸控板上加一個滾輪嗎？顯然是不合適的。就像上面的推理一樣，我們可以採用同樣的方式。鍵盤上有一個按鍵專門用來切換觸控板是移動游標還是移動網頁。我們用我們的左手進行按鍵切換，右手在觸控版上移動。這好像沒什麼問題。因為如果我們用右手按住按鍵還要進行上下左右移動，肯定是不方便的。即便這個按鍵是最接近觸控板的且面積最大的空格鍵，你按住後，只能用大姆指進行移動。點擊切換雖然沒有這個問題，但需要不停的切換是非常麻煩的。那能怎麼辦呢？把按鍵放在觸控板上可以嗎？

將這個按鍵單獨放在筆記本觸控板的這種方案比放在在鍵盤上控制要方便一些，但是還是比較麻煩，要是這個按鍵能跟著手一起移動就好了。當用一個手指在觸控板上移動時是控制游標的上下左右移動，當有另外一個手指觸摸到觸控板時，就會切換到頁面移動的控制模式。也就是說兩個手指觸摸到觸控板的時候是控制頁面的上下左右移動。這種交互似曾相識呀！

這不就是現在macbook的手勢控制方式嗎？2個手指控制頁面的移動，那麼是不是可以有3個手指的時候，4個手指的時候，n個手指的時候呢？雖然我們有10個手指，觸控板一般也只是一個手進行控制，同時容納10個手指操作是不行的。

以上便是多點觸控出現的歷史必然性。如果不是蘋果公司首先使用多點觸控，也會有另外一家雪梨公司首先使用多點觸控的控制方案。

希望上面這兩個例子能給各位讀者帶來啟發，對身邊的一切產品去進行思考，看看身邊的產品有哪些交互是可以進行優化的。因為精力有限，這兩個例子我都是粗略地講一下，下一章將會詳細給大家介紹iPod的案例。

信息接收器與發送器的表現設計

在確定了信息接收器和信息發送器是什麼樣的構造時，便需要考慮媒介「說的話」能不能被人理解了。換句話說，怎麼樣的表達方式才能讓你聽懂媒介在說什麼，怎麼說才能讓你舒服。前者和後者的協調統一是關鍵。

這部分內容決定了你使用文字，還是圖標，還是圖片，還是動畫，還是視頻。使用什麼樣的聲音，什麼樣的質感的外殼，什麼樣的味道。其實到了這一步，交互設計師的工作基本已經完成了，表現設計是視覺設計師的專業領域了，當然交互設計師也是需要參與進來的。我下面就簡要地說一下，如果有說的不對的地方，還請各位見諒。

下圖是電話圖標的不同表現設計：

視覺

文字，圖標，圖片，動畫，視頻，其中最基礎的是文字，我們進行信息發送器和接收器相關設計時可以先使用文字表現設計，然後再看看適合使用哪些表現設計

1、文字表達

我們一般與人對話的時候，能夠流暢進行，當然也有例外，我們回想一下，在什麼情況下，跟別人解釋說明一個事情特別困難。我舉一個我的例子，我教父母使用手機，雖然我的父母在諾基亞時代都有手機，也能夠正常使用。但為什麼到了更加智能更加人性化的時候，反倒不會用這些智能手機了呢？

當我們教他們的時候，就得每一步都解釋清楚，不停地去溝通指導。因為父母是新手，腦海里並沒有相應的知識點。很多名詞都需要進一步地解釋才能弄懂。什麼是Wi-Fi，什麼是熱點等。

文字簡約凝練

我們購買產品之後，往往都有一本小厚的說明書，但不是所有人都願意看那玩意，產品使用起來也不是一直都有這個說明，可能丟了，或者當你在公司，其他場所使用產品時，就沒有說明書，你只能依靠產品上自帶的文字說明來去判斷如何使用

（這本書寫好第一時間就發出來了，所以沒有做好文字表達這一點，還望各位讀者多多包涵）

2、圖標/圖片表達

當文字表達乏力之時，圖標/圖片是一個更好的表達方式

我與父母電話溝通，教他們進行操作的時候，有些地方經常出錯。遇到對話很難表達的時候，我會直接截圖，標註出要點擊的地方，讓他們跟著圖片操作。

那是不是有圖標/圖標就不用文字了？這一點在我做產品交互原型的時候經常遇到，這個時候就要有取捨。圖標下面加文字，佔用地方，視覺上沒有單純圖標來的簡潔。但如果只有圖標沒有文字往往對於新使用的人來說是很不友好的，因為我不知道這個圖標表達的意思是什麼。除非這個圖標已經達到一種共識，每個人看見這個圖標都知道是什麼意思，比如你手機上的一個綠色的電話圖標。

一般來說電腦或者手機軟體的圖標都取自於我們的生活之中已有的內容。比如音樂軟體的下一首歌的圖標，在我們的mp3隨身聽的時候已經存在了。但如果一個19世紀的人看到這個下一首的按鍵時，能夠知道這個圖標代表了什麼含義嗎？

Wi-Fi是我們日常中不存在的一個東西，而Wi-Fi的圖標是從軟體界面出現之後才發明創造出來的。這種圖標一開始必須得搭載文字，而Wi-Fi這個文字，即便搭載了。第一次見到的人，也不知道這個東西是用來幹什麼的，完全是一個新的辭彙。但我們的日常交流讓我們懂得了Wi-Fi是什麼意思，即便是一個從來沒有使用過智能手機的人。在獲知Wi-Fi是可以用來上網的。那麼當他第一次使用智能手機時，他便能夠獲知這個這個Wi-Fi文字的含義，且圖標也和這個含義綁定在一起了。

單純文字會有歧義，比如當我說在頁面往上拉，這個「往上拉」有的人會理解成手指接觸屏幕後，向上移動。而有的人會理解成講頁面往上移動，那麼他就會在手指接觸屏幕後，向下移動。如果配有一張引導圖，裡面有方向引導就不會出現這種歧義的情況。

單純圖標也會出現歧義的情況，即圖標表現出來一致的，但本質功能卻不相同。你能夠知道下面兩個圖標代表什麼含義嗎？兩個都是錢？

這兩個圖標是支付寶的餘額和餘額寶

還有一些獨有的圖標，自己本身的功能獨有的，這種必須配上文字

3、動圖表達

圖標/圖片是一個很好的說話方式，但有的時候，一張靜態的圖，也不能很好地反應出想要表達的意思。特別是需要指導你進行某些行為的時候。

文字，圖標/圖片，動圖的優劣

在特定的情景中，圖標的意思其實會比較明確，沒有文化和交流帶來的困擾（黑箱子不同），英文的開關是「on/off」，中文是「開/關」。如果使用紅色X和綠色的O，就不會存在這種問題。這個時候圖標會比文字更具優勢。

聽覺

上面是有關於通過視覺來進行交流的思考，除了眼睛看之外，我們人正常交流則是通過聽覺，來獲知別人想要表達的意思。

這一點基本就和人溝通一樣了，但我們對其拓展的並不多。不能像圖像那樣在一定程度上表達這個功能是什麼意思。因為聽覺並沒有一種人人所有共識的東西，這就有點像一些特殊功能的圖標，只能是特有的。汽車的喇叭聲音，不同的聲音往往代表著不同的車。單車的手動鈴聲，摩托車的喇叭聲，汽車的喇叭聲。

和圖標一樣，同樣的表現代表著不同的功能，比如iOS推送，每個app都可以定義自己獨有的聲音。代表的都是有新的通知。

不同的表現，代表著相同的功能。比如洗衣機的表現。下載完成的叮咚聲，迅雷和百度雲盤就會有不一樣。你在車上沒有系安全帶，車會發出「滴滴」的聲音會提示你系安全帶。雖然每輛車的提示都會有不同，當你學會了，你就能夠知道這些「滴滴」聲是代表著你沒有系安全帶。

上面的「滴滴」聲在簡單的情景下才適用。如果有多種功能需要通過聲音傳達。比如沒有關好其中一扇門，沒有關好後備箱等等問題。每個都用不同音色的滴滴聲，那麼就會使人困擾，更不用說，如果每個品牌的車所發出的聲音還有不同，這個品牌是是「滴滴」。那個品牌是「噠噠」。這個時候，比較適用的就是像人一樣說話，告訴司機：請系好安全帶，請關閉右後方的車門，請關好後備箱。

觸覺

觸覺的好壞其實很難跟大家描述，因為你看的是文字，是圖片。不過有辦法讓大家感受一下。我們的手機都有震動功能，蘋果手機的Taptic engine馬達，小米10的橫向線性馬達，其他一些手機的扁平馬達。大家如果有這些手機，或者可以去手機店體驗一下。你就會發現蘋果手機和小米10的震動是那種很清脆的「噠噠噠」的感覺，而一些手機使用的扁平馬達，就是「嗡嗡嗡」的感覺。

還有利用觸覺信息的設計，比如電腦鍵盤上的F和J鍵的小凸起

嗅覺、味覺

我們偏愛香味，厭惡臭味，臭味會促使我們離開，這也是為什麼煤氣添加的是臭味，而不是香味。味覺方面的交互，我不是很了解，這裡就不展開講了，有興趣的讀者可自行研究。

說明

很多人看書時喜歡將書的內容整理成思維導圖，為了節省大家的時間，我將會著手製作本書的思維導圖，製作完成後將會放在微信公眾號：交互靈光

本著共享知識的原則，如果有同學覺得這本書寫的還可以，想要轉載，可以直接轉載，註明出處即可。當然如果能夠通知我一下，讓我知道轉載在哪裡，就再好不過了。