網(wǎng)頁排版設(shè)計(jì)與版式知識(shí)

傳統(tǒng)平面排版的四大原則：

重復(fù)：將元素重復(fù)運(yùn)用（包括顏色、形狀、材質(zhì)、字體、空間關(guān)系等）以增加畫面的條理性和整體性；

對(duì)比：避免頁面上的元素形態(tài)與關(guān)系構(gòu)建過于相似；

對(duì)齊：將畫面中的元素進(jìn)行分類以實(shí)現(xiàn)頁面的組織性與條理性，讓視覺單位之間既有獨(dú)立性又視覺統(tǒng)一；

親密性：畫面上的每一元素都應(yīng)該與另一個(gè)元素存在某種視覺聯(lián)系，建成清晰的結(jié)構(gòu)；

 

網(wǎng)頁排版設(shè)計(jì)

中心型排版（視覺聚焦）：

「中心型排版」主要利用視覺中心突出想要表達(dá)的主題，一般會(huì)將最主要的設(shè)計(jì)元素放在版面的最中心。利用大家的視覺習(xí)慣聚焦視線，突出主題。畫面具有穩(wěn)定感，但具有較強(qiáng)的視覺沖擊力。適用于有十分明確的設(shè)計(jì)主體元素，且主體元素最好自身具備視覺沖擊力.；并且無太多文字元素或文字，裝飾性大于功能性。

垂直型排版（理性嚴(yán)謹(jǐn)）：

「垂直型排版」是較常規(guī)的排版形式，將圖片與文字按照比例在垂直方向進(jìn)行編排設(shè)置。水平排列的版面給人穩(wěn)定、平靜的感受，而垂直排列的版面給人律動(dòng)感。文字與圖片在視覺效果下一般會(huì)自然形成分割的形態(tài)。版面具有穩(wěn)定性和秩序感，給人以嚴(yán)謹(jǐn)和理性的美。注意在排列文字元素時(shí)通過大小與形式上的對(duì)比體現(xiàn)信息層級(jí)關(guān)系，避免信息混亂。

傾斜型排版（動(dòng)感與活力）：

「傾斜型排版」是通過將設(shè)計(jì)主體或整體畫面傾斜編排，或是在版面中引入斜線劃分畫面的形式進(jìn)行排版。具有不穩(wěn)定的視覺感受但同時(shí)極具律動(dòng)感和活力，是視覺沖擊力很強(qiáng)的排版形式。無論是斜切式的版式編排還是利用斜線指向特定物體或方向，都能在版面中起到主導(dǎo)觀者視線的作用。傾斜型排版讓呆板的畫面變得富有動(dòng)感。注重畫面的整體性避免畫面過于瑣碎凌亂，注意突出重點(diǎn)減弱其他。

曲線型排版（韻律感）：

「曲線型排版」主要是將視覺元素即圖片和文字在版面上按照一定曲線形態(tài)進(jìn)行排版，版面具有不穩(wěn)定性。畫面有縱深方向的空間感與韻律節(jié)奏感。常見的是S型構(gòu)圖版式。

對(duì)稱型排版（平衡感與呼應(yīng)性）：

「對(duì)稱型排版」畫面呈中軸線上下或左右相互平行，排列圖形具有呼應(yīng)性、多相似性。在突出主體且具有畫面穩(wěn)定性的同時(shí)，又有變化和沖突感。素材選取要有呼應(yīng)性或沖突感，排版時(shí)注意對(duì)比與統(tǒng)一的平衡。

分割型排版（形式感）：

「分割型排版」是將版面分割，利用有形或無形的分割線使畫面具有明確的獨(dú)立性和引導(dǎo)性。畫面分割的面積大小與位置對(duì)比，可以較明確的體現(xiàn)出版面中各部分信息的主次關(guān)系。每個(gè)看似獨(dú)立的部分聯(lián)系在一起，整體畫面不會(huì)擁擠也不顯單調(diào)。適用于需要處理的內(nèi)容元素多，即圖片多、文字多的時(shí)候。當(dāng)素材本身質(zhì)量參差不齊時(shí)，可使用分割型排版通過裁切圖片局部、調(diào)整大小等處理揚(yáng)長避短。

滿版型排版（視覺沖擊力）：

