起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識圖文設(shè)計中那些值得學(xué)習(xí)的套路
本文介紹了圖文設(shè)計的集中類型、用戶的閱讀順序以及影響設(shè)計的幾點要素。
網(wǎng)上有很多關(guān)于圖文結(jié)合設(shè)計的討論 ，各大產(chǎn)品的用法也不盡相同，但又符合各自產(chǎn)品的定位。在產(chǎn)品模塊中只要有Feed流都會涉及到圖文結(jié)合的設(shè)計，圖文到底怎么設(shè)計更合理。討論最多就是用戶的閱讀順序，這確實是非常關(guān)鍵的理由，但如果都用閱讀順序來解釋的話，不符合順序的設(shè)計豈不是都沒有道理。
就好比男人看女人的順序，臉、胸、腿、還有，你懂的？
而女人看男人的順序卻截然相反，高度往往是第一印象、發(fā)型是不是蓬頭垢面、穿著是不是臟兮兮的、然后才到長相、如果有下文還要看言談舉止的細(xì)節(jié)。
人和人的差距咋就這么大呢？
閱讀順序?qū)υO(shè)計師來說也太難了。其實閱讀順序是可以通過設(shè)計細(xì)節(jié)引導(dǎo)的，我們先來看圖文結(jié)合設(shè)計的幾種順序。
一、圖文設(shè)計的類型
圖片設(shè)計的順序無外乎4種，左圖右文、左文右圖、上圖下文、上文下圖。不同產(chǎn)品據(jù)其所表達(dá)側(cè)重點的不同選擇對應(yīng)的的排列方式。
左圖右文
視覺重心是圖片，對圖片的要求稍微高點，圖片沒能吸引用戶，對轉(zhuǎn)化可能會產(chǎn)一定的影響。用戶優(yōu)先對圖作出反饋，然后才會看到標(biāo)題，所以圖片具有一定的代表性。
最適合的產(chǎn)品類型莫過于具有商品屬性的，用戶的視覺重心先看到商品圖片；再就是使用頻率最高的社交類產(chǎn)品，頭像作為一種高識別度的載體，容易讓人崩潰的是喜歡換頭像的同學(xué)。
可見左圖右文設(shè)計的優(yōu)勢涇渭分明，適合的產(chǎn)品場景也顯而易見。
左文右圖
視覺重心仍然是圖片，但用戶的閱讀順序是從左往右，先看標(biāo)題文字，標(biāo)題如果不吸引人，用戶看到圖片吸引人，還會產(chǎn)生二次轉(zhuǎn)化，真正能產(chǎn)生轉(zhuǎn)化的前提還得用戶感興趣才行。
所以說這種設(shè)計方式特別適合資訊推薦流，只是特別適合，不是說資訊產(chǎn)品就不能采用其它方式。其實具體還是通過設(shè)計細(xì)節(jié)來權(quán)衡，下文會總結(jié)出設(shè)計細(xì)節(jié)模塊再做詳細(xì)的講述。
上圖下文
作為區(qū)別于左右結(jié)構(gòu)的又一種設(shè)計形式，在多圖、大圖、視頻的封面設(shè)計中最多，聚焦到圖片的視覺層級變得更高，圖片的質(zhì)量好不好，對引導(dǎo)用戶是否產(chǎn)生閱讀興趣的影響很大。
圖片勢必被賦予了更重要的意義，好多核心標(biāo)題都被表達(dá)在了封面里。比較適合影像相冊、藝術(shù)鑒賞、視頻等類型的產(chǎn)品設(shè)計中。圖片的質(zhì)量很高，鑒賞性也很強(qiáng)。
上文下圖
用戶的閱讀順序自上而下，相比上圖下文的設(shè)計，標(biāo)題被用戶優(yōu)先閱讀的層級更高，但標(biāo)題不是唯一的決定因素，也會受到圖片的影響，因為大圖的呈現(xiàn)往往是通屏，占據(jù)的比例很大，對用戶的視覺沖擊比較大。
好處就是標(biāo)題內(nèi)容吸引到用戶，占據(jù)用戶的心智模型，會產(chǎn)生先入為主的優(yōu)勢。這么設(shè)計很適合資訊文章中的多圖、短視頻、大圖呈現(xiàn)類產(chǎn)品形式。
二、用戶的閱讀順序
古騰堡圖表
古騰堡圖表又叫對角線平衡，設(shè)計理念源于約翰內(nèi)斯·古騰堡的古騰堡圖表。
在這個模式中眼睛通常會從左上角到右下角瀏覽，缺少注意力的右上角和左下角被叫做視覺盲點。
閱讀重力是由于視線趨向于從上到下，從左到右的眼動規(guī)律，左上角是第一視覺落腳點，右下角是最終視覺落腳點，所以右上角和左下角都是一個強(qiáng)烈的視覺盲點區(qū)域，大多數(shù)是容易被忽略的。
古騰堡圖表趨向于呈現(xiàn)用戶的眼動規(guī)律體現(xiàn)出設(shè)計層級的重心。
F字形
Web易用性大師尼爾森（Jakob Nielsen）于2006年提出了F型視覺模型 ，他指出了用戶在第一次觀看頁面時，視線會呈現(xiàn)F字形，由頂部開始從左到右水平移動，目光下移開始從左到右觀察但是長度會相對短些，以較短的長度向下掃視，形成一個 F形狀。
很多頁面的熱力圖和可以證實，但我們發(fā)現(xiàn)F字形的閱讀順序很容易受到設(shè)計層級影響，而且偏向網(wǎng)頁端。
Z字形
移動端經(jīng)常會遇到雙列的信息流設(shè)計，眼睛從左向右移動，在視線移到右上角后沿著斜對角向下方走，然后視覺再次向右移動，視覺移動的軌跡就像字母Z形狀。
Z字形趨向于在移動端，雙列圖文組合的設(shè)計類型，用戶的視線來回切換，對沉浸式體驗會產(chǎn)生一定的影響。
三、影響設(shè)計的因素
從圖文結(jié)合設(shè)計的4種類型和用戶的閱讀順序中發(fā)現(xiàn)，影響用戶閱讀順序的并不局限在這些原則中。這些原則太容易被設(shè)計細(xì)節(jié)的引導(dǎo)變化而打破，同樣是左圖右文，設(shè)計引導(dǎo)形式的改變，就會影響到用戶的閱讀順序。
比如我們以左圖右文的形式設(shè)計，左邊的圖片加上圓角、比例縮小、間距拉大、采用卡片設(shè)計等等方式，都可能會影響到信息層級的先后順序?？偨Y(jié)出以下幾點影響視覺層級的設(shè)計細(xì)節(jié)。
卡片
卡片設(shè)計可以讓信息層級顯得煢煢孑立，瞬間脫穎而出。大大降低了受其它信息干擾的層級，移動通欄設(shè)計中四周卡片的形式獨立層級更強(qiáng)，通欄卡片形式的層級次之，但如果卡片設(shè)計成兩列就會呈現(xiàn)上面的Z字形布局。
留白
Feed流之間的留白，在符合視覺的基礎(chǔ)上，留白越多，信息呈現(xiàn)的轉(zhuǎn)化效果越好，受到干擾的影響越小。這里的留白多表現(xiàn)為上下分隔之間的留白，留白大點，單條信息的沉浸感越強(qiáng)。
比例
圖片占據(jù)比例的大小，反饋出用戶視覺聚焦的比重。圖片比例越大，用戶的視覺負(fù)擔(dān)就越重，對文字的影響就越大。絢麗美艷的圖集可以直切內(nèi)容重心，圖片比例大一點更能凸顯優(yōu)勢，反之就需要降低比例，凸顯內(nèi)容。
字體
圖文結(jié)合除了上面說到的圖片還有文字，文字排列的大小、顏色、對齊方式都能引導(dǎo)出不同的視覺呈現(xiàn)。還有通過增加注釋來加強(qiáng)用戶對內(nèi)容的理解，圖片表達(dá)出強(qiáng)烈視覺沖擊力，圖片背后的故事可以通過注釋更多的帶入。
線條
線條作為使用最多的區(qū)隔上下文的分界線——用的少了，整個界面會顯得傻傻分不清。用的多了，又會顯得出手過重，不夠簡潔。
所以線條一直都是最考驗設(shè)計的元素之一 ——
通欄線條分割線阻斷性比較強(qiáng)，欄目標(biāo)題的意味比較強(qiáng)；兩邊留出空隙的分割線加強(qiáng)了并列的延續(xù)性；留出圖片只分割文字區(qū)域提升了用戶的引導(dǎo)屬性；線的開端處留出空隙通欄結(jié)尾，這樣的線條加強(qiáng)引導(dǎo)用戶操作進(jìn)入詳情。
圓角
圓角在設(shè)計中被引用的越來越多，使用圓角更友好。因為人眼趨向于更容易處理圓角，直角比較尖銳，生活中也有很多角容易磕碰到，現(xiàn)代的家居都需要做倒角。用戶對圓角的接收程度更高，帶上圓角似乎就代表了設(shè)計細(xì)節(jié)。直角傳導(dǎo)給視線是靜止的，而圓角的圓滑角度更容易引導(dǎo)視線傳遞。
互動
在Feed流的設(shè)計層級里，還有更小號的元素，評論、分享、作者信息等元素。卻起到了最核心的互動引導(dǎo)作用，內(nèi)容裂變的價值在于產(chǎn)生互動傳播。而用戶的互動行為也是需要設(shè)計去引導(dǎo)的，這樣更能凸顯設(shè)計的意義。
四、寫在最后
用戶眼動的閱讀順序受制于設(shè)計所呈現(xiàn)出來的視覺重心。圖文結(jié)合的設(shè)計形式種類無外乎4種，利用用戶的閱讀順序，通過設(shè)計細(xì)節(jié)的變化，改變視覺重心的引導(dǎo)層級，從而使得產(chǎn)品體驗設(shè)計更符合產(chǎn)品定位，傳遞給用戶的信息也更完善。
作者：VV體驗，微信公眾號：VV體驗
本文由 @VV體驗 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
bu份 u的合法