电子杂志的界面设计探讨 - 图文

创造沉浸式个性化阅读体验

Creating Immersive and Individual Reading Experience

——电子杂志的界面设计探讨

----- Discussion on the Interface of Digital Magazines

顾群业

内容摘要

以Flash技术为基础，集合了图片、文字、音视频、动画等多种视觉元素的电子杂志，仍将不断整合各种媒体技术，为读者创造一种沉浸式、个性化的阅读体验。本文以“媒介融合”为理论基础，通过对电子杂志界面特征的探讨，提出了引入虚拟现实技术的发展思路，并提出电子杂志界面设计的原则及建议。 Subject:

Based on the Flash technology, digital magazines with pictures, text, audio and video materials, animation, etc. never stop combining various media technology to give readers an immersive and individual reading experience. Based on the theory of “Media Convergence”, the article discusses the features of digital magazine interface and then puts forward the idea of introducing virtual reality technology. The article also puts forward principles and suggestions for the design of digital magazine interface. 关键词

电子杂志 界面设计 虚拟现实 沉浸式 阅读体验 Keywords:

Digital Magazine Interface Design Virtual Reality Immersive Reading Experience 一、相关概念的界定 1、电子杂志的概念

在微型计算机平台上运行的电子杂志，目前包含三种类型：第一种是传统杂志的数字化存储形式，如许多杂志的网络版，各种电子书，以及期刊数据库等；第二种是网站内容的杂志化包装，比如各种通过电子邮件形式发布的电子杂志等；第三种是新型的多媒体电子杂志，以Flash技术为基础，集合了图片、文字、音视频、动画等多种视觉元素，在引入虚拟现实技术后，将逐渐成为网络时代一种成熟的体验性阅读媒介1。本文所指电子杂志，侧重于第三种类型。

1. Definitions of related conceptions i) Conception of digital magazines

Digital magazines, which runs on PCs, includes three types: the first one is digital storage of traditional magazine, such as web edition of various magazines, digital books and periodical database, etc.; the second one is magazine-typed websites content, such as various digital magazines published through e-mail; the third one is new type multimedia digital magazine, based on Flash technology and combined with various visual elements like pictures, text, audio and 1

本文所指电子杂志，仅为第三种类型——多媒体电子杂志，不对其他类型和电子平台（如手机）上的具有杂志性质的数字媒体进行探讨。

The digital magazine in this article is mainly about the third type – multimedia digital magazine, and not about other magazine-typed digital media magazine on other digital platforms like mobile phone.

video materials, animation, etc. By introducing virtual reality technology, it has become a mature experimental reading medium in the internet age. The digital magazine in this article is mainly about the third one.

2、关于“界面”

有人认为只有在屏幕产品中才存在界面设计，其实这是一个片面的认识。界面也不仅仅指图形界面。本文中“界面”的概念，是指交互的载体，例如电话的按键和汽车仪表盘都是界面。电子杂志几乎整合了现在所有的媒体技术和媒介资源，强调互动性，通过各种网络进行传播，在继承传统纸质杂志优点的基础上，更加注重各种媒体技术的综合运用，因此在进行电子杂志的界面设计时，更接近于工业设计而不仅限于视觉设计，目的是创造一件产品让它能够更好的为用户服务。它需要交互设计、软件开发和产品管理等多方面的人才通力合作。设计的目标是在阅读视野范围内提供给用户一种前所未有的沉浸感，用户体验更为丰富、立体，阅读质量也得到相应提高。

ii) About “Interface”

Many people believe interface design only exists in the production with screens and it is an ex parte understanding. Interface is more than just graphic interface. The conception of “Interface” in this article refers to interactive carrier like telephone keys and car meter panels. Digital

magazine almost integrates all existing media technology and resources, focuses on interactivity and spreads through various networks. Based on inheriting the advantages of traditional

paper-magazines, it focuses on the integral application of various media technology. Therefore, the digital magazine interface designing is more like industrial design than visual design and aims to create a product that serves the user better. It needs fully cooperation of talented people

specialized in all aspects like interactive design, software development and product management. The aim of the design is to provide the user an immersive feeling within the visual field that they have never experienced before. User’s reading quality is correspondingly improved through more abundant and solid experience.

