歡迎您進入山(shān)東盛恩網絡科技(jì)有(yǒu)限公司軟件網! kefu全國統一客服熱線:18954481360

10年+

專注軟件建設行(xíng)業優質供應商

聊城網頁排版設計(jì)與版式知識

發布時(shí)間(jiān):2020-07-24 14:27:30浏覽:598

  傳統平面排版的四大(dà)原則:

  重複:将元素重複運用(包括顔色、形狀、材質、字體(tǐ)、空(kōng)間(jiān)關系等)以增加畫(huà)面的條理(lǐ)性和(hé)整體(tǐ)性;

  對比:避免頁面上(shàng)的元素形态與關系構建過于相似;

  對齊:将畫(huà)面中的元素進行(xíng)分類以實現頁面的組織性與條理(lǐ)性,讓視(shì)覺單位之間(jiān)既有(yǒu)獨立性又視(shì)覺統一;

  親密性:畫(huà)面上(shàng)的每一元素都應該與另一個(gè)元素存在某種視(shì)覺聯系,建成清晰的結構;

  

網頁設計(jì)


  網頁排版設計(jì)

  中心型排版(視(shì)覺聚焦):

  「中心型排版」主要利用視(shì)覺中心突出想要表達的主題,一般會(huì)将最主要的設計(jì)元素放在版面的最中心。利用大(dà)家(jiā)的視(shì)覺習慣聚焦視(shì)線,突出主題。畫(huà)面具有(yǒu)穩定感,但(dàn)具有(yǒu)較強的視(shì)覺沖擊力。适用于有(yǒu)十分明(míng)确的設計(jì)主體(tǐ)元素,且主體(tǐ)元素最好自身具備視(shì)覺沖擊力.;并且無太多(duō)文字元素或文字,裝飾性大(dà)于功能性。

  垂直型排版(理(lǐ)性嚴謹):

  「垂直型排版」是較常規的排版形式,将圖片與文字按照比例在垂直方向進行(xíng)編排設置。水(shuǐ)平排列的版面給人(rén)穩定、平靜的感受,而垂直排列的版面給人(rén)律動感。文字與圖片在視(shì)覺效果下一般會(huì)自然形成分割的形态。版面具有(yǒu)穩定性和(hé)秩序感,給人(rén)以嚴謹和(hé)理(lǐ)性的美。注意在排列文字元素時(shí)通(tōng)過大(dà)小(xiǎo)與形式上(shàng)的對比體(tǐ)現信息層級關系,避免信息混亂。

  傾斜型排版(動感與活力):

  「傾斜型排版」是通(tōng)過将設計(jì)主體(tǐ)或整體(tǐ)畫(huà)面傾斜編排,或是在版面中引入斜線劃分畫(huà)面的形式進行(xíng)排版。具有(yǒu)不穩定的視(shì)覺感受但(dàn)同時(shí)極具律動感和(hé)活力,是視(shì)覺沖擊力很(hěn)強的排版形式。無論是斜切式的版式編排還(hái)是利用斜線指向特定物體(tǐ)或方向,都能在版面中起到主導觀者視(shì)線的作(zuò)用。傾斜型排版讓呆闆的畫(huà)面變得(de)富有(yǒu)動感。注重畫(huà)面的整體(tǐ)性避免畫(huà)面過于瑣碎淩亂,注意突出重點減弱其他。

  曲線型排版(韻律感):

  「曲線型排版」主要是将視(shì)覺元素即圖片和(hé)文字在版面上(shàng)按照一定曲線形态進行(xíng)排版,版面具有(yǒu)不穩定性。畫(huà)面有(yǒu)縱深方向的空(kōng)間(jiān)感與韻律節奏感。常見的是S型構圖版式。

  對稱型排版(平衡感與呼應性):

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

  分割型排版(形式感):

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

  滿版型排版(視(shì)覺沖擊力):

  「滿版型排版」 通(tōng)過大(dà)面積的元素平鋪或堆疊,用最直觀與強烈的視(shì)覺刺激來(lái)傳達主題信息,畫(huà)面豐富具有(yǒu)感染力。通(tōng)常有(yǒu)整體(tǐ)滿版、細節滿版和(hé)文字滿版三種形式。缺少(shǎo)素材時(shí)可(kě)采用重複元素的排版方式或将素材變體(tǐ)進行(xíng)重複排列來(lái)占據版面排版。整體(tǐ)給人(rén)大(dà)方舒展視(shì)覺沖擊力強的感受。

  設計(jì)banner的流程:

  1.拿(ná)到需求

  設計(jì)需求包含:文案信息(主标題、副标題),要求(如:必須出現什麽元素、用什麽風格)。不同類目的用戶訴求不同,應根據用戶的需求來(lái)決定版式形式。

  2.思維發散

  明(míng)确設計(jì)需求後,根據主題聯想,從文案內(nèi)容中提取關鍵詞,開(kāi)動大(dà)腦(nǎo)做(zuò)思維發散,篩選提取關鍵詞。

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

  設計(jì)不是千篇一律,也不需要摸着石頭過河(hé),而是要有(yǒu)數(shù)據的支持,了解用戶需求,再根據需求用設計(jì)突出用戶所在乎的點,才能達到更好的效果。當我們在設計(jì)廣告banner前,要先思考banner的投放渠道(dào)、産品定位等等來(lái)分析目标用戶的需求,從而讓設計(jì)更容易被目标用戶接受。

  根據關鍵詞搜圖片,找靈感。會(huì)通(tōng)過關鍵詞搜靈感圖片,找到更多(duō)的設計(jì)方向。

  4.溝通(tōng)修改

  與需求方溝通(tōng),告知設計(jì)方向。多(duō)溝通(tōng)交流,修改不合适之處。

  5.輸出設計(jì)稿

  前期的準備工作(zuò)能幫助我們順利的輸出設計(jì)稿。

  關注後期數(shù)據,根據設想的目标,以及對平台實際情況的評估,我們可(kě)以試試 AB test,以驗證我們的設想是否正确。定期彙總測試結果,檢驗測試方向是否正确,如有(yǒu)問題及時(shí)修正。這是一個(gè)不斷更新叠代的過程。

  Tips:

  1.注意品牌的認知慣性

  酷炫風格是更适合數(shù)碼類産品, 快餐類大(dà)多(duō)使用精美的食物實拍等。

  2.文案越精煉越好

  字少(shǎo)點擊率遠比字數(shù)高(gāo)的多(duō),畢竟字數(shù)越多(duō)識别成本越高(gāo),另外标題字數(shù)在 6-8 個(gè)字之間(jiān)點擊率是最穩定的。

  我們要做(zuò)到文案盡量簡潔通(tōng)俗、文案內(nèi)容的行(xíng)數(shù)盡量控制(zhì)在三行(xíng)以內(nèi),确保可(kě)讀性;在設計(jì)上(shàng),我們不僅要做(zuò)到舒服、顯眼,還(hái)要有(yǒu)信息層級,合理(lǐ)引導用戶第一眼的信息內(nèi)容。

  3.情感化設計(jì)

  好的設計(jì)能引起用戶注意,而有(yǒu)趣的設計(jì)能讓用戶感到親切。創意的方式有(yǒu)很(hěn)多(duō)種,能讓用戶感到有(yǒu)趣的創意才算(suàn)好的創意。

  4.促銷banner引導明(míng)确

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