摘 要
數位行動生活來臨，使用者每天透過不同裝置與各種網站接觸享受生活，無論是上網購物或者尋找商家，或是觀看影音多媒體內容，還是與企業品牌的互動，跨裝置的使用已經是一種生活日常行為。使用者瀏覽網站的經驗已經多到不可勝數，然而卻不總是令人感到愉悅，甚至還可能感到焦慮與沮喪。因此本研究旨在如何協助引導使用者，讓使用者在跨裝置瀏覽網站時能夠有效掌握、輕鬆使用、感到愉悅有趣，並且獲得一致的良好體驗，是本研究探討的重點。
本研究經由文獻探討，歸納出「跨裝置網站設計」及「跨裝置網站互動使用性」之準則，並以國際企業網站為案例，分析並彙整網站在跨裝置使用的優缺點，最後以文獻所探討之結論與案例分析優劣之結果，實際運用創作之。
就多螢時代的網站而言必須能夠滿足使用者在跨裝置瀏覽體驗的需求。案例分析發現，企業網站案例均能符合「自適應網頁設計」：即(1) 內容適當對應呈現；(2)版面靈活自然流暢；(3)圖片彈性縮放調整；等三大特性。尤其在視埠較小的行動裝置更需要注意「行動裝置的友善性」：(1)首頁的導覽清晰簡潔；(2)站內搜尋容易；(3)輸入方式簡單方便；(4)維持內容體驗一致。等四項針對行動裝置的要求。
本創作研究發現就使用者而言，一個好的跨裝置網站必須是以使用者為中心的設計，具備良好的使用性，亦即是(1)有效；(2)高效；(3)愉悅；(4)容錯；(5)學習，並且以提升互動性為目標，則須具備(1)可視性；(2)一致性；(3)預視性；(4)對應性；(5)回饋性。才能讓使用者在跨裝置的體驗獲致一致感受愉悅。期許以使用者為中心的跨裝置網站設計，能夠帶給使用者美好一致的愉悅體驗，也能提供後續跨裝置網站創作者的參考依據。
關鍵詞：自適應網頁設計、使用者中心設計、使用性、互動性

Abstract
With the era of digital life, users get in touch with each other and enjoy their life through various kinds of devices and websites. No matter it be online shopping or finding a shop, watching a multi-media content, or interacting with a brand, the use of cross-device has become a daily behavior. Users have countless website browsing experiences. However, these experiences might not always be happy ones; some might even be worrying and frustrating. This study therefore aims to guide users to become more efficient, and making the experience easier, happier and more interesting for all when using cross-devices to browse websites.
This study has summed up the standards for “cross-device website design” and “cross-device website interaction usability”. It has also taken international enterprises’ websites as examples to analyze and synthesize the positive and negative aspects of the use of cross-device devices. Subsequently, it has applied the analysis of theories and case studies of the documents onto the making of this study.
In this multi-screen era, websites should satisfy users’ needs in cross-device browsing experiences. The analysis has found that corporate websites fit in with the three ideas of “adaptive website design”, which is (1) the synchronization of contents; (2) fluency of the website presentation; (3) the flexible adjustment of pictures’ size. Especially when the viewport has become smaller with mobile devices, it is notable to pay attention to “the friendliness of mobile devices”, including the following four principles regarding the needs for mobile devices: (1) The clean and clear presentation of the main page; (2) the search easiness in the website; (3) the convenience of input mode; (4) maintain the consistence of the content.
This study has discovered that a good cross-device website design has to focus on the user’s experience. It has to be user-friendly, which means (1) effective, (2) efficient, (3) delightful, (4) fault tolerant, (5) ability of learning. It also has to set enhancing interaction as a goal, therefore it should include (1) visibility, (2) consistence, (3) foresight, (4) coherence, (5) contribution. Such can provide users a consistent and enjoyable feeling when using cross-device websites. The cross-device website design used in this study is capable of bringing users a happy and consistent enjoyable experience. It can also serve as a reference for future cross-device website designers.
Keywords: Responsive Web Design, User-Centered Design, Interaction design, Usability

