起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計用戶視線動線的必備法則
編輯導語：產品在設計時需要依據用戶使用習慣和用戶心理來進行合理的設計規劃，以此吸引、引導用戶操作，提升用戶使用體驗，進而提升用戶留存。視線落點是用戶習慣的一種，本篇文章里，作者便介紹了視線落點控制的相應原理與實際應用，一起來看一下。
文章開始前，先解釋一下什么是控制視線落點。
其實就是如何在視覺載體上通過改變大小、色彩、形狀等因素來控制觀者的視線，從而按照設計者預期的瀏覽軌跡瀏覽，說得直白一些就是告訴用戶先應該看哪兒，接下來應該注意什么，眼睛應該在哪停留，并且可能會停留多久。
那如果想要讓用戶的視線跟隨設計者的安排來走，前提是要尊重用戶的閱讀習慣。那在不同情況下用戶都有那些閱讀習慣呢，后面我會提到幾種設計法則，以及一些案例說明。
在此之前我們先了解一下中國古代書籍排版的歷史，書籍在中國上千年來都是從右到左豎排版，你可以先想想為什么會是豎式拍版的方式 ？停頓10s想一想。
一、為什么古代書籍是豎排版
1. 技術限制
在造紙術發明以前，由于受到技術的限制，古人選擇了使用竹簡和木片串成的簡牘來作為載體，串成的竹簡可以卷起保存，雙手打開時簡牘都是窄長的竹木片組成。而豎條上記載文字時可以產生連續性，這就導致了古人也是豎著寫字和豎著閱讀，用繩串起來可以卷成冊，其中“冊”字就是竹牘的象形字。
2. 人的生理習慣
首先豎排文字，在閱讀時要從上往下看，頭部能夠上下活動，既可以減輕眼球的疲勞，又可以防止頸椎?。犐先ナ遣皇怯悬c不可思議）。
1989年一名生物學學者金燦龍發表過一篇《試論漢文橫豎讀寫與學生視力》的文章，該學者通過調查發現：看橫版書籍，因為視力要左右看，要左右移動，而眨眼的動作是上下動，所以看書的時候眨眼會造成干擾，從而造成眼部疲勞。
而豎版的書因為上下的閱讀動作與眨眼相互協調，還會有助于眨眼等正常生理活動，眨眼是會造成眼部血液的微循環，以及凈化眼球。所以看豎版的書，不但可以增長學問，而且身心受益（有機會你也可以試試）。
3. 思想文化
當人在讀豎排文字，閱讀者頭部需要上下運動，猶如點頭句句認同，無意中表達了對古圣先賢的崇敬與認同，同時也反映了古人的尊卑思想，古代，上為君，為父母；下為臣，為子女；右為大，左為小；“無出其右”就是沒有超過的意思。
而閱讀橫排文字時，我們需要不斷搖頭，潛意識就會有否定、揣測的成分，也容易造成誤會。
二、為何豎排改為橫排
那為何現代社會的信息傳播載體，主要以橫排版為主呢？
原因主要是隨著社會的進步，為了滿足高效的傳播速度，信息生產者可以快速傳播信息，同時信息接受者可以快速獲得信息，再加上技術的進步，如今的書籍已經是從左往右，從上而下的讀書和寫字方式了。
所以我們現在看到的很多信息都是橫排版，無論是報紙、電視、廣告、新媒體，以及我們每天使用的App，主要還是已橫排版為主，看橫版的書籍可以做到一目十行，能很快將文字看完，起到一個快速閱讀的作用。
當然，現如今也有文字豎排的形式，多半是為傳達某種特殊的氣質，所以說選擇排版方式還需要看內容想要傳達給受眾的感受。
三、古滕堡圖表法
接下來說一下古騰堡圖表法，古騰堡圖把顯示介質分為四個象限：左上角的“第一視覺落點區”；右下角的“視覺終點區”；以及右上角的“強休區”和左下角的“弱休區”。
根據這個圖，用戶的視線很自然就會以從左上方掃到右下方，并且每次掃視都沿著一條方向軸開始從左到右看。這條方向軸主要是以對齊的元素、文本行或者一些明顯的元素構成的水平線，除非有特別的視覺強調。
圖中左上角為“視覺落點區”，右上角為“強休區”，左下角為“弱休區”，右下角為“視覺終點區”，因此設計師都會在頁面的布局中，使用這一法則，將重點關注的信息放在左上角的“視覺落點區”，如logo、大標題、大圖等需要重點突出的內容；將操作類信息放在右下角的視覺落點，以順應用戶的視覺流，目的是讓用戶瀏覽完信息后產生進一步的操作，而會在“強休區”和“弱休區”放一些優先級較弱的內容。
其中“弱休區”是最容易忽略的區域，下面我列舉來一些案例：
以上案例中的視覺終點區都是放一些行動召喚的操作，因為用戶在從上開始了解頁面內容，然后最終視線落到右下角。
將古騰堡圖表法在頁面中應用，能幫助讀者梳理閱讀的邏輯。據研究發現，這么做能提高讀者閱讀的節奏和理解能力。例如，遵循古騰堡圖的布局把關鍵元素放在左上角（如標題）、中間（內容）和右下角（操作按鈕）。
以下對話框的應用也是遵循對角線從左至右，從上至下的原則，積極操作按鈕的位置主要放在右下角，消極操作放在右側。
當遇到大量文字時，這種效果會更加明顯，人的視覺就會遵循這種瀏覽秩序，就像我們日常閱讀的書籍，也都是從左至右，然后不斷繼續循環往復。
四、尼爾森F型視覺模型
尼爾森的F型布局來源于網頁載體，這種瀏覽模式比較像英文字母F的形狀，所以被稱為F模式，并且包括以下三個方面：
- 讀者的眼睛首先是水平移動的，常常是掃過網頁內容的最上半部分，這樣就造成了一條橫向的運動軌跡，這是F的第一條橫線。
- 完成一行閱讀后用戶的目光略微下移，這時候掃描第二行時長度會比第一條短，這就畫出了F字母中的第二條橫線。
- 持續向下閱讀時，橫線會越來越短，這是由于用戶在當前頁面的注意力決定的。
下面為尼爾森報告中的熱度圖，用顏色來表示瀏覽者眼光聚集的熱度，分為最熱（紅色）、較熱（黃色）、不熱（藍色）和基本不關注（灰色）4種。
了解尼爾森的F型布局后，在實際項目中就盡量遵循用戶的這種瀏覽規律，根據每個區域的熱點程度而編排信息，從而讓你想讓用戶看到的信息被看到。
本文由 @Tanruy 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于 CC0 協議
積極操作按鈕的位置主要放在右下角，消極操作放在右側。
看懵了