BillKnow.com

textarea技巧

关于textarea的9个知识点：

1. Image as textarea background, disappears when text is entered

设置背景图片：

textarea {
background: url(images/benice.png) center center no-repeat; /* This ruins default border */
border: 1px solid #888;
}

需要注意的是设置background后会影响textarea的本身的style，因此要重新设置border。

焦点离开textara的时候显示背景图片，获取焦点的时候图片消失：

            $('textarea')
  .focus(function() { $(this).css("background", "none") })
  .blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });

2. HTML5 placeholder text

对于支持placeholder的浏览器可以直接使用此属性：

<textarea placeholder="Remember, be nice!" cols="30" rows="5"></textarea>

3. Placeholder text, HTML5 with jQuery fallback

不支持placeholder的浏览器可以通过Jquery来实现：

判断一个元素是否支持某属性：

function elementSupportsAttribute(element, attribute) {
  var test = document.createElement(element);
  if (attribute in test) {
    return true;
  } else {
    return false;
  }
};

如果支持Placeholder则直接设置，否则通过Jquery来实现：

if (!elementSupportsAttribute('textarea', 'placeholder')) {
  // Fallback for browsers that don't support HTML5 placeholder attribute
  $("#example-three")
    .data("originalText", $("#example-three").text())
    .css("color", "#999")
    .focus(function() {
        var $el = $(this);
        if (this.value == $el.data("originalText")) {
          this.value = "";
        }
    })
    .blur(function() {
      if (this.value == "") {
          this.value = $(this).data("originalText");
      }
    });
} else {
  // Browser does support HTML5 placeholder attribute, so use it.
  $("#example-three")
    .attr("placeholder", $("#example-three").text())
    .text("");
}

4. Remove the blue glow

移除textarea获取焦点后显示的蓝色边框：

            textarea {
  outline: none;
}
          
需要注意的是此蓝色边框基本上作为了一种标准，去掉请慎重考虑。关于去边框，可以参见sofish写的文章：去除按钮、链接中的虚线框

5. Remove resize handle

 
去掉重新设置大小的功能：

textarea {
  resize: none;
}

6. Add resize handle 
增加边框大小调整功能：

需要用到Jquery ui的插件： resizeable interaction ，调用方法是：

$("textarea").resizable();

7. Auto-resize to fit content

根据内容自适应大小：

同样需要用到jquery插件：auto resizing textareas，使用方法如下：

$('textarea').autoResize();

8. Nowrap

通常可以使用如下方法来使文字不换行 #whatever { white-space: nowrap; }，但此方法对textarea无效，textarea需要用如下方法：

<textarea wrap="off" cols="30" rows="5"></textarea>

9. Remove default scrollbars in Internet Explorer

去掉默认的滚动条：

textarea {
  overflow: auto;
} 
所有的demo参见这里，文章来自Textarea Tricks。

‘return false;’ 和 ‘e.preventDefault();’的区别

原文地址：The difference between ‘return false;’ and ‘e.preventDefault();’

function() {
  return false;
}

// IS EQUAL TO

function(e) {
  e.preventDefault();
  e.stopPropagation();
}

return false阻止了事件的向上传递。

网站设计中需要注意的事项

一、图片的使用

例如要实现类似button表现形式的链接，可以通过<a herf=”” class=”button” />,如果都采用背景图片的方式实现的话，当button增多的时候，就需要设计很多图片，并且修改、维护麻烦。

二、良好的组织结构

1.文件的组织

     对于JS、CSS、图片的分开存放

2.文件命名

    如对于Header部分的内容以header_前缀命名，如背景图片以bg_为前缀等。

3.class命名

   不要随意定义class,清除那些没用到的class

4.尽早测试浏览器的兼容性

    每当开发完一个功能就需在各个浏览器中进行测试，如果等全部开发完毕后再进行兼容性测试，到时的hack将是个噩梦。

摘自：http://net.tutsplus.com/articles/general/7-crucial-tips-for-designing-and-maintaining-a-large-site/

文中翻译的部分是本人在开发中深有感触的，因此翻译记录于此，规范以后的工作。

UI设计的10个原则

没有好的界面和用户体验，网站也就很难留住用户，下面介绍在UI设计中需要注意的10个方面。

