編輯導(dǎo)語：產(chǎn)品在設(shè)計時需要依據(jù)用戶使用習(xí)慣和用戶心理來進行合理的設(shè)計規(guī)劃，以此吸引、引導(dǎo)用戶操作，提升用戶使用體驗，進而提升用戶留存。視線落點是用戶習(xí)慣的一種，本篇文章里，作者便介紹了視線落點控制的相應(yīng)原理與實際應(yīng)用，一起來看一下。

文章開始前，先解釋一下什么是控制視線落點。

其實就是如何在視覺載體上通過改變大小、色彩、形狀等因素來控制觀者的視線，從而按照設(shè)計者預(yù)期的瀏覽軌跡瀏覽，說得直白一些就是告訴用戶先應(yīng)該看哪兒，接下來應(yīng)該注意什么，眼睛應(yīng)該在哪停留，并且可能會停留多久。

那如果想要讓用戶的視線跟隨設(shè)計者的安排來走，前提是要尊重用戶的閱讀習(xí)慣。那在不同情況下用戶都有那些閱讀習(xí)慣呢，后面我會提到幾種設(shè)計法則，以及一些案例說明。

在此之前我們先了解一下中國古代書籍排版的歷史，書籍在中國上千年來都是從右到左豎排版，你可以先想想為什么會是豎式拍版的方式 ？停頓10s想一想。

一、為什么古代書籍是豎排版

1. 技術(shù)限制

在造紙術(shù)發(fā)明以前，由于受到技術(shù)的限制，古人選擇了使用竹簡和木片串成的簡牘來作為載體，串成的竹簡可以卷起保存，雙手打開時簡牘都是窄長的竹木片組成。而豎條上記載文字時可以產(chǎn)生連續(xù)性，這就導(dǎo)致了古人也是豎著寫字和豎著閱讀，用繩串起來可以卷成冊，其中“冊”字就是竹牘的象形字。

2. 人的生理習(xí)慣

首先豎排文字，在閱讀時要從上往下看，頭部能夠上下活動，既可以減輕眼球的疲勞，又可以防止頸椎病（聽上去是不是有點不可思議）。

1989年一名生物學(xué)學(xué)者金燦龍發(fā)表過一篇《試論漢文橫豎讀寫與學(xué)生視力》的文章，該學(xué)者通過調(diào)查發(fā)現(xiàn)：看橫版書籍，因為視力要左右看，要左右移動，而眨眼的動作是上下動，所以看書的時候眨眼會造成干擾，從而造成眼部疲勞。

而豎版的書因為上下的閱讀動作與眨眼相互協(xié)調(diào)，還會有助于眨眼等正常生理活動，眨眼是會造成眼部血液的微循環(huán)，以及凈化眼球。所以看豎版的書，不但可以增長學(xué)問，而且身心受益（有機會你也可以試試）。

3. 思想文化

當(dāng)人在讀豎排文字，閱讀者頭部需要上下運動，猶如點頭句句認(rèn)同，無意中表達了對古圣先賢的崇敬與認(rèn)同，同時也反映了古人的尊卑思想，古代，上為君，為父母；下為臣，為子女；右為大，左為??；“無出其右”就是沒有超過的意思。

而閱讀橫排文字時，我們需要不斷搖頭，潛意識就會有否定、揣測的成分，也容易造成誤會。

二、為何豎排改為橫排

那為何現(xiàn)代社會的信息傳播載體，主要以橫排版為主呢？

原因主要是隨著社會的進步，為了滿足高效的傳播速度，信息生產(chǎn)者可以快速傳播信息，同時信息接受者可以快速獲得信息，再加上技術(shù)的進步，如今的書籍已經(jīng)是從左往右，從上而下的讀書和寫字方式了。

所以我們現(xiàn)在看到的很多信息都是橫排版，無論是報紙、電視、廣告、新媒體，以及我們每天使用的App，主要還是已橫排版為主，看橫版的書籍可以做到一目十行，能很快將文字看完，起到一個快速閱讀的作用。

