第5章

網(wǎng)頁(yè)界面設(shè)計(jì)案例學(xué)AIGC+PhotoshopUI設(shè)計(jì)目錄CONTENT5.1行業(yè)知識(shí)：網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)5.2實(shí)戰(zhàn)案例：設(shè)計(jì)家裝公司官網(wǎng)首頁(yè)5.3實(shí)戰(zhàn)案例：設(shè)計(jì)家裝公司官網(wǎng)內(nèi)頁(yè)5.4實(shí)戰(zhàn)案例：切片與輸出家裝公司網(wǎng)頁(yè)5.5拓展訓(xùn)練5.6AI輔助設(shè)計(jì)5.1.1網(wǎng)頁(yè)界面的組成頁(yè)頭頁(yè)頭主要包含網(wǎng)站標(biāo)識(shí)和導(dǎo)航等內(nèi)容。導(dǎo)航需要展示網(wǎng)頁(yè)的類目顯示，便于用戶查看二級(jí)內(nèi)容。Banner一般位于導(dǎo)航欄下方，主要展現(xiàn)網(wǎng)頁(yè)的重點(diǎn)內(nèi)容，如宣傳活動(dòng)、宣傳廣告、主推的商品等，需要具有較強(qiáng)的視覺(jué)影響力。版塊內(nèi)容一般位于Banner下方，主要是對(duì)網(wǎng)頁(yè)的主要內(nèi)容進(jìn)行展現(xiàn)。頁(yè)尾位于網(wǎng)頁(yè)的結(jié)尾部分，一般用于總結(jié)網(wǎng)頁(yè)內(nèi)容，或展示分類信息，與導(dǎo)航具有一定對(duì)應(yīng)關(guān)系，便于用戶重新瀏覽網(wǎng)頁(yè)。底部還會(huì)展示版權(quán)聲明、備案信息等內(nèi)容。網(wǎng)頁(yè)界面組成5.1.2網(wǎng)頁(yè)界面常見(jiàn)的類型90首頁(yè)首頁(yè)又稱為主頁(yè)，一般是用戶訪問(wèn)網(wǎng)站時(shí)出現(xiàn)的第一個(gè)界面，也是用戶了解該網(wǎng)站內(nèi)容的第一步。首頁(yè)主要包含主題圖像區(qū)、介紹信息區(qū)和用戶登錄/注冊(cè)區(qū)等區(qū)域。詳情頁(yè)詳情頁(yè)是用于展示產(chǎn)品詳細(xì)信息的頁(yè)面?？刂婆_(tái)頁(yè)控制臺(tái)頁(yè)是集合網(wǎng)站數(shù)據(jù)，并用圖形、數(shù)字和文案等方式展示相應(yīng)數(shù)據(jù)信息，將數(shù)據(jù)一目了然地呈現(xiàn)給用戶的頁(yè)面。表單頁(yè)表單頁(yè)是用于執(zhí)行登錄、注冊(cè)、下單和評(píng)論等功能的頁(yè)面。表單頁(yè)的結(jié)構(gòu)較簡(jiǎn)單，但要有邏輯，以便快速地引導(dǎo)用戶完成各項(xiàng)操作。列表頁(yè)列表頁(yè)又稱list頁(yè)，常用于整合網(wǎng)站信息，方便用戶查看信息并進(jìn)行對(duì)應(yīng)的操作。專題頁(yè)專題頁(yè)是針對(duì)某一特定主題而制作的頁(yè)面，包含豐富的信息，設(shè)計(jì)要求較高。常見(jiàn)的類型網(wǎng)頁(yè)界面5.1.3網(wǎng)頁(yè)界面的布局方式封面型布局封面型布局的頁(yè)面往往會(huì)直接使用一些極具設(shè)計(jì)感的圖像或動(dòng)畫作為網(wǎng)頁(yè)界面背景，常在此基礎(chǔ)上添加一個(gè)簡(jiǎn)單的“進(jìn)入”按鈕。這種布局方式比較開(kāi)放自由，如果運(yùn)用得恰到好處，會(huì)給用戶帶來(lái)賞心悅目的感覺(jué)。5.1.3網(wǎng)頁(yè)界面的布局方式頂部Banner+柵格布局頂部Banner+柵格布局的具體含義是：頂部為導(dǎo)航欄和Banner大圖，用于展現(xiàn)關(guān)鍵內(nèi)容；中間部分為主要內(nèi)容區(qū)域，為3～5個(gè)分欄，用以展示不同類別的信息；頁(yè)面底部展示企業(yè)的基本信息、聯(lián)系方式和版權(quán)聲明等，起到對(duì)網(wǎng)頁(yè)界面內(nèi)容補(bǔ)充說(shuō)明的作用。無(wú)論用戶的屏幕尺寸有多大，使用這種布局方式都能充分展示界面所有內(nèi)容，便于用戶瀏覽和閱讀。5.1.3網(wǎng)頁(yè)界面的布局方式單欄布局+“國(guó)”字形布局單欄布局是以豎排單欄的形式展現(xiàn)內(nèi)容，常用于小型網(wǎng)站?！皣?guó)”字形布局的網(wǎng)頁(yè)界面通常會(huì)在頁(yè)面最上方放置Logo、導(dǎo)航欄和Banner，然后展現(xiàn)主體內(nèi)容（分為左、中、右三大塊，或是左、右兩大塊），而頁(yè)面底部則是企業(yè)的一些分類信息、聯(lián)系方式等?！皣?guó)”字形布局主題鮮明合理的版式布局適合的風(fēng)格搭配合理元素頁(yè)界面的主題不同，其展現(xiàn)主題的方法也會(huì)不同，如社會(huì)新聞?lì)惥W(wǎng)頁(yè)常采用圖文結(jié)合的方式展現(xiàn)主題，而娛樂(lè)類網(wǎng)頁(yè)則采用音樂(lè)和視頻結(jié)合的方式展現(xiàn)主題。在進(jìn)行網(wǎng)頁(yè)界面設(shè)計(jì)時(shí)，首先要做好版式布局，這樣才能使網(wǎng)頁(yè)界面成品更符合需求、更加美觀。網(wǎng)頁(yè)界面風(fēng)格是對(duì)品牌形象、主營(yíng)商品類型、服務(wù)方式等內(nèi)容的集中體現(xiàn)，是影響用戶第一印象的直接因素。網(wǎng)頁(yè)界面設(shè)計(jì)需合理搭配各構(gòu)成元素，以突出重要信息并引導(dǎo)用戶正確瀏覽。5.1.4網(wǎng)頁(yè)界面的設(shè)計(jì)要求5.1.5網(wǎng)頁(yè)界面的尺寸規(guī)范網(wǎng)頁(yè)界面多是在Windows操作系統(tǒng)中進(jìn)行，因此了解網(wǎng)頁(yè)界面的設(shè)計(jì)規(guī)范可從Windows操作系統(tǒng)出發(fā)。由于Windows操作系統(tǒng)在不斷地升級(jí)改版，因此其界面尺寸有很多，常見(jiàn)的界面尺寸主要包括右圖所示的9種。網(wǎng)頁(yè)界面常見(jiàn)的界面尺寸目錄CONTENT5.1行業(yè)知識(shí)：網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)5.2實(shí)戰(zhàn)案例：設(shè)計(jì)家裝公司官網(wǎng)首頁(yè)5.3實(shí)戰(zhàn)案例：設(shè)計(jì)家裝公司官網(wǎng)內(nèi)頁(yè)5.4實(shí)戰(zhàn)案例：切片與輸出家裝公司網(wǎng)頁(yè)5.5拓展訓(xùn)練5.6AI輔助設(shè)計(jì)案例背景+操作要點(diǎn)運(yùn)用“亮度/對(duì)比度”“色階”“色相/飽和度”命令優(yōu)化圖片的色彩效果。運(yùn)用畫板工具調(diào)整頁(yè)面的大小。案例背景操作要點(diǎn)潤(rùn)朗家裝公司作為一家在裝修行業(yè)有著深厚積累的公司，以其專業(yè)的服務(wù)、高質(zhì)量的成品和創(chuàng)新的管理模式，贏得了市場(chǎng)和客戶的廣泛認(rèn)可。鑒于近期該公司升級(jí)了裝修材料和設(shè)計(jì)人員團(tuán)隊(duì)，準(zhǔn)備重新設(shè)計(jì)官網(wǎng)首頁(yè)界面，方便客戶了解公司信息，同時(shí)更好地宣傳公司實(shí)力，具體要求如下。（1）首頁(yè)主要展現(xiàn)企業(yè)介紹、案例展示、設(shè)計(jì)人員介紹、家居指南內(nèi)容。（2）網(wǎng)頁(yè)結(jié)構(gòu)符合邏輯，主題明確，內(nèi)容清楚、有層次，視覺(jué)效果美觀，能提升企業(yè)形象。設(shè)計(jì)思路13色彩風(fēng)格界面組成與布局2文字設(shè)計(jì)以較為沉穩(wěn)的藍(lán)色為主色，以灰色為輔助色，搭配紅色進(jìn)行點(diǎn)綴。采用頂部Banner+柵格布局的布局方式，逐一羅列企業(yè)介紹、案例展示、設(shè)計(jì)人員介紹、家居指南、頁(yè)尾等內(nèi)容。選擇識(shí)別性強(qiáng)的黑體類字體，如方正超值體簡(jiǎn)、思源黑體。設(shè)計(jì)思路頁(yè)面組成與布局完成后的效果5.2.1設(shè)計(jì)標(biāo)志和導(dǎo)航以房屋的形狀和潤(rùn)朗的首字母大寫“RL”組合的方式設(shè)計(jì)標(biāo)志，使標(biāo)志能直觀凸顯企業(yè)的名稱。同時(shí)設(shè)計(jì)與企業(yè)相關(guān)的導(dǎo)航類目，使用戶能更加直觀了解企業(yè)信息。繪制矩形添加投影樣式繪制房屋形狀5.2.1設(shè)計(jì)標(biāo)志和導(dǎo)航添加文字繪制矩形導(dǎo)航效果||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||5.2.2設(shè)計(jì)Banner設(shè)計(jì)Banner時(shí)可先制作其背景，由于背景圖片的顏色存在偏亮和色彩偏差的情況，因此需要先調(diào)整顏色，然后繪制裝飾形狀和輸入文字。創(chuàng)建剪貼蒙版調(diào)整亮度和對(duì)比||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||5.2.2設(shè)計(jì)Banner添加漸變顏色添加圖層蒙版1調(diào)整色階調(diào)整色相和飽和度||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||5.2.2設(shè)計(jì)Banner繪制并調(diào)整矩形繪制圓角矩形添加投影圖層樣式添加圖層蒙版25.2.2設(shè)計(jì)Banner||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||完成Banner的制作5.2.3設(shè)計(jì)中間區(qū)域中間區(qū)域主要展示企業(yè)介紹、實(shí)景案例、設(shè)計(jì)人員團(tuán)隊(duì)、家居指南板塊，在制作時(shí)可采用“國(guó)”字形布局的方式，分別對(duì)各個(gè)版塊進(jìn)行羅列，使板塊內(nèi)容在具備美觀性的同時(shí)便于查看，但需要注意色彩的統(tǒng)一性。繪制矩形添加文字15.2.3設(shè)計(jì)中間區(qū)域添加素材并繪制矩形復(fù)制并修改按鈕內(nèi)容為文字添加下劃線添加素材作查看更多按鈕添加文字25.2.4設(shè)計(jì)頁(yè)尾區(qū)域頁(yè)尾部分需綜合展示整體案例、挑選設(shè)計(jì)人員、核心優(yōu)勢(shì)、關(guān)于潤(rùn)朗等內(nèi)容，方便用戶快速跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面中。頁(yè)尾效果目錄CONTENT5.1行業(yè)知識(shí)：網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)5.2實(shí)戰(zhàn)案例：設(shè)計(jì)家裝公司官網(wǎng)首頁(yè)5.3實(shí)戰(zhàn)案例：設(shè)計(jì)家裝公司官網(wǎng)內(nèi)頁(yè)5.4實(shí)戰(zhàn)案例：切片與輸出家裝公司網(wǎng)頁(yè)5.5拓展訓(xùn)練5.6AI輔助設(shè)計(jì)案例背景+操作要點(diǎn)運(yùn)用圖框工具置入嵌入圖片素材。運(yùn)用濾鏡庫(kù)調(diào)整圖像的視覺(jué)效果。案例背景操作要點(diǎn)潤(rùn)朗家裝企業(yè)在完成官網(wǎng)首頁(yè)界面的制作后，準(zhǔn)備開(kāi)展后續(xù)的內(nèi)頁(yè)界面設(shè)計(jì)，包括整屋案例網(wǎng)頁(yè)、登錄頁(yè)等，具體要求如下。（1）內(nèi)頁(yè)風(fēng)格與首頁(yè)統(tǒng)一，內(nèi)容要與首頁(yè)內(nèi)容對(duì)應(yīng)。（2）網(wǎng)頁(yè)結(jié)構(gòu)符合邏輯，主題明確，視覺(jué)效果簡(jiǎn)潔美觀、層次分明，符合企業(yè)形象。設(shè)計(jì)思路13色彩設(shè)計(jì)界面組成與布局2字體規(guī)范沿用首頁(yè)中的藍(lán)色為主色，通過(guò)不同的明度增加層次感。屋案例網(wǎng)頁(yè)中可先通過(guò)Banner的形式展示內(nèi)頁(yè)主題；然后通過(guò)列表的方式展現(xiàn)類目，并采用圖文結(jié)合的方式體現(xiàn)企業(yè)在該類目的優(yōu)秀案例，頁(yè)眉設(shè)計(jì)沿用首頁(yè)，加強(qiáng)統(tǒng)一性。登錄頁(yè)則通過(guò)美觀的背景搭配登錄窗口，在具備美觀度的同時(shí)，能快速方便用戶登錄賬號(hào)。選擇識(shí)別性強(qiáng)的黑體類字體，如思源黑體，方便用戶識(shí)別文字內(nèi)容。設(shè)計(jì)思路整屋案例網(wǎng)頁(yè)布局登錄頁(yè)布局設(shè)計(jì)思路整屋案例網(wǎng)頁(yè)效果登錄頁(yè)效果5.3.1設(shè)計(jì)整屋案例網(wǎng)頁(yè)在設(shè)計(jì)整屋案例網(wǎng)頁(yè)時(shí)可先復(fù)制導(dǎo)航部分內(nèi)容，再通過(guò)列表的方式展現(xiàn)業(yè)務(wù)類目，并采用圖文結(jié)合的方式體現(xiàn)優(yōu)秀案例，以更直觀展示裝修效果。添加文字1添加圖像素材5.3.1設(shè)計(jì)整屋案例網(wǎng)頁(yè)繪制箭頭繪制直線添加文字25.3.1設(shè)計(jì)整屋案例網(wǎng)頁(yè)繪制圖形輸入文字3置入嵌入對(duì)象繪制圖框5.3.1設(shè)計(jì)整屋案例網(wǎng)頁(yè)添加文字4制作其他3個(gè)圖文版塊5.3.1設(shè)計(jì)整屋案例網(wǎng)頁(yè)復(fù)制頁(yè)尾部分內(nèi)容5.3.2設(shè)計(jì)登錄頁(yè)設(shè)計(jì)登錄頁(yè)時(shí)，為了避免視覺(jué)效果過(guò)于單調(diào)，可為背景圖制作特殊效果，使其具有油畫質(zhì)感。設(shè)置噴濺參數(shù)添加素材5.3.2設(shè)計(jì)登錄頁(yè)查看濾鏡效果設(shè)置玻璃參數(shù)5.3.2設(shè)計(jì)登錄頁(yè)添加文字和圖標(biāo)繪制矩形和圓角矩形目錄CONTENT5.1行業(yè)知識(shí)：網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)5.2實(shí)戰(zhàn)案例：設(shè)計(jì)家裝公司官網(wǎng)首頁(yè)5.3實(shí)戰(zhàn)案例：設(shè)計(jì)家裝公司官網(wǎng)內(nèi)頁(yè)5.4實(shí)戰(zhàn)案例：切片與輸出家裝公司網(wǎng)頁(yè)5.5拓展訓(xùn)練5.6AI輔助設(shè)計(jì)案例背景+操作要點(diǎn)使用切片工具切片網(wǎng)頁(yè)圖。使用切片選擇工具調(diào)整切片位置。使用“存儲(chǔ)為Web所用格式”命令存儲(chǔ)切片內(nèi)容。案例背景操作要點(diǎn)潤(rùn)朗家裝公司官網(wǎng)界面已制作完成，為了能提升圖片高保真（更接近真實(shí)的視覺(jué)感受）效果、便于后續(xù)添加在網(wǎng)頁(yè)中，還需要切片處理成品圖，并單獨(dú)保存切片后的效果，具體要求如下。（1）切片后的效果要完整。（2）需要保存HTML和圖像2個(gè)文檔，方便使用。設(shè)計(jì)思路分別對(duì)導(dǎo)航、Banner、熱賣商品、精選產(chǎn)品等單獨(dú)進(jìn)行切片，并對(duì)切片后的內(nèi)容進(jìn)行命名和存儲(chǔ)，方便后期調(diào)用。完成后的效果5.4.1切片網(wǎng)頁(yè)界面在切片網(wǎng)頁(yè)界面時(shí)，可按照網(wǎng)頁(yè)的結(jié)構(gòu)設(shè)置參考線。若單個(gè)結(jié)構(gòu)部分高度過(guò)長(zhǎng)，可將該內(nèi)容劃分為多個(gè)部分，再進(jìn)行切片。切片后命名切片的內(nèi)容，方便后期輸出操作。切片效果添加參考線5.4.1切片網(wǎng)頁(yè)界面切片其他區(qū)域編輯切片選項(xiàng)5.4.2輸出網(wǎng)頁(yè)界面將切片后的圖片保存為“PNG-24”格式，并將其輸出到單獨(dú)的文件夾中。存儲(chǔ)圖像存儲(chǔ)切片查看輸出切片的效果目錄CONTENT5.1行業(yè)知識(shí)：網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)5.2實(shí)戰(zhàn)案例：設(shè)計(jì)家裝公司官網(wǎng)首頁(yè)5.3實(shí)戰(zhàn)案例：設(shè)計(jì)家裝公司官網(wǎng)內(nèi)頁(yè)5.4實(shí)戰(zhàn)案例：切片與輸出家裝公司網(wǎng)頁(yè)5.5拓展訓(xùn)練5.6AI輔助設(shè)計(jì)實(shí)訓(xùn)1設(shè)計(jì)水鄉(xiāng)土特產(chǎn)網(wǎng)站首頁(yè)實(shí)訓(xùn)要求:水鄉(xiāng)土特產(chǎn)網(wǎng)站準(zhǔn)備從浙江特產(chǎn)為核心制作用于產(chǎn)品推廣的網(wǎng)站首頁(yè)。整個(gè)首頁(yè)分為Banner、特產(chǎn)介紹、結(jié)尾3個(gè)部分。體現(xiàn)“游浙江，懂浙江”的主題，以圖文結(jié)合的方式介紹當(dāng)?shù)靥禺a(chǎn)，方便用戶了解這些特產(chǎn)。實(shí)訓(xùn)1設(shè)計(jì)水鄉(xiāng)土特產(chǎn)網(wǎng)站首頁(yè)操作思路:水鄉(xiāng)土特產(chǎn)網(wǎng)站首頁(yè)設(shè)計(jì)過(guò)程實(shí)訓(xùn)2設(shè)計(jì)水鄉(xiāng)土特產(chǎn)網(wǎng)