目錄

一、什么是視覺動(dòng)線

二、視覺動(dòng)線有哪些類型

三、視覺動(dòng)線總結(jié)

一、什么是視覺動(dòng)線

視覺動(dòng)線是當(dāng)我們看一幅圖、一個(gè)網(wǎng)頁或一份設(shè)計(jì)時(shí)，眼睛移動(dòng)的路徑。想象一下在看一幅畫，我們的眼睛先注意到哪個(gè)地方，接著又看向哪里。這種移動(dòng)的順序就叫做視覺動(dòng)線（提供數(shù)據(jù)支持時(shí)會(huì)使用眼動(dòng)儀，來判斷設(shè)計(jì)方案的可行性等）。

延伸一個(gè)知識點(diǎn)：眼動(dòng)儀

眼動(dòng)儀是一種用于監(jiān)測和記錄眼睛運(yùn)動(dòng)的設(shè)備，它通過追蹤視線的變化來分析人們在觀看視覺內(nèi)容時(shí)的行為。它能捕捉眼睛的注視點(diǎn)、移動(dòng)路徑和停留時(shí)間，從而為用戶體驗(yàn)、市場研究、心理學(xué)等領(lǐng)域提供數(shù)據(jù)支持。

a、市場常見品牌和產(chǎn)品

• Tobii：知名的眼動(dòng)儀制造商，提供多種眼動(dòng)追蹤設(shè)備，適用于研究、游戲和市場調(diào)查。
• EyeLink：主要用于學(xué)術(shù)研究，尤其是在心理學(xué)和認(rèn)知科學(xué)領(lǐng)域，具有高精度和實(shí)時(shí)數(shù)據(jù)采集能力。
• Gazepoint：提供經(jīng)濟(jì)實(shí)惠的眼動(dòng)儀，適合教育和小型研究項(xiàng)目，易于使用。
• SR Research：專注于高性能眼動(dòng)儀，常用于實(shí)驗(yàn)室研究，適用于視覺研究和心理學(xué)實(shí)驗(yàn)。
• Pupil Labs：提供開源的眼動(dòng)追蹤解決方案，適用于研究和開發(fā)，支持多種應(yīng)用場景。

b、通過眼動(dòng)儀可以得到

1. 注視點(diǎn)（Fixation）

記錄眼睛停留在某個(gè)點(diǎn)的時(shí)間，表明該點(diǎn)對用戶的吸引力。

2. 掃視路徑（Saccade）

追蹤眼睛從一個(gè)注視點(diǎn)移動(dòng)到另一個(gè)注視點(diǎn)的過程，反映用戶的視線移動(dòng)方式。

3. 停留時(shí)間（Dwell Time）

用戶在特定區(qū)域停留的時(shí)間，可以用來衡量該區(qū)域的重要性或吸引力。

4. 熱力圖（Heatmap）

通過數(shù)據(jù)可視化展示用戶關(guān)注的熱點(diǎn)區(qū)域，常用于分析網(wǎng)頁和廣告的有效性。

5. 眼動(dòng)模式（Eye Movement Patterns）

分析用戶在瀏覽內(nèi)容時(shí)的總體視覺策略和習(xí)慣，幫助理解信息獲取的方式。

6. 視覺注意力分布

了解用戶在觀看內(nèi)容時(shí)的注意力集中在哪些部分，哪些地方被忽視。

7. 認(rèn)知負(fù)荷

通過眼動(dòng)行為分析，評估用戶在理解信息時(shí)的認(rèn)知負(fù)荷水平。

這些數(shù)據(jù)可以幫助設(shè)計(jì)師和研究人員優(yōu)化用戶體驗(yàn)、改善產(chǎn)品設(shè)計(jì)、制定有效的市場策略等。

視覺動(dòng)線的發(fā)展

1、古代藝術(shù)

古希臘和古羅馬：藝術(shù)家通過構(gòu)圖技巧（如黃金比例）來引導(dǎo)觀眾的視線，強(qiáng)調(diào)某些元素。例如，壁畫和雕塑中的人物通常以動(dòng)態(tài)姿態(tài)排列，引導(dǎo)觀眾的注意力。

2、中世紀(jì)

宗教藝術(shù)：在教堂的壁畫和彩色玻璃窗中，藝術(shù)家通過使用光線和色彩，引導(dǎo)信徒的目光，幫助他們理解故事和宗教教義。

3、文藝復(fù)興

