赞助商
立即赞助

用一篇文章,帮你全面系统掌握线条在设计中的用法

平面设计3年前 (2021)发布 流光
3.7K 0 0

线基础的,也设中常见的,希望这篇文章对家所帮。

一、线的概念

线点运动的轨迹。几何学的线只度方向,粗细、宽窄、厚薄形状之分。平面构中,线的主作用强调方向度,并用以引导视线。

二、线的分类与情感色彩

平面造型中,线比点具感色彩,这主体短、粗细、曲线虚实。线总体可以分直线曲线两类。直线可分竖线、横线、斜线、折线、射线。曲线可分S曲线、弧线、螺旋线。

1. 直线

直线让人联到巍峨的山脉、高达的建筑、参天树。直线男性的象征,简单明,给人一种稳、冷峻坚强的感觉,富速度感紧张感,一种力的。

竖线

什么一根竖线会立?一种况就任何的力施加面;另一种况就所以施加的力好相互抵消,所以它可以稳稳的立那里。

用一篇文章,帮你全面系统掌握线条在设计中的用法

用一篇文章,帮你全面系统掌握线条在设计中的用法

照片拍摄的是上海陆嘴、上海中心大厦和环球金融中心,虽然是个很很雄伟的建筑,但是它们竖立在城中央却给人一种静、稳定的感觉。

用一篇文章,帮你全面系统掌握线条在设计中的用法

上图拍摄的俩头豹子,豹子平时给的人感觉是很凶猛,当竖线构图时却给人一种稳、亲密,会人产生恐惧。

用一篇文章,帮你全面系统掌握线条在设计中的用法

上图是 Walid Beno 的设计作,他是的竖线的构图方式,建筑有有低错落开来,上冷暖配色的对,突城很有秩序积极向上的感觉。

竖线给人的感觉「下落、升、挺拔、稳、刻板、刚毅、力、亲密、利索、肃穆……」

横线

横线也同样,它不需任何的力就能保持水平状态,也可以因下的力同时抵消达到水平状态。

用一篇文章,帮你全面系统掌握线条在设计中的用法

用一篇文章,帮你全面系统掌握线条在设计中的用法

拍摄青海湖的一张照片,天空、湖面、地面都在同一条水平线上,给人很逸、干净、舒适的感觉。

用一篇文章,帮你全面系统掌握线条在设计中的用法

上图小魔女007画的一张插图,插图中天空、湖面、地面、汽车、人物差多都在同一水平线上,感觉到大在短暂的假期中旅游享受着逸、舒适,长时间的工作大失了年轻人那时候泼调的一面,画面给人一种沉着、性、静、舒适的感觉。

横线给人的感觉「安、平稳、沉、理性、净、整齐、中规中矩、安静、稳、安全、波澜不惊、无聊……」

斜线

斜线受到的力并不稳,会出斜线的状态,具动势、升下降连续状态的运动感,富朝气。

用一篇文章,帮你全面系统掌握线条在设计中的用法

用一篇文章,帮你全面系统掌握线条在设计中的用法

上图是一张摄影照片,画面都整齐划一的倾斜,给人一种干净、量、感的感觉。

用一篇文章,帮你全面系统掌握线条在设计中的用法

一个棒球的页设计,倾斜的感觉可增画面的和量之美,还起到分割画面的作。

斜线给人的感觉「活泼、倾斜、运动、不安、动感、力、刺激、危险……」

折线

折线本一根直线,不屈服于外面施加力形的。

用一篇文章,帮你全面系统掌握线条在设计中的用法

用一篇文章,帮你全面系统掌握线条在设计中的用法

京的鸟巢,它的外轮廓就是了大量折线构成的,给人一种毅、对抗、量、屈的精神,这种精神代表了奥林匹克精神。

用一篇文章,帮你全面系统掌握线条在设计中的用法

闪电的照片,闪电就是大量的折线构成的,给人危险、紧张的感觉。

用一篇文章,帮你全面系统掌握线条在设计中的用法

UI界面设计,地图中了折线做指引,给人一种明确指引,更的突。

折线给人的感觉「紧张、不屈服、刚毅、对抗、力、冲突……」

射线

射线极的冲击力,往里聚集也往外喷发的力。

用一篇文章,帮你全面系统掌握线条在设计中的用法

用一篇文章,帮你全面系统掌握线条在设计中的用法

我们小时候看包青天的时候,经现这样的图片,太阳发来发射线的光,代表着希望、威、神圣,老百姓都希望得到公平公正。

用一篇文章,帮你全面系统掌握线条在设计中的用法

我们小时候看的画片灌篮手,有一个很厉害的阿里设计师UISTAR就的这个图片作为头像,头像中放射状聚焦自我,就自恋,很符合樱木道的性格。

