网络编程
位置:首页>> 网络编程>> 网页设计>> 网页设计之文字的辨识度与可读性

网页设计之文字的辨识度与可读性

作者:子条 来源:UCDChina.com 发布时间:2007-10-26 16:19:00 

标签:文字,可读性,设计

不久前因业务需要,我在自己的笔记本中安装了搜霸。当时一个做平面的朋友过来和我做一些设计交流,我在笔记本前准备输入一个网址,他靠近我的电脑,大叫道:“嗷!你也认识我的老同学“高亮”啊!”
我惊出一身冷汗。

几乎所有的产品中,都会使用到文字。小到错误、警告、提示信息,大到介绍、专题策划、广告文案。如果文字出现问题,修改起来成本很低。然而文字的可用性如果不好,将直接作用于产品。

我将文字的可用性理解为 辨识度可读性 两个方面。

辨识度就是文字在界面上出现时,用户能不能正常阅读。在设计中最常遇到的问题是关于文字的字体、字号、以及行距、间距。在中文的WEB设计中,12号和14号宋体是最常使用的,纵观几大国内门户网站,这几乎已经成为中国网友的阅读习惯。
而遇到列表或大段文字,还需要注意行距问题。例如12号宋体时,我们一般使用18-20像素的行距。14号宋体通常使用22-24像素的行距。

WEB设计时,一般不用考虑平面设计中字与字的间距问题,而使用默认状态。

但是也有例外。有时我们会用到18号的黑体或宋体,例如新闻内页的标题。
特别要提一下UCDCHINA.COM上的文章顶部右侧都会有一个“-”一个“+”号:

这是一个很贴心的设计,当视力较弱或者年老的读者需要大一点的字体时。
可以使用“+”这个功能来提高文本的辨识度。

同时,设计师还要考虑文本的颜色、加粗、对齐方式、对比度、链接样式等辨识度方面的问题。为了重点显示某些信息,我们通常会给文字加粗或改变字体的颜色,但是要慎用。过度的强调等于没有强调,例如下面这种情况:

一些保守的设计师强烈要求带链接的文本要有下划线,而一些设计师却很反感大面积出现下划线的链接。
我觉得重点不是下划线的问题,而是凡是有链接的文字,需要与别的文字做一个明显的提示,以示区别。如:

在可读性方面,会出现的问题也不少,设计师遇到时要学会将它们剔出来。经常出现的会是“术语”问题,因为我们经常会在设计产品时无意识地使用一些术语。很多术语对我们自己来说简单,但是对我们的目标用户群来说并不容易。

例如,要避免使用”ISP”,而要说成”网络服务供应商”。别对用户说”PV”,而告知“流量”等等。
我们应尽量使用用户的语言,而不是想当然的使用术语。如果一定要使用术语,那么在每次出现这个词时要一致。千万不要一会“搜索”,一会“查找”,一会“查询”,不一致会增加用户的学习成本。

另一个常见的问题就是含义模糊不清,词不达意。
例如上文提到的“高亮”,其实重点不是会不会联想到你的同学叫高亮,而是“高亮”代表什么功能让人摸不着头脑:是谁让谁高让谁亮,为什么要高亮,
不高亮行不行?是变高还是变亮?这不是产生误解的问题,而是不解——不知道它是干什么的,自然就不敢去使用它。

0
投稿

猜你喜欢

  • 在封装自己的FileSystemObject库的时候,测试的时候发现在文件夹或文件很多的时候,效率很低,显示一个文件夹需要2秒甚至更多,这让
  • 从 Google 的一个细节说起:整个虚线框都是“Next”的可点击区域。看似不经意,却直接提升了细节的可用性。其它页码也巧妙地和上面的字母
  • 第一章:基本的圆角框第二章:透明圆角化背景图片第三章:圆角化图片 第四章:CSS圆角框组件 V1.0序言:在我的文章《超圆滑圆角框的半完美解
  • Oracle游标分为显示游标和隐式游标。显示游标(Explicit Cursor):在PL/SQL程序中定义的、用于查询的游标称作显示游标。
  • 对于一个内容页的文章来说,如果这个文章内容过长或是其中有分类(排行),那么进行分页阅读无疑是最好的选择。如果一个文章内容不涉及分类,比如小说
  • 代码如下:<% '--------定义部份------------------ Dim XH_P
  • 一个很棒的 blog 文章,是 PPK 两年前写的,文章中解释了 contains() 和 compareDocumentPosition(
  •  window.opener 的用法 window.opener 返回的是创建当前窗口的那个窗口的引用,比如点击了a.htm上的一
  • 1、汉语分词的由来使用ASP开发的中小企业的网站,对于站内搜索,往往只是简单的通过SQL语句匹配数据库。对于比较短的词语搜索,这个方法是有效
  • 大概在九九年做游戏网站的时候,就对文章的发布感到麻烦,不过那会儿玩ASP不精。只是将就用着。在遇到长文件 10000 字时网页就是一大片长了
  • 我想把本篇作为css基础教程的序曲,从今天开始翻译和整理我从设计网页以来所学到的css基础知识。本教程会分成N个部分,单独发表,其间可能会插
  • 以发布目录为例:<OBJECT ID="agobjOraSession" RUNAT=&quo
  • 在web开发中经常遇到多关键词对对单个字段查询,我一般是通过动态数组来实现的。当然多个关键词的一般是用空格或,隔开,我这几假设多个关键词用空
  • 因AJAX接受数据时服务器默认是采用UTF-8的编码形式进行传送,所以在很多GB2312中文网页中应用AJAX回传数据经常会发生中文乱码。解
  • 1、MySQL常用命令create database name; 创建数据库use databasename; 选择数据库drop data
  • 我参与了IE7的开发过程,看到了在IE浏览器中形形色色使用MSXML的方法。显然有一些东西困扰着开发者:MSXML“混乱”的版本以及如何创建
  • 因为要做移动梦网WAP的一些接口,所以要用到这种方式,接下来会有ASP.net版本的,这个是ASP版本的,利用了MSXML2.XMLHTTP
  • 经常会在连接DB的时候用到,就是不知道代表什么意思。。。RS.OPEN SQL,CONN,A,BA: ADOPENFORWARDONLY(=
  • 在ASP中加密方法有对应的解密方法好象不多,现在根据前辈资料整理出在asp中加密与解密函数,根据RSA 算法实现的。什么是RSA?
  • 举个例子来说,要查找出2007-10-12至2007-10-31之间在网站上注册的会员,选择好日期后,点击“查询”按钮,发现2007-10-
手机版 网络编程 asp之家 www.aspxhome.com