1. 不要忘记你的用户(Don’t Forget About the User)

过多的关注CSS和XHTML及代码的兼容性，而忽视了最终用户。We just can’t assume that standards compliance is all that’s needed to create a good UI.

2. 不要忽视错误页面(Don’t Overlook Error Pages)

在出现错误时，需要将错误信息描述清楚，而非简单的告诉用户访问出错。they will spend the time to understand an error situation if you explain it clearly, because they want to overcome the error。

3.任何时候都要设置背景色(Always Set a Background Color)

4.不要过多的设置一些可访问性元素(Don’t Overdo Accessibility Features)

对于刚了解的可访问性的设计人员来说，会特别注意通过使用HTML元素或其他方法来提供可访问性，但这些元素如果用得不正确反而会导致访问性差。when used wrongly have no effect and can actually have the opposite effect by making the page less accessible and less usable。

5.采用焦点中心设计(Use Epicenter Design)

最先设计页面中最主要的部分，最主要的部分就是在页面中，如果这部分不存在将会整个改变页面的目的。Using the Epicenter Design method keeps our UIs focused, and ensures that we’re not "missing the point" of the page.

6.了解用户

了解用户在浏览网页时是如何与应用进行交互的。可以邀请朋友来测试网站，并观察他们在访问网站时是如何操作的。Knowing how users interact and use your website is incredibly valuable information, and if used correctly can greatly change your UIs to better suit your users.

7.填写表单时提供有意义的提示(Give Incentives For Users to Complete Forms)

用户在填写表单或表单填写完毕后，给用户一些有意义的提示，增强友好性。The user must feel that the value or outcome outweighs the cost (or time) of having to fill out the form.

8.UI设计的一致性

在用户体验中，页面表现越跟用户的期望一致，用户将越感到有可控性。when things always behave the same, users don’t have to worry about what will happen.

9.减少行话的使用(Keep Jargon to a Minimum)

如果在应用中采用过多的行话，将会影响一般用户对文章的理解。If you’re using it outside of that situation, you’re probably not communicating clearly, honestly, or effectively。

10.采用原型而非框架(Make a Prototype Instead of a Wireframe)

Prototyping allows us to see problems more clearly–and often earlier–in the design and development process.

文章来源：http://nettuts.com/articles/10-principles-of-the-user-interface-masters/

代码高亮测试

1. php no line numbers

<div id="foo">
<?php
  function foo() {
    echo "Hello World!\\n";
  }
?>
</div>

2. java with line nubers

public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}

CSS Sprites

在网页的请求中，大部分的时间都消耗在HTML本身文档之外，例如图片、脚本、CSS等的下载。因此要提高WEB下来，减少HTTP的请求，可以从图片、CSS等方面来考虑。而减少HTTP请求将会大大提到WEB性能。下图是针对门户网站的时间消耗统计：

在HTML中，每一个img标记都将产生一次HTTP请求，因此我们可以通过减少图片请求来提高WEB性能。

下面将通过举例说明如何减少image的请求。

举例1：

对于a标签，我们通常会通过CSS来设置其背景图片及hover时变换用的背景图片。参考例子：http://css-tricks.com/examples/CSS-Sprites/Example1Before/default.htm

代码如下：

#nav li a {background:none no-repeat left center}

#nav li a.item1 {background-image:url(‘../img/image1.gif’)}

#nav li a:hover.item1 {background-image:url(‘../img/image1_over.gif’)}

#nav li a.item2 {background-image:url(‘../img/image2.gif’)}

#nav li a:hover.item2 {background-image:url(‘../img/image2_over.gif’)} …

效果如下：

然而我们可以将这些图片都整合成一张图片，通过设置背景图片的位置来定位需要显示的图片。参考实例：http://css-tricks.com/examples/CSS-Sprites/Example1After/default.htm

代码如下：

#nav li a {background-image:url(‘../img/image_nav.gif’)}

#nav li a.item1 {background-position:0px 0px}

#nav li a:hover.item1 {background-position:0px -72px}

#nav li a.item2 {background-position:0px -143px;}

#nav li a:hover.item2 {background-position:0px -215px;}

效果如下：

另一个关于CSS Sprite的例子可以参考如下：

未使用CSS sprite的例子

使用CSS sprite

