• 課程教材總目錄﹝CONTENT﹞
• ﹝第 13 講﹞內容
• 互動設計的意義
• 人體工學
• 互動設計的基本工作

互動設計的基本工作

　　資訊設計完成後，應該如何進行互動設計呢？其實在互動式設計的過程中，設計師所做的其實是將只呈現內容及架構的「流程圖」，轉化為顯示瀏路徑和控制工具的「分鏡腳本圖」，換句話說，從資訊設計轉化為互動式設計的意義在於，將「內容」轉換為「經驗」。

　　一個好的分鏡腳本圖應該能夠︰

• 提供使用者清楚的指示與選擇，並激勵他去瀏覽內容的部分。
• 提供使用者一個有趣的瀏覽途徑，如果這點做不到，至少要提供一個清楚的途徑。
• 給予使用者擁有隨心所欲瀏覽、閱讀、下指令的自由。
• 盡可能讓使用者經歷簡單且直接互動的體驗。

　　製作任何一個多媒體產品，其中設計步驟都和時間、金錢、技術來源息息相關。如果使用者的互動控制權力越多，那麼意味著這個產品發展的過程越複雜。至於這個權力要提供多大才好，完全看這個產品的內容而定。譬如，介紹一份簡單的文件只要提供基本的瀏覽方式就好，若是介紹一項醫學知識，可能還要提供虛擬實境的瀏覽方法。

　　不論是簡單或是複雜，互動設計的最基本原則就是清楚、簡單、容易使用。

　　一般來說，互動設計要做的工作包括：

• 為初次使用者設計一套導覽系統。
• 設計連結路徑。
• 定義每個螢幕畫面的功能。
• 設計互動式控制面板。
• 設計一個分鏡腳本圖。

　　以下說明互動設計過程中要注意的一些事情。

　　多媒體產品的使用者最常遇到的挫折就是，不知如何去使用、瀏覽這個產品，並能判斷它是否對自己有用。使用者是否能夠得到他們所要的﹝以及她們必須花多久時間來找到目標﹞，就要看設計師是否能在一開始就提供一個合適的瀏覽方向。

文字導向的使用者介面─Intel 公司首頁

圖像導向的使用者介面
─"The Great Artists" 光碟軟體首頁

　　使用者初次接觸某一個多媒體產品，通常會預期看到一個熟悉而且友善的視覺環境，指引他們在茫茫的資訊之海中找到方向。就像小孩子一開始學習打開書並且翻頁，稍長之後學會用遙控器轉台選頻道一樣。每一種媒體都應有它獨特的語言，為使用者提供最好的瀏覽途徑。

　　許多導覽系統已經變成大家公認的規格。每一項多媒體資訊產品都應該為使用者提供一個主要的閱覽方式。從第一個螢幕開始，就必須告訴使用者，這個產品會為他提供什麼樣的內容或是什麼樣的經驗。因此第一個螢幕要顯示一個圖像與文字平衡的畫面，並提供有用且足夠的指引，而不是所有的細節。和電影觀眾或電玩遊戲玩家不同的是，多媒體資訊產品的使用者最想要知道是產品中有些什麼內容，以及如何去找到這些資訊。

　　有許多設計方法能為使用者提供最適當的瀏覽方向。譬如，一個公司的資訊網站可能會用簡單的圖像和標題來介紹它自己，讓人隨意地瀏覽。而一個較複雜或範圍較廣泛的產品就可能需要更多面向的閱覽架構，提供多層次的資訊，以便使用者可以依他們所需要的細節程度來瀏覽。

　　一個最適合進行使用者導覽的地方，就是主連結畫面。不管它叫做主選單、首頁、還是其他的名字，它都具有同樣的效果︰設定使用者將會連結到的概念空間，而當這樣的空間是以圖像的方式被呈現出來的時候，它就叫做一個影像圖集。

---

影像圖集

---

隱喻

---

　　影像圖集有兩種目的︰圖像同時呈現並指出內容。任何圖像的集合都可以是一個影像圖集，用以區分項目或是一個統整的圖像。在設計過程中，我們所應注重的不是創造影像，而是定義要介紹給使用者的概念。

　　隱喻是一種特殊的影像圖集，經由以一些人們在真實生活中熟悉的物件（例 如一本書）、地點（例如一棟辦公大樓）、或是一種設備（例如一個影像設備），來表示一項資訊的方式，將影像帶入一個有意義的文本之中。

　　隱喻只有在觀眾對之熟悉，並且語文本之間有一套很好的指涉概念時，才能 發揮功效，讓人更容易使用這項產品。

---

功能性的隱喻

---

圖形隱喻

---

意義不清礎的隱喻

---

 

正確的隱喻︰

