黃婧華

1

大學

Sept. 2005 - Aug. 2007 國立臺中科技大學 多媒體設計所

Sept.2010 - July 2016 國立雲林科技大學 設計學博士

碩士

博士

2

Sept. 1999 - June 2001 國立臺中科技大學 商業設計科 Sept. 2002 - June 2005 朝陽科技大學 視覺傳達設計系

Chao-Ming Wang and Ching-Hua Huang (2015), A study of usability principles and interface design for mobile e-books. Ergonomics, 58(8), 1253-1265. 《SSCI》

Chao-Ming Wang and Ching-Hua Huang (2015), A study of usability principles and interface design for mobile e-books. Ergonomics, 58(8), 1253-1265. 《SSCI》

Chao-Ming Wang and Ching-Hua Huang (2015), A Study of Visualization on Interactive Interface Design Patterns in Mobile e-Books, International Journal of Affective Engineering, 14(5), 279-288.

Chao-Ming Wang and Ching-Hua Huang (2015), A Study of Visualization on Interactive Interface Design Patterns in Mobile e-Books, International Journal of Affective Engineering, 14(5), 279-288.

Chao-Ming Wang and Ching-Hua Huang (2014), EXPLORING RICH INTERACTIVE EXPERIENCE ON MOBILE EBOOKS BY EMOTIONAL DESIGN APPROACH, Bulletin of Japanese Society for the Science of Design, 60(5), 21-30

Chao-Ming Wang and Ching-Hua Huang (2014), EXPLORING RICH INTERACTIVE EXPERIENCE ON MOBILE EBOOKS BY EMOTIONAL DESIGN APPROACH, Bulletin of Japanese Society for the Science of Design, 60(5), 21-30

博士論文

4

第二章 ‣文獻探討

第三章 ‣研究方法

第四章 ‣行動電子書的使用性原則與介面設計研究

第五章 ‣行動電子書的互動體驗與情感設計研究

第六章 ‣行動電子書的互動介面模式與視覺化研究

第七章 ‣討論與結論

行動電子書互動介面設計研究

5

6

行動電子書：是一種可攜式的隨身裝置，使用者可以隨時、隨地、隨身透過行動電子書來進行閱讀與體驗

閱讀模式

單向的閱讀 數位化、行動化、互動化的閱讀與服務

7

電子書專用閱讀器 平板電腦+APP

行動電子書

互動介面設計：使用者對系統的心智模式 Preece, Rogers, & Sharp( 2002) 互動設計之目標即是「使用性目標」及「使用者經驗目標」 使用性目標，如有效性、易學性… 使用者經驗目標，如富有美感的、愉悅的…

Norman(2004) 情緒是生活必要的部份，情緒往往通過判斷來傳達即時訊息

許子凡(2010) 在生活環境中傳遞著不同程度的資訊，而視覺資訊的判讀，

對於使用者的行為決策有諸多的影響

8

9

數位出版解決方案

行動電子書

使用者• Adobe DPS：Wired、GQ、

VOGUE• 4i DPS：一手車訊、FHM• AppCross• Apple iBooks Author• Umag

❈每家數位出版商：採用系統不相同介面操作模式不一致性

為了因應不同應用程式的介面操作行為，需要重新的學習與適應

10

(張蓓渝,2013；黃靖淳,2013；劉又嘉,2012；鄭錦文,2012；蘇修毅,2010)

近年行動電子書的相關研究

• 探討介面的使用性• 歸納適用於行動電子書閱讀的介面編排形式或使用性

的原則

