《產(chǎn)品界面設(shè)計(jì)與制作》課件-編排設(shè)計(jì)的基本原理

編排設(shè)計(jì)

編排設(shè)計(jì)的基本原理本章重點(diǎn)：1.視覺中心2.視覺流程3.視覺層次4.視覺趣味5.視覺整體3編排設(shè)計(jì)的基本原理本章難點(diǎn)：1.視覺流程2.視覺層次3.視覺趣味4.視覺整體編排設(shè)計(jì)3.1視覺中心3編排設(shè)計(jì)的基本原理視覺中心版面中心區(qū)域中心視覺焦點(diǎn)編排設(shè)計(jì)

對于編排的功能性目的而言，版面的視覺中心意味著版面中最具視覺表現(xiàn)力的區(qū)域，對于視覺信息的傳遞而言，這也是一個黃金區(qū)域。對于視覺中心的尋找成為了版面編排中最關(guān)鍵的步驟，視覺中心往往也體現(xiàn)了整個版面的視覺意義和視覺價值。

版面中心——出于對稱的視覺習(xí)慣，最簡單最直觀的視覺中心就是版面的幾何中心，3編排設(shè)計(jì)的基本原理在諸多編排設(shè)計(jì)中----------版面的幾何中心區(qū)域就是版面的視覺中心。編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理放置在版面的幾何中心的視覺元素具有較強(qiáng)的視覺吸引力重慶大學(xué)出版社編排設(shè)計(jì)

區(qū)域中心——是將版面劃分為若干不同的視覺區(qū)域，然后通過這些部分區(qū)域形成整體的視覺中心?！熬艑m格”法和“黃金比例”法是最常見的視覺中心營造方法。3編排設(shè)計(jì)的基本原理版面中按照比例劃分的視覺區(qū)域——黃金比的紅色分割線，九宮格分割的灰色線，根號2分割綠色線編排設(shè)計(jì)最主要的視覺元素被安排在黃金比分割線的周圍3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)

視覺焦點(diǎn)——視覺焦點(diǎn)擺脫了版面中心和區(qū)域中心的位置束縛，更多指向在版面中具有較高視覺強(qiáng)度和視覺注意力的部分，因此，視覺焦點(diǎn)是版面中另一種意義上的視覺中心。司空見慣的圖形和編排樣式不會引起人們過多的關(guān)注，而只有通過對比、節(jié)奏、疏密等視覺手法營造出視覺興奮點(diǎn)，人們才會將視線停留而形成視覺焦點(diǎn)。3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理版面中的視覺焦點(diǎn)被放入了最重要的文本編排設(shè)計(jì)3.2視覺習(xí)慣3編排設(shè)計(jì)的基本原理視覺習(xí)慣從上至下的視覺習(xí)慣從左到右的視覺習(xí)慣最佳視覺區(qū)域編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理報(bào)紙的閱讀也是遵照由上而下的視覺習(xí)慣15世紀(jì)的書籍版面中，文本段落被適度地上移以形成更均衡的視覺編排設(shè)計(jì)網(wǎng)頁中的導(dǎo)航大多被安排在左部分區(qū)域以適應(yīng)人類從左向右的視覺習(xí)慣3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)版面不同區(qū)域的視覺注意力3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)在RENAULT汽車廣告中，重要的視覺元素被安排在了版面的左上部分的最佳區(qū)域內(nèi)3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理現(xiàn)代期刊的刊名大多放置在版面的最佳視覺區(qū)域內(nèi)編排設(shè)計(jì)3.3視覺流程

視覺流程是指人在觀察事物的時候，視線流動所具有的先后順序。一般情況有位置1關(guān)系流程、②形象關(guān)系流程、③重心誘導(dǎo)流程、④導(dǎo)向訴求流程：

3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)圖例

這張作品把主要的元素安排在版面的上方，在視覺流程上組織的很好，令人們的視線順其組織方向流動。編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理視覺流程單向的視覺流程路徑的視覺流程導(dǎo)向的視覺流程反復(fù)的視覺流程解構(gòu)的視覺流程按圖形①位置關(guān)系流程：②形象關(guān)系流程：③重心誘導(dǎo)流程：④導(dǎo)向訴求流程：編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理

