感度(du)，積極參與活動(dong)。然而，如(ru)今(jin)由于創意的缺乏和(he)同質(zhi)化現象嚴(yan)重，導致(zhi)用戶對小游戲(xi)產生了厭倦(juan)。

　　 此時，品牌在(zai)利(li)用(yong)H5小游戲進行傳播(bo)時，更需要(yao)在(zai)玩法和視覺設計上多下功夫。如果做不到(dao)很特別的(de)創新(xin)，起(qi)碼要(yao)保證通過H5小游戲可以起(qi)到(dao)信息傳播(bo)或是提升(sheng)用(yong)戶(hu)體驗的(de)效果。

　　 下(xia)圖所示為(wei)“財(cai)付通”公眾(zhong)號在猴(hou)年春節期(qi)間推出的(de)一(yi)則新(xin)年祝(zhu)(zhu)福(fu)H5頁面(mian)，該祝(zhu)(zhu)福(fu)就是通過將“學習紅包秘笈”這一(yi)線索貫穿在H5小(xiao)游戲的(de)情節中傳遞給(gei)用戶的(de)。

　　 首先(xian)利用(yong)幾(ji)頁H5頁面簡單說明了(le)紅包秘笈，如上頁圖所(suo)示，通過打趣的方式營造出了(le)一(yi)種輕(qing)松愉悅的閱讀(du)氛圍。

　　 在學(xue)習完秘笈(ji)之后(hou)(hou)，便要(yao)進入“考試”階段——如下圖所示(shi)，直接進入到了搶紅包的游(you)戲(xi)(xi)挑戰頁面，最后(hou)(hou)還(huan)會根據“成績”也就是游(you)戲(xi)(xi)情況頒發相應的稱號(hao)。

　　 該則(ze)H5游(you)戲的(de)(de)(de)(de)情節設(she)計(ji)得連(lian)貫而(er)流暢，視(shi)(shi)覺設(she)計(ji)也顯得醒目而(er)統一(yi)。雖然點擊按鈕搶(qiang)紅包的(de)(de)(de)(de)游(you)戲設(she)計(ji)并(bing)不見得非常具有創新意味，但是結合整體的(de)(de)(de)(de)情節與視(shi)(shi)覺設(she)計(ji)，能(neng)讓用戶感受到企業的(de)(de)(de)(de)用心(xin)，也真切地體會到新年(nian)的(de)(de)(de)(de)歡樂，在可愛而(er)輕松(song)的(de)(de)(de)(de)氛圍(wei)中提(ti)升用戶對企業的(de)(de)(de)(de)好(hao)感。

　　細節與統一(yi)

　　 上述(shu)的(de)(de)(de)三種(zhong)形(xing)(xing)式其(qi)實都是用以提升用戶(hu)體驗，讓他們更多(duo)去關注(zhu)所(suo)推送的(de)(de)(de)H5頁面的(de)(de)(de)不錯的(de)(de)(de)設計方法，然(ran)而這些表現形(xing)(xing)式也(ye)離(li)不開(kai)對細(xi)節(jie)的(de)(de)(de)把(ba)控(kong)。

　　 比(bi)如(ru)前文所提到的(de)“理財通”在紅包上(shang)(shang)放置徽(hui)標的(de)做法就是一種細(xi)節(jie)設計(ji)。除此之(zhi)外，有些細(xi)節(jie)還體現在人性化、趣味(wei)性的(de)設計(ji)上(shang)(shang)。

　　 如右(you)圖(tu)所(suo)示(shi)，相較于傳統而(er)(er)單一的(de)“分享提示(shi)”而(er)(er)言，圖(tu)中還插(cha)入對(dui)“分享提示(shi)”更加個性化的(de)設計(ji)(ji)，這(zhe)樣的(de)視覺設計(ji)(ji)顯得生動活潑，也富有人情味，讓用(yong)(yong)戶在(zai)感到有趣的(de)同時(shi)，也忍不住(zhu)想要為設計(ji)(ji)者的(de)用(yong)(yong)心(xin)良苦而(er)(er)點贊(zan)。