透視法的運(yùn)用：文藝復(fù)興時(shí)期，藝術(shù)家采用線性透視技術(shù)，創(chuàng)造出深度感，使觀眾的視線沿著畫面的線條移動(dòng)，形成更為復(fù)雜的視覺動(dòng)線。

4、18世紀(jì)和19世紀(jì)

印刷革命：印刷術(shù)的發(fā)展使得平面設(shè)計(jì)變得普及，設(shè)計(jì)師開始運(yùn)用排版和圖形元素來引導(dǎo)讀者的目光。使用不同的字體和圖形來區(qū)分標(biāo)題和正文成為常見手法。

5、20世紀(jì)現(xiàn)代設(shè)計(jì)

包豪斯和國際風(fēng)格：這些設(shè)計(jì)運(yùn)動(dòng)強(qiáng)調(diào)功能性和簡潔性，設(shè)計(jì)師使用網(wǎng)格系統(tǒng)、對比和空間布局來創(chuàng)建清晰的視覺動(dòng)線。強(qiáng)調(diào)用戶體驗(yàn)和可讀性。

6、數(shù)字時(shí)代

網(wǎng)頁和UI設(shè)計(jì)：隨著互聯(lián)網(wǎng)的發(fā)展，視覺動(dòng)線在用戶界面設(shè)計(jì)中變得更加重要。設(shè)計(jì)師通過布局、顏色和互動(dòng)元素來引導(dǎo)用戶的點(diǎn)擊和操作。

7、當(dāng)代設(shè)計(jì)

多樣化的媒介：今天，視覺動(dòng)線在各類數(shù)字和物理媒介中都得到廣泛應(yīng)用，設(shè)計(jì)師利用動(dòng)畫、動(dòng)態(tài)效果和響應(yīng)式設(shè)計(jì)來增強(qiáng)用戶體驗(yàn)。

二、視覺動(dòng)線有哪些類型

常見的視覺動(dòng)線有：線性動(dòng)線、對角線動(dòng)線、環(huán)形動(dòng)線、Z型動(dòng)線、F型動(dòng)線、聚焦動(dòng)線、漸進(jìn)動(dòng)線，7大類型，在日常生活中的設(shè)計(jì)中都可以看到。

1. 線性動(dòng)線

線性動(dòng)線是設(shè)計(jì)元素沿直線排列，目的是引導(dǎo)觀眾的視線沿著這條路徑移動(dòng)。這種布局通常簡單而有效，能夠幫助觀眾快速獲取信息，適用于多種設(shè)計(jì)場合。

常見的案例有：

a、網(wǎng)頁設(shè)計(jì)中的導(dǎo)航欄，用戶可以輕松的從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面，

b、紙媒文章排版或博客新聞網(wǎng)站中標(biāo)題、正文和圖片通常沿著一個(gè)垂直線性結(jié)構(gòu)排列，使得閱讀體驗(yàn)更佳。

c、歷史事件或項(xiàng)目進(jìn)度，通過直線連接各個(gè)時(shí)間節(jié)點(diǎn)，觀眾可以輕松理解時(shí)間順序。

d、操作說明書和食譜，步驟通常按順序排列，使用戶可以一步步跟隨。

e、商品列表，無論是線上還是線下實(shí)體店，都是沿直線排列，方便用戶進(jìn)行選擇和對比。

2. 對角線動(dòng)線

對角線動(dòng)線是通過將設(shè)計(jì)元素沿對角線排列，引導(dǎo)觀眾的視線從一個(gè)角落移動(dòng)到另一個(gè)角落。這種布局常用于創(chuàng)造動(dòng)態(tài)感和層次感，能夠有效吸引觀眾的注意力。

常見的案例有：

a、海報(bào)設(shè)計(jì)運(yùn)動(dòng)類，運(yùn)動(dòng)員的動(dòng)作運(yùn)動(dòng)員的動(dòng)作通常呈現(xiàn)出對角線的姿勢，吸引觀眾注意。

b、趨勢圖表，在展示數(shù)據(jù)趨勢時(shí)，可以通過對角線圖形（如折線圖）引導(dǎo)觀眾的目光，從而幫助他們快速理解數(shù)據(jù)變化。

3. 環(huán)形動(dòng)線

環(huán)形動(dòng)線是設(shè)計(jì)元素圍繞中心點(diǎn)或某個(gè)主題排列，觀眾的視線沿著環(huán)形路徑移動(dòng)。這種布局常用于展示復(fù)雜信息或增強(qiáng)視覺吸引力，能夠引導(dǎo)觀眾在視覺上進(jìn)行循環(huán)閱讀。

常見的案例有：

