3.8 界面設(shè)計(jì)-頁(yè)面布局設(shè)計(jì)的基本理論及Web界面常見(jiàn)的版式設(shè)計(jì)類型-備課筆記

編號(hào)14-01【web產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)制作】編號(hào)14-01學(xué)習(xí)任務(wù)八、頁(yè)面布局設(shè)計(jì)的基本理論及Web界面常見(jiàn)的版式設(shè)計(jì)類型一、課程說(shuō)明與要求1.課程說(shuō)明網(wǎng)頁(yè)是網(wǎng)站構(gòu)成的基本元素。那么，網(wǎng)頁(yè)的精彩與否的因素是什么呢?色彩的搭配、文字的變化、圖片的處理等，這些當(dāng)然是不可忽略的因素，除了這些，還有一個(gè)非常重要的因素-----網(wǎng)頁(yè)的布局。本節(jié)課我們就有關(guān)網(wǎng)頁(yè)布局講解一下。二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程授課對(duì)象為藝術(shù)專業(yè)學(xué)生，很多同學(xué)是沒(méi)有接觸過(guò)網(wǎng)頁(yè)交互設(shè)計(jì)的頁(yè)面布局，并不了解它的一些基礎(chǔ)知識(shí)和理論，普遍認(rèn)知不強(qiáng)，另一方面，學(xué)生對(duì)新興的事物接受比較快，對(duì)所選擇的專業(yè)感興趣，獲取知識(shí)的主動(dòng)性較強(qiáng)。2.課程導(dǎo)入我們學(xué)習(xí)頁(yè)面布局，首先要了解網(wǎng)頁(yè)布局設(shè)計(jì)的基本理論、頁(yè)面布局的版式設(shè)計(jì)都有哪些常用的類型，我們幾乎可以在任何地方應(yīng)用網(wǎng)頁(yè)布局的基本理論，比如頁(yè)面中的“導(dǎo)航、卡片、正文和分頁(yè)”等等，就是格式塔原理中的接近原則的一個(gè)體現(xiàn)。三、理論知識(shí)講解（一）頁(yè)面布局設(shè)計(jì)的基本理論………【難點(diǎn)】頁(yè)面布局設(shè)計(jì)的基本理論包括：格式塔原理、網(wǎng)格系統(tǒng)、7+2法則、席克定律、費(fèi)茨定律、奧卡姆剃刀原理、復(fù)雜守恒定律等，這些理論我們會(huì)一一闡述，對(duì)于“為什么要這樣進(jìn)行設(shè)計(jì)的問(wèn)題？”我們應(yīng)該會(huì)有些許答案。1.格式塔原理格式塔心理學(xué)誕生于1912年，是由德國(guó)心理學(xué)家組成的研究小組試圖解釋人類視覺(jué)的工作原理。其中最基礎(chǔ)的發(fā)現(xiàn)是人類視覺(jué)是整體的；“形狀”和“圖形”在德語(yǔ)中是Gestalt，因此這些理論也稱做視覺(jué)感知的格式塔原理。在高校領(lǐng)域，尤其對(duì)于藝術(shù)類院校學(xué)生而言，知識(shí)性與技術(shù)性、藝術(shù)性并存，注重學(xué)生個(gè)性化的培養(yǎng)，注重創(chuàng)新意識(shí)和創(chuàng)造能力的訓(xùn)練的課程更是不容忽視的一個(gè)環(huán)節(jié)。將格式塔心理學(xué)基本理論引入本次課程設(shè)計(jì)，目的是希望界面交互設(shè)計(jì)向理性化發(fā)展，要求在設(shè)計(jì)時(shí)遵照人類的認(rèn)知規(guī)律，并且將這些規(guī)律正確的應(yīng)用到設(shè)計(jì)實(shí)踐中。…………【思政融入（與時(shí)俱進(jìn)、尊重科學(xué)的精神）】編號(hào)14-02編號(hào)14-02（1）接近性主要指的位置的接近，物體之間的相對(duì)距離會(huì)影響我們感知它是否以及如何組織在一起。在UI設(shè)計(jì)中使用接近原則來(lái)組合類似的信息、組織內(nèi)容、調(diào)整布局。正確使用將對(duì)視覺(jué)傳達(dá)和用戶體驗(yàn)產(chǎn)生積極影響。我們幾乎可以在任何地方應(yīng)用接近原則，從“導(dǎo)航、卡片、正文和分頁(yè)”等等。（2）相似性主要指內(nèi)容的相似，如果其它因素相同，那么相似的物體看起來(lái)歸屬于一組。我們傾向于將相似的元素視為一個(gè)分組，相似原則可以幫助我們組織和分類組中的對(duì)象，并將它們與特定的含義或功能相關(guān)聯(lián)。我們可以在“導(dǎo)航、鏈接、按鈕、標(biāo)題、號(hào)召性用語(yǔ)”等方面運(yùn)用相似原則。編號(hào)14-03編號(hào)14-03（3）連續(xù)性視覺(jué)傾向于感知連續(xù)的形式而不是離散的碎片。連續(xù)線后面的元素被視為分組。線段越平滑，我們就越看到它們的統(tǒng)一形狀，我們的思想更喜歡阻力最小的道路。行和列的線性排列是連續(xù)性的良好示例。我們可以在“菜單和子菜單，列表，輪播，服務(wù)或流程/進(jìn)度顯示”中使用它們。（4）封閉性視覺(jué)系統(tǒng)自動(dòng)嘗試將敞開(kāi)的圖形關(guān)閉起來(lái)，從而將其感知為完整的物體而不是分散的碎片。通過(guò)這種方式，我們可以減少傳遞信息所需的元素?cái)?shù)量，降低復(fù)雜性并使設(shè)計(jì)更具吸引力。閉合可以幫助我們最小化視覺(jué)噪音并傳達(dá)信息，在相當(dāng)小的空間內(nèi)強(qiáng)化概念。我們可以在“圖標(biāo)以及圖形設(shè)計(jì)中”使用閉合原則，可以簡(jiǎn)單快速且清晰的傳達(dá)想表達(dá)的意義。編號(hào)14-04編號(hào)14-04（5）對(duì)稱性我們傾向于分解復(fù)雜的場(chǎng)景來(lái)降低復(fù)雜度。無(wú)論距離遠(yuǎn)近，對(duì)稱元素都會(huì)被認(rèn)為屬于一體，給我們一種堅(jiān)固和有序的感覺(jué)。我們的眼睛尋求這些屬性以及秩序和穩(wěn)定，因此對(duì)稱對(duì)快速有效地傳遞信息非常有用。對(duì)稱感覺(jué)很舒服，幫助我們專注于重要的事情。對(duì)稱原則通常用于“產(chǎn)品展示，列表，導(dǎo)航，banner和任何內(nèi)容豐富的頁(yè)面”。（6）主體/背景我們的大腦將視覺(jué)區(qū)域分為主體和背景。主體包括一個(gè)場(chǎng)景中占據(jù)我們主要注意力的所有元素，其余則是背景。當(dāng)物體重疊時(shí)我們習(xí)慣把小的那個(gè)看成是背景之上的主體。編號(hào)14-05（7）共同命運(yùn)編號(hào)14-05與接近性、相似性原理相關(guān)，一起運(yùn)動(dòng)的物體被感知為屬于一組或者是彼此相關(guān)的。不管這些元素相距多遠(yuǎn)，或者它們看起來(lái)有多么不同，如果它們一起移動(dòng)或變化，它們就被認(rèn)為是相關(guān)的。這種效果可以發(fā)生，即使運(yùn)動(dòng)是隱含的。我們可以在可擴(kuò)展菜單，產(chǎn)品滑塊，視差滾動(dòng)和滑動(dòng)指示器中使用共同命運(yùn)原則?！净?dòng)討論，引導(dǎo)學(xué)生感受格式塔原理的接近性、相似性、對(duì)稱性等在網(wǎng)頁(yè)的應(yīng)用，教師做分類總結(jié)】2.網(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è)中的版面布局以及信息分布。（1）網(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)單位。編號(hào)14-06（2）列、水槽編號(hào)14-06列（Column）：列是柵格的數(shù)量單位，通常設(shè)定柵格數(shù)量說(shuō)的就是列的數(shù)量槽（Gutter）：頁(yè)面內(nèi)容的間距，槽的數(shù)值越大，頁(yè)面留白越多，視覺(jué)效果越松散；槽通常設(shè)為定值。（3）柵格寬度、邊距柵格寬度：頁(yè)面柵格系統(tǒng)的總寬度。邊距：柵格外邊距，與屏寬保持一定的安全距離。（4）盒子/區(qū)域建立好基礎(chǔ)柵格之后，一塊內(nèi)容通常會(huì)占用幾個(gè)欄和列的寬度，我們把這個(gè)區(qū)域理解為內(nèi)容盒子，用于承載一個(gè)區(qū)域的內(nèi)容。編號(hào)14-07（5）如何搭建柵格系統(tǒng)編號(hào)14-07●確定屏幕尺寸，確定安全范圍●確定關(guān)鍵數(shù)據(jù)：列的數(shù)量、水槽的寬度3.費(fèi)茨定律費(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)?！褓M(fèi)茨定律在交互設(shè)計(jì)中的應(yīng)用1）按鈕等可點(diǎn)擊區(qū)域在合理的范圍之內(nèi)越大越容易點(diǎn)擊。2）不管我們操作移動(dòng)了多遠(yuǎn)，鼠標(biāo)最終會(huì)停在屏幕的邊緣，并定位到按鈕或菜單的上面。3）出現(xiàn)在用戶正在操作的對(duì)象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開(kāi)得更快，因?yàn)椴恍枰苿?dòng)到屏幕的其他位置。4.?？硕上？硕芍傅氖牵阂粋€(gè)人面臨的選擇越多，所需要作出決定的時(shí)間就越長(zhǎng)。設(shè)計(jì)中給用戶盡量少的選擇，減輕用戶的決策成本。編號(hào)14-085.7±2法則編號(hào)14-081956年喬治米勒對(duì)短時(shí)記憶能力進(jìn)行了定量研究，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有7（±2）項(xiàng)信息塊，在記憶了5-9項(xiàng)信息后人類的頭腦就開(kāi)始出錯(cuò)。6.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è)地方。每個(gè)應(yīng)用程序都具有其內(nèi)在的、無(wú)法簡(jiǎn)化的復(fù)雜度，只能設(shè)法調(diào)整、平衡。這一觀點(diǎn)主要被應(yīng)用在交互設(shè)計(jì)領(lǐng)域。7.奧卡姆剃刀原理（Occam’sRazor）奧卡姆剃刀定律又稱“奧康的剃刀”，它是由14世紀(jì)邏輯學(xué)家?jiàn)W卡姆威廉提出。這個(gè)原理稱為「如無(wú)必要，勿增實(shí)體」，即「簡(jiǎn)單有效原理」。在交互設(shè)計(jì)中的應(yīng)用方法：只放置必要的東西減少點(diǎn)擊次數(shù)減少段落個(gè)數(shù)外婆規(guī)則給予更少的選項(xiàng)【課后思考：第一，格式塔原理包含的幾點(diǎn)主要原則，二，網(wǎng)格系統(tǒng)由哪些定義組成】（二）web界面常見(jiàn)的版式設(shè)計(jì)類型………【重點(diǎn)】版式設(shè)計(jì)是指設(shè)計(jì)人員根據(jù)設(shè)計(jì)主題和視覺(jué)需求，在預(yù)先設(shè)定好的有限版面內(nèi)，運(yùn)用造型要素和形式原則，根據(jù)特定主題與內(nèi)容的需要，將文字、圖片（圖形）及色彩等視覺(jué)傳達(dá)信息要素進(jìn)行有組織、有目的的組合排列的設(shè)計(jì)行為與過(guò)程。編號(hào)14-091.國(guó)字型編號(hào)14-09一般大型的門戶網(wǎng)站（騰訊、新浪、搜狐）都會(huì)采用這種方式，因?yàn)樗休d的內(nèi)容很多，相對(duì)來(lái)說(shuō)還是很有條理的。2.匡字型去掉了國(guó)字型布局的右邊部分，給主內(nèi)容區(qū)釋放了空間，一般在政府機(jī)關(guān)類網(wǎng)站或?qū)W校學(xué)術(shù)類網(wǎng)站會(huì)有這樣的需求。3.三字型將網(wǎng)頁(yè)整體分割為三部分，色塊中大多放置廣告條與更新的版權(quán)提示。編號(hào)14-10編號(hào)14-104.川字型整個(gè)頁(yè)面在垂直方向分為三列，網(wǎng)站的內(nèi)容按欄目分布在這三列中，最大限度的突出主頁(yè)的索引功能。5.海報(bào)型很多企業(yè)官網(wǎng)都會(huì)采用這種，顯得簡(jiǎn)單大氣上檔次的感覺(jué)，還有首屏也可以放些視頻來(lái)播放。6.標(biāo)題文本型包含標(biāo)題以及正文的內(nèi)容，這種類型頁(yè)面最上面往往是標(biāo)題或類似的一些內(nèi)容，下面是正文，比如一編號(hào)14-11些文章頁(yè)面。編號(hào)14-117.綜合型布局是上述幾種類型的綜合運(yùn)用，以橫排為主，布局比較靈活?！净?dòng)討論，引導(dǎo)學(xué)生感受不同網(wǎng)頁(yè)版式設(shè)計(jì)，教師做分類總結(jié)】（三）其他版式設(shè)計(jì)構(gòu)圖類型版式設(shè)計(jì)的原則：主題鮮明突出；形式與內(nèi)容統(tǒng)一；強(qiáng)化整體布局按照主從關(guān)系的順序，使放大的主體形象在視覺(jué)中心，以此表達(dá)主題思想。版式設(shè)計(jì)的構(gòu)圖類型大致可以分為：骨骼型、滿版型、上下分割、左右分割、中軸型、曲線型、傾斜型、對(duì)稱型、重心型、自由型。四、實(shí)踐技能訓(xùn)練編號(hào)14-12（一）布置訓(xùn)練任務(wù)編號(hào)14-12任務(wù)1：分析網(wǎng)頁(yè)產(chǎn)品對(duì)應(yīng)的版式設(shè)計(jì)類型，使用了哪些布局設(shè)計(jì)原理任務(wù)2：利用手機(jī)、電腦等工具，搜集網(wǎng)頁(yè)設(shè)計(jì)，并進(jìn)行分類，屬于版式設(shè)計(jì)的哪種類型。任務(wù)3：分析格式塔原理的幾點(diǎn)重要原則在網(wǎng)頁(yè)中的應(yīng)用（二）實(shí)戰(zhàn)項(xiàng)目案例運(yùn)用講解的布局基本理論，以及根據(jù)交互設(shè)計(jì)的需求對(duì)web端電商平臺(tái)的產(chǎn)品設(shè)計(jì)的首頁(yè)根據(jù)自己的理解進(jìn)行布局設(shè)計(jì)。教師重點(diǎn)指導(dǎo)：網(wǎng)頁(yè)布局的基本理論的應(yīng)用?！緦?shí)訓(xùn)指導(dǎo)：學(xué)生初次接觸布局設(shè)計(jì)的理論知識(shí)進(jìn)行設(shè)計(jì)實(shí)踐，教師應(yīng)多引導(dǎo)，幫助學(xué)生根據(jù)交互需求完成案例首頁(yè)的布局設(shè)計(jì)?！课?、課堂總結(jié)今天，我們主要學(xué)習(xí)了頁(yè)面布局設(shè)計(jì)、常見(jiàn)的版式設(shè)計(jì)類型等相關(guān)理論，也結(jié)合交互設(shè)計(jì)案例相關(guān)理論做了一些練習(xí)，想必同學(xué)們通過(guò)練習(xí)對(duì)網(wǎng)頁(yè)版式設(shè)計(jì)的種類、常用的布局理論有了一定的了解和掌握。希望同學(xué)們課后繼續(xù)對(duì)你所接觸到的相關(guān)作品或產(chǎn)品，用專業(yè)的眼光，分析網(wǎng)頁(yè)的布局理論在交互設(shè)計(jì)中的應(yīng)用，這樣有助于你們對(duì)知識(shí)點(diǎn)的更深入的