導航:首頁 > 萬維百科 > 中軸型網頁版式設計

中軸型網頁版式設計

發布時間:2021-01-04 09:13:18

1、幫忙找一篇關於網頁版式設計的外文文獻

一、網頁版式的基本類型
骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型十種。

First, the basic types of web page layout
Bone type, full version type, split type, axis type, curved, inclined, symmetric, focus type, triangular, free type ten.

1.骨骼型
網頁版式的骨骼型是一種規范的、理性的分割方法,類似於報刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結合使用,既理性、條理,又活潑而富有彈性。

1. Skeleton type
Page layout is a standard type of bone, rational segmentation method, similar to newspaper layout. Link skeleton common vertical bar, double bar, three bars, four bars, and horizontal links column, double column, three columns and four fences. Generally multi-vertical columns. This layout gives a harmonious and rational America. Combination of several sub-column mode, both rational and coherent, but also lively and elastic.

2.滿版型
頁面以圖像充滿整版。主要以圖像為訴求點,也可將部分文字壓置於圖像之上。視覺傳達效果直觀而強烈。滿版型給人以舒展、大方的感覺。隨著寬頻的普及,這種版式在網頁設計中的運用越來越多。

2. Full version type
Page full of full page of image. Mainly image to appeal to point the text can also be part of the pressure placed on the image above. Visual Communication visual effects and strong. Version type gives a full stretch, the feeling generous. With the popularity of broadband, this web design layout used in more and more.

3.分割型
把整個頁面分成上下或左右兩部分,分別安排圖片和文案。兩個部分形成對比:有圖片的部分感性而具活力,文案部分則理性而平靜。可以調整圖片和文案所佔的面積,來調節對比的強弱。例如:如果圖片所佔比例過大,文案使用的字體過於纖細,字距、行距、段落的安排又很疏落,則造成視覺心理的不平衡,顯得生硬。倘若通過文字或圖片將分割線虛化處理,就會產生自然和諧的效果。

3. Segmentation-based
The entire page is divided into two parts up and down or left and right, respectively, arranged pictures and copy. In contrast to two parts: a picture of part of the emotional and vibrant, and the text part, rational and calm. Can adjust the picture and copy the area occupied, to adjust the contrast of strength. For example: If the image is too large proportion, and the text font used is too thin, kerning, line spacing, paragraphs and very sparse arrangement, then the resulting imbalance in visual psychology, be abrupt. If text or image to partition through the virtual line treatment, would be a natural and harmonious results.

4.中軸型
沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁面給人穩定、平靜、含蓄的感覺。垂直排列的頁面給人以舒暢的感覺。

4. Axis type
Along the axis of the browser window to image or text for horizontal or vertical arrangement. Horizontal arrangement of the page gives stable, calm, subtle feeling. Vertical arrangement of the page gives a comfortable feeling.

5.曲線型
圖片、文字在頁面上作曲線的分割或編排構成,產生韻律與節奏。

4. Axis type
Along the axis of the browser window to image or text for horizontal or vertical arrangement. Horizontal arrangement of the page gives stable, calm, subtle feeling. Vertical arrangement of the page gives a comfortable feeling.

二、文字的格式化

1.字型大小、字體、行距
字型大小大小可以用不同的方式來計算,例如磅(point)或像素(pixel)。因為以計算機的像素技術為基礎的單位需要在列印時轉換為磅,所以,建議採用磅為單位。

最適合於網頁正文顯示的字體大小為12磅左右,現在很多的綜合性站點,由於在一個頁面中需要安排的內容較多,通常採用9磅的字型大小。較大的字體可用於標題或其他需要強調的地方,小一些的字體可以用於頁腳和輔助信息。需要注意的是,小字型大小容易產生整體感和精緻感,但可讀性較差。

網頁設計者可以用字體來更充分地體現設計中要表達的情感。字體選擇是一種感性、直觀的行為。但是,無論選擇什麼字體,都要依據網頁的總體設想和瀏覽者的需要。