a、數(shù)據(jù)可視化圖表，使用環(huán)形圖（如餅圖）展示數(shù)據(jù)，幫助觀眾直觀理解不同部分的比例關(guān)系。例如，市場份額分析時(shí)，使用環(huán)形圖顯示各個(gè)品牌的占比，觀眾可以從中心向外輻射地了解信息。

b、360度（VR）產(chǎn)品展示，例如我們買房或租房類型度VR看房360身臨其境，電商網(wǎng)站的產(chǎn)品，用戶可以360度查看產(chǎn)品，提示購物體驗(yàn)。

c、手機(jī)APP界面圖標(biāo)，圍繞中心按鈕排列，用戶可以輕松訪問常用功能，增強(qiáng)交互性。

4. Z型動(dòng)線

Z型動(dòng)線用戶的視線按照Z字形的路徑移動(dòng)，從左上角開始，橫向到右上角，然后向下移動(dòng)，最后再橫向到左下角。這種布局適合信息量較大的設(shè)計(jì)，有助于觀眾快速獲取重要信息。

常見的案例有：

a、購物類的產(chǎn)品頁面通常采用Z型動(dòng)線，重要圖片在頂部，接著是產(chǎn)品描述和價(jià)格，用戶的目光自然沿著Z字形路徑移動(dòng)，便于快速了解產(chǎn)品信息。

b、雜志封面，常常在左上角放置雜志名稱，中間放置主要圖片，右下角放置副標(biāo)題和出版日期，形成Z型動(dòng)線，吸引讀者注意。

c、幻燈片布局，在信息密集的幻燈片中，標(biāo)題、關(guān)鍵圖像和數(shù)據(jù)點(diǎn)可以沿Z型動(dòng)線排列，幫助觀眾快速抓住要點(diǎn)。

5. F型動(dòng)線

F型動(dòng)線是通常用于文本密集的設(shè)計(jì)中。用戶的視線呈現(xiàn)F字形移動(dòng)，從左到右，然后從上到下進(jìn)行掃描。這種模式反映了人們在閱讀時(shí)的自然行為，尤其是在瀏覽網(wǎng)頁和長文章時(shí)。

常見的案例有：

a、新聞網(wǎng)站，常常使用F型動(dòng)線布局，標(biāo)題和重要信息通常位于頁面左側(cè)，觀眾可以快速抓住要點(diǎn)。比如，頭條新聞的標(biāo)題大而顯眼，旁邊是摘要或圖片。

b、博客文章，在博客中，使用較大的標(biāo)題和小標(biāo)題，段落排列通常呈現(xiàn)F型布局，幫助讀者快速找到他們感興趣的內(nèi)容。

c、產(chǎn)品說明書(用戶手冊)，主要步驟和警示通?？孔蠓胖?，讀者可以順著F型動(dòng)線逐步獲取關(guān)鍵信息。

6. 聚焦動(dòng)線

聚焦動(dòng)線是在通過強(qiáng)調(diào)特定元素來引導(dǎo)觀眾的注意力，使其集中在設(shè)計(jì)中的關(guān)鍵內(nèi)容上。這種布局通常通過對比、大小、顏色和位置等手段，確保觀眾在視覺上優(yōu)先關(guān)注最重要的信息。

常見的案例有：

a、按鈕，在界面上，通常會(huì)使用鮮艷的顏色和較大尺寸的按鈕作為“立即購買”或“注冊”的C（號召性用語），確保用戶首先注意到這些按鈕。

b、廣告海報(bào)中，重要信息（如促銷折扣或活動(dòng)日期）通常使用大字體和鮮艷顏色，使其成為視覺焦點(diǎn)，從而吸引用戶的目光。

c、重點(diǎn)信息高亮，在演示幻燈片中，重要數(shù)據(jù)或結(jié)論常用不同的顏色、字體或圖形突出顯示，使觀眾在快速瀏覽時(shí)能夠立即識別出關(guān)鍵信息。

7. 漸進(jìn)動(dòng)線

漸進(jìn)動(dòng)線是通過在設(shè)計(jì)中逐步引導(dǎo)觀眾的視線，通常是通過元素的大小、顏色、形狀或布局的變化，使觀眾的注意力沿著一個(gè)漸進(jìn)的路徑移動(dòng)。這種布局能夠幫助觀眾逐步獲取信息，增強(qiáng)視覺層次感。

常見的案例有：

