線條是一種簡單、輕盈的存在，可以看作是點受外驅力作用下的運動軌跡。它從維度上來說屬于一維，不同的外驅力結合使得線可以沿著任意方向自由得延伸，從而讓它擁有了高效的引導性、分割性和造型性。

上期回顧：

康定斯基在書中以溫度去定義線的情感，他將水平線定義為無限冷能的表現形式，將垂直線定義為無限暖能的表現形式。看似晦澀難懂，但聯系到現實生活就相對容易理解一點。

現實生活中的水平線通常存在于地平線中，因此給人的感覺是穩定、平和，類似非啟動時的「冷」態；而垂直線常見于那些從基線建造、生長的事物，比如高樓大廈、參天巨木，它們都通過能量來實現垂直方向的高低變化，因此給人的感覺是上升、下落、變化等感覺，類似啟動后的「暖」態。而線具備的冷暖態決定了水平和垂直線發揮各自作用時所傳達的感受。

引導性

線可沿任意方向延伸的特點讓它具備了很強的引導性。界面中最常見的就是跑步、地圖類app中的路線顯示，就是通過線的引導性來顯示起點到終點所行進的軌跡。

如果我們將起點和終點對齊歸于一條線上時，便可以通過降維的方式將其縮減至單個維度。時間維度可以引申到界面中的時間軸、步驟條、加載條和音視頻中的進度條等，這類維度通常需要加入點元素，通過點的向心性輔助定位。空間維度則引申到滑動頁面時出現的滾動條等。

如上文對溫度的解釋，「暖」態的垂直線象征變化。當我們希望用戶能夠感知到時間的變化，或者流程需要花費較長時間時，垂直線相對來說是個更好的選擇。比如外賣、快遞的訂單進度，火車的停靠站點時間，timeline，到賬時間等信息，要么需要傳達變化感，要么費時較長，因此適合以象征變化的垂直線來進行引導，給予用戶變化感、產生需要等待的心理預期。

「冷」態的水平線象征靜止。當我們希望用戶能夠沉浸在這個流程中，感知不到時間的變化，或者流程時間極短時，那就更適合用水平線。

比如Airbnb申請成為房東時，會有個需要用戶即時填寫的分頁表單，為了讓用戶沉浸在填寫中，同樣以水平線作為它的進度反饋，降低時間變化感。美團藥師的審方進度是即時性的，通常只需等待十幾秒即可水平的靜止感能夠讓用戶產生「當前正在發生」的感覺，避免讓用戶產生需要等待較長時間的心理預期而離開當前頁面。

但是，如果我們將美團審方的進度條改為縱向（去除文案提示），給用戶帶來的感覺也就大不相同。

下文講到的分割性也可以以冷暖態來解釋。我們希望用戶能夠專心閱讀信息，因此會盡量避免容易帶來變化感的垂直分割線。即便迫于信息的劃分需要不得不用到，也會盡量降低它的明度和長度。

另外，界面中往往也存在著一條無形的線，它同樣也是起著重要的引導作用，只是這類線不僅僅作用于某個特定模塊，它通常作用于整個界面。沒錯，這條線通常被稱作視覺動線。視覺動線在網格與列表那一節中簡單說了下，只是這部分體系太過龐大，后面有時間單獨寫一篇分享。

分割性

很多時候，界面中僅僅以留白進行分隔時，很容易造成信息無法被明確得劃分。這時我們往往需要引入額外的形式進行輔助。比如分割線。

分割線通常運用在模塊內部信息的分割，雖簡單粗暴，但并不能應付更高層級的模塊分割。而模塊之間的分割通常以面性（分割條）來進行。留白、分割線和分割條三者的分割層級由低到高，通常需要在頁面中結合使用。

需要注意的是，線面的分割形式需要盡可能得輕量化，一旦擁有了視覺重量很容易成為噪音，我們需要盡量避免信噪比過低對用戶閱讀體驗的破壞。

為了增加頁面的呼吸感，我們很多時候會用留白這種最為輕量的分割方式代替所有的線、面。這類大留白的特點往往與Complexion Reduction風格相結合，視覺上不僅制造一種舒適的簡約感和呼吸感，也減少了頁面中線面分割形成的視覺噪音。

Complexion Reduction最早源自Airbnb、Instagram、Medium等產品的頁面改版，而后被UX設計師Michael Horton所總結出的設計趨勢。蘋果在17年所發布的iOS 11同屬于這個風格，這類風格最突出的三個特征就是大標題、面性圖標和克制用色。

但是，這種去形式化的分割方法并非適用于全部頁面，一般只有在頁面模塊單一、信息單元字段較少、或者以圖片本身作為分割方式的頁面才適合使用。比如IKEA和Airbnb的首頁，它們并不像京東、支付寶有龐大的體量和業務需求，所以很適合全留白的方式。這讓它們的首頁看上去非常干凈清爽，富有呼吸感。

不過，在其他字段信息繁多的界面中，分割線依然是一種高效的分割方式。我們可以看到，IKEA和Airbnb的詳情頁依舊選擇了分割線的分割方式以應對繁多的字段信息，避免全留白帶來的層級混亂。

造型性

線本身可以沿任意方向自由延伸，形成一條曲線、折線、螺旋線等等。而當線的首尾相連時，便可以勾畫出面。

但是，線的閉合性所形成的面僅僅是一具沒有量感的空殼。但同時線條本身輕盈的特性讓其更加輕量、通透，因此對于一些辨識要求較低、或者需要被弱化的元素來說往往是個不錯的選擇。

界面中最常見的運用就是幽靈按鈕和線性圖標。

相比于面性按鈕和圖標，量感的缺失讓其無法在辨識性上勝出，但是在其它地方也各有所長。幽靈按鈕常用于一些次按鈕、未選中態以及tag，線性圖標常被用于一些次要功能、未選中態以及裝飾。

當然，線面也可以根據產品自身需求作類別區分。比如支付寶和美團這些產品，工具型圖標全部線性，而業務型圖標全部面性。并且線性圖標得益于背景主色色塊的反白加成讓它們并不會被過度弱化。

虛線

虛線是點化線的最簡易的表現。但是因為虛線本身斷開的地方太多了，并不適合用于常規信息的分割，它通常適用于一些特定的場景。

比如一些產品中的票券、賬單這類特殊場景中，通常會加入虛線進行信息的分割，就是為了映射模擬現實世界中便于撕開的撕票線來增加代入感，減少認知負荷。

虛線另一個特性是不可見性。這個特性最早可追溯至建筑、機械等行業的制圖規范中——以同等點元素所構成的虛線代表對象視覺盲區中的棱邊線及輪廓線。

一些漫畫或動畫作品中當一個東西突然不翼而飛時，往往會留下一個虛線的輪廓。

這種有意思的設定也被設計師引用到了用戶界面中。比如當我們想讓用戶去上傳一個圖片時，往往會采取一個虛線的矩形結合按鈕進行引導，便是為了告訴用戶：嗨這塊地還是空的，快來加點料！比如Pinterest、dribbble以及AntD的圖片類upload組件，都采用了這種設定。

另外，這種形式適用于表示空狀態，比如dropbox。

最后

線的部分就講到這里，但愿這些特性的講解對你帶來幫助。下周我們繼續對面進行講解，不見不散。

更多點線面的設計干貨：

歡迎關注作者微信公眾號：「轉行人的設計筆記」