2.3　UI界面中的裝飾線條

線條是UI界面設計中常見的一種裝飾性元素，線條的性質讓其既能夠身兼數職，又不獨占視覺效果。

2.3.1　點與線的關系

任何形狀都由線條包圍而成的。線條是一個二維空間的產物，它有長度、寬度，甚至還可以模擬三維的深度。可以將線條看成一個點的運行軌跡，這個思路可以幫助我們理解線條的本質。簡單來說，線條是一條運行的軌跡，它是在點的基礎上發展而來的。

提示

線的運動軌跡并不是一直平直的，只要能連綴成串的，都可以把它看成一條線。這時，它就能在界面的構成中發揮作用。

當藍色的圓點均勻分布，組成一條非常平靜的運行軌跡線，當藍色圓點的運行軌跡具有變速的節奏時，它們組成的線條則帶有變速之感。如圖2-14所示為點與線的關系。

大眾對于線的理解還處于傳統認知時，就會認為當一個點向一個方向移動時，就成為直線；當點在移動的過程中經常變化方向，它就是曲線；當點的移動方向間隔變換，則為折線。如圖2-15所示為傳統線條的分類。

提示

運行軌跡會使線條具有方向感和動感，尤其是在UI 界面設計中，線條的走向直接引導著用戶的視覺走向。

2.3.2　線條風格的變化

線條的風格表現在線的寬窄樣式和線的平直彎曲樣式上，這些形態上的變化，可以使線條在UI界面設計中演繹出謹慎嚴肅的感覺，也能演繹出率性天真的感覺。

●細線條

如圖2-16所示的UI界面中細細的裝飾線條，表達了一種穩定、精致的感受。這種裝飾線條目前在UI界面設計中比較受歡迎。因為這類線條簡潔，能與任何前景或背景圖形進行融合，既豐富了界面的細節，又能引導用戶的視覺方向。

在常見的UI界面設計中，扁平化風格的設計傳遞著某種精致感。而扁平化的設計風格在線條的選擇上，首選就是細細的直線，不夾雜私欲，有點“冷淡”的矜持，如圖2-17所示。

●粗線條

在UI界面設計中，使用較粗的直線裝飾界面時，可以表達出一種穩定感。但是如果粗線條單獨使用，則可能會引發用戶的緊張感。所以，粗線條一般放在文字下方或者文字左右兩端，起強調的作用。

粗線條所表達出的緊張感和穩定感，都是因為它能引導用戶的視線，讓線條和界面中一個面積較大的裝飾元素互為整體，從而體現出UI界面的安全感，如圖2-18所示。

●自然卷

直線會給用戶帶來緊張感，那么，曲線、波浪或卷曲的線條就會讓用戶進入一種放松的環境中。

在UI界面設計中，線條的主要功能除了裝飾頁面，還帶有一定的指向作用。在界面中必須需要一點緊張感才能讓瀏覽者關注頁面，因此，大部分UI界面中的線條都是直線，而曲線比較少見。

如圖2-19所示的UI界面，處于中心位置的曲線圖案，給整個畫面帶來一種活潑的氛圍。而且透底的曲線圖案，由于底襯圖片的不斷變換，為瀏覽者帶來不同的視覺效果。

知識鏈接

曲線的發展由來

說到曲線，就必須科普一下一百多年前的“新藝術”運動。由于當時的歐美進入工業化量產時代，所有的產品設計、平面設計因為經由機器大量生產，慢慢失去了對審美的追求，因此當時的部分平面設計的先驅們紛紛投入到一場反工業、反粗俗的革新運動中，主動設計出大量帶有此類反機械化，并且有手工業色彩的作品。

這場運動的靈感來源主要是中世紀的裝飾藝術、日本的一些東方裝飾風格和自然主義。他們提倡靈感來源于自然，因此他們設計出的作品都是以卷草圖案等曲線為主的。用戶可以看到在自然界里，沒有任何一條線是完全絕對的直線，如葉、花、樹葉、鳥、海浪、山川、河流……

直線恰恰是人類作用的痕跡，建筑、工業、日常用品的造型大都以直線為主。經過這番觀察，可以大致了解，曲線是自然的表達式，當用戶想要傳遞與自然有關的信號時，就盡量不要用一些特別僵直的線條。

●曲線美

折線在線條的形式當中是一個特殊的存在，因為它既不是直線，也不是曲線，它沒有流暢感，卻另有一番曲折的美感。

一條單一的折線傳遞的信息量不多，但如果是規律排列起來的折線就能形成紋理，不管是作為背景還是裝飾物，它都不會顯得突兀，而且能創造出一種另類的視覺效果。如圖2-20所示為采用折線紋理的UI界面。

提示

在UI 界面設計中，折線是屬于理性范圍內的裝飾物，但它又比平行直線多一份優雅，使UI 界面不那么刻板。

2.3.3　裝飾線條的作用

線條在UI界面中除了裝飾作用，在視覺上，還具有三方面的作用。

●引導視覺方向

視覺引導作用是線條最基礎的視覺功能，也是其他兩個作用的基礎。

●封閉成形

用一根線條來組成一個圖形，稱為“簡筆畫”或者“速寫”。從這里可以看出線條的成形能力，就算線條并沒有完全閉合，也可以自我填補，反映在用戶的視覺中時，將會形成一個完整的圖形。

●分割與限制

線條的視覺作用，大部分人想到的就是分割，即“劃分區域”。這里需要注意的是，兩個不同色塊的交界，就算并沒有一條明顯的線條，也能產生一條線的視覺感受。如圖2-21所示為UI界面中的色塊線條分割法。