裎咔螅(xi)淖盅(zhong)怪迷諭計納舷祿蜃笥掖Γ泳醮鐨Ч憊鄱苛遙艘源蠓蕉嬲(niao)溝氖泳醺惺(xing)堋?

　　7.3.2從H5頁面看圖(tu)文消息版式布局小技巧

　　 版式設計不僅存在于微信(xin)H5頁面之中，利用(yong)微信(xin)公眾平臺后臺發布的圖文消息中同(tong)樣也會涉及元素的分(fen)布與編排。

　　 圖文消息(xi)的版(ban)式編排技巧是可以參(can)考前文所述的H5頁面版(ban)式布局(ju)的設計(ji)思(si)路的，在這里(li)就不過多地(di)對設計(ji)思(si)路進行介紹。然而由于微信公眾平臺(tai)后臺(tai)圖文消息(xi)編輯器(qi)的功能較(jiao)為簡單(dan)，如何得到更好看的圖文消息(xi)版(ban)式布局(ju)呢(ni)？下面就來(lai)進行簡單(dan)了解(jie)。

　　學會居中

　　 圖(tu)(tu)文消息(xi)最常(chang)見的(de)版式(shi)布局(ju)方式(shi)莫過于(yu)(yu)一張(zhang)圖(tu)(tu)片搭配一段文字，在微信公眾平臺(tai)圖(tu)(tu)文消息(xi)編(bian)輯后(hou)臺(tai)也很容易實現。然而有(you)時為了讓(rang)版式(shi)變得更加(jia)美觀，也需要(yao)活用(yong)編(bian)輯后(hou)臺(tai)的(de)“對齊方式(shi)”功能，此時對齊方式(shi)不單(dan)單(dan)只作用(yong)于(yu)(yu)文字，同時也可以作用(yong)于(yu)(yu)圖(tu)(tu)片。

　　 比(bi)如如右圖(tu)(tu)所示(shi)的圖(tu)(tu)文消(xiao)息頁面，頁面中(zhong)(zhong)(zhong)間(jian)的圖(tu)(tu)片內容(rong)為(wei)公布的活動時間(jian)、獎(jiang)品(pin)等信息，相對(dui)于下左(zuo)圖(tu)(tu)將圖(tu)(tu)片左(zuo)對(dui)齊(qi)而言，下右圖(tu)(tu)中(zhong)(zhong)(zhong)將圖(tu)(tu)片居中(zhong)(zhong)(zhong)的版(ban)(ban)式(shi)布局(ju)看起來更為(wei)整(zheng)齊(qi)美觀。這種中(zhong)(zhong)(zhong)心型集中(zhong)(zhong)(zhong)式(shi)版(ban)(ban)式(shi)布局(ju)能讓(rang)重(zhong)點信息顯得更加突出，同時結合(he)下方居中(zhong)(zhong)(zhong)對(dui)齊(qi)的文字，也會讓(rang)版(ban)(ban)式(shi)整(zheng)體(ti)顯得更為(wei)均衡，突出了公布獎(jiang)品(pin)時的中(zhong)(zhong)(zhong)規中(zhong)(zhong)(zhong)矩感(gan)。

　　 在編輯圖(tu)(tu)文(wen)(wen)消(xiao)息時，當所上(shang)傳的(de)圖(tu)(tu)片(pian)(pian)橫(heng)向尺寸(cun)不(bu)足(zu)以填滿頁面且沒(mei)有選擇“自(zi)適應(ying)手機屏幕寬度”選項時，微信后臺系(xi)統(tong)會默認(ren)為左對齊的(de)方式(shi)。在這種情況(kuang)下(xia)，如(ru)果(guo)沒(mei)有特(te)殊的(de)版(ban)(ban)式(shi)要求，只是發布(bu)簡單的(de)一段(duan)文(wen)(wen)字(zi)一幅(fu)圖(tu)(tu)片(pian)(pian)這種圖(tu)(tu)文(wen)(wen)消(xiao)息類型(xing)，最(zui)好(hao)是選中該圖(tu)(tu)片(pian)(pian)，按微信公眾平(ping)臺圖(tu)(tu)文(wen)(wen)消(xiao)息編輯后臺上(shang)方的(de)“居中對齊”按鈕，將(jiang)圖(tu)(tu)片(pian)(pian)手動設置為居中對齊的(de)方式(shi)，這樣(yang)會讓版(ban)(ban)面整體(ti)看起來更為美觀。

