網(wǎng)頁設(shè)計PPT完整全套教學(xué)課件

第1章初識網(wǎng)頁設(shè)計本章介紹：隨著互聯(lián)網(wǎng)市場的發(fā)展及成熟，企業(yè)對于網(wǎng)頁設(shè)計從業(yè)人員的要求已經(jīng)趨向復(fù)合型，因此想要從事網(wǎng)頁設(shè)計行業(yè)的人員需要系統(tǒng)地學(xué)習(xí)與更新自己的知識體系。本章對網(wǎng)頁設(shè)計的相關(guān)概念、網(wǎng)站常用的網(wǎng)絡(luò)術(shù)語、網(wǎng)頁設(shè)計的基本類型、特點表現(xiàn)、常用軟件以及項目流程進(jìn)行系統(tǒng)講解。通過本章的學(xué)習(xí)，讀者可以對網(wǎng)頁設(shè)計設(shè)計有一個系統(tǒng)的認(rèn)識，有助于高效便利地進(jìn)行后續(xù)的網(wǎng)頁設(shè)計工作。掌握網(wǎng)頁設(shè)計的相關(guān)概念明確網(wǎng)頁設(shè)計的基本類型了解網(wǎng)頁設(shè)計的特點表現(xiàn)學(xué)習(xí)目標(biāo)1.網(wǎng)站的概念網(wǎng)站英文名稱“Website”，簡稱“Web”，是由多個網(wǎng)頁用鏈接的方式組成，網(wǎng)站被存儲在指定的網(wǎng)站空間，用戶可以通過輸入網(wǎng)頁瀏覽器的網(wǎng)址來訪問網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。1.1

網(wǎng)頁設(shè)計的相關(guān)概念網(wǎng)站效果圖2.網(wǎng)頁的概念網(wǎng)頁（WebPage）是網(wǎng)絡(luò)中的一“頁”，是構(gòu)成網(wǎng)站的基本元素。網(wǎng)頁的語言格式是超文本標(biāo)記語言格式，文件擴(kuò)展名為.html或.htm。當(dāng)用戶在網(wǎng)頁瀏覽器輸入網(wǎng)址后，網(wǎng)頁文件會被傳送到用戶的計算機(jī)，然后再通過瀏覽器將網(wǎng)頁中的元素按照特定的排列方式顯示，形成平時看到的網(wǎng)頁。1.1

網(wǎng)頁設(shè)計的相關(guān)概念網(wǎng)頁效果圖3.網(wǎng)頁設(shè)計的概念網(wǎng)頁設(shè)計英文名稱“WebDesign”，又稱“WebUIdesign”，簡稱“WUI”，主要是根據(jù)企業(yè)希望向用戶傳遞的信息，進(jìn)行網(wǎng)站功能策劃，然后從事的頁面設(shè)計美化工作，網(wǎng)頁設(shè)計涵蓋了制作和維護(hù)網(wǎng)站的許多不同的技能和學(xué)科，包含信息架構(gòu)設(shè)計、網(wǎng)頁圖形設(shè)計、用戶界面設(shè)計、用戶體驗設(shè)計，品牌標(biāo)識設(shè)計和Banner設(shè)計等。1.1

網(wǎng)頁設(shè)計的相關(guān)概念網(wǎng)頁效果圖1.域名域名，英文全稱“DomainName”，是用戶瀏覽網(wǎng)站時，在瀏覽器地址欄中輸入的網(wǎng)址，常見的域名后綴有.com、.cn、.top、.top、.xyz、以及.edu等。域名后綴為.com的網(wǎng)站。1.2網(wǎng)站常用的相關(guān)術(shù)語域名展示圖2.網(wǎng)站空間網(wǎng)站空間，英文全稱“WebSitehost”，又稱為虛擬主機(jī)空間，是存放網(wǎng)站內(nèi)容的空間。1.2網(wǎng)站常用的相關(guān)術(shù)語網(wǎng)站空間3.HTTPHTTP，英文全稱“HyperTextTransferProtocol”，中文稱為“超文本傳輸協(xié)議”，是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議，所有的WWW文件都必須遵守這個標(biāo)準(zhǔn)。1.2網(wǎng)站常用的相關(guān)術(shù)語4.FTPFTP，英文全稱“FileTransferProtocol”，中文稱為“文件傳輸協(xié)議”，是用于網(wǎng)絡(luò)上進(jìn)行文件傳輸?shù)挠脩艏墔f(xié)議。運(yùn)用FTP傳輸工具FileZilla可以將網(wǎng)站傳輸?shù)骄W(wǎng)絡(luò)上，提供訪問。1.2網(wǎng)站常用的相關(guān)術(shù)語FTP界面5.超鏈接超鏈接本質(zhì)是網(wǎng)站中不同元素之間的連接，只有各個網(wǎng)頁鏈接在一起，才能真正構(gòu)成一個網(wǎng)站，用戶則可以通過網(wǎng)頁中的超鏈接進(jìn)行網(wǎng)絡(luò)暢游。其中導(dǎo)航欄是網(wǎng)站中最明顯的超鏈接。1.2網(wǎng)站常用的相關(guān)術(shù)語超鏈接界面6.站點站點，英文全稱“Site”，一個站點是一個網(wǎng)站所有內(nèi)容所存放的文件夾,方便管理網(wǎng)站的內(nèi)容。1.2網(wǎng)站常用的相關(guān)術(shù)語1.功能型網(wǎng)頁功能型網(wǎng)頁是實現(xiàn)功能的網(wǎng)頁類型，在視覺效果之上更注重交互操作的體驗，常見于電商平臺網(wǎng)站、應(yīng)用網(wǎng)站和管理系統(tǒng)網(wǎng)站。1.3網(wǎng)頁設(shè)計的基本類型

淘寶網(wǎng)頁QQ音樂網(wǎng)頁2.展示型網(wǎng)頁展示型網(wǎng)頁即展示商業(yè)公司、政府單位、非贏利機(jī)構(gòu)等組織形象的網(wǎng)頁，常見于官方展示型網(wǎng)站。1.3網(wǎng)頁設(shè)計的基本類型

北京博物館網(wǎng)頁

中糧網(wǎng)頁3.信息型網(wǎng)頁信息型網(wǎng)頁即信息集合的網(wǎng)頁，向用戶提供專業(yè)的行業(yè)訊息，常見于門戶網(wǎng)站和專業(yè)網(wǎng)站。1.3網(wǎng)頁設(shè)計的基本類型

網(wǎng)易嚴(yán)選網(wǎng)頁

視覺中國網(wǎng)頁網(wǎng)頁設(shè)計雖然也需要字體設(shè)計和版式設(shè)計，但和傳統(tǒng)的平面設(shè)計還是有很大的不同。具體表現(xiàn)在1.媒體綜合2.藝術(shù)獨(dú)特3.技術(shù)多元4.交互豐富1.4網(wǎng)頁設(shè)計的特點表現(xiàn)1.使用軟件進(jìn)行網(wǎng)頁設(shè)計的常用軟件包括思維導(dǎo)圖、交互設(shè)計、界面設(shè)計、動畫效果以及代碼編輯這五類。1.5網(wǎng)頁設(shè)計的必備技能網(wǎng)頁設(shè)計的常用軟件2.腳本語言網(wǎng)站的實現(xiàn)需要HTML、CSS和JavaScript三種技術(shù)。其中HTML負(fù)責(zé)定義網(wǎng)頁內(nèi)容的含義和結(jié)構(gòu)，CSS負(fù)責(zé)描述網(wǎng)頁的表現(xiàn)與展示效果，JavaScript負(fù)責(zé)處理網(wǎng)頁的功能與行為。而HTML5和CSS3分別是最新的HTML標(biāo)準(zhǔn)和CSS技術(shù)的升級版本。1.5網(wǎng)頁設(shè)計的必備技能

HTML技術(shù)

CSS技術(shù)

