前言
线条是网页设计中非常常见的一种构成元素,线的性质让它能身兼数职,又不霸占视觉风头。上一次我们已经讨论过点的平面构成之“点”睛的张力,这一次让我们一起来到线的世界。
把这些最最最最最基础,看上去不难的知识点吃透且灵活运用你会发现,大佬做的图其实就是看上去复杂。
一、线是一个点的行迹
任何形都由线包围而成,线就是一个二维里的产物,它有长度、宽度,它甚至还能帮我们模拟三维的深度。你可以把线看成一个点的运行轨迹,那么这个思路就可以帮你找到线的本质:线是一条运行轨迹,它是从点的基础上发展而来的。
一条线也并不拘泥于就是平直的线条形式,只要能连缀成串的,我们都可以把它看成一条线,它就能在构成中发挥起线的作用。(把这个道理吃的透透的你就是造物的上帝✌️)
接下来我们看一组图它就是连缀成串的,但不同的节奏给人感官非常不一样
二、点线面直接的变化
三、“线”的性格:
线针对心理上的影响比“点”更强烈,也更具有性格特点。不同种类的线有着不同的性格,在心理上形成的感受也不同。比如徒手画的自由的“线”,更具有很浓的人情味,表现更为感性和情绪化。
接下来我们来看看大佬们怎么运用这些原理的
大佬们的的确确把这些看似很简单的道理运用到极致
这样当大家再找到好看图又想吸取经验的时候就都不会迷茫了
如果你做完图总感觉很呆板,用这个【X破X】的办法检查哪里出问题了
一幅图
过多相同性质的线出现太多导致画面呆板【不可】
不同性质的线占比平均导致画面太乱【不可】
这个只能靠平时大量作图和看图来培养自己处理这些细节功力了
听着好绕啊。。。
其实并不绕,举个很简单的例子:综艺想必大家都看过
明星们都是要在里面疯狂坳人设的,那是导演要求的
为什么要坳人设,导演就是怕大家性格和表现都一样观众老爷们不会买账的
所以设计也一样呀
四、线”的引导性:
下面这个页面的所有线,都分别指引着你的视线往它想要你展现的信息上滑过去。
五、线的风格感受
线条的风格表现在线的宽窄样式和线的平直弯曲,这些形态上的变化,可以演绎出谨慎严肃,也能释放某种率性天真。
纤细的线
如下面导航中的细细的水平线,表达一种稳定精致的感受。目前在网页设计中也非常受欢迎,这类线条比较简洁,能和任何前景背景都混为一片,丰富细节又能引导用户的视觉方向。
常见在导航和按钮的设计里,扁平化传递某种精致感,首选是细细的直线,不夹杂私欲,有点“冷淡”的矜持。
·粗壮的线
较粗的直线,表达出一种稳定,稍微会引发紧张,放在文字下方有强调的作用。这其实是因为它能诱发你去依傍一个大只佬,由此带来的某种安全感。
·自然卷的线
说到曲线,很想提一提一百多年前的“新艺术”运动。由于当时的欧美进入工业化量产时代,所有的产品设计、平面设计因为经由机器大量生产,慢慢失去了对审美的追求,因此当时的某些平面设计的先驱们纷纷投入到一场反工业反粗俗的革新运动中,主动设计出大量带有此类反机械化,有手工业色彩的作品。
这场运动的灵感来源主要是中世纪的装饰艺术、日本的一些东方装饰风格和自然主义。他们提倡灵感来源于自然,因此他们设计出的作品都是以卷草图案等曲线为主的。我们可以看到,在我们的自然界里,没有一条是完全绝对的直线,叶、花、树叶、鸟、海浪、山川、河流……而直线恰恰是人类的作用痕迹:建筑、工业、日常用品的造型大都以直线为主,经过这番观察,你就可以大致了解,曲线是自然的表达式,当你想要传递与自然有关的信号时,就尽量不要用一些特别僵直的线条。
你看罗马建筑就超爱用大量卷曲的线。
一条一丝不苟的直线带来紧张,相对而言,曲线、波浪或卷曲的线条就象征着某种放松。在网页设计中,线的功能主要是指向作用,也必要需要一点紧张以期关注,因此,大部分我们能见到的线条都是直线,曲线比较少见。
曲折之美
折线是一个特殊的存在,因为它既不是直线,也不是曲线,它没有流畅感,却另有一番曲折的美感,一条单一的曲线能给的信息量不多,但如果是规律排列起来的曲线就能形成纹理,作为背景它并不突兀,而且能创造出某种曲折处的雅致效果。
最后那些复杂的UI组件其实没那么复杂
体会一个箭头里的线体魔力
从这枚箭头中,我们可以看到,通过线的视觉导向作用,最长的线引领你的视觉从左滑到右,而右端的箭头上的小尖角的作用更指向了右方。利用这个原理,你就能创作出更多的其他样式的箭头来引领视线。
最后来看看 Learn Squared大佬的操作