單向的視覺流程——是最簡單也是最清晰的版面秩序，具體可以衍生出水平方向、垂直方向和傾斜方向的不同形式。水平方向的流程引導(dǎo)了視線的左右流動，垂直方向的流程引導(dǎo)了視線的上下流動，傾斜方向的流程引導(dǎo)了視線的對角流動。編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理垂直方向的單向視覺流程編排設(shè)計(jì)水平方向的單向視覺流程3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理

路徑的視覺流程——是復(fù)雜的，迂回的視覺引導(dǎo)，它在于將不同方向上的版面元素建立起具有先后的閱讀順序，引導(dǎo)讀者視線以“按圖索驥”的方式閱讀版面。路徑的視覺流程具有直線和曲線的兩種形式。直線的路徑流程建立了版面元素在水平垂直方向的聯(lián)系，而曲線路徑使視線形成了具有曲線形態(tài)的閱讀方向。編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理山水畫中“S”、“之”字型構(gòu)圖編排設(shè)計(jì)曲線形態(tài)的路徑視覺流程3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理

導(dǎo)向的視覺流程——導(dǎo)向的視覺流程的版面中具有明顯的導(dǎo)向符號和導(dǎo)向結(jié)構(gòu)，版面的視覺元素通過指示性的符號而產(chǎn)生了視覺方向。導(dǎo)向的視覺流程與版面的圖像密切聯(lián)系，盡管是版面元素本身不具有方向性，但依附在由圖像的視覺意義所產(chǎn)生的方向感和視線延續(xù)上，版面元素獲得了與圖像相呼應(yīng)的方向性，這種圖像和版面元素之間的內(nèi)在聯(lián)系形成了版面的視覺整體。編排設(shè)計(jì)文字的趨勢引導(dǎo)了視線方向(CatherineZask)3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)發(fā)射的文本引導(dǎo)了視線方向(GulitovYuri)3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理

反復(fù)的視覺流程——是利用具有相同或相似視覺屬性的版面元素進(jìn)行排列，通過對于版面元素的反復(fù)瀏覽而獲得了穩(wěn)定的視覺節(jié)奏。反復(fù)的視覺流程編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理

解構(gòu)的視覺流程——不定性和偶然性是解構(gòu)視覺流程版面的最大特征，解構(gòu)的視覺流程版面消解了明顯的視覺結(jié)構(gòu)和流程概念，視覺元素以“無秩序”的狀態(tài)分布在版面的不同區(qū)域，而這種無秩序的流程放大了版面元素自身的視覺屬性，從而獲得了跳躍性的版面感受。在解構(gòu)視覺流程的版面中，彼此間具有對立和矛盾關(guān)系的視覺元素通過在大小、形態(tài)、位置和方向上的消長，在混沌的秩序中獲得了均衡的視覺感受。解構(gòu)的視覺流程是自由版面設(shè)計(jì)的主要方法。編排設(shè)計(jì)解構(gòu)的視覺流程3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)解構(gòu)的視覺流程，版面的結(jié)構(gòu)被具有強(qiáng)烈視覺特征的視覺元素所掩蓋3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)3.4視覺層次

版面編排中的視覺層次包含了兩層意義，一是版面中視覺元素形成的具有層次感的視覺效果，二是版面元素具有秩序性的信息表達(dá)。版面信息的層次通常是由信息本身的視覺形態(tài)所決定的，我們通常通過改變和調(diào)整信息元素間的比例、位置、色度以及動靜等視覺關(guān)系來保證版面形成清晰的、容易分辨的視覺層次。3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理比例關(guān)系的視覺層次視覺層次位置關(guān)系的視覺層次色度關(guān)系的視覺層次動靜關(guān)系的視覺層次編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理

比例關(guān)系的視覺層次——比例是最為直觀的形成視覺層次的方式，視覺元素之間大小的比例關(guān)系，類似于透視原理，產(chǎn)生了近、中、遠(yuǎn)的空間層次。相同的比例關(guān)系簡化了版面中的視覺層次編排設(shè)計(jì)比例關(guān)系營造的視覺層次(cyan)3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)

位置關(guān)系的視覺層次——在位置關(guān)系中，前后疊壓的視覺元素構(gòu)成了版面空間的前后層次。在編排過程中，明確這種前后關(guān)系可以形成清晰的視覺層次。位置關(guān)系的視覺層次3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)

