線是最基礎的，也是設計中最常見的，希望這篇文章對大家有所幫助。

一、線的概念

線是點運動的軌跡。幾何學上的線只有長度和方向，沒有粗細、寬窄、厚薄和形狀之分。平面構成中，線的主要作用是強調方向和長度，并用以引導視線。

二、線的分類與情感色彩

在平面造型中，線比點更具有感情色彩，這主要體現在長短、粗細、曲線和虛實。線總體上可以分為直線和曲線兩類。直線可分為豎線、橫線、斜線、折線、放射線等。曲線可分為S曲線、弧線、螺旋線等。

1. 直線

直線讓人聯想到巍峨的山脈、高達的建筑物、參天大樹等。直線是男性的象征，簡單明快，給人一種穩定、冷峻和堅強的感覺，富有速度感和緊張感，是一種力量的美。

豎線

為什么一根豎線會立著？一種情況就是沒有任何的力施加在上面；另一種情況就是所以施加的力正好相互抵消，所以它才可以穩穩的立在那里。

照片拍攝的是上海陸家嘴、上海中心大廈和環球金融中心，雖然是個很高很雄偉的建筑，但是它們豎立在城市中央卻給人一種安靜、穩定的感覺。

上圖拍攝的倆頭豹子，豹子平時給的人感覺是很兇猛，當豎線構圖時卻給人一種安穩、親密，不會讓人產生恐懼。

上圖是 Walid Beno 的設計作品，他也是用的豎線的構圖方式，建筑有高有低錯落開來，加上冷暖配色的對比，能突出城市很有秩序積極向上的感覺。

豎線給人的感覺是「下落、上升、挺拔、穩定、刻板、剛毅、有力、親密、利索、肅穆......」

橫線

橫線也同樣，它不需要任何的力就能保持水平狀態，也可以因為是上下的力同時抵消達到水平狀態。

拍攝青海湖的一張照片，天空、湖面、地面都在同一條水平線上，給人很安逸、干凈、舒適的感覺。

上圖小魔女007畫的一張插圖，插圖中天空、湖面、地面、汽車、人物差不多都在同一水平線上，能感覺到大家在短暫的假期中旅游享受著安逸、舒適，長時間的工作讓大家失去了年輕人那時候活潑調皮的一面，畫面給人一種沉著、理性、安靜、舒適的感覺。

橫線給人的感覺是「安定、平穩、沉著、理性、干凈、整齊、中規中矩、安靜、穩定、安全、波瀾不驚、無聊......」

斜線

斜線受到的力并不穩定，才會出現斜線的狀態，具有動勢、上升下降連續狀態的運動感，富有朝氣。

上圖是一張攝影照片，畫面都整齊劃一的傾斜，給人一種干凈、力量、動感的感覺。

一個棒球運動的網頁設計，傾斜的感覺可以增加畫面的運動和力量之美，還能起到分割畫面的作用。

斜線給人的感覺是「活潑、傾斜、運動、不安定、動感、力量、刺激、危險......」

折線

折線本來是一根直線，不屈服于外面施加力而形成的。

北京的鳥巢，它的外輪廓就是用了大量折線構成的，給人一種剛毅、對抗、力量、不屈服的精神，這種精神也代表了奧林匹克精神。

閃電的照片，閃電就是大量的折線構成的，給人危險、緊張的感覺。

UI界面設計，地圖中用了折線做指引，給人一種明確指引，更加的突出。

折線給人的感覺是「緊張、不屈服、剛毅、對抗、力量、沖突......」

放射線

放射線有極大的沖擊力，有往里聚集也有往外噴發的力量。

我們小時候看包青天的時候，經常出現這樣的圖片，太陽發出來發射線的光，代表著希望、威武、神圣，老百姓都希望得到公平公正。

我們小時候看的動畫片灌籃高手，有一個很厲害的阿里設計師UISTAR就用的這個圖片作為頭像，頭像中放射狀聚焦自我，動不動就自戀，很符合櫻木花道的性格。

banner圖，放射線在 banner 設計中經常被用到，它有強調、聚集、突出的作用。

放射線給人的感覺是「強調、聚集、突出、速度、發射、力量、方向、沖擊......」

2. 曲線

曲線是女性的象征，讓人想起潺潺流水、風擺春柳等。與直線的冷峻、硬朗不同，曲線是溫暖而柔美的，易產生豐滿、輕快、跳躍、流動而自由的感覺，發散而靈活，充滿生命力。

S型曲線

S型曲線原本是條直線，由于施加在它身上的力的不同，而且它本身柔軟的順應這個力的，是一種包容的美。

一張美女的照片，很多女生都希望自己有 S型曲線，S型曲線符合人體美學，給人舒適愉悅的女性魅力。

上圖是網頁設計，S型構圖在網頁設計中能引導視覺，合理的分類信息能給人明快愉悅的沉浸感。

S型曲線給人的感覺是「柔軟、女性、包容、成長、舒適、愉悅、安全、母愛......」

弧線

弧線還可以細分為拋物線和圓弧。

一張鳥展開羽毛的照片，鳥兒展開的羽毛正好展開一張弧線，很優雅自然，豐滿有張力。

UI設計中用到的弧線，正常情況下弧線表示進度、百分比，給人一種積極向上的努力的態度。

弧線給人的感覺是「彈性、豐滿、張力、生命力、果敢、優雅、力量、規律......」

