第5章

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

App界面設(shè)計(jì)案例學(xué)AIGC+PhotoshopUI設(shè)計(jì)（微課版）目錄CONTENT6.1行業(yè)知識(shí)：App界面設(shè)計(jì)基礎(chǔ)6.2實(shí)戰(zhàn)案例：設(shè)計(jì)教育App啟動(dòng)頁6.3實(shí)戰(zhàn)案例：設(shè)計(jì)教育App首頁6.4實(shí)戰(zhàn)案例：設(shè)計(jì)教育App其他頁面6.5拓展訓(xùn)練6.6AI輔助設(shè)計(jì)6.1.1App界面的組成狀態(tài)欄位于界面最頂端，用于顯示手機(jī)當(dāng)前運(yùn)營商、時(shí)間、信號(hào)和電量等信息。導(dǎo)航欄位置不固定，用于告知用戶當(dāng)前所處的頁面，也提供切換到其他界面的功能。內(nèi)容區(qū)域是界面占比面積最多的區(qū)域，用于放置該界面的主要內(nèi)容。標(biāo)簽欄用于切換界面中的顯示內(nèi)容。App界面組成6.1.2App界面常見的類型啟動(dòng)頁動(dòng)頁又稱為閃屏頁，是用戶點(diǎn)擊App圖標(biāo)后出現(xiàn)的第一個(gè)頁面，出現(xiàn)時(shí)間通常只有5s。啟動(dòng)頁根據(jù)呈現(xiàn)的內(nèi)容又可以分為：①品牌宣傳型，常用結(jié)構(gòu)為Logo＋軟件名稱＋宣傳語；②活動(dòng)推廣型，常用結(jié)構(gòu)為插畫（占70%面積）＋活動(dòng)主題＋活動(dòng)時(shí)間，或者只用全屏海報(bào)；③節(jié)日關(guān)懷型，常用結(jié)構(gòu)為Logo＋節(jié)日插畫。品牌宣傳型活動(dòng)推廣型節(jié)日關(guān)懷型6.1.2App界面常見的類型引導(dǎo)頁是用戶第一次使用或更新App后，出現(xiàn)的由3~5頁圖片組成的界面，用于幫助用戶快速了解App的主要價(jià)值、功能或更新的新增內(nèi)容，起到引導(dǎo)作用。引導(dǎo)頁根據(jù)呈現(xiàn)的內(nèi)容可以分為功能介紹型、情感代入型和搞笑型。引導(dǎo)頁首頁又稱為起始頁，是用戶開始正式使用App的第一頁，主要用于展示App的主要內(nèi)容，幫助用戶了解App。首頁功能介紹型引導(dǎo)頁首頁6.1.2App界面常見的類型個(gè)人中心頁又稱“我的”界面，是承載用戶個(gè)人資料的界面，主要由用戶頭像和用戶信息組成。個(gè)人中心頁空白頁是由于網(wǎng)絡(luò)、信號(hào)等問題產(chǎn)生的錯(cuò)誤提示頁。注冊/登錄頁是App的必備頁面，用于注冊或登錄個(gè)人賬戶，以此成為App正式用戶，使用App的主要功能?？瞻醉撟?登錄頁個(gè)人中心頁空白頁注冊/登錄頁6.1.3App界面設(shè)計(jì)要求明確傳達(dá)主旨優(yōu)秀的App界面首先要能夠明確傳達(dá)App的主旨，即App的主要功能。保證功能的合理性在進(jìn)行App界面設(shè)計(jì)時(shí)，需要考慮App的使用特點(diǎn)，以保證App功能的合理性。清晰地展現(xiàn)信息層級(jí)App界面設(shè)計(jì)可根據(jù)內(nèi)容的主次，將信息區(qū)分為不同的信息層級(jí)，當(dāng)用戶點(diǎn)擊某層級(jí)信息時(shí)，將自動(dòng)跳轉(zhuǎn)到對應(yīng)層級(jí)中，方便用戶查看。具備美觀性優(yōu)秀的App界面不但內(nèi)容要表達(dá)明確，而且要具備美觀性，只有具有吸引力的App界面才能吸引更多人瀏覽和使用。||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||6.1.4App界面尺寸規(guī)范1．iOS操作系統(tǒng)尺寸規(guī)范iOS系統(tǒng)是由蘋果公司開發(fā)的移動(dòng)端操作系統(tǒng)，屏幕單位是ppi。尺寸通常以iPhone8P/SE/X/12/13為基準(zhǔn)，以分辨率為“1080px×1920px”“1242px×2688px”“1125px×2436px”的尺寸來設(shè)計(jì)，其他型號(hào)的設(shè)計(jì)尺寸可依據(jù)通用尺寸向上或向下適配。iOS操作系統(tǒng)尺寸規(guī)范Android操作系統(tǒng)是一種基于Linux內(nèi)核（不包含GNU組件）的自由及開放源代碼的操作系統(tǒng)，主要應(yīng)用于移動(dòng)設(shè)備中，屏幕單位是dp。在設(shè)計(jì)Android屏幕尺寸時(shí)，通常采用“720px×1280px”和“1080px×1920px”的屏幕尺寸。6.1.4App界面尺寸規(guī)范2．Android操作系統(tǒng)設(shè)計(jì)規(guī)范6.1.4App界面尺寸規(guī)范3．Harmony操作系統(tǒng)尺寸規(guī)范Harmony（鴻蒙操作系統(tǒng)）操作系統(tǒng)是華為推出的一款面向全場景的分布式操作系統(tǒng)，它支持多種設(shè)備，包括手機(jī)、平板、智能穿戴、智慧屏、車機(jī)等。隨著鴻蒙系統(tǒng)的不斷發(fā)展，越來越多的開發(fā)者開始關(guān)注并投入到鴻蒙應(yīng)用的開發(fā)中。屏幕單位是vp，vp與px的轉(zhuǎn)換公式為vp=（px×160）/ppi。在設(shè)計(jì)Harmony界面時(shí)通常采用360vp×640vp（即720px×1280px）的尺寸進(jìn)行制作。6.1.5界面標(biāo)注的規(guī)范標(biāo)注色在進(jìn)行界面標(biāo)注時(shí)，標(biāo)注文字所用的顏色應(yīng)該與所設(shè)計(jì)的界面顏色區(qū)分開來，必要時(shí)可通過描邊的方式進(jìn)行內(nèi)容的區(qū)分。標(biāo)注方式在進(jìn)行界面標(biāo)注時(shí)，要注意標(biāo)注方式，整潔的標(biāo)注不但視覺效果更加美觀，而且便于程序員查找標(biāo)注信息。在進(jìn)行標(biāo)注設(shè)計(jì)時(shí)，可將標(biāo)注分為兩部分，一部分用來標(biāo)注整體內(nèi)容，另一部分用來標(biāo)注細(xì)節(jié)，這樣更加便于他人識(shí)別。界面標(biāo)注效果目錄CONTENT6.1行業(yè)知識(shí)：App界面設(shè)計(jì)基礎(chǔ)6.2實(shí)戰(zhàn)案例：設(shè)計(jì)教育App啟動(dòng)頁6.3實(shí)戰(zhàn)案例：設(shè)計(jì)教育App首頁6.4實(shí)戰(zhàn)案例：設(shè)計(jì)教育App其他頁面6.5拓展訓(xùn)練6.6AI輔助設(shè)計(jì)案例背景+操作要點(diǎn)運(yùn)用橢圓工具、矩形工具制作圖像。運(yùn)用橫排文字工具輸入文字。運(yùn)用時(shí)間軸制作動(dòng)畫。案例背景操作要點(diǎn)求知教育英才培訓(xùn)公司（簡稱“求知教育”）為了滿足現(xiàn)代學(xué)習(xí)者隨時(shí)隨地可以進(jìn)行學(xué)習(xí)的需求，決定緊跟時(shí)代步伐，打造一款集在線學(xué)習(xí)、互動(dòng)交流、智能管理于一體的教育App，并先設(shè)計(jì)啟動(dòng)頁，具體要求如下。（1）整體風(fēng)格應(yīng)簡潔、大氣，符合“教育”主題。（2）色彩搭配應(yīng)舒適、合理，能提供較佳的學(xué)習(xí)體驗(yàn)。（3）突出求知教育的宣傳語和標(biāo)志。（4）為文字制作動(dòng)畫，提升啟動(dòng)頁的吸引力。設(shè)計(jì)思路色彩風(fēng)格字體規(guī)范界面內(nèi)容布局動(dòng)畫創(chuàng)意選擇簡約、清新的風(fēng)格，以較為清新的藍(lán)色為主，搭配白色，營造豐富、有層次感卻又和諧的色彩效果。選擇“思源黑體CN”為App界面主要字體，方便用戶識(shí)別。加粗處理標(biāo)題及重要文字信息，或使用主色進(jìn)行強(qiáng)調(diào)。可采用對稱布局方式，整個(gè)效果和文字按照一條中軸線進(jìn)行排列，整個(gè)效果直觀，便于識(shí)別。采用動(dòng)畫的形式對“解答”圖標(biāo)添加動(dòng)效，使整個(gè)啟動(dòng)頁更具有動(dòng)感，以提升吸引力。啟動(dòng)頁原型圖啟動(dòng)頁參考效果6.2.1設(shè)計(jì)啟動(dòng)頁背景在制作啟動(dòng)頁背景時(shí)，先繪制豐富顏色的背景圖，再繪制圓、圓角矩形提升背景的層次感，再繪制矩形將背景分為兩個(gè)板塊，方便后續(xù)放置界面內(nèi)容。制作背景繪制正圓添加圖層樣式添加網(wǎng)格素材調(diào)整顏色繪制圓角矩形繪制圓角矩形2繪制底部形狀6.2.2設(shè)計(jì)啟動(dòng)頁內(nèi)容啟動(dòng)頁的內(nèi)容主要包括文字、圖形和標(biāo)志。在添加內(nèi)容時(shí)，先輸入廣告文字，再添加圖形和圖標(biāo)，以提高美觀度，最后制作跳轉(zhuǎn)按鈕。輸入文字1創(chuàng)建剪貼蒙版輸入文字2繪制正圓6.2.2設(shè)計(jì)啟動(dòng)頁內(nèi)容輸入文字3添加素材輸入底部文字輸入文字46.2.3設(shè)計(jì)啟動(dòng)頁動(dòng)畫為了讓啟動(dòng)頁更加有特色可添加動(dòng)畫，這里對“解答”圖標(biāo)制作移動(dòng)效果，并通過依次展現(xiàn)素材和文字的方式，讓整個(gè)啟動(dòng)頁“動(dòng)”起來。要實(shí)現(xiàn)這些效果需通過“時(shí)間軸”面板來完成。重命名圖層調(diào)整第1幀內(nèi)容選擇時(shí)間軸6.2.3設(shè)計(jì)啟動(dòng)頁動(dòng)畫復(fù)制并設(shè)置時(shí)間軸調(diào)整圖標(biāo)位置11調(diào)整圖標(biāo)位置26.2.3設(shè)計(jì)啟動(dòng)頁動(dòng)畫復(fù)制并設(shè)置時(shí)間軸調(diào)整圖標(biāo)位置26.2.3設(shè)計(jì)啟動(dòng)頁動(dòng)畫導(dǎo)出動(dòng)畫目錄CONTENT6.1行業(yè)知識(shí)：App界面設(shè)計(jì)基礎(chǔ)6.2實(shí)戰(zhàn)案例：設(shè)計(jì)教育App啟動(dòng)頁6.3實(shí)戰(zhàn)案例：設(shè)計(jì)教育App首頁6.4實(shí)戰(zhàn)案例：設(shè)計(jì)教育App其他頁面6.5拓展訓(xùn)練6.6AI輔助設(shè)計(jì)案例背景+操作要點(diǎn)運(yùn)用魔棒工具摳取圖像。輸入文字并繪制圖形。運(yùn)用PxCook標(biāo)注首頁。案例背景操作要點(diǎn)求知教育App首頁需全面地展現(xiàn)App特色，幫助用戶了解其功能，引導(dǎo)用戶使用，具體要求如下。（1）首頁效果應(yīng)簡潔、大氣，符合現(xiàn)代審美趨勢。（2）色彩搭配應(yīng)舒適、內(nèi)容體現(xiàn)直觀。（3）采用分欄布局方式，分別展示App的類目和教育方式，布局合理、清晰。設(shè)計(jì)思路色彩風(fēng)格字體規(guī)范界面內(nèi)容布局以藍(lán)色為主，搭配黃色、橙色、綠色等顏色，營造豐富、有層次感的色彩效果。仍選擇“思源黑體CN”為App界面主要字體，保持界面間的統(tǒng)一性。通過設(shè)置不同文字顏色體現(xiàn)重要文字信息，方便識(shí)別。主頁可采用分欄布局方式，上方為狀態(tài)欄和搜索欄，中間為Banner和列表，中下方為各個(gè)版塊，底部為導(dǎo)航欄。首頁原型圖首頁參考效果6.3.1設(shè)計(jì)狀態(tài)欄和導(dǎo)航欄設(shè)計(jì)首頁前，可使用參考線劃分內(nèi)容區(qū)域，便于后續(xù)制作。在制作時(shí)，因狀態(tài)欄是手機(jī)自帶顯示區(qū)無需設(shè)計(jì)，直接使用提供素材占據(jù)位置即可，導(dǎo)航欄只需繪制圖形和添加文字。標(biāo)尺和尺寸效果添加搜索圖標(biāo)和文字繪制掃碼圖標(biāo)添加狀態(tài)欄繪制圓角矩形6.3.2設(shè)計(jì)內(nèi)容區(qū)域內(nèi)容區(qū)主要分為3個(gè)部分，頂部為Banner區(qū)域用于明確App定位為“AI智能題庫”，其下方為App的功能分類列表，該分類列表主要通過圖標(biāo)的方式體現(xiàn)，在分類列表下方展示常用板塊。摳取素材添加素材輸入文字16.3.2設(shè)計(jì)內(nèi)容區(qū)域添加投影圖層樣式2添加投影圖層樣式3復(fù)制與編輯圓角矩形添加投影樣式1添加文字Banner區(qū)域效果6.3.2設(shè)計(jì)內(nèi)容區(qū)域添加素材并輸入文字繪制圓角矩形創(chuàng)建剪貼蒙版6.3.2設(shè)計(jì)內(nèi)容區(qū)域輸入文字2繪制圓角矩形并添加素材輸入文字36.3.3設(shè)計(jì)標(biāo)簽欄設(shè)計(jì)標(biāo)簽欄時(shí)，可先繪制矩形用作底紋，然后在其上方添加標(biāo)簽按鈕，并輸入標(biāo)簽文字。繪制矩形添加圖標(biāo)輸入文字6.3.4標(biāo)注App首頁界面完成首頁的設(shè)計(jì)后，可使用PxCook進(jìn)行標(biāo)注，不僅標(biāo)注出尺寸、文字、間距、顏色等內(nèi)容，還應(yīng)具備完整性和美觀性。新建項(xiàng)目放大首頁生成圓角矩形標(biāo)注6.3.4標(biāo)注App首頁界面生成掃碼圖像的標(biāo)注生成文字標(biāo)注繪制間距標(biāo)注距離標(biāo)注標(biāo)注文字標(biāo)注“了解詳情”按鈕6.3.4標(biāo)注App首頁界面內(nèi)容1版塊的標(biāo)注生成其余標(biāo)注首頁界面標(biāo)注效果標(biāo)注間距生成文字標(biāo)注目錄CONTENT6.1行業(yè)知識(shí)：App界面設(shè)計(jì)基礎(chǔ)6.2實(shí)戰(zhàn)案例：設(shè)計(jì)教育App啟動(dòng)頁6.3實(shí)戰(zhàn)案例：設(shè)計(jì)教育App首頁6.4實(shí)戰(zhàn)案例：設(shè)計(jì)教育App其他頁面6.5拓展訓(xùn)練6.6AI輔助設(shè)計(jì)案例背景+操作要點(diǎn)運(yùn)用橡皮檫工具擦除多余的圖像。運(yùn)用鋼筆工具、矩形工具、直線工具、橢圓工具繪制形狀。運(yùn)用文字工具組輸入文字信息。案例背景操作要點(diǎn)隨著求知教育App首頁的制作完成，該品牌準(zhǔn)備開展后續(xù)的其他頁面設(shè)計(jì)工作，包括登錄頁、個(gè)人中心頁、視頻播放頁等，以更好地宣傳品牌，具體要求如下。（1）采用與首頁相同的風(fēng)格，視覺效果美觀。（2）界面布局直觀且易于識(shí)別，能凸顯頁面表達(dá)的內(nèi)容。設(shè)計(jì)思路色彩風(fēng)格字體規(guī)范界面布局繼續(xù)沿用首頁的主色為藍(lán)色，輔助色為白色，保持簡約、清新的風(fēng)格。延續(xù)選擇“思源黑體CN”為App界面主要字體，新增“方正蘭亭粗黑_GBK”字體方便用戶識(shí)別。登錄頁可采用對稱布局方式，上方為裝飾圖像，中間為登錄部分按鈕，下方為裝飾形狀，整個(gè)效果直觀，方便用戶快速登錄；個(gè)人中心頁可采用左對齊的方式，將人物形象、列表內(nèi)容左對齊顯示，方便查看；視頻播放頁采用對稱布局方式，中間主要用于播放視頻內(nèi)容，其他部分則采用圖標(biāo)和文字的方式展示，甚至留白處理，更加方便用戶識(shí)別。其他頁面的原型圖參考效果設(shè)計(jì)思路其他頁面的原型圖參考效果6.4.1設(shè)計(jì)登錄頁在設(shè)計(jì)登錄頁時(shí)，將沿用首頁界面的色彩設(shè)計(jì)，并采用上圖下文的方式展現(xiàn)內(nèi)容，使整個(gè)界面效果簡潔、美觀。繪制形狀復(fù)制與調(diào)整形狀擦除形狀繪制圓角矩形設(shè)置圖層混合模式復(fù)制形狀并修改顏色6.4.1設(shè)計(jì)登錄頁擦除形狀繪制圓角矩形設(shè)置圖層混合模式6.4.2設(shè)計(jì)個(gè)人中心頁繼續(xù)設(shè)計(jì)App個(gè)人中心頁界面，在設(shè)計(jì)時(shí)，要將個(gè)人信息、圖標(biāo)和重要內(nèi)容體現(xiàn)出來，便于用戶查看交易信息，并在界面下方展現(xiàn)App系統(tǒng)設(shè)置信息，幫助用戶設(shè)置個(gè)人信息。輸入文字添加人物素材創(chuàng)建剪貼蒙版6.4.2設(shè)計(jì)個(gè)人中心頁添加文字1添加文字2制作標(biāo)簽欄6.4.3設(shè)計(jì)視頻播放頁在設(shè)計(jì)視頻播放頁時(shí)，先制作藍(lán)色的背景，再設(shè)計(jì)視頻標(biāo)簽、按鈕，突出視頻標(biāo)題，并添加視頻播放窗口素材。制作背景繪制圓角矩形添加素材目錄CONTENT6.1行業(yè)知識(shí)：App界面設(shè)計(jì)基礎(chǔ)6.2實(shí)戰(zhàn)案例：設(shè)計(jì)教育App啟動(dòng)頁6.3實(shí)戰(zhàn)案例：設(shè)計(jì)教育App首頁6.4實(shí)戰(zhàn)案例：設(shè)計(jì)教育App其他頁面6.5拓展訓(xùn)練6.6AI輔助設(shè)計(jì)實(shí)訓(xùn)1設(shè)計(jì)讀書App啟動(dòng)頁實(shí)訓(xùn)要求:誠悅讀書App準(zhǔn)備制作與夏至有關(guān)的啟動(dòng)頁，用于迎接夏至節(jié)氣，效果要符合節(jié)氣特點(diǎn)。要求尺寸為750像素×1624像素，以“荷花”為設(shè)計(jì)點(diǎn)，通過濾鏡的處理，使效果更具質(zhì)感。實(shí)訓(xùn)1設(shè)計(jì)讀書App啟動(dòng)頁操作思路:①打開素材②添加濾鏡③添加文字和圖標(biāo)④制作動(dòng)畫讀書App啟動(dòng)頁實(shí)訓(xùn)2設(shè)計(jì)家居App首頁實(shí)訓(xùn)要求:為夢想家家居App制作首頁界面，其效果需符合家居主題，采用恰當(dāng)?shù)牟季址绞健３叽鐬?50像素×1624像素。視覺效果簡約，通過商品圖片、圖標(biāo)、文字形式的來展現(xiàn)首頁內(nèi)容。標(biāo)注要具體、直觀。實(shí)訓(xùn)2設(shè)計(jì)家居App首頁操作思路:家居網(wǎng)App首頁設(shè)計(jì)過程①繪制不同的形狀②添加圖片和圖標(biāo)③輸入文字目錄CONTENT6.1行業(yè)知識(shí)：App界面設(shè)計(jì)基礎(chǔ)6.2實(shí)戰(zhàn)案例：設(shè)計(jì)教育App啟動(dòng)頁6.3實(shí)戰(zhàn)案例：設(shè)計(jì)教育App首頁6.4實(shí)戰(zhàn)案例：設(shè)計(jì)教育App其他頁面6.5拓展訓(xùn)練6.6AI輔助設(shè)計(jì)Pixso設(shè)計(jì)音樂App界面Pixso是一款集原型設(shè)計(jì)、視覺設(shè)計(jì)與項(xiàng)目交付于一體化的在線協(xié)作設(shè)計(jì)工具，適用于產(chǎn)品經(jīng)理、UI設(shè)計(jì)人員、運(yùn)營、開發(fā)和管理層等多角色使用。通過其智能組件庫，Pixso能簡單快速地助力設(shè)計(jì)人員進(jìn)行設(shè)計(jì)，同時(shí)支持多人同時(shí)協(xié)作，無數(shù)量限制，提供多種文件格式導(dǎo)入和導(dǎo)出選項(xiàng)，確保設(shè)計(jì)人員在不同階段都能高效工作。此外，Pixso還提供了AI繪畫功能，為設(shè)計(jì)人員提供更多的設(shè)計(jì)支持和創(chuàng)意靈感。例如，使用Pixso設(shè)計(jì)音樂App界面。Pixso設(shè)計(jì)音樂App界面MODAO墨刀設(shè)計(jì)食堂App取餐界面MODAO墨刀是一款在線原型設(shè)計(jì)與協(xié)同工具，支持App、網(wǎng)站頁面、管理后臺(tái)、可視化大屏、工業(yè)HMI、小程序、H5等多場景應(yīng)用領(lǐng)域。借助墨刀，產(chǎn)品經(jīng)理、設(shè)計(jì)人員、開發(fā)人員、銷售人員、運(yùn)營人員及創(chuàng)業(yè)者等用戶群體能夠輕松搭建產(chǎn)品原型，并直觀演示項(xiàng)目效果。墨刀同時(shí)也是協(xié)作平臺(tái)，項(xiàng)目成員可以協(xié)作編輯、審閱，不管是產(chǎn)品想法展示，還是向客戶收集產(chǎn)品反饋，向投資人進(jìn)行Demo展示，或是在團(tuán)隊(duì)內(nèi)部協(xié)作溝通、進(jìn)行項(xiàng)目管理。例如，使用MODAO墨刀設(shè)計(jì)食堂App取餐界面。MODAO墨刀設(shè)計(jì)食堂App取餐界面感謝觀看THANKYOU案例學(xué)AIGC+PhotoshopUI設(shè)計(jì)（微課版）第7章

