前言

線條是網頁設計中非常常見的一種構成元素，線的性質讓它能身兼數職
，又不霸占視覺風頭。上一次我們已經討論過點的平麵構成之“點”睛的張力，這一次讓我們一起來到線的世界。

一、線是一個點的行跡

任何形都由線包圍而成
，線就是一個二維生物裏的產物，它有長度、寬度，它甚至還能幫我們模擬三維的深度。你可以把線看成一個點的運行軌跡
，這個思路就可以幫你找到線的本質：線是一條運行軌跡
，它是從點的基礎上發展而來的。

一yi條tiao線xian也ye並bing不bu拘ju泥ni於yu就jiu是shi平ping直zhi的de線xian條tiao形xing式shi，隻zhi要yao能neng連lian綴zhui成cheng串chuan的de
，我wo們men都dou可ke以yi把ba它ta看kan成cheng一yi條tiao線xian
，它ta就jiu能neng在zai構gou成cheng中zhong發fa揮hui起qi線xian的de作zuo用yong。藍lan色se的de圓yuan點dian均jun勻yun分fen布bu，組zu成cheng一yi條tiao非fei常chang平ping靜jing的de運yun行xing軌gui跡ji線xian
，紅hong色se的de圓yuan點dian具ju有you漸jian變bian的de節jie奏zou，它ta們men組zu成cheng的de線xian條tiao則ze帶dai著zhe幾ji分fen變bian速su之zhi感gan。

當(dang)然(ran)
，我(wo)們(men)傳(chuan)統(tong)的(de)對(dui)於(yu)線(xian)的(de)理(li)解(jie)是(shi)這(zhe)樣(yang)的(de)
，當(dang)一(yi)個(ge)點(dian)向(xiang)一(yi)個(ge)方(fang)向(xiang)移(yi)動(dong)時(shi)，就(jiu)成(cheng)為(wei)直(zhi)線(xian)，當(dang)點(dian)在(zai)移(yi)動(dong)的(de)過(guo)程(cheng)中(zhong)經(jing)常(chang)變(bian)化(hua)方(fang)向(xiang)，它(ta)就(jiu)是(shi)曲(qu)線(xian)，當(dang)點(dian)的(de)移(yi)動(dong)方(fang)向(xiang)間(jian)隔(ge)變(bian)換(huan)
，則(ze)為(wei)折(zhe)線(xian)。

運行軌跡就使得線具有了方向和動感，尤其是線條的走向直接引導著用戶的視覺走向。

下麵這個頁麵的左右兩條垂直線，都分別指引著你的視線往它想要你展現的信息上滑過去。

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

二、線的風格感受

線條的風格表現在線的寬窄樣式和線的平直彎曲，這些形態上的變化


，可以演繹出謹慎嚴肅
，也能釋放某種率性天真。

纖細的線

如ru下xia麵mian導dao航hang中zhong的de細xi細xi的de水shui平ping線xian，表biao達da一yi種zhong穩wen定ding精jing致zhi的de感gan受shou。目mu前qian在zai網wang頁ye設she計ji中zhong也ye非fei常chang受shou歡huan迎ying，這zhe類lei線xian條tiao比bi較jiao簡jian潔jie，能neng和he任ren何he前qian景jing背bei景jing都dou混hun為wei一yi片pian，豐feng富fu細xi節jie又you能neng引yin導dao用yong戶hu的de視shi覺jiao方fang向xiang。

常見在導航和按鈕的設計裏，扁平化傳遞某種精致感，首選是細細的直線，不夾雜私欲，有點“冷淡”的矜持。

粗壯的線

jiaocudezhixian

，biaodachuyizhongwending，shaoweihuiyinfajinzhang，fangzaiwenzixiafangyouqiangtiaodezuoyong。zheqishishiyinweitanengyoufaniquyibangyigedazhilao，youcidailaidemouzhonganquangan。

自然卷