參考文獻
方裕民 (2003)。人與物的對話。臺北市：田園城市。
王璟崴 (2008)。數位典藏互動介面與體驗差異分析—以故宮3D虛擬展示與空中英語教室為例。南台科技大學資訊傳播系碩士 研究論文。
王鴻祥、翁鵲嵐、鄭玉屏、張志傑譯 (2011)。情感@設計：為什麼有些設計讓你一眼就愛上。遠流。
呂紫淇、羅淑慧譯Masaaki Komori等人 (2008) 。Essential XHTML+CSS：專業級網頁設計的關鍵法則(XHTML+CSS Design)。(呂紫淇、羅淑慧 譯)。台北。悅知。
卓耀宗譯 (2000)。設計的心理學。臺北市。遠流。
林珮雯 (2005)。電子商務網站介面設計研究－美感與使用性。國立交通大學傳播研究所碩士論文。
林欣蔚譯 (2013)。Information Architecture 100：100個網站規劃必備的知識。悅知。
徐小雅 (2010)。建構商業智慧系統使用者滿意度之評估指標。國立高雄應用科技大學資訊管理系碩士在職專班 碩士論文。
張志勇 (2013)。物聯網概論。台北。碁峰。
張亮譯 (2008)。設計好網站的黃金準則。臺北市。悅知。
莊雅晴 (2013)。文化旅遊網站之設計與使用性研究：以烏來為例。世新大學資訊傳播學研究所碩士論文。
許玉玲譯 (2008)。關鍵設計報告。臺北市：麥浩斯。
許郁文譯 (2014)。多元裝置時代的網站UI/UX設計法則。臺北市。博碩。
許雅雯 (2010)。臺灣現代劇團網站介面設計之使用性研究。商業設計學報。台北。
許瑞宋譯 (2011)。決戰第三螢幕。臺北市。天下。
郭如萍 (2006)。使用者中心設計取向之網站使用性實踐初探：意義、方法與台灣網路產業現況。國立交通大學傳播研究所碩士論文。
陳建雄譯 (2009)。互動設計：跨越人-電腦互動。新北市。全華。
陳家錡 (2011)。無障礙網頁之互動文字研究。國立台灣藝術大學多媒體動畫藝術學系碩士班碩士論文。
陳恩航 (2013)。網頁設計。台北。華視。
陳聖伯 (2013)。自適應網頁設計武功秘笈。佳魁。台北。
傅小貞、胡甲超、鄭元攏 (2014)。行動設計之鑰：打造出讓使用者一見鍾情的手機APP UI / UX設計。台北。松岡。
彭其捷、楊淑涵（2013）。那些APP好用的祕密 : 黏住使用者的魅力&UX好感度設計。台北。博碩。
黃玉君 (2000)。人力銀行網站易用性研究-以104人力銀行為例。世新大學資訊傳播學研究所)碩士論文。
黃朝秋譯 (2014)。使用者導向設計。台北。碁峰。
彭其捷、楊淑涵 (2013)。那些APP好用的秘密：黏住使用者的魅力&UX好感度設計。博碩。
楊仁和 譯 (2014)。Responsive Web Design 響應式網頁設計學習手冊。台北。歐萊禮 。
葉鴻釧（2007)。互動設計介面模式網頁應用研究-以德國BurgZiesar及國內故宮博物院為例。國立臺北科技大學創新設計研究所碩士論文。
葉謹睿 (2010)。互動設計概論。台北。藝術家。
鄒飛逯 (2011)。智慧城市給你好生活 物聯網讓萬物互聯暢通。IBM。
廖鵬文、盧康渝 (2004)。別讓我的滑鼠變自閉。新竹縣。數位人資訊。
劉至逢 (2009)。大學圖書館網站使用性評估之探討。國立臺灣師範大學圖書資訊學研究所碩士論文。
鄭巧玉 譯 (2015)。Multi-Device 體驗設計：處理跨裝置使用者體驗的生態系統方法。台北。歐萊禮。
鄭巧玉譯 (2014)。微互動。台北。碁峰。
謝育容譯 (2012)。網站使用者中心策略。台北。城邦。
謝季穎譯 (2010)。UI進化論 行動裝置使用者介面設計。台北。上奇。
顏瑞瑩 (2012)。官方旅遊網站好用性研究。國立臺灣大學圖書資訊學研究所碩士論文。
魏澤群 (2007)。優使性2.0網站經驗設計與使用者研究。台北。網奕。