　　活用(yong)微信(xin)編(bian)輯器(qi)組(zu)合版式

　　 當然(ran)，圖(tu)片并不只有“居中對(dui)齊(qi)”一(yi)種(zhong)排版(ban)方(fang)(fang)式，有時也可以采用(yong)不同的對(dui)齊(qi)方(fang)(fang)式去讓版(ban)式看起來(lai)更(geng)加錯(cuo)(cuo)落有致(zhi)，如右圖(tu)所示。左、右對(dui)齊(qi)方(fang)(fang)式的混合運用(yong)，讓版(ban)式形成了(le)忽左忽右的錯(cuo)(cuo)落感，相對(dui)于一(yi)致(zhi)靠(kao)一(yi)個方(fang)(fang)向對(dui)齊(qi)的版(ban)式而言，這樣的布局顯得更(geng)加靈動與活潑(po)。

　　 然而這樣錯(cuo)落的版式如(ru)果直接通過微信公眾平臺(tai)圖(tu)文編(bian)(bian)輯后(hou)臺(tai)去(qu)實(shi)現的話(hua)會顯(xian)得較為死板，由于后(hou)臺(tai)編(bian)(bian)輯功能(neng)(neng)較為單一(yi)，導致一(yi)張圖(tu)片后(hou)面只能(neng)(neng)跟(gen)隨一(yi)句話(hua)，且沒法做到文字與(yu)圖(tu)片頂對齊，如(ru)右圖(tu)所(suo)示(shi)，這樣的版式雖(sui)然有了(le)變化感，卻仍然顯(xian)得生(sheng)硬。此時，利用(yong)微信編(bian)(bian)輯器能(neng)(neng)夠最(zui)為方便地解決這一(yi)問題。

　　 在某些微信編輯器中會有些版式布(bu)局的模板，如下(xia)圖所示，將(jiang)這(zhe)些模板合理地編輯組合，也(ye)能構(gou)成不錯的圖文消息(xi)版式效果。

　　 如(ru)下圖(tu)(tu)所(suo)示的(de)“三(san)福sanfu”公眾號所(suo)推送(song)的(de)一則(ze)與“情人(ren)節”相關(guan)的(de)圖(tu)(tu)文消息(xi)便(bian)組合(he)運用了(le)編輯器中的(de)多個邊框(kuang)，并(bing)且結合(he)微(wei)信(xin)編輯器中的(de)模板，讓部分圖(tu)(tu)片也呈現出了(le)左右(you)交錯排列的(de)組合(he)效果。

　　 在組合微(wei)信編輯器中(zhong)的(de)(de)(de)模板(ban)(ban)時，“三福sanfu”也(ye)很好(hao)地(di)把握了統一與(yu)(yu)明(ming)確主題(ti)的(de)(de)(de)設計(ji)思想。說(shuo)到情(qing)人節總(zong)是與(yu)(yu)夢幻、浪(lang)漫脫離不(bu)了關系，而要代(dai)表這樣的(de)(de)(de)情(qing)感的(de)(de)(de)色(se)彩，粉(fen)紅(hong)色(se)是最適合不(bu)過的(de)(de)(de)。在該條以“情(qing)人節”為主線的(de)(de)(de)圖文消(xiao)(xiao)息(xi)(xi)中(zhong)，便將(jiang)各個模板(ban)(ban)統一地(di)采用(yong)了粉(fen)紅(hong)色(se)系色(se)彩，讓圖文消(xiao)(xiao)息(xi)(xi)版式在整(zheng)體統一中(zhong)又透著一股濃(nong)(nong)濃(nong)(nong)的(de)(de)(de)情(qing)人節氣(qi)息(xi)(xi)。

　　信(xin)息視圖化(hua)帶來(lai)輕松閱讀

　　 除(chu)了直接在微信(xin)公眾平臺(tai)圖(tu)(tu)文(wen)編輯(ji)后臺(tai)或是結(jie)合微信(xin)編輯(ji)器(qi)對圖(tu)(tu)文(wen)消息(xi)進行版(ban)式布(bu)局(ju)以外，還可以利用(yong)圖(tu)(tu)片的設計去進行圖(tu)(tu)文(wen)消息(xi)版(ban)式的布(bu)局(ju)。

