建站：網頁設計制作如何用好點線面

2021-05-23 分類：網站建設

設計的過程，或者形式的探討，始終繞不開的就是對于點線面的研究，看下平面構成的定義：視覺元素在二次元的平面上，按照美的視覺效果，力學的原理，進行編排和組合，它是以理性和邏輯推理來創造形象、研究形象與形象之間的排列的方法，是理性與感性相結合的產物。任何在設計中呈現的元素，我們都可以歸納到點線面的范疇，然后對三者的反復組合排列，形成設計語言，形式，美感。核心：元素與元素之間的排列關系，進而所有元素在一起所體現的構成形式。
一、點
體積小、分散、遠的、運動；大空間對比下小的、密集的。
1. 點的變化

網頁設計制作如何用好點線面

點在畫面中存在，通過大小，虛實，濃淡，多少的關系變化，都會影響視覺感受的強弱。這些變化可以形成線也可以形成面，或者依舊是點的變化。

網頁設計制作如何用好點線面

原點的大與小，虛與實，濃與淡。相比紅色，黃色是淡；同為紅色，漸變為虛。

2. 小結
有對比就有點；點不是單獨存在的；點用來豐富畫面和層次。
二、線
線具有位置。它是點的移動軌跡，是面與面的交界。
1. 線的變化

線的存在表現形式是微妙的，點的密集形成的運動軌跡可以視為線，不同顏色的面形成交界也可以存在線。同時線足夠短時，又可以變化為點，線的加粗又轉化為面。因此，點線面不是絕對存在的，是相對存在。

網頁設計制作如何用好點線面

下面重點闡述線的兩個重要特質，無形的線和有形的線。
無形的線
我認為這點尤為重要，其實一幅運營設計作品，基本上都包括圖像和文字，而文字本身在畫面中可以理解為點，通過這些點的組合，詞組和句子就形成了線（文字的長度、高度），很多時候就是這些線決定了畫面的核心。

為什么我們經常排版起來難看，就是因為沒有粗細、長短的對比。

網頁設計制作如何用好點線面

字形成隱形的線；不同大小，粗細，顏色的組合，形成線的粗細變化，分割畫面，進而形成有序的節奏。
視線

無形的線中還有一種很重要的表現形式——視線。很重要，很多時候內容設計的期望就是自然引導用戶去閱讀。人物的視線引導我們把視覺轉向文字。

網頁設計制作如何用好點線面

有形的線

清晰的線條讓畫面有速度感、層次感、豐富版式。

網頁設計制作如何用好點線面

2. 線的應用

3. 小結
不同的線能夠創造不同的感受；引導視覺；控制好線的使用，不要為線而線，造成畫面的組織混亂。
三、面
幾何學中線的移動軌跡。
面對畫面進行分割，得到層次感。也可以作為信息的載體，讓文字在畫面中更清晰地表現。
面可以分為：幾何形的面和不規則的面。
1. 幾何形的面

方、圓、三角、多邊形等幾何形狀，這些面可以傳遞有序、簡潔、穩定、速度等視覺心理感受。

網頁設計制作如何用好點線面

2. 不規則的面

實物（人物、墨跡、水花），不規則多邊形等等，應用方式更廣泛。其中規則面對畫面進行分割后，剩余空間本身也形成了一種面，可以理解為一種正負形的形式。對負空間的設計，對于整體畫面的風格和層次感的提升很關鍵，也需要更多的研究和體會。

3. 小結

大面積，視覺的重心；整體信息的依托。
案例
通過上面的示例介紹，我們應該可以建立起對點線面的基礎認識。下圖是對點線面在呈現信息內容時，承擔的職能意義。接下來讓我們更深入地研究和分析。

上圖的例子我們先觀察面，像之前總結的一樣：面，信息模塊的載體，構建畫面的基礎。上圖的例子通過大背景的區分，顏色與圖形的交織分布，信息骨架就此建立。

對這個設計繼續進行分析。線，加強視線的引導，強化/區分模塊關系。看上圖所示：標題作為無形的線，成為模塊區分的標識。在縱向方向上自然引導視線下移。
這個例子仔細分析后，并沒有所謂明顯的點元素的出現，再想想點的總結：點，打破節奏，增加氛圍。點的戲份不多也不重，隱含在每個模塊中去構建信息。
通過這個簡單例子的分析，大家是否對之前點線面的總結有一定的理解呢？再強調一遍：
面，信息模塊的載體，構建畫面的基礎；
線，加強視線的引導，強化/區分模塊關系；

點，打破節奏，增加氛圍。

（本文摘編自金山辦公用戶體驗中心）

名稱欄目：建站：網頁設計制作如何用好點線面
URL分享：http://m.kartarina.com/news14/114764.html

成都網站建設公司_創新互聯，為您提供虛擬主機、品牌網站制作、自適應網站、企業網站制作、電子商務、手機網站建設

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容