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

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

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

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

二、古騰堡原則

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

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

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

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

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

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

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

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

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

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

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

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

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

三、F型視覺模型

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

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

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

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

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

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

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

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

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

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

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

四、Z型視覺模型

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

五、寫在最后

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

希望大家可以多多點(diǎn)贊評(píng)論鼓勵(lì)下，最后感謝您的耐心閱讀～～

參考文獻(xiàn)

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