另外此网站上提供了CSS SPRITE的生成器，相见如下：http://spritegen.website-performance.org/

文章中提到的实例下载：

Example 1 Before
Example 1 After
Example 2 Before
Example 2 After
Photoshop Files

本文参考自:http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/  ,仅次记录，以便学习。

由08年CES展看数字电视UI设计

【摘要】本文结合08年CES展上的数字电视UI展示情况，对UI设计的概念，数字电视UI设计的发展状况等做了介绍，在此基础上，对UI设计流程，公司UI设计现状等做了详细的阐述。

   【关键词】UI设计、数字电视

1、前言

纵观目前的数字电视的发展现状，存在IT企业家电化和家电企业IT化的两个发展趋势。IT企业和家电企业纷纷进军数字客厅，希望在数字电视领域有所建树。在这一场角逐中，各自的优势和劣势在哪里？

IT企业过去面向的消费者主要是具备一定专业知识的人员，在操作比如电脑等产品时，需要具备一定的专业知识。而家电企业面对的是大众消费者，男女老幼均可轻易上手操作。由此可见，在这场角逐中，家电企业的优势是产品的易用性，劣势是技术，而IT企业的优势是技术，劣势是产品的易用性。数字电视的技术复杂程度越来越高，功能越来越强大，操作同时也变得越来越复杂，这就要求我们一方面加大对技术的投入，一方面必须在产品的易用性上投入更大的精力，确保产品一贯的易用性的优点在数字电视领域同样延续甚至有更大的突破。而UI设计的核心，就是解决产品的易用性问题，在人与产品之间建立良好的交互使用界面。本文将结合08年CES展上的数字电视UI设计的展示情况，对UI的概念和公司UI设计现状等做一个简短的介绍。

2、UI设计的概念

UI的本意是用户界面( user interface )，概括成一句话就是——人和工具之间的界面。这个界面实际上是体现在我们生活中的每一个环节的，例如我们切菜的时候刀把和手就是这个界面，开车时候方向盘和仪表盘就是这个界面 ，看电视的时候遥控器和屏幕就是这个界面，用电脑的时候键盘和显示器就是这个界面。国际上对UI设计的概念也在不断的完善和发展中，UI设计的本质是在正确理解用户（需求、习惯、情感……）的基础上，设计出产品和用户之间的交互界面，目标是建立起用户与产品间的情感联系，让用户在使用产品时愉悦、符合自己的逻辑、有效并且是高效的使用产品，其最终目标是建立一种防止竞争对手进入的软壁垒。最典型的例子是我们经常听到说某某人用过了诺基亚的手机，下一次换手机时还是选择诺基亚的手机，原因是什么呢？大家一般会说感觉质量很好、信号不错啊之类的话，但往往也会说一个原因，习惯了诺基亚手机。这里说的习惯了诺基亚手机是指什么呢？其实就是习惯了诺基亚手机的用户界面的操作方式。

回溯UI设计的历史，我们很轻易的可以想到乔布斯当年创立的苹果公司的崛起，其实就是依靠的UI设计，第一家推出电脑图形操作界面。再看最近风靡全球的Iphone，最大的创新除了商业模式的创新，也有其全新的UI设计创新，被行业内称为手机的再次发明。

下图由IDEO为苹果设计的鼠标，也是UI发展史上的一个标志性事件，确立了鼠标设计的基本原则，为电脑的普及推广起到重要作用。

3、CES展上数字电视UI设计展出情况

盖茨在08年美国CES展上做的告别CES演讲中，对UI设计在下一个数字十年中的作用做了如下阐述：“我所谈论的最后一个要点，同时也是最容易被人们低估的事物，是自然用户界面的作用……自然用户界面引发了强烈的市场反响，人们对于更加简单的信息导航方式非常感兴趣。因此，数字智能笔、触摸、图像识别等新型交互方式迅速普及，给用户带来了全新的体验。我们的目标是，只需坐在电视机前打几个手势，就可以完成想干的事情。”

在CES展上，微软展出了Surface来印证它在自然界面领域的探索。同时，它的Windows Media Center和Mediaroom，显然在为侵入客厅为“只需坐在电视机前打几个手势”的目标而努力。