粗體字強壯有力,有男性特點,適合機械、建築業等內容;細體字高雅細致,有女性特點,更適合服裝、化妝品、食品等行業的內容。在同一頁面中,字體種類少,版面雅緻,有穩定感;字體種類多,則版面活躍,豐富多采。關鍵是如何根據頁面內容來掌握這個比例關系。

從加強平台無關性的角度來考慮,正文內容最好採用預設字體。因為瀏覽器是用本地機器上的字型檔顯示頁面內容的。作為網頁設計者必須考慮到大多數瀏覽者的機器里只裝有三種字體類型及一些相應的特定字體。而你指定的字體在瀏覽者的機器里並不一定能夠找到,這給網頁設計帶來很大的局限。解決問題的辦法是:在確有必要使用特殊字體的地方,可以將文字製成圖像,然後插入頁面中。

行距的變化也會對文本的可讀性產生很大影響。一般情況下,接近字體尺寸的行距設置比較適合正文。行距的常規比例為10:12,即用字10點,則行距12點。這主要是出於以下考慮:適當的行距會形成一條明顯的水平空白帶,以引導瀏覽者的目光,而行距過寬會使一行文字失去較好的延續性。

除了對於可讀性的影響,行距本身也是具有很強表現力的設計語言,為了加強版式的裝飾效果,可以有意識地加寬或縮窄行距,體現獨特的審美意趣。例如,加寬行距可以體現輕松、舒展的情緒,應用於娛樂性、抒情性的內容恰如其分。另外,通過精心安排,使寬、窄行距並存,可增強版面的空間層次與彈性,表現出獨到的匠心。
行距可以用行高(line-height)屬性來設置,建議以磅或默認行高的百分數為單位。例如:{line-height:20pt}、{line-height:150%}。

1. Font size, font, line spacing,
Font size can be calculated in different ways, such as pounds (point) or pixels (pixel). Because the pixels of computer technology-based units need to convert pounds in print, therefore, recommended pounds for the unit.

The most suitable body of the page shows the font size is 12 pounds, many of the comprehensive site, as a page in the content need to be more commonly used 9 pounds font size. Larger font can be used to emphasize a title or other places, smaller fonts can be used for footer and supporting information. Note that the small font size easily lead to an overall sense of feeling and refined, but less readable.

Web designers can use the font to more fully reflect the design to express emotions. Font choice is an emotional, intuitive behavior. However, no matter what font selection, the overall plan should be based on web and the needs of visitors.

Bold sturdy, with male characteristics, suitable for mechanical, construction, etc; fine characters, elegant and meticulous, a woman, it is more suitable for clothing, cosmetics and food instry content. In the same page, the font type of small, elegant layout, with a sense of stability; font variety, the layout active, varied and colorful. The key is how to grasp this page content proportional.

Strengthen the platform-independent nature from the point of view, the best use of the default font text content. Because the browser is the font on the local machine to display the page content. As a web designer must take into account the majority viewers of the machine with only three types of font types and some corresponding specific font. And you specify the font of the machine in the viewer will not necessarily find this a great web design limitations. Solution to the problem is: when it is necessary to use special fonts where the text can be made of the image, and then insert the page.

Spacing changes in the readability of the text will have a great impact. In general, close to the line spacing set the font size more suitable for the body. Conventional row spacing ratio of 10:12, 10 characters that are spaced 12.

In addition to the impact of readability, spacing itself is highly expressive language, in order to enhance the decorative effect of format, you can widen or narrow a conscious spacing reflects the unique aesthetic charm. For example, widening the spacing can be easily embodied, emotional stretch applied to entertainment, lyrical content appropriately. In addition, through careful arrangements for the wide and narrow spacing co-exist, can enhance the level and flexibility of spatial layout, showing originality of the decoration.
Line spacing can be high (line-height) attribute to set, the proposed default row height in points or percentage basis.