(Hvannberg, Law, & Lárusdóttir, 2007; J. Kim & Moon, 1998; Rogers, Sharp, & Preece, 2011; Rubin & Chisnell, 2008）

產品設計領域

• 產品使用性介面評估的優缺點及應用

• 觸控螢幕之介面使用性（吳亞仁，2008；萬欣亭，2008；顧兆仁與陳立杰，2011）

行動電子書的介面設計如何讓使用者容易上手是一項重要的課題

行動電子書介面圖示設計不清，容易造成使用者辨識困難

行動電子書設計之傳達理念是否與使用者認知一致

電子書上繁多的功能與複雜的選單是否會影響使用者的閱讀與操作

11

本研究提出「行動電子書的互動介面設計研究」

由使用性切入，探討介面操作行為、先前使用經驗與評價之關係，並討論影響互動設計模式的視覺化要件

整合互動介面設計之多元的研究觀點

12

使用性 情感設計 視覺化

找出適用於各個數位出版系統之互動介面設計模式

13

使用性

情感設計

視覺化

• 整理行動電子書的互動介面行為應高度關切之特點

• 找出影響使用者操作的互動元素與關鍵

• 歸納出常用的使用者介面模式• 找出影響使用者操作的視覺化要件

• 分析行動電子書之新穎人機介面共同應用技巧• 提出建立情感向度的元素因子與關鍵

14

15

研究課題一：「行動電子書的使用性原則與介面設計研究」

研究課題二：「行動電子書的互動體驗與情感設計研究」

研究課題三：「行動電子書的互動介面模式與視覺化研究」

以iPad作為主要施測工具

在實驗操作上選用市占率最高的iPad作為主要施測工具

一般電腦或其他電子書閱讀器，不在本研究討論範圍

16

以雜誌App來進行行動電子書互動介面設計之研究 一般書籍App內容以文字為主圖為輔，可互動的元素較少 雜誌App內容編排以圖為主的版面編排設計並結合了多種多

媒體元素

17

以Wired雜誌為本研究工具之典範 許多出版商採用Adobe DPS數位出版系統發佈數位刊物後，

透過每週更新互動式應用程式體驗後，使觀眾增長率提高，如：Angies list及Fast Company。

「Wired」雜誌有「美國數位文化指標性雜誌」之美稱（商周編輯顧問公司，2013）

Wired App是第一本採用Adobe DPS創建的互動雜誌，其前後得到數次國家雜誌卓越獎和設計獎

18

Adobe DPS數位出版解決方案

第一章 ‣緒論

第三章 ‣研究方法

第四章 ‣行動電子書的使用性原則與介面設計研究

第五章 ‣行動電子書的互動體驗與情感設計研究

第六章 ‣行動電子書的互動介面模式與視覺化研究

第七章 ‣討論與結論

行動電子書互動介面設計研究

19

20

2

3

4

1 行動電子書探討

人機互動介面設計

介面使用性研究

文獻小結

21

平板電腦+APP 行動電子書

1. 點擊(Tap)2. 雙擊(Double tap)3. 輕彈(Flick)

4. 拖拉(Drag)5. 收合(Pinch)6. 展開(Spread)

Tap Double tap Flick

Drag Pinch Spread

動作模式：參考Tidwell(2006)與 Nei2012)所提之介面「動詞」的概念，從Adobe DPS互動覆蓋的「音訊與影片覆蓋」功能中摘取並重新命名而來，此模式會在第一時間支持使用者的行為。

導覽模式：參考Toxboe(2013)的使用者介面設計資料庫（User Interface Design Pattern Library）所提之「說明流程」概念，從Adobe DPS互動覆蓋的「超連結覆蓋」功能中摘取而來，此模式會支持一系列的資料行為。

旋轉式頁面模式：參考Adobe DPS互動覆蓋的「影像順序覆蓋」功能中摘取而來，旋轉式頁面會支持一系或更多的項目瀏覽功能。

23

24

• 是指一種動作觸發器，並允許使用者遞交資訊或促使一個狀態的改變；動作(Action)動作(Action)

• 是一種提供順序性提示來導引用戶深入閱讀內容，主要是用來呈現產品或服務的特色；導覽(Tour)導覽(Tour)

• 用來顯示需要詳細顯示的一組或類似的圖文內容；

幻燈片顯示(Slideshow)幻燈片顯示(Slideshow)

• 用來呈現一組可供選取的圖片；旋轉式頁面(Carousel)旋轉式頁面(Carousel)

• 當頁面上的資訊超出觀看窗時，可透過捲動來取得資訊。捲軸(Scroll)捲軸(Scroll)

Desmet & Hekkert (2007) 產品體驗的三個架構美學層次 意義層次 情感層次

Khalid 與Helander (2004)產品設計的三種情感需求

整體屬性 造型設計 功能設計

Norman(2004) 情緖三層次本能層次 行為層次 反思層次