「滿版型排版」 通過大面積的元素平鋪或堆疊，用最直觀與強(qiáng)烈的視覺刺激來傳達(dá)主題信息，畫面豐富具有感染力。通常有整體滿版、細(xì)節(jié)滿版和文字滿版三種形式。缺少素材時(shí)可采用重復(fù)元素的排版方式或?qū)⑺夭淖凅w進(jìn)行重復(fù)排列來占據(jù)版面排版。整體給人大方舒展視覺沖擊力強(qiáng)的感受。

設(shè)計(jì)banner的流程：

1.拿到需求

設(shè)計(jì)需求包含：文案信息（主標(biāo)題、副標(biāo)題），要求（如：必須出現(xiàn)什么元素、用什么風(fēng)格）。不同類目的用戶訴求不同，應(yīng)根據(jù)用戶的需求來決定版式形式。

2.思維發(fā)散

明確設(shè)計(jì)需求后，根據(jù)主題聯(lián)想，從文案內(nèi)容中提取關(guān)鍵詞，開動(dòng)大腦做思維發(fā)散，篩選提取關(guān)鍵詞。

3.數(shù)據(jù)分析+靈感收集

設(shè)計(jì)不是千篇一律，也不需要摸著石頭過河，而是要有數(shù)據(jù)的支持，了解用戶需求，再根據(jù)需求用設(shè)計(jì)突出用戶所在乎的點(diǎn)，才能達(dá)到更好的效果。當(dāng)我們?cè)谠O(shè)計(jì)廣告banner前，要先思考banner的投放渠道、產(chǎn)品定位等等來分析目標(biāo)用戶的需求，從而讓設(shè)計(jì)更容易被目標(biāo)用戶接受。

根據(jù)關(guān)鍵詞搜圖片，找靈感。會(huì)通過關(guān)鍵詞搜靈感圖片，找到更多的設(shè)計(jì)方向。

4.溝通修改

與需求方溝通，告知設(shè)計(jì)方向。多溝通交流，修改不合適之處。

5.輸出設(shè)計(jì)稿

前期的準(zhǔn)備工作能幫助我們順利的輸出設(shè)計(jì)稿。

關(guān)注后期數(shù)據(jù)，根據(jù)設(shè)想的目標(biāo)，以及對(duì)平臺(tái)實(shí)際情況的評(píng)估，我們可以試試 AB test，以驗(yàn)證我們的設(shè)想是否正確。定期匯總測試結(jié)果，檢驗(yàn)測試方向是否正確，如有問題及時(shí)修正。這是一個(gè)不斷更新迭代的過程。

Tips：

1.注意品牌的認(rèn)知慣性

酷炫風(fēng)格是更適合數(shù)碼類產(chǎn)品， 快餐類大多使用精美的食物實(shí)拍等。

2.文案越精煉越好

字少點(diǎn)擊率遠(yuǎn)比字?jǐn)?shù)高的多，畢竟字?jǐn)?shù)越多識(shí)別成本越高，另外標(biāo)題字?jǐn)?shù)在 6-8 個(gè)字之間點(diǎn)擊率是最穩(wěn)定的。

我們要做到文案盡量簡潔通俗、文案內(nèi)容的行數(shù)盡量控制在三行以內(nèi)，確?？勺x性；在設(shè)計(jì)上，我們不僅要做到舒服、顯眼，還要有信息層級(jí)，合理引導(dǎo)用戶第一眼的信息內(nèi)容。

3.情感化設(shè)計(jì)

好的設(shè)計(jì)能引起用戶注意，而有趣的設(shè)計(jì)能讓用戶感到親切。創(chuàng)意的方式有很多種，能讓用戶感到有趣的創(chuàng)意才算好的創(chuàng)意。

4.促銷banner引導(dǎo)明確

除了情感上的設(shè)計(jì)外，大多數(shù)banner廣告設(shè)計(jì)也會(huì)給用戶以急迫感，比如在按鈕文案上的設(shè)計(jì)從「點(diǎn)擊購買」到「馬上購買」再到「立即搶購」，這種急迫感層層遞進(jìn)，促使用戶點(diǎn)擊成交。

（鄭重聲明：本文版權(quán)歸原作者新貝學(xué)院小貝所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如有侵權(quán)，請(qǐng)聯(lián)系我們刪除；如作者信息標(biāo)記有誤，請(qǐng)聯(lián)系我們修改。）

網(wǎng)站欄目：網(wǎng)頁排版設(shè)計(jì)與版式知識(shí)
分享URL：http://www.bm7419.com/news16/112566.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、用戶體驗(yàn)、云服務(wù)器、網(wǎng)站營銷、網(wǎng)站內(nèi)鏈、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)