專題設(shè)計(jì)技巧分享

0 評(píng)論 7559 瀏覽 1 收藏 16 分鐘

先以CP設(shè)計(jì)的的這個(gè)奧運(yùn)專題為例分析專題設(shè)計(jì)中常遇到的一些問(wèn)題。


這個(gè)頁(yè)面存在的問(wèn)題很多,我們來(lái)一個(gè)個(gè)分析。
首先第一個(gè)問(wèn)題首屏高度:
分析一下常見分辨率及瀏覽器下高度數(shù)據(jù):


在window XP常見分辨率1024×768下我們除掉任務(wù)欄,瀏覽器菜單欄以及狀態(tài)欄后剩下的網(wǎng)頁(yè)首屏高度平均值是584。

Win7下是574。在window XP常見分辨率1440×900下我們除掉任務(wù)欄,瀏覽器菜單欄以及狀態(tài)欄后剩下的網(wǎng)頁(yè)首屏高度平均值是716。Win7下是706。

綜合上面表中個(gè)分辨率及瀏覽器下的統(tǒng)計(jì)數(shù)據(jù),我們很容易畫出兩條首屏線,分別是580PX和710PX,對(duì)應(yīng)不同的分辨率。

再來(lái)看下不同分辨率用戶的占比情況:

通過(guò)對(duì)大于30W臺(tái)客戶端用戶進(jìn)行測(cè)試,得到的測(cè)試數(shù)據(jù)如下:

  1. 首屏高度低于等于 580 的有 116786 個(gè)人,占 44.64%;
  2. 首屏高度低于等于 720 的有 216227 個(gè)人,占 82.64%;
  3. 首屏高度低于等于 800 的有 241420 個(gè)人,占 92.27%;
  4. 首屏高度低于等于 900 的有 259174 個(gè)人,占 99.06%;

即當(dāng)首屏高度大于580時(shí)有44.64的人看不到;大于720時(shí)有82.64%的人看不到;
大于800時(shí)有92.27%的人看不到。
我們將這個(gè)數(shù)據(jù)轉(zhuǎn)化成3條線直觀的顯示在專題頁(yè)面上:

總結(jié)起來(lái)就是注意首屏高度。
建議將最主要的信息顯示在580PX高度的范圍以內(nèi) 讓用戶打開網(wǎng)頁(yè)第一屏就可以直接看到不用向下滾動(dòng)
這個(gè)第二個(gè)專題的第二個(gè)問(wèn)題:標(biāo)題夠顯眼么?

檢驗(yàn)一個(gè)專題頭圖標(biāo)題是否夠顯眼其中的一個(gè)方法就是將網(wǎng)頁(yè)去色,站在遠(yuǎn)處看看標(biāo)題是否還看得清。
我們有這個(gè)方法來(lái)檢驗(yàn)一下這個(gè)專題:

是不是就可以看出頭圖文字跟背景混在一起不夠清晰。

我們?cè)賮?lái)看一下正面的例子。

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

去色檢驗(yàn)后的效果。
去色后主文字總是有最大的明暗對(duì)比,并且最主要信息始終保持在第一屏內(nèi)顯示完全.
正面例子二:

深色的底上面可以選用淺色亮色的文字, 反之,淺色的底上可以選用深色的文字以獲得最大的對(duì)比

去色后title總是有最大的明暗對(duì)比,并且最主要信息始終保持在第一屏內(nèi)顯示完全
總結(jié)上面說(shuō)的注意的第二點(diǎn):
Title是頁(yè)面的視覺(jué)焦點(diǎn)要足夠顯眼
大?。褐鞔萎嬅鎸?duì)比,避免通體平均 明暗:看看去色后設(shè)計(jì)稿的樣子是否還足夠顯眼。

再來(lái)看看看奧運(yùn)專題設(shè)計(jì)稿的第三個(gè)問(wèn)題:
他們的光環(huán)境一致么?

