文| I C E H 图 |来自网络及各网站截图

长图设计在屏幕阅读时代应用得非常广泛，除了最直接想到的网站和APP页面，还有个人作品集的长图包装、长条海报、电商的产品详情页、微博微信的长图广告等等。所以不只是界面设计师需要了解长图设计的构图方法，作为普通设计者，我们同样可以了解一些长图长页面的设计技巧。

为了能够让阅读者保持兴趣不停读下去，停留更长的时间，我们的设计不仅要好看而且还要提供一定的视觉引导，让内容从头到尾的体验都是一致的。为了达成这个目标，我们需要有针对性地进行设计。

希望这篇文章能够带给你一些帮助。那么下面我们一起来了解一下，关于长图长页面设计的几种较为常用的简单设计方法。

重复是为了让视觉形成统一，提醒用户或阅读者依然是停留在同个内容之中，重复可以是重复字体，颜色，大小，空间，形式，框架等，它并非是严格复制同样的元素，而是按照一定的规律，在页面中产生连续的变化。也就是说在利用重复元素的时候，应该在规律中有变化，在变化中有规律。

重复数字、文字、英文、排版形式、架构等▼

重复排版形式、架构等▼

重复形状、符号、特性等▼

重复颜色、色块应用等▼

除了点出来的重复外，其实也不难发现各种重复的方法其实不是独立存在的，常常是各种方法掺杂着应用。当然，重复的方法也远远不止是列举的几种。

F型布局是一种十分传统但又非常科学的版式布局方式，它是基于大量的眼动追踪实验后总结出来的一种经典布局方式。符合大部分人的浏览习惯。我们看一个页面，通常情况下是先看左上角（例如logo、导航、标题等），然后优先从左往右看水平方向的内容，再着从上往下浏览整个页面，由此便形成一个F状的视觉路径。

NNGroup的眼动跟踪研究图（红橙代表注意力集中热区，蓝色代表不感兴趣部分）▼

从F形布局及眼动追踪实验我们可以得出以下几点启发：

1.最重要的信息（例如logo、企业名称、标题、导航等）尽量放在顶部（甚至精确到左上角），尽量不要放在右边

2.右边通常可以放一些比较次要的东西，例如意见反馈、咨询、广告、推荐等

3.设计的时候左边信息要更下功夫，这是注意力比较集中的地方，右边通常会以留白处理

4.多文字多内容的版面（例如新闻、社区、活动介绍页等）可以优先考虑F型布局

36Kr网页的F型布局▼

envato tuts+页面的F型布局▼

游戏活动页面的F型布局▼

活动页面的F型布局▼

除了F型布局外，S型（也叫“之”型、“Z型”）也是页面布局中非常经典的一种，同样，他也是符合人类的浏览流程，都是通过眼动追踪实验证明的。

当我们通览一个页面时，我们的眼球会左右移动进行阅读，视觉停留的点也会页面从上往下随着变化，由此形成一个左右移动的“s”型路径。这种布局在长页面中应用得非常广泛，特别是介绍某个产品某张图片的时候，利用S型布局，会形成一个视觉引导，很流畅地阅读完整个页面。

眼动跟踪研究图▼

最初在网页中应用S型布局的可能是从苹果官网最先开始的，利用左图右字、右图左字形成阅读连贯性。

比如下面这张iPad的详情页，在第一屏中，我们视觉中心起来便落到iPad的图片上面（图片比文字更容易成为视觉中心），然后是往左读取产品名称和介绍，读完之后随着页面往下滚动，视觉又被第二屏的iPad图片所吸引，继续往右阅读图片的介绍......多次重复这种视觉移动，整个页面就很流畅地阅读完，形成s型的视觉浏览路径，显得非常直观，阅读起来十分轻松自然，获取信息也非常轻松。

早期苹果官网的产品详情介绍页面▼

除了苹果，现在许多网站页面、长图广告、作品集包装中也广泛应用这种排列布局。

类似的S型布局产品详情介绍页面▼

其他S型布局页面▼

由此可见S型布局的非常受欢迎的长图排版方式，符合人们潜意识的阅读习惯。

卡片式布局是栅格系统下引申出来的一种布局方式，也叫容器风格设计，是把文字图片等信息元素集中划分在一个卡片之中，通过卡片的累积形成一个完整而又简洁规范的页面，通常用在电商（例如淘宝、京东）、平台网站（例如站酷、behance、Pinterest、优酷）等信息量大而复杂的页面之中。当然，设计中如果我们在遇到图文非常复杂的情况下，我们也可以考虑用这种布局来让我们的设计更加简洁。

