流动的图像商店——电子杂志设计“界面”、“竖屏”与“空间”的进路
Flowing Image Store—The Path of E-Magazines: “Interface”, “Portrait Screen”, and “Space”
DOI: 10.12677/design.2024.93388, PDF, HTML, XML, 下载: 7  浏览: 31 
作者: 陈 钲, 陈 靖:南京林业大学人文社会科学学院,江苏 南京
关键词: 电子杂志版面语言Digital Magazine Layout Language
摘要: 本文从“版面”与“界面”、“宽屏”与“竖屏”、“平面”与“空间”三个逻辑链条切入,分析杂志在内容数字化后的再定义,亦即电子杂志。电子杂志中流动的图像和文本,在新媒体逻辑下呈现出全然不同的张力和冲突。本文在重新梳理电子杂志“界面”、“竖屏”与“空间”的逻辑脉络基础上,进一步探究其在变动的时代信息结构下所面临的危机和可能的进路。
Abstract: This paper delves into the redefined concept of magazines in the digital age, namely e-magazines, by examining three logical chains: “layout” and “interface”, “widescreen” and “portrait screen”, and “plane” and “space”. The fluid images and text within e-magazines present entirely new tensions and conflicts under the logic of new media. By re-examining the logical framework of e-magazine “interface”, “portrait screen”, and “space”, this paper further explores the crises and potential paths forward faced by e-magazines in the face of a changing information structure.
文章引用:陈钲, 陈靖. 流动的图像商店——电子杂志设计“界面”、“竖屏”与“空间”的进路[J]. 设计, 2024, 9(3): 819-826. https://doi.org/10.12677/design.2024.93388

1. 引言

安东尼·加卢佐在《制造消费者》中,从词源上分析了“杂志”(magazine)与“商店”(magasin)的关系,并将杂志比喻成“流动的图像商店”,认为杂志视觉符号和心理符号在纸上象征性地流通,让“商品”走出了货架和橱窗[1]。杂志读者等同于商店顾客,他们习惯了浏览新品,在形状、颜色和布局的变动中获得对世界的景深、立体感和实质感。因此,期刊杂志具有抹不去的“消费”与“流行”烙印,它在功绩性的定期出刊中,逐渐成为人们日常生活的指南。

从1990年代消费级别互联网的出现,电子邮件和网络就为杂志出版商提供了一种分发PDF或数字PDF杂志的简单而廉价的方式[2]。有学者敏锐地嗅到了这一变化,并指出电子杂志显然不是期刊出版过程的计算机化,而是指最终产品内容的数字化[3]。虽然数字化技术的确是一个将期刊内容中的文字、图形等模拟信息用0、1两个数字加以表示和存储的过程,但传统纸媒所规训出的图像、颜色、文本和排版所组成的既有的符号系统逻辑,在数字化过程中并不能理想地投射[3]。设计美感被稀释、重新定义,平面印刷设计的视觉连续性被腐坏,可以说数字化技术所带来的“过于流动”,反而有可能使得电子杂志设计“失效”。

到如今,以手机为代表的“竖屏”媒介的兴盛,进一步重构了时代的信息方式。在从“宽屏”到“竖屏”的媒介载体形式演变中,对于电子杂志设计的理解又再次发生普遍而深刻的变化,而探究这种变化是复杂的符号学或叙事学问题,其中最基础的问题就是语图关系[4]。语图关系主要关注语言和图像之间的“相遇”方式及其叙事体系,它回应这样一个核心问题:在一个文本结构中,语言和图像是如何组织编排并参与叙事的?而我们又如何去把握语图文本的叙事语言?[5]就传统杂志而言,语言和图像是统摄与对话的关系,排版、配图等作为多义的“漂浮”,需要文本和语言的停泊与中转。而电子杂志这种新形式,将杂志图像与杂志语言的对话性张力,引入到相对独立的设计叙事中。作为“流动的图像商店”,电子杂志如何去挣脱平面印刷设计的叙事逻辑?或者说,当杂志文本被压扁成为图像、被抻长成为数据时,其实也重塑了围绕它的语图表征。