• 它能否讓使用者更了解下一步要做什麼？
• 它適合用來表示此內容嗎？
• 內容中是否有某一部份顯然地不能套用這套隱喻系統？
• 這套隱喻是否會讓使用者產生一些你沒想到的預期？

　　隱喻並不是只有複雜的多媒體程式或遊戲才用得到，例如，要取得關於醫療程序的資訊，使用者可能得在一個單螢幕的醫生辦公室的畫面上，點選儀器的圖像。這是一個連結隱喻︰醫生的辦公室提供了一套大家熟悉的文本，讓搜尋資訊的過程更容易。

　　相反地，一個功能性的隱喻，就要創造出一個環境，讓物件能夠呈現出它所代表的功能。最為人所知的是電腦介面以桌面為隱喻的例子，資料夾就代表目錄，垃圾筒是刪除檔案，而一個電子通訊錄就存放著名字和地址的資料。

　　功能性的隱喻呈現出互動性的某一個層次，比起簡單的資訊產品，它更常出現在應用軟體和多層次的多媒體中。但連結式的隱喻幾乎可以被應用在任何一種資訊產品中。

　　許多互動式作品的使用者主要運用的互動性就是導航連結的功能，由此可知所謂的互動式設計其實可以說就是連結設計︰你必須創造出幫助人們了解他們現在在整個主題的什麼位置、有什麼可以看、還有怎麼看。

　　資訊流程圖定義出整個作品的架構，所以一但流程圖確定了，可以說大部分的導航連結設計就完成了。下一步就是設計介於主題與使用者直接與之互動的控制工具之間的存取路徑。隨著這個程序，流程圖也會漸漸地朝更適當的方向有所修正。

　　一個好的導航連結設計將可以︰

• 簡化過程︰在任兩點之間創造出最簡單、最短的路徑。
• 簡化深度︰盡可能地創造出最少的階層數（每多一層就代表要多連結一次）
  
• 簡化重複路徑︰避免創造許多個從同一個螢幕連結到同一個地方的路徑。

• 到新的主題︰到一個全新的主題可以跳到下一個不同的螢幕畫面。
• 在一個主題之內移動︰在同一個主題內安排新的內容，在設計上應盡可能地精細，才不會讓使用者弄不清楚。

• 讓使用者可以經由內容畫面連結到作品的中心主題，可讓連結步驟減少一半。

　　在主題之間的隨機存取及連結，是互動式作品的兩個特性。但完全沒有任何限制的存取自由可能會讓使用者覺得困擾，並為你帶來設計上的麻煩。

　　網際漫遊，和在網路上的文件中瀏覽，是一種藉由連結而產生的動作，我們很容易會忘記某個有趣的東西是在這一串連結中的哪一個點，但是整體的瀏覽經驗是透過連結而來。人們並不會預期在這些文件中能直接看到總體，或是有連續的感覺。

　　而無限制的存取和多樣性，並不能減輕設計者在維持統一性和文件之中的方向性上的工作量。

　　當一個作品被放置在網路上、光碟片中、或是任何其他的媒體中，它的存取路徑與連結設計的目標都是要讓導航連結能儘可能地簡單和直接。

　　設計的可使用度並不是互動設計的必要步驟之一，它不是一個你只要想一次就好的東西，它是整個設計過程中必須持續地被考慮到的一部份。

　　只有當一個介面的反應能符合使用者的預期時，它才能算是一個人性化的介面，設計者必須要能預測人們對這項產品的預期，才能做到。

　　一個人性化且容易使用的互動式作品，其中包含了許多設計者的心力，才能有效地預測、了解、並操控使用者的預期。

　　幸運的是，使用者會對產品有許多有幫助的預期，他們會預期用滑鼠點一下，就可以跳到某個地方，或是顯示些什麼東西；他們會希望一個以前在別處看過的圖像也會有同樣的功能。這並不是說所有的互動性看起來都必須因循舊有的東西，如果對使用者來說是有意義的，那麼新的互動設計也許會更好。

　　除了以一般概念來判定一個攢品是否容易使用以外，有一些特定的步驟可以用來預測及避免可使用度的問題。這些步驟並沒有一定的順序，你可以在設計的過程中，隨時把它們拿出來思考一下，作為一個設計上的指南。

　　使用者總是試圖在產品中做、發現、或是學習一些什麼東西。你的工作就是排除阻礙，讓使用者能很容易地達到這個目的。

　　你應減少不必要的互動元素，而讓整個架構以簡單為原則。以下是一些你應謹記的基本事項︰

• 不要叫使用者來『學習』使用你產品，這樣會增加他們的負擔。
  
• 不要叫使用者做一些產品自己可以做的事（例如開始播放影片、聲音 ），除非他們有必要控制這些項目。
  
• 不要浪費時間來說明各個元件和多種進行的方式。

　　因此規劃「可使用度」要做到以下特性：