JavaScript技術(shù)掌握網(wǎng)頁設(shè)計的項目流程，是網(wǎng)頁設(shè)計師的重要能力。網(wǎng)頁設(shè)計的項目流程可以按照網(wǎng)站策劃、資料搜集、交互設(shè)計、界面設(shè)計、網(wǎng)站制作、測試發(fā)布的步驟來進(jìn)行。1.6網(wǎng)頁設(shè)計的項目流程第2章網(wǎng)頁設(shè)計基本規(guī)范本章介紹：學(xué)習(xí)網(wǎng)頁設(shè)計的基本規(guī)范是進(jìn)行網(wǎng)頁設(shè)計工作的重要基礎(chǔ)，遵循網(wǎng)頁設(shè)計的規(guī)范與規(guī)則可以保證網(wǎng)頁設(shè)計的可行性與可用性。本章對網(wǎng)頁設(shè)計的設(shè)計單位、設(shè)計尺寸、柵格系統(tǒng)、界面結(jié)構(gòu)、文字規(guī)范、圖標(biāo)規(guī)范、圖片比例以及控件管理進(jìn)行系統(tǒng)講解。通過本章的學(xué)習(xí)，讀者可以對網(wǎng)頁設(shè)計的規(guī)范有一個系統(tǒng)的認(rèn)識，并為后續(xù)創(chuàng)造豐富的網(wǎng)頁設(shè)計風(fēng)格打下基礎(chǔ)。了解網(wǎng)頁設(shè)計的設(shè)計單位熟悉網(wǎng)頁設(shè)計的界面結(jié)構(gòu)掌握網(wǎng)頁設(shè)計的文字規(guī)范掌握網(wǎng)頁設(shè)計的圖標(biāo)規(guī)范學(xué)習(xí)目標(biāo)英寸像素分辨率2.1單位介紹英寸（inch，in）是英式的長度單位，一般1英寸=2.54厘米。許多顯示設(shè)備經(jīng)常用英寸來表示大小。目前主流的臺式機(jī)顯示器尺寸一般為21.5、24、27、32英寸，目前主流的筆記本尺寸一般為13.3、14、15.6英寸。2.1.1英寸

27英寸的iMac15.6英寸的MacBookPro像素（pixel，px）是組成屏幕畫面最小的點。把屏幕中的圖像無限放大，會發(fā)現(xiàn)圖像是由一個個小點組成，這些小點就是像素。使用Photoshop軟件設(shè)計界面的網(wǎng)頁設(shè)計師使用的單位都是px。2.1.2像素產(chǎn)品展示

分辨率（resolution）即屏幕中像素的數(shù)量，它等于畫面水平方向的像素值×畫面垂直方向的像素值。屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細(xì)和細(xì)膩，如14英寸電腦屏幕的分辨率是1366×768px或1920×1080px，但1920×1080px的顯示效果會比1366×768px的顯示效果好。

2.1.3分辨率分辨率

頁面寬度安全寬度首屏高度2.2設(shè)計尺寸在進(jìn)行PC端網(wǎng)頁界面設(shè)計時，結(jié)合市場占有率以及為了能夠適應(yīng)寬度至少為1920px的屏幕，大部分設(shè)計師會以1920×1080px為基準(zhǔn)進(jìn)行設(shè)計。2.2.1頁面寬度頁面寬度安全寬度即內(nèi)容安全區(qū)域，是一個承載頁面元素的固定寬度值，目的是確保網(wǎng)頁在不同計算機(jī)的分辨率下都可以正常顯示頁面中的元素。在寬度為1920px的設(shè)計尺寸中。2.2.2安全寬度安全寬度示意圖當(dāng)用戶打開電腦或移動設(shè)備的瀏覽器時，在不滾動屏幕的情況下，第一眼看到的畫面就是首屏高度。通常首屏以上的頁面關(guān)注度為80.3%，首屏以下的頁面關(guān)注度僅有19.7%，因此首屏對網(wǎng)站設(shè)計有著極大的重要性。2.2.3首屏高度首屏高度示意圖網(wǎng)頁有上下布局、左右布局和T型布局三種基礎(chǔ)布局，網(wǎng)頁主要由頁頭、內(nèi)容主體及頁腳三大版塊構(gòu)成。其中頁頭包含了網(wǎng)站標(biāo)識和導(dǎo)航等元素，內(nèi)容主體包含了Banner和該頁內(nèi)容相關(guān)的信息，頁腳包含了導(dǎo)航和版權(quán)聲明等元素。2.3結(jié)構(gòu)布局柵格系統(tǒng)的概念柵格系統(tǒng)的組成柵格系統(tǒng)的搭建2.4柵格系統(tǒng)柵格系統(tǒng)，也稱為網(wǎng)格系統(tǒng)。在網(wǎng)頁中，我們利用一系列垂直和水平的參考線，將頁面分割成若干個有規(guī)律的列或格子，再以這些格子為基準(zhǔn)，進(jìn)行頁面的布局設(shè)計，使布局規(guī)范簡潔有秩序。2.4.1柵格系統(tǒng)的概念網(wǎng)格系統(tǒng)1.單元格柵格系統(tǒng)由格子組成網(wǎng)，因此基本單位是單元格。柵格系統(tǒng)需要先定義好柵格的原子單元大小，然后再以最小單元去定義柵格系統(tǒng)。常見的PC端網(wǎng)頁最小單位有4、6、8、10、12，目前主流計算機(jī)設(shè)備的屏幕分辨率在豎直與水平方向基本都可以被8整除，同時以8px作為單元格，視覺上也是能感受到較為明顯的差異，因此推薦使用8px作為單元格的邊長。2.4.2柵格系統(tǒng)的組成單元格2.列+水槽+邊距當(dāng)確定好單元格后，則需要確定列、水槽和邊距這3個元素。其中列是內(nèi)容放置的區(qū)域。水槽是列與列之間的距離，有助于分離內(nèi)容。邊距是內(nèi)容與屏幕左右邊緣之間的距離。2.4.2柵格系統(tǒng)的組成列+水槽+邊距1.確定屏幕寬度搭建柵格系統(tǒng)的第一步是創(chuàng)建畫布，針對不同的設(shè)計項目，寬度設(shè)置也會不同，寬度設(shè)置的具體數(shù)值可以查看2.2設(shè)計尺寸。2.確定柵格區(qū)域創(chuàng)建好網(wǎng)頁的尺寸，接下來需要確定柵格區(qū)域。柵格區(qū)域的確定應(yīng)在結(jié)合尺寸的基礎(chǔ)上，根據(jù)不同的布局方能確定。如果是寬度1920px上下布局的網(wǎng)頁，通常柵格區(qū)域會在中間的安全寬度區(qū)域。2.4.3柵格系統(tǒng)的搭建柵格系統(tǒng)3.確定列數(shù)、水槽、邊距·列數(shù)PC端常用的為12列和24列，12列在前端開發(fā)開源工具庫Bootstrap與Foundation中廣泛使用，適用于業(yè)務(wù)信息分組較少的中后臺頁面設(shè)計。24列適用于業(yè)務(wù)信息量大、信息分組較多的中后臺頁面設(shè)計。移動端網(wǎng)頁則對應(yīng)以6列和12列為主。2.4.3柵格系統(tǒng)的搭建·水槽水槽以及橫向間距的寬度可以依照最小單元格8px為增量進(jìn)行統(tǒng)一設(shè)置，如8、16、24、32、40。其中24px最為常用，移動端網(wǎng)頁可根據(jù)App設(shè)計規(guī)范，一般有24、30、32、40，建議采用32px水槽。水槽

2.4.3柵格系統(tǒng)的搭建·邊距邊距的設(shè)置通常是水槽的0、0.5、1.0、1.5、2.0等倍數(shù)。以1920px為例的設(shè)計稿，網(wǎng)格系統(tǒng)一般在1200px的安全區(qū)域進(jìn)行建立，此時內(nèi)容與屏幕左右邊緣已經(jīng)有了一定距離，邊距可以根據(jù)畫面美觀度及呼吸感進(jìn)行選擇，移動端網(wǎng)頁可根據(jù)App設(shè)計規(guī)范，一般有20px、24px、30px、32px、40px以及50px，建議采用30px邊距。邊距

