第12章-web設(shè)計(jì)原則課件

第12章Web設(shè)計(jì)基礎(chǔ)1概況1

您的內(nèi)容打在這里，或者通過(guò)復(fù)制您的文本后。概況2

您的內(nèi)容打在這里，或者通過(guò)復(fù)制您的文本后。概況3

您的內(nèi)容打在這里，或者通過(guò)復(fù)制您的文本后。+++整體概況2主要內(nèi)容Web設(shè)計(jì)原則

網(wǎng)站結(jié)構(gòu)規(guī)劃網(wǎng)頁(yè)布局內(nèi)容設(shè)計(jì)

色彩設(shè)計(jì)

312.1Web設(shè)計(jì)原則Web設(shè)計(jì)師需要研究如何布局、處理字體和顏色以及空白的應(yīng)用。Web站點(diǎn)所要實(shí)現(xiàn)的目標(biāo)是設(shè)計(jì)的最終方向，而頁(yè)面的制作僅僅是設(shè)計(jì)的具體實(shí)現(xiàn)。Web站點(diǎn)的設(shè)計(jì)并不是通常認(rèn)為的網(wǎng)頁(yè)制作，而是一個(gè)融合了多種設(shè)計(jì)原則和設(shè)計(jì)過(guò)程的系統(tǒng)工程。412.1.1明確站點(diǎn)類型

新聞資訊類站點(diǎn)，如新浪，搜狐等大型門戶網(wǎng)站

512.1.1明確站點(diǎn)類型一些資訊和形象相結(jié)合的網(wǎng)站，如政府網(wǎng)等612.1.1明確站點(diǎn)類型形象類網(wǎng)站，比如商業(yè)企業(yè)的對(duì)外宣傳網(wǎng)站712.1.1明確站點(diǎn)類型除了上述網(wǎng)站類型外，還有一些網(wǎng)站具有更多的專業(yè)化設(shè)計(jì)。例如，瑞麗女性網(wǎng)812.1.1明確站點(diǎn)類型迪士尼網(wǎng)站充分考慮了兒童的特別，其設(shè)計(jì)非常活潑有趣9Web設(shè)計(jì)要求界面簡(jiǎn)潔簡(jiǎn)潔首先是對(duì)內(nèi)容文本進(jìn)行精煉化，保留關(guān)鍵信息。使用一個(gè)醒目的標(biāo)題，這個(gè)標(biāo)題常常采用圖形來(lái)表示，但圖形同樣要求簡(jiǎn)潔。另一種保持簡(jiǎn)潔的做法是限制所用的字體和顏色的數(shù)目。Web設(shè)計(jì)要求內(nèi)容明確使用清楚的消息標(biāo)識(shí)，確保用戶了解此頁(yè)面的上下文還可以使導(dǎo)航元素保持一致，并且對(duì)訪問(wèn)率最高的區(qū)域進(jìn)行明顯的標(biāo)記，是它們易于被用戶找到。界面上所有的元素都應(yīng)當(dāng)有明確的含義和用途，不要試圖用無(wú)關(guān)的圖片把界面裝點(diǎn)起來(lái)。除此之外，還要確保界面上每一個(gè)元素都能讓瀏覽者看到。12.1.2保持站點(diǎn)簡(jiǎn)潔明確

10頁(yè)面的結(jié)構(gòu)排版

通過(guò)定義一致的頁(yè)面模板，各個(gè)頁(yè)面使用相同的頁(yè)邊距；文本和圖形之間保持相同的間距；主要圖形、標(biāo)題或符號(hào)旁邊留下相同的空白。如果在第一頁(yè)的頂部放置了公司標(biāo)志，那么在其他各頁(yè)面都放上這一標(biāo)志，如果使用圖標(biāo)導(dǎo)航，則各個(gè)頁(yè)面應(yīng)當(dāng)使用相同的圖標(biāo)來(lái)創(chuàng)造出一種熟悉感。12.1.3頁(yè)面設(shè)計(jì)一致性

1112.1.3頁(yè)面設(shè)計(jì)一致性當(dāng)當(dāng)網(wǎng)的二級(jí)欄目圖書(shū)頻道和其首頁(yè)導(dǎo)航條保持一致。這樣使得這些頁(yè)面呈現(xiàn)出的視覺(jué)形象就是相互聯(lián)系，也使用戶感知到正在訪問(wèn)的頁(yè)面與此前訪問(wèn)的該網(wǎng)站的網(wǎng)頁(yè)是相互聯(lián)系的。

12注重用戶體驗(yàn)是Web站點(diǎn)設(shè)計(jì)應(yīng)考慮的一個(gè)重要方面，它要求把用戶放在第一位，設(shè)計(jì)時(shí)既要考慮用戶的共性，同時(shí)也要考慮他們的差異性。12.1.4注重用戶體驗(yàn)1312.1.4注重用戶體驗(yàn)研究用戶有效的導(dǎo)航和位置設(shè)計(jì)保持整個(gè)網(wǎng)站一致性的設(shè)計(jì)清晰準(zhǔn)確的內(nèi)容設(shè)計(jì)，便于用戶快速的獲得所需的任何信息

