詳情頁的版面設計直接影響到產品的吸引力,那么在這里,我總結了版式設計原理的幾個方面,結合一些具體例子實際操作演示,讓對這塊不熟悉的設計師朋友們能快速掌握版式設計。
一、版式組成
主體:視覺焦點,主導著整個設計(可以是人/物/文字/圖片),整個版面最吸引人的部分,相當于主角的作用。
文案:對主體的輔助說明或引導,畢竟有時候我們放一只小狐貍在旁邊,用戶也不能準確的知道它在說什么,配角的作用。
點綴元素:裝飾元素,可有可無,具體根據版面需要;好的點綴元素能夠渲染氣氛,大部分的點綴元素遵循三角形原則,類似下圖中的云朵,群演的作用。
淘寶詳情頁背景:可分為純色/彩色肌理/圖片/圖形等。
二、淘寶詳情頁構圖平衡
在設計中,平衡是實現(xiàn)統(tǒng)一的一條重要途徑。如果上面所說的元素組合起來處于平衡狀態(tài),那么這個設計看起來就是統(tǒng)一的,就會給人一種整體印象。
因此,平衡是視覺傳達設計的一個重要方面。版式平衡總共有3種分類,分別是:對稱平衡,非對稱平衡和整體平衡。
1. 對稱平衡
對稱是同等同量的平衡,對稱式設計是一種靜態(tài)的,可預見的,講究條理和平衡布局的設計。對稱構圖相對比較易于創(chuàng)建,特點是穩(wěn)定,莊嚴,整齊,安寧,沉靜和古典。
2. 非對稱平衡
非對稱在不對等的元素間創(chuàng)設出秩序和平衡,非對稱設計由于版式不可預見,所以空間是變化的。特點是動態(tài)的,靈活的和富有活力。非對稱構圖比較多,常見的有以下6種形式。
對角線構圖:
文案擺放在版面的對角線方向,一方面避免了司空見慣的居中版面,一方面給中心主體留出了更多的創(chuàng)作空間;另外中心的圖形也可以是對角線的設計,這樣會讓整個構圖看起來比較平衡。
發(fā)射狀構圖:
點綴元素圍繞中心的文案或者圖形發(fā)射,這樣的構圖會讓中心的視覺容易聚焦,視覺沖擊感會更強烈。
像電商大促活動,淘寶和京東等等會經常使用發(fā)射性構圖來營造大促活動的熱鬧火烈程度。
中心構圖:
這是我們最常見的構圖之一,文案和主體居中頁面,注意的是位于版心的主體要盡可能的出彩,利用設計技巧吸引讀者的眼光,這樣才能避免平淡乏味。
s形構圖:
文案或者圖形放在線條轉折的地方,整體呈一個 s 形。另外線條的起點和重點也同樣是讀者容易關注的地方,可以放一些重要的信息。這樣的構圖靈活,有趣,而且可以引導用戶沿著 s 形軌跡閱讀信息。
二分構圖:
淘寶文案和主體分開,呈左右或者上下的構圖形式,注意的是文案要采用對齊原則。這樣的構圖也是比較容易創(chuàng)建的。
形狀構圖:
主體和文案組合的形式可以是圓形,三角形,矩形等形狀構圖。注意如果是用三角形構圖,最好呈倒金字塔結構,這樣更加輕易引導用戶進入下一個信息層。
3. 整體平衡(滿版平衡)
整體平衡,是指圖片充滿整個版面,文案布局在上下,左右,中部的位置,特點是主要以圖像為訴求,視覺傳達直觀而強烈。滿版型構圖,給人大方,舒展的感覺。
注意:在設計的過程中,這種類型的文字處理很容易顯得「嘈雜」,因此為了避免擁擠的空間,適當刪減些文字。
對構圖形式了解后,我們還要知道一些基本的設計原則,雖然這些原則我們可以在其他地方反復的看到,但是我在這里還是要強調一遍,因為它可以幫助我們在打破規(guī)則之前,必須清楚規(guī)則是什么。
推薦閱讀:
查看更多相似文章