2.4.3柵格系統(tǒng)的搭建安全字體字號大小文字字重文字行高字間距行間距段落間距2.5文字規(guī)范Web安全字體是用戶系統(tǒng)中自帶的字體，如Windows系統(tǒng)的微軟雅黑、Mac系統(tǒng)的蘋方，另外CSS定義了5種通用字體系列：Serif字體、Sans-serif字體、Monospace字體、Cursive字體、Fantasy字體。設(shè)計師可以大膽采用Web安全字體，將常見的Web安全字體根據(jù)開發(fā)優(yōu)先級、設(shè)計美觀度從高到低進(jìn)行排列。2.5.1安全字體安全字體

基于用戶計算機(jī)顯示器閱讀距離（50cm）以及最佳閱讀角度（0.3），14px字號能夠保證用戶在多數(shù)常用顯示器上的閱讀效率最佳。2.5.2字號大小最佳閱讀距離

字重在大部分情況下，只會出現(xiàn)regular和medium兩種字體重量，分別對應(yīng)代碼中的400和500。在英文字體加粗的情況下會采用semibold的字體重量，對應(yīng)代碼中的600。2.5.3文字字重文字字重不同的字號應(yīng)設(shè)置對應(yīng)的行高，這樣才可以維持網(wǎng)頁中字體的秩序之美。在版式設(shè)計中，西文的行高基本是字號的1.2倍，中文的行高基本是字號的1.5～2倍甚至更大。網(wǎng)頁設(shè)計中，可以參考版面設(shè)計的字號設(shè)置規(guī)律，或遵循AntDesign定義的10個不同字號以及與之相對應(yīng)的行高。2.5.4文字行高AntDesign字號不同的字母有不同的外形，如果使用相同的文字間距會造成字母顯示不協(xié)調(diào)，因此需要調(diào)整文字間距來提升可讀性，使用Photoshop進(jìn)行網(wǎng)頁設(shè)計時，將“字符”面板中的字間距選擇為“視覺”，排版的可讀性最佳。2.5.5字間距

字間距“視覺”面板行間距讓字與字之間有了可呼吸的空間，行間距對文章的易讀性有很大影響。網(wǎng)頁設(shè)計中的行間距可以AntDesign使用固定數(shù)值8像素，即行高減去字號的數(shù)值,需要注意的是，使用Photoshop進(jìn)行網(wǎng)頁設(shè)計時，“字符”面板中的行距并不等同于這里的行間距，在Photoshop里的行距需要根據(jù)2.5.4文字行高的規(guī)范進(jìn)行設(shè)置。2.5.6行間距

行間距“行距”面板段落間距能夠保持頁面的節(jié)奏，它的設(shè)置與行高和行間距有著密切聯(lián)系。段落間距的設(shè)置建議是行高與行間距之和。2.5.7段落間距

段落間距

設(shè)計尺寸視覺平衡視覺調(diào)整使用原則2.6圖標(biāo)規(guī)范在進(jìn)行網(wǎng)頁中的圖標(biāo)設(shè)計時，以4倍數(shù)和8倍數(shù)為基準(zhǔn)是目前最靈活的設(shè)計尺寸系統(tǒng)。其中24px是目前最常用的圖標(biāo)尺寸，而20px則應(yīng)用于緊湊型的頁面布局中，因此也經(jīng)常被使用。2.6.1設(shè)計尺寸

設(shè)計尺寸

不同形狀的圖標(biāo)可以根據(jù)網(wǎng)格系統(tǒng)來進(jìn)行規(guī)范，以實現(xiàn)一組圖標(biāo)的視覺平衡。網(wǎng)格系統(tǒng)中的形狀可以分為四種，即方形、圓形、垂直矩形和水平矩形。在24px下的網(wǎng)格系統(tǒng)中，方形的寬高尺寸為18px，圓形的直徑尺寸為20px，垂直矩形的高度尺寸為20px,寬度尺寸為16px，水平矩形的高度尺寸為16px,寬度尺寸為20px。2.6.2視覺平衡

24px下的網(wǎng)格系統(tǒng)

1.重心調(diào)整如果粗暴地對圖標(biāo)重心進(jìn)行物理對齊和物理平衡，會造成個別圖標(biāo)的比例失衡和整體排版的視覺錯亂。圖標(biāo)的重心應(yīng)該根據(jù)不同形狀進(jìn)行對齊調(diào)整。2.6.3視覺調(diào)整

重心調(diào)整

2.線條調(diào)整同等厚度的線條，因為視錯覺會使得豎線看起來要比橫線薄。在進(jìn)行圖標(biāo)繪制時，有時我們會通過適當(dāng)調(diào)整線條尺寸來避免視錯覺現(xiàn)象，保證圖標(biāo)的視覺平衡。

線條調(diào)整

2.6.3視覺調(diào)整3.顏色調(diào)整相同顏色下，由于文本所占的視覺面積小，因此顏色會比圖標(biāo)的顏色看起來輕。在進(jìn)行圖標(biāo)繪制時，我們會通過適當(dāng)加深文本的顏色，保證圖標(biāo)的視覺平衡。

顏色調(diào)整

2.6.3視覺調(diào)整為支持響應(yīng)式設(shè)計，交付前端的圖標(biāo)，除手繪風(fēng)格的特殊字體盡量使用SVG矢量格式圖標(biāo)?；蛘邔D標(biāo)直接上傳到iconfont中，讓前端直接調(diào)用圖標(biāo)字體。

iconfont界面

2.6.4使用原則圖片統(tǒng)一按照72像素分辨率的固定比例進(jìn)行設(shè)計，以此應(yīng)用于特定場景，如1:1尺寸的圖片通常會作為頭像使用。以下為整理好的圖片常用比例及特定應(yīng)用，以便大家進(jìn)行后續(xù)設(shè)計。2.7圖片比例圖片比例

在進(jìn)行網(wǎng)頁設(shè)計的控件管理時，應(yīng)該充分考慮到交互時控件的不同狀態(tài)。如網(wǎng)頁中使用頻率較高的按鈕控件，狀態(tài)最多時會包括正常狀態(tài)、聚焦?fàn)顟B(tài)、懸停狀態(tài)、激活狀態(tài)、加載狀態(tài)和禁用狀態(tài)六種，設(shè)計師在進(jìn)行設(shè)計管理時，應(yīng)該根據(jù)按鈕所需的不同狀態(tài)做出設(shè)計上的變化，以便用戶明確如何進(jìn)行產(chǎn)品交互。2.8控件管理控件管理界面

