14界面設(shè)計(jì)-頁(yè)面布局設(shè)計(jì)的基本理論及Web界面常見的版式設(shè)計(jì)類型

頁(yè)面布局設(shè)計(jì)的基本理論及Web界面常見的版式設(shè)計(jì)類型天津電子信息職業(yè)技術(shù)學(xué)院界面設(shè)計(jì)知識(shí)要點(diǎn)頁(yè)面布局設(shè)計(jì)的基本理論Web界面常見的版式設(shè)計(jì)類型其他版式設(shè)計(jì)類型頁(yè)面布局設(shè)計(jì)的基本理論重點(diǎn)掌握第一部分頁(yè)面布局設(shè)計(jì)的基本理論格式塔原理格式塔心理學(xué)誕生于1912年，是由德國(guó)心理學(xué)家組成的研究小組試圖解釋人類視覺的工作原理。其中最基礎(chǔ)的發(fā)現(xiàn)是人類視覺是整體的；“形狀”和“圖形”在德語(yǔ)中是Gestalt，因此這些理論也稱做視覺感知的格式塔原理。

接近性（強(qiáng)調(diào)的是位置）相似性（強(qiáng)調(diào)的是內(nèi)容）連續(xù)性物體之間的相對(duì)距離會(huì)影響我們感知它是否以及如何組織在一起。互相靠近（相對(duì)于其它物體）的物體看起來(lái)屬于一組，而那些距離較遠(yuǎn)的則自動(dòng)劃為組外。如果其它因素相同，那么相似的物體看起來(lái)歸屬于一組。視覺傾向于感知連續(xù)的形式而不是離散的碎片。頁(yè)面布局設(shè)計(jì)的基本理論

封閉性對(duì)稱性主體/背景視覺系統(tǒng)自動(dòng)嘗試將敞開的圖形關(guān)閉起來(lái)，從而將其感知為完整的物體而不是分散的碎片。我們傾向于分解復(fù)雜的場(chǎng)景來(lái)降低復(fù)雜度。我們的大腦將視覺區(qū)域分為主體和背景。主體包括一個(gè)場(chǎng)景中占據(jù)我們主要注意力的所有元素，其余則是背景。當(dāng)物體重疊時(shí)我們習(xí)慣把小的那個(gè)看成是背景之上的主體。頁(yè)面布局設(shè)計(jì)的基本理論

…………共同命運(yùn)與接近性、相似性原理相關(guān)，一起運(yùn)動(dòng)的物體被感知為屬于一組或者是彼此相關(guān)的。頁(yè)面布局設(shè)計(jì)的基本理論頁(yè)面布局設(shè)計(jì)的基本理論網(wǎng)格系統(tǒng)網(wǎng)格系統(tǒng)（gridsystems），也叫“柵格系統(tǒng)”。網(wǎng)頁(yè)系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來(lái)，以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布?；A(chǔ)概念網(wǎng)格（Gird）：柵格系統(tǒng)的最小原子單位列、水槽（Column、Gutter）柵格總寬（Container）邊距（Margin）盒子/區(qū)域頁(yè)面布局設(shè)計(jì)的基本理論網(wǎng)格：柵格系統(tǒng)的最小原子單位柵格是由一系列規(guī)律的小網(wǎng)格組成的網(wǎng)格系統(tǒng)，網(wǎng)格構(gòu)成頁(yè)面的最小單位。通常，在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常使用8作為柵格的最小步進(jìn)單位。頁(yè)面布局設(shè)計(jì)的基本理論列、水槽（Column、Gutter）列（Column）：列是柵格的數(shù)量單位，通常設(shè)定柵格數(shù)量說(shuō)的就是列的數(shù)量槽（Gutter）：頁(yè)面內(nèi)容的間距，槽的數(shù)值越大，頁(yè)面留白越多，視覺效果越松散；槽通常設(shè)為定值。頁(yè)面布局設(shè)計(jì)的基本理論柵格寬度（Container）頁(yè)面柵格系統(tǒng)的總寬度。邊距（Margin）柵格外邊距，與屏寬保持一定的安全距離。頁(yè)面布局設(shè)計(jì)的基本理論盒子/區(qū)域建立好基礎(chǔ)柵格之后，一塊內(nèi)容通常會(huì)占用幾個(gè)欄和列的寬度，我們把這個(gè)區(qū)域理解為內(nèi)容盒子，用于承載一個(gè)區(qū)域的內(nèi)容。頁(yè)面布局設(shè)計(jì)的基本理論如何搭建柵格系統(tǒng)1、確定屏幕尺寸，確定安全范圍2、確定關(guān)鍵數(shù)據(jù)：列的數(shù)量、水槽的寬度頁(yè)面布局設(shè)計(jì)的基本理論如何搭建柵格系統(tǒng)假設(shè)內(nèi)容區(qū)寬度為W（Weight），列寬為C（Column），列數(shù)為n，槽為定寬G，可以得出：W=C*n。由于槽不可以放置內(nèi)容，可見內(nèi)容區(qū)為：W=C*n-G。舉例：我們?yōu)橐粋€(gè)屏寬1440的項(xiàng)目劃分柵格，首先確定內(nèi)容區(qū)寬度為1440，24列，槽為定值16；那么可以得出列寬60，欄為48。內(nèi)容區(qū)從水槽開始到水槽結(jié)束頁(yè)面布局設(shè)計(jì)的基本理論網(wǎng)格系統(tǒng)的應(yīng)用1、橫向劃分頁(yè)面布局設(shè)計(jì)的基本理論網(wǎng)格系統(tǒng)的應(yīng)用2、縱向劃分頁(yè)面布局設(shè)計(jì)的基本理論費(fèi)茨定律（Fitts’Law）費(fèi)茨定律是由保羅·費(fèi)茨（PaulM.Fitts）博士，在對(duì)人類操作過(guò)程中的運(yùn)動(dòng)特征、運(yùn)動(dòng)時(shí)間、運(yùn)動(dòng)范圍和運(yùn)動(dòng)準(zhǔn)確性進(jìn)行研究之后1954年提出的；該定律被用來(lái)預(yù)測(cè)從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間的數(shù)學(xué)模型，在人機(jī)交互（HCI）和設(shè)計(jì)領(lǐng)域的影響卻最為廣泛和深遠(yuǎn)。

