實用美術(shù)基礎(chǔ) 課件 第8章　版式設(shè)計

實用美術(shù)基礎(chǔ)八、版式設(shè)計8.1版式設(shè)計概述版式設(shè)計8版式設(shè)計是指在有限的版面空間內(nèi)，將視覺元素——文本、圖片（圖形）、線條和顏色等內(nèi)容，根據(jù)需要進行有序、有目的的排列組合設(shè)計。版式設(shè)計是藝術(shù)與技術(shù)的結(jié)合，應(yīng)用范圍廣泛，涉及書籍（畫冊）、報紙、刊物、廣告、宣傳手冊、企業(yè)形象、包裝、網(wǎng)頁、軟件界面等各個領(lǐng)域。8.1.1版式設(shè)計的概念版式設(shè)計8.1版式設(shè)計概述8在現(xiàn)代版式設(shè)計中，常用一些專用名詞來表示基本概念與度量，如視覺度、版心、出血邊、分欄、欄寬、行高、字號等。視覺度是指文字和圖版（插圖、照片）在版面中產(chǎn)生的視覺強弱度。通常照片比插圖的視覺度低，沒有照片的版面比有照片的版面視覺度低。版心通常是頁面正中位置，是指版面上除去周圍白邊，頁面主要內(nèi)容所在區(qū)域。8.1.2版式設(shè)計的專用名詞版式設(shè)計8.1版式設(shè)計概述8出血邊是指需要裁切的版面（如雜志、畫冊、書籍等）所預(yù)留的裁切空間。分欄是指因為版式或閱讀的需要，將文本分為多列；欄寬是指分欄后的單欄的寬度。行高是指文字橫排時，某行文字的頂端到下一行文字頂端的高度，是文字高度與行距的總和。字號是區(qū)別文字大小的度量標準。國際單位度量標準通常是點制也稱為磅制，在微軟系統(tǒng)中還有號制度量標準。8.1.2版式設(shè)計的專用名詞專用名詞版式設(shè)計8.1版式設(shè)計概述8版心文本分欄版式字號字號度量值之間的關(guān)系版式設(shè)計8.1版式設(shè)計概述8版式設(shè)計8.1版式設(shè)計概述8古籍版式主要是指古籍版刻的樣式。造紙術(shù)發(fā)明之后，我國書籍印刷水平在宋朝達到新高度，線裝刻本代替手抄本成為圖書流傳的主要形式。書籍的每一印頁都有相對固定的格式和名稱。通常版面四周圍的黑線稱為邊欄或版框。邊欄有單邊、左右雙邊（俗稱文武邊）、四周雙邊和花邊之分。版面的中心稱為版心或版口，版心通常有用作對折準繩的黑線和魚尾形圖案，有的還印有書名、卷數(shù)、頁碼及本頁字數(shù)。明代以前，版心下方往往還印有刻工姓名。8.1.3中文傳統(tǒng)古籍版式古籍版式明前期刻書《元史》為例的古籍版式說明版式設(shè)計8.1版式設(shè)計概述8古籍版式魚尾樣式及名稱版式設(shè)計8.1版式設(shè)計概述8象鼻樣式及名稱

（花邊）竹節(jié)欄邊欄與（花邊）博古欄邊欄版式設(shè)計8.1版式設(shè)計概述815世紀中期，約翰·古騰堡的金屬活字印刷術(shù)的應(yīng)用標志著西方圖書批量生產(chǎn)的開始。到了15世紀下半葉，圖文混排的排版方式開始從德國向其他歐洲國家傳播。到了19世紀中期，攝影技術(shù)出現(xiàn)。攝影圖片、字體和插畫等元素一起成了現(xiàn)代版式設(shè)計的構(gòu)成要素。20世紀初，藝術(shù)界充滿了開創(chuàng)與改革。8.1.4西方版式發(fā)展西方版式版式設(shè)計8.1版式設(shè)計概述8

