網(wǎng)站設(shè)計(jì)分析：專題網(wǎng)頁(yè)設(shè)計(jì) 你怎么看？

時(shí)間：2022-07-02 21:51:01 | 來(lái)源：建站知識(shí)

時(shí)間：2022-07-02 21:51:01 來(lái)源：建站知識(shí)

認(rèn)識(shí)專題--既然是關(guān)于某個(gè)主題的專題，那么一個(gè)簡(jiǎn)介視乎是必不可少的，各大專題頁(yè)我們都能看到這樣一個(gè)簡(jiǎn)介，或長(zhǎng)或短，但一定要深刻醒目。

頁(yè)面特性：產(chǎn)品頁(yè)面簡(jiǎn)潔易用，專題頁(yè)面絢麗視效印象深刻。

在頁(yè)面設(shè)計(jì)當(dāng)中，產(chǎn)品頁(yè)面(如facebook 微博 twitter 微吧等)的設(shè)計(jì)。注重功能，交互，設(shè)計(jì)要考慮用戶長(zhǎng)時(shí)間的瀏覽體驗(yàn)。視覺上側(cè)重間距，布局，按鈕和logo,及icon樣式。注重規(guī)范和視覺識(shí)別性。樣式通常簡(jiǎn)潔易用，絢麗元素少，視覺上并不強(qiáng)調(diào)沖擊力。

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

用搶眼的視覺吸引戶并留下深刻印象是專題設(shè)計(jì)的首要!

用搶眼的視覺吸引戶并留下深刻印象是專題設(shè)計(jì)的首要!

傳統(tǒng)產(chǎn)品頁(yè)面，簡(jiǎn)潔注重功能和圖標(biāo)等視覺設(shè)計(jì)。

專題頁(yè)面突出視覺效果，華麗豐富

微博專題多為各種微博活動(dòng)和推廣內(nèi)容設(shè)計(jì)。內(nèi)容較多，在設(shè)計(jì)好頭圖這種主視覺的同時(shí)，大量?jī)?nèi)容和欄目的排版布局也要注意。針對(duì)專題視覺設(shè)計(jì)的特點(diǎn)著手，才能實(shí)際出優(yōu)秀的頁(yè)面。

設(shè)計(jì)專題

確立UE，溝通需求。

需求方的UE稿(產(chǎn)品文檔)是專題設(shè)計(jì)的前提，需要設(shè)計(jì)師和需求方一起進(jìn)行溝通。設(shè)計(jì)師可以在早期就對(duì)專題需求提出自己的創(chuàng)意和方案，再由需求方形成UE稿。設(shè)計(jì)師再根據(jù)設(shè)計(jì)稿進(jìn)行設(shè)計(jì)。由于專題設(shè)計(jì)往往沒有專門的交互設(shè)計(jì)支持，很多時(shí)候，UE稿只明確了該專題所要展現(xiàn)的內(nèi)容，設(shè)計(jì)師需要自己對(duì)UE進(jìn)行一些交互上的調(diào)整和優(yōu)化。(要注意對(duì)UE的優(yōu)化設(shè)計(jì)往往是遞進(jìn)式的，貫穿設(shè)計(jì)專題的整個(gè)過(guò)程，未必一蹴而就的去翻新整個(gè)專題UE)。

專題結(jié)構(gòu)

大多數(shù)的專題結(jié)構(gòu)可分為頭圖部分和內(nèi)容部分，傳統(tǒng)的專題一般只有一個(gè)主頁(yè)面，復(fù)雜的則有若干的二級(jí)頁(yè)面組成，視專題的規(guī)模而定。一些特別的專題則有著特殊的表現(xiàn)方式，包括類似用flash制作 minisite，以及一些異形的特殊專題。采用何種結(jié)構(gòu)要看誰(shuí)能更好的服務(wù)于需求。

特殊結(jié)構(gòu)形式的專題，頭圖即為封面，專題的體驗(yàn)類似翻書

專題尺寸

