更新時(shí)間:2021-12-02 來(lái)源:黑馬程序員 瀏覽量:
網(wǎng)頁(yè)UI設(shè)計(jì)講究的是排版布局和視覺(jué)效果,其目的是給用戶(hù)提供一種布局合理、 視覺(jué)效果突出、功能強(qiáng)大、使用便捷的界面。網(wǎng)頁(yè)UI設(shè)計(jì)以互聯(lián)網(wǎng)為載體,以互聯(lián)網(wǎng)技術(shù)和數(shù)字交交互技術(shù)為基礎(chǔ),依照客戶(hù)與消費(fèi)者的需求,設(shè)計(jì)以商業(yè)宣傳為目的的網(wǎng)頁(yè),同時(shí)遵循設(shè)計(jì)美感,實(shí)現(xiàn)商業(yè)目的與功能的統(tǒng)一。
雖然網(wǎng)頁(yè)的表現(xiàn)形式千變?nèi)f化,但大部分網(wǎng)頁(yè)的基本結(jié)構(gòu)都是相同的,主要包含引導(dǎo)欄、header、導(dǎo)航、Banner、內(nèi)容區(qū)域、版權(quán)信息等模塊。
(1)引導(dǎo)欄位于界面的頂部,通常用來(lái)放置客服電話(huà)、幫助中心、注冊(cè)和登錄等信息,高度一般為35~50像素。
(2)header位于引導(dǎo)欄正下方,主要放置企業(yè)logo等內(nèi)容信息。高度一般為80~100像素。但是目前的流行趨勢(shì)是將header和導(dǎo)航合并放置在一起,高度為85~130像素。
(3)導(dǎo)航欄高度一般為內(nèi)容字體的2倍或2.5倍,高度一般為40-60像素。
(4)Banner高度通常為300~500像素。
(5)內(nèi)容區(qū)和版權(quán)信息高度不限,可根據(jù)內(nèi)容信息進(jìn)行調(diào)整。
根據(jù)網(wǎng)站的內(nèi)容,網(wǎng)頁(yè)可大致分類(lèi)為首頁(yè)、詳情頁(yè)和列表頁(yè)三種類(lèi)型。
1.首頁(yè)
首頁(yè)作為網(wǎng)站的門(mén)面,是給予用戶(hù)第一-印象的核心頁(yè)面,也是呈現(xiàn)品牌形象的窗口,能更直觀(guān)地展示企業(yè)的產(chǎn)品和服務(wù),首頁(yè)設(shè)計(jì)需要貼近企業(yè)文化,有鮮明的特色。由于行業(yè)特性的差別,網(wǎng)站需要根據(jù)自身行業(yè)選擇適當(dāng)?shù)谋憩F(xiàn)形式。
2.詳情頁(yè)
大部分網(wǎng)站主要從公司介紹、產(chǎn)品、服務(wù)等方面進(jìn)行宣傳,而整體布局需要使用戶(hù)操作更加方便、快捷,所以在布局上僅僅是內(nèi)容區(qū)域的變化,其余保持不變。整個(gè)網(wǎng)站中,詳情頁(yè)作為二級(jí)頁(yè)面要與首頁(yè)的色彩風(fēng)格一致,頁(yè)面中同一元素也要與其他頁(yè)面保持一致。
3.列表頁(yè)
列表頁(yè)主要用于展示產(chǎn)品和相關(guān)信息,該頁(yè)展示了比首頁(yè)更多的產(chǎn)品信息,還可以對(duì)產(chǎn)品信息進(jìn)行初步的篩選。列表頁(yè)應(yīng)該使用戶(hù)快速了解該網(wǎng)站產(chǎn)品信息并能誘惑用戶(hù)點(diǎn)擊,設(shè)計(jì)時(shí)要注意在有限的頁(yè)面空間中合理安排文字,傳達(dá)的信息量充足,并使產(chǎn)品內(nèi)容信息突出。
黑馬程序員全套UI設(shè)計(jì)公開(kāi)視頻【免費(fèi)下載】
猜你喜歡:
21個(gè)UI設(shè)計(jì)技巧【UI設(shè)計(jì)干貨】