用一篇文章,帮你全面系统掌握线条在设计中的用法

banner图,放射线在 banner 设计中经被到,它有强调、聚集、突的作。

射线给人的感觉「强调、聚集、突出、速度、发射、力、方向、冲击……」

2. 曲线

曲线女性的象征,让人起潺潺流水、风摆春柳。与直线的冷峻、硬朗不同,曲线温暖柔的,易产丰满、轻、跳跃、流动自由的感觉,发散灵活,充满命力。

S型曲线

S型曲线原本条直线,由于施加它身的力的不同,且它本身柔软的顺应这力的,一种包的。

用一篇文章,帮你全面系统掌握线条在设计中的用法

用一篇文章,帮你全面系统掌握线条在设计中的用法

一张美女的照片,很多女生都希望自己有 S曲线,S曲线符合人体美,给人舒适愉悦的女性魅。

用一篇文章,帮你全面系统掌握线条在设计中的用法

上图是页设计,S构图在页设计中引导视觉,合的分类信息给人明快愉悦的沉浸感。

S型曲线给人的感觉「柔软、女性、包、、舒、愉悦、安全、母……」

弧线

弧线还可以细分抛线圆弧。

用一篇文章,帮你全面系统掌握线条在设计中的用法

用一篇文章,帮你全面系统掌握线条在设计中的用法

一张鸟展开羽毛的照片,鸟展开的羽毛正好展开一张弧线,很优雅自然,丰满有张。

用一篇文章,帮你全面系统掌握线条在设计中的用法

UI设计中到的弧线,正情况弧线表示进、百分,给人一种积极向上的努的态。

弧线给人的感觉「弹性、丰满、张力、命力、果敢、优、力、规律……」

螺旋线

螺旋线一时受到了侧力的挤压,如果它的外面始终都外界施加的力就形了螺旋线。

用一篇文章,帮你全面系统掌握线条在设计中的用法

用一篇文章,帮你全面系统掌握线条在设计中的用法

一个楼梯的螺旋线,很自然,有韵律,很符合金螺旋线的美感。

用一篇文章,帮你全面系统掌握线条在设计中的用法

上图是 Mike 大神设计的页,在 banner 上半分,视觉的重心全符合黄金分割中的兴趣点。让画面很有力也增加韵律。

螺旋线给人的感觉是「神秘、神圣、韵律、引、谜团、眩晕、优雅……」

自由曲线

用一篇文章,帮你全面系统掌握线条在设计中的用法

上图是是苏适的一幅书法品,代表着放荡不羁、自由洒脱的。

自由曲线给人的感觉是「自由、浪漫、洒脱、灵性……」

3. 隐藏的视「线」

隐藏的视「线」多指人的视线。

用一篇文章,帮你全面系统掌握线条在设计中的用法

图中两个人物眼睛对视产生一条隐形的线。对视中眼神透入着希望、温柔、包容。

隐藏的视「线」给人的感觉「希望、活力、自信、神圣、温柔、包、智慧……」

三、线在设计中的常见应用

1. 以线塑型

线塑即线的粗细、疏密来表现画面的明暗系及结构,从而塑物象的形体轮廓。

用一篇文章,帮你全面系统掌握线条在设计中的用法

线条在绘制人像,首先是需要深厚的绘画功,还要体现放荡羁洒脱的画面感,虽然我们画来,但是我们可观察里面的结构和明暗系。

用一篇文章,帮你全面系统掌握线条在设计中的用法

上图这种很适合初者,对着照片快速的炼人物或物体的形态,适当的版面,画面看上更丰富。

用一篇文章,帮你全面系统掌握线条在设计中的用法

一幅好的插画,前期要很好的构图,笔工具绘制好路径,线条看上流畅,简单的交代明暗系。

2. 高度概括,简洁明了

用一篇文章,帮你全面系统掌握线条在设计中的用法

在摄影中经常能看到种高度概括的光影关系,很简洁明,也很干净舒适,粗细的曲给人一种流动感,很大气。

用一篇文章,帮你全面系统掌握线条在设计中的用法

一笔画 icon,在绘种 icon 也很考验设计的功底,明快简单的勾勒出大的条,还要让画面有一种统一感。

3. 提示强调,突出重点

用一篇文章,帮你全面系统掌握线条在设计中的用法

上图是 MBE 大神的作品,把线条用黑色或者深色来高度提炼轮廓,来保障画面的统一。

用一篇文章,帮你全面系统掌握线条在设计中的用法

奔跑的包插画铺作品,跟 MBE 一在用了黑色线条的基础上加粗了线条,来起突出调的作用。

用一篇文章,帮你全面系统掌握线条在设计中的用法

网页计,用方框的线条来息,加并突出。画面中好个方框通过大对比再次突出重点。

