感度，積極參與活動(dòng)。然而，如今由于創(chuàng)意的缺乏和同質(zhì)化現(xiàn)象嚴(yán)重，導(dǎo)致用戶對(duì)小游戲產(chǎn)生了厭倦。

　　 此時(shí)，品牌在利用H5小游戲進(jìn)行傳播時(shí)，更需要在玩法和視覺設(shè)計(jì)上多下功夫。如果做不到很特別的創(chuàng)新，起碼要保證通過H5小游戲可以起到信息傳播或是提升用戶體驗(yàn)的效果。

　　 下圖所示為“財(cái)付通”公眾號(hào)在猴年春節(jié)期間推出的一則新年祝福H5頁(yè)面，該祝福就是通過將“學(xué)習(xí)紅包秘笈”這一線索貫穿在H5小游戲的情節(jié)中傳遞給用戶的。

　　 首先利用幾頁(yè)H5頁(yè)面簡(jiǎn)單說明了紅包秘笈，如上頁(yè)圖所示，通過打趣的方式營(yíng)造出了一種輕松愉悅的閱讀氛圍。

　　 在學(xué)習(xí)完秘笈之后，便要進(jìn)入“考試”階段——如下圖所示，直接進(jìn)入到了搶紅包的游戲挑戰(zhàn)頁(yè)面，最后還會(huì)根據(jù)“成績(jī)”也就是游戲情況頒發(fā)相應(yīng)的稱號(hào)。

　　 該則H5游戲的情節(jié)設(shè)計(jì)得連貫而流暢，視覺設(shè)計(jì)也顯得醒目而統(tǒng)一。雖然點(diǎn)擊按鈕搶紅包的游戲設(shè)計(jì)并不見得非常具有創(chuàng)新意味，但是結(jié)合整體的情節(jié)與視覺設(shè)計(jì)，能讓用戶感受到企業(yè)的用心，也真切地體會(huì)到新年的歡樂，在可愛而輕松的氛圍中提升用戶對(duì)企業(yè)的好感。

　　細(xì)節(jié)與統(tǒng)一

　　 上述的三種形式其實(shí)都是用以提升用戶體驗(yàn)，讓他們更多去關(guān)注所推送的H5頁(yè)面的不錯(cuò)的設(shè)計(jì)方法，然而這些表現(xiàn)形式也離不開對(duì)細(xì)節(jié)的把控。

　　 比如前文所提到的“理財(cái)通”在紅包上放置徽標(biāo)的做法就是一種細(xì)節(jié)設(shè)計(jì)。除此之外，有些細(xì)節(jié)還體現(xiàn)在人性化、趣味性的設(shè)計(jì)上。

　　 如右圖所示，相較于傳統(tǒng)而單一的“分享提示”而言，圖中還插入對(duì)“分享提示”更加個(gè)性化的設(shè)計(jì)，這樣的視覺設(shè)計(jì)顯得生動(dòng)活潑，也富有人情味，讓用戶在感到有趣的同時(shí)，也忍不住想要為設(shè)計(jì)者的用心良苦而點(diǎn)贊。

　　 當(dāng)然這也離不開統(tǒng)一的視覺表現(xiàn)。如下圖所示，“拍拍微店”所推出的這則“刷個(gè)朋友圈的功夫都能開店了”的H5頁(yè)面，其主要的視覺設(shè)計(jì)以手繪風(fēng)格為主，同時(shí)整體設(shè)計(jì)走的是逗趣路線，畫面顯得有趣而生動(dòng)。因此，在設(shè)計(jì)“分享提示”頁(yè)面時(shí)也同樣延續(xù)了這樣的風(fēng)格，如右圖所示。

　　 要成就高品質(zhì)的用戶體驗(yàn)，必須考慮到細(xì)節(jié)與整體的統(tǒng)一性，否則在如今H5頁(yè)面泛濫的洪流中，粗糙的H5頁(yè)面設(shè)計(jì)不僅沒有辦法脫穎而出，也不能給用戶留下好的印象，這對(duì)企業(yè)形象的構(gòu)建是不利的。并且統(tǒng)一H5頁(yè)面的設(shè)計(jì)風(fēng)格，能讓用戶的視覺感官得到具有延續(xù)性的良好體驗(yàn)，給用戶留下整潔的視覺享受。

　　7.3透過微信H5看版式布局