軟件界面設(shè)計(jì)案例學(xué)AIGC+PhotoshopUI設(shè)計(jì)（微課版）目錄CONTENT7.1行業(yè)知識(shí)：軟件界面設(shè)計(jì)基礎(chǔ)7.2實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件啟動(dòng)頁7.3實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件著陸頁7.4實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件其他頁面7.5拓展訓(xùn)練7.6AI輔助設(shè)計(jì)7.1.1軟件界面的組成軟件界面組成導(dǎo)航欄導(dǎo)航欄可為用戶提供切換到其他界面的功能，使用戶明確頁面位置和層級(jí)。常見的導(dǎo)航模式有左側(cè)導(dǎo)航和頂部導(dǎo)航，當(dāng)導(dǎo)航項(xiàng)目或者軟件超過5個(gè)頁面時(shí)，常使用左側(cè)導(dǎo)航，這是因?yàn)樽髠?cè)導(dǎo)航通常可以折疊，節(jié)省界面空間，而頂部導(dǎo)航是始終可見的。命令區(qū)域命令區(qū)域可為用戶提供快速使用軟件、登錄、消息提示等功能，可以配合導(dǎo)航進(jìn)行使用，通常放置在界面的頂部或底部。內(nèi)容區(qū)域用于展示該界面的主要內(nèi)容，根據(jù)不同內(nèi)容可使用不同的界面布局方式。7.1.2軟件界面常見的類型啟動(dòng)頁啟動(dòng)頁是用戶激活軟件后首先呈現(xiàn)的界面，其主要作用是在軟件初始化過中為用戶提供視覺反饋。由于啟動(dòng)過程可能需要一定時(shí)間，因此，該頁面的設(shè)計(jì)往往追求簡潔與高識(shí)別度，以便在短暫的時(shí)間內(nèi)給用戶留下深刻印象。啟動(dòng)頁7.1.2軟件界面常見的類型著陸頁著陸頁又被稱為主頁，是用戶正式進(jìn)入軟件后首先瀏覽的頁面。此頁面設(shè)計(jì)的重點(diǎn)在于直觀展示軟件的核心功能和用戶可能感興趣的內(nèi)容，從而引導(dǎo)用戶進(jìn)一步探索軟件。著陸頁7.1.2軟件界面常見的類型聚合頁聚合頁是一個(gè)將多種內(nèi)容或數(shù)據(jù)集中展示，便于用戶快速瀏覽和選擇的界面，其作用類似于列表頁。根據(jù)內(nèi)容的不同，設(shè)計(jì)人員可靈活采用網(wǎng)格或列表等排版方式，以提高信息的可讀性和可訪問性。聚合頁7.1.2軟件界面常見的類型內(nèi)頁屬于二級(jí)頁面，即從著陸頁進(jìn)一步鏈接到的頁面。這些頁面可能提供更多詳細(xì)信息、產(chǎn)品說明、購買選項(xiàng)等。內(nèi)頁當(dāng)用戶從聚合頁中或是內(nèi)頁中選擇特定內(nèi)容后，將被引導(dǎo)至詳情信息頁。單頁通常用于收集用戶數(shù)據(jù)，如賬戶創(chuàng)建、偏好設(shè)置或用戶反饋等。在設(shè)計(jì)表單頁時(shí)，應(yīng)確保界面友好、直觀，并采取措施保護(hù)用戶數(shù)據(jù)的安全。詳情信息頁表單頁詳情信息頁目錄CONTENT7.1行業(yè)知識(shí)：軟件界面設(shè)計(jì)基礎(chǔ)7.2實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件啟動(dòng)頁7.3實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件著陸頁7.4實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件其他頁面7.5拓展訓(xùn)練7.6AI輔助設(shè)計(jì)案例背景+操作要點(diǎn)運(yùn)用“曲線”命令調(diào)整顏色。運(yùn)用橡皮檫工具擦除圖像局部，用橢圓工具繪制形狀。運(yùn)用“圖層蒙版”命令，調(diào)整顯示區(qū)域。運(yùn)用“添加雜色”濾鏡，添加雜色。案例背景操作要點(diǎn)某互聯(lián)網(wǎng)公司為了更好地統(tǒng)計(jì)與分析公司銷售數(shù)據(jù)，準(zhǔn)備設(shè)計(jì)一款名稱為“數(shù)據(jù)分析平臺(tái)”的數(shù)據(jù)分析的軟件，現(xiàn)在需要設(shè)計(jì)該軟件的啟動(dòng)頁，具體要求如下。（1）整體風(fēng)格應(yīng)簡潔、大氣，色彩搭配簡單、舒適，符合互聯(lián)網(wǎng)公司的審美定位。（2）尺寸為1920像素×1080像素，分辨率為72像素/英寸。（3）界面布局應(yīng)合理、清晰，能直觀凸顯內(nèi)容。設(shè)計(jì)思路色彩風(fēng)格字體規(guī)范內(nèi)容布局使用簡約、清新的風(fēng)格，以藍(lán)色為主，搭配白色，營造豐富、有層次感卻又和諧的色彩效果。選擇“思源黑體CN”為主要字體，方便用戶識(shí)別。采用中心布局的方式，在科技感背景的基礎(chǔ)上，輸入文字，直觀地體現(xiàn)啟動(dòng)頁信息。軟件啟動(dòng)頁的原型圖設(shè)計(jì)思路軟件啟動(dòng)頁參考效果7.2.1設(shè)計(jì)啟動(dòng)頁背景在制作啟動(dòng)頁背景時(shí)，可在提供的背景圖素材中添加光源，調(diào)整背景圖素材的顏色，并添加雜色，提升背景質(zhì)感。過渡背景添加其他光源添加光源7.2.1設(shè)計(jì)啟動(dòng)頁背景調(diào)整曲線制作背景繪制不同大小的圓完成背景的制作添加雜色7.2.2設(shè)計(jì)啟動(dòng)頁內(nèi)容輸入文字后，通過圖層樣式為主要文字制作立體效果，使其更加突出。設(shè)置斜面和浮雕設(shè)計(jì)漸變疊加參數(shù)設(shè)置光暈7.2.2設(shè)計(jì)啟動(dòng)頁內(nèi)容查看文字效果輸入其他文字修改圖層樣式目錄CONTENT7.1行業(yè)知識(shí)：軟件界面設(shè)計(jì)基礎(chǔ)7.2實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件啟動(dòng)頁7.3實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件著陸頁7.4實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件其他頁面7.5拓展訓(xùn)練7.6AI輔助設(shè)計(jì)案例背景+操作要點(diǎn)運(yùn)用矩形工具、橢圓工具、直線工具、三角形工具繪制形狀。運(yùn)用海綿工具增加飽和度。案例背景操作要點(diǎn)為能直觀展示軟件的類目和基本信息，需要繼續(xù)為某互聯(lián)網(wǎng)公司開發(fā)的數(shù)據(jù)分析軟件設(shè)計(jì)著陸頁，具體要求如下。（1）界面風(fēng)格以簡潔為主，能直觀展示各信息。（2）色彩搭配舒適，界面布局整齊有序。（3）尺寸為1920像素×1080像素，分辨率為72像素/英寸。設(shè)計(jì)思路界面組成與布局色彩和風(fēng)格字體規(guī)范采用卡片型的布局方式直觀展現(xiàn)內(nèi)容，最上方為命令區(qū)用于展示軟件名稱和基本按鈕，中間為信息展示區(qū)，左側(cè)為列表用于分類展示數(shù)據(jù)類目。界面的定位為數(shù)據(jù)分析，為了便于區(qū)分可選擇深藍(lán)色為主色調(diào)，搭配粉色、紅色、紫色、黃色、綠色等進(jìn)行點(diǎn)綴，劃分界面層次.為了便于用戶識(shí)別，選擇“思源黑體”作為軟件界面主要字體。著陸頁組成與布局設(shè)計(jì)思路著陸頁參考效果色彩搭配7.3.1設(shè)計(jì)命令區(qū)01新建大小為“1920像素×1080像素”，分辨率為“72像素/英寸”，顏色模式為“RGB顏色”，名稱為“數(shù)據(jù)分析軟件著陸頁”的文件。0204選擇“橫排文字工具”，輸入文字，在工具屬性欄中設(shè)置“字體”為“思源黑體CN”，調(diào)整文字的顏色、位置和大小。將前景色設(shè)置為“#edf5fb”，填充前景色到“背景”圖層。03選擇“矩形工具”，設(shè)置“填充”為“#162aa9”，在圖像左上角繪制大小為“300像素×100像素”的矩形，然后在矩形的右側(cè)繪制“填充”為“#224ec9”，大小為“1620像素×100像素”的矩形。05打開“數(shù)據(jù)分析軟件著陸頁圖標(biāo)匯總.psd”素材文件，將其中的創(chuàng)建、退出、人物圖標(biāo)拖曳到文字的左側(cè)，調(diào)整大小和位置，7.3.2設(shè)計(jì)導(dǎo)航欄內(nèi)容區(qū)位于導(dǎo)航欄的右側(cè)，主要展示數(shù)據(jù)內(nèi)容，如數(shù)據(jù)匯總、待處理訂單、逾期情況、業(yè)務(wù)員成績排行等。在設(shè)計(jì)時(shí)可先使用矩形進(jìn)行分割，然后進(jìn)行各個(gè)模塊的制作。制作數(shù)據(jù)匯總欄繪制矩形繪制直線7.3.2設(shè)計(jì)導(dǎo)航欄輸入文字1繪制橢圓并添加圖標(biāo)7.3.2設(shè)計(jì)導(dǎo)航欄繪制直線繪制數(shù)據(jù)條7.3.2設(shè)計(jì)導(dǎo)航欄制作待處理訂單版塊輸入文字2繪制三角形組合矩形框7.3.2設(shè)計(jì)導(dǎo)航欄輸入業(yè)務(wù)員成績排行版塊文字業(yè)務(wù)員成績排行版塊制作逾期情況版塊7.3.2設(shè)計(jì)導(dǎo)航欄著陸頁效果目錄CONTENT7.1行業(yè)知識(shí)：軟件界面設(shè)計(jì)基礎(chǔ)7.2實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件啟動(dòng)頁7.3實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件著陸頁7.4實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件其他頁面7.5拓展訓(xùn)練7.6AI輔助設(shè)計(jì)案例背景+操作要點(diǎn)運(yùn)用矩形工具、直線工具繪制圖形，使用文字工具輸入文字。運(yùn)用波紋、油畫濾鏡提升圖像視覺效果。案例背景操作要點(diǎn)某互聯(lián)網(wǎng)公司準(zhǔn)備在著陸頁的基礎(chǔ)上設(shè)計(jì)其他頁面，如內(nèi)頁、詳情信息頁、表單頁等，具體要求如下。（1）各界面設(shè)計(jì)風(fēng)格與著陸頁的風(fēng)格統(tǒng)一。（2）色彩鮮明，每個(gè)部分能直觀體現(xiàn)內(nèi)容。（3）尺寸為1920像素×1080像素，分辨率為72像素/英寸。設(shè)計(jì)思路色彩風(fēng)格字體規(guī)范。界面內(nèi)容布局選擇簡約、清新的風(fēng)格，以深藍(lán)色為主，搭配紫色、綠色和黃色等顏色，并在此基礎(chǔ)上適當(dāng)進(jìn)行明度和純度變化，營造豐富、有層次感卻又和諧的色彩效果。選擇“思源黑體CN”為軟件主要字體，方便用戶識(shí)別。采用卡片型的布局方式，分區(qū)域展示內(nèi)容，圖7-41所示為這些頁面的組成與布局。其他頁面的組成與布局設(shè)計(jì)思路數(shù)據(jù)分析軟件內(nèi)頁效果設(shè)計(jì)思路數(shù)據(jù)分析軟件詳情信息頁效果設(shè)計(jì)思路數(shù)據(jù)分析軟件表單頁效果7.4.1設(shè)計(jì)內(nèi)頁在設(shè)計(jì)內(nèi)頁時(shí)，將沿用著陸頁的色彩搭配，并通過圖表的方式展示內(nèi)容。設(shè)計(jì)命令區(qū)繪制左側(cè)版塊并繪制分割線添加圖表7.4.1設(shè)計(jì)內(nèi)頁輸入文字完成制作7.4.2設(shè)計(jì)詳情信息頁詳情信息頁主要分為3個(gè)部分，即類目、項(xiàng)目銷售報(bào)表文字和圖表。在設(shè)計(jì)時(shí)可使用矩形工具分割各部分內(nèi)容，然后采用圖文結(jié)合的方式對各個(gè)部分進(jìn)行制作。完成命令區(qū)的制作繪制另一個(gè)橢圓并創(chuàng)建蒙版添加圖標(biāo)繪制橢圓并創(chuàng)建蒙版7.4.2設(shè)計(jì)詳情信息頁制作其他模塊制作其他模塊制作其他模塊7.4.2設(shè)計(jì)詳情信息頁詳情信息頁的制作7.4.3設(shè)計(jì)表單頁表單頁在設(shè)計(jì)時(shí)可展示注冊賬號(hào)的流程，在左側(cè)展示注冊會(huì)員的相關(guān)信息，如姓名、郵箱、地址、學(xué)歷等，在右側(cè)通過添加圖片的方式美化頁面，使整個(gè)效果更簡潔、美觀。復(fù)制并修改內(nèi)容1輸入文字7.4.3設(shè)計(jì)表單頁復(fù)制并修改內(nèi)容2添加素材并創(chuàng)建剪貼蒙版7.4.3設(shè)計(jì)表單頁設(shè)置波紋濾鏡查看效果設(shè)置油畫濾鏡7.4.3設(shè)計(jì)表單頁調(diào)整圖像顏色目錄CONTENT7.1行業(yè)知識(shí)：軟件界面設(shè)計(jì)基礎(chǔ)7.2實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件啟動(dòng)頁7.3實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件著陸頁7.4實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件其他頁面7.5拓展訓(xùn)練7.6AI輔助設(shè)計(jì)實(shí)訓(xùn)1設(shè)計(jì)辦公軟件啟動(dòng)頁實(shí)訓(xùn)要求:某互聯(lián)網(wǎng)公司準(zhǔn)備更新研發(fā)的辦公軟件并重新設(shè)計(jì)啟動(dòng)頁，要求效果簡潔、美觀，通過文字的方式提示軟件啟動(dòng)。尺寸為1920像素×1080像素，分辨率為72像素/英寸。實(shí)訓(xùn)1設(shè)計(jì)辦公軟件啟動(dòng)頁操作思路:辦公軟件啟動(dòng)頁設(shè)計(jì)過程①制作背景②添加素材和文字實(shí)訓(xùn)2設(shè)計(jì)辦公軟件內(nèi)頁實(shí)訓(xùn)要求:重新設(shè)計(jì)啟動(dòng)頁，需繼續(xù)設(shè)計(jì)互聯(lián)網(wǎng)公司的辦公軟件內(nèi)頁，以直觀地體現(xiàn)銷售簡報(bào)、今日提醒、產(chǎn)品動(dòng)態(tài)、團(tuán)隊(duì)貢獻(xiàn)等內(nèi)容。尺寸為1920像素×1080像素，分辨率為72像素/英寸。效果簡潔、美觀，布局直觀合理。實(shí)訓(xùn)2設(shè)計(jì)辦公軟件內(nèi)頁操作思路:辦公軟件內(nèi)頁設(shè)計(jì)過程①繪制不同大小的矩形②添加圖標(biāo)、圖表和logo③輸入文字目錄CONTENT7.1行業(yè)知識(shí)：軟件界面設(shè)計(jì)基礎(chǔ)7.2實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件啟動(dòng)頁7.3實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件著陸頁7.4實(shí)戰(zhàn)案例：設(shè)計(jì)數(shù)據(jù)分析軟件其他頁面7.5拓展訓(xùn)練7.6AI輔助設(shè)計(jì)TreeMind樹圖快速生成公司發(fā)展時(shí)間線圖TreeMind樹圖是新一代的AI人工智能思維導(dǎo)圖軟件，它提供了智能思維導(dǎo)圖制作工具和豐富的模板，支持包括腦圖、邏輯圖、樹形圖、魚骨圖、組織架構(gòu)圖、時(shí)間軸（即時(shí)間線）等多種專業(yè)格式。例如，使用TreeMind樹圖生成軟件界面中的公司發(fā)展時(shí)間線圖。TreeMind樹圖快速生成公司發(fā)展時(shí)間線圖ProcessOn生成圖書管理系統(tǒng)原型圖ProcessOn是一款在線作圖工具和社交網(wǎng)絡(luò)平臺(tái)，專注于垂直專業(yè)領(lǐng)域。它支持多種圖形的繪制，如思維導(dǎo)圖、流程圖、UML、網(wǎng)絡(luò)拓?fù)鋱D、組織結(jié)構(gòu)圖、原型圖和時(shí)間軸等。用戶可以直接在瀏覽器中進(jìn)行編輯，無需安裝軟件，從而實(shí)現(xiàn)便捷協(xié)作。除此之外，ProcessOn還支持實(shí)時(shí)協(xié)作，能多人同時(shí)編輯同一文檔，極大提升團(tuán)隊(duì)協(xié)作效率。同時(shí)，還提供版本管理功能，方便用戶查看和恢復(fù)歷史版本，防止誤操作。此外，用戶還可以導(dǎo)入和導(dǎo)出Visio、PDF、Word等多種文件格式，實(shí)現(xiàn)與其他工具的數(shù)據(jù)交換。例如，使用ProcessOn生成圖書管理系統(tǒng)原型圖。ProcessOn生成圖書管理系統(tǒng)原型圖感謝觀看THANKYOU案例學(xué)AIGC+PhotoshopUI設(shè)計(jì)（微課版）第8章