Jordan(2000) 消費者需求層次理論功能性 使用性 愉悅性

25

項目 第一層次的設計 第二層次的設計 第三層次的設計1 視覺設計 使用的操作 文化2 編排設計 使用的樂趣 個人滿意度3 按鈕設計 使用的效用 回憶

26

本研究透過各個專家學者對情感設計的觀點，由Norman（2004）的觀點為主，整理出適用於行動電子書之情感設計的三層次評估原則 第一層次以視覺傳達設計為主，指對產品的第一眼感受； 第二層次以操作設計，指在操作產品時的情感投射； 第三層次以自我意識為主，指操作完成後之深層的感受。

先期注意變數：某些視覺特點運作在先期注意，可在使用者可以注意之前就開始傳遞資訊。

Treisman（1985）提出先期注意處理程序(preattentive processing)需要集中任何的注意力即可快速完成、毫不費力且平行地展示於畫面上。

27

物件可視性(object visibility)要表現的就是操作意圖和實際操作之間的匹配(Norman, 2002)，包括：提示和按鈕。

視覺呈現指示數據通常呈現給用戶鑑於有限的顯示區域（Spence, 2007），包括：素材、頁面配置和效果。

資料應該被過濾、組織、瞄準細節後傳遞並顯示給予使用者，並有效應用視覺化之「可視性」與「視覺呈現」於互動介面設計模式上來吸引使用者開啟感興趣點，進而引導使用者深入感興趣點。

本研究歸納出5項行動電子書的視覺化元素：提示（prompt）、按鈕（button）、素材（material）、頁面配置（layout）和效果（effect）。

28

29

30

本文依三大面向：使用性、情感設計、視覺化，探討產品使用性評估方法與使用，再運用介面情感設計之理論與導入視覺化來探究行動電子書互動介面設計，並設計三個研究課題來進行實驗與實務上的分析討論。

31

第一章 ‣緒論

第二章 ‣文獻探討

第四章 ‣行動電子書的使用性原則與介面設計研究

第五章 ‣行動電子書的互動體驗與情感設計研究

第六章 ‣行動電子書的互動介面模式與視覺化研究

第七章 ‣討論與結論

行動電子書互動介面設計研究

32

本研究為理解行動電子書設計之介面傳達理念與使用者認知，藉由實驗來探究多點觸控螢幕裝置之使用者對行動電子書的操作介面行為與使用性原則之影響

研究方法： 使用者測試與問卷調查：針對使用者進行任務測試與問卷調

查，評估使用者在iPad上使用GQ電子書的使用性問題 個別深度訪談：再次藉由擁有觸控螢幕設備的深度使用者進

行深度訪談，檢驗結果並進行討論建議。研究對象與內容： 邀請30人參與使用性測試和問卷調查 邀請3人參與個別深度訪談 參與者是台中科技大學商業設計系學生以及台中中華聯網寬

頻的員工。 研究內容－GQ App

33

34

介面行為• 以明確的方式來表達輸入/輸出行為(ANDRÉ, 2000)• 直覺的互動操作行為，可協助使用者完成任務達成目標• 使用者測試→調查使用者的操作行為與認知

設計原則

• 起源於綜合各種理論為基礎的知識、經驗和常識(Preece et al., 2002)

• 指引使用者，並用來評估系統或使用者介面以提供友善的介面模式

• 問卷調查→評估使用性原則

先前使用經驗

• 是指在與一個新產品互動之前的知識(Britton, Setchi, & Marsh, 2013)

• 先前使用經驗影響使用者對該產品的觀感及行為• 多點觸控螢幕裝置之使用者→實際體驗

研究問題一（Q1）：使用者對於行動電子書之介面行為的操作與先前使用經驗有關；

研究問題二（Q2）：使用者對於行動電子書之設計原則的評價與先前使用經驗有關。

35

調查行動電子書的互動設計及共同應用技巧與介面操作特色，針對行動電子書的互動設計應用進行探討，並分析行動電子書操作介面的互動體驗，找出互動體驗與情感設計的關鍵

研究方法： 使用者測試與問卷調查：以使用者測試為主要實驗，待使用

者執行完典型工作後，進行開放性問題與滿意度調查 紮根理論法：藉由紮根理論法分析實驗的資料，以歸納出未

