网页版式设计基本构成单位,点、线、面的作用

2018-06-1822:52:58网页设计Comments3,983 views字数 953阅读模式

深入剖析版式设计的基本构成单位,点、线、面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

我们将点线面称为设计三元素,一个文字或者标点,我们可以抽象成一个点,一行文字可以抽象成一条线,那么一段文字就是一个面,一张图片也可以被看做是一个面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

其实我们设计师大部分时间,就是在排布点线面在版面中的大小比例及位置关系。换句话说,我们可以在不理解文案内容的情况下,依然能够通过形式美法则将文字和图片进行合理的布局。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

笔者在外企担任视觉设计师的时候,经常面对各个国家和地区的设计需求。母语是英语的我们还能看懂文字的意思,但是像德国、俄罗斯、日本这些国家的语言我们也看不懂,那看不懂就不设计了吗?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

肯定不能,通常文案编辑会在word中标明哪段文字是大标题,并进行加粗加大字号显示,哪些是正文已经在哪换行都会标注清楚,所以你只需要按照版式规律进行设计就OK。这种情况就是把文字和图片抽象成点线面了,你实际排的就是点线面的位置关系了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

那么点线面在版式设计中的作用是什么呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

点的作用

点,可以聚焦我们的视线。可以让人们把注意力聚焦在我们想重点表达的信息上面。比如:APP启动页面中的LOGO,这些都可以看做是一个点,让我们只关注这个品牌并留下印象,排除其他的信息干扰,这也是减法法则的运用,少即是多!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

下图中只有一个点,我们的视觉焦点会不自觉的落在这个点上,所以点可以起到聚焦视觉的作用。那么在实际设计中有哪些经典案例呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

各位看官请继续往下看:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

网页版式设计基本构成单位,点、线、面的作用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

网页版式设计基本构成单位,点、线、面的作用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

天猫APP开屏页面中心位置只有一个天猫的LOGO,实际就是起到聚焦用户的眼球,从而加深对品牌的认知和记忆。有的同学可能会觉得天猫这样的亿级用户量产品,怎么可能浪费这么大的banner位却只放一个logo呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

因为天猫这个品牌更需要人们记住!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

当页面当中有两个点并列存在的时候,情况又不一样了。我们的视觉焦点会在两个点之间进行反复的游离,很难获取到视觉焦点,所以这里又涉及到了一个奇数法则。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

奇数法则就是在版式设计中,一个区块内的元素应最好是奇数个数。这样一直会有一个视觉中心可以获取我们的焦点,从而让视觉保持平衡。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

看到这里,很多视觉设计师可能会恍然大悟,原来视觉还有这么多的讲究和原理。那么在实际设计中,有哪些经典案例呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

一般多数APP底部标签导航和顶部标签导航,都应该是奇数排列才符合视觉规律。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

参考下图APP页面顶部标签及底部导航标签个数:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

网页版式设计基本构成单位,点、线、面的作用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

网页版式设计基本构成单位,点、线、面的作用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/3705.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/sheji/3705.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定