三、圖片版式
除了文本之外,網頁上最重要的設計元素莫過於圖像了。一方面,圖像的應用使網頁更加美觀、有趣;另一方面,圖像本身也是傳達信息的重要手段之一。與文字相比,它直觀、生動,可以很容易地把那些文字無法表達的信息表達出來,易於瀏覽者理解和接受。

1.圖像的格式
Web通常使用兩種圖像格式:GIF和JPEG。除此以外,還有兩種適合網路傳播但沒有被廣泛應用的圖像格式:PNG和MNG。

2.圖像的形式
同印刷排版一樣,靜態圖像在網頁排版中的運用不外乎四種形式:方形圖、退底圖、出血圖以及這三種形式的結合使用。

(1)方形圖 即圖形以直線邊框來規范和限制,是一種最常見、最簡潔、最單純的形態。方形圖使圖像內容更突出且將主體形象與環境共融,可以完整地傳達主題思想,富有感染性。配置方形圖的頁面,給人以穩重、可信、嚴謹、理性、莊重和安靜等感覺,但有時也顯得平淡、呆板。

(2)退底圖 將圖像中的背景去掉,只留下主題形象。退底圖形自由而突出,更具有個性,因而給人印象深刻。配置退底圖的頁面,輕松、活潑,動態十足,而且圖文結合自然,給人以親和感。但也容易造成凌亂和不整體的感覺。

(3)出血圖 圖像的一邊或幾個邊充滿頁面,有向外擴張和舒展之勢。一般用於傳達抒情或運動信息的頁面,因不受邊框限制,感覺上與人更加接近,便於情感與動感的發揮。

3, picture format
In addition to the text, the Web's most important design element than images. On the one hand, the image of the application to make Web a more beautiful and interesting; the other hand, the image itself is an important means to convey information. Compared with the text, it intuitive, vivid, and can easily express those words can not express the information easy to understand and accept visitors.

1. Image Format
Web typically use two graphics formats: GIF, and JPEG. In addition, there are two for network communication, but not widely used image formats: PNG and MNG.

2. The image of the form
As with the print layout, static image in the page layout in the use of no more than four forms: a square map, base map back, bleeding map and a combination of these three forms.

(1) square map that is drawing a straight line border to regulate and limit, is the most common and most simple, most simple form. Square plan to make image content more prominent and will be the main image and Environmental Harmony, can fully convey the theme, full of infection. Square plan configuration page, gives a stable, reliable, precise, rational, and so solemn and quiet feel, but sometimes seem ll, ll.

(2) Withdrawal of the base map in the background of the image removed, leaving only the subject image. Back end of free graphics and prominent, more personalized, so impressive. Base map configuration pages back, relaxed, lively, dynamic full, and graphics combined with the natural, gives a sense of affinity. But also easy to create messy and not the overall feeling.

(3) bleeding image for full page on one or several sides, with expansion and stretch outward trend. Generally used to convey emotion or movement information page, because without border restrictions, feel and distance, to facilitate emotional and dynamic play.

以上是我的回答,真誠的希望我的解答能夠幫到你!
以上是我的回答,真誠的希望我的解答能夠幫到你!
以上是我的回答,真誠的希望我的解答能夠幫到你!

2、服裝設計的作品集怎麼做,怎麼排版

