編輯導(dǎo)讀：線條擁有自由延伸的特性，因此具有高效的引導(dǎo)性、分割性和造型性，是產(chǎn)品設(shè)計(jì)中的基本表現(xiàn)形式。本文作者基于自身工作經(jīng)驗(yàn)，對(duì)線條在產(chǎn)品設(shè)計(jì)中的應(yīng)用提出了自己的觀點(diǎn)和看法，與你分享。

上篇文章我們簡(jiǎn)單講述了點(diǎn)線面的重要性，以及點(diǎn)的特性和其于界面設(shè)計(jì)中的應(yīng)用，這次來講講線。

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

康定斯基在書中以溫度去定義線的情感，他將水平線定義為無(wú)限冷能的表現(xiàn)形式，將垂直線定義為無(wú)限暖能的表現(xiàn)形式?？此苹逎y懂，但聯(lián)系到現(xiàn)實(shí)生活就相對(duì)容易理解一點(diǎn)。

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

一、引導(dǎo)性

線可沿任意方向延伸的特點(diǎn)讓它具備了很強(qiáng)的引導(dǎo)性。界面中最常見的就是跑步、地圖類APP中的路線顯示，就是通過線的引導(dǎo)性來顯示起點(diǎn)到終點(diǎn)所行進(jìn)的軌跡。

如果我們將起點(diǎn)和終點(diǎn)對(duì)齊歸于一條線上時(shí)，便可以通過降維的方式將其縮減至單個(gè)維度。時(shí)間維度可以引申到界面中的時(shí)間軸、步驟條、加載條和音視頻中的進(jìn)度條等，這類維度通常需要加入點(diǎn)元素，通過點(diǎn)的向心性輔助定位?？臻g維度則引申到滑動(dòng)頁(yè)面時(shí)出現(xiàn)的滾動(dòng)條等。

如上文對(duì)溫度的解釋，“暖”態(tài)的垂直線象征變化。當(dāng)我們希望用戶能夠感知到時(shí)間的變化，或者流程需要花費(fèi)較長(zhǎng)時(shí)間時(shí)，垂直線相對(duì)來說是個(gè)更好的選擇。比如外賣、快遞的訂單進(jìn)度，火車的?？空军c(diǎn)時(shí)間，timeline，到賬時(shí)間等信息，要么需要傳達(dá)變化感，要么費(fèi)時(shí)較長(zhǎng)，因此適合以象征變化的垂直線來進(jìn)行引導(dǎo)，給予用戶變化感、產(chǎn)生需要等待的心理預(yù)期。

“冷”態(tài)的水平線象征靜止。當(dāng)我們希望用戶能夠沉浸在這個(gè)流程中，感知不到時(shí)間的變化，或者流程時(shí)間極短時(shí)，那就更適合用水平線。

比如airbnb申請(qǐng)成為房東時(shí)，會(huì)有個(gè)需要用戶即時(shí)填寫的分頁(yè)表單，為了讓用戶沉浸在填寫中，同樣以水平線作為它的進(jìn)度反饋，降低時(shí)間變化感。美團(tuán)藥師的審方進(jìn)度是即時(shí)性的，通常只需等待十幾秒即可水平的靜止感能夠讓用戶產(chǎn)生”當(dāng)前正在發(fā)生“的感覺，避免讓用戶產(chǎn)生需要等待較長(zhǎng)時(shí)間的心理預(yù)期而離開當(dāng)前頁(yè)面。

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

下文講到的分割性也可以以冷暖態(tài)來解釋。我們希望用戶能夠?qū)Ｐ拈喿x信息，因此會(huì)盡量避免容易帶來變化感的垂直分割線。即便迫于信息的劃分需要不得不用到，也會(huì)盡量降低它的明度和長(zhǎng)度。

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

二、分割性

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

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

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

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

Complexion Reduction最早源自Airbnb、Instagram、Medium等產(chǎn)品的頁(yè)面改版，而后被UX設(shè)計(jì)師Michael Horton所總結(jié)出的設(shè)計(jì)趨勢(shì)。蘋果在17年所發(fā)布的ios11同屬于這個(gè)風(fēng)格，這類風(fēng)格最突出的三個(gè)特征就是大標(biāo)題、面性圖標(biāo)和克制用色。

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

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

三、造型性

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

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

界面中最常見的運(yùn)用就是幽靈按鈕和線性圖標(biāo)。

相比于面性按鈕和圖標(biāo)，量感的缺失讓其無(wú)法在辨識(shí)性上勝出，但是在其它地方也各有所長(zhǎng)。幽靈按鈕常用于一些次按鈕、未選中態(tài)以及tag，線性圖標(biāo)常被用于一些次要功能、未選中態(tài)以及裝飾。

當(dāng)然，線面也可以根據(jù)產(chǎn)品自身需求作類別區(qū)分。比如支付寶和美團(tuán)這些產(chǎn)品，工具型圖標(biāo)全部線性，而業(yè)務(wù)型圖標(biāo)全部面性。并且線性圖標(biāo)得益于背景主色色塊的反白加成讓它們并不會(huì)被過度弱化。

四、虛線

虛線是點(diǎn)化線的最簡(jiǎn)易的表現(xiàn)。但是因?yàn)樘摼€本身斷開的地方太多了，并不適合用于常規(guī)信息的分割，它通常適用于一些特定的場(chǎng)景。

比如一些產(chǎn)品中的票券、賬單這類特殊場(chǎng)景中，通常會(huì)加入虛線進(jìn)行信息的分割，就是為了映射模擬現(xiàn)實(shí)世界中便于撕開的撕票線來增加代入感，減少認(rèn)知負(fù)荷。

虛線另一個(gè)特性是不可見性。這個(gè)特性最早可追溯至建筑、機(jī)械等行業(yè)的制圖規(guī)范中——以同等點(diǎn)元素所構(gòu)成的虛線代表對(duì)象視覺盲區(qū)中的棱邊線及輪廓線。

一些漫畫或動(dòng)畫作品中當(dāng)一個(gè)東西突然不翼而飛時(shí)，往往會(huì)留下一個(gè)虛線的輪廓。

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

另外，這種形式適用于表示空狀態(tài)，比如dropbox。

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

作者：Andrew臣；微信公眾號(hào)：轉(zhuǎn)行人的設(shè)計(jì)筆記

本文由 @Andrewchen 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexles，基于CC0協(xié)議。