最左邊張學(xué)友臉色發(fā)白皮膚呈棕色。左邊第二個(gè)莫文蔚應(yīng)該是在室內(nèi)拍的照片,皮膚呈暖色光源在頂部。中間的王力宏光源在右側(cè),并且用交明顯的陰影,猜測(cè)在室外拍的照片。右邊第二個(gè)張靚穎她的照片光源在左側(cè)暖色調(diào)。最右邊變林宥嘉照片光源在左側(cè)。
五個(gè)人有五種不同的光照效果,光環(huán)境在這個(gè)頁(yè)面很混亂。

來(lái)對(duì)比看看正面的例子:

作者把幾個(gè)人物素材的光環(huán)境調(diào)整到了一致。就好像他們本身就是站在一起一樣。
再看這個(gè)游戲?qū)n}的例子。
在頁(yè)面中人物左側(cè)的黃色高光部分跟頁(yè)面左上角撒下的光輝對(duì)應(yīng),造成真實(shí)的融入感

光運(yùn)用的實(shí)際例子


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

總結(jié)第三點(diǎn)就是掌控你頁(yè)面里的光。
色溫色調(diào):所有素材(色彩)都會(huì)被周圍環(huán)境光影響,用的時(shí)候注意調(diào)整統(tǒng)一。 光照:注意主光源(環(huán)境光)的類型,位置。契合頁(yè)面環(huán)境。

再看這個(gè)頁(yè)面的第四個(gè)問(wèn)題,摳圖有毛邊。

不論你頁(yè)面設(shè)計(jì)的多么有創(chuàng)意多么好,一旦摳圖不干凈,有毛邊頁(yè)面檔次一下就下去了。
猜測(cè)設(shè)計(jì)人員做的時(shí)候應(yīng)該是用的魔術(shù)棒摳圖的。魔術(shù)棒雖然好用摳圖很快,但是魔術(shù)棒摳出來(lái)的容易留下毛邊。


摳圖方法很多,各人有各人的習(xí)慣。在這里分享一下我自己的摳圖方法。不一定是最快的,但是這個(gè)方法摳出來(lái)的還算干凈。
我習(xí)慣用橡皮擦工具摳圖。

用橡皮擦擦除的邊緣,沒(méi)有鋸齒有半透明的過(guò)渡

在擦除時(shí)候的一些小技巧。
擦除的時(shí)候可以放大畫布,調(diào)整合適的畫筆大小。
按住shift可以擦連續(xù)的區(qū)域。

對(duì)于對(duì)于凹進(jìn)去不好擦的區(qū)域可以借助快速蒙板來(lái)擦除。
例如王力宏肘那里。
點(diǎn)快速蒙版,進(jìn)入快速蒙版的的編輯模式。選擇“所選區(qū)域”
然后用畫筆在需要擦除的區(qū)域涂抹,再用橡皮擦擦除多余的部分退出快速蒙版,剩下的紅色部分就能生成一個(gè)選區(qū)。最后點(diǎn)刪除就能得到需要擦除的圖。

有時(shí)候需要給人物扣頭發(fā),很頭疼。這里順便分享一下如何摳頭發(fā)
拿年輕時(shí)候的乖乖虎蘇有朋的照片做例子。

復(fù)制一個(gè)圖層,然后選擇–色彩范圍,選頭發(fā)的黑色顏色容差調(diào)到150左右。點(diǎn)確定
然后反選刪除。就能夠得到這樣一個(gè)頭發(fā)的圖層。

用橡皮擦擦掉圖層1的頭發(fā)部分。合并兩個(gè)圖層。人物的頭發(fā)就摳出來(lái)了。

總結(jié)下這部分的所說(shuō)的內(nèi)容:
摳圖拒絕毛邊
橡皮擦摳圖:按住SHIFT可以擦一條直線的區(qū)域,配合快速蒙版擦角落
摳頭發(fā):巧妙利用選擇色彩范圍摳頭發(fā)。
再來(lái)看這個(gè)專題,這個(gè)專題問(wèn)題很多但是最突出的問(wèn)題還是“亂”。內(nèi)容多,而且沒(méi)有條理,不知道該看哪里,不知道什么才是這個(gè)頁(yè)面的重點(diǎn)。