卡片式布局的页面▼

页面的布局当然远远不止上面列举的这几种方法，但这几种是比较经典和常用的方法。同时，这些方法也并非是单独存在的，他们在应用中也会互相掺杂，相互并存，共同服务一个完整美观的页面。相信充分了解这几种布局的方法后，我们在设计长图页面或包装展示自己的作品的时候不会一头雾水，不知如何下手。

先分享到这里啦，希望对你有所帮助。

[关键词]静态版式；动态设计；第一时间一张优秀的报纸必须是既好看又好读的。好看，是指报纸的版面设计所形成的整体视觉感觉，包括文字、图像、标志、插图以及线性的空间分割等重要元素构成的视觉形象，能给人带来美的享受；好读，是指报纸所刊发的内容贴近生活、贴近读者，具有警示作用和给人启迪与思考的力量。

报纸的版式设计应服从于报纸的整体气质与基本风格，对于不同内容的板块和叠次，在版式设计上应体现出相应的风格特色，并从全局角度把握设计的强弱、轻重、疏密等等，形成层次分明、节奏有致的版式风格。细致完善的版式细则和严谨到位的执行力是确保一份报纸能形成鲜明风格、整体气质的根本保证。优秀的版式设计是用编者魅力吸引读者去领会作者魅力。

一个没有个性的版面是绝对失败的，就像一张毫无个性的面庞，在视觉不会给人留下什么印象。每张报纸都要拥有自己的个性，才会具备吸引读者的魅力。人们在浏览报纸版面时，在看到形式上的独特性的同时，也就能感受到内容上的独特性。下面就版式设计应注意的几个问题做简单论述。

一、静态版式需动态设计

版式设计不仅仅是吸引读者眼球的编排方式，更为重要的是体现报纸发展策略、办报理念和独特品位。新兴报纸大都在成立之初就制定版式大纲确立基本风格，即采用静态版式的编排风格。

静态版式有明显的易读性特征，各条新闻成方成块，可以一览无余，便于读者轻车熟路地获知信息。就如新闻摆上了橱窗，阅读时像进超市，在固定的位置找到自己所需，长此以往较易形成认同感。静态版式实际上把编辑从版面上解放出来，淡化了“划版”的功能，强化了“编辑”的功能。另一大好处就是，它有效避免了传统版式操作中因编辑原因造成版式的良莠不齐，十分有利于一张报纸统一风格并形成相对固定的形象。

有一点需强调的是，静态版式并非一成不变，也就是静态版式也需动态设计。版式设计在整体风格固定的前提下，要以读者易读、悦读为首要标准，随时了解、洞察目标读者的阅读情境、习惯、喜好变化，有计划有步骤地丰富发展新的设计手法。

二、让读者第一时间找到感兴趣内容

版式设计就是对文字和图片进行整合，调动点、线、面以及所有科技设计手段强化阅读效果和视觉冲击力。在这个过程中，人们视觉感受的规律性法则，如对称、平衡、和谐、对比、统一、整体等将起到重要作用。不同的报纸会以版式信息的侧重点不同来凸显媒体性质，同时，不同的版式设计和色彩运用也表现着不同的编辑思路，这些都有助于形成不同的报纸风格。无论具体表现形式如何，成功的版式都会具有以下几种通性：

1.易读性。编排依据内容的主次从左到右，便于阅读。一个缺乏设计的版式大多是缺乏整体感和悦读感的。因此编辑的第一职责就是按照视觉习惯的需要组织好文章，使版面流畅大方。报纸是大众化的文化快餐，因此，报纸版面应条理清晰、简洁单纯，形成整体节奏和美感，让读者在第一时间里找到感兴趣的阅读内容。

《家报》自2011年11月起对一版版式做了很大的改动，由原来的新闻版改成了大标题导读版。六七条导读，配上夺人眼球的图片，将重要新闻所在告知受众，极大地活跃美化了版面，使头版更加生动形象，充满活力。

2.差异性。在新闻资源日渐趋同的情况下，版式风格的差异性正是区别于竞争对手的一种特殊的优势。

3.稳定性。版式风格的稳定有利于培养阅读习惯和风格的形成，一般不做大的调整和变化，这是一张报纸走向成熟的体现。但在发展过程中力求适当的补充和创新。