14Web站點(diǎn)由一組Web頁(yè)面組成，而且這些Web頁(yè)面具有一定的分層設(shè)計(jì)和組織。結(jié)構(gòu)設(shè)計(jì)要做的事情就是如何將內(nèi)容劃分為清晰合理的層次體系，建立起組成Web站點(diǎn)的各個(gè)頁(yè)面相互關(guān)聯(lián)關(guān)系，構(gòu)建一個(gè)組織優(yōu)良的網(wǎng)站整體。12.2網(wǎng)站結(jié)構(gòu)規(guī)劃1512.2.1網(wǎng)站欄目規(guī)劃好的欄目規(guī)劃結(jié)構(gòu)是網(wǎng)站內(nèi)容的總體概述，它利用導(dǎo)航的形式予以表現(xiàn)，指引瀏覽者在頁(yè)面間訪問(wèn)和跳轉(zhuǎn)。網(wǎng)站欄目的劃分需要遵循一些基本的原則。第一，欄目?jī)?nèi)容一定要緊扣主題第二，欄目的目錄設(shè)計(jì)要求簡(jiǎn)潔，結(jié)構(gòu)層次清晰，以方便網(wǎng)站的管理。第三，欄目的內(nèi)容要突出重點(diǎn)，對(duì)于用戶經(jīng)常要訪問(wèn)的內(nèi)容應(yīng)直接放入主欄目下。第四，為方便用戶使用，一般情況下訪問(wèn)者應(yīng)能夠在3-5次鼠標(biāo)點(diǎn)擊后可查詢到相關(guān)問(wèn)題。1612.2.2目錄結(jié)構(gòu)規(guī)劃下面是建立目錄結(jié)構(gòu)的一些建議不要將所有文件都存放在根目錄下。按欄目?jī)?nèi)容建立子目錄建立一些特定目錄存放公共信息。另外還有一些需要注意的目錄規(guī)劃原則。如目錄的層次不要太深，建議不要超過(guò)3層。不要使用中文目錄；使用中文目錄可能對(duì)網(wǎng)址的正確顯示造成困難。不要使用過(guò)長(zhǎng)的目錄；盡量使用意義明確的目錄，比如可以使用image，css，js，post，bbs等。首頁(yè)通常命名為index或者default，并應(yīng)放在根目錄下，而且每個(gè)欄目的首頁(yè)也應(yīng)遵循這樣的規(guī)則。17一個(gè)班級(jí)網(wǎng)站的目錄結(jié)構(gòu)規(guī)劃圖1812.3網(wǎng)頁(yè)布局布局設(shè)計(jì)原則布局設(shè)計(jì)類型布局設(shè)計(jì)元素布局設(shè)計(jì)技術(shù)1912.3.1布局設(shè)計(jì)原則網(wǎng)頁(yè)布局的內(nèi)容應(yīng)來(lái)源于需求，欄目的重要程度決定了網(wǎng)頁(yè)布局的形式網(wǎng)頁(yè)布局應(yīng)區(qū)分欄目模塊的重要程度。網(wǎng)頁(yè)布局必須尊重用戶習(xí)慣。2012.3.2布局設(shè)計(jì)類型網(wǎng)頁(yè)布局大致可分為“國(guó)”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型。21“國(guó)”字型網(wǎng)頁(yè)布局22拐角型23標(biāo)題正文型這種類型即最上面是標(biāo)題或類似的一些東西，下面是正文，比如一些文章頁(yè)面或注冊(cè)頁(yè)面等就是這種類型。24框架型框架型還分為左右框架，上下框架及綜合框架等?？蚣苄途W(wǎng)站的優(yōu)勢(shì)在于可以使網(wǎng)站的維護(hù)變的相對(duì)容易，但其不易被搜索引擎索引。框架結(jié)構(gòu)的一個(gè)共同特點(diǎn)就是瀏覽方便，速度快，但結(jié)構(gòu)變化不靈活，通常用于網(wǎng)站后臺(tái)管理頁(yè)面的布局；25封面型26Flash型2712.3.4布局設(shè)計(jì)技術(shù)table表格布局；DIV+CSS布局；框架布局。28表格布局技術(shù)表格布局的優(yōu)點(diǎn)：簡(jiǎn)單易用所見(jiàn)即所得設(shè)計(jì)速度快表格布局的缺陷：代碼可讀性差，可維護(hù)性差。網(wǎng)頁(yè)打開(kāi)速度較慢。后臺(tái)代碼太多，導(dǎo)致網(wǎng)站打開(kāi)速度慢。29DIV+CSS布局技術(shù)DIV+CSS布局優(yōu)點(diǎn)：Div用于搭建網(wǎng)站結(jié)構(gòu)、css用于創(chuàng)建網(wǎng)站表現(xiàn)，將表現(xiàn)與內(nèi)容分離，便于大型網(wǎng)站的協(xié)作開(kāi)發(fā)和維護(hù)。提高搜索引擎對(duì)網(wǎng)頁(yè)的索引效率。縮短改版時(shí)間。大大縮減頁(yè)面代碼，提高頁(yè)面瀏覽速度，縮減帶寬成本；強(qiáng)大的字體控制和排版能力。存在一定的缺點(diǎn)可觀性差操作繁瑣兼容性較差30框架布局技術(shù)框架由于不能進(jìn)行精確的元素定位，因此不能獨(dú)立完成頁(yè)面的布局，它常常和表格配合使用，先用框架將頁(yè)面劃分為幾個(gè)區(qū)域，然后再用表格實(shí)現(xiàn)各區(qū)域的精確局部，其常常用在網(wǎng)站系統(tǒng)的后臺(tái)頁(yè)面設(shè)計(jì)中。3112.4內(nèi)容設(shè)計(jì)對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)，最重要的就是信息內(nèi)容。信息的品質(zhì)與數(shù)量決定了人們對(duì)這個(gè)網(wǎng)頁(yè)的評(píng)價(jià)高低。一般而言，內(nèi)容通常有兩種表現(xiàn)類型：文本和多媒體。3212.4.1文本文字的格式化文字的格式化包括字號(hào)、字體、字間距、行距等。字號(hào)的大小可以用不同的方式表達(dá)，例如磅(Point)或像素(Pixel)。字體可以被網(wǎng)頁(yè)設(shè)計(jì)者用來(lái)更充分地體現(xiàn)設(shè)計(jì)中要表達(dá)的情感。行距就是在兩行文字之間間隔距離的大小，是從一行文字基線到另一行文字基線之間的距離。行距本身也是具有強(qiáng)表現(xiàn)力的設(shè)計(jì)語(yǔ)言。3312.4.1文本文字的強(qiáng)調(diào)文字的強(qiáng)調(diào)一般是對(duì)網(wǎng)站內(nèi)容信息的一個(gè)加強(qiáng)手法。通常有以下幾種行首的強(qiáng)調(diào)引文的強(qiáng)調(diào)個(gè)別文字的強(qiáng)調(diào)34文字的顏色文字的顏色在網(wǎng)頁(yè)設(shè)計(jì)中，顏色的運(yùn)用可以強(qiáng)調(diào)文字中特別的部分，還可以對(duì)整個(gè)文字內(nèi)容的情感表達(dá)產(chǎn)生影響。3512.4.2多媒體圖片格式GIF格式JPG格式PNG格式圖片使用原則要盡可能保證下載速度在網(wǎng)頁(yè)中所采用的每一張圖片最好加入Width、Height這兩個(gè)屬性，這樣會(huì)網(wǎng)頁(yè)數(shù)據(jù)下載過(guò)程更順暢。盡量將網(wǎng)站內(nèi)容進(jìn)行分類管理，盡量細(xì)化管理將這些大的圖片分割一下網(wǎng)頁(yè)底圖要簡(jiǎn)單明快3612.4.3內(nèi)容排版排版并僅僅做到整齊就足夠，還要有明確的分類，以及主題的適當(dāng)規(guī)劃。排版包括表格、框架的應(yīng)用、文字縮排、段落等等。兩端均齊居中排列左對(duì)齊或右對(duì)齊繞圖排列3712.4.3內(nèi)容排版在對(duì)內(nèi)容進(jìn)行排版上，需要注意以下幾個(gè)問(wèn)題：把關(guān)聯(lián)項(xiàng)在視覺(jué)上進(jìn)行分組創(chuàng)建視覺(jué)層次容易查找和閱讀的布局利用三分法，確定表現(xiàn)重點(diǎn)位置。3812.5色彩設(shè)計(jì)色彩是網(wǎng)站最重要的一個(gè)部分，色彩能夠呈現(xiàn)設(shè)計(jì)意圖、表達(dá)個(gè)性、對(duì)內(nèi)容進(jìn)行區(qū)分、布局和強(qiáng)調(diào)，一個(gè)網(wǎng)站設(shè)計(jì)成功與否，在某種程度上取決于設(shè)計(jì)者對(duì)色彩的運(yùn)用和搭配。39提問(wèn)與解答環(huán)節(jié)Questionsandanswers40結(jié)束語(yǔ)

CONCLUSION

感謝參與本課程，也感激大家對(duì)我們工作的支持與積極的參與。課程后會(huì)發(fā)放課程滿意度評(píng)估表，如果對(duì)