2. 电子杂志从“版面”到“界面”

新媒体的“版面”更多的是一个隐喻意义上的概念,其依托“界面”这一装置得以呈现,但却超越了传统版面的“篇幅”和“长度”概念,而呈现出流动的、变化的、不确定的特征和形式[6]。而“界面”的概念,是指交互的载体,例如电话按键或者汽车仪表盘。电子杂志几乎整合了现在所有的媒体技术和媒介资源,因此其设计的目标便是在阅读视野范围内提供给用户一种前所未有的沉浸感,用户体验更为丰富、立体。

2.1. 界面交互设计:“自我”的断裂和连续

交互性是电子杂志的鲜明特征,这并不只体现在“梦游”式的超链接。光标动效、投票点赞按钮等版面交互性所带来的“反馈”感、参与性和互动的乐趣,可以说赋予了读者更多的自由权利,在为读者带来视觉上的愉悦同时,也能够使信息在传播者和读者之间自由地双向流动,使得读者称为“信息的主宰者”。在界面交互设计中,设计师将消费者的“自我”投射为设计要素,借助具像化的感觉和意想来暗示交互的使用方式,达成一种感性工学上的需求洞察与用户共鸣[7]。列夫·玛诺维奇认为交互是新媒体的基因,它不等同于“身体层面的交互”,而是可以深入到心理认知维度,是“心理层面的填补、假设、回忆唤起和认同机制等心理行为”[4]。正如柳冠中所说,设计不仅是在造物,其实也是抒情的过程。

Figure 1. Interactive segments of the digital edition of the American “Wired” magazine

1. 美国《连线》杂志电子刊交互元素切片

目前而言,电子杂志的整体界面交互风格主要趋向于凛冽干脆,着重对具体的功能性要素的展示。美国《连线》杂志电子刊的登陆、订阅、评论、收藏、播放、Newsletter等交互元素,都采用了业内较为统一的设计语言(见图1),在降低认知负荷的同时,也提供了功能主义意涵上的“器官”,共同构成电子杂志的身体。而也正是这样的交互装置,将用户的感知切割成“零部件”,再依循杂志本身的风格旨归重新组装,创造出连续、不自觉的交互体验。换言之,读者断裂的“自我”在电子杂志的交互装置中囤积,形成了连续的“自我”投射,也正是这样的再解构过程,成就了电子杂志相较于平面印刷物的独特呼吸感,进而更令读者热衷阅读。

2.2. 风格元素设计:整体性“心物场”的重构

人对对象的认知和把握过程,也可以理解为是一种“心物场”心理运动过程[6]。在电子杂志的设计中,视觉要素是构成这个“心物场”的客观要素,它灵活构设综合性阅读情境,更容易让读者感受到电子杂志的整体性特征。个性化、沉浸式的“心物场”,不是“部分”的简单累加,而是对视觉元素的“整体”性综合创意设计[6]。因此,对于电子杂志“整体感”的营造,取决于设计时的视觉元素的主次区分,根据所要传达的信息巧妙把握语图关系,通过风格化的版面元素,搭成“心物场”。

版面的目的不是装饰而是解释,不是喧宾夺主,而是整体氛围场的营造[7]。相较于传统平面杂志,电子杂志具有由数字媒体赋予的动态表现特征,动画、视频、音频等动态的视觉元素,能够以类故事情节的形式生动地超越印刷媒介的设计范畴,由横向转为纵深及多元[8]。换言之,电子杂志已脱离平面出版系统,隶属于屏幕输出系统,成像原理和媒体介质全然不同。它甚至可以跨界借鉴影视中的蒙太奇手法,视听一体化中在虚拟的数字空间内节点式传播[4]。故而电子杂志的版式设计者,既要有新闻学方面的理论修养,还需懂得美的形式法则,通过文本、动线、影像、交互等,在流动的版面上重构整体性的“心物场”语言。