第3章網(wǎng)頁常用組件設(shè)計本章介紹：組件設(shè)計網(wǎng)頁界面設(shè)計的核心基礎(chǔ)，它可以向用戶呈現(xiàn)完整、獨(dú)立的需求模塊。組件能夠?qū)崿F(xiàn)模塊化設(shè)計，幫助設(shè)計及開發(fā)高效工作。本章對網(wǎng)頁中的導(dǎo)航、輪播焦點圖、新聞列表以及產(chǎn)品展示等常用組件的基礎(chǔ)知識及設(shè)計規(guī)則進(jìn)行系統(tǒng)講解與實操。通過本章的學(xué)習(xí)，讀者可以對網(wǎng)頁常用組件設(shè)計有一個系統(tǒng)的認(rèn)識，并快速掌握繪制租件的規(guī)范和方法，為接下來的網(wǎng)頁界面設(shè)計打下基礎(chǔ)。掌握導(dǎo)航系統(tǒng)的設(shè)計基礎(chǔ)知識掌握廣告組件的設(shè)計基礎(chǔ)知識掌握展示組件的設(shè)計基礎(chǔ)知識學(xué)習(xí)目標(biāo)導(dǎo)航菜單面包屑導(dǎo)航選項卡導(dǎo)航錨點導(dǎo)航分步導(dǎo)航分頁導(dǎo)航樹形導(dǎo)航課堂案例-設(shè)計中式茶葉官方網(wǎng)站導(dǎo)航菜單3.1導(dǎo)航系統(tǒng)設(shè)計導(dǎo)航菜單（Menu）是一個網(wǎng)站的靈魂，是可以為頁面和功能提供導(dǎo)航的列表。導(dǎo)航菜單通常由文本標(biāo)簽組成，圖標(biāo)可作為非必要組成元素。其常見樣式為頂部導(dǎo)航和側(cè)邊導(dǎo)航。3.1.1導(dǎo)航菜單導(dǎo)航菜單效果圖面包屑導(dǎo)航（Breadcrumb）是一種輔助導(dǎo)航，用于顯示當(dāng)前網(wǎng)頁在整個網(wǎng)站中的位置，并便于用戶返回上一級或各個層級頁面。面包屑導(dǎo)航通常由文本標(biāo)簽和分隔符組成，常用于分類清晰明確多層級網(wǎng)站。設(shè)計時，可根據(jù)實際情況中設(shè)置面包屑的尺寸，常見的設(shè)計尺寸為14px或12px。其中父級頁面需要設(shè)計出可點擊跳轉(zhuǎn)的狀態(tài)，當(dāng)前頁面則呈現(xiàn)不可點擊狀態(tài)。3.1.2面包屑導(dǎo)航面包屑導(dǎo)航3.1.3選項卡導(dǎo)航文本型選項卡卡片型選項卡常規(guī)型選項卡膠囊型選項卡選項卡導(dǎo)航通常由標(biāo)簽和內(nèi)容區(qū)域組成，滑動按鈕可作為非必要組成元素。當(dāng)頁面中需要展示相同層級不同類別的內(nèi)容時或頁面的信息量過多時會使用該組件。錨點導(dǎo)航（Anchor）是用于頁面不同模塊間快速切換的導(dǎo)航。錨點導(dǎo)航通常由文本標(biāo)簽和側(cè)軸線組成，常用于較長頁面，能夠幫助用戶快速定位重點內(nèi)容。3.1.4錨點導(dǎo)航錨點導(dǎo)航分步導(dǎo)航（Steps）是用于引導(dǎo)用戶按照流程完成任務(wù)的導(dǎo)航。分步導(dǎo)航通常由步驟節(jié)點和文本標(biāo)簽組成，常用于復(fù)雜任務(wù)或存在先后關(guān)系的模式下，通過分步導(dǎo)航可以將它們分解成一系列步驟，達(dá)到簡化任務(wù)的效果。分步導(dǎo)航的常見樣式為長條型和點形型，點形型可以進(jìn)一步演化為點狀或圖標(biāo)狀。3.1.5分步導(dǎo)航點形型長條形分頁導(dǎo)航（Pagination）是采用分頁形式分隔長列表的導(dǎo)航。分頁導(dǎo)航通常由前進(jìn)按鈕、后退按鈕和一組頁碼組成，常用于加載或渲染所有數(shù)據(jù)需要花費(fèi)大量時間時，使用分頁導(dǎo)航能有效記錄內(nèi)容對應(yīng)的頁碼位置，方便用戶查找。設(shè)計時，當(dāng)分頁數(shù)大于5時，在5頁與最后一頁中間自動展示“...”，根據(jù)不同的需要，可以加入跳至到具體頁面的控件。3.1.6分頁導(dǎo)航分頁數(shù)大于5頁分頁數(shù)小于5頁樹形導(dǎo)航（Tree）是一種展開、收起、選擇等交互功能的多層次架構(gòu)列表。樹形導(dǎo)航通常由節(jié)點按鈕和文本標(biāo)簽組成，圖標(biāo)和復(fù)選框可作為非必要組成元素。該組件常用于大量、具有層級關(guān)系的數(shù)據(jù)展示場景中，利用該組件的展開收起和關(guān)聯(lián)選中等交互可以數(shù)據(jù)進(jìn)行方便地對操作處理。3.1.7樹形導(dǎo)航

三角折疊按鈕方形折疊按鈕使用“新建參考線”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具和“圓角矩形”工具繪制基本形狀。3.1.8課堂案例-設(shè)計中式茶葉官方網(wǎng)站導(dǎo)航菜單效果圖輪播廣告彈出式廣告浮動式廣告課堂案例-設(shè)計中式家具電商平臺網(wǎng)站輪播廣告3.2廣告組件設(shè)計廣告組件（Advertisement）是網(wǎng)頁中放置經(jīng)過設(shè)計的文字、圖片、動畫、視頻等元素，向網(wǎng)站訪問者提供傳播商品或服務(wù)信息的一種手段。其主要目的是依靠點擊實現(xiàn)交互，以促成進(jìn)一步的信息傳遞。3.2.廣告組件設(shè)計輪播廣告（CarouselAds）是以幻燈片的方式，在頁面中橫向展示多張圖片的組件。輪播廣告通常由指示器和圖片組成，常用于一組平級關(guān)系的廣告，使用該組件可以極大節(jié)省網(wǎng)頁空間。3.2.1輪播廣告李寧官網(wǎng)輪播廣告界面3.2.2彈出式廣告彈出式廣告（Pop-upAds）是在用戶打開網(wǎng)站時，在目標(biāo)頁面上自動彈出的廣告。彈出式廣告通常由關(guān)閉按鈕和圖片組成，常用于網(wǎng)站首頁，展示相關(guān)活動。由于彈出式廣告通常是進(jìn)行自動彈出，因此具有少跳轉(zhuǎn)、強(qiáng)曝光、瞬間吸引用戶注意力的優(yōu)勢。但同時容易打斷用戶瀏覽，稍有不慎會造成用戶反感。

半透明的遮罩層無倒計時控件

帶倒計時控件浮動式廣告（FloatingAds）是用戶打開網(wǎng)頁時置于頁面上，來回飄浮的廣告。浮動式廣告通常由關(guān)閉按鈕和圖片組成，常用于網(wǎng)站首頁，展示相關(guān)活動。這類廣告的運(yùn)動軌跡通常會跟隨網(wǎng)頁的瀏覽上下移動，以保證用戶始終能夠瀏覽到。因此這類廣告具有強(qiáng)烈的侵?jǐn)_性，機(jī)易影響用戶瀏覽體驗，使用時要十分謹(jǐn)慎。3.2.3浮動式廣告覓知網(wǎng)浮動廣告界面使用“新建參考線”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“橢圓”工具繪制基本形狀。3.2.4課堂案例-設(shè)計中式家具電商平臺網(wǎng)站輪播廣告效果圖卡片列表表格折疊面板課堂案例-設(shè)計中式茶葉官方網(wǎng)站新聞列表3.3展示組件設(shè)計鉆展圖是可以為商家實現(xiàn)店鋪曝光及商品推廣的有效營銷工具。鉆展圖需要依靠較強(qiáng)的圖片創(chuàng)意，才能促使消費(fèi)者點擊跳轉(zhuǎn)，因此鉆展圖視覺效果的好壞在很大程度上影響著店鋪的曝光度。下面分別從鉆展圖的基本概念、設(shè)計尺寸以及設(shè)計方法三個方面進(jìn)行講解，幫助電商設(shè)計師掌握鉆展圖的設(shè)計方法。3.3展示組件設(shè)計卡片（Card）是將信息聚合在一個容器中進(jìn)行展示的組件?？ㄆǔＳ晌谋尽D片和操作按鈕組成，常用于產(chǎn)品展示、內(nèi)容概述等方面，作為進(jìn)一步詳情展示的入口。3.3.1卡片

邊框卡片無邊框卡片列表（List）是一組文本或圖文，其中可以包含圖標(biāo)按鈕或文字按鈕，是將同類型內(nèi)容用來聚合的組件。列表通常由正文內(nèi)容組成，圖片元素和操作按鈕可作為非必要組成元素。當(dāng)頁面中需要展示相同類型的數(shù)據(jù)，進(jìn)行沉浸式瀏覽時會使用該組件，常作為信息展示類網(wǎng)站的新聞列表或管理系統(tǒng)類網(wǎng)站的數(shù)據(jù)列表。3.3.2列表

圖文列表-縮略圖圖文列表-常規(guī)圖表格（Table）是用行列的形式，結(jié)構(gòu)化地進(jìn)行信息展示的組件。表格通常由表頭和單元格組成，行列分割線可作為非必要組成元素。其中表頭用于說明當(dāng)前列的信息類別，另外可以在表頭放置排序、篩選等操作按鈕。單元格用于展示表格的主題內(nèi)容，支持文字、圖標(biāo)、按鈕、標(biāo)簽、單選框、復(fù)選框等元素。行列分割線則用于分隔信息。3.3.3表格分割線表格斑馬紋表格