　　 不過如前文所(suo)述，這種方式可能會(hui)(hui)帶(dai)去較(jiao)大的設計工作量，且全是圖(tu)片的版式布(bu)局也可能會(hui)(hui)影(ying)響圖(tu)文消息(xi)的加載速度，從而對(dui)用戶的閱讀形(xing)成阻礙。

　　 但是(shi)有些(xie)圖(tu)文(wen)消(xiao)息(xi)是(shi)可以主(zhu)要通過圖(tu)片去表現的(de)(de)(de)，比(bi)如一(yi)些(xie)信(xin)(xin)息(xi)視圖(tu)化的(de)(de)(de)圖(tu)文(wen)消(xiao)息(xi)，在上圖(tu)所(suo)展示(shi)的(de)(de)(de)“央視新聞(wen)”推送的(de)(de)(de)“【一(yi)圖(tu)解(jie)讀】明(ming)(ming)天(tian)開(kai)始，罵老婆、打孩子、虐老人都可能違法！”圖(tu)文(wen)消(xiao)息(xi)便是(shi)主(zhu)要通過圖(tu)片去說明(ming)(ming)信(xin)(xin)息(xi)的(de)(de)(de)。

　　 就(jiu)如該(gai)則圖(tu)(tu)(tu)文(wen)消息(xi)(xi)(xi)的標題所示“【一(yi)(yi)圖(tu)(tu)(tu)解讀】”——通過一(yi)(yi)張信(xin)息(xi)(xi)(xi)視(shi)圖(tu)(tu)(tu)圖(tu)(tu)(tu)片概(gai)括千言萬(wan)語，傳(chuan)遞消息(xi)(xi)(xi)內容。其實有時(shi)候，相較于在微(wei)信(xin)公眾平臺(tai)圖(tu)(tu)(tu)文(wen)消息(xi)(xi)(xi)編輯后臺(tai)去進(jin)(jin)行信(xin)息(xi)(xi)(xi)可(ke)視(shi)化的表(biao)現設計而言，利(li)用(yong)其他軟件(jian)可(ke)能(neng)會(hui)顯得更加方(fang)便，且也能(neng)對(dui)信(xin)息(xi)(xi)(xi)進(jin)(jin)行更好地美化。

　　 信息(xi)可視化(hua)指的(de)是將(jiang)各種各樣的(de)信息(xi)轉化(hua)成形象(xiang)生動的(de)視圖效(xiao)果，讓(rang)觀者能(neng)夠從視圖中(zhong)直觀并快(kuai)速地接收與理解信息(xi)。

　　 除了上圖(tu)(tu)中的表現方式以(yi)外，信(xin)息視圖(tu)(tu)化還可以(yi)是(shi)對數(shu)據(ju)圖(tu)(tu)表等信(xin)息的表現。如右圖(tu)(tu)“財付通”所(suo)推送的“2014年網(wang)上支(zhi)付安(an)全報告”圖(tu)(tu)文(wen)消息所(suo)示(shi)，該則圖(tu)(tu)文(wen)消息利用(yong)(yong)信(xin)息視圖(tu)(tu)化，更加直接(jie)與清晰地向(xiang)用(yong)(yong)戶(hu)展(zhan)示(shi)了相關的數(shu)據(ju)報告。