《御用天文學(xué)》首頁及內(nèi)頁版式西方版式版式設(shè)計8.1版式設(shè)計概述8攝影圖片成為現(xiàn)代版式設(shè)計的構(gòu)成要素之一阿波利奈爾寫給愛人的情詩圖設(shè)計討論版式設(shè)計原則通過搜集資料、分析案例、比較分析等步驟，從設(shè)計目的、需求審美、設(shè)計作用、設(shè)計價值等方面，總結(jié)版式設(shè)計需遵守的基本原則。討論成果：學(xué)習(xí)筆記討論建議：在討論過程中要結(jié)合具體案例有理有據(jù)地闡述相關(guān)觀點。設(shè)計實踐雜志版式案例臨摹從時尚類、設(shè)計類、攝影類等雜志中選擇圖文并茂的優(yōu)秀版式頁面，自行擬定作品內(nèi)容與配圖，進行版面空間分配、構(gòu)圖布局、色彩搭配的臨摹學(xué)習(xí)。設(shè)計成果：版式臨摹作品設(shè)計要求：①建議計算機軟件輔助繪制，可根據(jù)實際情況更改作品尺寸；②所選雜志頁面版式內(nèi)容豐富且富有設(shè)計性與創(chuàng)意性；③建議在臨摹基礎(chǔ)之上，根據(jù)個人的審美與所選內(nèi)容進行版式再設(shè)計。8.2版式設(shè)計流程版式設(shè)計8在深刻理解主題內(nèi)容與傳遞需求的基礎(chǔ)上，才能更好地篩選內(nèi)容與展示信息。在進行編排之前，先要理解設(shè)計主題與需求，版式的內(nèi)容與排列要服務(wù)于主題。用什么字體？用多大字號？橫排還是豎排？版式風(fēng)格趨向？這些都是由主題和需求所決定的。8.2.1明確需求版式設(shè)計8.2版式設(shè)計流程8分級是根據(jù)信息傳遞的重要程度將內(nèi)容分為不同層級。通常第一層級是需要突出顯示的文字或圖片，如主標題、廣告語、關(guān)鍵詞、主要圖片等；第二層級是對第一層級的輔助說明或次級信息，如內(nèi)文、配圖、需要特別強調(diào)的信息等；第三層級是最次要的，如通欄、頁碼、注釋等。特別說明的是，這種分級并不是絕對的，是根據(jù)主題內(nèi)容而定的，需要根據(jù)文本內(nèi)容、圖片類型的不同而靈活設(shè)計，其目的是幫助我們了解編排對象在版面中的功能和意義。8.2.2內(nèi)容分級內(nèi)容分級版式設(shè)計8.2版式設(shè)計流程8版面中的通欄（紅色框選部分）版面中的注釋版式設(shè)計8.2版式設(shè)計流程8版面設(shè)計過程就是將視覺元素進行空間分配的過程。在分配過程中，需要從版面美感、視覺流程、內(nèi)容展示、閱讀習(xí)慣等多方面去考慮，以達到合理、舒適、美觀的視覺效果。8.2.3空間分配版式設(shè)計8.2版式設(shè)計流程8篇幅拆分版面設(shè)計過程就是將視覺元素進行空間分配的過程。在分配過程中，需要從版面美感、視覺流程、內(nèi)容展示、閱讀習(xí)慣等多方面去考慮，以達到合理、舒適、美觀的視覺效果。篇幅拆分版式設(shè)計8.2版式設(shè)計流程8中文文字分欄效果版式設(shè)計8.2版式設(shè)計流程8字號確定需要基本確定每個層級字號大小，通過各層級間的字號比例與對比關(guān)系體現(xiàn)層級的主次關(guān)系。通常第一層級的字號與第二層級的字號大小對比強烈，而第二層級與第三層級的字號差異要小一點。字號確定版式設(shè)計8.2版式設(shè)計流程8同字號不同字體的視覺大小差異《生動》海報版式設(shè)計8.2版式設(shè)計流程8間距設(shè)定影響閱讀體驗的因素不僅有字號，還有間距。每一個字、每一行字、每一段字的上下左右的空間間隔是否合理也關(guān)系著閱讀的清晰與流暢。間距設(shè)定版式設(shè)計8.2版式設(shè)計流程8《世博會博物館十周年圖像展》海報(作者：世博會博物館林倩蝶)《金陵小巷人物志》目錄（設(shè)計：周偉偉）《金陵小巷人物志》（設(shè)計：周偉偉）版式設(shè)計8.2版式設(shè)計流程8網(wǎng)格設(shè)計在進行空間分配時，還可以借助網(wǎng)格系統(tǒng)進行空間設(shè)計。在確定版心尺寸、設(shè)計內(nèi)容、圖片尺寸等的基礎(chǔ)上，將版心面積劃分為統(tǒng)一的網(wǎng)格，其網(wǎng)格數(shù)量無固定限制，網(wǎng)格數(shù)量越多可組合出的版式樣式越多，可放置的圖片尺寸越靈活。網(wǎng)格設(shè)計版式設(shè)計8.2版式設(shè)計流程8網(wǎng)格劃分與版式變化版式設(shè)計8.2版式設(shè)計流程8頁面留白留白也是構(gòu)成頁面版式必不可少的因素。所有的白都是“有目的的留白”。常見的手法有以下幾種:通過留白減輕頁面給人的負擔(dān);通過留白有目的地突出表達重點;通過留白區(qū)分元素的存在，弱化元素與元素之間的阻隔。留白設(shè)計版式設(shè)計8.2版式設(shè)計流程8通過留白減輕頁面給人的負擔(dān) 通過留白有目的地突出表達重點通過留白區(qū)分元素的存在版式設(shè)計8.2版式設(shè)計流程8版面設(shè)計過程就是在版式設(shè)計中，為了強化版面信息，優(yōu)化結(jié)構(gòu)布局、引導(dǎo)視覺流程，提升閱讀體驗，需要對其色彩調(diào)配進行有序的設(shè)計。先要確定主色調(diào)，主色調(diào)在營造版面氛圍與意境方面可以發(fā)揮主導(dǎo)作用。多種顏色共同使用時還需要進行色彩調(diào)配。通常色彩的明度、純度和面積是影響配色視覺的主要因素。8.2.4色彩調(diào)配色彩調(diào)配版式設(shè)計8.2版式設(shè)計流程8夜光博物館活動海報（作者：正佳自然科學(xué)博物館胡涵）紅黑色調(diào)版式效果對比色彩版式效果色彩調(diào)配版式設(shè)計8.2版式設(shè)計流程8有彩色與無彩色對比的版式效果色塊分割版式效果利用色彩差異烘托主次關(guān)系,加強版面表現(xiàn)力。設(shè)計討論中、英文版式的編排差異從字形、字號、篇幅、閱讀方式、編排規(guī)律等方面對比分析中英文文本的編排特點。通過搜集案例、比較分析、互相討論等步驟歸納總結(jié)中文文本和英文文本版式的編排差異。討論成果：學(xué)習(xí)筆記討論建議：在討論過程中要結(jié)合具體案例有理有據(jù)地闡述相關(guān)觀點。設(shè)計實踐迎新晚會節(jié)目單在新學(xué)期到來之際，校園迎來了新一屆的學(xué)生。以師生歡聚一堂，共同展示自我風(fēng)采為目的，設(shè)計迎新晚會節(jié)目單。從實際問題出發(fā)，結(jié)合晚會宗旨、迎新特色、演出信息、節(jié)目內(nèi)容等方面篩選素材，并轉(zhuǎn)化為視覺元素，最終完成節(jié)目單的設(shè)計制作。設(shè)計成果：晚會節(jié)目單設(shè)計要求：①節(jié)目單需包括活動標題、活動信息及相關(guān)配圖；②文字清晰、信息完整、圖片選取合理；③版面用色與主題相符，視覺美觀、效果突出。8.3傳統(tǒng)媒體的版式設(shè)計與趨勢版式設(shè)計8目前，常見的書籍版式包括封面、扉頁、書脊、版權(quán)頁、目錄、內(nèi)文等。雖然目前我國沒有出臺圖書版式設(shè)計的標準，但在設(shè)計過程中還需要遵守出版社的要求。書籍排版的發(fā)展越來越個性化。在當(dāng)今時代，紙質(zhì)書籍想要占據(jù)市場就必須挖掘自身特點，讓讀者享受舒適、獨特的閱讀體驗。8.3.1書籍的版式設(shè)計及趨勢書籍版式內(nèi)容與要求版式設(shè)計8.3傳統(tǒng)媒體的版式設(shè)計與趨勢8封面與書脊叢書標題小于書名且標注朝代用方括號版權(quán)頁書籍版式內(nèi)容與要求版式設(shè)計8.3傳統(tǒng)媒體的版式設(shè)計與趨勢8《博物》圖文混排版式《中國國家地理·能源山西》特輯頁眉設(shè)計書籍版式內(nèi)容與要求版式設(shè)計8.3傳統(tǒng)媒體的版式設(shè)計與趨勢8左右頁面的版式協(xié)調(diào)書籍版式個性化版式設(shè)計8.3傳統(tǒng)媒體的版式設(shè)計與趨勢8個性化的書籍版式 趣味立體兒童讀物書籍版式個性化版式設(shè)計8.3傳統(tǒng)媒體的版式設(shè)計與趨勢8書籍內(nèi)頁版式設(shè)計（書籍設(shè)計：尹琳琳）版式設(shè)計8與書籍相比，雜志的出版周期短、發(fā)行區(qū)域固定、內(nèi)容廣泛，同時兼具時效性、新穎性與知識性。在具體設(shè)計時，雜志的版式與讀者定位、主題內(nèi)容、發(fā)行區(qū)域有著密切的關(guān)系。雜志內(nèi)頁的版式內(nèi)容與書籍相似，同樣包括文本、圖片、書眉、頁碼等內(nèi)容。8.3.2雜志的版式設(shè)計及趨勢雜志版式版式設(shè)計8.3傳統(tǒng)媒體的版式設(shè)計與趨勢8《nature》雜志《青年視覺》雜志《中國國家地理》雜志雜志版式版式設(shè)計8.3傳統(tǒng)媒體的版式設(shè)計與趨勢8雜志內(nèi)頁的文字、圖片、書眉、頁碼《環(huán)球少年地理》內(nèi)頁版式設(shè)計8招貼是當(dāng)今主要的戶外廣告形式。在國際教科書出版公司出版的廣告詞典里，招貼則是指張貼于紙板、墻、大木板或車輛上的印刷廣告，或者以其他方式展示的印刷廣告。目前，招貼上的內(nèi)容主要包括文字與圖片兩大元素。新媒體時代下，招貼設(shè)計會更加人性化，更具個性化及互動性，要更多地關(guān)注用戶的需求與喜好，使信息的傳播更加快捷與高效。8.4.3招貼的版式設(shè)計及趨勢招貼版式版式設(shè)計8.3傳統(tǒng)媒體的版式設(shè)計與趨勢82010年南非世界杯招貼華為麥芒6發(fā)布會倒計時招貼2014年巴西世界杯招貼設(shè)計討論紙媒發(fā)展之我談結(jié)合案例談?wù)勀銓π聲r代下紙媒發(fā)展的看法。通過閱讀文獻、市場調(diào)查、案例分析等研究方法，提出對傳統(tǒng)紙媒發(fā)展遠景的見解，探討紙媒發(fā)展的新方向，并闡述其可行性。討論成果：研究報告（圖文并茂）討論建議：辯證地看待未來紙媒的發(fā)展，至少提出三種發(fā)展方向，并結(jié)合具體案例有理有據(jù)地陳述觀點。設(shè)計實踐學(xué)生會納新招貼設(shè)計為了給學(xué)院學(xué)生會吸納更多的人才,給同學(xué)們提供一個展示自我的平臺,學(xué)院學(xué)生會準備舉行納新活動，為相關(guān)宣傳活動設(shè)計一幅招貼。從實際需求出發(fā)，將納新口號、學(xué)生會特色、活動地點等信息轉(zhuǎn)化為設(shè)計元素，并結(jié)合相關(guān)圖片與色彩進行招貼版式設(shè)計。設(shè)計成果：招貼作品設(shè)計要求：①招貼尺寸不小于A3；②招貼內(nèi)容包括但不限于活動標題、納新口號、學(xué)生會特色、活動地點和相關(guān)圖片；③文字與圖片布局合理，信息完整且具有可讀性；④版面配色與內(nèi)容相一致，整體美觀且富有設(shè)計感，具有強烈的視覺吸引力。8.4新媒體的版式設(shè)計與趨勢版式設(shè)計8近年來，數(shù)字媒體逐漸成為大眾生活中的重要部分，其中網(wǎng)站成為企業(yè)和機構(gòu)對外宣傳與服務(wù)的重要窗口。網(wǎng)頁的版面中主要包括文字、圖片、符號、動畫、菜單、按鈕等內(nèi)容，其中文字、圖片、符號、動畫是對信息的表達與展示，而菜單和按鈕則是網(wǎng)頁跳轉(zhuǎn)和交互操作的必備條件。同時，受顯示設(shè)備和閱讀習(xí)慣的影響，網(wǎng)頁版式通常采用縱向分割的方式將頁面進行劃分。8.4.1網(wǎng)頁的版式設(shè)計及趨勢網(wǎng)頁版式版式設(shè)計8.4新媒體的版式設(shè)計與趨勢8央視網(wǎng)教育版塊首頁央視網(wǎng)熊貓版塊頁面視頻版式設(shè)計8.4新媒體的版式設(shè)計與趨勢8簡約化在簡約化版式中，一般沒有裝飾性元素或邊框，弱化了材質(zhì)、漸變、陰影等效果，僅保留必要的信息和內(nèi)容。簡約化版式頁面信息層級明確，方便用戶快速尋找目標，可以節(jié)約用戶的時間成本。簡約化版式版式設(shè)計8.4新媒體的版式設(shè)計與趨勢8

