《UI設(shè)計(jì)》課件-4.4 項(xiàng)目實(shí)訓(xùn)

項(xiàng)目實(shí)訓(xùn)項(xiàng)目一——分析“自然堂”官方網(wǎng)站界面的布局與構(gòu)圖項(xiàng)目目的本項(xiàng)目將對(duì)如圖所示的網(wǎng)站界面進(jìn)行賞析，主要分析該界面的布局與構(gòu)圖，通過(guò)該項(xiàng)目能夠讓我們掌握UI設(shè)計(jì)的基本布局與構(gòu)圖方法。項(xiàng)目一——分析“自然堂”官方網(wǎng)站界面的布局與構(gòu)圖賞析思路（1）從網(wǎng)站界面的整體呈現(xiàn)來(lái)看，該界面的布局與構(gòu)圖都非常合理，其內(nèi)容清晰、直觀，畫面清爽、干凈。（2）從界面布局的留白來(lái)看，該界面的留白區(qū)域比較多，主要使用了文字留白、區(qū)塊留白和布局留白3種形式。文字留白主要體現(xiàn)在界面中的產(chǎn)品介紹文字中，如“明星單品”板塊下方的產(chǎn)品介紹類文字段落間距較大，清晰直觀；區(qū)塊留白主要體現(xiàn)在界面的不同板塊分割處，如“明星單品”板塊和“關(guān)于自然堂”板塊與相鄰板塊間都有明顯的留白區(qū)域；布局留白主要體現(xiàn)在網(wǎng)站的整體界面中，如網(wǎng)站界面兩邊都留有沒(méi)有任何的文字信息的空白區(qū)域，將主要信息集中在了界面中間。項(xiàng)目一——分析“自然堂”官方網(wǎng)站界面的布局與構(gòu)圖賞析思路（3）從界面布局的視覺(jué)層次來(lái)看，該界面層次分明、信息分類明確合理。如首頁(yè)Banner圖較大，而下方“明星單品”板塊中的產(chǎn)品圖片較小，二者對(duì)比突顯出了視覺(jué)層次感。同時(shí)，該界面中文字的大小和色彩也突顯出了界面的視覺(jué)層次。（4）從界面布局的布局原則來(lái)看，界面中的首頁(yè)Banner圖遵循的是左圖右文的平衡式布局原則，畫面飽滿充實(shí)；“明星單品”板塊遵循了上圖下文和居中對(duì)齊的布局原則；界面中的“明星單品”板塊和“關(guān)于自然堂”板塊都遵循了重復(fù)布局的原則，重復(fù)的元素有排版方式、圖片大小、文字大小和色彩等。界面中文字的大小與色彩也遵循了對(duì)比原則。（5）從界面的構(gòu)圖上來(lái)看，該界面的首頁(yè)Banner圖采用了F形構(gòu)圖，讓界面標(biāo)題更加突出；“明星單品”板塊中下面的產(chǎn)品圖片與文字構(gòu)成了倒三角的構(gòu)圖形式，可以讓用戶將視線集中在三角形下方的按鈕處，從而引導(dǎo)用戶點(diǎn)擊購(gòu)買。項(xiàng)目二——設(shè)計(jì)App引導(dǎo)頁(yè)界面項(xiàng)目目的本項(xiàng)目將設(shè)計(jì)App引導(dǎo)頁(yè)界面，要在其中體現(xiàn)出節(jié)奏與韻律的布局原則，通過(guò)該項(xiàng)目能夠讓我們更加了解UI設(shè)計(jì)的布局與構(gòu)圖，參考效果如圖所示。項(xiàng)目二——設(shè)計(jì)App引導(dǎo)頁(yè)界面制作思路（1）搜集圖標(biāo)素材（配套資源:\素材文件\第4章\圖標(biāo)素材.psd）。（2）啟動(dòng)PhotoshopCC2019，新建750像素×1334像素的圖像文件，新建圖層，設(shè)置背景色為“#117194”，并填充背景色。（3）使用“鋼筆工具”，繪制盒子形狀，設(shè)置填充顏色為“#ffffff”，繼續(xù)使用“鋼筆工具”，在盒子形狀下方繪制一個(gè)填充顏色為“#0a4358”的矩形，設(shè)置不透明度為“40%”，最后為其添加圖層蒙版，并使用“漸變工具”添加漸變陰影。項(xiàng)目二——設(shè)計(jì)App引導(dǎo)頁(yè)界面制作思路（4）選擇“橫排文字工具”，在界面下方輸入“文檔分類，快速管理”“立即體驗(yàn)”文字，設(shè)置“文檔分類，快速管理”文字字體為“方正超粗黑_GBK”，“立即體驗(yàn)”文字字體為“黑體”，所有文字的文本顏色為“#ffffff”。（5）選擇“圓角矩形工具”，在“立即體驗(yàn)”文字上繪制描邊顏色為“#ffffff”的圓角矩形，調(diào)整大小與位置。（6）選擇“橢圓工具”，在圖像上方繪制多個(gè)圓形，并設(shè)置不同的填充顏色，