聊城網頁排版設計(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ì)
中心型排版(視(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)購買」再到「立即搶購」,這種急迫感層層遞進,促使用戶點擊成交。
18954481360