簡易檢索 / 詳目顯示

研究生: 呂偉菱
Lu, Wei-Ling
論文名稱: 行動裝置使用者介面易視性創作研究-以動物認養APP為例
Studying on Visibility of Mobile Device Interface:Taking Animal Adoption Application Design as an Example
指導教授: 梁桂嘉
學位類別: 碩士
Master
系所名稱: 設計學系
Department of Design
論文出版年: 2015
畢業學年度: 103
語文別: 中文
論文頁數: 112
中文關鍵詞: 使用者介面應用程式易視性動物認養
英文關鍵詞: User Interface, Application, Visibility, Animal Adoption
論文種類: 學術論文
相關次數: 點閱:171下載:27
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報
  • 隨著4G網路時代的來臨,普及化的智慧行動裝置已成為我們生活中不可或缺的重要物件。使用者與行動裝置產生溝通之環境管道稱為使用者介面,為打造良好的人機互動體驗,讓使用者感受到操作的有效性與效率程度為介面設計基本原則。其中,系統如何透過介面有效地呈現資訊內容,而使用者又如何從中認知行動的操作辦法與理解系統狀態與回饋,即為介面易視性(Visibility)之重要性。因此,本研究試圖探究與歸納介面易視性之相關理論,進而彙整介面易視性原則,作為日後研究者與設計者後續參考,以打造優良的使用者介面。
    本研究第一階段以文獻探討法彙整專家學者對於介面易視性之相關論述,歸納影響易視性四項要素分別為「版面內容」、「文字圖形」、「色彩質感」、「系統反應」。第二階段則透過五位介面設計領域專家,篩選出十五項具有良好易視性應用程式作為案例分析,剖析各案例於易視性要素的表現型式,進而歸納四項易視性要素之細項原則。此外,研究第三階段則利用上述分析之結果,以動物認養APP作為創作實驗,並在設計歷程中重新審視並檢討易視性原則。此外,本研究於設計創作過程中發現易視性原則可能會依據不同的應用程式類型、資訊量或使用情境相互抵觸,此時設計者須做一個全面性的設計總體考量,並從中妥善衡量與運用易視性原則。

    With the coming of 4G technologies, smart mobile devices have been indispensable for users in the current generation. User Interface is a channel which bridges and facilitates the communication between users and mobile devices. In order to create a well-designed human-computer interaction, sensible efficacy and efficiency are two basic principles that should be executed along with the process of designing. Among them, the Visibility of User Interface is of the utmost importance. It is the way in which systems demonstrate information in an efficient fashion so that users can recognize instructions and also give feedback. As the result, this research aims at creating guidelines of user interface through reviewing and deep-diving into related research, thereby serving as a reference for future research to build on and explore more in-depth.
    In the first part of the research, documentary analysis is conducted to categorize elements that will affect the degree of visibility into the following four aspects: layout of contents, text and graphic, color and material and feedback. The second part chooses fifteen case studies, which are sifted through by five professionals in the interface design regime, uses four criteria mentioned above to individually evaluate the performance and therefore comes up with four sub-principles pertaining to visibility.
    In addition, the third part of the research builds on the previous result, introducing animal adoption application as an example to re-assess the principles of visibility. Standing on the finding that these principles may vary and even contradict each other according to the type of application, amount of information and usage situation, it is recommended that designers should bear each principle in mind and comprehensively examine them as a whole for the sake of a well-developed design.

    摘要 ------------------------------------------------------------------------------------------------------ I Abstract---------------------------------------------------------------------------------------------------- II 目錄 ----------------------------------------------------------------------------------------------------- III 圖目錄 ------------------------------------------------------------------------------------------------- VI 表目錄 ---------------------------------------------------------------------------------------------- IVIII 第一章、緒論 1-1研究背景 ------------------------------------------------------------------------------------------- 1 1-2研究動機與目的 ---------------------------------------------------------------------------------- 2 1-3創作研究範圍限制 ------------------------------------------------------------------------------- 3 1-4創作研究流程 ------------------------------------------------------------------------------------- 4 第二章、文獻探討 2-1使用者介面 ---------------------------------------------------------------------------------------- 5 2-1-1使用者介面定義 ------------------------------------------------------------------------ 5 2-1-2使用者介面構成 ------------------------------------------------------------------------- 6 2-1-3使用者介面分類 ------------------------------------------------------------------------ 8 2-1-4使用者介面設計原則 ----------------------------------------------------------------- 11 2-2行動裝置 ------------------------------------------------------------------------------------------ 16 2-2-1智慧型手機 ------------------------------------------------------------------------------ 16 2-2-2行動應用程式 --------------------------------------------------------------------------- 18 2-3易視性 --------------------------------------------------------------------------------------------- 20 2-3-1易視性定義 ------------------------------------------------------------------------------ 20 2-3-2易視性目標 ------------------------------------------------------------------------------ 22 2-3-3易視性要素歸納 ----------------------------------------------------------------------- 23 2-4文獻小結 ------------------------------------------------------------------------------------------ 31 第三章、研究方法與實施 3-1 研究方法與架構 ------------------------------------------------------------------------------- 33 3-2 優良易視性APP案例分析 ------------------------------------------------------------------ 34 案例一、Kickstarter APP ----------------------------------------------------------------------- 37 案例二、Cord APP ------------------------------------------------------------------------------ 39 案例三、Yahoo News digest APP ------------------------------------------------------------ 41 案例四、Uniqlo Recipe APP ------------------------------------------------------------------ 44 案例五、Yahoo Weather APP ----------------------------------------------------------------- 46 案例六、iHandy APP --------------------------------------------------------------------------- 47 案例七、方便找APP -------------------------------------------------------------------------- 49 案例八、DailyCost APP ------------------------------------------------------------------------ 51 案例九、Sketches APP ------------------------------------------------------------------------- 54 案例十、Facebook Paper APP ---------------------------------------------------------------- 56 案例十一、Shazam APP ----------------------------------------------------------------------- 58 案例十二、Sky Guide APP ------------------------------------------------------------------- 60 案例十三、Fresh Air APP --------------------------------------------------------------------- 63 案例十四、Flipboard APP --------------------------------------------------------------------- 65 案例十五、Mindly APP ----------------------------------------------------------------------- 67 3-3 研究方法小結 ---------------------------------------------------------------------------------- 71 第四章、研究創作 4-1 創作主題與方向 ------------------------------------------------------------------------------- 75 4-2 設計方法與流程 ------------------------------------------------------------------------------- 75 4-3創作限制 ------------------------------------------------------------------------------------------ 76 4-4設計創作內容 ------------------------------------------------------------------------------------ 77 4-4-1主題與概念發展 ----------------------------------------------------------------------- 77 4-4-2動物認養APP案例分析 ------------------------------------------------------------- 78 4-4-3定義目標族群 -------------------------------------------------------------------------- 84 4-4-4設定需求與功能 ----------------------------------------------------------------------- 85 4-4-5規劃框架草圖 -------------------------------------------------------------------------- 88 4-4-6視覺風格設計 --------------------------------------------------------------------------- 96 4-5 研究創作小結 --------------------------------------------------------------------------------- 102 第五章、結論與建議 5-1 研究結論 --------------------------------------------------------------------------------------- 103 5-2 研究後續建議 --------------------------------------------------------------------------------105 參考文獻 --------------------------------------------------------------------------------------------- 106

    中文文獻
    1. William H. Cushman, Daniel J. Rosenberg(1996)。產品設計的人因工程(蔡登傳、宋同正譯)。台北市:六合。(原作1991年出版)
    2. 方裕民(2003)。人與物的對話-互動介面設計理論與實務。台北市:田園。
    3. 許正妹,李傳房(2005)。電子故事書與兒童喜好之研究:人因設計的觀點。數位學習設計與管理學術研討會。
    4. 蘇文清,嚴貞,李傳房(2007)。符號學與認知心理學基礎理論於視覺設計之運用研究-以“標誌設計”為例。人文暨社會科學期刊。
    5. 林儀杰(2007)。人與物的對話-創新性產品操作介面創作。國立雲林科技大學工業設計系碩士班碩士論文。
    6. David Benyon, Phil Turner, Susan Turner (2009)。人機介面互動式系統設計(郭學武譯)。台北市:碁峰。(原作2005年出版)
    7. 游章雄,黃培華,陳彥如(2009)。使用者導向之互動設計研究。工業設計期刊第三十七卷第二期。
    8. 梁又文(2009)。友善女性之智慧型大眾運輸場域移動輔助系統。國立臺灣師範大學設計研究所碩士論文。
    9. 巫國瑋(2009)。人機互動應用於產品設計之創作研究-以MP3隨身聽為例。銘傳大學設計創作研究所碩士班碩士論文。
    10. 陳穎芃(2012)。影響民眾到公立動物收容所認養犬隻之因素探討。國立中山大學公共事務管理研究所碩士論文。
    11. 張欣雯(2011)。使用者中心之產品介面設計與研究-以手持式行動裝置設計為例。國立臺灣師範大學設計研究所碩士論文。
    12. Suzanne Ginsburg(2011)。iPhone User Experience簡單法則:好感度的iPhone使用者體驗 (洪沛然譯)。台北市:基峯。(原著2010年出版)
    13. 柳永青(2012)。友善的人機介面。科學發展期刊。
    14. 陳可欣(2012)。國際品牌的使用者圖形介面之風格研究。國立臺灣師範大學設計學系碩士論文。
    15. 李瑩(2012)。微波效應:展覽導覽型app分析與創作。國立臺灣師範大學設計學系碩士論文。
    16. 鍾采霏(2013)。智慧型手機應用程式之商業模式分析。國立政治大學商管專業學院碩士學位學程碩士學位論文。
    17. 徐華璞(2013)。中高齡者使用智慧型手機應用程式需求與介面設計之研究-以健康資訊App為例。國立台北教育大學教育學院課程與教學傳播科技研究所碩士論文。
    18. 彭其捷,楊淑涵(2013)。那些APP好用的祕密:黏住使用者的魅力&UX好感度設計。台北市:博碩。
    19. 周陟(2013)。UI 進化論:行動裝置使用者介面設計 (第三版)。台北市 : 上奇資訊。
    20. 蔡雙伃(2013)。以使用者經驗為基礎之設計與研究-糖尿病飲食紀錄日誌APP為例。國立臺灣科技大學工商業設計研究所碩士論文。
    21. Donald A. Norman (2014)。設計的心理學:人性化的產品設計如何改變世界。(第3版)(陳宜秀譯)。台北市:遠流。(原著2013年出版)
    22. 黃達鈞(2014)。高齡者電子字典介面設計研究。銘傳大學商品設計學系碩士班碩士論文。
    23. 原田秀司(2014)。多元裝置時代的網站UI/UX設計法則:打造出讓使用者完美體驗的好用介面(許郁文譯)。台北市:博碩
    24. Theresa Neil (2014)。行動介面設計模式圖鑑—以視覺範例學習有效的介面設計模式(第二版)(鄭巧玉譯)。台北市:基峯。(原著2014年出版)
    25. 傅小貞,胡甲超,鄭元攏(2014)。行動設計之鑰。台北市:松崗

    英文文獻
    1. Shneiderman, B. (1991). Touch Screen Offer Compelling Uses, IEEE Software, Vol.8, No. 2, pp.93 -94, 107.
    2. Jakob Nielsen (1995). 10 Usability Heuristics for User Interface Design. Retrieved February 20, 2015, from http://www.nngroup.com/articles/ten-usability-heuristics/.
    3. Kelvin Kam Wing Chu (2001). Users with Small Screens - Less than 640 x 480, Principles and strategies for practitioners designing universally usable sites. 

    4. Marcus, A. (2001). Babyface design for mobile device and the web. In S. J. Michael & S. Gavriel (Eds.), Human-Computer Interface Internet (HCII). Vol. 2. 514-518. Mahwah, NJ: Lawrence Erlbaum Associates.
    5. William Lidwell, Kritina Holden, Jill Butler (2010). Universal principles of design : 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design. Minnesota, USA: Rockport Publishers.
    6. Daniel Wigdor, Dennis Wixon(2011). Brave NUI World: Designing Natural User Interfaces for Touch and Gesture. San Francisco, USA: Morgan Kaufmann Publishers Inc.

    網路資料
    1. Michael Heraghty (2011). The difference between UX And usability. Retrieved Jun 17, 2015, from User Journeys Web site: http://www.userjourneys.com/blog/difference-ux-usability/.
    2. 財團法人資訊工業策進會(2014)。智慧型行動裝置普及率近7成,市場即將飽和!資策會FIND:行動族群半年增加逾100萬人、全臺滑世代破1,432萬。上網日期:2015年4月20日。網址:http://www.iii.org.tw/m/News-more.aspx?id=1475
    3. 行政院農業委員會動物保護資訊網(2014)。104年4月全國公立動物收容所收容處理情形統計表。上網日期:2015年3月20日。網址:http://animal.coa.gov.tw/html3/index_06_2.html
    4. Apple Inc (2015). IOS human interface guidelines. Retrieved May 18, from Apple official website: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/.
    5. IDC (2015). Android and iOS Squeeze the Competition, Swelling to 96.3% of the Smartphone Operating System Market for Both 4Q14 and CY14. Retrieved Apr 8, from IDC official website: http://www.idc.com/getdoc.jsp?containerId=prUS25450615

    網路圖片
    1. 圖2-3 DOS磁碟作業系統:https://zh.wikipedia.org/wiki/DOS
    2. 圖2-4 Mac OS X Yosemite:http://www.sanlook.com/osx/mac-os-x-10-10-yosemite/apple-videosu-sayesinde-os-x-yosemite-ile-degisecekleri-gorun.html
    3. 圖2-5 Microsoft Kinect:http://www.xbox.com/
    4. 圖2-6 顏色隱喻 Rise Alarm Clock:http://rise.simplebots.co/
    5. 圖2-7 材質隱喻 iBooks:http://www.apple.com/ibooks/
    6. 圖2-8 環境隱喻 Paper APP:https://www.facebook.com/paper
    7. 圖3-1 Kickstarter APP:https://www.kickstarter.com/mobile
    8. 圖3-2 Cord APP:http://cordproject.co/
    9. 圖3-3 Yahoo News Digest APP:https://us.mobile.yahoo.com/newsdigest/
    10. 圖3-4 Uniqlo Recipe APP:http://www.uniqlo.com/tw/zh/lifetools/recipe/
    11. 圖3-5 Yahoo Weather APP:https://us.mobile.yahoo.com/weather/
    12. 圖3-6 iHandy Carpenter APP:http://www.ihandysoft.com/apps.html
    13. 圖3-7 方便找APP:http://easyfind.nexti.com.tw/
    14. 圖3-8 DailyCost APP:http://dailycost.com/
    15. 圖3-9 Sketches APP:http://www.tayasui.com/tayasui/SketchesApp.html
    16. 圖3-10 Paper APP:https://www.facebook.com/paper
    17. 圖3-11 Shazam APP:http://www.shazam.com/apps
    18. 圖3-12 Sky Guide APP:http://www.fifthstarlabs.com/#sky-guide
    19. 圖3-13 Fresh Air APP:http://www.freshairweather.io/
    20. 圖3-14 Flipboard APP:https://flipboard.com/
    21. 圖3-15 Mindly APP:http://www.mindlyapp.com/
    22. 圖4-1 臺北市動物福利APP:http://www.tcapo.gov.taipei/
    23. 圖4-2 財團法人流浪動物之家基金會APP:http://www.hsapf.org.tw/
    24. 圖4-3 任你養APP:https://itunes.apple.com/us/app/ren-ni-yang/id594429947?ls=1&mt=8

    下載圖示
    QR CODE