微博專題通常都有較多內(nèi)容，會(huì)使得頁(yè)面的高度過(guò)高，(很多專題的高度都達(dá)到了3000px)。設(shè)計(jì)時(shí)需要適當(dāng)?shù)目s短欄目的間距，盡可能的減少頁(yè)面高度。專題的頁(yè)面的寬度和微博主站相同為950PX，采用這個(gè)寬度是為了能兼容最廣泛的顯示器分辨率(1024px*768px)，但由于專題的設(shè)計(jì)更加注重視覺效果，而且目前的很多年輕用戶(年輕用戶往往是專題的核心用戶)的顯示器分辨率早已超過(guò)1024px很多，所以我往往會(huì)將專題的主視覺和專題內(nèi)容保證在950px之下，而頭圖的實(shí)際設(shè)計(jì)效果會(huì)在1600px寬度時(shí)做最好的展示。

600px是我們定義的微博專題的首屏高度，也就是大多數(shù)用戶第一屏能夠看到的區(qū)域。在這個(gè)區(qū)域內(nèi)，我通常將頭圖的比例做到280px-400px左右，這樣做的目的是為了在突出專題主視覺的同時(shí)也要讓用戶在第一屏就可以瀏覽到部分專題內(nèi)容。(而通常產(chǎn)品頁(yè)面的頭部視覺在高度上要小很多，產(chǎn)品頁(yè)面本身特性所決定的。)

設(shè)計(jì)頭圖

結(jié)構(gòu)確立接下來(lái)后就開始頭圖的設(shè)計(jì)，優(yōu)秀的頭圖是專題設(shè)計(jì)的靈魂。

設(shè)計(jì)頭圖首先要考慮的是頭圖的設(shè)計(jì)風(fēng)格，根據(jù)不同的題材，選擇不同風(fēng)格的視覺設(shè)計(jì)。一般我會(huì)事先在紙上或是腦中勾勒一個(gè)大概，有些專題沒有具象的視覺元素那么就從專題的文字入手，如果實(shí)在不帶感，可以將一些與專題相關(guān)的元素先拼湊在畫布上，然后嘗試各種組合，也許一會(huì)就能擦出火花。

頭圖風(fēng)格

關(guān)于微博專題的頭圖設(shè)計(jì)風(fēng)格大致分為：寫實(shí)類，卡通插畫，大標(biāo)題突出等。寫實(shí)類頭圖多需要人物出場(chǎng)涉及版權(quán)，所以這種實(shí)類的風(fēng)格的偏少，大部分還是后兩種。如果需求方對(duì)設(shè)計(jì)風(fēng)格認(rèn)可，我喜歡在頭圖的設(shè)計(jì)中放入一些自己繪制的視覺元素，盡量減少素材使用。

寫實(shí)風(fēng)格頭圖，多由人物構(gòu)成。

卡通繪制類頭圖。

大標(biāo)題為主的頭圖。

頭圖構(gòu)圖

在某種程度上，專題頭圖的設(shè)計(jì)有點(diǎn)類似一個(gè)更大的banner，但也有著很多的不同。它需要考慮如何巧妙的與下面的內(nèi)容銜接，而且尺寸更大，細(xì)節(jié)更多，構(gòu)圖可以變化，如果只是千篇一律的采用規(guī)則的構(gòu)圖，會(huì)讓專題顯得單調(diào)，呆板，視覺效果不好。

圓弧形的割頭圖和內(nèi)容區(qū)域的構(gòu)圖

頭圖標(biāo)題

好的專題頭圖，除了有精美的視覺元素外，頭圖的大標(biāo)題要重點(diǎn)強(qiáng)調(diào)，它通常需要設(shè)計(jì)師花費(fèi)專門的精力來(lái)制作字體的變形和特效。好的字體效果其實(shí)可以成為專題的主視覺，成為最亮眼的一部分，同時(shí)也是最直接體現(xiàn)專題主旨的方式。

手繪設(shè)計(jì)的頭圖大標(biāo)題

一般的頭圖設(shè)計(jì)只是專題視覺元素的體現(xiàn)，而有的頭圖本身就承載專題內(nèi)容，這要視專題的內(nèi)容和需求而定。即便如此還是要注意在樣式上美觀。

頭圖本身即承載內(nèi)容功能

頭圖部分的設(shè)計(jì)是整個(gè)專題的重點(diǎn)，也是專題最需要突出的亮點(diǎn)，頭圖可以確立整個(gè)專題的基調(diào)。

優(yōu)秀的頭圖應(yīng)該緊貼專題內(nèi)容，美觀，吸引用戶停留。