三、广告与版面设计相融合要有科学性

任何一块报纸广告版面中，都包含着诸多构成因素，这就要求版面设计者要有统领全局能力，力求做到主次分明、突出主体。如果不突出主体，那就极易导致读者视线的流动，偏离设计的诱导路线。在设计版面时，通过设计各种标志的办法来引导读者阅读。报纸版面和新闻版面有相同之处。在新闻版面中有“主题”“腰题”“倒头题”之分。而广告版面也有“异曲同工”之处。所以要把读者最想看到的，也最能体现产品特点和个性的内容放到醒目位置。可根据广告创意，有意把读者最想知道的内容或要素安排在比较小、但非常好的位置上，吊足读者胃口，达到广告效果。一块报纸广告版面是否能得到读者认可，以至达到较理想的宣传效果，版面的艺术质量占很大比重。因此，在版面设计时，要把握“主次分明”原则，充分安置好素材，做到灵活调配。

四、用版式设计展露编辑智慧

1.在策划中激发再创造意识。打破以往策划、采访、编辑的界限，编辑直接参与报纸各方面的总体策划，各负其责，又密切配合，参与对报纸编辑发行、读者需求、稿件定位、市场预测、竞争举措等总体策划。这样报纸编辑就会在全面了解战略目标的前提下，胸有全局，进而产生大思维、新创意，才能从大处着眼，小处着手，严谨细致，精益求精地进入报纸编辑具体的再创造活动。

2.从版面上再现再创造意识。报纸版面的内容编辑和版式设计是编辑展露智慧、驰骋才情的场所，是再创造意识全面价值的最高体现。编辑根据总体策划的大思路，对自己所主持的版面从内容到形式进行具体策划，然后有目的、有重点、有针对性地编排文稿、图片等，并把自己多方面的新创意渗透到版面编辑中。报纸编辑的再创造意识，集中体现为用美学和技术创造出内容和形式双重美的和谐统一。可以说，版式设计是美的追寻与创造，比如统一中的整体美、配置中的组合美、比例中的差异美、对称中的平衡美、节奏中的韵律美等等。在此过程中，编辑的主体价值将在从内容到形式的再创造中得到充分发挥。□

（编辑/刘佳）

摘要

在版式文字字体设计中，为了突出字体的特点，体现文化性和时代感，符合字体设计的特点及发展方向，并且还要有丰富的文化内涵，这就需要对字体进行深入的研究。只有对要设计的对象有足够多的了解，才能设计出合适的字体。本论文研究的内容包括字体设计基础，字体设计的重要性，字体设计的设计要素及设计要求，拟通过字体设计实践及其通过对国内外的博物馆形象标志设计趋势及相关情况的分析，字体设计的设计过程推动字体设计适应当今快速发展的时代背景。

关键词:字体编排视觉美感创意

绪论

随着现代社会日益的发展和设计领域的不断延伸人们对现代平面艺术设计有了更深层次的了解，生活不仅仅局限于物质方面更加追求精神需求，从当前社区发展来看，最基础的就是版式设计。他是视觉传达的重要手段而现代版式设计中。最强调创意注重感情，突出个性因此在版式设计，创意表现中文字的编排是重要组成部分。

本论文拟从版式字体设计实践的过程，阐述字体设计对版式设计的作用及意义。字体设计的不同表现手法在版式标志设计中的不同效果，以不同的表现手法完成其版式设计。

一。1.1字体设计的概念

文字的设计要服从于作品的风格特征。文字的设计不能和整个作品的风格特征相脱离，更不能相冲突，否则，就会破坏文字的诉求效果。一般说来，文字的个性大约可以分为以下几种：端庄秀丽。这一类字体优美清新，格调高雅，华丽高贵。坚固挺拔。字体造型富于力度，简洁爽朗，现代感强，有很强的视觉冲击力。深沉厚重。字体造型规整，具有重量感。庄严雄伟，不可动摇。欢快轻盈。字体生动活泼，跳跃明快节奏感和韵律感都很强，给人一种生机盎然的感受。苍劲古朴。这类字体朴素无华，饱含古韵，能给人一种对逝去时光的回味体验。新颖独特。字体的造型奇妙，不同一般，个性非常突出，给人的印象独特而新颖。

1.2字体设计的重要性