　　 信(xin)(xin)息(xi)視圖(tu)(tu)化(hua)(hua)表(biao)現(xian)(xian)方式(shi)在(zai)(zai)如(ru)(ru)今這個閱(yue)讀(du)碎片(pian)化(hua)(hua)的(de)(de)讀(du)圖(tu)(tu)時(shi)代非常(chang)(chang)盛行，因為其具備高度的(de)(de)概(gai)括(kuo)與(yu)總(zong)結(jie)(jie)性(xing)(xing)，且表(biao)現(xian)(xian)信(xin)(xin)息(xi)時(shi)條(tiao)理(li)(li)清晰明了，非常(chang)(chang)適合(he)用戶輕(qing)松與(yu)快速地獲取資訊。也(ye)正因如(ru)(ru)此，在(zai)(zai)表(biao)現(xian)(xian)一(yi)些數據總(zong)結(jie)(jie)報告性(xing)(xing)的(de)(de)圖(tu)(tu)文消息(xi)中會經常(chang)(chang)用到這種表(biao)現(xian)(xian)方式(shi)。當然，其他類型的(de)(de)文章也(ye)同樣可以運用信(xin)(xin)息(xi)視圖(tu)(tu)化(hua)(hua)表(biao)現(xian)(xian)方式(shi)，但是都需要設(she)計者集結(jie)(jie)創意的(de)(de)精華，并(bing)且也(ye)要求設(she)計者本(ben)身(shen)對(dui)信(xin)(xin)息(xi)就有(you)著(zhu)較深的(de)(de)理(li)(li)解(jie)，才能總(zong)結(jie)(jie)與(yu)整理(li)(li)出結(jie)(jie)構清晰、更具條(tiao)理(li)(li)性(xing)(xing)的(de)(de)信(xin)(xin)息(xi)可視化(hua)(hua)圖(tu)(tu)片(pian)。

　　 在此對信(xin)息視(shi)(shi)圖(tu)(tu)化(hua)的設計不多(duo)做說明，想要了解的讀者可以參(can)考《一圖(tu)(tu)勝千(qian)言·信(xin)息可視(shi)(shi)化(hua)藝術(shu)設計指南》《圖(tu)(tu)解力(li)(li)——寫給大家(jia)看的信(xin)息視(shi)(shi)圖(tu)(tu)設計書》或是(shi)《圖(tu)(tu)解力(li)(li)——信(xin)息可視(shi)(shi)化(hua)設計方法(fa)與案例解析》這幾本書。

　　利用長圖(tu)突(tu)顯版式的(de)整體感

　　 在(zai)前文(wen)(wen)列舉的(de)圖(tu)(tu)文(wen)(wen)消息(xi)(xi)案例中，設計版(ban)式時仍(reng)然會用圖(tu)(tu)片(pian)去對(dui)信(xin)息(xi)(xi)視圖(tu)(tu)化(hua)圖(tu)(tu)片(pian)進行說明。不過(guo)由于信(xin)息(xi)(xi)視圖(tu)(tu)化(hua)本(ben)身的(de)版(ban)式就顯得較為靈活，因此在(zai)圖(tu)(tu)文(wen)(wen)消息(xi)(xi)中穿插(cha)這(zhe)些擁有信(xin)息(xi)(xi)視圖(tu)(tu)化(hua)表現的(de)圖(tu)(tu)片(pian)，能(neng)讓(rang)圖(tu)(tu)文(wen)(wen)消息(xi)(xi)的(de)整體(ti)版(ban)面看起來更加豐富。

　　 除此(ci)之外，也可以(yi)直接在長圖中進行版(ban)式(shi)的設(she)計，然后將長圖放置在圖文消息(xi)(xi)中進行發(fa)布。與前文所提到的案例不同的是(shi)(shi)，長圖指的是(shi)(shi)其中不穿插任何在圖文消息(xi)(xi)編輯后臺(tai)編輯的文字或是(shi)(shi)其他(ta)圖片(pian)等元素，直接在一張圖片(pian)中將信息(xi)(xi)內容(rong)進行布局與安排，這樣能讓(rang)圖文信息(xi)(xi)顯得更具整體感。

　　 如右圖所示的(de)“鏈家網”公眾號所推送(song)的(de)“鏈家福利(li)(li)丨(shu)囤房(fang)爸媽的(de)福利(li)(li)，送(song)百萬(wan)育兒基金！”圖文(wen)消息，除了在文(wen)章開(kai)頭插入品(pin)牌徽標、標題廣告圖片及(ji)一(yi)段視頻介紹(shao)以外(wai)，后面(mian)的(de)活動詳情介紹(shao)則只使用一(yi)張長圖。

