前言

線條是網(wǎng)頁設(shè)計(jì)中非常常見的一種構(gòu)成元素，線的性質(zhì)讓它能身兼數(shù)職，又不霸占視覺風(fēng)頭。上一次我們已經(jīng)討論過點(diǎn)的平面構(gòu)成之“點(diǎn)”睛的張力，這一次讓我們一起來到線的世界。

一、線是一個(gè)點(diǎn)的行跡

任何形都由線包圍而成，線就是一個(gè)二維生物里的產(chǎn)物，它有長(zhǎng)度、寬度，它甚至還能幫我們模擬三維的深度。你可以把線看成一個(gè)點(diǎn)的運(yùn)行軌跡，這個(gè)思路就可以幫你找到線的本質(zhì)：線是一條運(yùn)行軌跡，它是從點(diǎn)的基礎(chǔ)上發(fā)展而來的。

一條線也并不拘泥于就是平直的線條形式，只要能連綴成串的，我們都可以把它看成一條線，它就能在構(gòu)成中發(fā)揮起線的作用。藍(lán)色的圓點(diǎn)均勻分布，組成一條非常平靜的運(yùn)行軌跡線，紅色的圓點(diǎn)具有漸變的節(jié)奏，它們組成的線條則帶著幾分變速之感。

當(dāng)然，我們傳統(tǒng)的對(duì)于線的理解是這樣的，當(dāng)一個(gè)點(diǎn)向一個(gè)方向移動(dòng)時(shí)，就成為直線，當(dāng)點(diǎn)在移動(dòng)的過程中經(jīng)常變化方向，它就是曲線，當(dāng)點(diǎn)的移動(dòng)方向間隔變換，則為折線。

運(yùn)行軌跡就使得線具有了方向和動(dòng)感，尤其是線條的走向直接引導(dǎo)著用戶的視覺走向。

下面這個(gè)頁面的左右兩條垂直線，都分別指引著你的視線往它想要你展現(xiàn)的信息上滑過去。

頁面中軸的位置出現(xiàn)一條垂直的線，你會(huì)跟隨這條線自上而下的滑過。絕不遺漏掉任何頁面中間的信息。

二、線的風(fēng)格感受

線條的風(fēng)格表現(xiàn)在線的寬窄樣式和線的平直彎曲，這些形態(tài)上的變化，可以演繹出謹(jǐn)慎嚴(yán)肅，也能釋放某種率性天真。
 

纖細(xì)的線

如下面導(dǎo)航中的細(xì)細(xì)的水平線，表達(dá)一種穩(wěn)定精致的感受。目前在網(wǎng)頁設(shè)計(jì)中也非常受歡迎，這類線條比較簡(jiǎn)潔，能和任何前景背景都混為一片，豐富細(xì)節(jié)又能引導(dǎo)用戶的視覺方向。

常見在導(dǎo)航和按鈕的設(shè)計(jì)里，扁平化傳遞某種精致感，首選是細(xì)細(xì)的直線，不夾雜私欲，有點(diǎn)“冷淡”的矜持。

 

粗壯的線

較粗的直線，表達(dá)出一種穩(wěn)定，稍微會(huì)引發(fā)緊張，放在文字下方有強(qiáng)調(diào)的作用。這其實(shí)是因?yàn)樗苷T發(fā)你去依傍一個(gè)大只佬，由此帶來的某種安全感。

 

自然卷

說到曲線，很想提一提一百多年前的“新藝術(shù)”運(yùn)動(dòng)。由于當(dāng)時(shí)的歐美進(jìn)入工業(yè)化量產(chǎn)時(shí)代，所有的產(chǎn)品設(shè)計(jì)、平面設(shè)計(jì)因?yàn)榻?jīng)由機(jī)器大量生產(chǎn)，慢慢失去了對(duì)審美的追求，因此當(dāng)時(shí)的某些平面設(shè)計(jì)的先驅(qū)們紛紛投入到一場(chǎng)反工業(yè)反粗俗的革新運(yùn)動(dòng)中，主動(dòng)設(shè)計(jì)出大量帶有此類反機(jī)械化，有手工業(yè)色彩的作品。

這場(chǎng)運(yùn)動(dòng)的靈感來源主要是中世紀(jì)的裝飾藝術(shù)、日本的一些東方裝飾風(fēng)格和自然主義。他們提倡靈感來源于自然，因此他們?cè)O(shè)計(jì)出的作品都是以卷草圖案等曲線為主的。我們可以看到，在我們的自然界里，沒有一條是完全絕對(duì)的直線，葉、花、樹葉、鳥、海浪、山川、河流……而直線恰恰是人類的作用痕跡：建筑、工業(yè)、日常用品的造型大都以直線為主，經(jīng)過這番觀察，你就可以大致了解，曲線是自然的表達(dá)式，當(dāng)你想要傳遞與自然有關(guān)的信號(hào)時(shí)，就盡量不要用一些特別僵直的線條。

