網頁排版設計與版式知識

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

重復：將元素重復運用（包括顏色、形狀、材質、字體、空間關系等）以增加畫面的條理性和整體性；

對比：避免頁面上的元素形態(tài)與關系構建過于相似；

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

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

 

網頁排版設計

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

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

垂直型排版（理性嚴謹）：

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

傾斜型排版（動感與活力）：

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

曲線型排版（韻律感）：

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

對稱型排版（平衡感與呼應性）：

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

分割型排版（形式感）：

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

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

「滿版型排版」 通過大面積的元素平鋪或堆疊，用最直觀與強烈的視覺刺激來傳達主題信息，畫面豐富具有感染力。通常有整體滿版、細節(jié)滿版和文字滿版三種形式。缺少素材時可采用重復元素的排版方式或將素材變體進行重復排列來占據版面排版。整體給人大方舒展視覺沖擊力強的感受。

設計banner的流程：

1.拿到需求

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

2.思維發(fā)散

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

3.數據分析+靈感收集

設計不是千篇一律，也不需要摸著石頭過河，而是要有數據的支持，了解用戶需求，再根據需求用設計突出用戶所在乎的點，才能達到更好的效果。當我們在設計廣告banner前，要先思考banner的投放渠道、產品定位等等來分析目標用戶的需求，從而讓設計更容易被目標用戶接受。

根據關鍵詞搜圖片，找靈感。會通過關鍵詞搜靈感圖片，找到更多的設計方向。

4.溝通修改

與需求方溝通，告知設計方向。多溝通交流，修改不合適之處。

5.輸出設計稿

前期的準備工作能幫助我們順利的輸出設計稿。

關注后期數據，根據設想的目標，以及對平臺實際情況的評估，我們可以試試 AB test，以驗證我們的設想是否正確。定期匯總測試結果，檢驗測試方向是否正確，如有問題及時修正。這是一個不斷更新迭代的過程。

Tips：

1.注意品牌的認知慣性

酷炫風格是更適合數碼類產品， 快餐類大多使用精美的食物實拍等。

2.文案越精煉越好

字少點擊率遠比字數高的多，畢竟字數越多識別成本越高，另外標題字數在 6-8 個字之間點擊率是最穩(wěn)定的。

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

3.情感化設計

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

4.促銷banner引導明確

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

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

網站標題：網頁排版設計與版式知識
文章出自：http://muchs.cn/news/112566.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供手機網站建設、網頁設計公司、App設計、外貿網站建設、微信小程序、網站建設

廣告

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