…………費(fèi)茨定律（Fitts’Law）在設(shè)計(jì)中的應(yīng)用1、按鈕等可點(diǎn)擊區(qū)域在合理的范圍之內(nèi)越大越容易點(diǎn)擊。頁(yè)面布局設(shè)計(jì)的基本理論

…………費(fèi)茨定律（Fitts’Law）在設(shè)計(jì)中的應(yīng)用2、不管我們操作移動(dòng)了多遠(yuǎn)，鼠標(biāo)最終會(huì)停在屏幕的邊緣，并定位到按鈕或菜單的上面。頁(yè)面布局設(shè)計(jì)的基本理論

…………費(fèi)茨定律（Fitts’Law）在設(shè)計(jì)中的應(yīng)用3、出現(xiàn)在用戶正在操作的對(duì)象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開得更快。頁(yè)面布局設(shè)計(jì)的基本理論頁(yè)面布局設(shè)計(jì)的基本理論?？硕桑℉ick’sLaw）?？硕芍傅氖牵阂粋€(gè)人面臨的選擇越多，所需要作出決定的時(shí)間就越長(zhǎng)。

?？硕桑℉ick'sLaw）在設(shè)計(jì)中的應(yīng)用設(shè)計(jì)中給用戶盡量少的選擇，減輕用戶的決策成本。頁(yè)面布局設(shè)計(jì)的基本理論頁(yè)面布局設(shè)計(jì)的基本理論7±2法則1956年喬治米勒對(duì)短時(shí)記憶能力進(jìn)行了定量研究，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有7（±2）項(xiàng)信息塊，在記憶了5-9項(xiàng)信息后人類的頭腦就開始出錯(cuò)。7±2法則在設(shè)計(jì)中的應(yīng)用1、PC端導(dǎo)航或選項(xiàng)卡盡量不要超過(guò)9個(gè)，應(yīng)用的選項(xiàng)卡不會(huì)超過(guò)5個(gè)。頁(yè)面布局設(shè)計(jì)的基本理論7±2法則在設(shè)計(jì)中的應(yīng)用2、如果導(dǎo)航或選項(xiàng)卡內(nèi)容很多，可以用一個(gè)層級(jí)結(jié)構(gòu)來(lái)展示各段及其子段，并注意其深廣度的平衡。頁(yè)面布局設(shè)計(jì)的基本理論7±2法則在設(shè)計(jì)中的應(yīng)用3、把大塊整段的信息分割成各個(gè)小段，并顯著標(biāo)記每個(gè)信息段和子段，以便清晰的確認(rèn)各自的內(nèi)容。頁(yè)面布局設(shè)計(jì)的基本理論頁(yè)面布局設(shè)計(jì)的基本理論Tesler’sLaw泰思勒定律（復(fù)雜性守恒定律）由LarryTesler于1984年提出，也稱泰斯勒定律（Tesler’sLaw）。該定律認(rèn)為每一個(gè)過(guò)程都有其固有的復(fù)雜性，存在一個(gè)臨界點(diǎn)，超過(guò)了這個(gè)點(diǎn)過(guò)程就不能再簡(jiǎn)化了，只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方。頁(yè)面布局設(shè)計(jì)的基本理論復(fù)雜度守恒定律對(duì)于設(shè)計(jì)的價(jià)值每個(gè)應(yīng)用程序都具有其內(nèi)在的、無(wú)法簡(jiǎn)化的復(fù)雜度，只能設(shè)法調(diào)整、平衡。這一觀點(diǎn)主要被應(yīng)用在交互設(shè)計(jì)領(lǐng)域。頁(yè)面布局設(shè)計(jì)的基本理論奧卡姆剃刀原理（Occam’sRazor）奧卡姆剃刀定律又稱「奧康的剃刀」，它是由14世紀(jì)邏輯學(xué)家奧卡姆威廉提出。這個(gè)原理稱為「如無(wú)必要，勿增實(shí)體」，即「簡(jiǎn)單有效原理」。奧卡姆剃刀原理在設(shè)計(jì)中的應(yīng)用方法1、只放置必要的東西頁(yè)面布局設(shè)計(jì)的基本理論奧卡姆剃刀原理在設(shè)計(jì)中的應(yīng)用方法2、減少點(diǎn)擊次數(shù)頁(yè)面布局設(shè)計(jì)的基本理論奧卡姆剃刀原理在設(shè)計(jì)中的應(yīng)用方法3、減少段落個(gè)數(shù)頁(yè)面布局設(shè)計(jì)的基本理論奧卡姆剃刀原理在設(shè)計(jì)中的應(yīng)用方法4、“外婆”規(guī)則頁(yè)面布局設(shè)計(jì)的基本理論奧卡姆剃刀原理在設(shè)計(jì)中的應(yīng)用方法5、給予更少的選項(xiàng)頁(yè)面布局設(shè)計(jì)的基本理論Web界面常見的版式設(shè)計(jì)類型重點(diǎn)掌握版式設(shè)計(jì)