3、关于“媒介融合”

“媒介融合”的概念是由美国马萨诸塞州理工大学的浦尔教授提出的，浦尔认为“媒介融合指各种媒介呈现出多功能一体化的趋势，数码电子科技的发展是导致历来泾渭分明的传

2

播形态聚合的原因”。笔者认为，电子杂志的发展是“媒介融合”的产物。

iii) About “Media Convergence”

The conception of “Media Convergence” was put forward by Professor Ithiel De Sola Pool of MIT. He believes “Media Convergence means the multifunctional-integration trend of various media. The development of digital electronic technology is the reason for the convergence of modes which used to be entirely different.” The author believes that the development of digital magazines is the product of “Media Convergence”

二、电子杂志界面设计的特征

2. Features of digital magazine interface design 1、强调以情境构设来营造沉浸式阅读体验

根据心理学的解释，人对对象的认知和把握过程是一种“心物场”3心理运动过程，这 2

宋昭勋．新闻传播学中Convergence一词溯源及内涵．现代传播，2006(1)

Song Zhaoxun, the origin and connotation of Convergence in Journalism and Communication. Modern Media, 2006 3

心物场(psycho-physical field)是心理学流派格式塔学派代表人物考夫卡《格式塔心理学原理》一书中和同型论(isomorphism)并列的概念。考夫卡认为：世界是心物的，经验世界与物理世界不一样。人的行为环境在受环境调节的同时，以自我为核心的心理场也在运作着，它表明有机体的心理活动是一个由自我—

个“心物场”的建立要考虑如何在要素间实现动力交互作用，构建整体有效的思维模型，更为有效的促进信息传递。在电子杂志制作中，视觉要素是构成这个“心物场”的客观要素，它灵活构设综合性阅读情境，在界面视野中通过视频、声音等元素以及虚拟现实技术，以更为直观的方式让阅读者在相对短的时间内完成对文本意义的整体认知。这种糅合了诸多感官体验的阅读方式，更容易让读者感受到电子杂志的整体性特征，并获得比传统杂志更为个性化、沉浸式的阅读体验。相对于传统电子杂志来说，虚拟现实等新技术的不断引入将使读者在不经意间“沉浸”到设计者所营造的情境当中，完成阅读过程。在当今“信息时代”、“读图时代”的语境下，读者面对海量信息需要快速反应并获取所需，电子杂志所具有的多种媒体整合的特征，使电子杂志具有了不可比拟的情境营造优势，无疑更符合人们阅读的需求，成为时代的产物。

i) Emphasis on the context design to create immersive reading experience.

According to psychology, people’s cognition and understanding of objects is psycho-physical field process. To build this psycho-physical field needs to consider the following factors: how to realize the interaction of different elements, construct effective thinking modes and efficiently promote the information transmission. In the production of digital magazine, visual element is the objective element for the psycho-physical field construction. It forms an integrated reading context by adding video and audio elements and virtual reality technology to interface to help readers get a complete understanding of the context in a relatively short period and in a more direct way. Involving many sense organs, this experimental reading mode helps readers grasp the integrated feature of the digital magazine and acquire a more immersive and individual reading experience than traditional magazine. Compared with traditional digital magazine, this type of magazine continually involves new technologies like virtual reality in the designer’s situation which unwittingly immerses the readers and helps them finish the reading. In the nowadays situation of Information Age and Era of Pictures, readers needs quick reaction and acquisition towards abundant information. The digital magazine’s features of multimedia integration makes it a product of the era with incomparable advantages and better satisfaction to people’s reading requirement.

2、对多种技术手段的高度整合

新技术的不断出现使得信息传播进入了一个多种媒介融合的时代，电子杂志正是一种典型的“媒介融合”后的媒体形式。电子杂志融合了传统媒体的优势，集合了视频、音频、文字、图片、动画等表现形式。虚拟现实技术引入以后，电子杂志不仅可以提供全景式的视觉感受，而且可以充分调动人的各种感官，丰富了网络媒体传播的内容与呈现效果。同时，数据库技术、信息检索和导航技术的应用，大大提高了阅读效率，使电子杂志成为一种具有广

