把握5元素,让页面文字阅读更舒适

上网在线阅读,是大多人获取信息的重要途径。用户会在网上阅读到大量的新闻及各类文章,特别是网络 小说,这些页面展示的主体就是通篇大段的文字。对于这种看似简单的文字堆砌的页面,有没有人抱怨过:“ 这样的页面还需要出效果图啊?”作为网页设计师的你是怎样处理这样的界面的?

是习惯性的使用宋体字 或者微软雅黑?是直接设为12px或者14px的字号?你有想过为什么要使用这种字体、字号吗?你有考虑过文字 排布与阅读效率的关系吗?你的页面背景会影响到用户的浏览舒适度吗?

让我们从以下5个元素具体分析。

字体、字号

字体和字号 这两个元素必须捏在一起说。

字体分为衬线体(serif)与非衬线体(sans serif)。简单的说,衬线 体(serif)就是带有衬线的字体,笔画粗细不同并带有额外的装饰,开始和结尾有明显的笔触(如下图)。 常用的英文衬线体有Times New Roman和Georgia,中文即是我们在windows下最常见的中易宋体。

与衬 线体相反,无衬线装饰,笔画粗细无明显查差异的字体就是非衬线体(sans serif)。Arial、Helvetica、 Verdanad都是我们熟悉的英文非衬线体,中文有微软雅黑和mac下默认的中文-华文细黑。

在过去,普遍认为有笔触装饰的衬线体,可提高辨识度和阅读效率,更适合做为阅读的字体。多用于报纸 、书籍等印刷品的正文。非衬线体饱满醒目,常用做标题或者用于较短的段落。

很长一段时间里,在 互联网上我们会注意这样的一个现象,国外网站大部分以非衬线体为主,而中文网站基本就是宋体。其实不难 理解,衬线字体笔画有粗细之分,很小字的情况下细笔画就被弱化,受限于电脑的分辨率,10-12px的衬线字 体在显示器上是相当难辨认的(见下图);同字号的非衬线体笔画简洁而饱满,更适于做网页字体。windows 下,中文宋体小字点阵的特性,12px、14px的字号显示仍然相当清晰美观,便于阅读。这也就是为什么大多网 页设计制作人员容易机械性的选用特定字号或英文或中文的字体。

