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

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

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

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

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

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

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

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

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

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