折疊面板（Collapse）是一組可以對內(nèi)容區(qū)域進(jìn)行折疊或展開的組件。折疊面板通常由標(biāo)題、切換按鈕以及子面板組成，常用于如企業(yè)招聘崗位等復(fù)雜區(qū)域，通過分組和隱藏以保持頁面整潔。3.3.4折疊面板折疊面板

使用“新建參考線”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具繪制基本形狀。3.3.5課堂案例-設(shè)計中式茶葉官方網(wǎng)站新聞列表效果圖3.4輸入組件設(shè)計搜索表單表格課堂案例-設(shè)計職業(yè)教育管理系統(tǒng)網(wǎng)站注冊表單

搜索（Search）是進(jìn)行信息檢索，幫助用戶快速找到需要信息的組件。搜索通常由輸入框和搜索按鈕組成，下拉框、彈出面板和熱搜標(biāo)簽可作為非必要組成元素。當(dāng)頁面、表單進(jìn)行數(shù)據(jù)查找時會使用該組件。3.4.1搜索搜索界面

表單（Form）是進(jìn)行收集、校驗以及提交數(shù)據(jù)的組件。表單由文本標(biāo)簽、表單域以及表單按鈕組成，其中文本標(biāo)簽用于解釋輸入項的含義、驗證輸入項并給出反饋提示和描述該輸入項需要的輸入類型。表單域是組成表單的核心內(nèi)容，包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等可交互輸入的區(qū)域。表單按鈕用于提交數(shù)據(jù)或進(jìn)入下一步等工作，包括提交按鈕和復(fù)位按鈕等按鈕。3.4.2表單

基礎(chǔ)表單

分步表單高級表單

使用“新建參考線”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“圓角矩形”工具繪制基本形狀。3.4.3課堂案例-設(shè)計職業(yè)教育管理系統(tǒng)網(wǎng)站注冊表單效果圖學(xué)習(xí)使用繪圖工具、文字工具制作科技公司官方網(wǎng)站導(dǎo)航。3.5課堂練習(xí)-設(shè)計科技公司官方網(wǎng)站導(dǎo)航效果圖學(xué)習(xí)使用繪圖工具、文字工具制作有機(jī)果蔬電商平臺網(wǎng)站輪博廣告。3.6課后習(xí)題-設(shè)計有機(jī)果蔬電商平臺網(wǎng)站輪博廣告效果圖第4章官方展示網(wǎng)頁設(shè)計本章介紹：一套優(yōu)秀的官方展示網(wǎng)站能夠有效提升企業(yè)整體形象，增強(qiáng)企業(yè)品牌的曝光度，從而提高業(yè)務(wù)轉(zhuǎn)化率。本章對官方展示網(wǎng)站的內(nèi)容規(guī)劃、風(fēng)格定位以及頁面類型等網(wǎng)頁知識及網(wǎng)頁規(guī)則進(jìn)行系統(tǒng)講解與演練。通過本章的學(xué)習(xí)，讀者可以對官方展示網(wǎng)頁設(shè)計有一個基本的認(rèn)識，并快速掌握官方展示網(wǎng)頁的設(shè)計思路和制作方法。熟悉官方展示網(wǎng)站的內(nèi)容規(guī)劃了解官方展示網(wǎng)站的風(fēng)格定位認(rèn)識官方展示網(wǎng)站的頁面類型學(xué)習(xí)目標(biāo)官方展示網(wǎng)站的內(nèi)容規(guī)劃官方展示網(wǎng)站的設(shè)計風(fēng)格官方展示網(wǎng)站的頁面類型課堂案例-設(shè)計中式茶葉官網(wǎng)首頁4.1官方展示網(wǎng)站頁面設(shè)計設(shè)計官方展示網(wǎng)站，首先要進(jìn)行內(nèi)容方面的規(guī)劃，達(dá)到目標(biāo)用戶對企業(yè)品牌認(rèn)識與了解的目的。官方展示網(wǎng)站的整體架構(gòu)可以通過頂部導(dǎo)航、右側(cè)懸浮導(dǎo)航以及底部導(dǎo)航三大版塊進(jìn)行規(guī)劃。其中頂部導(dǎo)航通常包含首頁、企業(yè)簡介、業(yè)務(wù)介紹、品牌新聞、企業(yè)聯(lián)系等欄目，右側(cè)懸浮導(dǎo)航通常包含返回頂部，底部導(dǎo)航則包含頂部導(dǎo)航內(nèi)的欄目、聯(lián)系方式、版權(quán)所有和網(wǎng)站備案等欄目。4.1.1官方展示網(wǎng)站的內(nèi)容規(guī)劃PC端店鋪首頁全屏海報

官方展示網(wǎng)站的設(shè)計風(fēng)格與其對應(yīng)的行業(yè)屬性有著直接關(guān)系，不同的行業(yè)會產(chǎn)生不同的網(wǎng)站設(shè)計風(fēng)格。根據(jù)行業(yè)屬性，常見的官方展示網(wǎng)站的設(shè)計風(fēng)格有大眾簡約、現(xiàn)代商務(wù)、文化復(fù)古、活潑卡通這四類設(shè)計風(fēng)格。4.1.2官方展示網(wǎng)站的設(shè)計風(fēng)格1.大眾簡約大眾簡約風(fēng)格的官方展示網(wǎng)站信息內(nèi)容言簡意賅，顏色選取以品牌色為主、灰色系為輔，并伴有大量留白，該風(fēng)格會給用戶帶來寧靜舒適的體驗，適用范圍較廣。4.1.2官方展示網(wǎng)站的設(shè)計風(fēng)格

中茶官網(wǎng)

柏廚家居2.現(xiàn)代商務(wù)現(xiàn)代商務(wù)風(fēng)格的官方展示網(wǎng)站普遍傾向穩(wěn)重和商業(yè)化特征，顏色偏向冷暗色，該風(fēng)格會給用戶帶來磅礴大氣的體驗，適用于商務(wù)服務(wù)等各類現(xiàn)代企業(yè)。4.1.2PC端海報的布局類型國投官網(wǎng)支付寶官網(wǎng)3.文化復(fù)古文化復(fù)古風(fēng)格的官方展示網(wǎng)站具有強(qiáng)烈的歷史文化氣息，通常選取飽和度和亮度較低的顏色，該風(fēng)格會給用戶帶來沉穩(wěn)莊重的感受，適用美術(shù)館、博物館等傳統(tǒng)文化類企業(yè)。4.1.2PC端海報的布局類型北京博物館官網(wǎng)西安博物院官網(wǎng)4.活潑卡通活潑卡通風(fēng)格的官方展示網(wǎng)站結(jié)構(gòu)簡單清晰，通常選取飽和度和亮度較高顏色，該風(fēng)格會給用戶帶來親切溫馨的感受，適用于受眾為幼兒的網(wǎng)站。4.1.2PC端海報的布局類型卡通尼樂園官網(wǎng)樂智小天地官網(wǎng)1.網(wǎng)站首頁網(wǎng)站首頁，又稱為“網(wǎng)站主頁”，通常是用戶通過搜索引擎訪問網(wǎng)站時所看到的首張頁面，是用戶了解企業(yè)的第一步。通常以大屏圖片展示，快速吸引用戶。4.1.3官方展示網(wǎng)站的頁面類型網(wǎng)站首頁2.企業(yè)簡介企業(yè)簡介頁是介紹企業(yè)基本情況的頁面，能夠讓用戶在短時間內(nèi)了解到企業(yè)的故事、文化以及歷程等內(nèi)容。設(shè)計時，需要注意加強(qiáng)元素間的對比，建立有組織的層次結(jié)構(gòu)，便于用戶快速識別關(guān)鍵信息。4.1.3官方展示網(wǎng)站的頁面類型企業(yè)簡介頁面3.業(yè)務(wù)介紹業(yè)務(wù)介紹頁是介紹企業(yè)核心業(yè)務(wù)或特色產(chǎn)品的頁面，能夠讓用戶詳細(xì)了解企業(yè)的業(yè)務(wù)或產(chǎn)品。通常遵循“一屏一特點”的原則進(jìn)行設(shè)計展示，以達(dá)到將業(yè)務(wù)內(nèi)容或產(chǎn)品內(nèi)容有層次感地呈現(xiàn)給用戶。4.1.3官方展示網(wǎng)站的頁面類型業(yè)務(wù)介紹頁面4.品牌新聞品牌新聞頁是企業(yè)與用戶建立無形聯(lián)系的頁面，該頁面能夠為網(wǎng)站帶來額外的訪問量。設(shè)計多采用圖文結(jié)合的列表形式，當(dāng)新聞不多時可采用網(wǎng)格形式。4.1.3官方展示網(wǎng)站的頁面類型品牌新聞頁面5.企業(yè)聯(lián)系企業(yè)聯(lián)系頁是介紹企業(yè)聯(lián)系方式的頁面，有時還會加入招聘信息，大部分網(wǎng)站將該頁面放置頂部導(dǎo)航欄的最后一個欄目。在企業(yè)聯(lián)系頁中，需要將信息模塊化有組織地展示，盡可能地做到簡練易讀。4.1.3官方展示網(wǎng)站的頁面類型企業(yè)聯(lián)系頁面

