網(wǎng)頁設(shè)計專題技巧淺析

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

這個頁面存在的問題很多，我們來一個個分析。
首先第一個問題首屏高度：
分析一下常見分辨率及瀏覽器下高度數(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。

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

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

通過對大于30W臺客戶端用戶進(jìn)行測試，得到的測試數(shù)據(jù)如下：

1. 首屏高度低于等于 580 的有 116786 個人，占 44.64%；

2. 首屏高度低于等于 720 的有 216227 個人，占 82.64%；

3. 首屏高度低于等于 800 的有 241420 個人，占 92.27%；

4. 首屏高度低于等于 900 的有 259174 個人，占 99.06%；

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

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

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

是不是就可以看出頭圖文字跟背景混在一起不夠清晰。
我們再來看一下正面的例子。
專題的主文字傳達(dá)的是頁面最主要信息，需要足夠醒目，所以要有整個頁面最大的對比度

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

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

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

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

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

來對比看看正面的例子：

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