专题技巧浅析(2)_网页设计教程

推荐：免费的响应式Bootstrap模板 - Codester
Codester是一个基本的个人作品集Bootstrap模板，帮助设计师，摄影师，图形艺术工作者搭建高度可定制的网站。拥有自定义包和相关的javascript，css和组件，相信大家肯定喜欢

首先第一个问题首屏高度：

分析一下常见分辨率及浏览器下高度数据：

在window XP常见分辨率1024×768下我们除掉任务栏，浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是584。

Win7下是574。在window XP常见分辨率1440×900下我们除掉任务栏，浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是716。Win7下是706。

综合上面表中个分辨率及浏览器下的统计数据，我们很容易画出两条首屏线，分别是580PX和710PX，对应不同的分辨率。

再来看下不同分辨率用户的占比情况：

通过对大于30W台客户端用户进行测试，得到的测试数据如下：

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

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

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

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

即当首屏高度大于580时有44.64的人看不到；大于720时有82.64%的人看不到；

大于800时有92.27%的人看不到。

我们将这个数据转化成3条线直观的显示在专题页面上：

总结起来就是注意首屏高度。

建议将最主要的信息显示在580PX高度的范围以内 让用户打开网页第一屏就可以直接看到不用向下滚动

分享：“懒人”设计思维
设计师总会说设计是一件很累人的事，但这部分原因可能是你自找的。时间与设计出来的效果也并不一定成正比。平面设计师或许应该培养一种“懒人”设计思维，面对一个设计时，