使用“新建參考線”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具繪制基本形狀。4.1.4課堂案例-設(shè)計中式茶葉官網(wǎng)首頁效果圖學(xué)習(xí)使用繪圖工具、文字工具制作中式茶葉官網(wǎng)其他頁。4.2課堂練習(xí)-設(shè)計中式茶葉官網(wǎng)其他頁效果圖學(xué)習(xí)使用繪圖工具、文字工具制作科技公司官方網(wǎng)站。4.3課后習(xí)題-設(shè)計科技公司官方網(wǎng)站效果圖第5章電商平臺網(wǎng)頁設(shè)計本章介紹：隨著互聯(lián)網(wǎng)的發(fā)展以及消費(fèi)結(jié)構(gòu)的升級，電子商務(wù)行業(yè)發(fā)展地迅猛激烈，網(wǎng)購已成為了大眾日常生活中不可缺少的一部分。本章對電商平臺網(wǎng)站的內(nèi)容規(guī)劃、風(fēng)格定位以及頁面類型等網(wǎng)頁知識及網(wǎng)頁規(guī)則進(jìn)行系統(tǒng)講解與演練。通過本章的學(xué)習(xí)，讀者可以對電商平臺網(wǎng)頁設(shè)計有一個基本的認(rèn)識，并快速掌握電商平臺網(wǎng)頁的設(shè)計思路和制作方法。熟悉電商平臺網(wǎng)站的內(nèi)容規(guī)劃了解電商平臺網(wǎng)站的風(fēng)格定位認(rèn)識電商平臺網(wǎng)站的頁面類型學(xué)習(xí)目標(biāo)電商平臺網(wǎng)站的內(nèi)容規(guī)劃電商平臺網(wǎng)站的設(shè)計風(fēng)格電商平臺網(wǎng)站的頁面類型課堂案例-設(shè)計中式家具電商平臺首頁5.1電商平臺網(wǎng)站頁面設(shè)計一套完整的電商平臺需要通過前臺、中臺、后臺、基礎(chǔ)支撐模塊、其他配合系統(tǒng)串聯(lián)運(yùn)轉(zhuǎn)，其中前臺是直接展現(xiàn)給用戶的瀏覽和操作的，其他系統(tǒng)則是提供給服務(wù)商和商戶使用。對于用戶而言，電商呈現(xiàn)出來的主要是可享受線上服務(wù)的前臺商城頁面，因此我們將重點講解前臺商城頁面的內(nèi)容規(guī)劃。5.1.1電商平臺網(wǎng)站的內(nèi)容規(guī)劃前臺商城頁面內(nèi)容規(guī)劃1.熱情歡快熱情歡快風(fēng)格的電商平臺網(wǎng)站銷售產(chǎn)品和信息內(nèi)容豐富充足，顏色選取以紅橙色系為主，該風(fēng)格會給用戶帶來活潑熱鬧的感受，達(dá)到提升用戶消費(fèi)欲望的目的，適用于大型綜合類電商平臺。5.1.2電商平臺網(wǎng)站的設(shè)計風(fēng)格

京東網(wǎng)站設(shè)計風(fēng)格

淘寶網(wǎng)站設(shè)計風(fēng)格

2.文藝淡雅文藝淡雅風(fēng)格的電商平臺網(wǎng)站普遍銷售具有一定品質(zhì)感的商品，顏色選取飽和度較低和明度較高的顏色，該風(fēng)格會的用戶定位通常是文藝小資型，適用于中高端綜合類電商平臺。5.1.2電商平臺網(wǎng)站的設(shè)計風(fēng)格

小米有品網(wǎng)站設(shè)計風(fēng)格

網(wǎng)易嚴(yán)選網(wǎng)站設(shè)計風(fēng)格

3.傾向行業(yè)傾向行業(yè)風(fēng)格的電商平臺網(wǎng)站目標(biāo)明確，擁有強(qiáng)烈的行業(yè)屬性，顏色選取會根據(jù)自身行業(yè)而來，該風(fēng)格會給用戶帶來統(tǒng)一協(xié)調(diào)的感受，適用于專注于某一個行業(yè)的垂直類電商平臺。5.1.2電商平臺網(wǎng)站的設(shè)計風(fēng)格

小米有品網(wǎng)站設(shè)計風(fēng)格

網(wǎng)易嚴(yán)選網(wǎng)站設(shè)計風(fēng)格

1.網(wǎng)站首頁電商平臺網(wǎng)站首頁和官方展示網(wǎng)站的首頁一樣，是大部分用戶通過搜索引擎訪問網(wǎng)站時所看到的首張頁面。通常有組織地展示各類大圖活動廣告、秒殺活動廣告、特價活動以及各類特色產(chǎn)品，達(dá)到流量分發(fā)的作用。5.1.3電商平臺網(wǎng)站的頁面類型

華為商城網(wǎng)站首頁

聯(lián)想網(wǎng)站首頁

2.商品列表頁商品列表頁，又稱為“List頁”，是對信息進(jìn)行歸類管理，方便用戶能快速查看基本信息及操作的頁面。在列表頁中，設(shè)計的關(guān)鍵在于信息的可閱讀性及可操作性。5.1.3電商平臺網(wǎng)站的頁面類型

華為網(wǎng)站商品列表

聯(lián)想網(wǎng)站商品列表

3.商品詳情頁商品詳情頁是商品信息的主要承載頁面，對于信息效率和優(yōu)先級判定有一定的要求。使用清晰的布局能令用戶快速看到關(guān)鍵信息，提高決策效率。5.1.3電商平臺網(wǎng)站的頁面類型華為網(wǎng)站商品詳情頁

聯(lián)想網(wǎng)站商品詳情頁

4.購物車頁購物車頁擁有批量結(jié)算和對比商品的作用，此外還為用戶提供了一定作用的收藏夾。設(shè)計購物車頁應(yīng)該充分考慮到它的空狀態(tài)、商品加入狀態(tài)、滿狀態(tài)三類不同狀態(tài)，同時設(shè)計購物車中的商品也要考慮到商品的選中狀態(tài)和失效狀態(tài)。5.1.3電商平臺網(wǎng)站的頁面類型

華為網(wǎng)站購物車頁

聯(lián)想網(wǎng)站購物車頁

5.個人訂單頁個人訂單頁是用戶產(chǎn)生交易后查看商品狀態(tài)的頁面。和商品列表頁一樣，該頁面需要對訂單信息進(jìn)行歸類管理，方便用戶能快速查看信息及操作。在個人訂單頁中，不僅要設(shè)計出有無訂單的不同頁面狀態(tài)，更要設(shè)計出由于訂單本身狀態(tài)變化，而產(chǎn)生的信息與操作的變化狀態(tài)。5.1.3電商平臺網(wǎng)站的頁面類型華為網(wǎng)站個人訂單頁