各大家电企业也纷纷拿出各自的针对数字电视的UI设计方案。夏普、三星、索尼、松下、日立等企业都公开展出了各自的数字电视UI设计解决方案。下面重点介绍几个在数字电视UI设计及相关领域有创新的几个企业

夏普

夏普在08年CES展上展出了108寸的AQUOS WALL，展示出了它的数字电视UI设计方案。从展示效果看，该方案运用了类似Widgets的技术，可以把感兴趣的咨询和内容自定义放置在桌面。

三星

三星在本次展会上展出了基于微软媒体中心之上的数字电视UI设计方案，并无大的突破。三星已经公开承认其在UI设计领域落后于国际一流水准，已经宣布要加大在UI设计的投入。为此，三星在其设计部门下面的设计经营中心专门成立了UI革新组。（见《环球企业家》2007年21期“三星3.0”专访）

日立

日立本次CES展上展出的针对数字电视UI设计，是本次展会上针对UI设计展出规模最大的企业，包含新型输入设备及方式、新型交互界面设计。其推出的的轨迹球形式的数字电视输入方式，属于一种转移创新，台湾罗技公司推出有很多轨迹球形式的鼠标，日立将这种技术原理移植到数字电视上，同时进行了一些改进。

东芝

东芝这次CES展上展出了一项新技术：Hand gesture video control,手势识别影音控制技术，用几个手势控制电脑上的影音播放。考虑到电脑是近距离操作，手势识别没有太大的意义，我们有理由认为东芝开发手势识别技术的这次尝试是在为数字电视做准备，也算是盖茨的“只需坐在电视机前打几个手势，就可以完成想干的事情”这句话的很好的一个注脚。

其它公司展会上展出UI相关图片如下

                                松下网络连接数字电视

                              飞利浦新型数字电视遥控器

摘自：http://chidsun.blog.sohu.com/81620485.html

什么是分辨率？分辨率和像素有何关系？

相机之家   日期: 2008-3-11   类型: 原创  作者: 喜洋洋

电视网页的设计规范

许多网页开发人员一直在设计那种与书籍或杂志非常相似的网页。然而，在一台电视机上显示内容的方式发生了变化，因为浏览其内容的观众不同。大多数电视用户并不习惯于等待一些内容出现在他们的电视屏幕上，或者不习惯于对屏幕进行滚动操作来浏览内容。我们要时刻考虑到这类新观众的需要，为此，我们已经开发了如下一些解决一般性网页设计问题的解决方案。

　　首先，要将最重要的信息在第一屏上显示出来。电视观众并不习惯与滚动操作，因此他们会忽略您放在第二屏或者后面屏幕上的信息。在设计您的主页时要力求将每一个重要的内容均在第一屏上显示出来。

　　原则：尽量保持文字的简洁明了。

　　设计在电视屏幕上显示的后续页面。虽然用户不习惯采用滚动方式来浏览内容，但是您可以通过明显的导航提示来组织网页内容。例如，如果您的网页中包含了多屏信息，那么您要对信息进行组织，使得它每次按照合理的顺序呈现在屏幕上。在每一屏显示内容的底部要提供"下一页"、"上一页"和"页首"按钮，这样浏览者就可以很方便地通过这些控件来完成在信息间的导航操作。

　　原则：设计适合电视屏幕显示和用户习惯的网页。

　　减少在网页中的项目数量。电视观众习惯于将注意力集中在一个点上。下一次您观看电视节目时可以注意一下，您的眼睛总是定在屏幕上的一个特定点上。虽然您的网页不会仅有一个元素来作为关注的焦点，但是您设计网页时应当使用较少的项目，并将最重要的项目放在页面的显著位置以吸引浏览者的注意力。

　　原则：尽可能地较少滚动操作。

　　防止出现文字、图象或其他使用$#@60;NOBR$#@62;标识符的水平流出现断行现象。电视机屏幕的宽度有限，因此您在网页中设计的文字其长度不能够超过计算机屏幕上一行的宽度。许多Web页中使用$#@60;BR$#@62;标识符来进行强制换行，然而，由于电视机屏幕的宽度有限，因此在计算机屏幕上看上去效果不错的页面在电视机上看起来可能会莫名其妙地出现中断。避免这种现象发生的一种简单方法是避免在网页设计中使用$#@60;BR$#@62;标识符。然而，您也可以使用$#@60;NOBR$#@62;标识符，这样会使IETV对$#@60;BR$#@62;元素进行忽略。

