恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
趣达说-设计师一定会遇到的版面设计问题
0.0°
2016-07-10 原创文章 经验/观点 举报 2673 19 7 0

一张好的海报,无非就是一个目的,将自己所要表达的信息正确清晰的传达给看的人。今天总结了一些设计过程中的排版内容问题,希望和大家交流交流~


◐点线面


这里的点线面跟我们狭义理解的不太一样,这三个元素都是是相对而言的,点的话在一般来说可能理解得比较多的时候就是一个圆点。但这里的点可以是不同的形状,三角形、矩形。除了形状之外,点元素甚至可以是一些点缀的实物,比如花瓣、一些产品等。

但如果在一些地方,点也可以当做面来看,因为每一个点都是有面积的,所处的位置不一样,也会导致给它的定义不一样。

当然线也是一样的,每一条线也都有面积,有的时候一些矩形也可以当成是线来看。所以有的时候可以把线看成面,也可以把矩形的面看成线。接下来我们通过一个例子来了解一下这三个元素:

Image title

仔细观察一下上面你的这张图,旁边的那些散落的三角形就是点元素,那些放射出来的光线就是线元素,“最给力”那个就是一个面,可以这么去理解。接下来我们就一个一个来理解一下他们的特点和用法。


❶点

Image title

在上图中有很多的一些光圈,虽然面积很大,但在这张图上它充当的就是点的元素,如果把这些点去掉会怎么样?我们看下面这张图:

Image title

把所有的点元素全部去掉再对比一下上面那张图,整体感觉怎么样?是不是感觉缺了点什么,很空,而且不是很美观。我们再看一张图片:

Image title

上面有没有点元素?可能看不太出来,但其实是有的,就是那些拖鞋和白云,这些在这张图上也是充当了点元素,让整个页面看起来更加的丰富。所以我们可以总结得到点元素的特点就是 丰富画面、烘托气氛、活跃整个界面 。所以再设计的时候可以灵活的运用这些点元素让整个页面活跃和丰富起来。


❷线


线元素的话就比点要复杂一点点,因为线条分成了好几种,比如横线、竖线、斜线和曲线 。它们每一种线都有属于自己的个性和特点:


  • 横线给人的感觉就是直直再水平面上,它给人的感觉很稳定,平稳。
  • 竖线就是垂直的,给人一种庄严的感觉,有威严。
  • 斜的事物都会狠人一种速度感,所以这里的斜线也不例外,也具有这种特性。
  • 曲线就是代表女性的柔美。

这就是最基本的四种线条。接下来通过例子来看一下这种线元素还有没有其它的特征:

Image title

这条直线可以很明显,就是那条在主表图和副标题中间的白色线条,它在这里起到的作用就会一个区分的作用 ,将文案进行合理的划分,让人更加清晰。再看一个例子: 

Image title

这也是线条的例子,就是最中间的那两条线,所以线条的特征就有分割信息的作用 ,除了这个它还带有情感和引导性,通过这些线条指引我们的视线,达到让我们准确有序的看到主要内容的作用。当然这张图片也存在我们接下来要讲的面元素,我们从这个图上就可以看到存在三个区域,就是三个面,接下来我们来看一下。


❸面


面与点的区别就是一个面积的大小,但并没有严格的界限 。

Image title

在海报正中间的那个圆圈就是一个面元素,面积占比比较大, 而且这张海报也把所有的文案全部写在了这个面上,而且与背景的城市区分开来,达到文案更加显眼的作用。

Image title

用一些明显的色块也可以充当面元素,将整个界面整个划分成几个部分,通过这两个例子我们就可以得到面的一些特征:组合信息、分割画面。

接下来我们也简单的总结一下点线面的内容:

Image title

看一下上面这张图,散落的三角形就是一些点。“更有满赠专区等着你”这句话背景的那个矩形就是一个线,厨具大放假这个主题的背景也可以理解为面,这就是点线面的应用,让整个界面丰富饱和,也将内容划分得很清晰 。在设计的时候更多的是将三者结合起来运用,这主要还是看你想得到什么样的效果。


❹平衡感

说完了点线面,接下来我们再说一个设计中必须要注意的一点,画面的平衡感 。这点做得不好的话就会让看的人感觉整个画面倾斜了,这是一种很差的体验,所以设计的时候必须要注意。

Image title


以自由女神像为例子,看一下,如果把这个自由女神像放在版面的正中间,那整个版面就是呈现平衡的,也就是四周重量相当。但当我们把这个女神像往右边移动的时候会怎么样?