a、產(chǎn)品的展示通常采用漸進(jìn)動(dòng)線，最重要的產(chǎn)品圖像較大，接著是描述和評價(jià)，以此引導(dǎo)用戶逐步了解產(chǎn)品信息。頁面的布局可以從大到小排列，例如主標(biāo)題、大圖、子標(biāo)題和段落，這樣使得觀眾的視線自然向下移動(dòng)，逐步獲取信息。

b、數(shù)據(jù)圖表展示，在信息圖中，可以通過逐漸增加圖形的大小、厚度或顏色深度來引導(dǎo)觀眾關(guān)注最重要的數(shù)據(jù)點(diǎn)。

c、在社交媒體平臺(tái)上，漸進(jìn)動(dòng)線可以通過動(dòng)態(tài)圖像展示，逐步揭示內(nèi)容，引導(dǎo)用戶的目光從一個(gè)部分移動(dòng)到另一個(gè)部分。

d、在海報(bào)設(shè)計(jì)中，重要信息（如活動(dòng)主題）通常使用較大字體，接下來的次要信息逐漸減小，從而引導(dǎo)觀眾的視線沿著海報(bào)內(nèi)容移動(dòng)。

三、視覺動(dòng)線總結(jié)

視覺動(dòng)線在設(shè)計(jì)中起著重要作用，通過合理的布局和引導(dǎo)手法，能夠顯著提高信息傳達(dá)的效率和用戶體驗(yàn)。然而，設(shè)計(jì)師需要平衡優(yōu)缺點(diǎn)，確保視覺動(dòng)線的設(shè)計(jì)既美觀又實(shí)用，以滿足不同觀眾的需求。選擇適合的動(dòng)線類型并靈活運(yùn)用，將有助于提升整體設(shè)計(jì)的效果。

優(yōu)點(diǎn)

1、信息傳達(dá)效率高：視覺動(dòng)線能夠有效引導(dǎo)觀眾的視線，使他們快速獲取關(guān)鍵信息，減少理解的時(shí)間。

2、增強(qiáng)可讀性：合理的視覺動(dòng)線布局使得信息層次分明，觀眾可以更輕松地理解和消化內(nèi)容。

3、提升用戶體驗(yàn)：通過流暢的視覺引導(dǎo)，用戶在瀏覽網(wǎng)頁或應(yīng)用時(shí)能夠更愉快，減少視覺疲勞。

4、強(qiáng)調(diào)重點(diǎn)：設(shè)計(jì)師可以通過聚焦動(dòng)線等方式，突出重要信息，引導(dǎo)觀眾的注意力向特定內(nèi)容集中。

5、創(chuàng)造視覺美感：不同類型的動(dòng)線布局（如對角線、環(huán)形等）可以增強(qiáng)設(shè)計(jì)的動(dòng)感和美感，使視覺效果更具吸引力。

缺點(diǎn)

1、設(shè)計(jì)復(fù)雜性增加：設(shè)計(jì)合適的視覺動(dòng)線可能需要更復(fù)雜的布局和排版，對設(shè)計(jì)師的技能要求較高。

2、信息過載風(fēng)險(xiǎn)：如果動(dòng)線不合理或設(shè)計(jì)元素過多，可能導(dǎo)致觀眾感到困惑，反而影響信息傳達(dá)效果。

3、不同文化理解差異：不同文化和背景的觀眾可能對視覺動(dòng)線的理解存在差異，設(shè)計(jì)需考慮受眾的多樣性。

4、視覺疲勞：過于復(fù)雜或動(dòng)態(tài)的動(dòng)線設(shè)計(jì)可能導(dǎo)致觀眾感到疲勞，特別是在長時(shí)間瀏覽時(shí)。

5、不易適應(yīng)性：在不同設(shè)備和屏幕尺寸下，視覺動(dòng)線的設(shè)計(jì)可能需要調(diào)整，以確保一致的用戶體驗(yàn)，增加了設(shè)計(jì)的工作量。

參考文獻(xiàn)：

https://medium.com/uxsketching/eye-tracking-how-users-read-online-part-2-4514c488ccc2

https://medium.com/@ande1617/follower-anxiety-236b9299651d

https://medium.com/@laurent.mouluquet/eye-tracking-avec-gaze-recorder-pour-am%C3%A9liorer-lux-a7605345e24f

https://medium.com/@laurent.mouluquet/eye-tracking-on-modern-search-engine-with-gazerecorder-280fc094cf78

https://medium.com/@gimenete/built-in-eye-tracking-the-next-dimension-in-ux-b275ad3f3b0b

https://medium.com/@mediabrain.co.kr/harmonizing-content-and-design-layout-strategies-for-newsletters-9a810417ff8d