一條一絲不茍的直線帶來緊張，相對(duì)而言，曲線、波浪或卷曲的線條就象征著某種放松。在網(wǎng)頁設(shè)計(jì)中，線的功能主要是指向作用，也必要需要一點(diǎn)緊張以期關(guān)注，因此，大部分我們能見到的線條都是直線，曲線比較少見。

下面這個(gè)頁面中的小短波浪線，給整個(gè)畫面帶來一種活潑的氛圍。兩個(gè)不同的色塊的連接處，由于色彩的不同，在視覺上也能形成一條自上而下的直線。

這些仿佛隨手畫出的圈線，更貼近徒手繪制的痕跡，所謂“連接世界”的圓滿性更遠(yuǎn)離理性程式化，而是更傾向個(gè)人情緒化的表達(dá)。

 

曲折之美

折線是一個(gè)特殊的存在，因?yàn)樗炔皇侵本€，也不是曲線，它沒有流暢感，卻另有一番曲折的美感，一條單一的曲線能給的信息量不多，但如果是規(guī)律排列起來的曲線就能形成紋理，作為背景它并不突兀，而且能創(chuàng)造出某種曲折處的雅致效果。

折線是屬于理性世界的，但它又能比平行直線多一份優(yōu)雅。

三、線的作用

引導(dǎo)視覺方向

這可以說是線的最基礎(chǔ)的功能，由于它的這個(gè)作用才引發(fā)了下面的諸多作用。
 

封閉成形

用一根線條來組成一個(gè)圖形，我們可以稱之為簡(jiǎn)筆畫或者速寫，可以看出線條的成形能力，就算線條并沒有完全閉合，也可以自我完形，也即所謂的“腦補(bǔ)”。

 

分割與限制

大部分人想到線的第一功能，就是分割，劃分區(qū)域。這里需要注意的是，兩個(gè)不同色塊的交界，就算并沒有一條明顯的線條，也能產(chǎn)生一條線的視覺。

 

線的集合：紋理

很多線條排列在一起就形成一個(gè)面，可以作為紋理看待。因?yàn)榫€的指向功能，以及線與線的間隔所形成的節(jié)奏感，都能讓紋理傳遞出不同氛圍。

這就像我們偉大的魯迅先生寫過的他自己對(duì)服裝搭配的看法（沒錯(cuò)，是寫《朝花夕拾》的魯迅），胖人不能穿橫條紋服裝，瘦人最好別穿豎條紋，前者顯胖，拉寬視覺，后者拉長(zhǎng)視覺。（誰說學(xué)設(shè)計(jì)一定要看設(shè)計(jì)書呢，設(shè)計(jì)就是視覺，視覺來源于生活，別被“設(shè)計(jì)”兩個(gè)字嚇到了）

橫向的疏密間距相等的線容易形成紋理的面，而不同的間距增加了視覺深度。

四、體會(huì)一個(gè)箭頭里的線體魔力

我們要體會(huì)一條線的玩法，可以試著畫一個(gè)箭頭。大家知道普通的箭頭長(zhǎng)成這樣，網(wǎng)頁中一個(gè)可能毫不起眼的ICON。

從這枚箭頭中，我們可以看到，通過線的視覺導(dǎo)向作用，最長(zhǎng)的線引領(lǐng)你的視覺從左滑到右，而右端的箭頭上的小尖角的作用更指向了右方。利用這個(gè)原理，你就能創(chuàng)作出更多的其他樣式的箭頭來引領(lǐng)視線。

它的變化可以是無窮盡的，要選用哪一種樣式，全看你的整體設(shè)計(jì)風(fēng)格。在這條路上，折騰越多時(shí)間越有收獲。

后記

每次后記都有點(diǎn)無關(guān)痛癢，沒有又好像欠缺。啰里啰唆不好，不拿出點(diǎn)干貨又欠缺誠(chéng)意。事實(shí)上，我覺得學(xué)設(shè)計(jì)就是一個(gè)打開你的視覺通道的過程，顏色、排版……這些理論都只是一個(gè)理論框架，理論本身不是目的，現(xiàn)實(shí)生活才是。一直關(guān)注我們，我們會(huì)繼續(xù)談?wù)摳嚓P(guān)于我們一直誤會(huì)的設(shè)計(jì)。