再看看正面的例子,對(duì)個(gè)頁(yè)面條理重新梳理后調(diào)整的頁(yè)面。

同樣的內(nèi)容,梳理后的頁(yè)面條理會(huì)清楚很多,頁(yè)面內(nèi)容有正確的視覺(jué)引導(dǎo)更有主次,用戶能更容易的“掃描”頁(yè)面的信息。

最后我們?cè)賮?lái)看舌尖上的中國(guó)這個(gè)專題:

這個(gè)專題最突出的問(wèn)題是素材的選材不當(dāng)。

分析下這個(gè)頁(yè)面的選材。木板、紙張、云、以及食物對(duì)主題氛圍的烘托也顯得有些不足。
并且木板和木板上的碗給人的感覺(jué)是俯視,但是云給人的感覺(jué)是仰視天空的感覺(jué)。兩者放在一起很沖突。

那么接下來(lái)我們就說(shuō)下做專題時(shí)候怎樣選擇合適的素材。
以“舌尖上的中國(guó)”為例:

我們先將“舌尖上的中國(guó)”提取關(guān)鍵字“舌尖”、“中國(guó)”。舌尖讓我們聯(lián)想到什么呢?有美食、餐具、,等等。中國(guó)讓我們聯(lián)想到什么呢?功夫、水墨、剪紙、龍、國(guó)畫,等等。
像這樣就可以把一個(gè)抽象的概念逐級(jí)具體化,然后從具體化的事物中選擇合適的作為你需要的素材,來(lái)表達(dá)抽象的概念。

這是舌尖上的中國(guó)的節(jié)目的片頭截圖,是不是應(yīng)正了之前的分析,水墨、食物、國(guó)畫、餐具。

同樣某些具體的事物組合在一起也可以表達(dá)一個(gè)明確的主題。

例如

這些素材組合在一起讓你聯(lián)想到了什么。

沒(méi)錯(cuò)就是“圣誕節(jié)”。
例如下面這個(gè)例子:

優(yōu)秀的素材是設(shè)計(jì)稿的靈魂。
設(shè)計(jì)師將眾多素材合適的組合在了一起。即使不用一個(gè)文字,所有的素材也都在共同的訴說(shuō)這一個(gè)主題——圣誕節(jié)
所以做專題的時(shí)候要注意選擇合適的素材:

來(lái)看看這個(gè)新年的專題。
這個(gè)頁(yè)面用的素材很多,但是再多的素材也都是一個(gè)調(diào)調(diào)。例如地面的積雪,遠(yuǎn)處的松樹,還有女孩手上的燈籠,質(zhì)感都是相近的。
如果這個(gè)時(shí)候頁(yè)面加進(jìn)來(lái)一個(gè)右下角那個(gè)圣誕老人呢?這個(gè)圣誕老人的質(zhì)感過(guò)于卡通,過(guò)于平面化,跟頁(yè)面的其他素材質(zhì)感嚴(yán)重不符。所以選素材的時(shí)候應(yīng)該回避這類素材。

再來(lái)看這個(gè)頁(yè)面。這個(gè)頁(yè)面中板凳,油漆桶文具都是很寫實(shí)的素材,在這個(gè)頁(yè)面里素材的質(zhì)感統(tǒng)一為寫實(shí)類。所以像下面那個(gè)卡通babe的素材是不適合的。

總結(jié)前面說(shuō)的:
選擇合適的素材
優(yōu)秀的素材是靈魂,平庸的素材只是裝飾

  1. 找素材要保證素材能對(duì)表達(dá)的氛圍有幫助能恰當(dāng)表意;
  2. 要保證頁(yè)面上的素材風(fēng)格一致,都是一個(gè)調(diào)調(diào);

來(lái)源:騰訊ECD

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!