1、滿版型
主要以圖像為訴示,視覺傳達直觀而強烈。一般用於商業圖,圖像布滿或者接近布滿畫面,一般是顏色較輕亮的圖像,也可以略虛化。
文字配置壓制在上下,左右或中部(邊部和中心)的圖像上。深色圖淺色字,淺色圖深色字。滿版型,給人大方舒適的感覺。
2、上下分割型
版面分為上下兩個部分,圖片可以是多幅也可以是單幅,彰顯出活力的氛圍,文字顯得輕盈而自由,可以分欄撰寫。
3、中軸型
中軸型的版面橫向排列或豎向排列,將文字置於版面的上下或左右,增強整體的視覺體驗。
對稱與均衡在版式設計中最為常用,在使用對稱構圖的時候,會在營造穩定性與秩序感的同時,容易產生單調與呆板的視覺感受。而相對對稱均衡的構圖,則可通過略有變化的版面結構安排,使畫面整體更為靈活,富於變化,也不失對稱的穩定感。
另外,非對稱均衡構圖,則可通過既有聯系又不相同的元素,使畫面既具有相對的對稱感,同時令畫面更加靈活生動,富有變化,同時更具現代設計感。
4、骨骼型
常見的骨骼有:豎向通欄、雙欄、三欄和四欄等等。一般以豎向分欄居多。
圖片和文字的編排上,按照骨骼比例進行編排配置。給人以嚴謹,和諧,理性的美,骨格經過相互混合後的版式,既理性有條理,有活潑而具有彈性。
5、自由型
也許你是比較隨性的,不拘泥於任何排版限制,那麼你的作品集排版就是隨性的,無規律的,自由型的版面活潑輕快,但要避免排版過意散亂、不完整。
但由於沒有版型的限制,自由版經常會造成過度統一而缺乏變化的問題,所以,在排版的過程中應適度縮放圖片尺寸,以增添其強弱對比。
6、左右分割型
整個版面分割為左右兩部分,分別配置文字和圖片。左右兩部分形成強弱對比時,造成視覺心理的不平衡。如果將分割線虛化處理,或用文字左右重復穿插,左右圖與文會變得自然和諧。
以上就是維歐藝術留學針對作品集怎麼排版的相關介紹,希望能夠幫助到對作品集排版的小夥伴。

3、平面設計中,有哪些簡單好用的排版技巧和方法

一、版式
首先我們需要了解的版式。我們平時製作或看到的版式大部分都是由——中心型、中軸型、分割型、傾斜型、骨骼型、滿版型為主。
↑ 中心型排版,利用視覺中心,突出想要表達的實物——當製作的圖片沒有太多文字,並且展示主體很明確的情況下建議多使用中心型的排版。中心排版具有突出主體、聚焦視線等作用,體現大氣背景可用純色,體現高端背景可用漸變色。
上圖為Elysions的作品