Figure 2. The homepage of the digital edition of “The Verge” magazine

2. 科技媒体杂志《The Verge》电子版首页

这种重构是一种自觉的、有意识的“再创作”过程。好比画家的画、诗人的诗,优秀的版面设计就是一件美的作品,是能够影响电子杂志视觉效果的重要元素[9]。例如科技媒体杂志《The Verge》在电子版首页(见图2)中,采用黑底白字风格;导航栏偏右置顶;左偏上主图区域为封面报道,标题添加深蓝色衬底;右区域为Top Stories列表,并对附加信息进行蓝绿色标记;底部为Today’s Storystream以及MOST POPULAR两个版块,并且可通过下拉展开更多信息内容。这种黑蓝色系与科技感的捆绑,可追溯至早期美国冷战后的科幻电影对大众认知的影响,同时蓝色作为底色不会干扰功能性色彩,其冷色调能够建构起宇宙、星空、海洋的联想。

3. 电子杂志从“宽屏”到“竖屏”

如果说PC电脑的界面主体以“宽屏”为主,那么手机作为新媒介的代表,贡献了另一种媒介形式——“竖屏”媒介。“竖屏”逻辑在垂直空间重构了信息表征的风格语言,同时也“进化”为人体的新延伸。有学者指出,“竖屏”问题有必要上升到叙事维度加以考察,主要是缘于其所催生的新叙事形式——垂直空间的滚动叙事(scroll telling) [4]。这种叙事方式在有限的垂直界面中,以“滚动”为文本叙事的动力装置,释放了文本表征的叙事潜力。

3.1. LOGO图像设计:嵌入品牌想象的配色与印象

安东尼·加卢佐曾指出,“杂志在反映社会和日常生活之外,也向消费者提供丰富的图像,用以投射自我、用以提供幻想”[1]。在框架的层次上,杂志LOGO作为多义且漂浮的图像,通过图像“在场”的视觉修饰,构建了关于品味、体验与生活方式的“海市蜃楼”。例如以插图和主题故事封面而闻名的《纽约客》杂志的LOGO图像(见图3(a))是“一名富家公子哥透过单片眼镜凝视着一只蝴蝶”,其作为庸俗格调的大都会文化象征,俨然成为汤·沃尔夫所言的“高级巴洛克式胜利的相对条款与修饰语”。

Figure 3. Cover and logo images of mainstream magazines

3. 主流杂志的封面与LOGO图像

从《国家地理》杂志(见图3(b))标志性的封面亮黄框和月桂纹图样,再到《时代》杂志(见图3(c))提供立体和空间的“窗口”感的红色实线页边,主流杂志无一例外地选择在“竖屏”时代保留且突出这些具有辨识力的LOGO图像。提供阅读安全感是杂志品牌的首要功能,而LOGO图像的功能之一便是植入有利于杂志品牌辨别的社会想象。因此尽管“竖屏”逻辑重构了版面叙事,但是LOGO图像作为嵌入的品牌想象,在界面中仍占据重要的一席。

此外,在从“宽屏”到“竖屏”的进路中,多数杂志都有对品牌LOGO选择重大设计调整,在新版设计中省略所有复杂细节,保持简单和扁平化。这并不是季节性、时尚性的循环式变化,而是一种具备时代性的设计趋势[10]。因为在当下这个图像加速流通的“界面”社会,消费者在信息游历中逐渐熟悉图像的风格语法,图像的大众化使得具像、直接且引人注目的轻量级图像成为通用的符号和语言。

3.2. 视觉动线设计:文本和影像间的“白日梦”

《国家地理》电子杂志在2023年1月刊封面报道(见图4)中,采用图层遮罩的呈现方式:随着页面向下划动,文字与图像层叠式地出现。在语言和图像的蒙太奇中,西藏与尼泊尔之间的野马王国地理和人文风景悉数显现。当一篇电子文章开始被阅读,读者浸入文本中,感官完全被图像吞噬,在视觉焦点的挪移间感受着观看、窥视、审视交织的乐趣——这是电子杂志所能达成的最理想状态,也就是“通过一本小小的杂志周游世界”。因此在巧妙而复杂地对文本和影像的摆布间,“竖屏”逻辑下的电子杂志完全可以提供一种可供阅读的“白日梦”。