版式設(shè)計(jì)是指設(shè)計(jì)人員根據(jù)設(shè)計(jì)主題和視覺需求，在預(yù)先設(shè)定好的有限版面內(nèi)，運(yùn)用造型要素和形式原則，根據(jù)特定主題與內(nèi)容的需要，將文字、圖片（圖形）及色彩等視覺傳達(dá)信息要素進(jìn)行有組織、有目的的組合排列的設(shè)計(jì)行為與過(guò)程。實(shí)際上，它不僅是一種技能，更實(shí)現(xiàn)了技術(shù)與藝術(shù)的統(tǒng)一。版式設(shè)計(jì)的范圍，涉及到刊物、畫冊(cè)、和網(wǎng)頁(yè)頁(yè)面等平面設(shè)計(jì)各個(gè)領(lǐng)域。Web界面常見的版式設(shè)計(jì)類型常見的web界面版式設(shè)計(jì)類型國(guó)字型布局匡字型布局三字型布局川字型布局海報(bào)型布局標(biāo)題文本型布局綜合型布局Web界面常見的版式設(shè)計(jì)類型國(guó)字型布局常見的web界面版式設(shè)計(jì)類型匡字型布局三字型布局川字型布局海報(bào)型布局標(biāo)題文本型布局綜合型布局Web界面常見的版式設(shè)計(jì)類型國(guó)字型布局常見的web界面版式設(shè)計(jì)類型匡字型布局三字型布局川字型布局海報(bào)型布局標(biāo)題文本型布局綜合型布局Web界面常見的版式設(shè)計(jì)類型國(guó)字型布局常見的web界面版式設(shè)計(jì)類型匡字型布局三字型布局川字型布局海報(bào)型布局標(biāo)題文本型布局綜合型布局Web界面常見的版式設(shè)計(jì)類型國(guó)字型布局常見的web界面版式設(shè)計(jì)類型匡字型布局三字型布局川字型布局海報(bào)型布局標(biāo)題文本型布局綜合型布局Web界面常見的版式設(shè)計(jì)類型國(guó)字型布局常見的web界面版式設(shè)計(jì)類型匡字型布局三字型布局川字型布局海報(bào)型布局標(biāo)題文本型布局綜合型布局Web界面常見的版式設(shè)計(jì)類型國(guó)字型布局常見的web界面版式設(shè)計(jì)類型匡字型布局三字型布局川字型布局海報(bào)型布局標(biāo)題文本型布局綜合型布局其他版式設(shè)計(jì)類型難度：一般了解第三部分其他版式設(shè)計(jì)類型骨骼型規(guī)范的、理性的分割方法。滿版型版面以圖像充滿整版其他版式設(shè)計(jì)類型上下分割型整個(gè)版面分成上下兩部分左右分割型整個(gè)版面分割為左