本文介紹了圖文設計的集中類型、用戶的閱讀順序以及影響設計的幾點要素。

本文介紹了圖文設計的集中類型、用戶的閱讀順序以及影響設計的幾點要素。

網上有很多關于圖文結合設計的討論 ，各大產品的用法也不盡相同，但又符合各自產品的定位。在產品模塊中只要有Feed流都會涉及到圖文結合的設計，圖文到底怎么設計更合理。討論最多就是用戶的閱讀順序，這確實是非常關鍵的理由，但如果都用閱讀順序來解釋的話，不符合順序的設計豈不是都沒有道理。

就好比男人看女人的順序，臉、胸、腿、還有，你懂的？

而女人看男人的順序卻截然相反，高度往往是第一印象、發型是不是蓬頭垢面、穿著是不是臟兮兮的、然后才到長相、如果有下文還要看言談舉止的細節。

人和人的差距咋就這么大呢？

閱讀順序對設計師來說也太難了。其實閱讀順序是可以通過設計細節引導的，我們先來看圖文結合設計的幾種順序。

一、圖文設計的類型

圖片設計的順序無外乎4種， 左圖右文、左文右圖、上圖下文、上文下圖。 不同產品據其所表達側重點的不同選擇對應的的排列方式。

左圖右文

視覺重心是圖片，對圖片的要求稍微高點，圖片沒能吸引用戶，對轉化可能會產一定的影響。用戶優先對圖作出反饋，然后才會看到標題，所以圖片具有一定的代表性。

可見左圖右文設計的優勢涇渭分明，適合的產品場景也顯而易見。

左文右圖

視覺重心仍然是圖片，但用戶的閱讀順序是從左往右，先看標題文字，標題如果不吸引人，用戶看到圖片吸引人，還會產生二次轉化，真正能產生轉化的前提還得用戶感興趣才行。

所以說這種設計方式特別適合資訊推薦流，只是特別適合，不是說資訊產品就不能采用其它方式。其實具體還是通過設計細節來權衡，下文會總結出設計細節模塊再做詳細的講述。

上圖下文

作為區別于左右結構的又一種設計形式，在多圖、大圖、視頻的封面設計中最多，聚焦到圖片的視覺層級變得更高，圖片的質量好不好，對引導用戶是否產生閱讀興趣的影響很大。

圖片勢必被賦予了更重要的意義，好多核心標題都被表達在了封面里。比較適合影像相冊、藝術鑒賞、視頻等類型的產品設計中。圖片的質量很高，鑒賞性也很強。

上文下圖

用戶的閱讀順序自上而下，相比上圖下文的設計，標題被用戶優先閱讀的層級更高，但標題不是唯一的決定因素，也會受到圖片的影響，因為大圖的呈現往往是通屏，占據的比例很大，對用戶的視覺沖擊比較大。

好處就是標題內容吸引到用戶，占據用戶的心智模型，會產生先入為主的優勢。這么設計很適合資訊文章中的多圖、短視頻、大圖呈現類產品形式。

二、用戶的閱讀順序 古騰堡圖表

古騰堡圖表又叫對角線平衡，設計理念源于約翰內斯·古騰堡的古騰堡圖表。

在這個模式中眼睛通常會從左上角到右下角瀏覽，缺少注意力的右上角和左下角被叫做視覺盲點。

閱讀重力是由于視線趨向于從上到下，從左到右的眼動規律，左上角是第一視覺落腳點，右下角是最終視覺落腳點，所以右上角和左下角都是一個強烈的視覺盲點區域，大多數是容易被忽略的。

古騰堡圖表趨向于呈現用戶的眼動規律體現出設計層級的重心。

F字形

Web易用性大師尼爾森（Jakob Nielsen）于2006年提出了F型視覺模型 ，他指出了用戶在第一次觀看頁面時，視線會呈現F字形，由頂部開始從左到右水平移動，目光下移開始從左到右觀察但是長度會相對短些，以較短的長度向下掃視，形成一個 F形狀。