來在行動電子書上建立情感向度的元素因子與關鍵使用者基本資料 15位男性、 15位女性 平均年齡 30.27

36

第一題詢問關使用者對ELLE App的第一眼感受，第二題詢問使用者在使用中的感受，第三題詢問使用者使用後的感受

1. 從設計的角度來看，請問看您喜歡ELLE App的設計嗎?2. 請問當您在進行操作測試時，ELLE App帶給您什麼感受

呢?3. 請問當您完成操作測試時，ELLE App帶給您什麼真實價

值與深度感受呢?

37

討論行動電子書互動介面設計模式如何有效運用視覺化來提供適切的視覺引導，讓使用者容易上手，進而提昇使用者滿意度。

研究方法： 焦點團體訪談法：運用焦點團體訪談法（Focus Group）蒐集視覺

化對行動電子書互動介面設計模式的影響 口語分析與心智圖：將訪談所得結果透過口語分析（Protocol

analysis）將所得結果以心智圖（Mind map）具體化成一個中心概念解析行動電子書上有關視覺化的應用

實驗對象與工具 邀請4位男性及3位女性具有互動設計背景人員，共計7位參與討論 訪談成員為20-30歲且具有iOS系統產品（如iPhone、iPad等）之

使用經驗者 以GQ iPad版雜誌為本研究樣本。 提供一台Apple iPad mini 2，尺寸為5.3吋，並預先從App Store下

載2013年12月份GQ雜誌中文版，

38

本研究參考Shneiderman（1996）提出的視覺化資訊檢索真言（Visual Information Seeking Mantra）： 一、先有整體輪廓（overview）； 二、可以放大檢視（zoom）與過濾（filter）； 三、接著再依照個別需求處理細節（details-on-demand）

1. 問題一主要討論行動電子書先期注意變數，以獲得行動電子書先期引起注意的視覺特點；

2. 問題二主要討論電子書介面設計模式如何引人入勝，以得出按鈕與提示的建議；

3. 問題三主要討論電子書介面設計模式，如何讓使用者深入操作以找出影響使用者操作的視覺化要件。

39

第一章 ‣緒論

第二章 ‣文獻探討

第三章 ‣研究方法

第五章 ‣行動電子書的互動體驗與情感設計研究

第六章 ‣行動電子書的互動介面模式與視覺化研究

第七章 ‣討論與結論

行動電子書互動介面設計研究

40

介面行為分析

介面行為分析

設計原則分析

設計原則分析

先前使用經驗分析先前使用經驗分析

41

多點觸控持有者（群組A）可以在第一次使用行動電子書時，更容易進行閱讀和介面操作，主要是由於有經驗的使用者較熟悉多點觸控設備的操作。

無論是多點觸控持有者（群組A）或非多點觸控持有者（群組B）皆較不知道如何啟動特殊功能：導覽工具、選單和捲軸，大部分的參與者都需要研究者從旁協助方能完成此典型工作

顯而易見地，容易操作是在互動設計中最重要的元素

42

本文採用SPSS分析問卷調查之使用者對行動電子書設計原則的評價結果，並進一步討論多點觸控持有者（群組A）與非多點觸控持有者（群組B）之間的差異化

43

群組B參與者普遍認為GQ on iPad的設計具有符合閱讀的色彩配置。

44

原則 介面屬性 最小值 最大值 平圴數(M) 標準差(SD) t 顯著性(p)A B A B A B A B

可視 資訊呈現簡潔 2 4 7 7 5.52 a 5.80 1.194 1.095 -.484 .632功能提示一目瞭然 1 3 7 7 4.44 5.20 1.474 1.789 -1.019 .317明顯的按鈕辨識 1 4 7 6 4.40 5.20 1.500 1.095 -1.127 .269符合閱讀的色彩配置 4 6 7 7 5.52a 6.40 a 1.122 .548 -2.648 .021c

容易 容易使用 1 4 7 7 4.72 5.00 1.745 1.225 -.340 .736容易閱讀 2 4 7 7 5.04 5.40 1.594 1.140 -.478 .636容易理解 2 4 7 7 4.84 5.00 1.599 1.414 -.208 .837容易回復 1 4 7 7 4.40 5.20 1.756 1.304 -.961 .345