行为环境－地理环境等进行动力交互作用的场。建立在格式塔心理学的基础上的认知理论（cognitive theory）进一步指出：认知过程并不是个别的感知和部分的知觉，而是对含有格式塔心理学所说的形态知觉这种更大的整体的认识。

Together with isomorphism, psycho-physical field is a conception in the book The Principle of Gestalt Psychology by Kurt Koffka, representative of Gestalt Psychology School. Koffka believes the world is 心物的 and different from the experience world and physical world. While human activities are under the regulation of circumstance, psycho-physical field operates with its own core. It indicates organism psychological activities are based on an interactive field of ego - activity circumstance - geographical circumstance. The cognitive theory, which is based on Gestalt Psychology, further indicates the cognition process is not separate and partial perception, but more integrative perception involves the configuration cognition by Gestalt Psychology.

泛传播力的新型媒体。

ii) High-degree integration of various technological means

The continual emergence of new technology helps information transmission enter an era of multimedia integration and digital magazine is just such a media form. Digital magazine, with advantages of traditional media, combines different video, audio, text, picture, animation, etc. After the introduction of virtual reality technology, digital magazine could provide a panorama visual experience and activate human’s various senses to enrich content and effects of web media transmission. At the same time, the application of database technology, information searching and navigation technology greatly improves reading efficiency and makes digital magazine a new media with vast transmission power.

3、多元互动的体验性阅读空间

电子杂志内部的各种超级链接增加了阅读空间的互动性，而多种阅读终端的存在也为读者带来了丰富多元的阅读体验。平面媒体的形式与所呈现的内容都要限定于由宽度和高度决定的二维空间中，而电子杂志的阅读空间不再仅仅局限于二维空间。超级链接和检索、导航技术使电子杂志的视觉表现空间从二维拓展到多维，它的页面组织结构更加丰富。印刷杂志的阅读通常是线性流动的，但对电子杂志而言由于包含多种超级链接，用户可以点击任何感兴趣的内容进行深层次的扩展阅读。电子杂志还可有多种阅读模式，除了网络在线或文件离线阅读，也可移植至阅读器、手机及数字电视等多种个人终端实现阅读，甚至通过虚拟现实技术综合技术使读者作为主角沉浸于模拟环境中，体验到“临场感”。正如存在主义学者萨特所说：“阅读是一种被引导的创造。”电子杂志强大的跨平台互动功能可满足读者对电子杂志灵活阅读的需求，使受众能够方便地参与其中，加强了参与性和归属感。

iii）Multielemental, interactive and experiencing reading space

Various hyperlinks in the digital magazine improve the reading space’s interactivity and various reading terminals also provide readers with multielemental reading experience. The form of print media and its content are restricted by the two dimensions of width and height, but the reading spaces of digital magazines are not. The hyperlink, search and navigation technology develops the digital magazine’s visual techniques from two dimensions to three-dimensional, which page construction is more flexible. The reading of printed magazine is usually linear, while digital magazine contains many hyperlinks which help readers conduct more deep and extensive reading by clicking any content they are interested in. Besides online and offline reading, digital magazine contains many reading modes, including many personal terminals like reading device, mobile phone, digital TV, etc. Readers could even immerse themselves in the simulated environment and experience presence effect through virtual reality technology. Just as Existentialist Jean-Paul Sartre said: “Reading is a guided creation.” The powerful trans-platform interactive function of digital magazine could satisfy readers’ flexible reading requirement of digital magazine and get them involved to enhance participation and sense of belongings.

4、灵活多变的“图—底”关系

“图—底”关系是电子杂志界面设计中非常重要的一组关系。“图”在这里并不是仅仅指图片，而是指相对处于前方的、相对活跃的，或者可以操控的对象，既可以是图片、文字、视频、按钮等视觉要素，也可以是某种气味或触觉；“底”则是指背景或者其他对表现对象进行深入解释或补充的内容。在电子杂志的界面设计中，对于“图—底”关系的处理更加灵活多变，例如屏幕界面的设计中，图片的文字注释可以部分隐入背景突出表现主体，多幅主体图片在页面中依次浮动到页面主要位置点击选取阅读内容等等，这些方式增加了阅读体验的丰富性，突出体现了电子杂志对多种媒体形式整合的优势。

iv) Agile and various Figure-ground relationship