用一篇文章,帮你全面系统掌握线条在设计中的用法

是网页计,用短线条来提示标注标题,画面中用重复的短线给人统一的觉。

4. 分割信息

用一篇文章,帮你全面系统掌握线条在设计中的用法

app界,过线分割让画更晰,层更明确。

用一篇文章,帮你全面系统掌握线条在设计中的用法

上图是网页,画线条不有分割作用,橙色显示有交互含义。

5. 使画面更柔美

用一篇文章,帮你全面系统掌握线条在设计中的用法

用一篇文章,帮你全面系统掌握线条在设计中的用法

上面两张图都是 UI设计,曲线恰到好处,画面更有节奏感和韵律,没有呆的感觉。

用一篇文章,帮你全面系统掌握线条在设计中的用法

用一篇文章,帮你全面系统掌握线条在设计中的用法

两图是通曲来富画面。更加的柔软有亲和力,让画面更加饱和。

6. 视觉引导

用一篇文章,帮你全面系统掌握线条在设计中的用法

上图的息类的引导,有序的进行息类,通过线条指引代表先后顺序让画面更流畅。

用一篇文章,帮你全面系统掌握线条在设计中的用法

地图中线条指引可以让用户快速的从出发地达目的地。简了。

用一篇文章,帮你全面系统掌握线条在设计中的用法

网页中也可以通过改变线条的色彩,按照色彩顺序有序的排列指引。

7. 交互动效引导

动效中的线条正常都是指引的作用,从一端开始从另一端结束,引导用户的眼睛按照线条变化动。

用一篇文章,帮你全面系统掌握线条在设计中的用法

用一篇文章,帮你全面系统掌握线条在设计中的用法

用一篇文章,帮你全面系统掌握线条在设计中的用法

△ 通过线条显示当 Tab 页面,改变 tab 页线条也变动

总结

线的情感色彩:

  • 竖线给人的觉是「下落、上升、挺拔、稳定、刻板、刚毅、有力、亲密、利索、肃穆……」
  • 横给人的感是「安定、平稳、沉着、理、干净、整齐、中规中矩、安静、稳定、舒适、波澜不惊、无聊……」
  • 斜线给人的感觉是「泼、倾斜、、定、感、量、刺激、危险……」
  • 折线给人的感觉「紧张、不屈服、刚毅、对抗、力、指引、冲突……」
  • 放射线感觉是「强调、聚、威武、神圣、突出、速度、发射、力量、、冲击……」
  • S型曲线给人的觉是「柔软、性、包容、成长、舒适、愉悦、安全、母爱……」
  • 弧给人的感是「弹、满、力、生命力、果敢、优雅、力量、规律……」
  • 螺旋线给人的感觉是「神秘、神圣、韵律、引、谜团、眩晕、优雅……」
  • 自由曲线给人的感觉「自由、浪漫、洒脱、灵性……」
  • 隐藏视「线」感觉是「希望、活力、自信、神圣、温柔、容、智慧…..」

线在设计中的应:

线塑/概括,简洁明了/示强调,突重点/分割信息/使画面更柔美/视觉引导/交互效引导

图片声明:图片源于网络,如涉及到侵权的联系我删除,谢谢。

欢迎关注作者微信公众号:「手哥」

用一篇文章,帮你全面系统掌握线条在设计中的用法

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

最近实习的时候,交互同事小哥哥问了我一个问题:如果你面试的时候,面试官让你设计一个游泳池,你会怎么做? 仔细想想,其...
交互设计
近期一直在梳理需求收集、需求评审流程,就写一写关于这方面的心得吧。针对评审要注意的事项,我梳理了8个问题,和大家一起聊...
产品经理
情感是我们生活中不可割舍的元素,UI设计师也开始在设计时添加「情感化元素」,但是我们忽略掉了一个最基本的问题,为什么要...
产品设计
今天我们来聊一聊特斯拉最新的车型 Model 3的中控大屏,这是一块具有标志性意义的中控设计。Model 3 的HMI堪称是对汽车行业的...
交互设计
Tubik Studio :我们的日常生活中总是面临着无尽的选择,大量的挑战。设计的决策也是如此,一个正确的决策会受到很多不同因素...
ui设计
@Fornever :豌豆荚在 2011 年引入了 Design Workshop 的方法论做产品设计,并使用这种方法设计出了如豌豆荚 2.0 的 Windows ...
用户体验
9月4日,Google 终于发布了Android 10的正式版本。此前的内测阶段它一直以 Android Q 的名字示人,无论是交互、使用体验的优...
Android 10
图标的分类和风格有很多种,而设计图标的时候,如何才能抓住用户的眼球,设计出自己满意的图标呢? 欢迎关注译者的微信公...
ICON