有效 流暢的操作 1 2 7 7 3.96b 4.00 b 1.947 2.000 -.042 .967符合使用者操作心理認知 1 3 7 7 4.40 4.80 1.708 1.483 -.487 .630一致化的操作程序 1 2 7 7 4.64 4.80 1.655 1.924 -.193 .849方便操作記憶 1 2 7 7 4.40 4.80 1.826 1.924 -.444 .661

享受 按鈕圖示設計 2 4 7 7 4.84 5.60 1.405 1.140 -1.132 .267整體視覺呈現 3 5 7 7 5.44 5.80 1.356 837 -.567 .575內容豐富度 3 4 7 7 5.20 5.80 1.190 1.304 -1.015 .319操作趣味性 1 4 7 7 4.36 5.40 1.604 1.140 -1.373 .181

美學：適切的圖像設計、排版模式、符號、架構能增添電子書的內容並讓使用者在閱讀的同時擁有愉快的視覺享受；

成就感：先前的操作經驗、閱讀經驗皆能讓使用者在操作時容易上手，並減少錯誤率產生，隨即讓使用者擁有成就感；

介面友善：與之前經驗相似的操作行為習慣，可以減少錯誤率並讓使用者容易學習、容易操作。

45

研究問題一（Q1）：使用者對於行動電子書之介面行為的操作及認知與先前使用經驗有關。

46

• 應提供操作指南，提供新手使用者在閱讀電子書前觀看

任務一瀏覽GQ on iPad：有App操作經驗的人能快速進入狀況任務一瀏覽GQ on iPad：有App操作經驗的人能快速進入狀況

• 應提供開啟檢索工具提示，讓使用者可以透過檢索工具與主題內容超連結

任務二使用檢索工具：沒有書報攤操作經驗的人較無法立即反應任務二使用檢索工具：沒有書報攤操作經驗的人較無法立即反應

• 建議在行動電子書設計上應明顯區分影片模式與圖片模式

任務三觀賞影片：使用者已經習慣這樣的影片操作行為任務三觀賞影片：使用者已經習慣這樣的影片操作行為

• 宜採用一致性的選單，讓使用者快速找到選單不用花時間在尋找按鈕

任務四切換選單：使用者已經習慣這樣的選單操作行為任務四切換選單：使用者已經習慣這樣的選單操作行為

• 應提供醒目的捲軸符號與預示性的圖形化介面，並設計簡淺易懂的操作圖示

任務五閱讀捲軸內容：使用者已經習慣這樣的捲軸操作行為任務五閱讀捲軸內容：使用者已經習慣這樣的捲軸操作行為

研究問題二（Q2）：使用者對於行動電子書之設計原則的評價與先前使用經驗有關。

47

可視：• 大部份的互動元件可以被立即判

斷的出來• 使用者對可視原則的評價與使用

者本身的認知有關

可視：• 大部份的互動元件可以被立即判

斷的出來• 使用者對可視原則的評價與使用

者本身的認知有關

容易：• 電子書提供多元的互動功能與之

前的經驗相關• 使用者對容易原則的評價與先前

使用經驗有關聯。

容易：• 電子書提供多元的互動功能與之

前的經驗相關• 使用者對容易原則的評價與先前

使用經驗有關聯。

有效：• 先前的經驗是可以快速幫助自己

獲得想要的資訊• 使用者對有效原則的評價與先前

使用經驗有關聯

有效：• 先前的經驗是可以快速幫助自己

獲得想要的資訊• 使用者對有效原則的評價與先前

使用經驗有關聯

享受：• 先前的經驗會降低錯誤率，當錯

誤減少使用者滿意度即提昇• 使用者對享受原則的評價與先前

使用經驗有關聯。

享受：• 先前的經驗會降低錯誤率，當錯

誤減少使用者滿意度即提昇• 使用者對享受原則的評價與先前

使用經驗有關聯。

• 使用者對行動電子書的互動介面行為與先前使用經驗有相關• 使用者如何開啟探索行動電子書與先前操作經驗有直接相關，而對於介面

所提供的互動方式已深入使用者的記憶中，使用者也習慣這樣的通用介面操作行為