AR頁面極簡化頁面版式設(shè)計8.4新媒體的版式設(shè)計與趨勢8矢量插畫化矢量插畫化版式中，設(shè)計者通常使用矢量畫作為元素或內(nèi)容，使網(wǎng)頁看起來清新有趣，加強網(wǎng)站本身的獨特性。矢量插畫版式版式設(shè)計8.4新媒體的版式設(shè)計與趨勢8

2.5D插畫頁面矢量化頁面版式設(shè)計8.4新媒體的版式設(shè)計與趨勢8頭版化網(wǎng)頁中的頭版頭條版式是源自傳統(tǒng)紙媒中對重要新聞的設(shè)計。在具體設(shè)計時，通過使用尺寸超大的圖片與簡潔醒目的標題傳遞網(wǎng)站的主旨與精華，吸引人注意。頭版版式版式設(shè)計8.4新媒體的版式設(shè)計與趨勢8標題與圖片結(jié)合的頭版化頁面 頭版化網(wǎng)頁效果 版式設(shè)計8當(dāng)下，移動程序已經(jīng)成為大眾生活、工作必不可少的工具，也是大家獲取信息的主要渠道。程序界面看似只是幾種元素的排列組合，但其內(nèi)涵卻是信息傳遞與交互規(guī)劃的構(gòu)架，是移動版的網(wǎng)站。8.4.2程序界面的版式設(shè)計及趨勢版式設(shè)計8.4新媒體的版式設(shè)計與趨勢8界面信息的布局首先，要掌握對齊、重復(fù)、親密、對比四大設(shè)計原則。其次，在有限的界面中，需要通過合理的信息布局幫助用戶快速讀取信息，降低出錯率。在信息可視化方面，適當(dāng)使用圖表代替文字可以增強頁面的易讀性與設(shè)計感。界面信息的布局版式設(shè)計8.4新媒體的版式設(shè)計與趨勢8手機界面對齊排版中國海軍博物館小程序界面版式設(shè)計8.4新媒體的版式設(shè)計與趨勢8界面常見布局隨著信息化程度的提高，移動程序的綜合性越來越強，版式變化也越來越快。界面布局設(shè)計中，主要表現(xiàn)為以下幾種：列表式布局版式設(shè)計8.4新媒體的版式設(shè)計與趨勢8微信公眾號界面布局天氣預(yù)報界面布局列表式布局適用于含信息量或文字較多的界面，便于在一個界面上展示同一個級別的分類模塊。宮格式布局版式設(shè)計8.4新媒體的版式設(shè)計與趨勢8九宮格布局微信服務(wù)界面 宮格在展現(xiàn)形式上表現(xiàn)為以矩陣排列的大小相等、形狀一致的幾何網(wǎng)格。通過點擊宮格，可跳轉(zhuǎn)到下一級頁面?？ㄆ讲季职媸皆O(shè)計