當(dāng)然，現(xiàn)如今也有文字豎排的形式，多半是為傳達某種特殊的氣質(zhì)，所以說選擇排版方式還需要看內(nèi)容想要傳達給受眾的感受。

三、古滕堡圖表法

接下來說一下古騰堡圖表法，古騰堡圖把顯示介質(zhì)分為四個象限：左上角的“第一視覺落點區(qū)”；右下角的“視覺終點區(qū)”；以及右上角的“強休區(qū)”和左下角的“弱休區(qū)”。

根據(jù)這個圖，用戶的視線很自然就會以從左上方掃到右下方，并且每次掃視都沿著一條方向軸開始從左到右看。這條方向軸主要是以對齊的元素、文本行或者一些明顯的元素構(gòu)成的水平線，除非有特別的視覺強調(diào)。

圖中左上角為“視覺落點區(qū)”，右上角為“強休區(qū)”，左下角為“弱休區(qū)”，右下角為“視覺終點區(qū)”，因此設(shè)計師都會在頁面的布局中，使用這一法則，將重點關(guān)注的信息放在左上角的“視覺落點區(qū)”，如logo、大標(biāo)題、大圖等需要重點突出的內(nèi)容；將操作類信息放在右下角的視覺落點，以順應(yīng)用戶的視覺流，目的是讓用戶瀏覽完信息后產(chǎn)生進一步的操作，而會在“強休區(qū)”和“弱休區(qū)”放一些優(yōu)先級較弱的內(nèi)容。

其中“弱休區(qū)”是最容易忽略的區(qū)域，下面我列舉來一些案例：

以上案例中的視覺終點區(qū)都是放一些行動召喚的操作，因為用戶在從上開始了解頁面內(nèi)容，然后最終視線落到右下角。

將古騰堡圖表法在頁面中應(yīng)用，能幫助讀者梳理閱讀的邏輯。據(jù)研究發(fā)現(xiàn)，這么做能提高讀者閱讀的節(jié)奏和理解能力。例如，遵循古騰堡圖的布局把關(guān)鍵元素放在左上角（如標(biāo)題）、中間（內(nèi)容）和右下角（操作按鈕）。

以下對話框的應(yīng)用也是遵循對角線從左至右，從上至下的原則，積極操作按鈕的位置主要放在右下角，消極操作放在右側(cè)。

當(dāng)遇到大量文字時，這種效果會更加明顯，人的視覺就會遵循這種瀏覽秩序，就像我們?nèi)粘ｉ喿x的書籍，也都是從左至右，然后不斷繼續(xù)循環(huán)往復(fù)。

四、尼爾森F型視覺模型

尼爾森的F型布局來源于網(wǎng)頁載體，這種瀏覽模式比較像英文字母F的形狀，所以被稱為F模式，并且包括以下三個方面：

1. 讀者的眼睛首先是水平移動的，常常是掃過網(wǎng)頁內(nèi)容的最上半部分，這樣就造成了一條橫向的運動軌跡，這是F的第一條橫線。
2. 完成一行閱讀后用戶的目光略微下移，這時候掃描第二行時長度會比第一條短，這就畫出了F字母中的第二條橫線。
3. 持續(xù)向下閱讀時，橫線會越來越短，這是由于用戶在當(dāng)前頁面的注意力決定的。

下面為尼爾森報告中的熱度圖，用顏色來表示瀏覽者眼光聚集的熱度，分為最熱（紅色）、較熱（黃色）、不熱（藍色）和基本不關(guān)注（灰色）4種。

了解尼爾森的F型布局后，在實際項目中就盡量遵循用戶的這種瀏覽規(guī)律，根據(jù)每個區(qū)域的熱點程度而編排信息，從而讓你想讓用戶看到的信息被看到。

本文由 @Tanruy 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于 CC0 協(xié)議