網(wǎng)頁UI設(shè)計分析：網(wǎng)頁結(jié)構(gòu)分析和網(wǎng)頁分類

網(wǎng)頁UI設(shè)計講究的是排版布局和視覺效果，其目的是給用戶提供一種布局合理、 視覺效果突出、功能強(qiáng)大、使用便捷的界面。網(wǎng)頁UI設(shè)計以互聯(lián)網(wǎng)為載體，以互聯(lián)網(wǎng)技術(shù)和數(shù)字交交互技術(shù)為基礎(chǔ)，依照客戶與消費者的需求，設(shè)計以商業(yè)宣傳為目的的網(wǎng)頁，同時遵循設(shè)計美感，實現(xiàn)商業(yè)目的與功能的統(tǒng)一。

網(wǎng)頁結(jié)構(gòu)分析

雖然網(wǎng)頁的表現(xiàn)形式千變?nèi)f化，但大部分網(wǎng)頁的基本結(jié)構(gòu)都是相同的，主要包含引導(dǎo)欄、header、導(dǎo)航、Banner、內(nèi)容區(qū)域、版權(quán)信息等模塊。

(1)引導(dǎo)欄位于界面的頂部，通常用來放置客服電話、幫助中心、注冊和登錄等信息，高度一般為35~50像素。

(2)header位于引導(dǎo)欄正下方，主要放置企業(yè)logo等內(nèi)容信息。高度一般為80~100像素。但是目前的流行趨勢是將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)整。

網(wǎng)頁分類

根據(jù)網(wǎng)站的內(nèi)容，網(wǎng)頁可大致分類為首頁、詳情頁和列表頁三種類型。

1.首頁

首頁作為網(wǎng)站的門面，是給予用戶第一-印象的核心頁面，也是呈現(xiàn)品牌形象的窗口，能更直觀地展示企業(yè)的產(chǎn)品和服務(wù)，首頁設(shè)計需要貼近企業(yè)文化，有鮮明的特色。由于行業(yè)特性的差別，網(wǎng)站需要根據(jù)自身行業(yè)選擇適當(dāng)?shù)谋憩F(xiàn)形式。

2.詳情頁

大部分網(wǎng)站主要從公司介紹、產(chǎn)品、服務(wù)等方面進(jìn)行宣傳，而整體布局需要使用戶操作更加方便、快捷，所以在布局上僅僅是內(nèi)容區(qū)域的變化，其余保持不變。整個網(wǎng)站中，詳情頁作為二級頁面要與首頁的色彩風(fēng)格一致，頁面中同一元素也要與其他頁面保持一致。

3.列表頁

列表頁主要用于展示產(chǎn)品和相關(guān)信息，該頁展示了比首頁更多的產(chǎn)品信息，還可以對產(chǎn)品信息進(jìn)行初步的篩選。列表頁應(yīng)該使用戶快速了解該網(wǎng)站產(chǎn)品信息并能誘惑用戶點擊，設(shè)計時要注意在有限的頁面空間中合理安排文字，傳達(dá)的信息量充足，并使產(chǎn)品內(nèi)容信息突出。

黑馬程序員全套UI設(shè)計公開視頻【免費下載】

猜你喜歡：

21個UI設(shè)計技巧【UI設(shè)計干貨】

用戶界面設(shè)計的10大原則

化妝品廣告如何設(shè)計？有什么設(shè)計思路？

常見UI設(shè)計工具有哪些？

黑馬程序員UI設(shè)計培訓(xùn)班