起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識一套設(shè)計理論為你解決90%的困惑（中）
編輯導(dǎo)讀：線條擁有自由延伸的特性，因此具有高效的引導(dǎo)性、分割性和造型性，是產(chǎn)品設(shè)計中的基本表現(xiàn)形式。本文作者基于自身工作經(jīng)驗，對線條在產(chǎn)品設(shè)計中的應(yīng)用提出了自己的觀點和看法，與你分享。
上篇文章我們簡單講述了點線面的重要性，以及點的特性和其于界面設(shè)計中的應(yīng)用，這次來講講線。
線條是一種簡單、輕盈的存在，可以看作是點受外驅(qū)力作用下的運動軌跡。它從維度上來說屬于一維，不同的外驅(qū)力結(jié)合使得線可以沿著任意方向自由得延伸，從而讓它擁有了高效的引導(dǎo)性、分割性和造型性。
康定斯基在書中以溫度去定義線的情感，他將水平線定義為無限冷能的表現(xiàn)形式，將垂直線定義為無限暖能的表現(xiàn)形式?？此苹逎y懂，但聯(lián)系到現(xiàn)實生活就相對容易理解一點。
現(xiàn)實生活中的水平線通常存在于地平線中，因此給人的感覺是穩(wěn)定、平和，類似非啟動時的“冷”態(tài)；而垂直線常見于那些從基線建造、生長的事物，比如高樓大廈、參天巨木，它們都通過能量來實現(xiàn)垂直方向的高低變化，因此給人的感覺是上升、下落、變化等感覺，類似啟動后的“暖”態(tài)，而線具備的冷暖態(tài)決定了水平和垂直線發(fā)揮各自作用時所傳達的感受。
一、引導(dǎo)性
線可沿任意方向延伸的特點讓它具備了很強的引導(dǎo)性。界面中最常見的就是跑步、地圖類APP中的路線顯示，就是通過線的引導(dǎo)性來顯示起點到終點所行進的軌跡。
如果我們將起點和終點對齊歸于一條線上時，便可以通過降維的方式將其縮減至單個維度。時間維度可以引申到界面中的時間軸、步驟條、加載條和音視頻中的進度條等，這類維度通常需要加入點元素，通過點的向心性輔助定位?？臻g維度則引申到滑動頁面時出現(xiàn)的滾動條等。
如上文對溫度的解釋，“暖”態(tài)的垂直線象征變化。當我們希望用戶能夠感知到時間的變化，或者流程需要花費較長時間時，垂直線相對來說是個更好的選擇。比如外賣、快遞的訂單進度，火車的?？空军c時間，timeline，到賬時間等信息，要么需要傳達變化感，要么費時較長，因此適合以象征變化的垂直線來進行引導(dǎo)，給予用戶變化感、產(chǎn)生需要等待的心理預(yù)期。
“冷”態(tài)的水平線象征靜止。當我們希望用戶能夠沉浸在這個流程中，感知不到時間的變化，或者流程時間極短時，那就更適合用水平線。
比如airbnb申請成為房東時，會有個需要用戶即時填寫的分頁表單，為了讓用戶沉浸在填寫中，同樣以水平線作為它的進度反饋，降低時間變化感。美團藥師的審方進度是即時性的，通常只需等待十幾秒即可水平的靜止感能夠讓用戶產(chǎn)生”當前正在發(fā)生“的感覺，避免讓用戶產(chǎn)生需要等待較長時間的心理預(yù)期而離開當前頁面。
但是，如果我們將美團審方的進度條改為縱向（去除文案提示），給用戶帶來的感覺也就大不相同。
下文講到的分割性也可以以冷暖態(tài)來解釋。我們希望用戶能夠?qū)Ｐ拈喿x信息，因此會盡量避免容易帶來變化感的垂直分割線。即便迫于信息的劃分需要不得不用到，也會盡量降低它的明度和長度。
另外，界面中往往也存在著一條無形的線，它同樣也是起著重要的引導(dǎo)作用，只是這類線不僅僅作用于某個特定模塊，它通常作用于整個界面。沒錯，這條線通常被稱作視覺動線。視覺動線在網(wǎng)格與列表那一節(jié)中簡單說了下，只是這部分體系太過龐大，后面有時間單獨寫一篇分享。
二、分割性
很多時候，界面中僅僅以留白進行分隔時，很容易造成信息無法被明確得劃分。這時我們往往需要引入額外的形式進行輔助。比如分割線。
分割線通常運用在模塊內(nèi)部信息的分割，雖簡單粗暴，但并不能應(yīng)付更高層級的模塊分割。而模塊之間的分割通常以面性（分割條）來進行。留白、分割線和分割條三者的分割層級由低到高，通常需要在頁面中結(jié)合使用。
需要注意的是，線面的分割形式需要盡可能得輕量化，一旦擁有了視覺重量很容易成為噪音，我們需要盡量避免信噪比過低對用戶閱讀體驗的破壞。
為了增加頁面的呼吸感，我們很多時候會用留白這種最為輕量的分割方式代替所有的線、面。這類大留白的特點往往與Complexion Reduction風(fēng)格相結(jié)合，視覺上不僅制造一種舒適的簡約感和呼吸感，也減少了頁面中線面分割形成的視覺噪音。
Complexion Reduction最早源自Airbnb、Instagram、Medium等產(chǎn)品的頁面改版，而后被UX設(shè)計師Michael Horton所總結(jié)出的設(shè)計趨勢。蘋果在17年所發(fā)布的ios11同屬于這個風(fēng)格，這類風(fēng)格最突出的三個特征就是大標題、面性圖標和克制用色。
但是，這種去形式化的分割方法并非適用于全部頁面，一般只有在頁面模塊單一、信息單元字段較少、或者以圖片本身作為分割方式的頁面才適合使用。比如ikea和airbnb的首頁，它們并不像京東、支付寶有龐大的體量和業(yè)務(wù)需求，所以很適合全留白的方式。這讓它們的首頁看上去非常干凈清爽，富有呼吸感。
不過，在其他字段信息繁多的界面中，分割線依然是一種高效的分割方式。我們可以看到，IKEA和airbnb的詳情頁依舊選擇了分割線的分割方式以應(yīng)對繁多的字段信息，避免全留白帶來的層級混亂。
三、造型性
線本身可以沿任意方向自由延伸，形成一條曲線、折線、螺旋線等等。而當線的首尾相連時，便可以勾畫出面。
但是，線的閉合性所形成的面僅僅是一具沒有量感的空殼。但同時線條本身輕盈的特性讓其更加輕量、通透，因此對于一些辨識要求較低、或者需要被弱化的元素來說往往是個不錯的選擇。
界面中最常見的運用就是幽靈按鈕和線性圖標。
相比于面性按鈕和圖標，量感的缺失讓其無法在辨識性上勝出，但是在其它地方也各有所長。幽靈按鈕常用于一些次按鈕、未選中態(tài)以及tag，線性圖標常被用于一些次要功能、未選中態(tài)以及裝飾。
當然，線面也可以根據(jù)產(chǎn)品自身需求作類別區(qū)分。比如支付寶和美團這些產(chǎn)品，工具型圖標全部線性，而業(yè)務(wù)型圖標全部面性。并且線性圖標得益于背景主色色塊的反白加成讓它們并不會被過度弱化。
四、虛線
虛線是點化線的最簡易的表現(xiàn)。但是因為虛線本身斷開的地方太多了，并不適合用于常規(guī)信息的分割，它通常適用于一些特定的場景。
比如一些產(chǎn)品中的票券、賬單這類特殊場景中，通常會加入虛線進行信息的分割，就是為了映射模擬現(xiàn)實世界中便于撕開的撕票線來增加代入感，減少認知負荷。
虛線另一個特性是不可見性。這個特性最早可追溯至建筑、機械等行業(yè)的制圖規(guī)范中——以同等點元素所構(gòu)成的虛線代表對象視覺盲區(qū)中的棱邊線及輪廓線。
一些漫畫或動畫作品中當一個東西突然不翼而飛時，往往會留下一個虛線的輪廓。
這種有意思的設(shè)定也被設(shè)計師引用到了用戶界面中。比如當我們想讓用戶去上傳一個圖片時，往往會采取一個虛線的矩形結(jié)合按鈕進行引導(dǎo)，便是為了告訴用戶：嗨這塊地還是空的，快來加點料！比如Pinterest、dribbble以及AntD的圖片類upload組件，都采用了這種設(shè)定。
另外，這種形式適用于表示空狀態(tài)，比如dropbox。
線的部分就講到這里，但愿這些特性的講解對你帶來幫助。下周我們繼續(xù)對面進行講解，不見不散。
作者：Andrew臣；微信公眾號：轉(zhuǎn)行人的設(shè)計筆記
本文由 @Andrewchen 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Pexles，基于CC0協(xié)議。
- 目前還沒評論，等你發(fā)揮！