Figure-ground relationship is a very important group of relationships in digital magazine interface design. Figure refers not to pictures, but to object which is in the forefront, relatively active and easy to operate. It could be visual elements like picture, text, video, button, etc. and also some kind of smell or feeling; Ground refers to background and other content which deeply illustrate and supplementary to visual objects. In the digital magazine interface design, the process of Figure-ground relationship is more agile, for example in the design of screen interface, picture annotation blends into the background to emphasize the main subject and several pictures floats to the page centre in turn for reading, etc. These methods enhance the enrichment of reading experience and emphasize the multimedia integration advantages of digital magazine.

截图取自广州数联软件技术有限公司poco.cn平台上发行的《印象杂志》2009年1月15日刊。右上角的“请点击”图片循环播放，点击放大。

The picture is from InterPhoto published by Guangzhou Poco Software Co. Ltd. In Jan 15, 2009.the “click” pictures on the top right corner cycle and zoom in and out by clicking.

5、阅读趣味性的加强及创新。

较之纸质杂志在阅读趣味上的局限性，电子杂志在阅读形式多样性、趣味性方面更能满足读者需求。最初电子杂志的展现形式仅仅是声音、图像、动画、视频等元素的简单综合，从电子杂志制作器的设计上来看，有些图片播放效果和动画效果的设计生硬而不实用，制作者在使用制作软件局限性很大，这势必影响最终效果的呈现。而现在的电子杂志从版面设计、动画效果呈现到音、视频播放质量及其呈现形式上日渐多样，甚至可以通过虚拟现实技术实现阅读者视觉、听觉、触觉等感官的冲击和体验，不仅可再现真实存在的环境，也可以构想客观不存在或不可能出现的环境。这些无不体现了电子杂志在迎合读者阅读趣味性方面的创新和提高。

v) Intensification and creation of reading entertainment

Compared with the limitation of reading entertainment of print magazine, digital magazine better satisfies the readers’ requirement for the variety of reading modes and entertainment. At first the exhibition of digital magazine was only simple integration of elements like audio, picture, animation, video, etc. From the design of digital magazine producer, some picture playing and animation effects are stiff and unpractical. The software producer uses is greatly limited, which would influence the final presentation. But now digital magazine, from page design and animation effect to audio and video quality, exhibits diverse presentation day by day. And readers could even experience senses impact, like seeing, hearing, feeling, etc. through virtual reality technology, which could not only reproduce the real-existing environment, but also build environment than

does not exist or impossible to exist. These all represent the digital magazine’s creation and improvement to meet the reading entertainment.

三、电子杂志界面设计原则及建议

基于以上对电子杂志界面特征的分析，笔者认为电子杂志的界面设计应该遵循以下原则。

3. Principles and suggestions of digital magazine interface design

Based on the analysis of digital magazine interface features, the author believes the digital magazine interface design should follow four principles.

第一，综合运用创意手段，构设开放的阅读情境。

在制作电子杂志的时候如果能够创造出个性化的、易于读者接受的“心物场”，那么读

4

者就会更容易的感受到“整体”，不是“部分”的简单累加。杂志阅读的“整体感”产生，取决于对视觉元素的综合创意设计。在形式要为内容服务的原则指导下，技术要为创意服务，部分要为整体服务。设计时要区分视觉元素的主次，根据所要传达信息的重要程度，巧妙把握“图—底”关系，充分发挥要素在传达信息、情感和理念上的优势，同时还要利用它们引起用户阅读的兴趣。当然做电子杂志想要与众不同，就需要给自己一个明确的定位，建立自己独特的风格，不仅重视原创性的内容制作，还要灵活运用各种设计手段给读者呈现出一片别具特色的视野空间，而设计者想要创造的这一感觉被读者领悟到的时候，“心物场”的运动过程就已经通过设计手段实现。

First, Integrate means of creation and build an opening reading environment If an individual and acceptable psycho-physical field during the process of digital magazine production, then readers would easily feel the integrity, not simple accumulation of segments. The sense of integrity depends on the integrated initiative design of visual elements. Under the principle that form serves content, technique would also serve originality and segment would serve the integrity. Based on the importance of information delivery, designing needs to distinguish the priority of visual elements, cleverly grasp Figure-ground relationship, play out elements’ advantage on information delivery, emotion and ideas and at the same time all the above should be utilized to arouse readers’ interests. Of course if you want your digital magazine to be outstanding, you need to find yourself a specific position, build your own style, pay much attention to the content originality and master various designing techniques in order to present readers a visual space with special features. And when readers realize what designers intend to create, the process of psycho-physical field has already been achieved through designing techniques.

