Basic Search / Detailed Display

Author: 董秀美
Tung, Hsiu-Mei
Thesis Title: 互動式操作介面之傳達模式探索─以平板電腦介面設計為例
The Research of the Communication Pattern of Interactive Interface by Using the Example of Tablet PC.
Advisor: 鄧成連
Teng, Cheng-Lein
Degree: 碩士
Master
Department: 設計學系
Department of Design
Thesis Publication Year: 2011
Academic Year: 99
Language: 中文
Number of pages: 105
Keywords (in Chinese): 互動式介面使用者為中心傳達模式可用性
Keywords (in English): Interactive Interface, User-Centered, Transmitting Pattern, Usability
Thesis Type: Academic thesis/ dissertation
Reference times: Clicks: 451Downloads: 39
Share:
School Collection Retrieve National Library Collection Retrieve Error Report
  • 近年來隨著產品外觀造型設計簡約以及多點觸控技術之成熟,因而促使觸控式螢幕的廣為使用,而產品外觀之實體按鍵逐漸約化為觸控式螢幕上虛擬按鍵,對於觸控式螢幕介面設計發展產生巨大之影響,衍生為產品設計時必備規格與功能操作;因此,日益彰顯互動式介面設計之重要性。
    介面中介於使用者與機器之間,形成溝通之媒介、資訊平台,將人類語言句法溝通模式轉換為人機視覺語彙之互動溝通模式;而互動式介面則是提供訊息呈現之新形式。本研究由文獻探討「擬人」對話般之介面形式,能適時洞察使用者之需求,運用視窗圖形、動態效果、音效等各式媒介,連結人與機之間的溝通。本研究運用觀察法及個案研究法,進行觀察與記錄分析與探討。案例分析即以點線面體構成介面之整體研究架構,點 ( 介面圖示 )、線 ( 各狀態列 )、面 ( 主畫面和視窗、彈跳選單 )、體 ( 人機互動 ),將介面系統性彙整、描述、分類、詮釋,以邏輯思維漸聚焦於主旨,且建構其重要關鍵知識學理,過程中建構出互動式操作介面之傳達模式。研究結論側重於視覺溝通語彙與傳達模式,介面靜態視覺表現形式及互動動態與時間傳達模式之重點與設計形式彙整 :
    ( 1 ) 介面視覺表現形式,在圖像介面設計運用平面設計之圓角、陰影、頂部反光等設計形式,藉以突顯圖形介面的“質感及視覺效果”,而運用光影產生立體感、色彩的分類明辨易讀性、隱喻意涵、視覺一致性、寫實、圖形特徵、分類標籤、半透明效果、情境氛圍營造等彙集為視覺表現形式。
    ( 2 ) 互動動態與時間之傳達模式,則以動態之放大、變暗、變換底色、翻頁、抖動、光暈、彈出、跳接、按鍵短壓與長壓等動態效果,以及擬真音效、三維空間等傳達模式;而對於重要的問答之彈跳視窗則運用亮暗聚光於焦點,讓視覺呈現有助於使用者注意力集中於對話窗。藉由上述介面設計形式有效傳遞訊息並感受中介於人機不同世界之溝通與對話,以生趣味且豐富其使用情境氛圍。另本研究之介面實務創作,則運用研究結果於介面設計朝現代感風格並以使用者為中心、以快速建立直覺式心智模型為準則,以創造使用者易學易記易用之愉悅的使用經驗和氛圍為最終目標。
    本研究探討透過介面研究之結果以建構互動介面設計體系與互動式操作介面傳達模型,並運用研究結果於互動式介面實務創作,提供產業界與介面設計工作者從事介面設計相關工作之參考依據。

    Owing to the concise design concept on the product form-factor as well as the maturity on the multi-touch technology, the touch panel is widely applied in the recent years. And, the physical button on the products are gradually reformed, improved and replaced by the virtual button on the touch panel. As a result, the interface design and development of touch panel become the most essential element as well as it’s a MUST on the specification and functionality while designing the product, gradually presenting the importance of interactive communication interface.
    The interface between the user and machine becomes the media and information platform of communication, translating the human communication pattern into the human-machine visual vocabulary interaction communication pattern. Consequently, the interactive communication interface offers the whole lot different and revolutionary way to present all messages in between. This research will discover the “personification” dialogue on the interactive communication interface which can satisfy the necessaries of user by using the media of window icon, dynamic effect, audio effect, and so on to communicate each other between the human and machine. And, this research will observe, record, analysis, and explore the interactive communication interface by applying the method of observation and the research on the individual case. The case study and analysis will focus on the whole structure which is consisted by the point, line, plane and body. By using the point (interface icon), the line (status bar), the plane (main screen, window and pop-up menu), and the body (the human-machine interaction) to integrate, describe, classify and explain the whole interface system. Yet, by using the logical thinking focus the theme and constructing based on the essential knowledge and scientific theory to sketch the transmitting pattern of interactive operation interface. And, this research majorly focuses on the key element and the design pattern integration of the visual communication vocabulary and transmitting pattern, the still visual interface display format, and the transmitting pattern of the interactive status and timeline.
    (1) The visual interface display format: Highlighting “the quality and visual effect” of graphic interface by applying the round angle, shadow, light reflection on the top of graphic design. And, the integration of applying the light to reproduce the stereoscopic effect, the color classification for easy tell and reading, the metaphor meaning, the visual consistence, real-like, graphic symbol, classified tag, semi-transparent effect, and the theme atmosphere creation is for representing the visual interface display format.
    (2) The transmitting pattern of interactive status and timeline: The transmitting pattern includes the dynamic enlarge, darken, background color change, page flip, vibrate, halo, pop-up, page shift, button short press & hold, button long press & hold, real-like sound effect, and three-dimension. And, the essential dialogue pop-up window is lightened with the dark background, visually representing the pop-up window and helping the user to pay attention on the dialogue window.
    By using the above interactive interface design to transmit and feel the communication and dialogue between the different worlds of human and machine as well as to vivid and enrich the whole environment atmosphere. Besides, the practical creation of interface on this research applies the research result on the modern stylish and user-center of interface design, rapidly building up the intuition intelligent pattern as the principle, and creating the easy-memorize-easy-operate pleasure experience and atmosphere for the user as the ultimate target.
    This research discovers the result of interface study for building up the interactive interface design system and the interactive operation interface transmitting pattern. And, applying the research result on the practical creation of interactive interface, providing the reference to this field, the interface designer and other related interface design jobs.

    摘要 i Abstract ii 謝誌 iv 目錄 v 表目錄 ix 圖目錄 x 第壹章 緒論 1 第一節、研究背景與動機 1 第二節、研究目的與目標 3 第貳章 文獻探討 4 第一節、互動式介面 4 一、互動式介面定義與理論 4 二、人機介面與人因工程理論 8 (一) 人機介面 8 (二) 人因工程 10 三、使用者介面及使用者為中心之研究 11 (一) 使用者介面 11 (二) 使用者為中心 13 第二節、操作介面設計16 一、觸控式螢幕之介面研究 16 二、操作介面與符號學 21 (一) 操作介面 21 (二) 介面與符號學 22 (三) 圖形化介面 24 三、操作介面與可用性關係 25 第三節、操作介面之傳達模式 27 一、操作介面訊息處理過程 27 二、從認知心理學角度看介面設計 28 三、視覺感知的過程 29 第四節、本章小節 31 第參章 研究方法與流 33 第一節、研究方法 33 一、 個案研究法 35 第二節、研究流程 36 一、研究架構 37 二、個案研究 38 (一) 國外互動式介面設計案例蒐集與觀察 38 (二) 介面案例之視覺表現特色分析 38 1.操作介面 ( 點 ) 39 2.狀態列 ( 線 ) 39 3.視窗、對話窗 ( 面 ) 39 4.人機互動方式分析 ( 體 ) 40 5.觸控介面之可用性分析 41 第肆章 案例分析 43 第一節、i Pad案例分析 43 一、案例背景 43 二、i Pad介面說明及圖像介面架構 43 三、觸控式圖像介面功能 44 (一) 主操作區 45 (二) 次操作區 46 四、觸控式圖像介面之視覺分析 48 (一) 視窗 48 (二) 警示選單52 (三) 操作介面圖示 52 五、觸控式圖像介面操作分析 54 (一) 使用者與觸控式介面之互動分析 54 (二) 觸控介面之可用性分析 59 六、Apple i Pad 案例小結 61 第二節、HUAWEI IDEOS S7 Tablet案例分析 62 一、案例背景 62 二、HUAWEI IDEOS S7 Tablet介面說明及圖像介面架構 63 三、觸控式圖像介面功能 64 (一) 主操作區 64 (二) 次操作區 65 四、觸控式圖像介面之視覺分析 66 (一) 視窗 66 (二) 選單 69 (三) 操作介面圖示 69 五、觸控式圖像介面操作分析 72 (一) 使用者與觸控式介面之互動分析 72 (二) 觸控介面之可用性分析 72 六、Huawei IDEO S7 Tablet 案例小結 77 第伍章 創作成果與分析 78 第一節、創作目的與動機 78 第二節、創作理念 78 第三節、創作流程 79 第四節、創作方法 80 一、創作架構與概念 80 二、主要構成元素與表現方式 81 (一) 主屏幕、主畫面 81 (二) 操作介面圖示 87 (三) 視窗 91 (四) 彈跳選單、對話窗 93 第五節、創作成果分析 95) 一、介面語彙之訊息互動評估 95 第陸章 結論與建議 97 第一節、研究結論 97 一、文獻探討結論 97 二、案例分析結論 98 三、創作結論 99 四、主要結論 99 第二節、建議與未來研究方向 102 參考文獻103

    山口善民 ( 2004 )。三分鐘創意思考法 (吳勝輝譯)。精典傳訊文化股份有限公司。
    久恆啓一 ( 2002 )。圖形思考 (事半功倍的工作竅門 )( 鄭雅云譯 )。城邦文化事業股份有限公司。
    方裕民 ( 2003 )。人與物的對話-互動介面設計理論與實務。田園城市。
    王嘉麟 ( 2009 )。觸控手機活用術。電腦家庭文化事業股份有限公司。
    王文科、王智弘 ( 2006 )。教育研究法。五南圖書出版有限公司。
    王仁華 ( 1995 )。人機語音通信。聯經出版事業公司。
    外山滋比古 ( 2010 )。這樣思考,人生就不一樣 (早知道該多好的思考整理術 )(韋杰岱譯)。究竟出版社股份有限公司。
    李青蓉、魏丕信、施郁芬、邱昭彰 ( 1998 )。人機介面設計。台北:國立空中大學。
    何秀煌 ( 1990 )。記號學導論。水牛圖書出版事業有限公司。
    林生傳 ( 2003 )。教育研究法 : 全方位的統整與分析。心理出版社。
    周陟 ( 2010 )。UI 進化論 (行動裝置使用者介面設計 )( 謝季穎譯 )。上奇資訊。
    周賢彬 ( 2010 )。動態圖像評價研究。師大書苑有限公司。
    宓哲民、顏見明、劉春山 (2008)。人機介面圖形監控。全華科技。
    馬信行 ( 1998 )。教育科學研究法。五南圖書出版有限公司。
    高新發、陳姝香 ( 2002 )。多媒體設計。全華科技圖書有限公司。
    陳俊宏、楊東民 ( 2000 )。視覺傳達設計概論。全華科技圖書股份有限公司。
    陳文龍、李雪如 ( 2004 )。搞設計 (工業設計&創意管理的24堂課 )。藍鯨出版。
    陳向明 ( 2002 )。社會科學質的研究。台北市:五南圖書出版股份有限公司。
    張紹勳 ( 2001 )。研究方法。台中市 : 滄海書局。
    張悟非、洪偉肯 ( 1999 )。視覺化概念發展在人機互動介面原型設計的探討。工業設計,第二十七卷第二期。
    葉謹睿 ( 2010 )。互動設計概論。藝術家出版社。
    葉重新 ( 2001 )。教育硏究法。臺北市 : 心理。
    詹凱盛 ( 2006 )。我的第一本蘋果書-Mac OS X Tiger 10.4。碁峯資訊股份有限公司。
    廖菀莉 ( 2007 )。電腦圖像模糊度及色彩組合與密度對記憶績效影響之研究。未出版之碩士論文,銘傳大學設計管理研究所,桃園。
    盧永毅、羅小未 ( 1997 )。工業設計史,田園城市文化事業有限公司。
    Burdek, B. ( 1947 )。工業設計 (產品造型的歷史、理論及實務 )(胡佑宗譯)。亞太圖書。
    Bordens, K. & Abbott, B.( 1998 )。研究設計與方法 (呂以榮、張子祥譯)。六合出版社。
    Benyon, D ; Turner, P. & Turner, S. ( 2009 )。人機介面 (互動式系統設計 ) ( 郭學武譯 )。臺北市 : 碁峰資訊。
    Cushman, W.&Rosenberg, D. ( 1996 )。產品設計的人因工程 (蔡登傳、宋同正譯)。六合出版社。
    Gerrig, R. & Zimbardo, P.( 2010 )。心理學。( 游恆山譯 )。五南出版社。
    Lauesen, S.( 2008 )。人機介面設計 (曾俊儒、張世敏譯 )。台灣培生教育出版股份有限公司,學貫行銷。
    Morville, P. ( 2007 )。隨意搜尋 (蔡學鏞譯)。美商歐萊禮股份有限公司。
    Moggridge, Bill ( 2008 )。關鍵設計報告 (改變過去影響未來的互動設計法則 )(許玉鈴譯 )。城邦文化麥浩斯。
    Norman, D. A. ( 2000 ).The Psychology of Everyday Things.設計心理學 ( 卓耀宗譯 )。台北市 : 遠流。
    Neuman, W. Lawrence ( 2006 )。當代社會研究法 ( 質化與量化途徑 ) ( 王佳煌、潘中道、郭俊賢、黃瑋瑩、邱怡薇譯 )。學富文化事業有限公司。
    Preece, J. ; Rogers, Y. & Sharp, H. (2006)。互動設計 ( 跨越人-電腦互動 )( 陳建雄譯 )。台北市 : 全華。
    Rodney, B. (2003)。我們都是機器人 (人機合一的大時代 ) ( 蔡承志譯 )。究竟出版社股份有限公司。
    Stanton, N. ( 2003 )。消費產品之人因工程 ( 張文德譯 )。六合出版社。
    Shneiderman, B.& Plaisant, C. ( 2005 )。人機介面設計有效的人機互動策略 ( 曾志軒譯 )。台北 : 台灣培生教育出版股份有限公司。
    Shneiderman, B. & Plaisant, C. ( 2010 )。人機介面設計 ( 賴錦慧譯 )。台北 : 台灣培生教育出版股份有限公司。
    Shneiderman, B. & Plaisant, P. ( 2010 ). Designing the user interface : strategies for effective human-computer interaction, Boston : Addison-Wesley, c2010。
    Apple Inc.(n.d.). Human-computer interface guidelines.Retrieved May 23, 2011,from http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Concep tual/MobileHIG/IconsImages/IconsImages.html
    Inspire Gate. 從Apple iPad 看設計 - 什麼樣的設計為何能行銷全球。June 20, 2011,from http://inspire.twgg.org/c/internet/apple/apple-apple-ipad-visual-design-and analysis-what-kind-of-design-can-be-marketed-around-the-world-why

    下載圖示
    QR CODE