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

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

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

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

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

再來看下不同分辨率用戶的占比情況：

通過對(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條線直觀的顯示在專題頁面上：

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

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

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

我們?cè)賮砜匆幌抡娴睦印?/p>

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

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

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

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

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

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

來對(duì)比看看正面的例子：

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

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

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

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

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

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

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

用橡皮擦擦除的邊緣，沒有鋸齒有半透明的過渡

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

對(duì)于對(duì)于凹進(jìn)去不好擦的區(qū)域可以借助快速蒙板來擦除。
例如王力宏肘那里。
點(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ā)就摳出來了。

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

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

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

最后我們?cè)賮砜瓷嗉馍系闹袊@個(gè)專題：

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

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

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

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

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

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

例如

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

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

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

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

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

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

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

來源：騰訊ECD