第二，整合各种媒体技术，增加表现手段的丰富性从而创造沉浸体验。

电子杂志是新的技术支撑体系下出现的新的媒体形态中比较有代表性的一种。电子杂志技术上的发展主要依靠计算机图形学、人机交互技术、人工智能、网络传输、语音输入输出等领域的技术进步。通过各种新技术的应用和整合，电子杂志在表现手法上日益丰富和充实。但技术手段只是基础，设计者还需要灵活运用艺术包括设计上的手段和技巧，使阅读者能够沉浸在阅读过程中。电子杂志区别于传统纸质杂志的一个重要特点就是互动性和沉浸性强，能使读者更快地融入。但是目前的电子杂志拥有的互动功能多是最基本的或者初级阶段的互动，譬如简单的问答。事实上，比较高阶段的互动可以直接实现对内容的参与，使读者迅速“沉浸”在设计者所营造的情境当中。虚拟现实技术所带来的临场参与感与交互能力可以使读者动态的欣赏静态的艺术作品（如绘画、雕塑等）；还可以在虚拟的音乐厅聆听音乐会；观赏再造的旅游景区等等，这样的呈现形式应用在电子杂志上，则可以给读者带来更加生动、 4

这种整体感即是由“心物场”的作用产生的。

直观的展现。除此以外，像动态追踪、力回馈、3D显示、全景模拟，甚至对味觉和触觉的模拟，各种技术的应用和整合，将为读者带来一种全新的呈现方式。

Second, Integrate all sorts of media technology and enrich the means of presentation to create immersive experience

Digital magazine is one of the representative new media types with the support of new technology. The development of digital magazine depends technologically on the advancement in the fields of computer Graphics, man-machine interaction technologies, artificial intelligence, web

transmission, speech input-output, etc. With the application and integration of various new technologies, the digital magazine’s means of presentation is increasingly abundant and enriched. But technological means just lays a foundation, designers need to apply design methods and techniques with flexibility to get readers immersed into the reading process. One of the most important features that distinguish digital magazine from traditional print magazine is its interactivity and immersion, which attracts readers’ acceptance more quickly. But most interactive functions of digital magazine are the most fundamental or preliminary interaction like simple questions. Actually, higher levels of interaction could involve readers in the content and quickly immerse readers in the context created by the designers. The instant involvement and interactive functions created by virtual reality technology could enable readers to dynamically enjoy static artistic works like painting and sculpture, etc., to enjoy a concert in a virtual odeum and to view reconstructed scenic resorts. All of the above could be applied in digital magazine to present readers with a live and direct picture. Furthermore, all sorts of technologies like dynamic tracking, force feedback, 3D display, panorama simulation and even smell and feeling simulation, could be applied and integrated to present readers a brand-new environment.

第三，合理规划视觉流程，灵活使用超级链接，为读者提供个性化阅读。 电子杂志在保留了纸媒杂志线性阅读方式为主线的前提下，又通过大量的链接让其阅读方式多元化，使原本单一的阅读行为变得丰富多样。灵活使用链接与文字提醒、各种按钮图标，都可以作为提示性符号引导读者选择最佳的阅读顺序，让读者按照自己意愿安排阅读。如果读者对某一个专题感兴趣，也可以通过链接到其它相关平台上进行更深层次的了解。这样读者获取的信息已经超出一本杂志的内容，变成以这本杂志为切入点的无限延伸开，从而满足不同读者个性化的阅读需求。目前大多数电子杂志的呈现形态仍然是模仿传统书籍的翻阅形式，所以探索新的表现形式将是电子杂志成长的生命力所在。毕竟随着技术的发展，虚拟世界已然成为另外一种真实。设计者不只是利用技术来解决视觉问题，开发新的视觉经验，更是利用新媒体去呈现人们生活中的种种处境。读者从原来的被动接受，发展成为电子杂志所营造情境的参与者，甚至可以成为内容的提供者和内容意义的再创作者。读者的主体意识将被唤醒，最大限度的实现个性化阅读。