使用性測試分析結果發現使用性測試分析結果發現

• 使用者對可視原則的評價與使用者本身的認知有關，而與先前使用經驗無關聯

• 使用者對容易、有效與享受原則的評價與先前使用經驗有關聯

問卷調查分析結果發現問卷調查分析結果發現

• 逐一萃取出與可視、容易、有效與享受原則具有高相關性與價值性之內容• 最後推論出影響使用者操作的重要關鍵為美學、成就感與介面友善

深度訪談分析結果發現深度訪談分析結果發現

48

第一章 ‣緒論

第二章 ‣文獻探討

第三章 ‣研究方法

第四章 ‣行動電子書的使用性原則與介面設計研究

第六章 ‣行動電子書的互動介面模式與視覺化研究

第七章 ‣討論與結論

行動電子書互動介面設計研究

49

本研究將30位使用者問卷依Norman（2004）之情感設計的三層次所對應之三個問題結果分別進行開放性編碼，並透過系統化的程序將文字內容的觀點與意義逐步揭露出來

50

開放性問題一

• 強調使用者對產品的第一眼感受

• 共計有85個譯碼，並彙整出16個開放性編碼

開放性問題二

• 強調使用者在使用中的感受

• 共計有67個譯碼，並彙整出21個開放性編碼

開放性問題三

• 強調使用者使用後的感受

• 共計有41個譯碼，並彙整出16個開放性編碼

本研究依其關連性彙整各個主軸編碼的結構，將實驗編碼所得的共53個譯碼進行分類，形成13個次範疇，然後將其歸納形成五個主要範疇

51

五大範疇

視覺效果

設計模式

操作模式

互動體驗

價值暨滿意度

選定「價值暨滿意度」作為核心範疇（central category）來聯繫其它範疇概念，並依據節點概念之間的關係形成鍵結（Link）與故事線（story line） 「視覺效果」是吸引注意與產生

愉悅感最重要的關鍵因子。 「操作提示」、「按鈕辨識度」、

「操作認知」與「操作適應性」因素，可以讓使用者可以更簡單的使用行動電子書，並沉浸在閱讀的喜悅中。

「操作流暢度」可以讓使用者在閱讀時「接收更資訊」，以提昇滿意度並產生價值。 52

在行動電子書上有關情感設計要件為：

53

一、使用豐富的視覺效果來吸引使用者；

二、使用適當的設計模式來引導用戶；

三、使用直覺的操作模式，來提供友善的介面；

四、提供有趣的互動體驗來增加使用量；

五、強化價值暨滿意度以建立愉悅感。

總結在行動電子書上有關情感設計要件如下：

54

• 行動電子書皆提供豐富的視覺效果來引起消費者的注意• 透過編輯設計提供更舒適的閱讀享受• 提供大量的多媒體元素，以閱讀更多的內容

１.本能層次１.本能層次

• 行動電子書在使用操作上，需要提供更簡單的操作方法• 簡單方便的使用方式，可以大大提高閱讀的樂趣• 多使用簡單的手勢，讓使用者可以快速獲得更豐富的內容

2.行為層次2.行為層次

• 使用者在意的是一個愉快的經驗，當使用者對於產品的使用頻率和時間增加並讓使用者感到愉悅，這是情感設計的價值

3.反思層次：3.反思層次：

第一章 ‣緒論

第二章 ‣文獻探討

第三章 ‣研究方法

第四章 ‣行動電子書的使用性原則與介面設計研究

第五章 ‣行動電子書的互動體驗與情感設計研究

第七章 ‣討論與結論

行動電子書互動介面設計研究

55

本研究將焦點團體訪談過程之錄影檔及聲音檔轉換成口語資料本研究將焦點團體訪談過程之錄影檔及聲音檔轉換成口語資料

再應用活動列表將口語進行編碼再應用活動列表將口語進行編碼

透過心智圖（Mind Map）整理出：• 一、行動電子書上先期注意的變數；• 二、引導使用者開啟感興趣點及深入興趣點

之介面視覺化的關鍵

透過心智圖（Mind Map）整理出：• 一、行動電子書上先期注意的變數；• 二、引導使用者開啟感興趣點及深入興趣點

之介面視覺化的關鍵56