Figure 4. Schematic diagram of visual flow for cover stories in the digital edition of “National Geographic”

4. 《国家地理》电子刊封面报道视觉动线示意图

在“宽屏”时代,电子杂志的语言文本继承了它在平面媒介时期的支配地位,作为“理念的寄居之所”,仍然凌驾于图像之上。但在“竖屏”逻辑下,界面形态、界面内容、界面接触的独特叙事风格,造就了图像盛产的时代。故而电子杂志的图像不再甘于对语言文本进行补充和延伸,而是重置出新的语境和模糊其语义界限,统治后图像时代的大命题。有学者概括,电子杂志在竖屏叙事中的语图关系也可以理解为并置的抑或是嵌入的两种方式[4]。无论是“文本和影像随着触屏滑动在垂直维度上呈现交替出现的叙事”,还是“文本和影像嵌入在彼此的叙事系统中呈现图文一体的叙事景观”,电子杂志的影像系统作为重要的叙事符号参与文本叙事,在文本和影像的纠葛间,修饰出跟随着视觉焦点的“梦境”——这也是电子杂志迭代新版面叙事所服务的主要目的。

“上帝在玩其莫测高深的‘电路’,而众人看那游戏,便有了千差万别的指向或意味。”电路必要经由一个个电子元件才成其为一个完整的游戏,电子杂志的文本与影像正作为这样一种电子元件,构成一场视觉游戏。电子杂志在文章之外,竖屏动线设计作为“脚注”,不仅具有韵律美和节奏感,而且还包含着不可彻底理解的暗示,因此“梦”常常是有必要的,它能够通向文本和影像所不能到达的地方。

4. 从“平面”到“空间”:电子杂志设计的可能性

行至此,本文对电子杂志从“版面”到“界面”、“宽屏”到“竖屏”依照时间轴进行限定和串联,进而铺设了电子杂志在“界面”与“竖屏”逻辑的垂直向度上的浅层脉络。但也必须承认,当我们谈论电子杂志的时候,并不能陷入历史的辉格解释陷阱,也不能仅仅停留在界面的外在形式,而是要真正留意“界面”背后所捆绑的新媒体逻辑对作为“流动图像商店”的杂志的解构[4]。实际上,从印刷媒介到电子媒介,“界面”与“竖屏”只是直观、表面的差异,时代信息结构的改写是更深处的变动。

在二维界面交互时代,微信订阅号、App应用、RSS订阅、Newsletter、聚合平台等多重分发途径在为电子杂志创造渠道化的用户红利同时,也带来版面与文章的双重割裂危机[11]。其一,界面化叙事颠覆了平面印刷中文本的稳定状态:不同分发渠道的编辑边界与运营策略使得同一篇杂志文章的风格版面可能呈现出不同种开放的、浮动的、过程性的、不确定的状态,甚至在更为底层的平台设计装置的限制下,电子杂志本身的版面语言风格被大大束缚。其二,聚合性平台降低了电子杂志辨识性品牌的可见性:作为“展示橱窗”的聚合平台重构了电子杂志文本的个式呈现风格,散落的文章在社交媒体的传递中,更多地是“陆地”式而非“群岛”式的呈现,杂志出版商的劳动成果被平台攫取。纽约时报电子刊与Apple News的割席,就是出版商与平台间的典型博弈。