色度關(guān)系的視覺層次——在版面編排中，黑白灰體現(xiàn)為色相和明度帶來的視覺差異，無論是有色還是無色的版面，均可以分為黑白灰的視覺層次。在版面中嘗試著以黑白灰關(guān)系進(jìn)行視覺分析，合理分類和簡化版面的色度關(guān)系可以形成清晰的視覺層次。3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)色度關(guān)系的視覺層次色度的對比保證了版面視覺層次的存在3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)

動靜關(guān)系的視覺層次——在靜態(tài)的印刷版面中，動態(tài)的元素指向那些具有動勢和具有動勢聯(lián)想的視覺元素，動態(tài)的版面元素和靜態(tài)的版面元素更多的是在視覺意義上的差別，由于對動態(tài)形象具有天生的敏感，人們往往是先注意到版面中具有動態(tài)傾向的視覺元素。在版面結(jié)構(gòu)中，動態(tài)的視覺元素往往位于靜態(tài)的視覺元素之上。3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)動態(tài)的視覺元素被放置在版面的最上層次3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)3編排設(shè)計(jì)的基本原理動態(tài)的視覺元素被放置在版面的最上層次編排設(shè)計(jì)

復(fù)雜版面中大量視覺元素的存在使得信息的組織和調(diào)度具有難度，依據(jù)版面信息的級別，進(jìn)行合理的分類，將龐雜的版面元素歸納為若干級別的視覺層次，是形成有效視覺層次的主要途徑。大部分的版面可以被簡單地劃分為最重要的信息、次要的信息以及背景等若干有效的視覺層次。

3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)網(wǎng)頁的總體頁面結(jié)構(gòu)通常不超過三個級別，以保證信息組織的清晰性3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)組成版面的三個視覺層次(CatherineZask)3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)3.5視覺趣味

視覺趣味是在功能性基礎(chǔ)上的趣味營造。在后現(xiàn)代編排設(shè)計(jì)中，視覺趣味幾乎已經(jīng)上升到了與視覺傳達(dá)等同的高度。版面中的視覺趣味是通過視覺手法而形成的形式趣味，表現(xiàn)為視覺元素個體或排列組合關(guān)系中的全新樣式。版面趣味的營造可以是全方位，多角度的。常用手法有：改變視覺元素的形態(tài)、肌理等屬性；以視覺表現(xiàn)手法創(chuàng)造元素彼此間的視覺聯(lián)系；標(biāo)準(zhǔn)秩序和形式的對立。3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)拼貼的文本帶來的視覺趣味(WunderlichGert)3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)文字的虛實(shí)關(guān)系形成的視覺趣味(Boris)3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)剪刻的字體所帶來的視覺趣味(HenrykTomaszewski)3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)圖形化的字體所帶來的版面趣味3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)繁復(fù)的視覺符號所帶來的版面趣味3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)圖像與文本之間的意象聯(lián)系形成的視覺趣味（劉曉丹）3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)符號化的圖式帶來的版面趣味(RichardNiesse)局部文字版面中的視覺趣味(Hansje)3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)體現(xiàn)了數(shù)字時代特征的視覺趣味視覺趣味集中在具有偶然性的計(jì)算機(jī)語匯中(martinwodtili)3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)3.6視覺整體相似性——具有相似或相同屬性的視覺元素具有整體性。3編排設(shè)計(jì)的基本原理視覺整體鄰近性——空間位置上類似的物體被稱為臨近或接近的關(guān)系。連續(xù)性——連續(xù)性是指具有連續(xù)運(yùn)動或方向的視覺組織。閉合性——把具有內(nèi)在聯(lián)系的局部當(dāng)作一個整體的視覺形象來感知。編排設(shè)計(jì)具有相似手法的插圖使郵票具有了整體的視覺外觀相似的視覺圖像構(gòu)成了版面的整體視覺3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)同質(zhì)的處理手法帶來了版面視覺的整體性(PhilippeApeloig)3編排設(shè)計(jì)的基本原理編排設(shè)計(jì)相似的色彩和構(gòu)成方法構(gòu)成了系列海報(bào)的整體視覺3編排設(shè)計(jì)