Alan, C., Robert, R., David, C., Christopher, N,. Jason, C., & Doug, L,.（2014）About Face: The Essentials of Interaction Design, Fourth Edition. Wiley.
Apple (2005) Apple Human Interface Guidelines。Apple 。
Saffer, D.（2010）Designing for Interaction: Creating Innovative Applications and Devices. New Riders
Saffer, D.（2014）Microinteractions: Design With Details. O’Reilly Media, Inc.,
David R. Benyon , Phil Turner & Susan Turner (2010) Designing Interactive Systems : A Comprehensive Guide to HCI and Interaction Design. Wesley Eduction Publishers Inc.
Dumas, J. S. & Redish, J. C. (1993). A Practical Guide to Usability Testing. Norwood, NJ: Ablex.
Eason, K. D. (1984) Towards the Experimental Study of Usability: Behavior and Information Technology.
Garrett, j. (2011) The elements of user experience: user-centered design for the web and beyond. New Riders
Giles Colborne (2011) Simple and Usable Web, Mobile, and Interaction Design. New Riders
Gillenwater, Zoe Mickley (2008) Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. Macmillan Computer Pub.
Gould, J. D., & Lewis, C., (1985). Designing for usability
Jakob Nielsen (1993). Usability Engineering. Boston: AP Professional.
Jarrett, C. (2001) Usability means user-centred design. Paper presented at the the 48th
Annual Confer ence of the Society for Techni cal Communication, Chicago, USA.
Jeffrey Zeldman (2003) Designing With Web Standards. New Riders。
John Cato（2011）User-centered Web Design。Addison Wesley Longman。
Jokela, T. (2001) Assessment of user-centred design processes as a basis for improvement action, An Experimental Study in Industrial Settings (Acta Universitatis Ouluensis ed.). Oulu: Oulu University Press.
Kolko , J. (2011) Thoughts on Interaction Design, Second Edition. Morgan Kaufmann
Krug, S. （2014）Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability, 3rd EditionDon't Make Me Think, Revisited: A Common Sense Approach to Web Usability。. New Riders.

Lowdermilk, T. (2013) User-Centered Design - A Developer's Guide to Building User-Friendly Applications. O'Reilly Media.
Mao, J.-Y., Vredenburg, K., Smith, P. W., & Carey, T. (2001). User-centered design methods in practice: A survey of the state of the art. Paper presented at the the 2001 conference of the Centre for Advanced Studies on Collaborative research, Toronto, Ontario, Canada.
Marc & Jakob (2012) This is Service Design Thinking: Basics, Tools, Cases. New York, NY : John Wiley & Sons, Inc.
Morville, P., Rosenfeld, L. & Arango, J. (2015) Information Architecture: For the Web and Beyond, 4e. Sebastopol, California. O’Reilly Media,Inc.,
Pearrow, M. (2000) Web Site Usability Handbook. Rochkand, MA: Charles River Media Inc.
Quesenbery, W. (2001) What Does Usability Mean: Looking Beyond ‘Ease of Use’. Chicago, Illinois, USA.
Quesenbery, W. (2004) Balancing the 5Es of usability. Cutter IT Journal.
Rubin, J. (1994) Handbook of Usability Testing: How to plan, Design, and Conduct Effective Tests. New York, NY : John Wiley & Sons, Inc.

Shneiderman, (1986) Designing the user interface.: Strategies for Effective Human-Computer Interaction. Boston: Addison -Wesley Longman.

Steve Souders (2007) High Performance Web Sites:Essential Knowledge for Front-End Engineers. O'Reilly Media
Vredenburg, K., Isensee,S., & Righi, C. (2002).User-centered Design: An Integrated Approach. Upper Saddle River, NJ: Prentice Hall PTR.

線上資料
網際網路歷史 (2015年12月28日)。取自：維基百科
https://zh.wikipedia.org/wiki/%E4%BA%92%E8%81%94%E7%BD%91%E5%8E%86%E5%8F%B2

Web 2.0 (2015年12月28日)。取自：維基百科
https://zh.wikipedia.org/wiki/Web_2.0

物聯網 (2015年12月28日)。取自：MBA智庫百科
http://wiki.mbalib.com/zh-tw/%E7%89%A9%E8%81%94%E7%BD%91

Google 2014台灣跨裝置消費者與電子商務報告 (2015年12月28日)。取自：Consumer Barometer with Google
https://www.consumerbarometer.com/en/trending/?countryCode=TW&category=TRN-NOFILTER-ALL

