本研究為探討使用者在不同螢幕尺寸的行動裝置上對於以大量圖像為主的介面設計之不同排版形式操作績效與偏好程度。
第一部分為觀看3.5吋螢幕介面設計，探討不同相簿與相片排列型式之主觀評價，本研究以立意抽樣方式共邀請25位設計相關背景與27位非設計相關背景之受測者 (男性26位、女性26位) 以組內實驗方式進行四種面向之主觀偏好評量，分別為易視性、易達性、美感偏好以及滿意度與愉悅度。本研究結論為：(1)於小螢幕尺寸的智慧型行動裝置上，相簿的排列型式以大張照片的顯示方式於四種面向中較條列式佳；(2)於小螢幕尺寸的智慧型行動裝置上，相簿與相片介面設計應盡量避免過多的附加資訊如相片數量、留言數、瀏覽次數等，造成使用者觀看時主觀偏好與滿意度下降；(3)照片排列的型式須注意是否與操作方向吻合。
第二部分以立意抽樣方式共邀請72位受測者 (41位設計背景與31位非設計背景之受測者；男性35位、女性37位) 以組內實驗方式進行圖片搜尋任務，並於實驗後進行主觀評估，實驗分成4吋與10.1吋兩種操作情境，自變數為欄位數量與排版型式，欄位數量為2欄位、3欄位與4欄位三個水準，排版型式為瀑布牆型式與矩陣型式兩款，因此本研究採2 (受測者背景：設計背景與非設計背景) × 3 (欄位數量：2、3與4欄位) × 2 (介面排版型式：矩陣型式與瀑布牆型式) 實驗設計，依變數為搜尋圖片之反應時間並探討NASA-TLX工作負荷評估與進行介面主觀偏好評估。實驗結果顯示：(1)由NASA-TLX之「精神負荷」校標分析中，操作小尺寸螢幕的介面明顯需要較高的精神與專注；(2)行動裝置介面設計上，由於介面空間有限，不適當的欄位分割數量除了造成操作績效表現不佳之外還會降低使用者對於介面的主觀偏好感受並增加心智負荷程度；(3)於4吋螢幕介面設計中，採用3欄位的瀑布牆設計型式能有最佳的圖片搜尋績效；而2欄位與3欄位瀑布牆型式能有較高的主觀偏好；(4)於4吋螢幕介面設計中，3欄位瀑布牆型式與2欄位矩陣型式能有較低的工作負荷感受；(5)於10.1吋螢幕中採用4欄位設計型式，矩陣與瀑布牆設計型式皆有較佳的操作績效；(6)於10.1吋螢幕介面設計中，因為介面空間較充足，因此不論採用哪種排版型式皆可，但欄位分割的數量同樣會影響操作績效與使用者的主觀偏好。

The purpose of this study is to investigate image-based user interface design of users’ performance and preference with different layout styles for mobile devices. The experiment is planned into two stages.
The first stage experiment is to investigate users’ subjective evaluation for small application interface of album layout style of mobile devices with 3.5 inch display. A total of 52 participants (25 with design background and 27 without design background) were invited for the experiment by purposive sampling method. The experiment was conducted using the within-subjects design. Participants were asked to evaluate 6 stimulations in four aspects including visibility, accessibility, aesthetic preferences, and pleasure. The results indicated that: (1) For those smart mobile devices with small screen sizes, large photo layout design was better than the list style layout. (2) The user interface design of small screen sizes should avoid showing excessive information, such as the number of photo, the number of message, and viewing frequency. These may decrease user preference and result in lower satisfaction. (3) Photos should be arranged in the direction of task operation and follow user’s visual direction. These generated results can provide guidelines for designers to design better user interfaces for future use.
In the second stage of experiment, a total of 72 participants (41 with design background and 31 without design background; 35 males and 37 females) were invited for the experiment by purposive sampling method. The experiment was also conducted using the within-subjects design. Two independent variables adopted in experiment were column numbers and layout styles. The column number of 2, 3 and 4 columns were examined. Two different layout styles were used, i.e., grid and waterfall. Therefore, this experiment is a 2 (participant background, i.e., design vs. nondesign) × 3 (column number, i.e., 2, 3, and 4 columns) × 2 (user interface layout style, i.e., grid vs. waterfall) design. Both 4 inch and 10.1 inch screen sizes were used separately in the experiment. The dependent variables were reaction time of searching target picture, NASA-TLX evaluation, and participants’ subjective preference. The results showed that: (1) In terms of the effort analysis of NASA-TLX, interacting with small screen interface requires higher efforts than interacting with large screen. (2) Since mobile device did not have enough space to display all information, inadequate column numbers may decrease users' task performance, lower their subjective preference, and increase their mental loading. (3) In the 4-inch screen size, the user interface designed with 3 columns and adopted the waterfall layout style might result in better task performance. In addition, the user interface designed with 2 or 3 columns and adopted the waterfall layout style might result in better subjective preference. (4) In the 4-inch screen size, the user interface designed with 3 columns and adopted the waterfall layout style, and the user interface designed with 2 columns and adopted the grid layout style might cause lower workload. (5) In the 10.1-inch screen size, the user interface designed with 4 columns and adopted both the waterfall and grid layout styles might result in better task performance. (6) Since the screen size of a tablet may provide more space than the screen of a smart phone, these two types of user interface layout styles can be adopted to help facilitate users' interactions. However, the number of column still have strong effects on users' task performance and their subject preference.