如今随着显示器越来越大,分辨率 越来越高,经常会觉得看12px的文字有点吃力,做为设计师也会不自觉的开始大量使用14px的字体,而且越来 越多的网站开始使用15、16px甚至18px以上的字号做正文文字。大字号的使用,对英文字体来讲,衬线体的高 辨识度和流畅阅读的优势就体现出来了。中文宋体在显示14号以上字体时,单线条大字总是看上去有些单薄不 那么协调,特别是这款点阵字在ClearType(http://baike.baidu.com/view/755822.htm) 强制平滑显示状态 下尤其显得模糊不清。微软雅黑就是微软在这个字体显示问题上的解决方案。

让我们分别对比下中英 文的衬线体与非衬线体在不同字号时的显示效果。

英文以Times和Verdanad为例,中文以宋体和微软雅 黑为例。

时间: 2024-08-03 00:52:30

把握5元素,让页面文字阅读更舒适的相关文章

5元素让页面文字阅读更舒适

  上网在线阅读,是大多人获取信息的重要途径.用户会在网上阅读到大量的新闻及各类文章,特别是网络小说,这些页面展示的主体就是通篇大段的文字.对于这种看似简单的文字堆砌的页面,有没有人抱怨过:"这样的页面还需要出效果图啊?"作为网页设计师的你是怎样处理这样的界面的? 是习惯性的使用宋体字或者微软雅黑? 是直接设为12px或者14px的字号? 你有想过为什么要使用这种字体.字号吗?你有考虑过文字排布与阅读效率的关系吗? 你的页面背景会影响到用户的浏览舒适度吗? 让我们从以下5个元素具体分析

网站设计:把握5元素,让页面文字阅读更舒适

中介交易 SEO诊断 淘宝客 云主机 技术大厅 上网在线阅读,是大多人获取信息的重要途径.用户会在网上阅读到大量的新闻及各类文章,特别是网络小说,这些页面展示的主体就是通篇大段的文字.对于这种看似简单的文字堆砌的页面,有没有人抱怨过:"这样的页面还需要出效果图啊?"作为网页设计师的你是怎样处理这样的界面的? 是习惯性的使用宋体字或者微软雅黑? 是直接设为12px或者14px的字号? 你有想过为什么要使用这种字体.字号吗? 你有考虑过文字排布与阅读效率的关系吗? 你的页面背景会影响到用户

调整Windows8的DPI,使文字阅读更舒服

  1.桌面空白处点击右键,选择"个性化",如下图: 2.选择左侧"显示"选项,如下图: 3.调整"是桌面上的内容更易于阅读"设置,默认为100%,调整125%或150%可以让桌面上的文本及其他项目的大小更改.

网页设计师更需要注意页面的阅读性和可操作性

网页制作Webjx文章简介:设计师的作用不仅仅是使页面看上去美观.吸引用户的眼球,更需要注意页面的阅读性.可操作性等,要为扫描而设计. 当我们设计一个页面或者一个banner的时候,往往挖空心思去想创意,或者把效果做得很炫,却忽略了一些用户习惯.我这里所说的只是一些大家都知道,却往往容易忽略的--为扫描而设计. 用户善于扫描,且勤于扫描.WHY? 1.忙碌--大部分用户会花极少的时间来阅读极多的页面,为了提高效率,他们对于大部分的页面会采取扫描的方式,匆匆掠过.他们不可能也没有时间去阅读互联网带

提高网页文字阅读的5个体验

1.长文本使用标准字号 你现在正在阅读的文字的字号并不大,是你浏览器的默认显示大小,是浏览器本来应该显示的大小. 我不想点击"放大"."缩小"按钮,也不想更改浏览器的设置.我想马上就开始阅读,我希望你能适应我的设置,而不是反过来让我更改设置来适应你. 刚开始的时候,要用大字号来设计出一个好的布局会相对困难一些,但是这样会帮助你设计出一个更简单.更清爽的页面.把一个网站塞满各种信息并不难,但是让她简单而易用却不那么简单.起初,你会不适应这些大字号,但是一天之后,你就不

浅谈网页元素与页面的转场设计

在电视作品中,段落与段落.场景与场景之间的过渡或转换,叫做转场.为了使电视片内容的条理性更强.层次的发展更清晰.在场面与场面之间的转换中,需要一定的手法. 网站也是类似的,一个完整的网站由若干页面组成,而每个页面又由若干元素组成.为了使网站内容的条理性更强.操作逻辑更清晰.用户体验更好.用户转化率更高,在不同元素与页面的转换中,也需要一定的技巧. 过渡效果 a 渐入渐出 这种方式非常常见:比如在酷狗音乐盒中关闭音乐后,声音在几秒钟内逐渐停止,而不是马上消失:凡客首页广告头图的轮换也采取了渐入渐出

ava cript-为什么在chrome中插入百度地图之后页面文字就没法选中了?

问题描述 为什么在chrome中插入百度地图之后页面文字就没法选中了? 从这里生成的地图http://api.map.baidu.com/lbsapi/creatmap/index.html 在其他浏览器都正常,可以选中文字 有一个解决方法是把里面js文件的版本从1.1变成1.0.但不明白造成这种现象的原因是什么? 解决方案 看下你的层,有没有覆盖透明的层,把你的文本的zindex提高,另外看看 css 代码和js,有没有冲突的地方. 解决方案二: chrome中右键,审查元素,调出开发工具看是

如果文字多了,想让超出元素外面的文字以省略号显示的css样式

请看下面的demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省略号显示</title> <style type="text/css"> .box{ width: 200px; height: 20px; line-height: 20px; background:

js实现选中页面文字将其分享到新浪微博_javascript技巧

一.功能简述 正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了.我的站点每篇文章的底部有一些分享的链接: 不过我觉得这些分享基本上就是聋子的耳朵--摆设.除非这篇文章惊天地.泣鬼神,痛彻心扉,穿越前世今生.但是,如果有更加方便快捷的分享方式,这种冷淡得让人结冰的场面或许就不会经常出现. 一般翻译软件都有划词翻译功能,例如有道桌面词典的桌面划词翻译功能:   启用后,随便选中那个软件的一段文字,就会出现类似这样子的浮动提示