　　 在微信H5頁(yè)面中會(huì)出現(xiàn)文字、色彩、圖形等元素，而這些元素也不能雜亂無章，合理地將它們安排在一起是讓H5頁(yè)面更具感官體驗(yàn)的關(guān)鍵，也是制作出更加絢麗的H5頁(yè)面的前提條件，而這一過程便涉及版面的構(gòu)成，也就是整體版式的設(shè)計(jì)。

　　7.3.1版式在H5頁(yè)面中的應(yīng)用

　　 版面的構(gòu)成是信息傳播的橋梁，發(fā)揮版面元素中各自的特點(diǎn)和功能，會(huì)使整個(gè)版面兼具內(nèi)容的完善性和美觀性，從而更快、更準(zhǔn)確地傳遞信息。對(duì)于微信H5頁(yè)面的版式設(shè)計(jì)也是如此，同時(shí)還需要考慮用戶的閱讀體驗(yàn)等，結(jié)合所需傳遞的信息的特點(diǎn)，恰當(dāng)?shù)貙?duì)H5頁(yè)面中的元素進(jìn)行分配與布局，這樣才能讓H5頁(yè)面輕松地突顯主題，也更加便于用戶對(duì)于信息的接收。

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

　　 1中心型中心型排版是一種最為常見的H5頁(yè)面布局形式，利用集中式的布局構(gòu)建視覺中心，聚焦用戶的視線，從而起到突出想要表達(dá)的事物或者主題的作用。

　　 比如前文中所提到“理財(cái)通”所推送的“理財(cái)通發(fā)年終獎(jiǎng)啦”H5頁(yè)面，在答題失敗、成功或是要填寫相關(guān)抽獎(jiǎng)信息時(shí)，便采用了中心型版式構(gòu)圖，如下圖所示。

　　 將提示信息放置在裝飾框中，并將它們安排在了頁(yè)面的中心位置，加之頁(yè)面背景色彩與裝飾框色彩反差也較大，結(jié)合集中式的構(gòu)圖，讓信息可以一目了然地傳遞到用戶眼前。

　　 2中軸型中軸型與中心型相似，都是較為集中的構(gòu)圖模式，不同的是，中心型所集中的位置為頁(yè)面的中心點(diǎn)，而中軸型則有一條明顯的頁(yè)面中心軸線，元素沿著軸心線對(duì)稱排開。這樣的版式構(gòu)圖能給予畫面穩(wěn)定感，同時(shí)又顯得醒目大方。

　　 比如前文中所提到“拍拍微店”推出的“刷個(gè)朋友圈的功夫都能開店了”H5頁(yè)面的其中一個(gè)頁(yè)面和“嘉寶”宣傳品牌H5頁(yè)面，如右側(cè)兩圖所示，均采用了中軸型的版式布局。

　　 “拍拍微店”這一頁(yè)面以頁(yè)面的中心線為對(duì)稱軸，將品牌徽標(biāo)放置在左右對(duì)稱的兩只豎起大拇指的拳頭中間，起到了集中視線的作用，同時(shí)沿著中心線下方也放置了一些文案信息與“去下載”和“分享”按鈕，整體布局在對(duì)稱的穩(wěn)定中很好地將重點(diǎn)信息集中與突出。

　　 “嘉寶”宣傳品牌H5頁(yè)面同樣以頁(yè)面的中心線為中軸線，并沿著這條中軸線從上到下放置了對(duì)品牌的介紹信息。這條中軸線也是一條對(duì)稱線，用來分割介紹品牌的圖片與文案。

　　 這樣的版式布局不僅讓H5頁(yè)面顯得干凈整潔、有條不紊，同時(shí)也很好地迎合了手機(jī)移動(dòng)端展示的特點(diǎn)，用戶通過上下滑動(dòng)便能輕松進(jìn)行操控與閱讀，符合用戶對(duì)移動(dòng)端的操作習(xí)慣與閱讀經(jīng)驗(yàn)。

　　 3分割型分割型排版指的是利用分割線使得頁(yè)面中的元素具有明確的獨(dú)立性。當(dāng)制作元素過多的H5頁(yè)面時(shí)，便可以采用分割型的排版布局方式，通過分割的手法構(gòu)建好頁(yè)面各個(gè)版塊的面積關(guān)系，使得版式不僅不會(huì)顯得單調(diào)與擁擠，同時(shí)也能起到很好的視覺引導(dǎo)作用。