Image title


那就会出现这种情况,感觉左边很空不说,感觉整个世界都倾斜了,这个就是所谓的板式平衡感。这就好比我们将自由女神像放在天平的一天,另外一边不放任何东西。

Image title


那么在设计的时候,我非要把自由女神像放在右边,那怎么办,这个再简单不过了,在左边也放进跟它等重量的东西就行啦,就像天天平的昨天放一些金块。

Image title


放进去之后就会觉得整个世界又恢复原来的平衡了。那么在海报设计中,我们不可能一边放女神像,一边放金块,那样子很难看,所以在设计的时候,我们可以右边放女神像,左边放文案,这样也可以平衡。

Image title


这样子就像是设计出来的东西了。除了左右,当然上下也有平衡感,头重脚轻就会让整个人向前或者向后倒,这样也是要注意的。

Image title

看一下这张图,上面部分有山,有船,下面部分只有靠近上面的一点船基本可以忽略了,其它就什么也没有,这也是一种失衡的状态,所以设计的时候我们需要在下方加入一些东西来进行平衡。

Image title

加了一些文案,感觉就好多了。这个就是所谓的平衡感,设计的时候一定要注意的。


◐板式设计

说完了基础和平衡感,接下来我们就可以直接开始我们的重头戏,板式的设计方法了,这里给大家总结了六个,分别看一下每一种的使用方法和特点:


❶占据中心

占据中心很好理解,就是简单的将所有内容进行居中分布,包括文案和产品。

Image title

像这种,全部都是分布在中间,整个界面看起来就很整洁,而且是比较高端大气的。


❷对角线排版

Image title

这种排版方式就比较有设计感一点,不会像第一种方法那么死板,这种方法是把主体放在一个边角那里,而且放得很大,凸显出来,再把文字之类的一些信息放在跟主体相对的一个角落,形成一个对角线,这种方法设计出来的结果也是很好看的,而且很有设计感,这个就是对角线的排版方式。


❸压住四角

Image title

这种排版还是少见的。它的排版就是把一些重要的内容放在角落里,比如产品,这里的价格和一些比较重要的信息,放在四个角落,但这种方法要用的一点,信息刚好的话那就四个角,如果内容太多,四个角满了,界面平衡了,那可以把其余的内容放在中间,这样也起到一个突出中心的作用。


❹S型排版

Image title

这种是比较奇特的,跟名字一样,它的排版就是按照S的形状来进行排版的,这种排版方式适用于内容比较多的。少的话可以再增加一些内容进行点缀,比如文案。最后得到的整体看起来也不乱,也可以说乱中有序,给人感觉挺舒服的排版方式。


❺铺满页面

Image title

所谓的铺满页面并不是整个页面全都要铺满,而是把产品放得比较大,大概占整个页面的一半以上,像这张海报上的牛排产品,占了就有4分之3那么多,然后再加上一些文案,让整个页面看起来就比较丰富了,这种方法用得也不会太多。


❻左图右字或者右图左字

Image title

这种排版方式相对来说就比较传统。看一下这张图片,左边是图片,右边配上对图片的介绍或者是解释,简单明了的一种设计方案,这就是我们讲的最后一种,左图右字或者右图左字。

这就是我们分享给大家的六种排版方式,理解上也不会太难,重要的是怎么用,看你想设计出一种什么样的感觉的设计,和你的内容去选择。如果你看完觉得很有用的,收藏转发任你挑选,记得多多支持趣达我~


END

Image title


版权说明:本文为趣达爱设计的原创文章,若用于商业用途的转载请后台联系趣达获得授权,谢谢配合。

更新:2016-07-10

收藏

19人已收藏

小楠2016

一个默默爱着设计的人,希望分享更多的UI设计技巧、交互设计思维、互联网观点,和大家一起进步。

  • 5

    作品

  • 35

    粉丝

  • 0

    关注

  • UI设计学习大纲
  • 学设计需要掌握什么心理学呢?-趣达说
  • 2016最新安卓版UI设计规范篇
  • 一份来自UI设计老鸟的独白:UI设计的前景真的饱和吗?

    猜你喜欢

      2016-07-10 原创文章 经验/观点 举报 2673 19 7 0

      趣达说-设计师一定会遇到的版面设计问题

      0.0°

      你确定要举报趣达说-设计师一定会遇到的版面设计问题

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年07月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      19
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录