導航:首頁 > 萬維百科 > 版式暢想網頁設計pdf

版式暢想網頁設計pdf

發布時間:2020-10-22 02:20: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、網頁布局與網頁版式設計區別?

先定布局再定設計版式,先定布局板塊功能,在做細節設計。

3、如何做好網頁的版式設計

網站的欄目策劃是在網站製作過程中容易忽視的一個細節,因為在網站製作的過程中都比較重視頁面的設計和網站實現的功能,其實網站的欄目策劃在網站製作過程中起著決定性的作用,是用戶的一個導航索鏈,有的欄目設置精妙,就可以把用戶帶入到另一個頁面,讓用戶在網站中停留,使用戶更加了解企業。所以,網站欄目也是一個核心要點,下面沃然建站總結了一些關於網站欄目策劃的小建議,
1、 網站欄目策劃的重點是導航:
在網站策劃中要注意導航條的位置要明顯且統一,有一些網站是無法做到,這個會給用戶帶來易進不易出的一個環繞,從而導致用戶直接關閉網站,跳出率就會增長。

2、 網站欄目結構要層級分明,條理清晰:
打開一個網站,有的是有很多內容的,有各式各樣的產品,而欄目就是方便用戶找到所需內容的一個重要導航,所以嘉陵道小程序製作公司建議要做到層次分明、條理清晰,網站欄目最好不要超過三層,不要讓用戶層層剝繭似的找到所需內容,同時對推廣也是有影響的。

3、網站欄目命名要清晰、易懂:
中國文字博大精深,有些企業喜歡別出心裁的取一些欄目名,創意確實很好,但是想要知道名稱意思並不是自己為主,這樣容易產生反效果,如果你能創造通俗易懂,又有創意的那就更好了。

4、網站欄目在網站建設中布局要合理:
嘉陵道小程序製作公司提醒欄目不是隨便放著就可以了,也需要配合網站建設中網頁設計的整體搭配,做到二者兼得是最佳的狀態。

4、網頁版式設計中可以同時運用多種表現手法嗎

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

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

2、滿版型

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

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

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

圖1:綜合運用多種分欄形式。
圖2:四邊出血,向外擴張,適合年輕人的口味。
圖3:分割線上的壓置的圖片既打破了頁面分割的生硬感,也使自身得到強調。左邊框上的小標簽乃點睛之筆。
圖4:不易覺察的中軸型版式,給人以輕快之感。
圖5:網站的導航標題沿圖形弧線排列。

6.傾斜型
頁面主題形象或多幅圖片、文字作傾斜編排,形成不穩定感或強烈的動感,引人注目。

7.對稱型
對稱的頁面給人穩定、嚴謹、莊重、理性的感受。
對稱分為絕對對稱和相對對稱。一般採用相對對稱的手法,以避免呆板。左右對稱的頁面版式比較常見。
四角型也是對稱型的一種,是在頁面四角安排相應的視覺元素。四個角是頁面的邊界點,重要性不可低估。在四個角安排的任何內容都能產生安定感。控制好頁面的四個角,也就控制了頁面的空間。越是凌亂的頁面,越要注意對四個角的控制。

8.焦點型
焦點型的網頁版式通過對視線的誘導,使頁面具有強烈的視覺效果。焦點型分三種情況

(1)中心 以對比強烈的圖片或文字置於頁面的視覺中心。
(2)向心 視覺元素引導瀏覽者視線向頁面中心聚攏,就形成了一個向心的版式。向心版式是集中的、穩定的,是一種傳統的手法。
(3)離心 視覺元素引導瀏覽者視線向外輻射,則形成一個離心的網頁版式。離心版式是外向的、活潑的,更具現代感,運用時應注意避免凌亂。

9.三角型
網頁各視覺元素呈三角形排列。正三角形(金字塔型)最具穩定性,倒三角形則產生動感。側三角形構成一種均衡版式,既安定又有動感。

5、網頁設計中的排版原則有哪些

一、直觀性
所謂直觀,指的是在打開的瞬間,用戶能夠明白這些內容和畫面想要傳達什麼信息。看過之後不知道想要表達什麼,或者覺得非常混亂,都是不夠直觀的表現。這是視覺心理的問題。為了留住讀者,設計師需要讓版式舒朗而明確,脈絡清晰,用戶一望而知之。只有讓內容的價值為用戶所了解,才能讓人讀下去,願意了解,才有接下來的轉化。
技巧一:圖文互補
想要讓用戶更容易獲取信息,需要讓圖片和文本相互配合,讓視覺化的圖片來營造氛圍,優先傳遞大概的信息和感受給用戶,文本則提供詳細而精準的內容,確保信息准確可用。文本也需要盡量輕松易懂。
技巧二:利用信息圖
復雜的信息可以藉助信息圖來呈現,這樣可以讓不易被人理解的數據和內容,更加視覺化的表達,用戶在瀏覽的時候,可以更加輕松地理解,降低信息理解的門檻,更加直觀。
二、易讀性
文本內容是絕大多數設計中必不可少的組成部分。文字的編排需要以易讀性為原則。字體過小、太密、過多裝飾甚至跳躍性地插入頁面布局中,都是不易讀的表現,也是設計師沒有為讀者考慮的結果。在書寫機會逐漸減少的現代,易讀性是文本內容是最基本要求。文字的可讀性要足夠強,這不僅與文字的形體有關系,而且和大小、字間距、行間距都密切相關。
技巧一:疏密有致的文字排版
根據風格和需求來選用最易讀的襯線體和非襯線體,文字排版比較通常的做法是將行高設置為1.5em- 2.0em,將段間距設定為2.0em,文本對比度為7:1,最小值為4.5:1。每行文本字數不要太多,最好控制在42字以內。
技巧二:清晰連貫的視線流
「視線流」更通俗的叫法是視覺引導,就是整個排版布局有一個相對清晰的閱讀順序和視覺線索,用戶不會因為模稜兩可的排版而選擇錯誤的閱讀順序。視線流能夠讓用戶下意識、按照順序來獲取信息,更加容易理解其中的內容。

6、包裝的版式設計和海報、網頁、書籍等門類的版式設計有什麼區別!

材料不同,多幾個面平面和立體平面的區別。

7、好的版式設計網站

http://www.artcn.cn/Article/pmsj/BMSJ/

與版式暢想網頁設計pdf相關的知識