專(zhuān)題頁(yè)設(shè)計(jì)——UI設(shè)計(jì)系列講解

時(shí)間：2023-09-28 22:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-28 22:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

專(zhuān)題頁(yè)設(shè)計(jì)——UI設(shè)計(jì)系列講解：

一、這種類(lèi)型的網(wǎng)頁(yè)就是專(zhuān)題頁(yè)

利用一個(gè)點(diǎn)、一件事、一個(gè)主題來(lái)策劃一個(gè)頁(yè)面或者一個(gè)活動(dòng)的流程頁(yè)面，該頁(yè)面會(huì)包括網(wǎng)站相應(yīng)模塊和頻道所涉及到的功能與該主題事件的內(nèi)容展示。

專(zhuān)題頁(yè)面時(shí)效性有限（大多專(zhuān)題是有推廣及活動(dòng)時(shí)間限制的，過(guò)了這個(gè)時(shí)間，就很少會(huì)有人再訪問(wèn)該頁(yè)面。），多為活動(dòng)推廣和吸引用戶等內(nèi)容，能在限定的時(shí)間的吸引最多用戶才能形成有力的推廣，需要強(qiáng)有力的視覺(jué)效果，和有趣的瀏覽體驗(yàn)，來(lái)達(dá)到吸引用戶的特點(diǎn)。在規(guī)范和布局甚至交互上可以適當(dāng)放寬要求。

二、專(zhuān)題頁(yè)的作用

1、整合大量信息，吸引網(wǎng)民注意力；

2、給網(wǎng)站帶來(lái)流量，吸引部分用戶；

3、提高網(wǎng)站被搜索的幾率；

4、將用戶需要的信息集中展示，方便用戶瀏覽與查找；

5、將大量數(shù)據(jù)分門(mén)別類(lèi)的展示給用戶，體現(xiàn)網(wǎng)站內(nèi)容的全面性。

三、首頁(yè)屏幕高度

不同的操作系統(tǒng)，不同的分辨率，不同的瀏覽器

首屏高度不一樣

四、不同分辨率及瀏覽器的首屏高度

五、不同分辨率用戶的占比情況

建議將最主要的信息顯示在580PX高度的范圍以?xún)?nèi)。

六、標(biāo)題是否醒目

標(biāo)題文字足夠醒目嗎？

通過(guò)把圖片去色來(lái)查看標(biāo)題是否醒目。

專(zhuān)題的主文字傳達(dá)的是頁(yè)面最主要信息，需要足夠醒目，所以要有整個(gè)頁(yè)面最大的對(duì)比度。

去色后主文字總是有最大的明暗對(duì)比,并且最主要信息始終保持在第一屏內(nèi)顯示完全。

七、光環(huán)境

圖片的光環(huán)境一致嗎？

大家說(shuō)說(shuō)看

光環(huán)境的調(diào)整

原圖是張很普通的照片，由于逆光臉部偏暗。于是給他疊加了三個(gè)圖層。一個(gè)頂部的白光提亮整體。左側(cè)的藍(lán)光和右側(cè)的紅光，讓人物與背景更加融合。調(diào)整了光的頁(yè)面整體效果好了很多。

八、摳圖

摳圖有毛邊

不論你頁(yè)面設(shè)計(jì)的多么有創(chuàng)意多么好，一旦摳圖不干凈，有毛邊頁(yè)面檔次一下就下去了。

可以用抽出結(jié)合橡皮擦

九、內(nèi)容組織

內(nèi)容組織

這個(gè)專(zhuān)題問(wèn)題很多但是最突出的問(wèn)題還是“亂”。內(nèi)容多，而且沒(méi)有條理，不知道該看哪里，不知道什么才是這個(gè)頁(yè)面的重點(diǎn)。

十、怎么完成設(shè)計(jì)

作為設(shè)計(jì)師要快速高質(zhì)打造一個(gè)專(zhuān)題頁(yè),不僅僅是創(chuàng)意，

能有條理地再創(chuàng)造會(huì)事半功倍，畢竟這是個(gè)商業(yè)設(shè)計(jì)！

定位→布局→配色→排版→細(xì)節(jié)

（一）定位

接到一個(gè)新任務(wù)溝通需求時(shí)，確定風(fēng)格，是喜慶、霸氣、PK感、可愛(ài)、酷…

（二）布局

布局即如何擺放功能模塊，值得慶幸的是，我們是商業(yè)設(shè)計(jì)，活動(dòng)的策劃不用設(shè)計(jì)師考慮，由策劃部門(mén)已經(jīng)畫(huà)好UE圖（產(chǎn)品文檔）

先UE圖做個(gè)分析，一種叫正常結(jié)構(gòu)，一種叫非正常結(jié)構(gòu)

對(duì)于正常結(jié)構(gòu)的UE，這類(lèi)專(zhuān)題往往內(nèi)容比較多，設(shè)計(jì)師能發(fā)揮的空間有限，為用戶閱讀體驗(yàn)考慮，內(nèi)容模塊按常規(guī)排版處理

（三）配色

一般用頭圖海報(bào)化、背景場(chǎng)景化的方式來(lái)渲染專(zhuān)題本身的氛圍，增加頁(yè)面的視覺(jué)沖擊力。

非正常UE通常內(nèi)容少，沒(méi)固定框架，可根據(jù)主題隨意發(fā)揮

一般的做法：1模塊幾何化、2場(chǎng)景擬物化

（四）排版

專(zhuān)題頁(yè)首先它是一個(gè)功能頁(yè)，視覺(jué)沖擊力夠強(qiáng)，結(jié)構(gòu)夠新穎，給用戶一個(gè)清晰有序的閱讀體驗(yàn)是極關(guān)重要的。整體統(tǒng)一、突出按鈕、體現(xiàn)層級(jí)、圖形引導(dǎo)很重要！

（五）細(xì)節(jié)

添加小元素裝飾一下

---

本節(jié)完~