很可惜 T 。T 您現(xiàn)在還不是作者身份，不能自主發(fā)稿哦～
如有投稿需求，請把文章發(fā)送到郵箱tougao@appcpx.com，一經(jīng)錄用會有專人和您聯(lián)系
咨詢?nèi)绾纬蔀榇河鹱髡哒埪?lián)系：鳥哥筆記小羽毛（ngbjxym）
網(wǎng)上有很多關于圖文結(jié)合設計的討論 ，各大產(chǎn)品的用法也不盡相同，但又符合各自產(chǎn)品的定位。在產(chǎn)品模塊中只要有Feed流都會涉及到圖文結(jié)合的設計，圖文到底怎么設計更合理。討論最多就是用戶的閱讀順序，這確實是非常關鍵的理由，但如果都用閱讀順序來解釋的話，不符合順序的設計豈不是都沒有道理。
就好比男人看女人的順序，臉、胸、腿、還有，你懂的？而女人看男人的順序卻截然相反，高度往往是第一印象、發(fā)型是不是蓬頭垢面、穿著是不是臟兮兮的、然后才到長相、如果有下文還要看言談舉止的細節(jié)。人和人的差距咋就這么大呢？閱讀順序?qū)υO計師來說也太難了。其實閱讀順序是可以通過設計細節(jié)引導的，我們先來看圖文結(jié)合設計的幾種順序。
圖片設計的順序無外乎4種，左圖右文、左文右圖、上圖下文、上文下圖。不同產(chǎn)品據(jù)其所表達側(cè)重點的不同選擇對應的的排列方式。
視覺重心是圖片，對圖片的要求稍微高點，圖片沒能吸引用戶，對轉(zhuǎn)化可能會產(chǎn)一定的影響。用戶優(yōu)先對圖作出反饋，然后才會看到標題，所以圖片具有一定的代表性。最適合的產(chǎn)品類型莫過于具有商品屬性的，用戶的視覺重心先看到商品圖片；再就是使用頻率最高的社交類產(chǎn)品，頭像作為一種高識別度的載體，容易讓人崩潰的是喜歡換頭像的同學?？梢娮髨D右文設計的優(yōu)勢涇渭分明，適合的產(chǎn)品場景也顯而易見。
視覺重心仍然是圖片，但用戶的閱讀順序是從左往右，先看標題文字，標題如果不吸引人，用戶看到圖片吸引人，還會產(chǎn)生二次轉(zhuǎn)化，真正能產(chǎn)生轉(zhuǎn)化的前提還得用戶感興趣才行。所以說這種設計方式特別適合資訊推薦流，只是特別適合，不是說資訊產(chǎn)品就不能采用其它方式。其實具體還是通過設計細節(jié)來權(quán)衡，下文會總結(jié)出設計細節(jié)模塊再做詳細的講述。
作為區(qū)別于左右結(jié)構(gòu)的又一種設計形式，在多圖、大圖、視頻的封面設計中最多，聚焦到圖片的視覺層級變得更高，圖片的質(zhì)量好不好，對引導用戶是否產(chǎn)生閱讀興趣的影響很大。圖片勢必被賦予了更重要的意義，好多核心標題都被表達在了封面里。比較適合影像相冊、藝術(shù)鑒賞、視頻等類型的產(chǎn)品設計中。圖片的質(zhì)量很高，鑒賞性也很強。
用戶的閱讀順序自上而下，相比上圖下文的設計，標題被用戶優(yōu)先閱讀的層級更高，但標題不是唯一的決定因素，也會受到圖片的影響，因為大圖的呈現(xiàn)往往是通屏，占據(jù)的比例很大，對用戶的視覺沖擊比較大。好處就是標題內(nèi)容吸引到用戶，占據(jù)用戶的心智模型，會產(chǎn)生先入為主的優(yōu)勢。這么設計很適合資訊文章中的多圖、短視頻、大圖呈現(xiàn)類產(chǎn)品形式。
古騰堡圖表又叫對角線平衡，設計理念源于約翰內(nèi)斯·古騰堡的古騰堡圖表。在這個模式中眼睛通常會從左上角到右下角瀏覽，缺少注意力的右上角和左下角被叫做視覺盲點。閱讀重力是由于視線趨向于從上到下，從左到右的眼動規(guī)律，左上角是第一視覺落腳點，右下角是最終視覺落腳點，所以右上角和左下角都是一個強烈的視覺盲點區(qū)域，大多數(shù)是容易被忽略的。古騰堡圖表趨向于呈現(xiàn)用戶的眼動規(guī)律體現(xiàn)出設計層級的重心。
Web易用性大師尼爾森（Jakob Nielsen）于2006年提出了F型視覺模型 ，他指出了用戶在第一次觀看頁面時，視線會呈現(xiàn)F字形，由頂部開始從左到右水平移動，目光下移開始從左到右觀察但是長度會相對短些，以較短的長度向下掃視，形成一個 F形狀。很多頁面的熱力圖和可以證實，但我們發(fā)現(xiàn)F字形的閱讀順序很容易受到設計層級影響，而且偏向網(wǎng)頁端。
移動端經(jīng)常會遇到雙列的信息流設計，眼睛從左向右移動，在視線移到右上角后沿著斜對角向下方走，然后視覺再次向右移動，視覺移動的軌跡就像字母Z形狀。Z字形趨向于在移動端，雙列圖文組合的設計類型，用戶的視線來回切換，對沉浸式體驗會產(chǎn)生一定的影響。
從圖文結(jié)合設計的4種類型和用戶的閱讀順序中發(fā)現(xiàn)，影響用戶閱讀順序的并不局限在這些原則中。這些原則太容易被設計細節(jié)的引導變化而打破，同樣是左圖右文，設計引導形式的改變，就會影響到用戶的閱讀順序。比如我們以左圖右文的形式設計，左邊的圖片加上圓角、比例縮小、間距拉大、采用卡片設計等等方式，都可能會影響到信息層級的先后順序?？偨Y(jié)出以下幾點影響視覺層級的設計細節(jié)。
卡片設計可以讓信息層級顯得煢煢孑立，瞬間脫穎而出。大大降低了受其它信息干擾的層級，移動通欄設計中四周卡片的形式獨立層級更強，通欄卡片形式的層級次之，但如果卡片設計成兩列就會呈現(xiàn)上面的Z字形布局。
Feed流之間的留白，在符合視覺的基礎上，留白越多，信息呈現(xiàn)的轉(zhuǎn)化效果越好，受到干擾的影響越小。這里的留白多表現(xiàn)為上下分隔之間的留白，留白大點，單條信息的沉浸感越強。
圖片占據(jù)比例的大小，反饋出用戶視覺聚焦的比重。圖片比例越大，用戶的視覺負擔就越重，對文字的影響就越大。絢麗美艷的圖集可以直切內(nèi)容重心，圖片比例大一點更能凸顯優(yōu)勢，反之就需要降低比例，凸顯內(nèi)容。
圖文結(jié)合除了上面說到的圖片還有文字，文字排列的大小、顏色、對齊方式都能引導出不同的視覺呈現(xiàn)。還有通過增加注釋來加強用戶對內(nèi)容的理解，圖片表達出強烈視覺沖擊力，圖片背后的故事可以通過注釋更多的帶入。
線條作為使用最多的區(qū)隔上下文的分界線。用的少了，整個界面會顯得傻傻分不清。用的多了，又會顯得出手過重，不夠簡潔。所以線條一直都是最考驗設計的元素之一。通欄線條分割線阻斷性比較強，欄目標題的意味比較強；兩邊留出空隙的分割線加強了并列的延續(xù)性；留出圖片只分割文字區(qū)域提升了用戶的引導屬性；線的開端處留出空隙通欄結(jié)尾，這樣的線條加強引導用戶操作進入詳情。
圓角在設計中被引用的越來越多，使用圓角更友好。因為人眼趨向于更容易處理圓角，直角比較尖銳，生活中也有很多角容易磕碰到，現(xiàn)代的家居都需要做倒角。用戶對圓角的接收程度更高，帶上圓角似乎就代表了設計細節(jié)。直角傳導給視線是靜止的，而圓角的圓滑角度更容易引導視線傳遞。
在Feed流的設計層級里，還有更小號的元素，評論、分享、作者信息等元素。卻起到了最核心的互動引導作用，內(nèi)容裂變的價值在于產(chǎn)生互動傳播。而用戶的互動行為也是需要設計去引導的，這樣更能凸顯設計的意義。
用戶眼動的閱讀順序受制于設計所呈現(xiàn)出來的視覺重心。圖文結(jié)合的設計形式種類無外乎4種，利用用戶的閱讀順序，通過設計細節(jié)的變化，改變視覺重心的引導層級，從而使得產(chǎn)品體驗設計更符合產(chǎn)品定位，傳遞給用戶的信息也更完善。
本文為作者獨立觀點，不代表鳥哥筆記立場，未經(jīng)允許不得轉(zhuǎn)載。
《鳥哥筆記版權(quán)及免責申明》 如對文章、圖片、字體等版權(quán)有疑問，請點擊 反饋舉報
測一測
我們致力于提供一個高質(zhì)量內(nèi)容的交流平臺。為落實國家互聯(lián)網(wǎng)信息辦公室“依法管網(wǎng)、依法辦網(wǎng)、依法上網(wǎng)”的要求，為完善跟帖評論自律管理，為了保護用戶創(chuàng)造的內(nèi)容、維護開放、真實、專業(yè)的平臺氛圍，我們團隊將依據(jù)本公約中的條款對注冊用戶和發(fā)布在本平臺的內(nèi)容進行管理。平臺鼓勵用戶創(chuàng)作、發(fā)布優(yōu)質(zhì)內(nèi)容，同時也將采取必要措施管理違法、侵權(quán)或有其他不良影響的網(wǎng)絡信息。
一、根據(jù)《網(wǎng)絡信息內(nèi)容生態(tài)治理規(guī)定》《中華人民共和國未成年人保護法》等法律法規(guī)，對以下違法、不良信息或存在危害的行為進行處理。
1. 違反法律法規(guī)的信息，主要表現(xiàn)為：
1)反對憲法所確定的基本原則；
2)危害國家安全，泄露國家秘密，顛覆國家政權(quán)，破壞國家統(tǒng)一，損害國家榮譽和利益；
3)侮辱、濫用英烈形象，歪曲、丑化、褻瀆、否定英雄烈士事跡和精神，以侮辱、誹謗或者其他方式侵害英雄烈士的姓名、肖像、名譽、榮譽；
4)宣揚恐怖主義、極端主義或者煽動實施恐怖活動、極端主義活動；
5)煽動民族仇恨、民族歧視，破壞民族團結(jié)；
6)破壞國家宗教政策，宣揚邪教和封建迷信；
7)散布謠言，擾亂社會秩序，破壞社會穩(wěn)定；
8)宣揚淫穢、色情、賭博、暴力、兇殺、恐怖或者教唆犯罪；
9)煽動非法集會、結(jié)社、游行、示威、聚眾擾亂社會秩序；
10)侮辱或者誹謗他人，侵害他人名譽、隱私和其他合法權(quán)益；
11)通過網(wǎng)絡以文字、圖片、音視頻等形式，對未成年人實施侮辱、誹謗、威脅或者惡意損害未成年人形象進行網(wǎng)絡欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法規(guī)禁止的其他內(nèi)容；
2. 不友善：不尊重用戶及其所貢獻內(nèi)容的信息或行為。主要表現(xiàn)為：
1)輕蔑：貶低、輕視他人及其勞動成果；
2)誹謗：捏造、散布虛假事實，損害他人名譽；
3)嘲諷：以比喻、夸張、侮辱性的手法對他人或其行為進行揭露或描述，以此來激怒他人；
4)挑釁：以不友好的方式激怒他人，意圖使對方對自己的言論作出回應，蓄意制造事端；
5)羞辱：貶低他人的能力、行為、生理或身份特征，讓對方難堪；
6)謾罵：以不文明的語言對他人進行負面評價；
7)歧視：煽動人群歧視、地域歧視等，針對他人的民族、種族、宗教、性取向、性別、年齡、地域、生理特征等身份或者歸類的攻擊；
8)威脅：許諾以不良的后果來迫使他人服從自己的意志；
3. 發(fā)布垃圾廣告信息：以推廣曝光為目的，發(fā)布影響用戶體驗、擾亂本網(wǎng)站秩序的內(nèi)容，或進行相關行為。主要表現(xiàn)為：
1)多次發(fā)布包含售賣產(chǎn)品、提供服務、宣傳推廣內(nèi)容的垃圾廣告。包括但不限于以下幾種形式：
2)單個帳號多次發(fā)布包含垃圾廣告的內(nèi)容；
3)多個廣告帳號互相配合發(fā)布、傳播包含垃圾廣告的內(nèi)容；
4)多次發(fā)布包含欺騙性外鏈的內(nèi)容，如未注明的淘寶客鏈接、跳轉(zhuǎn)網(wǎng)站等，誘騙用戶點擊鏈接
5)發(fā)布大量包含推廣鏈接、產(chǎn)品、品牌等內(nèi)容獲取搜索引擎中的不正當曝光；
6)購買或出售帳號之間虛假地互動，發(fā)布干擾網(wǎng)站秩序的推廣內(nèi)容及相關交易。
7)發(fā)布包含欺騙性的惡意營銷內(nèi)容，如通過偽造經(jīng)歷、冒充他人等方式進行惡意營銷；
8)使用特殊符號、圖片等方式規(guī)避垃圾廣告內(nèi)容審核的廣告內(nèi)容。
4. 色情低俗信息，主要表現(xiàn)為：
1)包含自己或他人性經(jīng)驗的細節(jié)描述或露骨的感受描述；
2)涉及色情段子、兩性笑話的低俗內(nèi)容；
3)配圖、頭圖中包含庸俗或挑逗性圖片的內(nèi)容；
4)帶有性暗示、性挑逗等易使人產(chǎn)生性聯(lián)想；
5)展現(xiàn)血腥、驚悚、殘忍等致人身心不適；
6)炒作緋聞、丑聞、劣跡等；
7)宣揚低俗、庸俗、媚俗內(nèi)容。
5. 不實信息，主要表現(xiàn)為：
1)可能存在事實性錯誤或者造謠等內(nèi)容；
2)存在事實夸大、偽造虛假經(jīng)歷等誤導他人的內(nèi)容；
3)偽造身份、冒充他人，通過頭像、用戶名等個人信息暗示自己具有特定身份，或與特定機構(gòu)或個人存在關聯(lián)。
6. 傳播封建迷信，主要表現(xiàn)為：
1)找人算命、測字、占卜、解夢、化解厄運、使用迷信方式治??；
2)求推薦算命看相大師；
3)針對具體風水等問題進行求助或咨詢；
4)問自己或他人的八字、六爻、星盤、手相、面相、五行缺失，包括通過占卜方法問婚姻、前程、運勢，東西寵物丟了能不能找回、取名改名等；
7. 文章標題黨，主要表現(xiàn)為：
1)以各種夸張、獵奇、不合常理的表現(xiàn)手法等行為來誘導用戶；
2)內(nèi)容與標題之間存在嚴重不實或者原意扭曲；
3)使用夸張標題，內(nèi)容與標題嚴重不符的。
8.「飯圈」亂象行為，主要表現(xiàn)為：
1)誘導未成年人應援集資、高額消費、投票打榜
2)粉絲互撕謾罵、拉踩引戰(zhàn)、造謠攻擊、人肉搜索、侵犯隱私
3)鼓動「飯圈」粉絲攀比炫富、奢靡享樂等行為
4)以號召粉絲、雇用網(wǎng)絡水軍、「養(yǎng)號」形式刷量控評等行為
5)通過「蹭熱點」、制造話題等形式干擾輿論，影響傳播秩序
9. 其他危害行為或內(nèi)容，主要表現(xiàn)為：
1)可能引發(fā)未成年人模仿不安全行為和違反社會公德行為、誘導未成年人不良嗜好影響未成年人身心健康的；
2)不當評述自然災害、重大事故等災難的；
3)美化、粉飾侵略戰(zhàn)爭行為的；
4)法律、行政法規(guī)禁止，或可能對網(wǎng)絡生態(tài)造成不良影響的其他內(nèi)容。
二、違規(guī)處罰
本網(wǎng)站通過主動發(fā)現(xiàn)和接受用戶舉報兩種方式收集違規(guī)行為信息。所有有意的降低內(nèi)容質(zhì)量、傷害平臺氛圍及欺凌未成年人或危害未成年人身心健康的行為都是不能容忍的。
當一個用戶發(fā)布違規(guī)內(nèi)容時，本網(wǎng)站將依據(jù)相關用戶違規(guī)情節(jié)嚴重程度，對帳號進行禁言 1 天、7 天、15 天直至永久禁言或封停賬號的處罰。當涉及欺凌未成年人、危害未成年人身心健康、通過作弊手段注冊、使用帳號，或者濫用多個帳號發(fā)布違規(guī)內(nèi)容時，本網(wǎng)站將加重處罰。
三、申訴
隨著平臺管理經(jīng)驗的不斷豐富，本網(wǎng)站出于維護本網(wǎng)站氛圍和秩序的目的，將不斷完善本公約。
如果本網(wǎng)站用戶對本網(wǎng)站基于本公約規(guī)定做出的處理有異議，可以通過「建議反饋」功能向本網(wǎng)站進行反饋。
(規(guī)則的最終解釋權(quán)歸屬本網(wǎng)站所有)