　　限制在页面上窗体（FRAME）元件的数目。在易用性测试中，我们发现窗体很容易造成电视浏览 幕炻摇Ｊ率瞪希哂行矶嗟霾说サ拇疤蹇瓷先ケ绕渌疤逶椿嵩斐筛嗟奈侍狻５鄙杓拼疤迨保×肯拗朴没П匦杼畛浠蜓≡竦南钅渴俊Ｓ没Р幌Ｍ奔浠ㄔ谔畛浔淼ド希茄黾群氖庇指丛印?

　　原则：避免设置在主页中提供下载软件的链接。

　快速显示

　　如果能够尽可能快地将您的网页显示出来，那么将为您的用户提供一种更好、更愉快的使用感受。下面的原则将使您的网页加载速度更快。

　　使用具有大小提示的图象。当您在超文本标记语言HTML代码中针对在Web页中使用的图象指定高度和宽度时，IETV在其他页面显示的同时为这些图象在屏幕上预留了空间。因此，用户在图象完成加载之前就可以对页面上的文字和链接进行访问。

　　对页面进行预加载。如果您已经对用户访问站点中不同网页的顺序有所了解，那么您可以通过在HTML代码中指定下一页的方式来帮助用户更块地进入下一页。IETV使用这一方式来"预加载"下一页，将其内容保存在存储器中以便在用户选择相应的链接时尽快地转换到这一页来。

　　考察页面的显示顺序。此外，还要考察一页中不同部分在屏幕上的显示顺序：文字显示快于图象，小图象的加载快于大图象。

　　生成能够快速加载的图象。图象加载速度过慢会影响用户的情绪，并可能造成他们离开当前的站点。下面的窍门并不一定适用于所有网页及其设计，但是您应当详细地考虑以下这些建议。

　　将图象转换为JPEG格式。JPEG图象在占用空间上更小，因此可以更快地显示出来。然而，如果您需要使用一个大型的、更加复杂的图象（例如全彩色照片），那么您就必须在文件规模较小但效果较差，和下载时间较长但图象质量高这两者之间有所取舍。

　　将较大的图象放在第一屏下面。通过将较大图象放置在用户访问网页时看到的第一屏显示的下面，设计者可以确保在图象完成加载的同时用户可以开始浏览网页中的文字。

　　对相同的图象进行复用。如果您有一些相关的网页，那么您可以利用自动高速缓存技术。这个功能使您可以在一个图象首次加载之后，对这个图象进行复用。

