認(rèn)識專題--既然是關(guān)于某個主題的專題,那么一個簡介視乎是必不可少的,各大專題頁我們都能看到這樣一個簡介,或長或短,但一定要深刻醒目。
頁面特性:產(chǎn)品頁面簡潔易用,專題頁面絢麗視效印象深刻。
在網(wǎng)站設(shè)計當(dāng)中,產(chǎn)品頁面(如facebook 微博 twitter 微吧等)的設(shè)計。注重功能,交互,設(shè)計要考慮用戶長時間的瀏覽體驗。視覺上側(cè)重間距,布局,按鈕和logo,及icon樣式。注重規(guī)范和視覺識別性。樣式通常簡潔易用,絢麗元素少,視覺上并不強(qiáng)調(diào)沖擊力。
專題頁面時效性有限(大多專題是有推廣及活動時間限制的,過了這個時間,就很少會有人再訪問該頁面。),多為活動推廣和吸引用戶等內(nèi)容,能在限定的時間的吸引多用戶才能形成有力的推廣,需要強(qiáng)有力的視覺效果,和有趣的瀏覽體驗,來達(dá)到吸引用戶的特點(diǎn)。在規(guī)范和布局甚至交互上可以適當(dāng)放寬要求。
專題頁面突出視覺效果,華麗豐富
微博專題多為各種微博活動和推廣內(nèi)容設(shè)計。內(nèi)容較多,在設(shè)計好頭圖這種主視覺的同時,大量內(nèi)容和欄目的排版布局也要注意。針對專題視覺設(shè)計的特點(diǎn)著手,才能實(shí)際出的頁面。
設(shè)計專題
確立UE,溝通需求。
需求方的UE稿(產(chǎn)品文檔)是專題設(shè)計的前提,需要設(shè)計師和需求方一起進(jìn)行溝通。設(shè)計師可以在早期就對專題需求提出自己的創(chuàng)意和方案,再由需求方形成UE稿。設(shè)計師再根據(jù)設(shè)計稿進(jìn)行設(shè)計。由于專題設(shè)計往往沒有專門的交互設(shè)計支持,很多時候,UE稿只明確了該專題所要展現(xiàn)的內(nèi)容,設(shè)計師需要自己對UE進(jìn)行一些交互上的調(diào)整和優(yōu)化。(要注意對UE的優(yōu)化設(shè)計往往是遞進(jìn)式的,貫穿設(shè)計專題的整個過程,未必一蹴而就的去翻新整個專題UE)。
專題結(jié)構(gòu)
大多數(shù)的專題結(jié)構(gòu)可分為頭圖部分和內(nèi)容部分,傳統(tǒng)的專題一般只有一個主頁面,復(fù)雜的則有若干的二級頁面組成,視專題的規(guī)模而定。一些特別的專題則有著特殊的表現(xiàn)方式,包括類似用flash制作 minisite,以及一些異形的特殊專題。采用何種結(jié)構(gòu)要看誰能更好的服務(wù)于需求。
特殊結(jié)構(gòu)形式的專題,頭圖即為封面,專題的體驗類似翻書
專題尺寸
微博專題通常都有較多內(nèi)容,會使得頁面的高度過高,(很多專題的高度都達(dá)到了3000px)。設(shè)計時需要適當(dāng)?shù)目s短欄目的間距,盡可能的減少頁面高度。專題的頁面的寬度和微博主站相同為950PX,采用這個寬度是為了能兼容廣泛的顯示器分辨率(1024px*768px),但由于專題的設(shè)計更加注重視覺效果,而且目前的很多年輕用戶(年輕用戶往往是專題的核心用戶)的顯示器分辨率早已過1024px很多,所以我往往會將專題的主視覺和專題內(nèi)容保證在950px之下,而頭圖的實(shí)際設(shè)計效果會在1600px寬度時做的展示。
600px是我們定義的微博專題的首屏高度,也就是大多數(shù)用戶屏能夠看到的區(qū)域。在這個區(qū)域內(nèi),我通常將頭圖的比例做到280px-400px左右,這樣做的目的是為了在突出專題主視覺的同時也要讓用戶在屏就可以瀏覽到部分專題內(nèi)容。(而通常產(chǎn)品頁面的頭部視覺在高度上要小很多,產(chǎn)品頁面本身特性所決定的。)
設(shè)計頭圖
結(jié)構(gòu)確立接下來后就開始頭圖的設(shè)計,的頭圖是專題設(shè)計的靈魂。
設(shè)計頭圖首先要考慮的是頭圖的設(shè)計風(fēng)格,根據(jù)不同的題材,選擇不同風(fēng)格的視覺設(shè)計。一般我會事先在紙上或是腦中勾勒一個大概,有些專題沒有具象的視覺元素那么就從專題的文字入手,如果實(shí)在不帶感,可以將一些與專題相關(guān)的元素先拼湊在畫布上,然后嘗試各種組合,也許一會就能擦出火花。
頭圖風(fēng)格
關(guān)于微博專題的頭圖設(shè)計風(fēng)格大致分為:寫實(shí)類,卡通插畫,大標(biāo)題突出等。寫實(shí)類頭圖多需要人物出場涉及版權(quán),所以這種實(shí)類的風(fēng)格的偏少,大部分還是后兩種。如果需求方對設(shè)計風(fēng)格認(rèn)可,我喜歡在頭圖的設(shè)計中放入一些自己繪制的視覺元素,盡量減少素材使用。
寫實(shí)風(fēng)格頭圖,多由人物構(gòu)成。
在某種程度上,專題頭圖的設(shè)計有點(diǎn)類似一個更大的banner,但也有著很多的不同。它需要考慮如何巧妙的與下面的內(nèi)容銜接,而且尺寸更大,細(xì)節(jié)更多,構(gòu)圖可以變化,如果只是千篇一律的采用規(guī)則的構(gòu)圖,會讓專題顯得單調(diào),呆板,視覺效果不好。
圓弧形的割頭圖和內(nèi)容區(qū)域的構(gòu)圖
頭圖標(biāo)題
好的專題頭圖,除了有精美的視覺元素外,頭圖的大標(biāo)題要重點(diǎn)強(qiáng)調(diào),它通常需要設(shè)計師花費(fèi)專門的精力來制作字體的變形和特效。好的字體效果其實(shí)可以成為專題的主視覺,成為亮眼的一部分,同時也是直接體現(xiàn)專題主旨的方式。
手繪設(shè)計的頭圖大標(biāo)題
一般的頭圖設(shè)計只是專題視覺元素的體現(xiàn),而有的頭圖本身就承載專題內(nèi)容,這要視專題的內(nèi)容和需求而定。即便如此還是要注意在樣式上美觀。
頭圖本身即承載內(nèi)容功能
頭圖部分的設(shè)計是整個專題的重點(diǎn),也是專題需要突出的亮點(diǎn),頭圖可以確立整個專題的基調(diào)。
的頭圖應(yīng)該緊貼專題內(nèi)容,美觀,吸引用戶停留。