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