聯(lián)想網(wǎng)站個人訂單頁

使用“新建參考線”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”、“橢圓”工具繪制基本形狀。5.1.4課堂案例-設(shè)計中式家具電商平臺首頁效果圖學(xué)習(xí)使用繪圖工具、文字工具制作中式家具電商平臺其他頁。5.2課堂練習(xí)-設(shè)計中式家具電商平臺其他頁效果圖

學(xué)習(xí)使用繪圖工具、文字工具制作有機(jī)果蔬電商平臺網(wǎng)站。5.3設(shè)計有機(jī)果蔬電商平臺網(wǎng)站效果圖第6章管理系統(tǒng)網(wǎng)頁設(shè)計本章介紹：在近幾年，管理系統(tǒng)網(wǎng)站的建設(shè)和發(fā)展呈井噴趨勢，同時對于管理系統(tǒng)網(wǎng)頁的設(shè)計要求也與日俱增。本章對管理系統(tǒng)網(wǎng)站的內(nèi)容規(guī)劃、風(fēng)格定位以及頁面類型等網(wǎng)頁知識及網(wǎng)頁規(guī)則進(jìn)行系統(tǒng)講解與演練。通過本章的學(xué)習(xí)，讀者可以對管理系統(tǒng)網(wǎng)頁設(shè)計有一個基本的認(rèn)識，并快速掌握管理系統(tǒng)網(wǎng)頁的設(shè)計思路和制作方法。熟悉管理系統(tǒng)網(wǎng)站的內(nèi)容規(guī)劃了解管理系統(tǒng)網(wǎng)站的風(fēng)格定位認(rèn)識管理系統(tǒng)網(wǎng)站的頁面類型學(xué)習(xí)目標(biāo)6.1管理系統(tǒng)網(wǎng)站頁面設(shè)計管理系統(tǒng)網(wǎng)站的內(nèi)容規(guī)劃管理系統(tǒng)網(wǎng)站的設(shè)計風(fēng)格管理系統(tǒng)網(wǎng)站的頁面類型課堂案例-設(shè)計職業(yè)教育管理系統(tǒng)首頁6.1.1管理系統(tǒng)網(wǎng)站的內(nèi)容規(guī)劃管理系統(tǒng)網(wǎng)站業(yè)務(wù)邏輯復(fù)雜、功能多而強(qiáng)大。根據(jù)服務(wù)對象和業(yè)務(wù)方向管理系統(tǒng)網(wǎng)站可以分為業(yè)務(wù)支撐類產(chǎn)品、辦公協(xié)作類產(chǎn)品、商家管理類產(chǎn)品和云產(chǎn)品。規(guī)劃這些網(wǎng)站的具體內(nèi)容需要根據(jù)業(yè)務(wù)本身的方向進(jìn)行，因此沒有固定的內(nèi)容。但通過業(yè)務(wù)的沉淀和驗證，可以總結(jié)出常用的內(nèi)容場景，作為規(guī)劃管理系統(tǒng)網(wǎng)站內(nèi)容的參考。規(guī)劃管理系統(tǒng)網(wǎng)站1.經(jīng)典商務(wù)經(jīng)典商務(wù)的管理系統(tǒng)網(wǎng)站層次分明，導(dǎo)航區(qū)域為深色、內(nèi)容區(qū)域為淺色，該風(fēng)格會給用戶帶來專業(yè)高效、成熟可信的感受，適用性較廣，但視覺上不容易令用戶產(chǎn)生深刻印象。6.1.2管理系統(tǒng)網(wǎng)站的設(shè)計風(fēng)格火山引擎網(wǎng)站

字節(jié)跳動網(wǎng)站

2.清新明亮清新明亮的管理系統(tǒng)網(wǎng)站對展示性內(nèi)容包容性較高，導(dǎo)航區(qū)域和內(nèi)容區(qū)域皆為淺色，該風(fēng)格會給用戶帶來簡潔明快、輕量年輕的感受，適用性同樣較廣，但視覺上容易造成層次不明確。6.1.2管理系統(tǒng)網(wǎng)站的設(shè)計風(fēng)格頭條號網(wǎng)站

Design網(wǎng)站

3.藍(lán)色科技藍(lán)色科技的管理系統(tǒng)網(wǎng)站大面積使用藍(lán)色色域，該風(fēng)格會給用戶帶來智能精致的感受，適用于科技屬性強(qiáng)的管理系統(tǒng)網(wǎng)站，但對其他色彩信息有一定的干擾性，長時間地持續(xù)觀看容易造成視覺疲勞。6.1.2管理系統(tǒng)網(wǎng)站的設(shè)計風(fēng)格騰訊云圖

4.暗黑酷炫暗黑酷炫的管理系統(tǒng)導(dǎo)航區(qū)域和內(nèi)容區(qū)域皆為深色，該風(fēng)格會給用戶帶來沉穩(wěn)、高質(zhì)感的感受，長時間觀看會下降對密集文本信息的獲取速度，適用于數(shù)據(jù)圖形較多、文本信息較少的管理系統(tǒng)網(wǎng)站。6.1.2管理系統(tǒng)網(wǎng)站的設(shè)計風(fēng)格螞蟻設(shè)計網(wǎng)站

6.1.3管理系統(tǒng)網(wǎng)站的頁面類型1.登錄注冊頁登錄注冊頁是管理系統(tǒng)網(wǎng)站的必要頁面。設(shè)計登錄注冊頁面時，要注意操作清晰順暢、視覺直觀簡潔。登錄時為了便于降低使用摩擦感，要提供手機(jī)號登錄方式并且提供第三方賬號登錄方式。登錄注冊頁6.1.3管理系統(tǒng)網(wǎng)站的頁面類型2.工作臺頁工作臺頁是整個系統(tǒng)的首頁，是用戶登錄完成后的第一張頁面。工作臺頁主要是為了讓用戶快速了解整個系統(tǒng)中的核心任務(wù)、待辦事項和重要數(shù)據(jù)。頁面內(nèi)容不宜太多，建議在1.5屏內(nèi)展示完畢。信息排列時，需要按照業(yè)務(wù)優(yōu)先級和重要程度。圖表顏色不宜過多，可以進(jìn)行適當(dāng)?shù)匾曈X降噪。工作臺頁6.1.3管理系統(tǒng)網(wǎng)站的頁面類型3.數(shù)據(jù)看板頁數(shù)據(jù)看板頁是系統(tǒng)為用戶提供數(shù)據(jù)分析統(tǒng)計的查看頁面，該頁面通過搭配各類統(tǒng)計圖形運(yùn)用時間很空間等緯度展示數(shù)據(jù)。數(shù)據(jù)的呈現(xiàn)需要選擇正確的數(shù)據(jù)圖形，例如展示同一組數(shù)據(jù)不同時間的變化趨勢，用柱狀圖最為合適準(zhǔn)確。頁面顏色選擇建議不超多5種，過多的顏色會令用戶在識別信息上產(chǎn)生困難。數(shù)據(jù)看板頁6.1.3管理系統(tǒng)網(wǎng)站的頁面類型4.表單頁表單頁主要負(fù)責(zé)數(shù)據(jù)采集功能，即用戶需要填寫較多相關(guān)信息的頁面，表單頁的設(shè)計可以查看3.4.2表單。表單頁6.1.3管理系統(tǒng)網(wǎng)站的頁面類型5.列表頁列表頁是數(shù)據(jù)信息的陳列及操作頁面，在列表頁中設(shè)計表格進(jìn)行數(shù)字類對齊時，日期選擇居中對齊；年齡選擇居中對齊或左對齊；價格選擇。如果價格可以固定在位數(shù)，也可以左對齊。關(guān)于表格的其他詳細(xì)設(shè)計可以查看3.3.3表格。列表頁

使用“新建參考線”命令建立參考線，使用“置入嵌入對象”命令置入圖標(biāo)，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具、“橢圓”工具、“直線”工具、“鋼筆”工具繪制基本形狀。6.1.4