　　 當然(ran)這(zhe)也離不開(kai)統(tong)一(yi)的(de)視覺(jue)(jue)表現。如下(xia)圖所示(shi)，“拍(pai)拍(pai)微店(dian)”所推出(chu)的(de)這(zhe)則“刷個朋友圈的(de)功夫都能開(kai)店(dian)了(le)”的(de)H5頁面，其主(zhu)要的(de)視覺(jue)(jue)設(she)計以手繪風格為主(zhu)，同時整體(ti)設(she)計走(zou)的(de)是(shi)逗趣路線，畫面顯得有趣而生動。因此，在設(she)計“分享提示(shi)”頁面時也同樣延續了(le)這(zhe)樣的(de)風格，如右圖所示(shi)。

　　 要成就高品(pin)質的(de)用戶體驗(yan)，必須考慮(lv)到細節(jie)與整(zheng)體的(de)統一(yi)性，否則在(zai)如今(jin)H5頁面泛濫(lan)的(de)洪流中，粗(cu)糙的(de)H5頁面設計(ji)不僅沒有(you)辦(ban)法脫穎而出，也不能給用戶留下(xia)好(hao)(hao)的(de)印(yin)象，這對(dui)企業形象的(de)構建是不利的(de)。并且統一(yi)H5頁面的(de)設計(ji)風格，能讓用戶的(de)視覺(jue)感官得到具有(you)延續性的(de)良好(hao)(hao)體驗(yan)，給用戶留下(xia)整(zheng)潔的(de)視覺(jue)享受(shou)。

　　7.3透過(guo)微信H5看版式布局(ju)

　　 在微信H5頁(ye)(ye)面(mian)中會出(chu)現文字、色彩、圖形等元素(su)，而(er)這些(xie)元素(su)也不能(neng)雜亂(luan)無章，合理地(di)將它(ta)們安(an)排在一起是讓(rang)H5頁(ye)(ye)面(mian)更具感(gan)官體驗(yan)的(de)關鍵，也是制作出(chu)更加(jia)絢麗的(de)H5頁(ye)(ye)面(mian)的(de)前提條件，而(er)這一過程便涉及版面(mian)的(de)構成，也就是整體版式的(de)設計。

　　7.3.1版式在H5頁(ye)面中的應用

　　 版(ban)面的(de)(de)(de)(de)構成是信(xin)息(xi)傳(chuan)播的(de)(de)(de)(de)橋(qiao)梁，發揮版(ban)面元素(su)中(zhong)各自的(de)(de)(de)(de)特點(dian)和功(gong)能(neng)，會(hui)使整(zheng)個版(ban)面兼具(ju)內容的(de)(de)(de)(de)完善性(xing)和美觀性(xing)，從(cong)而更快、更準(zhun)確地(di)傳(chuan)遞信(xin)息(xi)。對(dui)(dui)(dui)于(yu)(yu)微信(xin)H5頁面的(de)(de)(de)(de)版(ban)式(shi)設計也是如此(ci)，同時(shi)還(huan)需要考慮用戶的(de)(de)(de)(de)閱(yue)讀體驗等，結合所需傳(chuan)遞的(de)(de)(de)(de)信(xin)息(xi)的(de)(de)(de)(de)特點(dian)，恰當地(di)對(dui)(dui)(dui)H5頁面中(zhong)的(de)(de)(de)(de)元素(su)進行分配(pei)與布局(ju)，這樣才(cai)能(neng)讓H5頁面輕松地(di)突(tu)顯主題(ti)，也更加(jia)便(bian)于(yu)(yu)用戶對(dui)(dui)(dui)于(yu)(yu)信(xin)息(xi)的(de)(de)(de)(de)接收。

