搜索
免费下载
设计灵感
设计规范
👑
充值会员
流体渐变
渐变配色
色彩搭配
注册
登录
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
APP设计
原型demo
GUI
小程序界面
网页UI
网页设计
原型demo
软件设计
字体下载
衬线字体
非衬线字体
圆角字体
手写字体
网页字体
图标字体
书法字体
交互动效
加载loading
转场动效
ICON图标
面性图标
线性图标
拟物图标
2.5D图标
卡通图标
像素图标
按钮图标
多色图标
活动图标
插图/插画
扁平化插画
多彩渐变插画
2.5D插画
样机贴图
手机样机
名片样机
动画样机
电脑样机
笔记本样机
穿戴设备样机
UI作品样机
设计导航
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
网页UI
字体下载
交互动效
ICON图标
插图/插画
样机贴图
设计导航
设计中线条的妙用,你造吗?
搜UI
>
文章/作品
>
设计教程
>
设计规范
© 共享素材,请勿商用
举报
[db:内容描述]
UI课程
发布时间:2020-05-26
关注
171908c9z90hzd0ijw93oj.jpg
(37.93 KB, 下载次数: 0, 售价: 2 U点)
171720rhq9jjgg8z8ka91o.gif
(156.26 KB, 下载次数: 0, 售价: 1 U点)
有句话叫:“设计无小事”,很多看似不起眼的东西却起着至关重要的作用,比如这期要说的线条,很多人对于线条的理解有局限性,比如:线条的形态可以是曲线、直线、折线、粗线、细线、实线、虚线等等;其实已经牵扯到了点、线、面的知识,这也是很多科班生在学校必学的知识点;但是这期所说的线与点线面中的线还是有所不同的,点线面中的线可以是线条、可以是文字或者是看不到的视线;而是今天着重说的是设计中很直观的线条;下面我们还是通过实际的案例逐一分析:
171720hdn41zieinie4dde.jpg
(60.76 KB, 下载次数: 0, 售价: 2 U点)
设计类的知识很多都和日常生活息息相关,尝试着把设计类的知识点与日常生活想结合,对于记忆和理解来说会更加得心应手,例如:
171720bxdy52nrsdx1gj1x.jpg
(159.86 KB, 下载次数: 0, 售价: 1 U点)
图中的闪电可以视作为设计中的线条,给人的视觉感受是通过闪电把天与地连接为一个整体,而闪电在图中的作用就是串联整体;那么回到这里的正题:线条有引导视觉的作用该怎么理解呢?再举一个现实生活中的案例:
171720yyj1m1m05mkmp1a4.jpg
(202.49 KB, 下载次数: 0, 售价: 1 U点)
我们选择从北京到拉萨开车去,出发之前可能需要在地图上看下路线,知道途径哪些省市,规划好行程路线,这里绿色的虚线就起到了引导视觉的作用;回归设计中道理是一样的,线条可以引导用户把原本杂乱无章的视觉点规整为有次序的视觉元素,例如:
171720i0b8zpply00pj1bp.jpg
(233.6 KB, 下载次数: 0, 售价: 3 U点)
当看到左侧这张海报时我们视觉次序会出现很多变化,比如:1>A>3>B>4>C>2或者A>2>C>4>B>3>1等等N多种顺序,这时给人的感觉就是杂乱无章的,毫无视觉次序而言;而看右侧的海报给人的感觉却是条例清晰的,相比而言只是多了两条线,但是却在整个海报中起到了引导视觉的作用,它可以给与用户阅读海报时视觉辅助的作用,让用户以右>左>右的视觉次序欣赏、阅读,看似很不起眼,其作用却至关重要!前面也说了,线的形态可以有很多种,例如:
171720czswyx8hhvhv94mw.jpg
(269.88 KB, 下载次数: 0, 售价: 4 U点)
这里是以真实的可口可乐吸管作为设计中的线条,同样起到了视觉引导的作用,但是我们不难发现,这里的线条不仅仅只有一个作用,也牵扯到另一个作用:线条有串联整体的作用;
171744pzouoqh5cfuu9778.jpg
(67.38 KB, 下载次数: 0, 售价: 6 U点)
在排版时我们有分组原则,即把互想关联的元素彼此靠近,无关联的相互疏远;在页面中我们会把同一色块上的元素视作为一个整体;下面我们说下线条所带来的串联整体的作用是如何体现的,比如:
171744nnz0hxxmzvx8xrvx.jpg
(134.37 KB, 下载次数: 0, 售价: 4 U点)
(图一)
171744cjyij6m7b66rj887.jpg
(140.91 KB, 下载次数: 0, 售价: 1 U点)
(图二)图一因为大面积的留白能使得用户很容易分辨出自行车与文案是一个整体,但是相较于图二而言,其整体性略显不足,而且给人的感觉太过单薄、重心不稳;图二的整体性更强,这里的矩形线条就起到了串联主题的作用;类似的还有:
171744am7y50n0cma74yin.jpg
(133.75 KB, 下载次数: 0, 售价: 3 U点)
171744c28h6jsfwxjkko22.jpg
(114.13 KB, 下载次数: 0, 售价: 3 U点)
171744g455gmiwbviubmxx.jpg
(132.04 KB, 下载次数: 0, 售价: 3 U点)
171744idgi3llhwgggk30l.jpg
(332.69 KB, 下载次数: 0, 售价: 1 U点)
172257b0sh44ld4wja060j.jpg
(87.79 KB, 下载次数: 0, 售价: 2 U点)
不难看出,这些案例中的线条都有串联主题的作用,线条使得主题元素整体感更强、画面板式更加严谨;对于整体的视觉传达也起到了串联、引导的作用;在文字排版中,也有类似的线条,比如:
171744wblbzad0b77juzal.jpg
(122.73 KB, 下载次数: 0, 售价: 2 U点)
同样是通过线条把文案更加整体化,也起到了串联的作用!
171744l3yf72tfdhdhdfxx.jpg
(61.63 KB, 下载次数: 0, 售价: 6 U点)
突出主题的方式有很多种,像我们之前所说到的留白、对比;接下来继续说下另一个可以突出主题的方式—线条,下面看个案例:
171744lo97w23g9qtz9vwz.jpg
(679.29 KB, 下载次数: 0, 售价: 4 U点)
通过对比观察我们发现,右侧海报整体感更强,主题文案信息更加清晰,主体更明确;其中的原理可以理解为:因为线条的存在,使得主题信息有了一定的范围,在视觉上等于是在海报中划定了视觉焦点,从而起到了突出主题的作用;当然还有其他的表现形式,比如:
171744e9dwn9nn9kkng9c9.jpg
(54.81 KB, 下载次数: 0, 售价: 2 U点)
很好的诠释了线条的作用—突出标题序号;在进行创作时,作品的每个元素都要做到有理有据,否则只是一味的抄袭,到再创作时脑袋里还是一片空白;只有明白了其中的设计原理,才能做到活学活用!再看几个案例:
171744pzyd9fmudvf8lghr.jpg
(159.86 KB, 下载次数: 0, 售价: 6 U点)
在小文案的区域中间我加了两个线条,看似很小的改变,其目的是把文案很准确、严谨的分割为三个小整体,希望能给用户带来识别性更强的阅读;再举个“栗子”:
这里的线条把月份和日期分割、英文和中文分割开,使得用户对于信息的捕捉能力以及可辨识性都提升了很多,而这里的线条的作用就起到了分割的作用!
线条也能起到修饰、衬托的作用,很多小伙伴会忽视这一点,其实线条也可以成为海报中衬托画面、修饰主题的元素,例如:
海报中的线条起到了衬托、修饰主题的作用,假如把这些线条都删除,画面整体会显得相对单薄!
线条的作用我们分为四个逐一分析,其实它们之间也存在着相辅相成的作用,不能以一概全,线条所起到的作用可以是一种,也可以是多种,比如:我们前面“可口可乐”的案例,即有串联整体的作用,又有引导视觉的作用;只要我们在使用的时候能明确目的,而不是机械式的抄袭,那么最终一定会得心应手!作者:张家彬
UI课程作品
其他设计规范
最新素材
其他设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
Load More
最新素材
收藏
像素图标
收藏
原型demo
收藏
APP设计
收藏
原型demo
收藏
面性图标
收藏
线性图标
收藏
线性图标
收藏
多色图标
Load More