长图海报排版-长图制作的技巧是什么？

文| 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. 打开电脑,新建一个文档,点击文件。2. 点击文件菜单栏的新建,新建一个纵向空白图纸,在画布上创建几个图层,并填充背景色即可。3. 新建图层在画布中新建一个图层,然后在图层一上方双击,弹出图层新调板,勾选两种颜色分别为红、蓝、橙、黑。4. 在图层面板中对颜色以及画布中其他元素调整至理想的颜色位置。在图层面板中选择图层> 图层样式> 反映调板中颜色。5. 将颜色直接复制到画布中,调整光圈大小,然后再用反射图层给反射调板调整前景色,确定回车。

一、长图制作的技巧——带有重复元素的布局

重复就是统一视觉,提醒用户或读者保持在相同的内容z中。重复可以是对字体、颜色、大小、空间、形状、框架等的重复。它不是复制完全相同的元素,而是根据固定的规则在页面上创建连续的更改。也就是说,规则应该在重复元素的使用中改变,并且规则应该在改变中存在。

除了指出重复之外,不难看出,各种重复方法并不是独立存在的,而是经常与

应用程序

混合在一起。当然,重复不仅仅是

枚举

。

二、长图制作的技巧——F排版空间布局

F-layout是一种非常传统但非常科学的

UI设计

布局。这是一种基于大量跟踪实验的经典布局。它符合大多数人的浏览习惯。当我们看一个页面时,我们通常先看左上角(logo、导航、logo等),然后从左到右看横向内容,然后从上到下浏览整个页面,形成一个f形的视觉路径。

从f形布局和眼动实验中,我们可以得到以下的启发:

1. 最重要的信息(如商标、企业名称、标题、导航等)应该放在顶部(甚至在左上方),而不是在右侧。

2. 在右边,你可以放一些不太重要的东西,比如反馈,咨询,广告,推荐等等。

3.在设计的时候,我们需要更加努力地处理左边的信息。这是一个我们更加关心的领域。右边的信息通常是空的。

4. 多文本、多内容的布局(如新闻、社区、事件页面等)是首选。

作为一个普通的

界面设计师

,我们也可以理解一些长图制作的技巧。为了保持读者的兴趣和停留时间,我们的UI设计不仅要好看,还要提供一些视觉指导,使内容体验从头到尾都是一致的。为了实现这一目标,我们需要有针对性地进行设计。想知道更多关于ui设计的设计素材与技巧,你也可以点击本站的其他文章进行学习。