文字既是语言信息的载体，又是具有视觉识别特征的符号系统。不仅表达概念，同时也通过树脂于是觉得方式传递感情因此文字是现代版式设计中的主体文字组合的好坏对版式设计的视觉传达效果有着直接影响。

文字的主要功能是在版式设计中向大众传达作者的意图和各种信息这是要文字的整体诉求效果能给人以清晰的视觉印象因此在编排设计时文字应让人易认易懂，从而更有效地传达作者的意图，表达设计的主题，和构想，意念，文字的变化排版整体会使得整体效果强烈，直观，大小对比也使得办事更具节奏感，文字的编排设计要服从于作品的整体风格特征，不能和整个作品的风格特征相脱离，更不能相冲突，否则就会破坏文字的诉求效果。要想表达的内容清晰，醒目。让阅览者一开始就可以明白你的意思，避免使用不清晰的字体，否则容易使阅览者产生反感和厌烦，一般来说文字的个性大约可分为以下若干种，端庄秀丽，格调高雅，华丽高贵，坚固挺拔，简洁爽朗，现代感强，深沉厚重，庄严雄伟，欢快轻盈，跳跃明快，节奏感和韵律感强朴素无华等，具体应用到某种文字的风格，设计时应根据情况而定。

在版式视觉的流程中，文字作为画面的形象要素之一具有表达情感的作用，因而他必须具备有视觉上的美感能给人以美的享受。字形设计良好组合巧妙能使人感到愉快留下美好印象，从而获得良好的心理反应，反之则是人看到，后心里不愉快视觉上难以产生美感甚至会让观众拒绝不看，这样势必难以传达出作者想表达出的意境和构想，假若字体与图形有趣的编排在一起会使整个版式显得有个性。视觉感觉刺激，而且不同文字的巧妙组合，更能有效地吸引观众的注意力把文字作为基本元素作为图片和符号来处理，这样也可以加强文字的形式美感，一个文字就是一个点一个排文字就是一条线，很多文字组合在一起就成了一个面，版式编排上，如果文字被排列成既是线又是面，组合主次分明这会使得版式更生动更具张力，靳埭强的海报有一副就是很好的例子，他将中国文字偏旁部首就运用得十分巧妙，同时也结合了中国的水墨艺术手法，又不失中国的文化精神，一个简单的一字倒转，表现对田中一光设计师的无限，同样他在英文字母，在版式

设计中，也有十分到位的应用。版式设计中不同的字体体现不同的性格形象特征象征意味在挑选素材字体是字体的视觉效果和颜色方面对比，或协调一定要掌握字体不仅要在字体上和画面配合好，在颜色和部分，壁画上也下点功夫这样才能达到更完美的效果，而这些细节地方需要的是耐心和功力的，诸如一些自己的想法和感受在里面，如果想表达自己对作品的态度在文字上应该多多处理，粗壮字体显得强烈强烈因此，在组合时就要根据不同字体视觉动向的差异进行不同的处理。

二细说文字在版式中的运用

版式中文字的字距与行距的把握是值得深思的一个问题，字距与行距的加宽或缩紧，更能体现主题的内涵现在国际上流行将文字分开排列的方式，感觉疏朗清新，现代感强，但字距与行距不是绝对的，应根据实际情况而定对于大的字体在字距和行距之间，我们应该随之调整，主次和轻重应该注意。文字在画面中的安排要考虑到全局的因素不能有视觉上的冲突，否则在画面上主持部分很容易引起视觉顺序的混乱，而且作品的整个含义和气氛都可能被破坏，这是一个很微妙的问题需要去体会细节的地方一定要注意一个像素的差距有时候会改变你整个作品的味道。安排好文字和图形之间的交叉错颌，既不要影响图形的观看也不能影响文字的阅览，在一幅作品里文字不能盯着画面的边角，这样会使得画面有紧绷感，根据作品主题要求突出字体设计的个性色彩创造出与众不同的独具特色的字体，给人以别开生面的视觉感受有利于作者设计意图的表现。对作品而言每一件作品都有其特有的风格在这个前提下一个作品版面上的，各种不同的字体的组合一定要具有一定符合整个作品风格的风格倾向，形成总体的情调和情感倾向，不能各种文字自成一种风格各行其是，从，的基调应该是整体上的协调好局部的对比，与统一之中又具有灵动的变化从而具有对比和谐的效果这样整个作品才会产生视觉上的美感符合人们的欣赏心理除了一统一文字个性的方法来达到设计的基调外也可从，方向性上形成文字统一的基调，以及色彩方面的心理感受来达到统一基调的效果等等。