↑ 中軸型排版、利用軸心對稱,使用畫面展示規整穩定、醒目大方——當製作的圖片滿足中心型排版但主體面積過大的情況下,可以使用中軸型排版。中軸型居中對稱的版面特點,在突出主體的同事又能給予畫面穩定感,並能使整體畫面具有一定的沖擊力。
在做電商活動海報的時候中軸型是很出效果的一種形式
↑ 分割型排版,利用分割線使畫面有明確的獨立性和引導性——當製作的圖片中有多個圖片和多段文字時可以使用分割排版。分割型排版能使畫面中每個部分都是極為明確和獨立的,在觀看時能有較好的視覺引導和方向;通過分割出來的體積大小也可以明確當前圖片中各部分的主次關系,有較好的對比性,並使整體畫面不單調和擁擠。
↑ 傾斜型排版,通過主體或整體畫面的傾斜編排,使畫面擁有極強的律動感,刺激視覺——當製作的圖片中要出現律動性、沖擊性、不穩定性、跳躍性等效果,可以使用傾斜型排版。傾斜排版可以讓呆板的畫面爆發活力和生機,當你發現自己的圖片過於死板或僵硬時,嘗試讓畫面中某個元素帶點傾斜,會有出奇的效果。
↑ 骨骼型排版,通過有序的圖文排列,使畫面嚴謹統一、具有秩序感——當製作的圖片中,文字較多時,通常都會應用骨骼型排版。骨骼型排版時較為常見的排版方式、清晰的調理和嚴謹性讓畫面平穩,是一種不會出現的錯誤,但是畢竟單一的排版方式。有些時候為了打破骨骼型的單一和平穩,我們也可以應用上圖第三張的形式,在規整的排列中加入一些律動強烈的素材。
↑ 網頁設計(包含電商)中大部分都是骨骼型排版形式
↑ 滿版型排版,通過大面積的元素來傳達最為直觀和強烈的視覺刺激,使畫面豐富且具有極強的帶入性——當製作的圖片中有極為明確的主體,且文案較少時可以採用滿版型排版。常見的滿版型排版有整體滿版、細節滿版和文字滿版。
如第一張:整體滿版會讓畫面有強烈的帶入性。
如第二張:細節滿版能快速明確和展示主體。
如第三種:而文字滿版通常是以裝飾的形式來表達某些文案。
二、方法
了解了基本的版式,我們再去了解排版中需要注意的幾個問題。
首先是對版式的選擇,你如果拿到一份客戶的要求而沒辦法想出來接下來可以用哪些方法去排版,顯然是作為設計師而言不太光彩和合格的事情。我在上邊的例子中也寫到了,不同的情況下可以應用不同的版式,而所謂的不同情況大多數時候有這么幾種,字少圖少、字少圖多、字多圖少、字多圖多,字圖一樣。其次就是如何應用,版式是一種縹緲的藝術,理論形式固定,但表現形式多樣。當你手法純熟了,怎麼擺放都會很好看,而在剛開始練習的階段,我們還是最好注意好排版中需要嚴格遵守的一樣東西——留白。
留白很多大師都講過,分析過,大部分來說比較宏觀,都是跟意境掛鉤,我再去說重復的東西就沒有意義了,我要說的是幾個細碎的留白問題,首先我要否認很多人認為留白就是要做簡約風的印象,其實留白無處不在,簡約風只是留白更宏觀的定義而已……那麼怎樣去理解和運用留白呢,首先我們要對留白有幾個新的認識:
第一,文字間距、行距都是留白,而這種距離如果太過統一和擁擠畫面就會死板,所以在文段較多的情況下,我們可以適當調節文段的距離來改善畫面的效果,也就是加大文字間的留白。
如下圖:
第二,比如某個元素內部又有其他元素,那麼這個元素內部區域就需要合理的留白,內部元素不能太滿,也不能太偏。
如下圖:
第三,元素跟元素之間要有一個合理的留白,不然就會擁擠難受。
如下圖:
第四,除滿版型排版以為盡量讓畫面四周有足夠的留白。有些時候不必要放那麼多的裝飾元素,在畫面中,那樣反而會搶了主體,比如這個下圖,其實竹葉也可以表達所需的意思,而且更靈動。
第五,裝飾元素在做飄散的時不要集中在一個區域,那樣會讓某個區域留白不夠顯得擁擠,還會顯得圖片的感覺小氣,飄散的元素我們盡量做的大氣一些,揮灑寫,彌補周邊空曠的同事又能讓畫面大氣。
如下圖:
第六,留白的同時也要去白,去白是一種平衡留白畫面的效果,一般來說常用的去白方式是對線去白,即下方有元素而上方很空的時候,給上方增加一個元素來平衡畫面;當主體過於渺小導致留白過多時,需要放大主體和調整其它元素來去白。
如下圖:
圖1:中心主體太小上下空洞 圖2:下方去白,上方空洞 圖3:上下去白,畫面平穩
舉例:
↑中心元素過小,周邊過於空曠
↑中心整體放大,主體上下留白過多被彌補,但主體與文案間的留白關系不是很舒服
↑拉開文案的行距,使主體與整體文案的空間感相近,彌補文案上下的留白過剩
結合留白,我再針對上面提到的不同情況應用不用版式舉個簡單的例子,當客戶給我的方案是字少圖少和字少圖多的情況下,中心型、中軸型、滿版型、骨骼型、分割型等多種方式都可以解決當前問題的。比如我們用一下文字和圖片做一張圖:

圖1:中心型 圖2:中軸型 圖3:滿版型
↑ 骨骼型
↑ 分割型
有時候我們也會遇到一張圖片中要放很多小圖片的情況,而且很多小圖片的素材尺寸都是不同的,這里也是很多人經常犯錯的地方,大部分人都是隨意擺放並配上文字,其實我們可以把每個圖片都做在同等大小的形狀中顯示,既規整又大方,如圖:

