本文3200字，主要分為三個(gè)部分，閱讀時(shí)間約15分鐘。
—————
動(dòng)線
動(dòng)線一詞最早是源自建筑與室內(nèi)設(shè)計(jì)領(lǐng)域。指的是人在某個(gè)空間內(nèi)的移動(dòng)軌跡。例如住宅空間的動(dòng)線設(shè)計(jì)，我們會(huì)經(jīng)常聽到動(dòng)靜分離的概念，講的就是動(dòng)線的設(shè)計(jì)。住宅動(dòng)線的設(shè)計(jì)目的是提高居住體驗(yàn)，減少在室內(nèi)的重復(fù)行走軌跡。
例如家務(wù)動(dòng)線的設(shè)計(jì)，從進(jìn)門到廚房再到生活陽(yáng)臺(tái)，是家務(wù)勞動(dòng)中最經(jīng)常行走的路線。通過設(shè)計(jì)動(dòng)線，減少家務(wù)勞動(dòng)的行走，就能提高家務(wù)勞動(dòng)的效率。在這里動(dòng)線越短，效率越高。
在商業(yè)建筑領(lǐng)域，動(dòng)線的設(shè)計(jì)也被頻繁的運(yùn)用。例如店鋪的顧客動(dòng)線設(shè)計(jì)，通過興趣區(qū)吸引顧客，引導(dǎo)顧客盡量多的瀏覽店鋪的商品，從而提高銷售額。商業(yè)空間的動(dòng)線設(shè)計(jì)講究的是坪效（每平米的銷售額）,動(dòng)線的設(shè)計(jì)更側(cè)重迂回。
還有比如動(dòng)物園、游樂場(chǎng)的路線設(shè)計(jì)，就涉及到游玩順序的體驗(yàn)，以及緩解擁堵等問題。因此動(dòng)線設(shè)計(jì)的目的在于提高效率，在家居和商業(yè)空間領(lǐng)域已廣泛應(yīng)用。而在視覺設(shè)計(jì)領(lǐng)域，也存在動(dòng)線的概念。
————————
視覺動(dòng)線
大家在生活中有沒有遇到這樣的情況，你要找的東西就在眼前，但是找了好久仍然沒有找到。
人眼之所以能看清物體，是因?yàn)橐暰W(wǎng)膜中央有個(gè)很小的區(qū)域叫做中央凹，這個(gè)區(qū)域集中了大多數(shù)的視錐細(xì)胞，專門負(fù)責(zé)視力的高清成像。
但是中央凹的面積極小，高清區(qū)域有限。人眼只有在10度視角范圍內(nèi)才最為敏感，30度范圍內(nèi)可以分辨出顏色。這就導(dǎo)致人眼可視范圍有限，一次只能產(chǎn)生一個(gè)視覺焦點(diǎn)。因此人眼在觀察物體時(shí)，沒辦法一下子看到所有信息，需要逐個(gè)地移動(dòng)搜尋，這種視線的移動(dòng)過程，就構(gòu)成了視覺動(dòng)線。
例如我們?cè)陂喿x文章時(shí)，一般是從左到右逐行地閱讀，這個(gè)閱讀順序就構(gòu)成了視覺動(dòng)線。如果文字的排版過于跳躍，沒有規(guī)律，就會(huì)造成視覺焦點(diǎn)過多動(dòng)線混亂的情況，容易出現(xiàn)閱讀障礙，大大影響了閱讀體驗(yàn)。
在視覺設(shè)計(jì)中動(dòng)線的設(shè)計(jì)尤為重要，例如下圖的banner，左圖動(dòng)線混亂主次不清。右圖則能清晰地引導(dǎo)觀眾從左到右閱讀信息，降低無(wú)效的閱讀成本。
因此構(gòu)建合理有效的視覺動(dòng)線，將有助于打造良好的閱讀體驗(yàn)，能更高效地讓用戶獲取到信息，避免用戶的流失。
我們以運(yùn)營(yíng)設(shè)計(jì)為例，來討論一下常見的動(dòng)線類型。在運(yùn)營(yíng)設(shè)計(jì)中，banner和活動(dòng)專題是最為常見的，這類型的設(shè)計(jì)，畫面往往很有感染力，內(nèi)容豐富。這里介紹的動(dòng)線，是指某張banner或者活動(dòng)頭部同屏類的動(dòng)線軌跡。一般我們可以將常見的動(dòng)線分為這幾個(gè)類型：直線型、匯聚型、發(fā)散型、扇型、以及Z型。
———————
直線型
直線型動(dòng)線顧名思義，就是在一條路徑上依次展示信息元素。我們以banner為例來看看如何應(yīng)用。
在分析動(dòng)線軌跡的時(shí)候，我們應(yīng)該逐一地尋找視覺焦點(diǎn)。這個(gè)案例中我們第一眼看到的是左側(cè)的標(biāo)題，我們稱第一眼看到的焦點(diǎn)為視覺入口點(diǎn)；緊接著視線轉(zhuǎn)移到了右側(cè)的龍身上。這就構(gòu)成了一條清晰的從左到右的視線軌跡。
banner中只在標(biāo)題和火焰上使用了色彩，其他背景使用較灰的色系，這使得視覺焦點(diǎn)突出，動(dòng)線清晰。
2.1.1動(dòng)線角度
直線型動(dòng)線在運(yùn)用的時(shí)候，不一定都是從左到右的橫向角度。常見的有對(duì)角線以及豎線的形式。
例如左圖這張banner就是對(duì)角線式的動(dòng)線軌跡。對(duì)角線具有傾斜的角度，容易塑造出速度感。因此這樣的動(dòng)線軌跡往往畫面更加的有動(dòng)感。而豎向的動(dòng)線一般用在窄長(zhǎng)比例的畫面中，例如手機(jī)端的運(yùn)營(yíng)活動(dòng)。右圖的活動(dòng)頁(yè)面就構(gòu)成了從上到下，從標(biāo)題到主體人物的動(dòng)線瀏覽軌跡。
2.1.2視覺焦點(diǎn)個(gè)數(shù)
直線型動(dòng)線中，人們的瀏覽軌跡是根據(jù)視覺焦點(diǎn)的位置進(jìn)行的。在直線上依次排列視覺焦點(diǎn)，但并不是焦點(diǎn)越多越好，一般2-3個(gè)視覺焦點(diǎn)較為合理。較多的視覺焦點(diǎn)反而影響閱讀效率。
———————
匯聚型
匯聚型動(dòng)線是將用戶的視線聚焦到中心的一種動(dòng)線軌跡。一般有多個(gè)視覺入口點(diǎn)來引導(dǎo)用戶的視線。
例如下面這張banner，我們的視線會(huì)先被左右兩側(cè)英雄所吸引，延著他們沖刺的方向視線轉(zhuǎn)移到了中間的標(biāo)題，這就構(gòu)成了匯聚型的視覺動(dòng)線。匯聚型動(dòng)線在元素?cái)[放上一般具有引導(dǎo)性，最終目的是讓觀眾的視線聚焦到中心，以突出中心的標(biāo)題或者主體信息。
匯聚型動(dòng)線的視覺入口點(diǎn)一般在2個(gè)以上，例如下面這張活動(dòng)頭部，通過兩側(cè)的煙霧塑造視覺入口點(diǎn)，引導(dǎo)觀眾視線匯聚到中心。是一種側(cè)重突出中心內(nèi)容的動(dòng)線類型。
———————
發(fā)散型
匯聚型動(dòng)線是由四周向中心聚集的動(dòng)線軌跡，而發(fā)散型動(dòng)線則相反，它是由中心向四周轉(zhuǎn)移的動(dòng)線軌跡。視覺入口點(diǎn)在中心，并逐步向四周擴(kuò)散的動(dòng)線類型。
例如下面這個(gè)暑假活動(dòng)頁(yè)面，就是視線由中心往四周轉(zhuǎn)移的發(fā)散型動(dòng)線。我們第一眼會(huì)被醒目的標(biāo)題所吸引，這就是視覺入口點(diǎn)。之后視線逐步地往兩側(cè)移動(dòng)，依次看到人物、書本、臺(tái)燈以及兩側(cè)的云朵。構(gòu)成了漸進(jìn)式的視覺瀏覽軌跡。
而下面這個(gè)四周年的活動(dòng)，最醒目的也是標(biāo)題，它將觀眾的視線聚焦到了中心，之后逐步向四周發(fā)散。按照放射的方向，依次瀏覽了人物、按鈕、獎(jiǎng)勵(lì)、圓球等信息。
可以看到發(fā)散型動(dòng)線一般運(yùn)用在有較多信息元素的畫面中，瀏覽順序?qū)訉舆f進(jìn)，比較適合對(duì)信息元素進(jìn)行歸類閱讀。
4.1入口點(diǎn)位置
發(fā)散型動(dòng)線一般是由中心往四周發(fā)散，視覺入口點(diǎn)一般在中心線位置。不過入口點(diǎn)也有位于邊緣的情況。例如下面這張banner，作為視覺入口點(diǎn)的人物位于右下角，通過手勢(shì)逐步引導(dǎo)觀眾閱讀標(biāo)題和玩具。是一種單邊發(fā)散的動(dòng)線類型。
——————
扇型
扇型動(dòng)線一般會(huì)在中心線上塑造一個(gè)視覺入口點(diǎn)，之后保持著至上而下、從左到右的視線軌跡，這種軌跡就好比一把扇子。
例如下面這個(gè)手機(jī)端活動(dòng)，我們第一眼會(huì)被可愛的小狗頭部所吸引，之后視線往下，看到主標(biāo)題和副標(biāo)題，并按從左到右的視線軌跡閱讀了標(biāo)題。這就構(gòu)成了扇型的動(dòng)線軌跡。
可以看到扇型的動(dòng)線軌跡保持了從上到下的結(jié)構(gòu)關(guān)系，一般用在畫面較長(zhǎng)的版式中。容易塑造至上而下、內(nèi)容由少及多的閱讀關(guān)系。
—————
Z型
Z型動(dòng)線是最為常見的類型，它遵循了人們從左到右的閱讀順序習(xí)慣。并且在長(zhǎng)頁(yè)面中可以一直做反復(fù)的延續(xù)。
例如下圖的活動(dòng)頁(yè)面，我們的閱讀順序就是從左到右逐行地掃視關(guān)系。先是主標(biāo)題，再是副標(biāo)題，最后是木牌上的信息。這構(gòu)成了循環(huán)的Z型動(dòng)線軌跡。此類動(dòng)線比較適合應(yīng)用于文字類信息較多的畫面中。
在動(dòng)線的設(shè)計(jì)過程中，比較難的是如何去引導(dǎo)信息之間的先后關(guān)系。這里介紹幾種便捷的技巧，如何更有效的來設(shè)計(jì)動(dòng)線。
————————
閱讀順序
第一種就是根據(jù)人們的閱讀習(xí)慣來設(shè)計(jì)，也就是從左到右，至上而下的順序。因?yàn)槿说难劬?，左右轉(zhuǎn)動(dòng)所看到的角度和區(qū)域，要比上下轉(zhuǎn)動(dòng)所看到的要廣闊的多。從左到右也是人們通用的閱讀習(xí)慣和標(biāo)準(zhǔn)，橫向閱讀也更為舒適。在設(shè)計(jì)中我們只需要按照從左至右自上而下的規(guī)律來擺放信息元素，就能保證有良好的閱讀體驗(yàn)。
——————————
元素指向性
第二種是利用元素本身的指向性來進(jìn)行引導(dǎo)，特別是主體人物的肢體動(dòng)作、手勢(shì)等。例如下圖中的banner就分別通過人物的眼神和手勢(shì)進(jìn)行引導(dǎo)，讓觀眾的視線轉(zhuǎn)移到標(biāo)題上，構(gòu)成了很強(qiáng)的關(guān)聯(lián)性。讓動(dòng)線的引導(dǎo)更為自然緊密。
———————————
引導(dǎo)線的設(shè)計(jì)
第三種是引導(dǎo)線的設(shè)計(jì)，我們可以通過設(shè)計(jì)一些引導(dǎo)性的線條來引導(dǎo)觀眾的視線。常見的有放射線，或者虛擬的線條。
例如下圖1的banner，就是通過左右兩側(cè)放射性的線條來增強(qiáng)引導(dǎo)，讓觀眾的視線匯聚到中心，構(gòu)成了匯聚型的動(dòng)線。圖2除了蜘蛛的視線引導(dǎo)外，標(biāo)題文字的透視處理也構(gòu)建出一條無(wú)形的引導(dǎo)線，讓整個(gè)視線的引導(dǎo)更加緊密自然。在元素本身指向性不強(qiáng)的時(shí)候，引導(dǎo)線的設(shè)計(jì)能讓視線的引導(dǎo)更加緊密，有規(guī)律。
—————————
層級(jí)的設(shè)計(jì)
第四種是通過層級(jí)關(guān)系的設(shè)計(jì)來構(gòu)建動(dòng)線，也是經(jīng)常要用到的方法，構(gòu)建層級(jí)關(guān)系的方式有很多，這里只做簡(jiǎn)單介紹，有機(jī)會(huì)再跟大家交流。
例如下面這個(gè)活動(dòng)頭部，我們的閱讀軌跡是從左到右的關(guān)系，先看到左邊的人物然后是標(biāo)題，最后是右邊的人物，構(gòu)成了直線型的動(dòng)線軌跡。如果我們拉開人物之間的空間關(guān)系，我們首先會(huì)注意到離我們近的物體，依據(jù)遠(yuǎn)近關(guān)系，形成了一條視覺引導(dǎo)軌跡。這就是層級(jí)對(duì)于視線引導(dǎo)的作用。
通過層級(jí)的塑造，可以更有效的來制造動(dòng)線，引導(dǎo)觀眾的閱讀。
[ 小結(jié) ]
綜上，只要我們能夠理解動(dòng)線的概念和目的，在排列元素時(shí)就能有更清晰的目的性，設(shè)計(jì)更有方向感。信息的傳遞是我們構(gòu)建作品和觀眾之間交流的橋梁，也是設(shè)計(jì)中首要考慮的因素。有效的信息傳遞才能發(fā)揮設(shè)計(jì)最大的價(jià)值。以上僅是個(gè)人的觀感與體會(huì)，希望對(duì)大家有幫助。
文章來源：站酷 作者：Tony老司機(jī)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.jghy.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)