　　 比如上例中的“嘉寶”宣傳品牌H5頁(yè)面，不僅是中軸型版式布局，同時(shí)也利用中心線對(duì)畫面進(jìn)行了對(duì)稱分割。在頁(yè)面中，以中心線為視覺引導(dǎo)的分割線，將品牌介紹的圖文元素分割開來的同時(shí)，也將它們有序地分布在分割線的兩側(cè)，讓文字與圖片都整齊地存在于各自的獨(dú)立空間中，更加方便了用戶對(duì)信息的閱讀與接收。

　　 左圖所示為“京東的十大任性”總結(jié)報(bào)告中的一個(gè)H5頁(yè)面，也是通過分割的形式讓畫面有了豐富的構(gòu)圖視覺效果。

　　 頁(yè)面中有許多手機(jī)元素，通過分割圖形將它們獨(dú)立，同時(shí)又通過對(duì)分割形狀面積大小以及色彩的把握，讓版式整體有了主次分明的層級(jí)感。

　　 4傾斜型傾斜型排版指的是通過對(duì)畫面中主要元素或整體畫面的傾斜排版，使得畫面具有較強(qiáng)的律動(dòng)感。

　　 當(dāng)要制作一些具有沖擊性、跳躍性效果的頁(yè)面時(shí)，可以使用傾斜型的排版方式，使得整體的版式不至于過于死板或僵硬，從而給用戶帶去新奇與刺激的視覺感受。

　　 比如下左圖所示的“蘇寧金融”所推出的產(chǎn)品介紹H5頁(yè)面，主題文字有著向右上方傾斜的趨勢(shì)，結(jié)合向上的箭頭，這種不穩(wěn)定性的表現(xiàn)能從視覺的設(shè)計(jì)上更加直觀地給用戶帶去產(chǎn)品能帶來收益的感受。

　　 下右圖也通過對(duì)元素傾斜排放在視覺上產(chǎn)生了動(dòng)態(tài)感，結(jié)合飛碟插圖，帶來了較為新奇、有趣的視覺效果。

　　 5骨骼型骨骼型版式經(jīng)常被用在一些產(chǎn)品羅列介紹或是信息分點(diǎn)布局的H5頁(yè)面之中。骨骼型版式指的是有序地將頁(yè)面中的圖文等元素排列，從而能使得頁(yè)面具有嚴(yán)謹(jǐn)統(tǒng)一且具有秩序感的視覺效果。

　　 比如前文所提到的“渝鄉(xiāng)人家·渝小面”H5頁(yè)面中的產(chǎn)品介紹頁(yè)面，便是將產(chǎn)品分布在了六宮格中，讓頁(yè)面擁有了清晰的條理，畫面平穩(wěn)，從而能夠更加明確地給用戶傳遞出產(chǎn)品的信息。

　　 常見的骨骼型有豎向通欄、雙欄、三欄、四欄和橫向通欄、雙欄、三欄和四欄等。下圖的H5頁(yè)面便是采用了橫向通欄骨骼型排版。如下圖所示的“懶癌救助中心”H5頁(yè)面，在圖片和文字的編排上嚴(yán)格按照骨骼比例進(jìn)行編排配置，有規(guī)律的圖文會(huì)給用戶帶去嚴(yán)謹(jǐn)、和諧、理性美的視覺感受，同時(shí)圖文又被錯(cuò)落參差但有致地分布在頁(yè)面中，在有條不紊中顯出活潑。

　　 6滿版型用大面積的元素去填充整個(gè)畫面，讓畫面富有極強(qiáng)的代入性，并且傳達(dá)出最為直觀和強(qiáng)烈的視覺刺激感。

　　 當(dāng)制作的H5頁(yè)面圖片中有明確的主體且文案較少時(shí)，就比較適合采用滿版型排版方式。

　　 比如前文所提到的“騰訊”于過年期間在朋友圈中推送的H5廣告頁(yè)面，便是以圖像充滿整版，以圖

　　以上就是小編為大家介紹的起到了集中視線的作用的全部?jī)?nèi)容，如果大家還對(duì)相關(guān)的內(nèi)容感興趣，請(qǐng)持續(xù)關(guān)注上海危機(jī)公關(guān)公司

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