創市際市場研究顧問公司(2014)。2014台灣跨屏網路使用行為調查. 創市際市場研究顧問.（2015年03月07日）取自：創市際市場研究顧問公司http://www.insightxplorer.com/news/news_09_29_14.html

劉建宏(2014).經濟部正式宣布，推動台灣智慧城市建設六大重點計畫. 2014, from http://www.bnext.com.tw/article/view/id/32321

黃勤穎(2014)。人性化無縫匯流新觀賞體驗BBC iPlayer (2015年12月28日)。取自：資策會創新應用服務研究所http://www.find.org.tw/market_info.aspx?n_ID=6228

愛立信消費者行為研究室 (2015年12月28日)。愛立信2015年十大熱門消費者趨勢報告。取自：台灣愛立信
http://www.ericsson.com/tw/thinkingahead/consumerlab

Ariel(2014)。HPX58 – 多螢設計：從小螢幕(手機/平板)到大螢幕(電腦/電視)。取自： 悠識數位顧問有限公司
http://www.hpx.tw/archives/15486

以用戶為中心的設計 (2016年01月03日)。取自：維基百科
https://zh.wikipedia.org/wiki/以用户为中心的设计

David M. Hogue (2010) Interaction Design for Graphic Designers. ( 2016年03月12日)。取自：IDUX
http://www.idux.com/downloads/MAX2010_HOGUE_Interaction_Design_Principles.pdf

Luke Wroblewski (2012)。Multi-Device Layout Patterns. ( 2016年03月19日)。取自：LUKEW
http://www.lukew.com/ff/entry.asp?1514

Brad Frost (2012)。For a Future-Friendly Web. ( 2016年03月19日)。取自：bradfrost blog
http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web-webvisions-chicago-2012?from_m_app=ios

Brad Frost (2012)。Responsive Navigation Patterns.( 2016年03月19日)。取自：bradfrost blog
http://bradfrost.com/blog/web/responsive-nav-patterns/

Elaine (2012). Design for Mobile, Part 1: Information Architecture (2016年04月16日)。取自：UX BOOTH
http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/

Google (2014)。 如何打造跨螢幕網站。 Google。Retrieved Mar10, 2015, from https://www.google.com.tw/think/multiscreen/start.html

Google (2014). 行動網站設計原則：取悅使用者並提高轉換量。(2016年04月15日)。取自：Google 多螢幕網站攻略。
https://www.google.com.tw/think/multiscreen/whitepaper-sitedesign.html
Guy(2013)。Top 5 Tips for Making Fast RWD Sites. (2016年04月10日)。取自：Guy’s Pod
http://www.guypo.com/top-5-tips-for-making-fast-rwd-sites/

Google(2014)。適合行動裝置的網站-為您的使用者提供完善的行動體驗(2016年04月16日)。取自：Google Developers
https://developers.google.com/webmasters/mobile-sites/?hl=zh-tw

Jerry Cao (2015)。How Eye Scanning Impacts Visual Hierarchy In UX Design. ( 2016年03月19日)。取自：webdesignerdepot
http://www.webdesignerdepot.com/2015/03/how-eye-scanning-impacts-visual-hierarchy-in-ux-design/

Jerry Cao (2015)。6 Web Design Trends You Must Know for 2015 & 2016。( 2016年04月5日)。取自：awwwards
http://www.awwwards.com/6-web-design-trends-you-must-know-for-2015-2016.html

Nielsen, J. & Molich, R. (1990). 10 Usability Heuristics for User Interface Design. (2016年04月22日 )。取自：Nielsen Norman Group.
https://www.nngroup.com/articles/ten-usability-heuristics/

Paul(2015). Why mobile first is outdated. ( 2016年04月16日)。取自：Intercom
https://medium.com/intercom-inside/why-mobile-first-is-outdated-f10a3dc357bd#.wx7t81udy

Sandijs Ruluks (2014)。9 basic principles of responsive web design ( 2016年03月19日)。取自：FROONT
http://blog.froont.com/9-basic-principles-of-responsive-web-design/

W3C(2001)。Syntax of CSS rules in HTML's "style" attribute. ( 2016年03月20日)。取自：W3C
https://www.w3.org/TR/2001/WD-css-style-attr-20010305

Javier Perez (2014) A new wave of mobile-friendly sites. ( 2016年03月20日)。取自：Google Search blog.
https://search.googleblog.com/2014/12/a-new-wave-of-mobile-friendly-sites_10.html