在觸碰屏幕內(nèi)容時，我們的目光會跟隨屏幕內(nèi)容而移動，而了解用戶的視覺動線可以幫助設(shè)計師更好地布局頁面和元素，提高用戶體驗和效率。本文就視覺動線設(shè)計原則展開分析，希望能給你一些啟發(fā)。

一、什么是視覺動線

視覺動線指用戶在接觸屏幕內(nèi)容時，目光會自然而然地沿著一定的線路移動，這種線路被稱為視覺動線。在UI設(shè)計中，了解用戶的視覺動線可以幫助設(shè)計師更好地布局頁面和元素，以提高用戶的瀏覽效率和體驗。

視覺動線這個詞最早來源于室內(nèi)設(shè)計，指概括住戶在日常生活中的的行為軌跡，優(yōu)化動線可以幫助住戶更便利高效的生活。后運用在印刷排版領(lǐng)域，如著名的古騰堡原則就是在設(shè)計報紙的過程中提出的視覺動線原則。

二、古騰堡原則

古騰堡原則源于14世紀(jì)西方活字印刷術(shù)發(fā)明人約翰·古騰堡的觀點，他認(rèn)為人們的閱讀方式具有一定的慣性，即從左到右、從上到下。在20世紀(jì)50年代，這個觀點被運用到報紙設(shè)計中，形成了“古騰堡原則”。

根據(jù)這個原則，設(shè)計師可以利用人們的閱讀習(xí)慣，合理安排頁面的布局，以便讓用戶更加輕松地閱讀。因此，在頁面設(shè)計中，設(shè)計師通常會考慮用戶的閱讀路徑和習(xí)慣，將重要信息放置在最顯眼的位置，以提高頁面的可讀性。

古騰堡圖將頁面所呈現(xiàn)的內(nèi)容分成了四個象限，每個象限都有其獨特的規(guī)律。

1、第一視覺區(qū)（Primary Optical Area）

首先，畫面左上方的第一視覺區(qū)是用戶最先注意到的地方，是頁面上最重要的區(qū)域，這個區(qū)域往往放置重要的內(nèi)容。

2、最終視覺區(qū)（Final Optical Area）

右下方的終端視覺區(qū)是視覺流的終點，通常被用來放置一些較為次要的信息或者頁面底部的導(dǎo)航欄。

3、強休息區(qū)（Strong Follow Area）

右上方的強休息區(qū)是一個比較次要的區(qū)域，通常被用來放置次要信息或者內(nèi)容。

4、弱休息區(qū)（Weak Follow Area）

左下方的弱休息區(qū)則是最不引人注目的區(qū)域，它通常被用來放置一些較為次要或者不需要用戶主動關(guān)注的信息。

古騰堡原則在移動端的應(yīng)用：

案例：58到家app首頁信息流中的內(nèi)容卡片，就很符合古騰堡原則，第一視覺區(qū)放置了最主要的標(biāo)題內(nèi)容，最終視覺區(qū)放置了決策按鈕，方便了用戶選取。

三、F型視覺模型

F型視覺模型出現(xiàn)是由Nielsen Norman團隊的Jakob Nielsen, Kara Pernice, 和 Bruce Hanington在2009年出版的《Eyetracking Web Usability》一書中介紹的研究。該研究使用了眼動追蹤技術(shù)來跟蹤用戶在瀏覽網(wǎng)頁時的注視點，發(fā)現(xiàn)用戶閱讀時普遍呈現(xiàn)出了類似于字母“F”路徑的閱讀方式。

呈現(xiàn)F型的根本原因是：用戶會使用最省力的動線來瀏覽內(nèi)容。該研究成果被廣泛引用，并成為了網(wǎng)頁和移動端設(shè)計和內(nèi)容創(chuàng)作中重要的參考規(guī)律。

1、用戶閱讀內(nèi)容時通常會先水平移動視線，往往是在內(nèi)容區(qū)域的上部水平移動。這個初始的閱讀元素構(gòu)成了F型模型的頂部橫線。

2、接著，用戶向下移動視線一段距離，然后再進行第二次水平移動，這次移動通常比前一次覆蓋的區(qū)域要小。這個附加元素構(gòu)成了F型模型的中部橫線。

3、最后，用戶會進行一次豎直的掃視，掃描內(nèi)容的左部。有時這種掃描看起來像眼動追蹤熱圖上的一條實線。大部分情況下，用戶會更快地移動視線，形成一些不連接的點，點鏈接為豎線，構(gòu)成了F型模型的豎線。

由此，我們得出規(guī)律：

頁面上的首行內(nèi)容比同一頁面上的后續(xù)文本行受到更多的關(guān)注。

每行內(nèi)容最左側(cè)的幾個詞比同一行中位置靠后的詞受到更多的關(guān)注。

F型視覺模型在移動端的應(yīng)用：

案例：58同城商家版app中的線索訂閱頁面，頂部放置重要的篩選功能作為引導(dǎo)用戶的第一視覺，下方信息流卡片在雙排與單排兩種卡片形式中選擇了單排，突出內(nèi)容為主，信息明確，突出內(nèi)容信息標(biāo)題傳遞給用戶，信息互獲取率高。多層級信息劃分，展示多種顆粒度的內(nèi)容。

F型視覺模型在UI設(shè)計中的影響深遠(yuǎn)，F(xiàn)型視覺模型可以最大程度的吸引用戶的注意力，從而提高用戶的瀏覽效率，減少用戶的搜索和瀏覽時間，從而提高用戶滿意度。但是，雖然F型視覺模型適用于大部分的UI設(shè)計，但并不是所有的頁面類型都適用于F型視覺模型。例如，如果頁面需要展示大量的內(nèi)容，那么F型視覺模型可能會顯得不太適合?；蛘哂袀€性化的需求，相對固定的F型視覺模型視覺就不合適了。

四、Z型視覺模型

Z型視覺模型的提出者并不確定，但早在2010年就已經(jīng)被廣泛討論和應(yīng)用。該模型是對F型視覺模型的改動和補充，他認(rèn)為用戶在瀏覽頁面時通常會先掃描頁面的頂部，然后向下掃描，最后從左到右地瀏覽底部的內(nèi)容，形成了一個Z字形的視覺路徑。該模型主要適用于具有大量內(nèi)容和多個任務(wù)的頁面。Z型視覺模型強調(diào)簡潔，設(shè)計上不會過于繁瑣，使得用戶更加容易理解和使用。

五、寫在最后

在工作中，設(shè)計師們了解了不同用戶的行為和習(xí)慣，才能更好地考慮視覺動線對設(shè)計的影響，并選擇合適的視覺動線來引導(dǎo)用戶，從而提升頁面效率。讓用戶更好的理解我們產(chǎn)出的設(shè)計。

希望大家可以多多點贊評論鼓勵下，最后感謝您的耐心閱讀～～

參考文獻

[1] Nielsen J , Pernice K . Eyetracking Web Usability[M]. New Riders Publishing, 2009.