2．针对电视浏览进行设计
　　计算机显示器相比，电视机的分辨率要低得多。诸如微小的文字和由细线构成的图象在内的一些细节内容在电视屏幕上很难读取出来。此外，在计算机屏幕上看上去很好的背景在电视机屏幕上显示起来经常出现扭曲的情况。下面介绍的原则将能够帮助您使网页在电视机屏幕上的显示效果更好。
颜色
　　避免使用全红或全白这两种颜色。虽然目前许多主页使用了全白颜色的背景，但是如果您希望您的网页在电视机上显示效果更好的话，这不是最佳的选择。全白或全红颜色的背景会造成屏幕变形，页面的边界出现弧形。如果您真的需要使用白色的背景，那么应当尽量使用90%的白色。例如使用亚麻色或白烟色（或十六进制值为#EFEFEF的颜色）。总之，较暗颜色的背景比其较亮颜色的背景显示效果要好。例如，碳黑色（值为#191919）是用作Web页背景的一种出色的颜色。
　　在暗色调的背景下使用亮色调的文字。在一个暗色调的背景下的亮色调文字对于电视观众来说更易于查找阅读。您在为网页的文字选择颜色时应当记住这一点。
　　有关选择电视屏幕上所显颜色的进一步信息，请查阅下面关于主题和模板的说明。
图象
　　尽量避免使用大图象文件或者嵌入尺寸较小文字的图象。避免当您对网页的内容进行设计时，应当仔细考虑所要使用的图象。具有许多细节内容的图象很难看出来。特别是嵌入图象中的文字（除非尺寸很大）与普通的文字相比更难读到。
　　避免使用很细的水平直线，因为电视机在显示这些直线上存在一定问题。如果您使用了水平直线，那么应当使这些直线大于一个象素，或者使用美术工具的反模糊功能。
文字
　　应避免在HTML文件中使用小号的文字和图形，因为在电视机屏幕上很难看清楚它们。应避免使字体比浏览器窗口的基本字体还小。由于在一个图象按钮标签中包含了很多小号字，因此应当考虑将标签放置在按钮以外的区域。
3．针对IETV的设计
　　当我们设计在电视机屏幕上显示的网页内容时，我们必须牢记用户是通过一个遥控器或无线键盘来进行导航操作的。另外一个重要的因素是用户习惯于每次对电视机整屏的内容进行处理。虽然您现有的网页可能在IETV上看上去都很好，但是通过下面这些原则，您可以使自己的网页看上去变得更好。
　　保持标题的简洁。在针对电视屏幕和计算机显示器进行设计时，对于前者来说网页内容标题显得更为重要，更值得仔细考虑。? 持网页标题的概括性和简短性。
　　在使用图象时要对加载时间问题有所考虑。我们都遇到过这样的问题，一些网页看上去总是处于加载状态，对这一问题最常见的解决方法是转到其他网站去。电视用户比计算机用户要多得多，他们不习惯等待屏幕上显示出内容来。为了避免使浏览者感到不便，不应使用很大的图象，同时应减少每个页面中的图象数量。然而，如果您使用了很多图象，那么要确保在完成图象加载的同时，用户可以读取页面中的文字。
　　使用声音使您的网页更具趣味性。通过将背景音乐或主题音乐溶入您的网页中，您可以为电视用户提供一种与电视节目更加接近的感受。
窗体（FRAME）
　　由于电视用户对于窗体并不熟悉，因此对于网页设计者来说窗体应引起特殊的重视。
　　保持窗体的简洁。当设计窗体时，应时刻牢记最终观众的感受。不要使船体非常复杂，同时要减少弹出菜单的数量。此外，设计的窗体不应要求用户键入过多的内容（因为他们不可能总是使用键盘）。
　　为所有的窗体选择背景和文字的颜色。在一致的方式下使用$#@60;INPUT$#@62;标识符中TEXT属性的取值，这样您就可以确保用户熟悉您网页中所使用的窗体元件。
　　对于所有的窗体，确保一致的导航。由于电视用户通过遥控器对窗体进行访问，因此他们更需要您的站点中保持所有页面具有一致的导航设计。例如，您应当保留的一个元件是从左至右和从上至下的导航流。另外一个实例是要确保诸如"提交"按钮之类的元件总是放置在窗体的右下脚。
安全的网页
　　如果您通过使用安全Socket层协议（SSL：Secure Sockets Layer）来传输安全的网页，那么我们建议任何不需要被安全传输的页面资源（例如图象）都应当通过正常的联接来传输。

分辨率之深入研究

作者：Assos　来源：未知　发布日期：2001-09-26　