而以Vision Pro为代表的三维空间计算技术成果,预示着“界面”将从二维屏幕转移到三维空间。这也是技术和日常生活融合的自然演进过程,用户能够借助新世代设备在现实世界中与立体的虚拟界面进行互动。互联网的信息内容,从办公桌上的PC,到我们的手机、平板,再到以3D形式漂浮在身体周围,它的整体阅读体验是一个不断被重新定义的过程。交互方式也更加自然和直接。现代人是具有反思性的个体。杂志作为中介物,能够在凝视、占有中,将遥远的、陌生的、纯粹的,甚至理念化的意识传播开来[1]。而Vision Pro等空间设备提供了这样一种基础设施,有着重新洗牌二维界面交互中的信息分发格局的可能性。界面的显现形式,不再是压缩的平面,而是极速流动的信息在数字空间维度展开和爆炸。这对现有的电子杂志文化行业而言,不仅仅是信息展示方式的重构,更是一种赛博空间数字文化的重新着色,为重新描述现实留下了余地。

5. 结语

在数字化和新媒体的浪潮中,电子杂志作为传统杂志的数字化继承者,携带着其独特的基因和灵性,展现出了前所未有的潜力和前景。从传统的“版面”到现代的“界面”,从“宽屏”到“竖屏”,再到从“平面”向“空间”的转变,电子杂志在视觉和体验上都实现了质的飞跃。

报纸和杂志作为新闻出版业的重要组成部分,虽然受限于物理版面的局限,但它们已经形成了一套独特的版面美学和审美风格[12]。随着技术的进步,读者的视野已经扩展到了一个更为广阔的媒介世界。在这个无限的媒介空间中,电子杂志不再仅仅是一个“流动的图像商店”,而是成为了一个能够将所有感官、理性思维和想象力与客观世界深度融合的平台。

得益于这个更广阔的媒介世界,电子杂志为人们提供了一种全新的视角,使他们能够从不同层面和不同角度深入观察和理解这个世界。这种由浅入深、由表及里的观察方式,不仅丰富了读者的阅读体验,也为电子杂志自身的发展注入了新的活力和可能性。因此,我们有理由对电子杂志的未来保持乐观,期待它在信息宇宙中引领知识探索和传播的新潮流。

注 释

①图1来源:引用自WIRED.COM

②图2来源:引用自THEVERGE.COM

③图3来源:引用自维基百科

④图4来源:引用自Apple News

参考文献

[1] 安东尼·加卢佐. 制造消费者: 消费主义全球史[M]. 广州: 广东人民出版社, 2022: 71-87.
[2] Nicholas, D. (2021) Digital Magazine History: Who Invented the Digital Magazine?
https://www.mequoda.com/articles/multiplatform-publishing-strategy/digital-magazine-history-who-invented-the-digital-magazine
[3] 赵丹群. 关于电子期刊的几点思考[J]. 图书情报工作, 1998(5): 34-36+29.
[4] 刘涛. 新媒体竖屏叙事的“版面”语言及其语图关系[J]. 现代出版, 2021(5): 25-35.
[5] 刘涛. 语图论: 语图互文与视觉修辞分析[J]. 新闻与传播评论, 2018, 71(1): 28-41.
[6] 顾群业. 创造沉浸式个性化阅读体验——电子杂志的界面设计探讨[J]. 设计艺术(山东工艺美术学院学报), 2009(6): 13-14.
[7] 宫京成. 当版面成为界面: 界面设计对新媒介时代报纸版式设计的几点启示[J]. 新闻界, 2009(5): 12-13+9.
[8] 刘琪. 美学视角下的现代报纸排版设计探究[J]. 中国报业, 2011(24): 46-47.
[9] 李珊珊. 电子杂志版面设计的应用研究[D]: [硕士学位论文]. 西安: 西安理工大学, 2008.
[10] 管霞. 报纸版面设计的美学要义[J]. 青年记者, 2011(3): 43-44.
[11] 曾凡斌. 多媒体互动电子杂志发展的瓶颈及出路[J]. 编辑之友, 2007(1): 59-61.
[12] 喻国明, 张佰明. 从版面扩张到界面拓展:传统媒介未来发展的关键转型[J]. 现代传播(中国传媒大学学报), 2010(6): 1-5.