設計的過程,或者形式的探討,始終繞不開的就是對于點線面的研究,看下平面構成的定義:視覺元素在二次元的平面上,按照美的視覺效果,力學的原理,進行編排和組合,它是以理性和邏輯推理來創造形象、研究形象與形象之間的排列的方法,是理性與感性相結合的產物。任何在設計中呈現的元素,我們都可以歸納到點線面的范疇,然后對三者的反復組合排列,形成設計語言,形式,美感。核心:元素與元素之間的排列關系,進而所有元素在一起所體現的構成形式。
一、點
體積小、分散、遠的、運動;大空間對比下小的、密集的。
1. 點的變化
網頁設計制作如何用好點線面
點在畫面中存在,通過大小,虛實,濃淡,多少的關系變化,都會影響視覺感受的強弱。這些變化可以形成線也可以形成面,或者依舊是點的變化。
原點的大與小,虛與實,濃與淡。相比紅色,黃色是淡;同為紅色,漸變為虛。
2. 小結
有對比就有點;點不是單獨存在的;點用來豐富畫面和層次。
二、線
線具有位置。它是點的移動軌跡,是面與面的交界。
1. 線的變化
?線的存在表現形式是微妙的,點的密集形成的運動軌跡可以視為線,不同顏色的面形成交界也可以存在線。同時線足夠短時,又可以變化為點,線的加粗又轉化為面。因此,點線面不是存在的,是相對存在。
下面重點闡述線的兩個重要特質,無形的線和有形的線。
無形的線
我認為這點尤為重要,其實一幅運營設計作品,基本上都包括圖像和文字,而文字本身在畫面中可以理解為點,通過這些點的組合,詞組和句子就形成了線(文字的長度、高度),很多時候就是這些線決定了畫面的核心。
為什么我們經常排版起來難看,就是因為沒有粗細、長短的對比。
字形成隱形的線;不同大小,粗細,顏色的組合,形成線的粗細變化,分割畫面,進而形成有序的節奏。
視線
無形的線中還有一種很重要的表現形式——視線。很重要,很多時候內容設計的期望就是自然引導用戶去閱讀。人物的視線引導我們把視覺轉向文字。
有形的線
清晰的線條讓畫面有速度感、層次感、豐富版式。
2. 線的應用
3. 小結
不同的線能夠創造不同的感受;引導視覺;控制好線的使用,不要為線而線,造成畫面的組織混亂。
三、面
幾何學中線的移動軌跡。
面對畫面進行分割,得到層次感。也可以作為信息的載體教育類行業網站制作,讓文字在畫面中更清晰地表現。
面可以分為:幾何形的面和不規則的面。
1. 幾何形的面
方、圓、三角、多邊形等幾何形狀,這些面可以傳遞有序、簡潔、穩定、速度等視覺心理感受。
2. 不規則的面
實物(人物、墨跡、水花),不規則多邊形等等,應用方式更廣泛。其中規則面對畫面進行分割后,剩余空間本身也形成了一種面,可以理解為一種正負形的形式。對負空間的設計,對于整體畫面的風格和層次感的提升很關鍵,也需要更多的研究和體會。
3. 小結
大面積,視覺的重心;整體信息的依托。
案例
通過上面的示例介紹,我們應該可以建立起對點線面的基礎認識。下圖是對點線面在呈現信息內容時,承擔的職能意義。接下來讓我們更深入地研究和分析。
上圖的例子我們先觀察面,像之前總結的一樣:面,信息模塊的載體,構建畫面的基礎。上圖的例子通過大背景的區分,顏色與圖形的交織分布,信息骨架就此建立。
對這個設計繼續進行分析。線,加強視線的引導,強化/區分模塊關系。看上圖所示:標題作為無形的線OPPO,成為模塊區分的標識。在縱向方向上自然引導視線下移。
這個例子仔細分析后,并沒有所謂明顯的點元素的出現,再想想點的總結:點,打破節奏,增加氛圍。點的戲份不多也不重,隱含在每個模塊中去構建信息。
通過這個簡單例子的分析桔子科技,大家是否對之前點線面的總結有一定的理解呢?再強調一遍:
面,信息模塊的載體,構建畫面的基礎;
線,加強視線的引導,強化/區分模塊關系;
點,打破節奏,增加氛圍。
一、點
體積小、分散、遠的、運動;大空間對比下小的、密集的。
1. 點的變化
網頁設計制作如何用好點線面
點在畫面中存在,通過大小,虛實,濃淡,多少的關系變化,都會影響視覺感受的強弱。這些變化可以形成線也可以形成面,或者依舊是點的變化。
原點的大與小,虛與實,濃與淡。相比紅色,黃色是淡;同為紅色,漸變為虛。
2. 小結
有對比就有點;點不是單獨存在的;點用來豐富畫面和層次。
二、線
線具有位置。它是點的移動軌跡,是面與面的交界。
1. 線的變化
?線的存在表現形式是微妙的,點的密集形成的運動軌跡可以視為線,不同顏色的面形成交界也可以存在線。同時線足夠短時,又可以變化為點,線的加粗又轉化為面。因此,點線面不是存在的,是相對存在。
下面重點闡述線的兩個重要特質,無形的線和有形的線。
無形的線
我認為這點尤為重要,其實一幅運營設計作品,基本上都包括圖像和文字,而文字本身在畫面中可以理解為點,通過這些點的組合,詞組和句子就形成了線(文字的長度、高度),很多時候就是這些線決定了畫面的核心。
為什么我們經常排版起來難看,就是因為沒有粗細、長短的對比。
字形成隱形的線;不同大小,粗細,顏色的組合,形成線的粗細變化,分割畫面,進而形成有序的節奏。
視線
無形的線中還有一種很重要的表現形式——視線。很重要,很多時候內容設計的期望就是自然引導用戶去閱讀。人物的視線引導我們把視覺轉向文字。
有形的線
清晰的線條讓畫面有速度感、層次感、豐富版式。
2. 線的應用
3. 小結
不同的線能夠創造不同的感受;引導視覺;控制好線的使用,不要為線而線,造成畫面的組織混亂。
三、面
幾何學中線的移動軌跡。
面對畫面進行分割,得到層次感。也可以作為信息的載體教育類行業網站制作,讓文字在畫面中更清晰地表現。
面可以分為:幾何形的面和不規則的面。
1. 幾何形的面
方、圓、三角、多邊形等幾何形狀,這些面可以傳遞有序、簡潔、穩定、速度等視覺心理感受。
2. 不規則的面
實物(人物、墨跡、水花),不規則多邊形等等,應用方式更廣泛。其中規則面對畫面進行分割后,剩余空間本身也形成了一種面,可以理解為一種正負形的形式。對負空間的設計,對于整體畫面的風格和層次感的提升很關鍵,也需要更多的研究和體會。
3. 小結
大面積,視覺的重心;整體信息的依托。
案例
通過上面的示例介紹,我們應該可以建立起對點線面的基礎認識。下圖是對點線面在呈現信息內容時,承擔的職能意義。接下來讓我們更深入地研究和分析。
上圖的例子我們先觀察面,像之前總結的一樣:面,信息模塊的載體,構建畫面的基礎。上圖的例子通過大背景的區分,顏色與圖形的交織分布,信息骨架就此建立。
對這個設計繼續進行分析。線,加強視線的引導,強化/區分模塊關系。看上圖所示:標題作為無形的線OPPO,成為模塊區分的標識。在縱向方向上自然引導視線下移。
這個例子仔細分析后,并沒有所謂明顯的點元素的出現,再想想點的總結:點,打破節奏,增加氛圍。點的戲份不多也不重,隱含在每個模塊中去構建信息。
通過這個簡單例子的分析桔子科技,大家是否對之前點線面的總結有一定的理解呢?再強調一遍:
面,信息模塊的載體,構建畫面的基礎;
線,加強視線的引導,強化/區分模塊關系;
點,打破節奏,增加氛圍。
- 上一篇: 做網站時必知的網頁設計技巧
- 下一篇: 為什么我的網站備案沒有通過?