国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

視覺(jué)動(dòng)線這個(gè)詞最早來(lái)源于室內(nèi)設(shè)計(jì)，指概括住戶(hù)在日常生活中的的行為軌跡，優(yōu)化動(dòng)線可以幫助住戶(hù)更便利高效的生活。后運(yùn)用在印刷排版領(lǐng)域，如著名的古騰堡原則就是在設(shè)計(jì)報(bào)紙的過(guò)程中提出的視覺(jué)動(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í)慣，合理安排頁(yè)面的布局，以便讓用戶(hù)更加輕松地閱讀。因此，在頁(yè)面設(shè)計(jì)中，設(shè)計(jì)師通常會(huì)考慮用戶(hù)的閱讀路徑和習(xí)慣，將重要信息放置在最顯眼的位置，以提高頁(yè)面的可讀性。

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

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

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

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

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

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

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

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

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

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

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

三、F型視覺(jué)模型

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

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

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

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

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

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

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

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

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

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

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

四、Z型視覺(jué)模型

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

五、寫(xiě)在最后

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

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

參考文獻(xiàn)

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