对于版式设计来说，它不是电脑里面本来就有的而是人思维新发明的艺术性的作品，每件作品都具有其特有的风格文字排版的变化演绎着板式的意境使之更加艺术性。

单从汉字本身的书写方式来看，也有古代的，竖排版，改为横排版，汉字从古代的颊骨雕刻刀后来的活字排版印刷一直都是竖排版，直到清朝末年一些知识分子学习西洋文化，立柱改变传统的竖行书写方式，改用从左到右的横排版方式，在版式设计领域里由于构思需要，竖排版又兴盛起来，在毛笔字钢笔字与艺术字体中毛笔字在版式设计中运用比较少一般，在与历史相关性作品中出现，钢笔字比毛笔字体发起得晚，在社区当中比较少用但也是不可缺少的，相对于钢笔字体来说，在设计领域的表达效果中顺应时代潮流艺术性的字体用得比较广泛，在版式方面一般作为主体出现，因为它的造型变化多端可以把自己当成图片来处理，形成美好的视觉感受，可塑性比起钢笔字来说要强的多。

三文字对于版式设计的重要性。

在大多数人的眼里有形有色的图形是丰富多彩的具有直观的感染力和震撼力往往叫人过目不忘给人深刻印象，而平面中的一些元素会在其光辉下黯然失色，在这里所有文字的重要意义大概莫过于他所包容的内容，文字在平面设计中作为造型元素的作用往往被忽视，因为他没有多变的造型丰富的色彩，人们在这样的视觉感受下自然形成了，以这样一种思维定势，然而一幅好的作品就得把诸多造型元素加以，组织和编排最终形成一个完美的整体。并使其具有某种风格和格调要么含蓄要么优美要么活跃要么沉稳等等因此文字是我们在版式设计中不能缺少的一部分一幅作品里有图形有文字我们不能只把图形处理的丰富多彩精致，而把文字内容处理草草鸟事这会使得设计作品失去其本身所具有的魅力，因为一部好的作品不仅仅是表现在图形色彩和文字一个元素。而是整体定论的视觉元素包括图形和文字的大小形状色彩概念元素则由点线面是通过视觉元素体现出来的以文字本身作为元素来讲文字本身就是概念元素组成的同时也可以由文字构成新的点线面，在版式编排中，就是对文字概念元素特征进行合理的利用与，调佩，在版式中我们常常会看到，标题文字形成一个醒目的点一句话构成一条虚实变化的线，一段说明变幻出丰富多彩的面平面设计就是要把这些看似平常的文字通过设计师的组织编制在一起构成统一的画面和起伏的节奏，办事中重要文字能加强，视觉传达效果提高作品的诉求力，富于版面独特的形式美。

结束语，

从我个人来说当今人们在对设计的了解和欣赏能力上，基本美学思想提高了，对设计的要求也提高了，因此在版式设计上文字得花不少功夫既要强调字体设计的表现艺术和个体内涵。又得把握字体创意在设计上的文化性所谓文化性就是在追求个性创新是保持着传统而不能把历史留下来的东西通通丢掉，在必要的时候我们在版式设计中文字应以民族文化传统一位在版式设计中运用，这样在设计中我们既不能脱离传统又跟得上当今版式设计的潮流同时我也想说明一点，当代的中国设计将传统文化结合到平面设计只是一个环节，像文字结合到版式设计中只是其中一部分，传统应当继承，但不是一成不变，时代在改变设计也要有新的手法来表现，因此在继承传统文化的同时一想到社区在发展六十年代是过去代表中国设计的是8090，年代后，在当今版式设计中主要强调的应该是创意，一是对主题思想创意，二是对编排版式设计的创意，在编排创意与表现中，文字编排具有强大的表现力他生动直观富有，艺术的表现与传达，如果一幅作品没有创意那就不是设计，再就是突出个性追求，新颖独特的个性表现有意创造出某种神秘，无规则不理梁的空间，或者以追求幽默风趣表现形式来吸引读者引起共鸣，乃是当今设计界在艺术风格上的流行趋势，最后就是要注意重感情，以情动人是艺术创作中奉行的原则，在版面编排中，文字编排表述要富于情感的表现设计为人以人性为主，达到使人愉悦的原则，这才是成功的设计。

转载请注明：片头模版 » 浅谈版式设计(浅谈版式设计中文字的应用)