本研究歸納出先期引起使用者注意的四個視覺特點：

57

本研究透過討論行動電子書5種互動介面設計模式：動作（action）、導覽（tour）、幻燈片顯示（slideshow）、旋轉式頁面（carousel）與捲軸（scroll）模式如何引導使用者開啟感興趣點及深入興趣點以找出之介面視覺化的關鍵。

將焦點團體所得之口語資料進行編碼，然後依文獻整理出5個行動電子書的視覺化元素：提示（Pr）、按鈕（Bu）、素材（Ma）、頁面配置（La）、效果（Ef）進行分類，再透過心智圖法串聯其概念。

58

動作模式主要是透過使用者熟知的播放鍵按鈕來指示動作，動作模式的視覺要件是在於「按鈕」、「素材」與「效果」

的設計應用

59

「導覽模式」主要是透過日常生活中常見的數字按鈕來導引使用者觀看內容的順序

導覽模式的視覺要件是在於「按鈕」、「素材」及「效果」的設計應用

60

「幻燈片顯示模式」主要是透過選單來切換內容，而選單上所揭露的資訊是此模式的靈魂角色

「幻燈片顯示模式」的視覺要件是在於「按鈕」的設計應用

61

「旋轉式頁面模式」經常透過頁面指示點來傳達內容的數量與位置

「旋轉式頁面模式」的視覺要件是在於「提示」與「素材」的設計應用

62

「捲軸模式」應用於大量的區域文字內「捲軸模式」的視覺要件是在於「提示」、「素材」、

「頁面配置」的設計應用

63

Q1：行動電子書互動介面設計模式，使用「色彩」來作為先期注意變數的效果優於「形狀」。

使用者通常很容易就可以識別出數字1 、2、3……，再加上運用數字符號可以明白地傳達並指示閱讀的順序

64

在行動電子書上最能引起使用者注意的視覺特點是「數字」

模式物件可視性(Object visibility) 視覺呈現(Visual presentation)

按鈕(Button)

提示(Prompt)

素材(Material)

效果(Effect)

頁面配置(Layout)

行動(Action) ● ● ●導覽(Tour) ● ● ●幻燈片顯示(Slideshow) ●

旋轉式頁面(Carousel) ● ●

捲軸(Scroll) ● ● ●

65

Q2：行動電子書互動介面設計模式之操作與物件可視性有關Q3：行動電子書互動介面設計模式之操作與視覺呈現有關

• 在影片的海報影像上加入黑色半透明的色塊，在畫面中營造出電影的氣氛

為「動作模式」營造視覺氣氛為「動作模式」營造視覺氣氛

• 有故事性照片可以導引使用者深入操作

為「導引模式」取景或創造具連續性的故事情節畫面為「導引模式」取景或創造具連續性的故事情節畫面

• 隱喻性的圖片選單可以引發使用者的興趣, 一目瞭然的圖片選單設計對不同的使用者有主觀的評價

為「幻燈片顯示模式」選單創造決定性略圖為「幻燈片顯示模式」選單創造決定性略圖

• 給予使用者清楚的總頁數量與指示位置

為「旋轉式頁面模式」提供顯而易見的頁面指示點為「旋轉式頁面模式」提供顯而易見的頁面指示點

• 善用版面視覺框架佈局，建立捲軸提示

為「捲軸模式」提供可負擔得起的方向指引為「捲軸模式」提供可負擔得起的方向指引

66

第一章 ‣緒論

第二章 ‣文獻探討

第三章 ‣研究方法

第四章 ‣行動電子書的使用性原則與介面設計研究

第五章 ‣行動電子書的互動體驗與情感設計研究

第六章 ‣行動電子書的互動介面模式與視覺化研究

行動電子書互動介面設計研究

67

本研究參考Nielsen(1993)、Norman(2002)與Yeh(2010)所提出之互動介面設計使用性原則，彙整四項使用性原則：可視、容易、有效、享受及十六項介面屬性來進行使用性測試與問卷調查，以分析行動電子書的使用性原則與介面設計。

總結在行動電子書上有關互動介面行為應高度關切之特點：1. 提供操作說明、製作基本功能操作影片；2. 提供開啟檢索工具提示；3. 明顯區分影片模式與圖片模式，提供常用的影片播放功能並放置