說到曲線，很想提一提一百多年前的“新藝術”運動。由於當時的歐美進入工業化量產時代，所有的產品設計、pingmianshejiyinweijingyoujiqidaliangshengchan，manmanshiquleduishenmeidezhuiqiu，yincidangshidemouxiepingmianshejidexianqumenfenfentourudaoyichangfangongyefancusudegexinyundongzhong
，zhudongshejichudaliangdaiyoucileifanjixiehua，youshougongyesecaidezuopin。

這場運動的靈感來源主要是中世紀的裝飾藝術、ribendeyixiedongfangzhuangshifenggeheziranzhuyi。tamentichanglingganlaiyuanyuziran
，yincitamenshejichudezuopindoushiyijuancaotuandengquxianweizhude。womenkeyikandao，zaiwomendeziranjieli，meiyouyitiaoshiwanquanjueduidezhixian，ye、花、樹葉
、鳥、海浪、山川、河流……而直線恰恰是人類的作用痕跡：建築、工業、日ri常chang用yong品pin的de造zao型xing大da都dou以yi直zhi線xian為wei主zhu，經jing過guo這zhe番fan觀guan察cha，你ni就jiu可ke以yi大da致zhi了le解jie
，曲qu線xian是shi自zi然ran的de表biao達da式shi，當dang你ni想xiang要yao傳chuan遞di與yu自zi然ran有you關guan的de信xin號hao時shi
，就jiu盡jin量liang不bu要yao用yong一yi些xie特te別bie僵jiang直zhi的de線xian條tiao。

一條一絲不苟的直線帶來緊張，相對而言，曲線
、波bo浪lang或huo卷juan曲qu的de線xian條tiao就jiu象xiang征zheng著zhe某mou種zhong放fang鬆song。在zai網wang頁ye設she計ji中zhong，線xian的de功gong能neng主zhu要yao是shi指zhi向xiang作zuo用yong

，也ye必bi要yao需xu要yao一yi點dian緊jin張zhang以yi期qi關guan注zhu，因yin此ci，大da部bu分fen我wo們men能neng見jian到dao的de線xian條tiao都dou是shi直zhi線xian，曲qu線xian比bi較jiao少shao見jian。

下(xia)麵(mian)這(zhe)個(ge)頁(ye)麵(mian)中(zhong)的(de)小(xiao)短(duan)波(bo)浪(lang)線(xian)，給(gei)整(zheng)個(ge)畫(hua)麵(mian)帶(dai)來(lai)一(yi)種(zhong)活(huo)潑(po)的(de)氛(fen)圍(wei)。兩(liang)個(ge)不(bu)同(tong)的(de)色(se)塊(kuai)的(de)連(lian)接(jie)處(chu)，由(you)於(yu)色(se)彩(cai)的(de)不(bu)同(tong)，在(zai)視(shi)覺(jiao)上(shang)也(ye)能(neng)形(xing)成(cheng)一(yi)條(tiao)自(zi)上(shang)而(er)下(xia)的(de)直(zhi)線(xian)。

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

曲折之美

折(zhe)線(xian)是(shi)一(yi)個(ge)特(te)殊(shu)的(de)存(cun)在(zai)，因(yin)為(wei)它(ta)既(ji)不(bu)是(shi)直(zhi)線(xian)，也(ye)不(bu)是(shi)曲(qu)線(xian)，它(ta)沒(mei)有(you)流(liu)暢(chang)感(gan)，卻(que)另(ling)有(you)一(yi)番(fan)曲(qu)折(zhe)的(de)美(mei)感(gan)，一(yi)條(tiao)單(dan)一(yi)的(de)曲(qu)線(xian)能(neng)給(gei)的(de)信(xin)息(xi)量(liang)不(bu)多(duo)，但(dan)如(ru)果(guo)是(shi)規(gui)律(lv)排(pai)列(lie)起(qi)來(lai)的(de)曲(qu)線(xian)就(jiu)能(neng)形(xing)成(cheng)紋(wen)理(li)，作(zuo)為(wei)背(bei)景(jing)它(ta)並(bing)不(bu)突(tu)兀(wu)
，而(er)且(qie)能(neng)創(chuang)造(zao)出(chu)某(mou)種(zhong)曲(qu)折(zhe)處(chu)的(de)雅(ya)致(zhi)效(xiao)果(guo)。