而當素材不太美觀和即便排列整齊,整體圖片也還是有些擁擠時,我們可以化繁為簡,去掉小圖展示:
綜上內容,版式沒有絕對的好壞,只有合適不合適;這期我們講的主要還是圍繞簡潔的版式,下期我們隊復雜的版式再做更深入的理解。
(成都千巨)

4、版式設計都有什麼

 骨格型、滿版型、上下分割型、左右分割型、中軸型、曲線型、傾斜型、對稱型、重心型、三角型、並置型、自由型和四角型等13種。

5、關於平面設計和排版的

一.骨格型
規范的、理性的分割方法。
常見的骨格有-豎向通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。
圖片和文字的編排上,嚴格按照骨格比例進行編排配置,給人以嚴謹、和諧、理性的美。 骨格經過相互混合後的版式,既理性有條理,又活潑而具有彈性。
二.滿版型
版面以圖像充滿整版,主要以圖像為訴示,視覺傳達直觀而強烈。文字配置壓置在上下、左右或中部(邊部和中心)的圖像上。滿版型,給人大方、舒展的感覺。是商品廣告常用的形式。
三.上下分割型
整個版面分成上下兩部分,在上半部或下半部配置圖片(可以是單幅或多幅),另一部分則配置文字。 圖片部分感性而有活力,而文字則理性而靜止。
四.左右分割型
整個版面分割為左右兩部分,分別配置 文字和圖片。
左右兩部分形成強弱對比時,造成視覺心理的不平衡。這僅是視覺習慣(左右對稱)上的問題,不如上下分割型的視覺流程自然。
如果將分割線虛化處理,或用文字左右重復穿插,左右圖與文會變得自然和諧。
五.中軸型
將圖形作水平方向或垂直方向排列,文字配置在上下或左右。 水平排列的版面,給人穩定、安靜、平和與含蓄之感。 垂直排列的版面,給人強烈的動感。
六.曲線型
圖片和文字,排列成曲線,產生韻律與節奏的感覺。
六.曲線型
圖片和文字,排列成曲線,產生韻律與節奏的感覺。
七.傾斜型
版面主體形象或多幅圖像作傾斜編排,造成版面強烈的動感和不穩定因素,引人注目。
八.對稱型
對稱的版式,給人穩定、理性、理性的感受。
對稱分為-絕對對稱和相對對稱。一般多採用相對對稱手法,以避免過於嚴謹。對稱一般以左右對稱居多。
九.重心型
重心型版式產生視覺焦點,使其更加突出。
有3種類型:
直接以獨立而輪廓分明的形象占據版面中心;
向心:視覺元素向版面中心聚攏的運動;
離心:猶如石子投入水中,產生一圈一圈向外擴散的弧線的運動。
平面設計(graphic design),也稱為視覺傳達設計,是以「視覺」作為溝通和表現的方式,透過多種方式來創造和結合符號、圖片和文字,藉此作出用來傳達想法或訊息的視覺表現。平面設計師可能會利用字體排印、視覺藝術、版面(page layout)、電腦軟體等方面的專業技巧,來達成創作計劃的目的。平面設計通常可指製作(設計)時的過程,以及最後完成的作品。
平面設計的常見用途包括標識(商標和品牌)、出版物(雜志,報紙和書籍)、平面廣告,海報,廣告牌,網站圖形元素、標志和產品包裝。例如,產品包裝可能包括的商標或其他的藝術作品、編排文本和純粹的設計元素,如風格統一的圖像,形狀,大小和顏色。組合是平面設計的最重要的特性之一,尤其是當產品使用預先存在的材料或多種元素融合。

6、演示文稿中設計模板和幻燈片版式有什麼不同?

打開幻燈片——視圖——母版——幻燈片母版,然後插入你喜歡的圖片,再退出就可以在應用設計看到你想要的母版了
如過什麼都還是沒有,就重新安裝一次把,最直接的方法。呵呵。

7、平面設計文字排版技巧

一、版式