第一：移除瀏覽障礙

　　一個好的互動式作品不會阻礙使用者，它不會使用一些太詳細的規則架構及符號，也不會試圖去解釋它自己或是引導使用者的動作，除非使用者要求。

　　有一個排除阻礙的方式是讓使用者儘可能地直接和文本互動，讓他們點選他們要看的東西，並且讓他們以最簡單的方式找到他們在尋找的資訊。

第二：省力

　　為了不讓使用者覺得自己一直在螢幕上繞來繞去，你可以藉由把相關或常用 的控制工具放在一起，讓他們可以輕易地找到。例如，在一個參考資料的產品中，使用者可能會常常需要用到往前及往後的功能，那麼你就應把『下一頁』和『前一頁』的按鈕放在螢幕的兩邊。

第三：回饋

　　大部分的人都會認為當電腦看起來一點動靜都沒有的時候，它就真的什麼事都沒在做。如果一個產品不以某些方式對使用者的動作做回應，使用者可能會以為這個動作沒有被接受。回饋應該是適當且立即的，例如，你可以用『點下去』（或其他）的聲音，以及將所選項目做反白的處理方式，來對應一個滑鼠點選的動作。

第四：清楚

　　把螢幕上什麼是可點選的、什麼是不可點選的標示清楚。看起來像按鈕的東西就應該是個按鈕。如果一個圖像有點選區，就要把它們根圖像的其他部分區隔開來。

　　某些瀏覽互動式產品的工具，例如線上文件瀏覽器，會提供自動標示可點選文字與圖像的選擇，並在它們被選取時作反白的處理。

第五：靈活

　　使用者會希望產品提供捷徑，而能夠跳過他們已經看過的部分，直接到達他們想去的地方，他們也會希望可以馬上擺脫那些他們不感興趣的東西。你應該讓所有的媒材﹝包括聲音、電影、動畫﹞都是可被打斷的，可以在任何時候、任何段落以電腦的標準鍵盤通用捷徑退出。

第六：寬大

　　使用者會希望產品能讓他們無限制地做想做的事，並且不會受到懲罰。他們會犯錯、改變心意、而希望有補救的空間。不要創造出一個使用者必須『做對了才能動』的條件，例如，要使用者必須選到一個正確的回應才能離開那個畫面，或是要他們輸入一個正確的字來搜尋主題。

　　就如同可使用度，功能性也不是專屬於某個步驟的考量要點，而是早在產品的最初定義階段就應被納入考慮。但是它之所以在現在才被討論到，是因為分鏡腳本圖—互動式設計的階段性目標會要求你確認每一個功能性的決定。

　　設計「功能性」指的是詳細地說明到目前為止有什麼地方還不清楚的。這是一個很好的檢查，強迫你去重新檢視最初對文本的假設，看看有什麼問題，即時地修改設計直到問題被解決。

　　設計「功能性」也意指著同時看見樹與森林。這是一個同時從使用者所直接接觸到的個別控制工具的特寫，以及從遠景來看所有的控制工具如何統整在一起的過程。

　　最後，設計「功能性」也包含了不斷地問問題，並測試不同的回答，直到你發現那一個最好的回答為止。

　　以下各項工作是從宏觀的角度來談如何設計「功能性」。每項工作都必需從產品如何運作來考量決定，也必須從個別螢幕畫面和整體程式設計的層面來考量。

第一：定義互動式控制

　　互動性的設計控制指的是定義每個螢幕所正在發生的事，以及怎麼做︰使用者何時可以到達想去的地方？怎麼去？以及所有可用的動作。產品的整體功能性必須被發展為一個統整良好的系統。

第二：解決結構性的問題

　　解決結構性的問題指的是標誌出文本中不一致的內容，就算你花費再多的心血，也無法完美地組成結構或是統一分布。每一種資料的集合都會有一些過長或過短的項目，或是需要特別處理、不同的路徑、或是類似的情形。

第三：確定一致性

　　產品的每個部分都能具有一致性，能使使用它的經驗更直接，使用者也只須學習最少的新指令即可。例如，如果一個產品的某部分提供螢幕上文字的口語聲效，使用者就會希望在其他的主題中也可以找到同樣的選擇。

第四：管理依存性

　　在任何產品中，都有一些畫面具有依存性。例如一系列的畫面所造成的從屬關係。如果一項產品的主選單適用來顯示使用者已瀏覽過的部分的檢查 標記，那麼這項特點就會影響到在兩個段落之間直接創造連結，跳過主選單的決定。

第五：控制媒材與通用特性

　　使用者直接接觸到的控制工具指呈現出部分的產品功能，其餘的功能是屬於產品本身的動作；例如控制文字、圖像、聲音，以及如何呈現那些一般常見的控制工具，都是設計的功能性所要考慮的一部份。