於使用者容易看見的位置；4. 在特定區塊內呈現一系列選單並與一般靜態內容有明顯區隔、設

計一致性的選單；5. 提供醒目的捲軸符號、設計簡淺易懂的操作圖示、提供預示性的

圖形化介面。 本研究為討論影響使用者操作的互動元素和關鍵屬性，分別從介面行

為、設計原則與先前使用經驗三個部分進行探究，最後推論出影響使用者操作的重要關鍵為「美學」、「成就感」與「介面友善」。 68

透過各個專家學者對情感設計的觀點，整理出適用於行動電子書之情感設計的三層次評估原則，第一層次以視覺傳達設計為主，指對產品的第一眼感受；第二層次以操作設計，指在操作產品時的情感投射；第三層次以自我意識為主，指操作完成後之深層的感受來評估目前市面上現有雜誌App。

本研究藉由紮根理論進行使用者測試之口語資料分析，並透過編碼得出五大範疇：視覺效果、設計模式、操作模式、互動體驗、價值暨滿意度，並以「價值和滿意度」為核心範疇，依其概念聯結一個完整的架構。

本研究歸納在行動電子書上有關情感設計要件為： 使用豐富的視覺效果來吸引使用者； 使用適當的設計模式來引導用戶； 使用直覺的操作模式，來提供友善的介面； 提供有趣的互動體驗來增加使用量； 強化價值和滿意度以建立愉悅感。 69

本研究彙整出5種常見行動電子書互動介面設計模式：動作、導覽、幻燈片顯示、旋轉式頁面與捲軸作為本實驗的依據。

以焦點團體訪談法蒐集視覺化對行動電子書互動介面設計模式的影響，找出如何吸引使用者開啟感興趣點與深入感興趣點。

本研究透過口語資料的分析與心智圖法歸納得出： 先期引起使用者注意的4個視覺特點：形狀、區域、色彩與數

字，其中最能引起使用者注意的視覺特點是「數字」。 提昇介面視覺化效果的關鍵：

1. 為「動作模式」營造視覺氣氛；2. 為「導引模式」取景或創造具連續性的故事情節畫面；3. 為「幻燈片顯示模式」選單創造決定性略圖；4. 為「旋轉式頁面模式」提供顯而易見的頁面指示點；5. 為「捲軸模式」提供可負擔得起的方向指引。

70

71

使用性

使用性原則使用性原則

情感設計情感設計

視覺化視覺化

找出吸引使用者深入感興趣點的視覺化因素為行動電子書領域整理出互動介面設計模式之建議

整合互動介面設計之多元性研究觀點：

校務研究中心/校務研究組

72

73

達成智慧生活整合性人才培育特色大學計畫總體目標

74

為使「F.教材/教具發揮之效益」達到績效指標

導入專案管理流程以控管整體教學影片進度

為加快「教學影片」作業流程

擬定知識管理統整影片作業注意事項列表

使整體計劃聚焦以發展亮點

引導各系所發揮所長結合本校特色

• 主要控管教學影片的狀態（ex. 規劃中、後製中、審查中、修改中、已完成）

• 統計各個系所課程&影片的執行狀況

專案總表專案總表

教學影片規劃流程教學影片規劃流程

拍攝與後製流程拍攝與後製流程

修改流程修改流程

針對教學影片，擬定：

75

隨時掌握各系執行狀況

• 提供知識傳承拍攝影影片注意事項拍攝影影片注意事項

• 提供知識傳承後製剪輯注意事項後製剪輯注意事項

• 提供注意細項予老師製作教材用

教材製作注意事項教材製作注意事項

針對教學影片，擬定注意事項列表知識管理：

76

加快並簡化攝製課程影片流程

77

農業農業

銷售銷售

行銷行銷

觀光觀光

為智慧生活整合性人才培育特色大學

創造完整的微型概念

整合創意、創新、創業大霖木雕

農春鎮

大潭社區台南青年創業基地BIG O2

長大夢想空間BIG O

配合各年級課程設計

78

2

1

4

3

一年級著重在基礎之養成

二年級著重在試探與分流

三年級著重在專業之養成

四年級著重在實務與驗證

培育數位媒體專業人才

黃婧華

79