所谓的“分辨率”指的是单位长度中，所表达或撷取的像素数目。换言之：
从撷取设备(例如：扫描器、数位相机) 的角度观之，解像能力越高者，所能撷取影像的分辨率也就越高。影像分辨率使用的单位是ppi(Pixel per Inch)，意思是每英寸所表达的像素数目。
从打印设备的角度观之，影像的分辨率越高者，所印出来的影像也就越细致。打印分辨率使用的单位是dpi(Dot per Inch)，意思是“每英寸所表达的打印点数”。
ppi与dpi的度量方式常常被人混用，例如，我们说：“扫描器的光学分辨率虽然有1200x600dpi，但是扫瞄传统相片时，相片有效的分辨率大约只有150 dpi左右。”前面的1200×600“dpi”，其实便是指“ppi”。
数位影像的“成像品质”其实决定于撷取的阶段，如果原稿的品质很精致，扫描器的光学分辨率也不错，通常便可以得到较好的数位影像。
相对地，使用粗糙模糊的原稿，即使提高扫瞄分辨率也无济於事，事后利用影像处理软体加以调校，可以改善的品质亦是相当有限。当然，打印时若用更高的打印分辨率可能也印不出精致漂亮的作品了！
有几种常见的“分辨率”，是我们所需要了解的，它们分别是：
输出阶段：影像分辨率、打印机分辨率。
呈现阶段：屏幕分辨率、屏幕字型分辨率。
输入阶段：扫描仪分辨率、数位相机分辨率。
兹分述于下:
影像的分辨率会影响打印时，影像的打印品质及大小，但不会影响它在屏幕上所呈现的品质。而且，影像分辨率是可以透过PhotoImpact、PhotoShop、PaintShop Pro…等影像处理软体加以改变！
例如，有一影像的分辨率为120 dpi，大小为1600×1200像素，这表示打印时，每一个Inch要表达120个点(Dot)，所以印出来的尺寸大约是 13.3"x10" 的大小。
现在，我们透过软体将这个影像调整为240dpi，它在屏幕上当然还是占用1600×1200的大小，并没有因为影像分辨率的调整而改变(您可以清楚地看到，屏幕上影像的品质也没有改变)，不过，在打印时，由于每一个Inch必须要表达240个点(Dot)，所以印出来的尺寸便只有6.7"x5"大小，是原本尺寸的1/4(以面积来计算)，此时打印的品质便显得更加地细致(所以，打印品质提升了)。
这里，我们要澄清两个观念：
有人说：“影像的分辨率越高，表示影像的(成像)品质越好。”其实，这句话存在很大的语病，如前所述，影像的品质在输入阶段即已大致决定，而且分辨率可以任意使用软体加以改变，因此，调高分辨率无法改善影像的成像品质！严格地说，提高影像分辨率，影响的是打印的品质及大小。
另外一种说法：“Web 影像只需要96 dpi就够了，印刷用的影像就得使用300 dpi。”此话也存在若干的误导， Web影像若只是要呈现于萤幕之上，我们关心的是它的影像大小，至於影像解析度大小，对Web上的影像并不会造成显示的差距及影响。
此处，我们必须特别强调的是，“影像分辨率”不仅影响到列印时的大小及列印的品质，它也会影响到影像在文书排版软体中的“大小”。
屏幕分辨率就是Windows桌面的大小。常见的设定有640×480、800×600、1024×768…等。
　　以17"的萤幕为例，若原本有一640×480的影像呈现在屏幕上，由于特定屏幕的显示尺寸是不会改变的(或者说，被视为固定的大小)，当我们将屏幕分辨率由640×480调整成1024×768时，17"的萤幕上必须容纳更多的像点，所以，原本的影像看起来会更加地细致，但尺寸则缩小为桌面的40%。
屏幕分辨率的调整能力取决于特定的厂牌、机种、显示卡及屏幕的大小，一般而言：
15"的屏幕最佳的选择设定为640×480、800×600。
17"的屏幕最佳的选择设定为800×600、1024×768。
19"的屏幕最佳的选择设定为1024×768、1280×1024。
在调整屏幕分辨率时，也得注意屏幕刷新(整理)频率的设定，根据VESA组织的建议，最好将屏幕更新频率设定在72Hz以上，眼睛才不会因为受到视讯的更新整理而感到劳累。想要同时得到较高的屏幕分辨率及更新频率，就得仰赖于较高级的屏幕机种及显示卡。
屏幕字型分辨率　或许您曾经听过一种奇怪又熟悉的说法：“PC的屏幕分辨率是96 dpi，而Mac的屏幕分辨率是72 dpi。”很明显的，屏幕的尺寸选择很多，桌面的大小设定不同，怎麽可能PC的屏幕分辨率一定就是96 dpi呢？事实上，此处的96dpi、72dpi指的是屏幕上的"字型分辨率"，而非“屏幕分辨率”！
当屏幕分辨率调高时，通常我们也会调整屏幕字型的分辨率，免得字型看起来丑丑小小的，和偌大的屏幕显得不太协调。
PC屏幕上可以设定的字型分辨率为96 dpi、120 dpi、144 dpi及192 dpi。在640×480的桌面大小下，使用96 dpi就够了，在800×600或 1024×768的桌面大小下，则可以考虑将屏幕字型分辨率调整为120 dpi。
扫描仪分辨率指的是扫描仪辨识影像细节的能力，600 dpi分辨率的扫描仪，可以在每个Inch之内，清楚地分辨出600个图点。
另外，扫描仪的解析度有所谓的“光学分辨率”及“插值分辨率”，其中，“光学分辨率”才是扫描仪真正的解像能力，而“插值分辨率”使用的是数学上的外插运算法，据以放大既有的扫瞄影像，实际上可以提升的品质相当地有限。
扫描仪的分辨率亦可以透过驱动程式加以调整，我们通常会依照扫瞄文件的特性加以决定。
例如，扫瞄印刷品时，可以使用600 dpi的设定，再予以去网点、缩小尺寸的处理。扫瞄相片时，可以使用300 dpi的设定，再予以调正、缩小尺寸的处理。扫瞄正片时，则可以使用1200 dpi以上的设定(假使光学分辨率够用的话)。
数码相机分辨率　目前数位相机的感光元件大致可分成CCD、SuperCCD及CMOS。
当富士的SuperCCD还没出现时，我们常使用成像像素的多寡来代表数位相机的解析度。但随着新技术的演进，这个看法却有所调整。
传统的CCD或CMOS，若是不经任何的插补计算，感光元件的单元数，通常会大于有效像素，而SuperCCD因为改变了感光元件的排列方式，变成了有效像素大于感光元件的单元数的现象，也颠覆了传统的看法。
因此，在数位相机的领域里，我们需要参考两个数值，来决定它的分辨率，一是感光元件分辨率，指的感光单元的数目。另一则是未经插补时成像的像素值。
而成像的像素值，才是与输出的尺寸及影像分辨率产生关联的数字。
以Nikon的CoolPix 950为例，它的CCD可以撷取到211万的像素值，有效的范围则是1600×1200像素＝192万像素。若是以150 dpi的影像分辨率列印，可以印出10.7"x8"的成品，若是以300dpi的影像分辨率列印，则可印出5.3"x4"的成品。
计算的方法很简单：
宽：1600 Pixels/300 dpi=5.3"
高：1200 Pixels/300 dpi=4"
您可以依此方法算出：当数位相机的成像为何时，以多少的“影像分辨率”输出，输出的尺寸为何？
和扫描器相当类似的是，数位相机也有所谓的“插值分辨率”，因此，要分辨数位相机真实的分辨率时，首先要查出感光设备(通常是CCD)的规格，再来看拍摄成品的影像大小。
此处，我们再将各种分辨率做一简单的整理：
影像分辨率：使用ppi的单位，这只是影像本身的属性设定，会影响到打印时的品质及大小，也会影响影像在文书排版软体中的原始大小。
打印机分辨率：使用dpi的单位，代表着打印机设备打印时的细致程度。
屏幕分辨率：就是屏幕桌面的大小设定，常见的设定为800×600、640×480、1024×768像素。
屏幕字型分辨率：严格来讲，使用的是ppi的单位，PC上常见的设定为96 ppi及120 ppi
扫描仪分辨率：光学分辨率才是真实的扫描仪分辨率，它代表着扫描仪的解像辨析能力，目前市售的机种大多为600x600dpi。
数位相机分辨率：需要参考两个数值，来决定它的分辨率，一是感光元件分辨率，指的感光单元的数目，另一则是未经插补时成像的像素值。
承上所述，“打印尺寸”与影像分辨率有莫大的关系，只要影像分辨率改变了，打印的尺寸便会跟着异动。
换言之，打印的尺寸无法客观地描述影像的大小。
想要描述影像的大小，最好的方法还是以该影像“宽 x 高”的像素值加以表示，例如：1600×1200 Pixels。而相乘的最后结果就是影像的像素多寡。
打印尺寸、影像大小与分辨率之间的关系可以利用下列的计算公式加以表示：
影像的大小＝影像的分辨率X打印的尺寸
影像的大小/影像的分辨率＝打印的尺寸
针对特定的影像而言，影像的大小是固定的，所以，“影像分辨率”和“打印尺寸”便呈现反比的关系。
　　如前所述，影像的成像品质主要取决于“输入、撷取”的阶段，但，怎样才算是“好”的影像呢？我们可以从下列几个角度审视之：
影像是否清晰锐利。
影像是否变形失真。
色彩是否正确。
是否含有杂点。
色彩的饱合程度。
千万不要将“品质”的议题局限在“影像分辨率”之中纠缠不清，上述的因素才是影像成像品质的重要关键！