加入K印象设计师团队

K印象是一个真实的社区,注册后,你可以:
  向政府、企业展示你的设计作品
  参加政府、企业举办的设计征稿活动
  与广大设计师交流心得

设为主页 加入收藏
首页 > 经验分享 > 交互设计心得 >

网页设计技巧:网站首页设计宽度和高度

媒体:网页教学网  作者:网页教学网
专业号:印象 2012/7/9 13:39:01
一个经验丰富的网页设计师在做网页原型设计或者视觉效果图时,首先必须要做的是标注清楚网站首屏的高度线,以便直观的看到网站首屏的高度,首屏可以显示的元素。那么,我们该如何来标注一个网页的首屏线那?笔者结合网上的一些谈论特整理如下:
首屏的高度直接跟客户端的各种客观的条件有关系,因为我们要确定首屏的高度(标注首屏线)就需要结合一些相对准确的内部统计数据来分析了,根据各个客户端的操作系统、浏览器分布和屏幕分辨率等情况,并结合常见浏览器状态栏、任务栏等高度进行分析如下:
第一步:分析常见分辨率及浏览器下高度数据
f111559a9596ece749be
 
综合上面表中各个分辨率及浏览器下的统计数据,我们很容易画出两条首屏线,分别为 580PX 和 710PX,对应不同的分辨率。

第二步:分析客户端实际分辨率及浏览器可见区域

f200bef3bb3c12d8a5a6
通过收集的用户数据我们可以得出如下数据:
1) 1024×768, 1440×900, 1366×768, 1280×800 分辨率是大部分客户端的设置;
2) 客户端分辨率总类非常多,不常见的分辨率比例里面占了相当多的种类;
3) 随着硬件的升级换代800×600,1024×600 等600PX高度的分辨率在逐步消失。

6cc6167dedcc2fdc462d
通过对大于30W台客户端用户进行测试,得到的测试数据如下:
1) viewport 高度低于等于 580 的有 116786 个人,占 44.64%
2) viewport 高度低于等于 720 的有 216227 个人,占 82.64%
3) viewport 高度低于等于 800 的有 241420 个人,占 92.27%
4) viewport 高度低于等于 900 的有 259174 个人,占 99.06%

第三步:浏览器可见区域热区图分析

181293a917a5b00219b3
综合上面三个步骤,最终我们可以确定:
1、通过分析上面浏览器常见热区分布图我们可以看出来:在网页设计时如果把页面首屏高度定在大于600像素的分辨率上,有可能会导致很多的用户看不完整,考虑到良好的用户体验度,建议:网页设计师在设计网页时以600像素作为首屏高度来设计;
2、根据用户可见区域高度统计图及整体二八比例划分的原则,如果把首屏高度确定在710像素可以照顾到约80%的用户群体,小K建议:前端开发在做页面时可考虑把710 像素视为首屏区域高度,采用技术手段对首屏的表现进行优先加载可获得良好的用户体验度。

我也说两句
E-File帐号:用户名: 密码: [注册]
评论:(内容不能超过500字。)

*评论内容将在30分钟以后显示!
版权声明:
1.依据《服务条款》,本网页发布的原创作品,版权归发布者(即注册用户)所有;本网页发布的转载作品,由发布者按照互联网精神进行分享,遵守相关法律法规,无商业获利行为,无版权纠纷。
2.本网页是第三方信息存储空间,阿酷公司是网络服务提供者,服务对象为注册用户。该项服务免费,阿酷公司不向注册用户收取任何费用。
  名称:阿酷(北京)科技发展有限公司
  联系人:李女士,QQ468780427
  网络地址:www.arkoo.com
3.本网页参与各方的所有行为,完全遵守《信息网络传播权保护条例》。如有侵权行为,请权利人通知阿酷公司,阿酷公司将根据本条例第二十二条规定删除侵权作品。

 

 

本站会员发布的"原创作品",版权归原作者所有,如需商业用途或转载请与作者联系。
如未经作者同意,用作商业用途或匿名转载,作者将保留追究侵权者法律责任的权利。
© K印象 www.kimage.cn . All Rights Reserved | 基于现代网站理论和E-file技术构建 | 京ICP备10001932号-3