英文文獻
(1)Arnheim, R. (1974). Art and visual perception：A psychology of the creative eye. University of California Press, Berkeley, CA: University of California Press.
(2)Bauerly, M., & Liu, Y. (2006). Computational modeling and experientalinvestigation of effects of compositional elements on interface and design aesthetics. International Journal of Human-Computer Studies. 64, 670-682.
(3)Biederman, I., & Cooper, E. E. (1992). Size Invariance in Visual Object Priming. Journal of Experimental Psychology: Human perception and Performance, 18(1), 121-133.
(4)Botella, F., Moreno, J. P., & Peñalver, A. (2014). How efficient can be a user with a tablet versus a smartphone? Interaccion '14 Proceedings of the XV International Conference on Human Computer Interaction, 64.
(5)Ch’ ng, E., & Ngo, D. C. L. (2001). Screen design：Composing with dynamic symmetry. Displays, 22(4), 115-124.
(6)Ch’ ng, E., & Ngo, D. C. L. (2003). Screen design：a dynamic symmetry Grid based approach. Displays, 24(3), 125-135.
(7)Chen, L. C., & Huang, C. J. (2003). A study on web page layout and navigation-bar locations for product exhibition on different platforms. Proceedings of the 6th Asian Design International Conference, 14-17.
(8)Chen, C. H., Chen, S. C., Huang, Y. C., Hsiao, W. H., Wang, S. P., & Lu, M. Y. (2012). Users' Wayfinding Behavior in a Virtual Environment of Different Screen Sizes. ICIC Express Letters. 6(12), 3001-3008.
(9)Chevalier, A., & Kicka, M. (2006). Web designers and web users：Influence of the ergonomic quality of the web site on the information search. International Journal of Human-Computer Studies, 64(10), 1031-1048.
(10)Chen, C. H., & Chiang, S. Y. (2012). Effects of screen resolution and column ratio on search performance and subjective preferences. Displays, 33(1), 28-35.
(11)Crandall, J. E. (1967). Familiarity, preferences and expectancy arousal. Journal of Experimental Psychology, 73(1), 374-381.
(12)de Bruijn, D., de Mul, S., & van Oostendorp, H. (1992). The influence of screen size and text layout on the study of text. Behaviour and Information Technology, 11(2), 71-78.
(13)Elam, K. (2011). Geometry of Design. New York, NY: Princeton Architectural Press.
(14)Garrett, J. J. (2000). The Elements of User Experience: User-Centered Design for the Web. San Francisco, CA: New Riders Publishing.
(15)Guilford, J. P. & Hoepfner, R. (1971). The Analysis of Intelligence. New York: McGraw-Hill.
(16)Hanson, V. L. (2004). The user experience: Designs and adaptations. 2004 International Cross-Disciplinary Workshop on Web Accessibility (W4A), New York: ACM.
(17)Hart, S. G., & Staveland, L. E. (1988). Development of NASA-TLX (task load index): Results of empirical and theoretical research. In P. A. Hancock and N. Meshkati (Eds.) Human Mental Workload. North-Holland: Elsevier Science Publishers, 139-183.
(18)Harrell, G. D. (1986). Consumer behavior. United States: Harcourt Brace Jovanovich Publisher.
(19)Huang, D. L., Patrick Rau, P. L. & Liu, Y. (2009). Effects of font size, display resolution and task type on reading Chinese fonts from mobile devices. International Journal of Industrial Ergonomics, 39(1), 81-89.
(20)Huang, K. C., Chang, W. T., & Wei, W. L. (2010). Effects of visual field, exposure time, and size on icon search with varied delays using an LCD monitor. Journal of the Society for Information Display, 18(6), 427-433.
(21)Jordan, P. W. (1998). Human factors for pleasure in product use. Applied Ergonomics, 29(1), 25-33.
(22)Jordan, P. W. (2000). Designing Pleasurable Products: An Introduction to New Human Factors. London, England: Taylor & Francis.
(23)Jordan, P. W. (2002). Pleasure with Products: Beyond Usability. London, England: Taylor and Francis.
(24)Jones, M., Marsden, G., Mohd-Nasir, N., Boone, K., & Buchanan, G. (1999) “Improving Web interaction on small displays”, Proceedings of the WWW8 Conference, Toronto, Canada. May 11-14. 51-59.
(25)Kingery, D. & Furuta, R. (1997). Skimming electronic newspaper headlines：A study of typeface, point size, screen resolution, and monitor size. Information Processing and Management, 33(5), 685-696.
(26)Kurosu, M., & Kashimura, K. (1995). Apparent usability vs. inherent usability: experimental analysis on the determinants of the apparent usability. CHI '95 Conference Companion on Human Factors in Computing Systems. 292-293.
(27)Lasica, J. D. (2008). Civic engagement on the move: How mobile media can serve the public good. Washington, DC: The Aspen Institute.
(28)Lei, T., Yang, Y., & Zhang, Y. (2006). The Usability of Multimedia Interface Based on User’s Mental Models. Proceedings of the 16th International Conference on
(29)Artificial Reality and Telexistence-Workshops (ICAT'06), 168-173.
(30)Lin, H., Wu, F. G., & Cheng Y. Y. (2013). Legibility and visual fatigue affected by text direction, screen size and character size on color LCD e-reader. Displays, 34(1), 49-58.
(31)Lindberg, T., & Nasanen, R. (2003). The effect of icon spacing and size on the speed of icon processing in the human visual system. Displays, 24(3), 111-120.
(32)Ling, J., & van Schaik, P. (2006). The influence of font type and line length on visual search and information retrieval in web pages. International Journal of Human-Computer Studies, 64(5), 395-404.
(33)Lischke, L., Mayer, S., Wolf, K., Shirazi, A. S., & Henze, N. (2015). Subjective and Objective Effects of Tablet’s Pixel Density. CHI '15 Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems. 2769-2772.
(34)Liu, L. X., & Shen, W. I. (2003). Visual Communication (third ed.). Taipei, Taiwan: Wenfan Publisher.
(35)Lidwell, W., Holden, K., & Butler, J., (2010). Universal Principles of Design, Revised and Updated: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Quayside Pub Group.
(36)Marcus, A. (1992). Graphical Design for Electronic Documents and User Interfaces. ACM Press, New York.
(37)Marcus, A. (1997). Graphical user interfaces. In M. G. Helander, T.K. Landauer, and P. V. Prabhu. (eds.), Handbook of human–computer interaction. New York, NY: Elsevier. 423-440.
(38)Marcus, A. (2001). Babyface design for mobile devices and the Web. In M.J. Smith, and G. Salvendy. (eds.), Systems, Social and International Design Aspects of Human Computer Interaction, HCI International Conference Proceedings 2. 714-718.
(39)Maslow, A. (1970). Motivation and Personality. (Second ed.). New York: Harper & Row.
(40)Meggs, P. B. (2006). Meggs’ History of Graphic Design, 4th ed., New York: John Wiley & Sons.
(41)Michalski, R., Grobelny, J., & Karwowski, W. (2006). The effects of graphical interface design characterics on human-computer interaction task efficiency. International Journal of Industral Ergonomics, 36(11), 959-977.
(42)Müller-Brockmann, J. (1996). Grid Systems in Graphic Design: A Visual Communication Manual for Graphic Designers, Typographers and Three Dimensional Designers. Bilingual edition. Braun Publish.
(43)Näsänena, R., Ojanpää, H. (2003). Effect of image contrast and sharpness on visual search for computer icons. Displays, 24(3), 137-144.
(44)Nielsen, J. (1993). Usability Engineering. New York, NY: Morgan Kaufmann.
(45)Nielsen, J. & Loranger, H. (2008) prioritizing Web Usability, Vol. 5, Pearson Education Inc., pp.219-220.
(46)Ngo D. C. L., & Ch’ ng, E. (2005). Screen design with dynamic symmetry：A discovery. Computers in Human Behavior, 21(2), 307-322.
(47)Norman, D. A. (2002). Emotion & Design: Attractive Things Work Better. Interactions Magazine, ix (4), 36-42.
(48)Norman, D. A. (2002). The Design of Everyday Things. New York, NY: Perseus Books Group.
(49)Norman, D. A. (1983). Some Observations on Mental Models. In: Gentner, Dedre and Stevens, Albert L. (eds.). Mental Models. Hillsdale, NJ: Lawrence Erlbaum Associates.
(50)Preece, J. (1993). A guide to usability: Human factors in computing. Wokingham, UK: Addison-Wesley.
(51)Preece, J. (1994). Human-computer interaction. Addison Wesley, Wokingham.
(52)Resiel, J. F., & Shneiderman, B. (1987). Is bigger better? The effects of display size on program reading, In： Salvendy, G. (Ed.), Social, Ergonomic and Stress Aspects of Work with Computher. Elsevier, Amsterdam, 113-122.
(53)Samara, T. (2005). Making and Breaking the Grid: A Graphic Design Layout Workshop. New York. Rockport Publishers.
(54)Santa-Maria L., & Dyson, M.C. (2008). The effect of violating visual conventions of a website on user performance and disorientation. How bad can it be? Proceedings of the 26th annual ACM international conference on Design of communication, 47-54.
(55)Schrier, E., Dontcheva, M., Jacobs, C., Wade, G., & Salesin, D. (2008). Adaptive Layout for Dynamically Aggregated Documents. IUI '08 Proceedings of the 13th international conference on Intelligent user interfaces, 99-108.
(56)Shneiderman, B. (1983). Direct manipulation: a step beyond programming languages, IEEE Computer, 16(8), 57-69.
(57)Shneiderman, B. (1987). Designing the user interface: Strategies for the effective human-computer interaction. MA: Addison-Wesley.
(58)Stokes, A., Wickens, C. D., and Kite, K. (1990). Display Technology: Human Factors Concept. Warrendale, PA: Society of Automotive Engineers.
(59)Stone, D., Jarrett, C., Woodroffe, M. & Minocha, S. (2005). User interface design and evaluation. Oxford, UK: Elsevier.
(60)Sternberg, R. J., & Sternberg, K. (2009). Cognitive psychology (6th Ed.). Belmont, CA: Wadsworth, Cengage Learning.
(61)Studio 7.5., Zwick, C. & Schmitz, B. (2006). Designing for Small Screens: Mobile Phones, Smart Phones, PDAs, Pocket PCs, Navigation Systems, MP3 Players, Game Consoles. AVA Publishing SA, Switzerland.
(62)Sweeney, S., & Crestani, F. (2005). Effective search results summary size and device screen size： Is there a relationship? Information Processing and Management, 42(4), 1056-1074.
(63)Tidwell, J. (2011). Designing interfaces, 2e. CA : O'Reilly.
(64)Tractinsky, N., Cokhavi, A., Kirschenbaum, M., & Sharfi, T. (2006). Evaluation the consistency of immediate aesthetic perceptions of web pages. Int. J. Human-Computer Studies, 64, 1071-1083.
(65)Tullis, T.S. (2005). Web-based presentation of information：The top ten mistakes and why they are mistakes, Proc. HCI International 2005, Las Vegas, NV, Lawrence Erlbaum Associates.
(66)Van Schaik, P. and Ling, J. (2001). The effects of frame layout and differential background contrast on visual search performance in Web pages. Interacting with Computers, 13(5). 513-525.
(67)van Schaik, P., & Ling, J. (2003). The effects of screen ratio and order on information retrieval in web pages. Displays, 24(4-5), 187-195.
(68)van Schaik, P., & Ling, J. (2006). The effects of graphical display and screen ratio on information retrieval in web pages. Computers in Human Behavior, 22(5), 870-884.
(69)Vu, Q. D., Vu, D. V., Nguyen, H. T., Bui, P. D., Nguyen, V. H., & Nakajima, N. (2014). Adaptive Web page layout for mobile devices. Computing, Management and Telecommunications (ComManTel), 2014 International Conference, 263-268.
(70)Wurman, R. S. (1989). Information Anxiety. New York: DoubleDay.
(71)Yu, J., & Cao, S. (2013). The screen adaption strategy for mobile media based on multi-screen integration. Information Management, Innovation Management and Industrial Engineering (ICIII), 2013 6th International Conference, 3, 54-57.
 
中文文獻
(72)方裕民 (2003)。人與物的對話-互動介面設計理論與實務。台北：田園城市文化。
(73)李佳穎 (2008)。網路書店使用者介面資訊呈現與商品圖片型式對使用者體驗感受之影響。國立臺灣科技大學設計研究所碩士論文，台北市。
(74)林佳音 (2004)。視覺引導作用之設計傳達效應研究。明傳大學設計管理研究所碩士論文。
(75)陳天惠 (2006)。應用資料包絡分析模式於工作負荷之分析與改善，成功大學博士論文。
(76)陳建雄譯 (2002)。Preece, J., Rogers, Y., and Sharp, H. 著。《互動設計：跨越人─電腦互動》，台北市：全華科技。
(77)陳俊宏、楊東民 (1998)。視覺傳達設計概論。台北：全華圖書股份有限公司。
(78)陳曉儒 (2005)。從語意轉換觀點談圖像符號設計之研究。國立雲林科技大學視覺傳達設計系碩士論文。
(79)楊惟玲 (2012)。時間軸使用者介面欄位數目及資訊呈現方式之設計研究。國立臺灣科技大學設計研究所碩士論文，台北市。
(80)葉謹睿 (2010)。互動設計概論。台北：藝術家出版社。130-131。
(81)蔡仁詩 (2011)。網路地圖使用者介面之經驗與資訊呈現。國立臺灣科技大學設計研究所碩士論文，台北市。
(82)簡佑宏、陳建雄 (2005)。動態中文文字呈現方式於小螢幕閱讀之研究。設計學報，第10卷第3期。123-137。
 
網路文獻
(83)960 Grid System template. (2015). Retrived from http://www.Gridsystemgenerator.com/
(84)978 Grid System template. (2014). Retrived from http://978.gs/
(85)Andriod Developers. (2015). Retrieved from https://developer.android.com/design/style/index.html
(86)Eaton, K. (2013). WHY EVERYONE SUDDENLY LOVES THE PHABLET. Retrieved from http://www.fastcompany.com/3004641/why-everyone-suddenly-loves-phablet
(87)eBizMBA Rank. (2013). Top 15 Most Popular Social Networking Sites. Retrieved from http://www.ebizmba.com/articles/social-networking-websites
(88)eMarketer. (2014). 2 Billion Consumers Worldwide to Get Smart (phones) by 2016. Retrieved from http://www.emarketer.com/Article/2-Billion-Consumers-Worldwide-Smartphones-by-2016/1011694
(89)globalwebindex. (2013). Top global smartphone apps. Retrieved from http://blog.globalwebindex.net/Top-global-smartphone-apps
(90)International Organization for Standardization (1998). ISO 9241-11:1998, Retrieved from http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=16883
(91)IX創市際市場研究顧問(2009)。創市際月刊報告書。取自http://www.insightxplorer.com/epaper/monthly/200909.pdf
(92)Kapor, M. (1990). “A Software Design Manifesto.” Stanford University HCI Group. Retrieved from http://hci.stanford.edu/publications/bds/1-kapor.html
(93)Kozel, E. (2009). Polls：Which Grid system(s) do you use? Retrieved from http：//www.Gridsystemgenerator.com/
(94)Lomas, N. (2013). Phablets Are The New Normal. Retrieved from http://techcrunch.com/2013/01/13/phablets-are-the-new-normal/
(95)Marcotte, E. (2010). Responsive Web Design. Retrieved from http://alistapart.com/article/responsive-web-design
(96)Nations, D. (2013). What is Web 2.0? How Web 2.0 Is Defining Society. Retrieved from http://webtrends.about.com/od/web20/a/what-is-web20.htm
(97)Nielsen, J. (2012). Usability 101: Introduction to Usability. Retrieved from http://www.nngroup.com/articles/usability-101-introduction-to-usability/
(98)NPD DisplaySearch (2012)。300 ppi以上手機面板將於五年內佔有市場3成比重。取自http://www.displaysearch.com.tw/2009/NwsShow.aspx?CDE=NWS20120822103621ELE
(99)NPD DisplaySearch (2011)。平面顯示器解析度持續上升，特別是在移動裝置。取自http://www.displaysearch.com.tw/2009/NwsShow.aspx?CDE=NWS20111006101133NHY
(100)Robertson, A. (2013). Facebook users have uploaded a quarter-trillion photos since the site's launch. Retrieved from http://www.theverge.com/2013/9/17/4741332/facebook-users-have-uploaded-a-quarter-trillion-photos-since-launch
(101)The Standardized Universal Percentile Rank Questionnaire. (2013). SUPR-Q Questions. Retrieved from http://www.suprq.com/index.php
(102)陳均輔 (2012年9月12日)。臺灣民眾行動裝置應用程式使用行為與偏好調查。財團法人資訊工業策進會FIND。取自：http://www.find.org.tw/find/home.aspx?id=332&page=many
(103)莊政道 (2012)。2012觸控技術趨勢與市場分析【新聞群組】，取自http://www.materialsnet.com.tw/DocView.aspx?id=10412
(104)楊又肇 (2012)。行動裝置成為台灣地區使用重要上網工具【新聞群組】。取自http://mag.udn.com/mag/digital/printpage.jsp?f_ART_ID=386290