平面构万物-【线】

前言

线条是网页设计中非常常见的一种构成元素,线的性质让它能身兼数职,又不霸占视觉风头。上一次我们已经讨论过点的平面构成之“点”睛的张力,这一次让我们一起来到线的世界。

把这些最最最最最基础,看上去不难的知识点吃透且灵活运用你会发现,大佬做的图其实就是看上去复杂。

基本靠线构成的页面

一、线是一个点的行迹

任何形都由线包围而成,线就是一个二维里的产物,它有长度、宽度,它甚至还能帮我们模拟三维的深度。你可以把线看成一个点的运行轨迹,那么这个思路就可以帮你找到线的本质:线是一条运行轨迹,它是从点的基础上发展而来的。


一条线也并不拘泥于就是平直的线条形式,只要能连缀成串的,我们都可以把它看成一条线,它就能在构成中发挥起线的作用。(把这个道理吃的透透的你就是造物的上帝✌️)

接下来我们看一组图它就是连缀成串的,但不同的节奏给人感官非常不一样

蓝色的圆点均匀分布,组成一条非常平静的运行轨迹线                                                            红色的圆点具有渐变的节奏,它们组成的线条则带着几分变速之感。

二、点线面直接的变化

线具备长但不宽不厚的特点,只能与一定的宽度表现,点线面不是绝对存在的,万物皆为对比而出。


三、“线”的性格:

线针对心理上的影响比“点”更强烈,也更具有性格特点。不同种类的线有着不同的性格,在心理上形成的感受也不同。比如徒手画的自由的“线”,更具有很浓的人情味,表现更为感性和情绪化。



接下来我们来看看大佬们怎么运用这些原理的

大佬们的的确确把这些看似很简单的道理运用到极致

这样当大家再找到好看图又想吸取经验的时候就都不会迷茫了


线的规则性让整体画面有一致的方向感,达到一种愉悦舒适的感受。【直破弯】
曲线的运用贯穿整个页面,打破了整齐的文字排版,打破了乏味的基调。【弯破直】
上面这幅书籍封面通过田野线条的纵向延伸,同时使用负空间将观看者的注意力引向The Wealth of Nations这一标题,线在画面中具有很强的引导性。【横破纵】

如果你做完图总感觉很呆板,用这个【X破X】的办法检查哪里出问题了

一幅图

过多相同性质的线出现太多导致画面呆板【不可】

不同性质的线占比平均导致画面太乱【不可】

这个只能靠平时大量作图和看图来培养自己处理这些细节功力了

听着好绕啊。。。

其实并不绕,举个很简单的例子:综艺想必大家都看过

明星们都是要在里面疯狂坳人设的,那是导演要求的

为什么要坳人设,导演就是怕大家性格和表现都一样观众老爷们不会买账的

所以设计也一样呀

四、线”的引导性:

下面这个页面的所有线,都分别指引着你的视线往它想要你展现的信息上滑过去。



五、线的风格感受

线条的风格表现在线的宽窄样式和线的平直弯曲,这些形态上的变化,可以演绎出谨慎严肃,也能释放某种率性天真。

纤细的线

如下面导航中的细细的水平线,表达一种稳定精致的感受。目前在网页设计中也非常受欢迎,这类线条比较简洁,能和任何前景背景都混为一片,丰富细节又能引导用户的视觉方向。


常见在导航和按钮的设计里,扁平化传递某种精致感,首选是细细的直线,不夹杂私欲,有点“冷淡”的矜持。



·粗壮的线

较粗的直线,表达出一种稳定,稍微会引发紧张,放在文字下方有强调的作用。这其实是因为它能诱发你去依傍一个大只佬,由此带来的某种安全感。


·自然卷的线

说到曲线,很想提一提一百多年前的“新艺术”运动。由于当时的欧美进入工业化量产时代,所有的产品设计、平面设计因为经由机器大量生产,慢慢失去了对审美的追求,因此当时的某些平面设计的先驱们纷纷投入到一场反工业反粗俗的革新运动中,主动设计出大量带有此类反机械化,有手工业色彩的作品。


这场运动的灵感来源主要是中世纪的装饰艺术、日本的一些东方装饰风格和自然主义。他们提倡灵感来源于自然,因此他们设计出的作品都是以卷草图案等曲线为主的。我们可以看到,在我们的自然界里,没有一条是完全绝对的直线,叶、花、树叶、鸟、海浪、山川、河流……而直线恰恰是人类的作用痕迹:建筑、工业、日常用品的造型大都以直线为主,经过这番观察,你就可以大致了解,曲线是自然的表达式,当你想要传递与自然有关的信号时,就尽量不要用一些特别僵直的线条。


新艺术运动著名画家Alphonse Mucha
大量运用曲线来表达自然、自由、x无约束


这幅画大量的弯直对比,很多插画家都特别爱这种对比

你看罗马建筑就超爱用大量卷曲的线。



包括整体看上去很直的罗马柱 里面小元素都是很多弯曲的线组成

一条一丝不苟的直线带来紧张,相对而言,曲线、波浪或卷曲的线条就象征着某种放松。在网页设计中,线的功能主要是指向作用,也必要需要一点紧张以期关注,因此,大部分我们能见到的线条都是直线,曲线比较少见。


曲折之美

折线是一个特殊的存在,因为它既不是直线,也不是曲线,它没有流畅感,却另有一番曲折的美感,一条单一的曲线能给的信息量不多,但如果是规律排列起来的曲线就能形成纹理,作为背景它并不突兀,而且能创造出某种曲折处的雅致效果。


最后那些复杂的UI组件其实没那么复杂

体会一个箭头里的线体魔力

我们要体会一条线的玩法,可以试着画一个箭头。大家知道普通的箭头长成这样,网页中一个可能毫不起眼的ICON。

从这枚箭头中,我们可以看到,通过线的视觉导向作用,最长的线引领你的视觉从左滑到右,而右端的箭头上的小尖角的作用更指向了右方。利用这个原理,你就能创作出更多的其他样式的箭头来引领视线。


创作的时候还是把之前提到的【X破X】用上喔!

最后来看看 Learn Squared大佬的操作

全是纯英文教程(论学英语重要性)

HUD Design + Animation预告片(learn squared 出品)

日本百乐圆珠笔广告]从未如此丝滑

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容