　　 在主要以藍色(se)(se)作為背景色(se)(se)彩(cai)的(de)(de)(de)(de)(de)長圖(tu)中(zhong)，將與活動相(xiang)關(guan)的(de)(de)(de)(de)(de)圖(tu)片(pian)、文(wen)字(zi)(zi)、裝飾圖(tu)形等信息元素進行(xing)了中(zhong)軸型排版分布，顯(xian)得簡潔(jie)明了。同時由于(yu)微信公(gong)眾平臺(tai)圖(tu)文(wen)編(bian)輯后臺(tai)只(zhi)能針對文(wen)字(zi)(zi)進行(xing)背景色(se)(se)的(de)(de)(de)(de)(de)填充，而沒法給文(wen)字(zi)(zi)的(de)(de)(de)(de)(de)行(xing)距等進行(xing)整(zheng)體的(de)(de)(de)(de)(de)背景色(se)(se)彩(cai)的(de)(de)(de)(de)(de)添加(jia)。因此，長圖(tu)的(de)(de)(de)(de)(de)設計避免了在后臺(tai)中(zhong)插入文(wen)字(zi)(zi)所帶(dai)來的(de)(de)(de)(de)(de)對藍色(se)(se)背景的(de)(de)(de)(de)(de)打(da)斷感，讓版式(shi)整(zheng)體更(geng)加(jia)完整(zheng)與連貫。

　　 當然，如果圖(tu)片(pian)過長，有(you)的(de)商家也會選擇對圖(tu)片(pian)進行分割后(hou)再(zai)置入到圖(tu)文消息(xi)之中，如右圖(tu)“三福(fu)sanfu”公眾號“三福(fu)君任性(xing)，就要你們人人100%中獎(jiang)”圖(tu)文消息(xi)所示。

　　 由(you)于置入長(chang)圖(tu)的尺寸(cun)過(guo)大，所以需要對長(chang)圖(tu)進行分割，然(ran)后(hou)上傳到圖(tu)文消息編輯頁面中。不過(guo)此時需要保證(zheng)被分割圖(tu)片(pian)的尺寸(cun)以及裁切的位置，這樣才能(neng)夠將(jiang)多張圖(tu)毫無痕跡地拼接在一(yi)起。

　　 不過通常情況下是對同一(yi)張長圖進行的(de)切割(ge)(ge)(ge)，尺寸的(de)問題不用過分擔心，但需要注意(yi)裁(cai)切誤(wu)差。分割(ge)(ge)(ge)方法(fa)可以參考上一(yi)章中(zhong)提到(dao)的(de)九(jiu)宮格圖片(pian)的(de)切割(ge)(ge)(ge)，讓軟(ruan)件自動保存分割(ge)(ge)(ge)圖片(pian)，這樣(yang)就不用擔心切割(ge)(ge)(ge)后的(de)拼接(jie)問題。

　　 同(tong)時需要注意的(de)是，拼(pin)接小圖(tu)最好使用(yong)“關閉(bi)圖(tu)片(pian)水印(yin)”的(de)效(xiao)果，版式中(zhong)單獨(du)的(de)圖(tu)片(pian)開啟(qi)水印(yin)效(xiao)果的(de)影響并不大(da)，但對(dui)于拼(pin)接成為長圖(tu)的(de)圖(tu)片(pian)而言，關閉(bi)水印(yin)才不至于因為每張(zhang)圖(tu)片(pian)出現(xian)的(de)水印(yin)而妨礙到長圖(tu)展示的(de)完整性。

　　 長圖排版雖然有著較大的(de)美化空間，但還是會影響用戶的(de)打(da)開速度，并(bing)且對于圖文(wen)消(xiao)息(xi)簡單編(bian)(bian)輯的(de)初學者而言(yan)，其實(shi)可(ke)以直(zhi)(zhi)接使用一(yi)張(zhang)長圖，且并(bing)不推薦分割長圖的(de)辦法(fa)去進行圖文(wen)消(xiao)息(xi)的(de)編(bian)(bian)輯。因為分割長圖后(hou)，如(ru)果直(zhi)(zhi)接通過(guo)微信圖文(wen)消(xiao)息(xi)編(bian)(bian)輯后(hou)臺進行圖片的(de)置入是無(wu)法(fa)做到無(wu)縫(feng)拼

　　以上就是小編為大家介紹的所以需要對長圖進行分割的全部內容(rong)，如果大家還對相關的內容(rong)感興(xing)趣，請持續(xu)關注上海危機公關公司

　　本文標題：所以需要對長圖進行分割　　地址：/pinpaiweihu/2021/1206/1371.html