当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 网页表单标签水平右对齐更适合中文网站

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

CSS样式表 中的 网页表单标签水平右对齐更适合中文网站


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

找了国内30个比较著名的网站的注册表单做样本,对标签和输入区对齐方式做了统计,得到了一个结论:标签水平右对齐更适合中文网站,或者说右对齐更适合中文的表现。设计师们闲下来后最大的喜好莫过于看看国外网站的流行趋势,感叹一下这个精致,那个大气,然后就开始往自己的设计里融入新元素。

不过想必大家都遇到过同样的情况,“用英文咋看咋漂亮,一换中文那种味道就表现不出来了…”。其一,因为中文是方块字,一行看上去很平;而英文有大小写之分,且词与词之间有间隔,看上去有韵律。其二,可用在网页中的中文字体太少,宋体、雅黑,用别的字体一来看着不习惯;二来不一定谁机器里都有那个字体;三来中文字体太大,动则就几十兆,不便于加载。

综上,中文网站中的文字运用要更考究。在注册表单中,水平右对齐已成为公认的方案,从统计中可以很直观的看到:

对齐方式各占比例

如果你已经读过之前一篇关于《设计表单的标签和输入区》的文章,应该对什么是标签“垂直顶对齐”,“水平右对齐”和“水平做对齐”有一定认识了。LukeW的书中列举的都是国外的例子,在《设计表单的标签和输入区》的回复中也有朋友提到在中文网页中的表现情况,比如“垂直顶对齐”比较少见等,对于我们常见的网页来说,确实很少,在 我的30个样本 中,只有百度的注册表单采用“垂直顶对齐”:

百度

采用“水平左对齐”的也比较少,只有3个:谷歌、土豆和CCTV。其余26个都采用的“水平右对齐”,而其中盛大通行证的注册表单就很带有“中国特色”,用空格填充,让2个字的标签与4个字等宽:

盛大

要把中文网站设计得美观漂亮,除了借鉴一些科学的方法外,更要考虑中文元素的特点。不然就像用人头马的瓶子装陈醋,看着好,品着怪。

原文:http://blog.b3inside.com/userexperience/right-justified-are-more-adapt-to-chinese-sites/