当前位置: 首页 > 图文教程 > 网站运营 > 网站优化 > 用户体验设计:网页文字多大才合适?

网站优化
SEO试验:谷歌喜欢专业网站,百度喜欢娱乐网站
优化网站:让网站访问速度更快的方法
SEO教程:搜索引擎确定重复内容的原理
淘宝网店宝贝信息排名优化的技巧
SEO教程:Baiduspider常见问题解答
网站优化教程:网站链接的时间长短问题
SEO教程:搜索引擎收录网站的一些秘密
SEO专家:回答关于搜索引擎优化指标的4个问题
webjx推荐五款基于火狐(FireFox)的SEO插件
SEO经验总结:做SEO积累的8个实用经验
SEO教程:增加网站反向链接提高PR值的要点
SEO技巧:做好网站交叉链接的注意事项
揭秘24小时SEO优化关键词上百度首页第一
网站更新的24小时首页快照的5点方法
SEO教程:Http请求状态码和SEO的关系
SEO技巧:找到优质外部链接的13个方法
title,keywords,description标签
Google将发生最重大的改版 谷歌新主页截图泄露
谷歌公司连自己的网站的SEO都搞不清楚
Google本身产品的内部SEO报告文档

网站优化 中的 用户体验设计:网页文字多大才合适?


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-26   浏览: 73 ::
收藏到网摘: n/a

用户体验设计:<a href='http://www.RuanChen.Com/'http://www.RuanChen.Com/ 

电脑显示器市场(产品种类繁多,难免挂一漏万,数据仅供参考)

第二步:计算每个分辨率主流屏幕尺寸的物理宽度

现在的显示器长宽比不仅有4:3的标准屏,16:10的宽屏,还有更多不规则比例,为了在不同长宽比的显示器之间进行比较,统一使用横向分辨率来统计。用主流尺寸和长宽比(假设像素的长和宽相同)计算出屏幕宽度(英寸),再换算成公制(毫米),将其一一对应就可看出屏幕大小的趋势。再结合各分辨率的用户分布,结果如下图所示(图片中每个点对应一个分辨率,横轴为屏幕横向的像素数,纵轴为该屏幕的物理宽度,气泡大小表示使用该分辨率的用户人数。其中蓝色气泡表示标准屏,紫色表示宽屏):最大的三个气泡分别是1024*768,1280*1024,1280*800。

用户体验设计:<a href='http://www.RuanChen.Com/'http://www.RuanChen.Com/ 

第三步:计算不同显示器上的字号大小

用屏幕的物理宽度除以像素宽度,就可以得到每个像素的宽度。然后用指定的文字物理大小除以这个数,就可以得到在不同分辨率下所需的字号。例如要显示4.32mm见方的文字,各分辨率下分别需要如下的字号(对笔记本和台式机分别统计):

用户体验设计:<a href='http://www.RuanChen.Com/'http://www.RuanChen.Com/ 

不同分辨率下需要的字号

可以看出笔记本和台式机的尺寸相差很大,为方便使用,使用各分辨率的主流尺寸或平均尺寸计算出指定字号在每个分辨率下所需的字号。(下图去掉了基本只用在笔记本上的那些分辨率),以4.32mm、3.77mm、3.25mm为例(17寸1280*1024分辨率下的16、14和12号字):

用户体验设计:<a href='http://www.RuanChen.Com/'http://www.RuanChen.Com/ 

为保持固定物理尺寸,各主流显示器下所需字号与分辨率的关系

由于在未开启cleartype的情况下,一些中文字体在非偶数字号下的显示效果欠佳,所以一般建议使用12、14、16、18、22px等偶数字号。也就是对某个分辨率选择离它最近的偶数字号。例如:屏幕横向分辨率在1100以下的采用14px,1100到1500采用16px,1500以上采用18px,依此类推。

到人眼的距离

虽然笔记本的字号远小于台式机,可是实际并没有给我们带来那么大的不便,这是因为:一般使用笔记本时人眼到屏幕的距离比使用台式机时要近一些。当上网本越来越小时(极端的例子就是手机),人们使用的时候可能会拿的更近,这样视角更大。反之,当显示器越来越大时(24寸甚至更大),出于整体视角等方面考虑,人们也可能离屏幕远些,从而减小了视角。

定量来说:由于文字大小h(4~5mm)相对人眼到文字的距离d(30~60cm)非常小,可近似认为视角θ正比于h,并与d成反比(θ≈tgθ=h/d)。也就是说,同样大小的文字,距离二尺时看到的只有距离一尺时的一半大小。

也就是说,显示器只能传达一个大概的尺寸,每个用户在具体操作时仍会通过不自觉地调节到屏幕的距离来调整所看到的实际效果。面对越来越多的笔记本用户(请参照上一篇:笔记本电脑的市场份额),前端设计师们只能给出一个针对笔记本和台式机平均尺寸的页面效果,具体就靠用户去自我调整了。

用JS实现不同分辨率下自动调整字号

例如