Third, Feasibly plan the visual process, adopt hyperlink with flexibility, present readers with individual reading experience.

Digital magazine keeps the linear reading modes of print magazine and furthermore keeps reading modes various through great deal of hyperlinks, which adds abundant reading activities to the former one. Flexible links, text annotation and button icons could all be used to be indicative symbols to help readers choose the best reading sequence and arrange their reading by their own will. If readers show interest to one subject, they could conduct deeper understanding on other relative platforms through hyperlinks. By this way, readers could acquire information beyond one magazine and extend with limit from this magazine, which satisfies the individual reading requirement of different readers. Nowadays, the presentation of most digital magazines still page-flipping mode, which is a simulation of traditional books, so the search for a new presentation mode is the life-force for digital magazine development.

After all, with the technological development, virtual world has already become another reality. Designers not only utilize technology to solve the visual problems and develop new visual experience, but also to utilize new media for the presentation of people’s daily life. Rather than acceptees, readers become the participants of the environment build by digital magazine, and even become the content supplier and content meaning re-creator. Readers’ subjectivity is aroused to realize individual reading to the greatest extent.

第四，区分所传达信息的重要程度，巧妙把握“图—底”关系。一般而言，信息的重要程度按照“从上到下”“从左至右”的顺序排列，心理学认为上方和左方易重视，我们观看屏幕的时候通常是首先通观全屏，然后视线停留在某一感兴趣的点上。在设计的时候注意视觉中心的规律，画面中部容易成为视觉中心，画面中大的图形容易成为视觉中心，画面中对比较强的地方容易成为视觉中心。而当我们面对动态的、立体的设计时，就要求我们灵活运用流动激活、激活后放大、隐退等延伸图底关系的处理手段，从而获得更好的效果。因此电子杂志的界面设计需要巧妙运用心理学的研究成果，创造清晰的信息主次关系，有效地帮助读者沉浸其中。

Forth, distinguish the importance of information transmitted and cleverly grasp the Figure-ground relationship.

Generally speaking, the importance of the information usually follows the sequence of From the top down and From left to right. According to psychology, we are supposed to pay attention to the top and the left. When we look at the screen, we usually first browse the whole picture and then stay on a point interested. Emphasis should be laid on the rule of visual center during designing, for example, the center of the screen is usually the visual center, the relatively larger pictures is easy to be the visual center, places of vivid contrast in the screen is easy to be the visual center. When facing the dynamic and three-dimensional designing, we are required to utilize modifying means of Figure-ground relationship extension, like flow activation, magnification after activation, 隐退(blending), to achieve better results. Therefore, digital magazine interface design need clever application of psychological research results to create clear priority sequence and help readers be immersed.

四、结论

电子杂志作为一种“媒介融合”的新型媒体，它的优势在于技术变革所带来的发展的无限可能性。但是，无论技术如何发展，最终还是要为人的需要服务。就电子杂志来说，就是要以更为直观的方式让阅读者在相对短的时间内完成对文本意义的整体认知，从而完成感情的交流。由于媒体技术的整合，电子杂志的界面设计应该充分借鉴已有艺术形式的经验——有人认为电影是一门综合艺术，其实新型媒体的设计更为“综合”。除了电影，还应该从建筑艺术和信息设计中获取方法，创造沉浸式、互动性、个性化的新型传播媒介。

4. Conclusion

Digital magazine is a new type of media resulted from “Media Convergence”. Its advantage is the unlimited possibility for the development brought by technological innovation. But, no matter how technology develops, it should finally provide service to human beings. For digital magazine, it is supposed to help readers get a whole understanding of the context meanings in a more direct way in a relatively short time in order to achieve emotional communication. Because of the integration of media technologies, digital magazine interface design should follow the existed artistic experience – some people believe that film-making is an integrated art, so is the design of new type media. Besides film, we should find ways from architecture art and information design to create an immersive, interactive, individual new type of communication media.

顾群业，山东工艺美术学院副教授

Gu Qunye, Associate Prof. of Shandong University of Art and Design

本文来源：https://www.bwwdw.com/article/89kg.html