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。

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/

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

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/

在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/  ,仅次记录，以便学习。

   【关键词】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

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

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

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

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

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

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

　　防止出现文字、图象或其他使用$#@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）来传输安全的网页，那么我们建议任何不需要被安全传输的页面资源（例如图象）都应当通过正常的联接来传输。