折線是屬於理性世界的，但它又能比平行直線多一份優雅。

三、線的作用

引導視覺方向

這可以說是線的最基礎的功能，由於它的這個作用才引發了下麵的諸多作用。

封閉成形

yongyigenxiantiaolaizuchengyigetuxing
，womenkeyichengzhiweijianbihuahuozhesuxie，keyikanchuxiantiaodechengxingnengli，jiusuanxiantiaobingmeiyouwanquanbihe，yekeyiziwowanxing，yejisuoweide“腦補”。

分割與限製

大da部bu分fen人ren想xiang到dao線xian的de第di一yi功gong能neng
，就jiu是shi分fen割ge，劃hua分fen區qu域yu。這zhe裏li需xu要yao注zhu意yi的de是shi
，兩liang個ge不bu同tong色se塊kuai的de交jiao界jie，就jiu算suan並bing沒mei有you一yi條tiao明ming顯xian的de線xian條tiao，也ye能neng產chan生sheng一yi條tiao線xian的de視shi覺jiao。

線的集合：紋理

很(hen)多(duo)線(xian)條(tiao)排(pai)列(lie)在(zai)一(yi)起(qi)就(jiu)形(xing)成(cheng)一(yi)個(ge)麵(mian)，可(ke)以(yi)作(zuo)為(wei)紋(wen)理(li)看(kan)待(dai)。因(yin)為(wei)線(xian)的(de)指(zhi)向(xiang)功(gong)能(neng)，以(yi)及(ji)線(xian)與(yu)線(xian)的(de)間(jian)隔(ge)所(suo)形(xing)成(cheng)的(de)節(jie)奏(zou)感(gan)，都(dou)能(neng)讓(rang)紋(wen)理(li)傳(chuan)遞(di)出(chu)不(bu)同(tong)氛(fen)圍(wei)。

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

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

四、體會一個箭頭裏的線體魔力

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

從(cong)這(zhe)枚(mei)箭(jian)頭(tou)中(zhong)，我(wo)們(men)可(ke)以(yi)看(kan)到(dao)
，通(tong)過(guo)線(xian)的(de)視(shi)覺(jiao)導(dao)向(xiang)作(zuo)用(yong)，最(zui)長(chang)的(de)線(xian)引(yin)領(ling)你(ni)的(de)視(shi)覺(jiao)從(cong)左(zuo)滑(hua)到(dao)右(you)，而(er)右(you)端(duan)的(de)箭(jian)頭(tou)上(shang)的(de)小(xiao)尖(jian)角(jiao)的(de)作(zuo)用(yong)更(geng)指(zhi)向(xiang)了(le)右(you)方(fang)。利(li)用(yong)這(zhe)個(ge)原(yuan)理(li)
，你(ni)就(jiu)能(neng)創(chuang)作(zuo)出(chu)更(geng)多(duo)的(de)其(qi)他(ta)樣(yang)式(shi)的(de)箭(jian)頭(tou)來(lai)引(yin)領(ling)視(shi)線(xian)。

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

後記

meicihoujidouyoudianwuguantongyang，meiyouyouhaoxiangqianque。luoliluosuobuhao，bunachudianganhuoyouqianquechengyi。shishishang，wojiaodexueshejijiushiyigedakainideshijiaotongdaodeguocheng，yanse、排版……這些理論都隻是一個理論框架，理論本身不是目的，現實生活才是。一直關注我們
，我們會繼續談論更多關於我們一直誤會的設計。