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

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

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

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

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

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

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

中糧網(wǎng)頁(yè)3.信息型網(wǎng)頁(yè)信息型網(wǎng)頁(yè)即信息集合的網(wǎng)頁(yè)，向用戶(hù)提供專(zhuān)業(yè)的行業(yè)訊息，常見(jiàn)于門(mén)戶(hù)網(wǎng)站和專(zhuān)業(yè)網(wǎng)站。1.3網(wǎng)頁(yè)設(shè)計(jì)的基本類(lèi)型

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

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

HTML技術(shù)

CSS技術(shù)

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

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

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

2.1.3分辨率分辨率

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

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

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

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

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

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

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

段落間距

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

設(shè)計(jì)尺寸

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

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

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

重心調(diào)整

2.線條調(diào)整同等厚度的線條，因?yàn)橐曞e(cuò)覺(jué)會(huì)使得豎線看起來(lái)要比橫線薄。在進(jìn)行圖標(biāo)繪制時(shí)，有時(shí)我們會(huì)通過(guò)適當(dāng)調(diào)整線條尺寸來(lái)避免視錯(cuò)覺(jué)現(xiàn)象，保證圖標(biāo)的視覺(jué)平衡。

線條調(diào)整

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

顏色調(diào)整

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

iconfont界面

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

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

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

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

半透明的遮罩層無(wú)倒計(jì)時(shí)控件

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

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

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

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

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

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

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

基礎(chǔ)表單

分步表單高級(jí)表單

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

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

中茶官網(wǎng)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

華為網(wǎng)站購(gòu)物車(chē)頁(yè)

聯(lián)想網(wǎng)站購(gòu)物車(chē)頁(yè)

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

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

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

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

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

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

Design網(wǎng)站

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

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

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

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

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

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

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

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

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

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

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

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