基于视觉行为的手机新闻App图文布局设计研究

北京邮电大学学报(社科版) ›› 2016, Vol. 18 ›› Issue (3): 6-13.

基于视觉行为的手机新闻App图文布局设计研究

1北京邮电大学数字媒体与设计艺术学院，北京100876;2北京邮电大学网络系统与网络文化北京市
重点实验室，北京100876

收稿日期:2016-03-07 出版日期:2016-06-30
基金资助:
高等学校博士学科点专项科研基金项目(20110005110016)

Graphic Layout Design Study of Mobile News APP Based on Visual Behavior

1 School of Digital Media and Design Arts, Beijing University of Posts and Telecommunications,
Beijing 100876, China; 2 Beijing Key Laboratory of Network and Network Culture, Beijing University
of Posts and Telecommunications, Beijing 100876, China

Received:2016-03-07 Online:2016-06-30

摘要/Abstract

摘要：

通过实例总结出手机新闻App的三种基础图文布局结构，即左图右文式、左文右图式和上文下图式布局。以图文布局结构的客观评价为目的，从视觉搜索和视觉浏览规律的角度，分析了手机新闻App图文布局结构对用户阅读效率的影响。运用眼动仪对三种图文布局方案进行了实验评价与分析。通过注视轨迹、注视热点、注视点数量和搜索时间，研究不同图文布局方案下视觉浏览和视觉搜索的眼动规律。实验发现用户使用手机新闻App呈现文字导向型的视觉浏览规律，上文下图式图文布局的视觉搜索效率最高。研究结论可为手机新闻App图文布局设计提供科学的参考依据。

关键词: 图文布局, 眼动追踪, 人机交互, 用户体验, 手机新闻软件

Abstract:

By investigating, three basic graphic layout structures of mobile news App are summarized, namely the picture left and text right type, the text left and picture right type and the text above and picture below type For evaluating the graphic layout structure objectively, factors that influence the efficiency of news reading are analyzed from the perspective of visual search rules and visual browsing rules The there kinds of graphic layout schemes were empirically studied by using the eye-tracker Through watching track, hot spots, the number of watching points and search time, the rules of visual browsing and visual search in different schemes are discussed Results show that users present the text-oriented visual browsing rule; the text above and picture below type has the highest visual search efficiency The conclusions provide scientific basis for the graphic layout design of mobile news App

Key words: graphic layout, eye tracking, human-computer interaction, user experience, mobile News software

中图分类号:

刘婷1,侯文军1,2. 基于视觉行为的手机新闻App图文布局设计研究[J]. 北京邮电大学学报(社科版), 2016, 18(3): 6-13.

LIU Ting1，HOU Wen-jun1,2. Graphic Layout Design Study of Mobile News APP Based on Visual Behavior[J]. JOURNAL OF BEIJING UNIVERSITY OF POSTS AND TELECOM, 2016, 18(3): 6-13.

参考文献

［1］栗觅, 钟宁, 吕胜富. Web页面视觉搜索与浏览策略的眼动研究［J］. 北京工业大学学报, 2011, 37(5): 773-779.
［2］栗觅, 卢万譞, 吕胜富, 等. 网页信息过载时视觉搜索策略与信息加工方式的眼动研究［J］. 北京工业大学学报, 2012, 38(3): 390-395.
［3］ Melissa R B, Maura C L. Measuring search efficiency in complex visual serch tasks: global and local clutter［J］. Journal of experimental psychology, 2010, 16(3): 238-250.
［4］刘珊珊. 关于网站页面布局的最新方法研究［J］. 信息与电脑（理论版）, 2011（2）: 77.
［5］ Habuchi Y, Takeuchi H, Kitajima M. Web browsing experience and viewpoint: an eye-tracking study［Z］. Japan: AIST, 2010. http: //csjarchive.cogsci.rpi.edu/proceedings/2006/iccs/p101.pdf.
［6］宫殿坤, 郝春东, 王殿春. 字体特征与搜索方式对视觉搜索反应时的影响［J］. 心理科学, 2009, 32 (5): 1142-1145.
［7］ White S J, Johnson R L. Eye movements when reading transposed text: the importance of word-beginning letters［J］. Journal of experimental psychology: human perception and performance, 2008, 34(5): 1261-1276.
［8］黄锦标, 林善凤. 网页主体色对大学生视觉搜索影响的眼动研究［J］. 企业家天地(理论版), 2010(5): 255-256.
［9］彭兰. 眼动研究方法在新闻传播领域的应用［J］. 广播电视传播研究, 2010(12): 97-104.
［10］ Bojko A. Using eye tracking to compare web page［J］. Journal of Usability Studies, 2006. 1(3): 112-120.
［11］胡凤培, 蔡雷厉, 柴黎林, 等. 页面布局中项目位置信息提示的视觉搜索策略研究［J］, 心理科学, 2010, 33 (6): 1512-I515.
［12］石金富, 曹晓华, 王钢, 等. 网页布局对视觉搜索影响的眼动研究［J］. 人类工效学, 2008, 14(4): 1-3.
［13］王海燕, 卞婷, 薛澄岐. 基于眼动跟踪的战斗机显示界面布局的实验评估［J］. 电子机械工程, 2011, 27(6): 50-53.
［14］秦源, 侯文军. 基于眼动浏览规律的手机典型界面结构研究［J］. 北京邮电大学学报(社会科学版), 2014, 16(1): 25-30.
［15］戴均开, 葛列众. 手机原型界面的可用性评估［J］. 人类工效学, 2007, 13(2): 13-15.
［16］ Coldberg J H, Kotval X P. Computer interface evaluation using eye movements: methods and constructs［J］. International Journal of Industrial Ergonomics, 1999, 24(6): 631-645.

[1]	胡春1，韩桃2，吴洪1. 基于用户体验的高校专业网站吸引力评价研究[J]. Acta Metallurgica Sinica(English letters), 2015, 17(1): 1-10.
[2]	李铁萌1,2，侯文军1,2，陈冬庆2,3. 对移动互联网产品交互设计中控制感的研究[J]. Acta Metallurgica Sinica(English letters), 2014, 16(4): 7-11.
[3]	侯文军，秦源. 基于眼动浏览规律的手机典型界面结构研究[J]. Acta Metallurgica Sinica(English letters), 2014, 16(1): 25-30.
[4]	谢雪梅，高艳苗. 用户移动支付行为习惯成因研究[J]. Acta Metallurgica Sinica(English letters), 2013, 15(5): 33-37.
[5]	金永生，陈博. 基于网络用户体验的客户分类及行为预测[J]. Acta Metallurgica Sinica(English letters), 2013, 15(2): 39-46.
[6]	谢雪梅，李子丰. 基于量化方法的移动互联网让渡价值研究[J]. Acta Metallurgica Sinica(English letters), 2012, 14(5): 50-.
[7]	谢雪梅，李子丰. 基于量化方法的移动互联网让渡价值研究[J]. Acta Metallurgica Sinica(English letters), 2012, 14(5): 39-46.