首先我們需要了解的版式。我們平時製作或看到的版式大部分都是由——中心型、中軸型、分割型、傾斜型、骨骼型、滿版型為主。

↑ 中心型排版,利用視覺中心,突出想要表達的實物——當製作的圖片沒有太多文字,並且展示主體很明確的情況下建議多使用中心型的排版。中心排版具有突出主體、聚焦視線等作用,體現大氣背景可用純色,體現高端背景可用漸變色。

上圖為Elysions的作品

↑ 中軸型排版、利用軸心對稱,使用畫面展示規整穩定、醒目大方——當製作的圖片滿足中心型排版但主體面積過大的情況下,可以使用中軸型排版。中軸型居中對稱的版面特點,在突出主體的同事又能給予畫面穩定感,並能使整體畫面具有一定的沖擊力。

在做電商活動海報的時候中軸型是很出效果的一種形式

↑ 分割型排版,利用分割線使畫面有明確的獨立性和引導性——當製作的圖片中有多個圖片和多段文字時可以使用分割排版。分割型排版能使畫面中每個部分都是極為明確和獨立的,在觀看時能有較好的視覺引導和方向;通過分割出來的體積大小也可以明確當前圖片中各部分的主次關系,有較好的對比性,並使整體畫面不單調和擁擠。

↑ 傾斜型排版,通過主體或整體畫面的傾斜編排,使畫面擁有極強的律動感,刺激視覺——當製作的圖片中要出現律動性、沖擊性、不穩定性、跳躍性等效果,可以使用傾斜型排版。傾斜排版可以讓呆板的畫面爆發活力和生機,當你發現自己的圖片過於死板或僵硬時,嘗試讓畫面中某個元素帶點傾斜,會有出奇的效果。

↑ 骨骼型排版,通過有序的圖文排列,使畫面嚴謹統一、具有秩序感——當製作的圖片中,文字較多時,通常都會應用骨骼型排版。骨骼型排版時較為常見的排版方式、清晰的調理和嚴謹性讓畫面平穩,是一種不會出現的錯誤,但是畢竟單一的排版方式。有些時候為了打破骨骼型的單一和平穩,我們也可以應用上圖第三張的形式,在規整的排列中加入一些律動強烈的素材。

↑ 網頁設計(包含電商)中大部分都是骨骼型排版形式

↑ 滿版型排版,通過大面積的元素來傳達最為直觀和強烈的視覺刺激,使畫面豐富且具有極強的帶入性——當製作的圖片中有極為明確的主體,且文案較少時可以採用滿版型排版。常見的滿版型排版有整體滿版、細節滿版和文字滿版。

如第一張:整體滿版會讓畫面有強烈的帶入性。
如第二張:細節滿版能快速明確和展示主體。
如第三種:而文字滿版通常是以裝飾的形式來表達某些文案。

二、方法

了解了基本的版式,我們再去了解排版中需要注意的幾個問題。

首先是對版式的選擇,你如果拿到一份客戶的要求而沒辦法想出來接下來可以用哪些方法去排版,顯然是作為設計師而言不太光彩和合格的事情。我在上邊的例子中也寫到了,不同的情況下可以應用不同的版式,而所謂的不同情況大多數時候有這么幾種,字少圖少、字少圖多、字多圖少、字多圖多,字圖一樣。其次就是如何應用,版式是一種縹緲的藝術,理論形式固定,但表現形式多樣。當你手法純熟了,怎麼擺放都會很好看,而在剛開始練習的階段,我們還是最好注意好排版中需要嚴格遵守的一樣東西——留白。

留白很多大師都講過,分析過,大部分來說比較宏觀,都是跟意境掛鉤,我再去說重復的東西就沒有意義了,我要說的是幾個細碎的留白問題,首先我要否認很多人認為留白就是要做簡約風的印象,其實留白無處不在,簡約風只是留白更宏觀的定義而已……那麼怎樣去理解和運用留白呢,首先我們要對留白有幾個新的認識:

第一,文字間距、行距都是留白,而這種距離如果太過統一和擁擠畫面就會死板,所以在文段較多的情況下,我們可以適當調節文段的距離來改善畫面的效果,也就是加大文字間的留白。

如下圖:

第二,比如某個元素內部又有其他元素,那麼這個元素內部區域就需要合理的留白,內部元素不能太滿,也不能太偏。

如下圖:

第三,元素跟元素之間要有一個合理的留白,不然就會擁擠難受。

如下圖:

第四,除滿版型排版以為盡量讓畫面四周有足夠的留白。有些時候不必要放那麼多的裝飾元素,在畫面中,那樣反而會搶了主體,比如這個下圖,其實竹葉也可以表達所需的意思,而且更靈動。

第五,裝飾元素在做飄散的時不要集中在一個區域,那樣會讓某個區域留白不夠顯得擁擠,還會顯得圖片的感覺小氣,飄散的元素我們盡量做的大氣一些,揮灑寫,彌補周邊空曠的同事又能讓畫面大氣。

如下圖:

第六,留白的同時也要去白,去白是一種平衡留白畫面的效果,一般來說常用的去白方式是對線去白,即下方有元素而上方很空的時候,給上方增加一個元素來平衡畫面;當主體過於渺小導致留白過多時,需要放大主體和調整其它元素來去白。

如下圖:

圖1:中心主體太小上下空洞 圖2:下方去白,上方空洞 圖3:上下去白,畫面平穩

舉例:

↑中心元素過小,周邊過於空曠

↑中心整體放大,主體上下留白過多被彌補,但主體與文案間的留白關系不是很舒服

↑拉開文案的行距,使主體與整體文案的空間感相近,彌補文案上下的留白過剩

結合留白,我再針對上面提到的不同情況應用不用版式舉個簡單的例子,當客戶給我的方案是字少圖少和字少圖多的情況下,中心型、中軸型、滿版型、骨骼型、分割型等多種方式都可以解決當前問題的。比如我們用一下文字和圖片做一張圖:

圖1:中心型 圖2:中軸型 圖3:滿版型

↑ 骨骼型

↑ 分割型

有時候我們也會遇到一張圖片中要放很多小圖片的情況,而且很多小圖片的素材尺寸都是不同的,這里也是很多人經常犯錯的地方,大部分人都是隨意擺放並配上文字,其實我們可以把每個圖片都做在同等大小的形狀中顯示,既規整又大方,如圖:

8、平面設計有哪些排版的基本常識?

1. 點的構成

點是組來成平面構成的基礎自要素。點可以是不同大小的;可以是不同疏密的;可以是不同虛實的。可以是整齊的點,也可以是隨意排列的點。在一個畫面上也可以有大小、疏密、虛實、整齊和隨意對比的,對比就會產生韻律感。僅僅依靠點來構建畫面時,我們會想方設法地讓畫面豐富,體會點的變化。

2. 線的構成

線有哪些呢?垂直線、水平線、斜線、曲線等。垂直和水平都會有穩定的感覺,斜線會更加有沖擊力,曲線會感受更加柔和。由不同粗細、不同韻律的線條組合,作品將更加有視覺引導的效果。嘗試只用線條構建一個畫面,你會體會到不一樣的視覺感受。

3. 面的構成

面的種類有不規則形狀和幾何形狀兩種。在《紀念碑谷》游戲中有個詞叫做「神聖幾何」,我非常的喜歡。幾何圖形真的是很神奇的存在,幾何形是可以用數學表達出來的,也是我們在初中時就開始學習的。比如三角形、圓形、矩形、正方形、橢圓等。這些幾何形在視覺上是非常令人感覺舒適的,如果你在創作時沒有靈感時,可以從幾何形中尋求靈感。不規則形狀其實也可以分解成不同的幾何形的組合。

排版方式

中心型排版

垂直式排版

斜切型排版

框架型排版

對稱型排版

分割型排版

滿版型排版

與中軸型網頁版式設計相關的知識