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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
设计干货:你之前理解的点线面,可能都是片面的!
0.0°
2018-09-29 原创文章 经验/观点 举报 1972 3 6 0



本篇文章将深入剖析版式设计的基本构成单位,点、线、面。我们将点线面称为设计三元素。一个文字或者标点,我们可以抽象成一个点,一行文字可以抽象成一条线,那么一段文字就是一个面。一张图片也可以被看做是一个面。



其实我们设计师大部分时间就是在排布点线面在版面中的大小比例及位置关系。换句话说,我们可以在不理解文案内容的情况下依然能够通过形式美法则将文字和图片进行合理的布局。黑马老师在外企担任视觉设计师的时候经常面对各个国家和地区的设计需求。母语是英语的我们还能看懂文字的意思,但是像德国、俄罗斯、日本这些国家的语言我们也看不懂,那看不懂就不设计了吗?肯定不能,通常文案编辑会在word中标明哪段文字是大标题并进行加粗加大字号显示,哪些是正文已经在哪换行都会标注清楚,所以你只需要按照版式规律进行设计就OK。这种情况就是把文字和图片抽象成点线面了。你实际排的就是点线面的位置关系了。



那么点线面在版式设计中的作用是什么呢?



点的作用


点,可以聚焦我们的视线。可以让人们把注意力聚焦在我们想重点表达的信息上面。比如APP启动页面中的LOGO。这些都可以看做是一个点,让我们只关注这个品牌并留下印象,排除其他的信息干扰,这也是减法法则的运用。少即是多!



下图中只有一个点,我们的视觉焦点会不自觉的落在这个点上,所以点可以起到聚焦视觉的作用。那么在实际设计中有哪些经典案例呢?各位看官请继续往下看:

Image title

Image title




天猫APP开屏页面中心位置只有一个天猫的LOGO,实际就是起到聚焦用户的眼球,从而加深对品牌的认知和记忆。有的同学可能会觉得天猫这样的亿级用户量产品怎么可能浪费这么大的banner位却只放一个logo呢?因为天猫这个品牌更需要人们记住!



当页面当中有两个点并列存在的时候,情况又不一样了。我们的视觉焦点会在两个点之间进行反复的游离,很难获取到视觉焦点。所以这里又涉及到了一个奇数法则。奇数法则就是在版式设计中,一个区块内的元素应最好是奇数个数。这样一直会有一个视觉中心可以获取我们的焦点,从而让视觉保持平衡。看到这里,很多视觉设计师可能会恍然大悟,原来视觉还有这么多的讲究和原理。那么在实际设计中,有哪些经典案例呢,一般多数APP底部标签导航和顶部标签导航都应该是奇数排列才符合视觉规律。参考下图APP页面顶部标签及底部导航标签个数:


Image title


Image title





点在版式设计中的实际应用案例:

Image title





线的作用


线,可以用来分割设计元素。将版面划分成不同的信息区块,方便用户阅读。线有长短,有粗细,有虚实。线还起到版面骨骼的作用。能够撑起版面。

Image title



重复排列的线条,让视觉更具冲击力!

Image title



蜿蜒曲折的线条穿插于版面中可以让版面更加生动灵活!

Image title



上图中,线的粗细长短作为版面的骨骼可以支撑起版面并划分版面。



面的作用


面,可以将版面进行区域的划分。我们说一段文字,或一张图片就是一个区块。在区块里面的信息高度相关。

Image title




上图的灰色块讲版面进行了区域的划分,在版式设计中我们将这种手法称作垫色区域划分法。


Image title


上图杂志对页页面中的图片都可以理解为面的应用。


作者已将本文知识点整理录制成视频,详细讲解请点击参阅:平面版式设计-黑马带你学设计


黑马设计答疑解惑交流群:172178479

更新:2018-09-29

收藏

3人已收藏

黑马UI

设计交流Q群172178479

  • 37

    作品

  • 57

    粉丝

  • 2

    关注

  • 干货分享!平面版式设计必修课!大厂设计师13年经验总结分享!
  • 图标icon设计必修课-零基础入门
  • 网易设计大咖带你学万能排版技巧
  • 13年设计总监带你了解配色原理!

    猜你喜欢

      2018-09-29 原创文章 经验/观点 举报 1972 3 6 0

      设计干货:你之前理解的点线面,可能都是片面的!

      0.0°

      你确定要举报设计干货:你之前理解的点线面,可能都是片面的!

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年06月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      3
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录