課堂案例-設(shè)計職業(yè)教育管理系統(tǒng)首頁效果圖學(xué)習(xí)使用繪圖工具、文字工具制作職業(yè)教育管理系統(tǒng)其他頁。6.2

課堂案例-設(shè)計職業(yè)教育管理系統(tǒng)其他頁效果圖學(xué)習(xí)使用繪圖工具、文字工具制作網(wǎng)店內(nèi)容管理系統(tǒng)網(wǎng)站。6.3課后習(xí)題-設(shè)計網(wǎng)店內(nèi)容管理系統(tǒng)網(wǎng)站效果圖第7章移動端網(wǎng)頁設(shè)計本章介紹：隨著智能手機(jī)和平板電腦的普及，設(shè)計移動端網(wǎng)頁已經(jīng)成為了網(wǎng)頁設(shè)計的關(guān)鍵任務(wù)。本章對移動端網(wǎng)站設(shè)計方法、響應(yīng)式網(wǎng)頁設(shè)計模式、網(wǎng)頁觸摸式設(shè)計優(yōu)化等基礎(chǔ)知識及相關(guān)規(guī)則進(jìn)行系統(tǒng)講解與演練。通過本章的學(xué)習(xí)，讀者可以對移動端網(wǎng)頁設(shè)計有一個基本的認(rèn)識，并快速掌握移動端網(wǎng)頁的設(shè)計思路和制作方法，確保塑造出適合用戶瀏覽的移動端網(wǎng)頁。了解移動端網(wǎng)站的設(shè)計方法掌握響應(yīng)式網(wǎng)頁的設(shè)計模式熟悉網(wǎng)頁觸摸式設(shè)計的優(yōu)化知識學(xué)習(xí)目標(biāo)移動端網(wǎng)站設(shè)計方法響應(yīng)式網(wǎng)頁設(shè)計模式網(wǎng)頁觸摸式設(shè)計優(yōu)化課堂案例-設(shè)計移動端中式茶葉官網(wǎng)首頁7.1移動端網(wǎng)站頁面設(shè)計7.1移動端網(wǎng)站設(shè)計方法移動端網(wǎng)站通常運(yùn)用自適應(yīng)和響應(yīng)式設(shè)計兩種方法進(jìn)行實現(xiàn)。自適應(yīng)和響應(yīng)式設(shè)計7.1移動端網(wǎng)站設(shè)計方法1.自適應(yīng)網(wǎng)頁設(shè)計自適應(yīng)網(wǎng)頁設(shè)計（AdaptiveWebDesign，簡稱“AWD”）是會根據(jù)不同設(shè)備進(jìn)行布局變化的一種設(shè)計方式及技術(shù)。自適應(yīng)布局電腦端移動端7.1移動端網(wǎng)站設(shè)計方法2.響應(yīng)式網(wǎng)頁設(shè)計響應(yīng)式網(wǎng)頁設(shè)計，英文全稱“ResponsiveWebdesign”，簡稱“RWD”,是會智能地根據(jù)不同的尺寸進(jìn)行布局變化的一種設(shè)計方式及技術(shù)。和自適應(yīng)網(wǎng)頁設(shè)計不同的是，響應(yīng)式布局會根據(jù)尺寸實時改變布局。自適應(yīng)布局電腦端移動端1.導(dǎo)航欄導(dǎo)航欄是網(wǎng)頁中重要的交互元素。在響應(yīng)式網(wǎng)頁中，導(dǎo)航欄可以通過導(dǎo)航菜單列表、錨鏈接頁腳導(dǎo)航欄、下拉菜單導(dǎo)航欄、觸發(fā)式導(dǎo)航欄、優(yōu)先級式導(dǎo)航欄以及取消導(dǎo)航欄等幾種方式處理。導(dǎo)航欄效果圖7.1.2響應(yīng)式網(wǎng)頁設(shè)計模式2.文本移動設(shè)備上，在不影響用戶獲取關(guān)鍵信息的情況下，可以有選擇地隱藏附加信息，但要注意區(qū)分何為關(guān)鍵信息何為附加信息。

電腦端網(wǎng)頁文本

手機(jī)端網(wǎng)頁文本7.1.2響應(yīng)式網(wǎng)頁設(shè)計模式3.輪播廣告設(shè)計移動端輪播廣告時，需要注意尺寸不同而帶來的設(shè)計變化。PC端網(wǎng)頁為左右布局的橫版輪播廣告，在移動端網(wǎng)頁中則需要設(shè)計成上下布局的豎版海報，此外圖片也可以更換為能吸引用戶瀏覽的細(xì)節(jié)圖片。7.1.2店招導(dǎo)航的設(shè)計規(guī)則電腦端網(wǎng)頁輪播廣告

手機(jī)端網(wǎng)頁輪播廣告4.表格表格作為形式和內(nèi)容有著緊密相連的重要元素，實現(xiàn)其響應(yīng)式設(shè)計并非易事。在響應(yīng)式網(wǎng)頁中，表格可以通過優(yōu)先級式表格、行列翻轉(zhuǎn)式表格、橫向滑動式表格、改用定義列表以及表格轉(zhuǎn)圖表等幾種方式處理。7.1.2店招導(dǎo)航的設(shè)計規(guī)則電腦端網(wǎng)頁表格

手機(jī)端網(wǎng)頁表格7.1.3網(wǎng)頁觸摸式設(shè)計優(yōu)化1.拇指法則手機(jī)的持握方式非常有限，其中單手持握并操作是最自由流行，也是最多限制的持握方式。這種持握方式自由流行之處因為，另外一只手可以同時處理其他事物，限制在于必須使用拇指才可以進(jìn)行單手持握手機(jī)并操作。拇指的可操控范圍還不到整個屏幕的三分之一。拇指法則

7.1.3網(wǎng)頁觸摸式設(shè)計優(yōu)化2.觸摸空間所有的移動設(shè)備都需要為觸控而設(shè)計。手指最佳觸摸空間是7x7mm，換算成像素約為40像素，將40x40擴(kuò)大為44x44px，是覆蓋觸控區(qū)域和避免用戶出錯的理想空間。因此小屏觸摸交互界面必須設(shè)置合理的界面元素及流暢的間距才能滿足用戶的操作體驗。7.1.3網(wǎng)頁觸摸式設(shè)計優(yōu)化3.手勢設(shè)計我們通過在觸摸屏上執(zhí)行手勢來與移動設(shè)備進(jìn)行交互。這些手勢引發(fā)了個人與內(nèi)容的密切聯(lián)系，并增強(qiáng)了操縱屏幕對象的感覺。我們通常期望用以下標(biāo)準(zhǔn)手勢來與移動設(shè)備進(jìn)行交互。輕敲：相當(dāng)于觸摸領(lǐng)域的“鼠標(biāo)單擊”，是萬能的操作方式，能夠和屏幕上任何元素進(jìn)行交互。拖：在屏幕上進(jìn)行元素移動的手勢。輕彈：快速滾動或平移圖片的手勢，可以實現(xiàn)翻頁等操作?；瑒樱号c輕敲一樣，是用戶非常熟悉的手勢。在表格中，用滑動手勢可以實現(xiàn)顯示刪除按鈕等操作。雙擊：放大并居中內(nèi)容或圖像。當(dāng)內(nèi)容或圖像已經(jīng)放大時，運(yùn)用該手勢則會縮小內(nèi)容或圖像。捏合：最形象的手勢，兩指向外捏合時放大圖片、地圖及頁面，向內(nèi)捏合時縮小圖片、地圖及頁面。7.1.3網(wǎng)頁觸摸式設(shè)計優(yōu)化三指捏合：三指向內(nèi)捏時復(fù)制選定的文本，三指向外捏時粘貼復(fù)制的文本。三指輕掃：三指向左滑動時啟動撤消，三指向右滑動時啟動重做。長按：相當(dāng)于觸摸屏上的“右鍵”，長按可編輯或可選擇的文本時，會突出顯示選擇的文本并顯示編輯菜單。旋轉(zhuǎn)：即用于旋轉(zhuǎn)圖像或視圖的手勢。搖：啟動撤消或重做。7.1.3網(wǎng)頁觸摸式設(shè)計優(yōu)化

使用“新建參考線”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用