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

网站优化
SEO的步骤参考
SEO 两大搜索引擎网站近期算法分析
SEO 搜索引擎算法探讨
SEO 选择合适的CMS建站
SEO Google如何处理低质量链接
SEO 网站管理员工具深入分析
SEO 分析某关键词的竞争强度
B2C 电子商务网站如何做推广和优化
网页游戏的推广的策略与效果分析
网站排名下降的主要原因分析
网站关键词排名发生变化时的应对方法
Google为网站提供相关链接功能
正确解决IE6的问题的方法
谈google 命名锚链接识别网页段落
动易CMS的目录结构SEO优化
让你的wordpress博客备受搜索引擎青睐
经过实践后觉得确实有效的Baidu优化经验
网站主要关键词排名不高的原因分析
seo优化通用方式小结
网站推广3种方法操作流程详解

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-26   浏览: 93 ::
收藏到网摘: 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实现不同分辨率下自动调整字号

例如