　　 接下來結合前文提到的(de)案例，了解具體有哪些常見(jian)的(de)版式(shi)布局。

　　 1中心型(xing)中心型(xing)排版是一種最(zui)為常見(jian)的(de)(de)H5頁面(mian)布局形式，利用集中式的(de)(de)布局構建視(shi)覺中心，聚焦用戶(hu)的(de)(de)視(shi)線(xian)，從而起(qi)到(dao)突出(chu)想要表達的(de)(de)事(shi)物或者主(zhu)題的(de)(de)作用。

　　 比如前文(wen)中所(suo)提到“理(li)財通(tong)”所(suo)推送的“理(li)財通(tong)發年終(zhong)獎啦”H5頁面，在答題失敗、成(cheng)功(gong)或是要填寫相關(guan)抽獎信息時，便采用了中心型(xing)版式(shi)構圖，如下圖所(suo)示。

　　 將(jiang)提示信(xin)息(xi)放置(zhi)在(zai)裝(zhuang)飾(shi)框中(zhong)，并(bing)將(jiang)它們安排在(zai)了(le)頁面(mian)的中(zhong)心(xin)位置(zhi)，加之頁面(mian)背景色彩與(yu)裝(zhuang)飾(shi)框色彩反差也(ye)較大，結合集中(zhong)式的構圖(tu)，讓信(xin)息(xi)可(ke)以(yi)一目(mu)了(le)然地傳遞(di)到用戶(hu)眼(yan)前。

　　 2中(zhong)(zhong)軸(zhou)(zhou)型(xing)(xing)中(zhong)(zhong)軸(zhou)(zhou)型(xing)(xing)與中(zhong)(zhong)心(xin)型(xing)(xing)相(xiang)似，都是較為集中(zhong)(zhong)的(de)(de)構圖(tu)模式，不同(tong)的(de)(de)是，中(zhong)(zhong)心(xin)型(xing)(xing)所集中(zhong)(zhong)的(de)(de)位置為頁面的(de)(de)中(zhong)(zhong)心(xin)點(dian)，而中(zhong)(zhong)軸(zhou)(zhou)型(xing)(xing)則有一條明顯(xian)的(de)(de)頁面中(zhong)(zhong)心(xin)軸(zhou)(zhou)線，元素沿著軸(zhou)(zhou)心(xin)線對(dui)稱排(pai)開。這(zhe)樣的(de)(de)版式構圖(tu)能給予畫面穩定感，同(tong)時又(you)顯(xian)得醒目(mu)大方(fang)。

　　 比如前文中所提(ti)到“拍(pai)拍(pai)微店”推出(chu)的(de)“刷個朋友圈的(de)功夫(fu)都(dou)能開店了”H5頁(ye)面的(de)其中一(yi)個頁(ye)面和“嘉寶”宣(xuan)傳品牌(pai)H5頁(ye)面，如右(you)側兩(liang)圖所示，均采用了中軸型的(de)版式布局。

　　 “拍(pai)拍(pai)微店”這一頁面以頁面的中(zhong)心線為對稱軸，將(jiang)品牌徽標放置在左(zuo)右對稱的兩只豎起大拇(mu)指的拳頭中(zhong)間，起到了集中(zhong)視線的作(zuo)用，同(tong)時(shi)沿著中(zhong)心線下方(fang)也放置了一些文案信(xin)息與(yu)“去下載”和“分享”按鈕，整體布局在對稱的穩定中(zhong)很好地將(jiang)重點信(xin)息集中(zhong)與(yu)突(tu)出。

　　 “嘉(jia)寶”宣(xuan)傳品牌(pai)H5頁面同樣以(yi)頁面的中(zhong)(zhong)心線(xian)為中(zhong)(zhong)軸線(xian)，并沿著這(zhe)條(tiao)中(zhong)(zhong)軸線(xian)從上到下放置了(le)對品牌(pai)的介(jie)紹信息。這(zhe)條(tiao)中(zhong)(zhong)軸線(xian)也是一條(tiao)對稱(cheng)線(xian)，用(yong)來(lai)分(fen)割介(jie)紹品牌(pai)的圖片與文案。