很多頁面的熱力圖和可以證實，但我們發現F字形的閱讀順序很容易受到設計層級影響，而且偏向網頁端。

Z字形

移動端經常會遇到雙列的信息流設計，眼睛從左向右移動，在視線移到右上角后沿著斜對角向下方走，然后視覺再次向右移動，視覺移動的軌跡就像字母Z形狀。

Z字形趨向于在移動端，雙列圖文組合的設計類型，用戶的視線來回切換，對沉浸式體驗會產生一定的影響。

三、影響設計的因素

從圖文結合設計的4種類型和用戶的閱讀順序中發現，影響用戶閱讀順序的并不局限在這些原則中。這些原則太容易被設計細節的引導變化而打破，同樣是左圖右文，設計引導形式的改變，就會影響到用戶的閱讀順序。

比如我們以左圖右文的形式設計，左邊的圖片加上圓角、比例縮小、間距拉大、采用卡片設計等等方式，都可能會影響到信息層級的先后順序。總結出以下幾點影響視覺層級的設計細節。

卡片

卡片設計可以讓信息層級顯得煢煢孑立，瞬間脫穎而出。大大降低了受其它信息干擾的層級，移動通欄設計中四周卡片的形式獨立層級更強，通欄卡片形式的層級次之，但如果卡片設計成兩列就會呈現上面的Z字形布局。

留白

Feed流之間的留白，在符合視覺的基礎上，留白越多，信息呈現的轉化效果越好，受到干擾的影響越小。這里的留白多表現為上下分隔之間的留白，留白大點，單條信息的沉浸感越強。

比例

圖片占據比例的大小，反饋出用戶視覺聚焦的比重。圖片比例越大，用戶的視覺負擔就越重，對文字的影響就越大。絢麗美艷的圖集可以直切內容重心，圖片比例大一點更能凸顯優勢，反之就需要降低比例，凸顯內容。

字體

圖文結合除了上面說到的圖片還有文字，文字排列的大小、顏色、對齊方式都能引導出不同的視覺呈現。還有通過增加注釋來加強用戶對內容的理解，圖片表達出強烈視覺沖擊力，圖片背后的故事可以通過注釋更多的帶入。

線條

線條作為使用最多的區隔上下文的分界線——用的少了，整個界面會顯得傻傻分不清。用的多了，又會顯得出手過重，不夠簡潔。

所以線條一直都是最考驗設計的元素之一 ——

通欄線條分割線阻斷性比較強，欄目標題的意味比較強；兩邊留出空隙的分割線加強了并列的延續性；留出圖片只分割文字區域提升了用戶的引導屬性；線的開端處留出空隙通欄結尾，這樣的線條加強引導用戶操作進入詳情。

圓角

圓角在設計中被引用的越來越多，使用圓角更友好。 因為人眼趨向于更容易處理圓角 ，直角比較尖銳，生活中也有很多角容易磕碰到，現代的家居都需要做倒角。用戶對圓角的接收程度更高，帶上圓角似乎就代表了設計細節。 直角傳導給視線是靜止的，而圓角的圓滑角度更容易引導視線傳遞。

互動

在Feed流的設計層級里，還有更小號的元素，評論、分享、作者信息等元素。卻起到了最核心的互動引導作用，內容裂變的價值在于產生互動傳播。而用戶的互動行為也是需要設計去引導的，這樣更能凸顯設計的意義。

四、寫在最后

用戶眼動的閱讀順序受制于設計所呈現出來的視覺重心。圖文結合的設計形式種類無外乎4種，利用用戶的閱讀順序，通過設計細節的變化，改變視覺重心的引導層級，從而使得產品體驗設計更符合產品定位，傳遞給用戶的信息也更完善。

作者：VV體驗，微信公眾號：VV體驗

本文由 @VV體驗 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議