綜合案例：“宛木居”

UI設(shè)計(jì)項(xiàng)目案例學(xué)AIGC+PhotoshopUI設(shè)計(jì)（微課版）目錄CONTENT8.1“宛木居”官網(wǎng)界面設(shè)計(jì)8.2“宛木居”App界面設(shè)計(jì)8.3“宛木居”軟件界面設(shè)計(jì)官網(wǎng)首頁界面需包含企業(yè)標(biāo)志、導(dǎo)航、宣傳Banner、企業(yè)介紹、小區(qū)介紹、二手房介紹、頁尾等信息。界面整體風(fēng)格統(tǒng)一，配色和諧，視覺效果大氣，版塊劃分清晰，文字易識(shí)別。尺寸為1920像素×4430像素，分辨率均為72像素/英寸。8.1.1設(shè)計(jì)官網(wǎng)首頁設(shè)計(jì)要求：8.1.1設(shè)計(jì)官網(wǎng)首頁設(shè)計(jì)思路：首頁界面以青綠色為主色，在設(shè)計(jì)時(shí)首先設(shè)計(jì)企業(yè)標(biāo)志并添加企業(yè)名稱，繪制導(dǎo)航背景，然后輸入導(dǎo)航文字01繪制Banner時(shí)，先繪制矩形并添加房屋相關(guān)素材，調(diào)整不透明度，使圖片與矩形融合，輸入文字，并在文字下方制作輸入框、左右調(diào)整圖標(biāo)和地圖圖標(biāo)。02輸入版塊標(biāo)題文字并在兩側(cè)繪制裝飾線。在文字下方繪制不同形狀的圖形，在左側(cè)圖形上方添加圖片素材，在右側(cè)輸入“為你為家”文字內(nèi)容，然后在下方以“圖標(biāo)+文字”的形式，制作查看詳情圖標(biāo)。03復(fù)制版塊標(biāo)題文字到下方，并修改版塊名稱和文字內(nèi)容，添加小區(qū)相關(guān)圖片素材，并輸入文字說明，為文字繪制背景并在左右兩側(cè)繪制左右圖標(biāo)。04繪制矩形并添加二手房相關(guān)圖片，在圖片的上方和下方分別輸入文字內(nèi)容。05添加樓盤圖片，適當(dāng)擦除圖片頂部，使其與界面融入的更加自然。06在底部繪制頁尾背景形狀，添加標(biāo)志、圖標(biāo)、聯(lián)系方式等頁尾內(nèi)容。078.1.1設(shè)計(jì)官網(wǎng)首頁設(shè)計(jì)思路：官網(wǎng)首頁參考效果8.1.2設(shè)計(jì)官網(wǎng)內(nèi)頁||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||詳細(xì)分類展示二手房的各類房產(chǎn)信息，便于用戶快速查找。界面高度不限，寬度為1920像素，分辨率72像素/英寸。設(shè)計(jì)要求：8.1.2設(shè)計(jì)官網(wǎng)內(nèi)頁設(shè)計(jì)思路：內(nèi)頁界面以繼續(xù)沿用青綠為主色，并以灰色進(jìn)行搭配，在設(shè)計(jì)時(shí)首先制作導(dǎo)航內(nèi)容，注意“二手房”文字比其他文字要大。添加前面制作的圖標(biāo)并修改顏色突出顯示，在右側(cè)輸入文字，并在文字下方制作輸入框和搜索圖標(biāo)。繪制淺灰色的矩形，在上方輸入位置、房型、朝向、樓層、標(biāo)簽等文字內(nèi)容，并繪制矩形框。使用矩形和直線劃分內(nèi)容，輸入文字內(nèi)容，并在左側(cè)添加房屋圖片。繪制矩形并添加二手房相關(guān)圖片，在圖片的上方和下方分別輸入文字內(nèi)容，這些內(nèi)容可直接在首頁中復(fù)制。采用與制作首頁頁尾相同的方法制作內(nèi)頁頁尾內(nèi)容官網(wǎng)內(nèi)頁效果8.1.3設(shè)計(jì)官網(wǎng)登錄頁設(shè)計(jì)要求：頁面效果簡潔，同時(shí)提供便捷的注冊與登錄功能。各部分內(nèi)容布局合理，突出顯示重要的內(nèi)容。尺寸為1920像素×1080像素，分辨率均為72像素/英寸。8.1.3設(shè)計(jì)官網(wǎng)登錄頁設(shè)計(jì)思路：添加背景圖片，在其上方輸入文字并在右側(cè)繪制按鈕。繪制矩形和橢圓，將橢圓制作成漸顯效果并添加企業(yè)標(biāo)志，在右側(cè)制作登錄窗口，在“登錄”文字和重要文字下方繪制矩形。官網(wǎng)登錄頁效果8.1.4切片與輸出網(wǎng)頁設(shè)計(jì)要求：對網(wǎng)頁進(jìn)行切片，完整展現(xiàn)網(wǎng)頁。輸出切片內(nèi)容，并保存到單獨(dú)的文件中。8.1.4切片與輸出網(wǎng)頁設(shè)計(jì)思路：切片與輸出網(wǎng)頁效果在切片時(shí)，可根據(jù)不同的版塊進(jìn)行切片，并命名切片后的內(nèi)容，方便后期調(diào)用。導(dǎo)出HTML文件和圖像文件，方便使用。目錄CONTENT8.1“宛木居”官網(wǎng)界面設(shè)計(jì)8.2“宛木居”App界面設(shè)計(jì)8.3“宛木居”軟件界面設(shè)計(jì)8.2.1設(shè)計(jì)App啟動(dòng)頁設(shè)計(jì)要求：色彩明亮且具有視覺吸引力，能夠凸顯冬至節(jié)日氛圍。選擇與冬至相關(guān)的素材，如餃子、羊肉湯等，表達(dá)節(jié)日主題。尺寸為1125像素×2436像素，分辨率均為72像素/英寸。8.2.1設(shè)計(jì)App啟動(dòng)頁設(shè)計(jì)思路：新建文件，添加背景、餃子、冬至文字圖素材、Logo素材。在碗下方繪制陰影。在左上角輸入文字內(nèi)容。②實(shí)際應(yīng)用效果①啟動(dòng)頁效果8.2.2設(shè)計(jì)啟動(dòng)頁動(dòng)效為雪花和文字添加閃動(dòng)效果。導(dǎo)出GIF格式的文件。設(shè)計(jì)要求設(shè)計(jì)要求：8.2.2設(shè)計(jì)啟動(dòng)頁動(dòng)效新建圖像文件，并將制作完的啟動(dòng)頁所有圖層拖曳到新建的文件中。柵格化所有圖層，將背景所有圖層合成為一個(gè)完整的圖層，然后分別合成文字對應(yīng)的圖層，并進(jìn)行重命名，方便后期制作動(dòng)畫。0102打開“時(shí)間軸”面板，隱藏除背景和冬至圖層外的其他圖層，復(fù)制所選幀，顯示除“人間小團(tuán)圓”圖層外的其他圖層。使用相同的方法復(fù)制8個(gè)所選幀，并設(shè)置動(dòng)畫顯示的幀內(nèi)容。03調(diào)整各個(gè)幀的顯示時(shí)間，其中前6個(gè)幀的時(shí)間為“0.5秒”，后兩個(gè)幀的時(shí)間為“1秒”。04導(dǎo)出GIF格式文件。設(shè)計(jì)思路：8.2.3設(shè)計(jì)App圖標(biāo)設(shè)計(jì)要求：采用面性圖標(biāo)風(fēng)格，效果要簡潔、美觀。圖標(biāo)需具有高度的辨識(shí)度和記憶點(diǎn)，直觀地體現(xiàn)圖標(biāo)所表達(dá)的內(nèi)容。圖標(biāo)分辨率為300像素/英寸，矢量圖形。0103028.2.3設(shè)計(jì)App圖標(biāo)設(shè)計(jì)思路：繪制帶漸變效果的圓。使用三角形工具、矩形工具繪制二手房圖標(biāo)。使用相同的方法，制作新房、精品公寓、短租、優(yōu)惠、附件房源、找小區(qū)、個(gè)人房源等圖標(biāo)App圖標(biāo)參考效果8.2.4設(shè)計(jì)App首頁設(shè)計(jì)要求：整體風(fēng)格應(yīng)簡潔、大氣，符合現(xiàn)代審美趨勢。界面布局應(yīng)合理、清晰，色彩搭配應(yīng)舒適、內(nèi)容體現(xiàn)直觀。整個(gè)首頁分為Banner、功能類目、二手房推薦3個(gè)部分。尺寸為1125像素×2436像