　　 這樣的(de)(de)版式布局不(bu)僅讓H5頁面顯得(de)干(gan)凈整潔、有(you)條不(bu)紊，同(tong)時也很好地迎合(he)了手(shou)機移(yi)(yi)動端(duan)展示的(de)(de)特點，用戶通過(guo)上下滑(hua)動便能輕松進行操控與閱(yue)讀，符合(he)用戶對移(yi)(yi)動端(duan)的(de)(de)操作習慣與閱(yue)讀經(jing)驗(yan)。

　　 3分割(ge)型(xing)分割(ge)型(xing)排版指的(de)(de)是利用(yong)(yong)分割(ge)線使(shi)得頁(ye)面(mian)中的(de)(de)元素(su)具有明(ming)確(que)的(de)(de)獨立性。當制作元素(su)過(guo)多的(de)(de)H5頁(ye)面(mian)時，便可以采用(yong)(yong)分割(ge)型(xing)的(de)(de)排版布(bu)局方式，通過(guo)分割(ge)的(de)(de)手法構建好頁(ye)面(mian)各個版塊的(de)(de)面(mian)積(ji)關系(xi)，使(shi)得版式不僅不會(hui)顯得單調與擁(yong)擠，同時也能(neng)起到很好的(de)(de)視覺引導作用(yong)(yong)。

　　 比如(ru)上例(li)中(zhong)(zhong)的“嘉寶”宣傳(chuan)品牌H5頁面，不僅(jin)是中(zhong)(zhong)軸型版式布局，同(tong)時也利用中(zhong)(zhong)心(xin)(xin)線(xian)對畫面進(jin)行了(le)對稱分(fen)割(ge)。在(zai)頁面中(zhong)(zhong)，以中(zhong)(zhong)心(xin)(xin)線(xian)為視覺引導的分(fen)割(ge)線(xian)，將(jiang)品牌介紹的圖文(wen)(wen)元素分(fen)割(ge)開來的同(tong)時，也將(jiang)它們有序地(di)(di)分(fen)布在(zai)分(fen)割(ge)線(xian)的兩(liang)側，讓文(wen)(wen)字(zi)與圖片都整(zheng)齊地(di)(di)存在(zai)于各自(zi)的獨(du)立空間中(zhong)(zhong)，更加方便了(le)用戶(hu)對信(xin)息的閱讀與接收。

　　 左圖所示(shi)為“京東的(de)(de)十大任性”總(zong)結報告中(zhong)的(de)(de)一個(ge)H5頁面，也是通(tong)過(guo)分(fen)割的(de)(de)形式(shi)讓(rang)畫面有了豐(feng)富的(de)(de)構圖視覺(jue)效果。

　　 頁面中有許多手機元(yuan)素，通過分割圖形將它們獨立(li)，同時又(you)通過對分割形狀面積大小以及色彩的把握(wo)，讓版(ban)式整體有了主次分明的層級感。

　　 4傾(qing)斜型傾(qing)斜型排版(ban)指的是通過(guo)對畫(hua)面中主要元素或整體畫(hua)面的傾(qing)斜排版(ban)，使得畫(hua)面具有較(jiao)強的律動感。

　　 當(dang)要制作一些具(ju)有沖擊性(xing)、跳躍性(xing)效果的頁面時，可(ke)以使用(yong)傾斜(xie)型的排版(ban)方式，使得整(zheng)體的版(ban)式不(bu)至(zhi)于(yu)過于(yu)死板或僵硬，從(cong)而(er)給(gei)用(yong)戶帶去新奇與刺(ci)激的視覺感(gan)受。