螺旋線

螺旋線是一邊前進時受到了側邊力的擠壓，如果它的外面始終都有外界施加的力就形成了螺旋線。

一個樓梯的螺旋線，很自然，有韻律，也很符合黃金螺旋線的美感。

上圖是 Mike 大神設計的網頁，在 banner 上半部分，視覺的重心也完全符合黃金分割中的興趣點。讓畫面很有張力也增加了韻律。

螺旋線給人的感覺是「神秘、神圣、韻律、引力、謎團、眩暈、優雅......」

自由曲線

上圖是是蘇適的一幅書法作品，代表著放蕩不羈、自由灑脫的性格。

自由曲線給人的感覺是「自由、浪漫、灑脫、靈性......」

3. 隱藏的視「線」

隱藏的視「線」多指人的視線。

圖中兩個人物眼睛對視產生一條隱形的線。對視中眼神透入著希望、溫柔、包容。

隱藏的視「線」給人的感覺是「希望、活力、自信、神圣、溫柔、包容、智慧......」

三、線在設計中的常見應用

1. 以線塑型

以線塑型即運用線的粗細、疏密來表現畫面的明暗關系及結構，從而塑造出物象的形體輪廓。

用線條在繪制人像，首先是需要深厚的繪畫功底，還要體現放蕩不羈灑脫的畫面感，雖然我們不能畫出來，但是我們可以觀察里面的結構和明暗關系。

上圖這種很適合初學者，對著照片快速的提煉人物或物體的形態，適當的排排版面，讓畫面看上去更豐富。

一幅好的插畫，前期也要很好的去構圖，用鋼筆工具繪制好路徑，讓線條看上去流暢，簡單的交代明暗關系。

2. 高度概括，簡潔明了

在攝影中經常能看到這種高度概括的光影關系，很簡潔明了，也很干凈舒適，粗細的曲線給人一種流動感，很大氣。

一筆畫 icon，在繪制這種 icon 也很考驗設計的功底，明快簡單的勾勒出大體的線條，還要讓畫面有一種統一感。

3. 提示強調，突出重點

上圖是 MBE 大神的作品，他把線條用黑色或者深色來高度提煉輪廓，來保障畫面的統一。

奔跑的包子插畫鋪作品，他跟 MBE 一樣在用了黑色線條的基礎上加粗了線條，來起到突出強調的作用。

網頁設計，用方框的線條來區分信息，加強并突出。畫面中好幾個方框通過大小對比再次突出重點。

是網頁設計，用短線條來提示標注標題，畫面中用重復的短線給人統一的感覺。

4. 分割信息

app界面，通過線的分割讓畫面更清晰，層次更明確。

上圖是網頁，畫面中的線條不但有分割的作用，橙色的顯示還有交互含義。

5. 使畫面更柔美

上面兩張圖都是 UI設計，曲線運用恰到好處，讓畫面更有節奏感和韻律，沒有呆板的感覺。

兩張圖都是通過曲線來豐富畫面。更加的柔軟有親和力，讓畫面更加飽和。

6. 視覺引導

上圖的信息分類的引導，有序的進行信息分類，通過線條指引代表先后順序讓畫面更流暢。

地圖中線條指引可以讓用戶快速的從出發地到達目的地。簡單明了。

網頁中也可以通過改變線條的色彩，按照色彩順序有序的排列指引。

7. 交互動效引導

動效中的線條正常都是指引的作用，從一端開始從另一端結束，引導用戶的眼睛按照線條變化走動。

△ 通過線條來顯示當地 Tab 頁面，改變 tab 頁線條也跟著變動

總結

線的情感色彩：

• 豎線給人的感覺是「下落、上升、挺拔、穩定、刻板、剛毅、有力、親密、利索、肅穆......」
• 橫線給人的感覺是「安定、平穩、沉著、理性、干凈、整齊、中規中矩、安靜、穩定、舒適、波瀾不驚、無聊......」
• 斜線給人的感覺是「活潑、傾斜、運動、不安定、動感、力量、刺激、危險......」
• 折線給人的感覺是「緊張、不屈服、剛毅、對抗、力量、指引、沖突......」
• 放射線給人的感覺是「強調、聚集、威武、神圣、突出、速度、發射、力量、方向、沖擊......」
• S型曲線給人的感覺是「柔軟、女性、包容、成長、舒適、愉悅、安全、母愛......」
• 弧線給人的感覺是「彈性、豐滿、張力、生命力、果敢、優雅、力量、規律......」
• 螺旋線給人的感覺是「神秘、神圣、韻律、引力、謎團、眩暈、優雅......」
• 自由曲線給人的感覺是「自由、浪漫、灑脫、靈性......」
• 隱藏的視「線」給人的感覺是「希望、活力、自信、神圣、溫柔、包容、智慧.....」

線在設計中的應用：

以線塑型／高度概括，簡潔明了／提示強調，突出重點／分割信息／使畫面更柔美／視覺引導／交互動效引導

圖片聲明：圖片來源于網絡，如涉及到侵權的聯系我刪除，謝謝。

歡迎關注作者的微信公眾號：「水手哥」

圖片素材作者：Charis Tsevis

「線條在設計中的使用」

• 《如何巧用線條，讓你的Banner 更有設計感？》
• 《喲喲喲！學會點線面，排版好方便！》
• 《設計基礎功！聊聊平面構成中的點線面（超多案例）》