什么是視覺動線
視覺動線指用戶在接觸屏幕內(nèi)容時啼染，目光會自然而然地沿著一定的線路移動，這種線路被稱為視覺動線迹鹅。在UI設(shè)計中斜棚，了解用戶的視覺動線可以幫助設(shè)計師更好地布局頁面和元素，以提高用戶的瀏覽效率和體驗蚤霞。
視覺動線這個詞最早來源于室內(nèi)設(shè)計，指概括住戶在日常生活中的的行為軌跡昧绣，優(yōu)化動線可以幫助住戶更便利高效的生活捶闸。后運用在印刷排版領(lǐng)域，如著名的古騰堡原則就是在設(shè)計報紙的過程中提出的視覺動線原則删壮。
古滕堡原則
古騰堡原則源于14世紀西方活字印刷術(shù)發(fā)明人約翰·古騰堡的觀點，他認為人們的閱讀方式具有一定的慣性税灌，即從左到右亿虽、從上到下。在20世紀50年代狸窘，這個觀點被運用到報紙設(shè)計中坯认，形成了“古騰堡原則”氓涣。
根據(jù)這個原則，設(shè)計師可以利用人們的閱讀習慣引润，合理安排頁面的布局痒玩，以便讓用戶更加輕松地閱讀议慰。因此别凹，在頁面設(shè)計中洽糟，設(shè)計師通常會考慮用戶的閱讀路徑和習慣，將重要信息放置在最顯眼的位置拍霜，以提高頁面的可讀性祠饺。
古騰堡圖將頁面所呈現(xiàn)的內(nèi)容分成了四個象限，每個象限都有其獨特的規(guī)律吠裆。
1烂完、第一視覺區(qū)（Primary Optical Area）
首先抠蚣，畫面左上方的第一視覺區(qū)是用戶最先注意到的地方，是頁面上最重要的區(qū)域嘶窄，這個區(qū)域往往放置重要的內(nèi)容。
2吻谋、最終視覺區(qū)（Final Optical Area）
右下方的終端視覺區(qū)是視覺流的終點现横，通常被用來放置一些較為次要的信息或者頁面底部的導航欄。
3骇两、強休息區(qū)（Strong Follow Area）
右上方的強休息區(qū)是一個比較次要的區(qū)域姜盈，通常被用來放置次要信息或者內(nèi)容馏颂。
4棋傍、弱休息區(qū)（Weak Follow Area）
左下方的弱休息區(qū)則是最不引人注目的區(qū)域难审，它通常被用來放置一些較為次要或者不需要用戶主動關(guān)注的信息剔宪。
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 型視覺模型在 UI 設(shè)計中的影響深遠混稽，F(xiàn)型視覺模型可以最大程度的吸引用戶的注意力嫂侍，從而提高用戶的瀏覽效率，減少用戶的搜索和瀏覽時間荚坞，從而提高用戶滿意度挑宠。但是，雖然F型視覺模型適用于大部分的UI設(shè)計颓影，但并不是所有的頁面類型都適用于F型視覺模型各淀。例如，如果頁面需要展示大量的內(nèi)容诡挂，那么F型視覺模型可能會顯得不太適合碎浇。或者有個性化的需求苟穆，相對固定的F型視覺模型視覺就不合適了跟磨。
Z 型視覺模型
Z 型視覺模型的提出者并不確定，但早在2010年就已經(jīng)被廣泛討論和應(yīng)用僵蛛。該模型是對F型視覺模型的改動和補充氏豌，他認為用戶在瀏覽頁面時通常會先掃描頁面的頂部泪电，然后向下掃描相速，最后從左到右地瀏覽底部的內(nèi)容芜繁，形成了一個 Z 字形的視覺路徑蔬捷。該模型主要適用于具有大量內(nèi)容和多個任務(wù)的頁面。Z型視覺模型強調(diào)簡潔妥粟，設(shè)計上不會過于繁瑣，使得用戶更加容易理解和使用。
當我們設(shè)計一個網(wǎng)站或者海報時候，在布局之前先問自己幾個問題:
1.當用戶打開這個頁面時候生真，你希望他注意到哪些信息？
2.你希望他們以什么樣順序查看你的信息长已？
3.你想讓他做什么?
Z布局的前提其實很簡單，在頁面上加上Z胞四，然后把重要的信息放到Z上，讓用戶在掃描路徑上看見這些重要元素！所以Z視覺動線，最核心的是你需要傳遞給用戶那些有價值的信息廊佩。