　　 比(bi)如下(xia)左(zuo)圖(tu)所(suo)示(shi)的(de)“蘇寧金融”所(suo)推出的(de)產品(pin)介(jie)紹H5頁面，主(zhu)題文字有著(zhu)向(xiang)右上(shang)(shang)方傾斜的(de)趨勢，結合向(xiang)上(shang)(shang)的(de)箭頭，這種不穩定性的(de)表現(xian)能從(cong)視覺的(de)設計上(shang)(shang)更加(jia)直觀地(di)給用戶帶(dai)去產品(pin)能帶(dai)來收益的(de)感受。

　　 下右(you)圖也通過對元素傾斜排放在視(shi)覺上產生了動態感(gan)，結(jie)合飛碟插圖，帶來了較為新奇、有趣的(de)視(shi)覺效(xiao)果。

　　 5骨骼(ge)型(xing)骨骼(ge)型(xing)版(ban)式(shi)經(jing)常被用(yong)在一(yi)些產品(pin)羅列介紹或是信息分點布局(ju)的H5頁面(mian)之中。骨骼(ge)型(xing)版(ban)式(shi)指的是有序地(di)將頁面(mian)中的圖文(wen)等(deng)元素排(pai)列，從而(er)能使得頁面(mian)具(ju)(ju)有嚴謹統一(yi)且(qie)具(ju)(ju)有秩序感的視覺效(xiao)果。

　　 比如前文所(suo)提到的“渝鄉(xiang)人家(jia)·渝小面(mian)”H5頁面(mian)中(zhong)的產品(pin)介紹頁面(mian)，便是將產品(pin)分布在了六(liu)宮(gong)格(ge)中(zhong)，讓頁面(mian)擁有了清(qing)晰的條理，畫面(mian)平穩，從而能夠更加明確地給用戶傳遞出產品(pin)的信息。

　　 常(chang)見的骨骼型有(you)豎向通(tong)欄(lan)(lan)、雙欄(lan)(lan)、三欄(lan)(lan)、四欄(lan)(lan)和橫(heng)向通(tong)欄(lan)(lan)、雙欄(lan)(lan)、三欄(lan)(lan)和四欄(lan)(lan)等。下(xia)圖的H5頁面便是采(cai)用了橫(heng)向通(tong)欄(lan)(lan)骨骼型排版。如下(xia)圖所示的“懶癌救(jiu)助中(zhong)心(xin)”H5頁面，在圖片(pian)和文字的編排上嚴格按照骨骼比(bi)例進行編排配置，有(you)規律(lv)的圖文會給用戶(hu)帶(dai)去(qu)嚴謹、和諧、理性(xing)美的視覺感受(shou)，同時(shi)圖文又被錯落參(can)差但有(you)致地分布在頁面中(zhong)，在有(you)條不(bu)紊中(zhong)顯出(chu)活潑。

　　 6滿版型用大面積(ji)的(de)元素去填充整個畫(hua)面，讓畫(hua)面富有極強的(de)代入(ru)性，并且傳達出(chu)最為(wei)直(zhi)觀(guan)和強烈的(de)視覺刺(ci)激感。

　　 當制作的H5頁面圖片中有明(ming)確(que)的主體且文(wen)案較(jiao)少(shao)時，就比較(jiao)適合采(cai)用滿版型排版方式。

　　 比(bi)如前(qian)文所提到的(de)“騰(teng)訊(xun)”于過(guo)年期(qi)間在(zai)朋友(you)圈中推送(song)的(de)H5廣告頁面，便是以圖像充滿整(zheng)版，以圖

　　以上就是小編為大家介紹的起到了集中視線的作用的全(quan)部內(nei)(nei)容，如果大家還對相關的內(nei)(nei)容感興趣，請持續關注(zhu)上海危機公關公司(si)

　　本文標題：起到了集中視線的作用　　地(di)址：/pinpaiweihu/2021/1211/1527.html