互動式操作介面之傳達模式探索─以平板電腦介面設計為例

The Research of the Communication Pattern of Interactive Interface by Using the Example of Tablet PC.

董秀美(Hsiu-Mei Tung)

指導教授 ： 鄧成連

國立臺灣師範大學/藝術學院/設計研究所在職進修碩士班/碩士(2011年)

摘要

近年來隨著產品外觀造型設計簡約以及多點觸控技術之成熟，因而促使觸控式螢幕的廣為使用，而產品外觀之實體按鍵逐漸約化為觸控式螢幕上虛擬按鍵，對於觸控式螢幕介面設計發展產生巨大之影響，衍生為產品設計時必備規格與功能操作；因此，日益彰顯互動式介面設計之重要性。
介面中介於使用者與機器之間，形成溝通之媒介、資訊平台，將人類語言句法溝通模式轉換為人機視覺語彙之互動溝通模式；而互動式介面則是提供訊息呈現之新形式。本研究由文獻探討「擬人」對話般之介面形式，能適時洞察使用者之需求，運用視窗圖形、動態效果、音效等各式媒介，連結人與機之間的溝通。本研究運用觀察法及個案研究法，進行觀察與記錄分析與探討。案例分析即以點線面體構成介面之整體研究架構，點 ( 介面圖示 )、線 ( 各狀態列 )、面 ( 主畫面和視窗、彈跳選單 )、體 ( 人機互動 )，將介面系統性彙整、描述、分類、詮釋，以邏輯思維漸聚焦於主旨，且建構其重要關鍵知識學理，過程中建構出互動式操作介面之傳達模式。研究結論側重於視覺溝通語彙與傳達模式，介面靜態視覺表現形式及互動動態與時間傳達模式之重點與設計形式彙整 :
( 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.

並列關鍵字

Interactive Interface ； User-Centered ； Transmitting Pattern ； Usability

參考文獻

久恆啓一 ( 2002 )。圖形思考 (事半功倍的工作竅門 )( 鄭雅云譯 )。城邦文化事業股份有限公司。

王嘉麟 ( 2009 )。觸控手機活用術。電腦家庭文化事業股份有限公司。

Shneiderman, B. & Plaisant, P. ( 2010 ). Designing the user interface : strategies for effective human-computer interaction, Boston : Addison-Wesley, c2010。

山口善民 ( 2004 )。三分鐘創意思考法 (吳勝輝譯)。精典傳訊文化股份有限公司。

方裕民 ( 2003 )。人與物的對話-互動介面設計理論與實務。田園城市。