这里，我们收集了36个非常精美的免费CSS网页模板，希望你会喜欢。希望你可以这些设计精良的页面设计中，找到一些灵感并且有所学习。点击图片缩略图可以进入到原始的地址进行下载。好了，让我们一同来丰富自己的资源库吧，这样在下一次的项目中会有所帮助。

Sound box

General

什么是用户体验？
“用户体验”这个术语指的是一个概念：把最终用户作为设计和开发活动的焦点，而不是系统、应用程序或者单纯的审美价值。它是基于一般的以用户为中心（用户至上）的设计理念。
用户体验主要由四个因素组成：
·品牌
·可用性（注释：用户能够使用一个界面来达到他们的目的的难易程度）
·功能
·内容
单独作用的话，这些因素中没有一个能带来积极的用户体验；然而，如果综合起来，这些因素就组成了一个网站成功的主要因素。

举例来说，一个设计精美的网站，却频繁地出现服务器错误或超时。或者想象一个很棒的数据库应用程序，由于某种原因而从未被使用过，因为它被深深地掩埋在了网站信息架构的深处。在两种情况中，我们都可以看到，独立的品牌、可用性、功能和内容等要素是无法说明一个网站是成功的。然而，当综合在一起时，这些核心要素就构成了用户体验的基础。
目标分析工具的必要性
比如说你来了一位新领导 – 他们对网站现状不满意，想让你帮忙把握网站的正确航向。如果你像我一样的话，第一件要做的事就是先浏览一下这个网站，然后在脑海中做一些粗略的记录。然后你怎样把这些想法和记录传达回给你的客户，而不是简单地像撕成八瓣一样对现有网站批判一番？
问题在于，我们每个人对一个网站是好还是坏的感知，是受我们个人背景和行业特性的影响而有所偏倚的。如果被叫来评价一个网站的优点和缺点，一个开发人员、可用性专员、设计人员或信息架构人员可能会有完全不同的评判。
一个客观的测量分析工具，会帮你提供给客户有事实依据的建议，而不仅仅是主观臆断和观点。本文中我们将探讨的方法会帮助你：
·尽可能消除个人偏见（主观因素）
·让不同背景的人（设计人员，开发人员，客户）能够在理解网站上有统一的共识
·创建基准规则，以便于网站与其竞争者或过去的开发努力作比较
·为你的客户提供一个关于他们网站的优缺点的事实依据和可视化的展示
衡量用户体验
如上所述，用户体验由四个相互关联的要素所组成：
·品牌
·可用性
·功能
·内容
但是，我们如何量化和衡量这些看似无形的元素呢？
方法很简单。我们把分析分为四个部分 – 每个用户体验的元素为一个部分。对于每一个元素，我们创建一系列的描述或参数，用于针对性地测量网站。我们为每一个描述创建一个从1到X的尺度范围；并且在这个范围内给每个描述打分。
一旦你完成了这个分析的第一部分，四个栏目中的每一个描述就都有了一个对应的分数。

在本文附上的范例分析中，我们只为每个元素使用了五个描述或参数。因此，我们使用了一个20分的尺度范围，这样网站的最高分值就是100。所以，如果我们为每个元素添加额外的五个描述或参数，我们就会使用10分的尺度范围来打分。
下面就是对范例分析中的每个元素以及描述或参数的概要：
品牌
品牌包括在网站中所有审美的、设计相关的项目。它带给网站想要的组织形象或信息的创意。用于测量品牌的描述包括：
·网站提供给访客有吸引力的和难忘的体验
·网站的视觉效果与品牌特征保持一致
·图像、附加内容和多媒体对于体验的增值
·网站传达出品牌的感知预示
·网站利用了媒体的能力来增强和扩展品牌
功能
功能包括所有技术方面的和“后台的”进程和应用。它让网站提供给所有最终用户交互式的服务，而且重要的是，注意这有的时候同时意味着前台公众用户和后台管理员。网站功能的描述包括：
·用户及时获得对他们查询和提交信息的响应
·任务进程的清晰告知（比如，成功页面或邮件更新提示）
·网站和应用严格遵守通用的安全和隐私标准
·在线功能与离线业务流程结合
·网站包含管理员工具来加强管理员的效率
可用性
可用性带来的是所有网站元素和特性的总体易用性。可用性之下的二级主题包括导航和易用性（友好度）（注释：易用性处理的是使在线内容可用于用户的体验，享受和使用的问题）。可用性的描述包括：
·网站防止错误发生，并帮用户从错误中恢复
·整体网页侧重针对主要受众优化
·网站帮助访问者达成一般目标和任务
·网站遵循它自己的一致性和标准
·网站为残疾用户提供内容
内容

内容指的是网站的实际内容（文本，多媒体，图像）及其结构，或信息架构。我们来看信息和内容是如何按照定义的用户需要和客户的商业需求组织的。测量内容的描述包括：
·链接密度有足够的清晰度，且容易导航
·内容组织方便用户达到目标
·内容及时准确
·内容适合客户需要和商业需求
·多语言的综合性内容
在多数情况下，我会为这四种元素分别使用10到20个独立的描述。我建议你使用如上描述作为你创建你自己的分析的基础。请记住，如果你添加了更多的描述，你必须也调整20分的尺度，以便每个元素的总分为100。例如，如果你为每个元素使用10个描述，那么你的评分尺度应该是1-20。如果你为每个元素使用20个描述，你的尺度应该是1-5。

显示你的结果
一旦你完成了你的分析，并且得到了每个描述或参数的分值，就是时候把数据放入清晰而便于告知的格式中去了。

首先我们要做的是，把每个元素的所有的分值加总。因为我们已经设置了分值尺度，来为每个元素提供满分为100的分数，我们真正得到的是一个百分比的分数。一旦我们有了这些百分数，我发现最有效的是创建一个雷达图来直观地呈现。微软的Excel或者Open Office Calc都很适合，尽管任何带有图表功能的数据表软件都可以。
使用你的数据表软件，你可以创建一个可视化的数据展示。请参见你在上面下载的示例文件来获取更多的范例。

对你的分析发挥创意
关于本文描述的分析和方法最棒的事情是，他们可以用于满足你的特定客户或项目需求。
你当然可以在分析中添加第五个类别来描述易用性（友好度）或者商业指标。例如，你得到了一个政府客户，需要严格遵循508规则（针对美国）。你可以容易地创建一套描述或参数来专门处理易用性（友好度）元素，修改你的图表来相应展示。同样，你也可以很容易地创建一个类别来专门处理你的客户的重要商业指标，比如，ROI，点击率，转化量，或者重复顾客数。
可选地，这个分析平台还可以让你能够为你选择的元素添加更大的权重。比如说你有一个客户，他是奢侈品生产商，并且主要侧重在品牌和视觉效果上。你当然可以创建一个修改过的测量系统，来为品牌要素提供更大的权重，而为，比如说，可用性要素上减少权重。
实际应用
我已经把这个分析用于很多我所从事的项目。我常常在新客户的提案中包含一个“快餐式”分析作为附录，来提供预期的客户一个关于他们网站相对于竞争者的简单印象。
提供这类的评论通常能够给你一个极好的机会来展示你的专业性。机会是其它竞标的公司不会包含这样的免费咨询服务 – 并且你在提案中包含的这个报告可能会是一个对你有利的决定性因素。
在其它事例中，我已经有客户出钱购买关于他们网站的深入的分析和完整的建议。这类报告包括，对于每种描述或参数，完成不同的描述性段落，再配上截屏范例。如果我最终通过跟进我的建议而赢得了客户，我通常会预定网站发布6个月后的再一次评估，作为显示进步的方式，同时加强我的服务的价值。
这种分析也能作为一个入门项目，引出更多的业务。如果你给这种分析定价合理，它可以是一个很棒的工具来让你得到新客户，并展示给他们你的服务的好处。 

下面笔者想重点说说，在主页设计的时候我们应该赋予主页的十二个任务：

第一个任务：体现站点的标识和使命

上次看到一组数据，说当今全球网站数量已经上亿了，平均每天看1万个网站，那么一个人要花30年才能看完这些网站，可是30年中又会有无数的网站诞生，也许又要花60年才能再看完，总之这辈子笔者是看不完了。说明网站竞争相当激烈，同一个类型的网站同时有上万家在竞争是不足为奇的，所以在竞争中一个网站的主页就显得格外重要。

主页要不能放过任何一个可能访问或者正在访问甚至访问过的用户，大家都削尖了脑袋想办法如何处理这三个问题。那么对于任何一个访问你网站的用户你就要了解他第一次打开你网站他关心什么。经过思域长时间的调查和试验，用户第一次打开一个网站大部分是这四个问题：

A 这是什么网站？

B 网站上有什么？

C 我能在这里做什么？

D 为什么我应该选择这里，而不是其他地方？

下面我们以阿里巴巴为例看看他是如何表达这四个问题的。

阿里巴巴在国内是电子商务类网站用户体验公认做得最好的，这个思域不想论证，就看他的网站LOGO，橙色加黑色，网站整体CI就是这个色，标识下方的“全球领先的网上贸易市场”

第一个问题：阿里巴巴是做什么的？看完这个LOGO如果您还不知道，那么接着您的视线从LOGO位置水平向右移，看到导航，还不知道是做什么的？天！好吧，请托动滚动条，浏览一下网页。

第二个问题：我能在这里做什么？从阿里巴巴首页右上角的导航条，很明显的告诉用户，用户在这里可以“采购”和“销售”这是主打服务，其他的看用户的需求。

第三个问题：网站上有些什么？如果前两个问题你在阿里巴巴上已经没有疑问了，那么这个问题阿里巴巴已经在主页上很好的回答你了。

第四个问题：为什么我应该在这里？“全球领先的网上贸易市场”这句话的效果不要小看哦！

好了，通过阿里巴巴的例子，已经告诉各位看官主页的第一个任务――体现站点的标识和使命。主页要告诉用户我这是什么网站，我是做什么的，为什么你应该来我的网址。

第二个任务：网站导航和站点层次

网站要给出网站提供的服务的概貌，既要包括内容――“我能在这里找到什么？”。也要包括功能――“我能做什么？”。还有这些服务是如何组织的。这项工作通常由持久导航来处理。其实一个网站的导航是非常重要的，他是网站的通道，通道如何设计才能让用户最方便快捷的到他想去的页面，如何设计才能把网站最好的内容体现在用户面前，导航设计有哪些讲究，避免出现哪些错误，这些问题思域后面的文章都会一一解答。

第三个任务：搜索

对于信息量大的网站搜索是很必要的，否则即使你其他元素处理得再好，用户在你网站上体验的感觉就像波音747的靠背椅全部换成了小板凳！

第四个任务：导读

就像杂志封面一样，主页要用一些“里面有精彩内容”的暗示来吸引我，“内容推荐”部分应该突出最新、最好、最热门等的内容片断，例如头条或者热销和热文等等。“功能推荐”部分邀请用户去访问网站更多的栏目或者使用一些个性化功能或邮件简报等。

第五个任务：内容更新

如果网站的成功取决于用户是否经常来访，那么主页应该有一些经常更新的内容。即使是不需要固定访问者的网站也需要有一些活跃的迹象，哪怕只是一个到最新的新闻链接，告诉用户这里并不是一潭死水。

第六个任务：登陆注册

如果网站使用会员制，主页应该为新用户注册和老用户登陆提供链接或者直接登陆框，免得用户四处寻找，至于是提供链接还是直接的登陆框，需要设计师来衡量，是黏性较强还是较弱，是老用户多还是新用户多，页面位置该不该腾出一个地方出来放置登陆框，用户的习惯会是怎样的，关于登陆框的问题，思域以后说。

第七个任务：快捷方式

最常访问的内容片断，如软件升级等，值得在主页上放置链接，免得用户四处寻找。现在很多网站的快捷方式是网站一厢情愿的，不是用户经常访问哪些内容网站就把这部分内容以快捷方式的形式体现在首页，而是网站方面最近新推出了什么业务，网站有什么新的动向，把这些内容作为快捷方式，思域认为最好是根据网站特点来考虑，看看是为用户多考虑合适还是为自己多考虑合适。

第八个任务：友情链接

需要在主页上预留空间，用来放置广告、交叉推广、合作品牌的友情链接等等，这里思域不多说了，有很多人问思域，一个新的网站如何与别人交换链接？如何交换到质量较好的链接？交换链接的质量好坏如何评定？一篇文章咱说不完。思域会专门来说这个问题。

第九个任务：让用户看到他正在寻找的东西

主页应该让用户想要的任何东西显而易见，如果这些内容在站内某个角落的话。当然，不是把网站的所有东西都罗列出来，弄得一个主页十几屏，用脑子嘛！

第十个任务：告诉用户还有他没有寻找到的

主页应该让用户看到一些很精彩的、用户也许会感兴趣的内容，就算用户并没有寻找他们。

第十一个任务：告诉用户从哪里开始

用户第一次到一个网站还无从下手，感觉就像和女生睡觉，都把她衣服脱光了，她还呆若木鸡，面无表情。网站首页应该如何安排才能完成这个任务，其实方法有很多，这里不多说，思域后面会详细的说。（写道这里思域好像累计了好几篇文章啦，找个时间向各位看官慢慢解答）

第十二个任务：建立可信度和信任感

对于一些访问者来说，主页将是你的网站给他们留下好印象的唯一机会。

好了，主页的十二个任务，思域草草的罗列了一下，具体如何运用还需要大家根据自身的特点，站在网站自身的角度，站在用户的角度，站在行业的角度，十二个任务是纵向的，三个角度是横向的，各位看官用心的取舍，细细的考究吧！

下面还是用阿里巴巴的页面作为例子来结束此文！

自从微薄的时代到来以后，基本就很少再写这个了。在这个速食又浮躁的年代，能坐下来，静一下好好想想，几乎是种奢望，不论你想的是什么，或者说发呆都不太可能了。基本上思想都是片段式的，连起来的机会很少。也只有夜深人静又不瞌睡的时候

但是感觉已经困了，所以……；在我胡乱敲出上面的文字后，已经是0:06了，关上电脑、睡觉，明天又是新的开始，但愿明天是新的开始……

今天看到一网友的博客，标题是“一直在改版，从来没上线”，呵呵，是不是很雷，不过这也是我的博客的状态，从开始自己弄博客到现在也快两年了，可是身为战斗在web设计第一线的ME，却没有给自己的博客好好倒腾一个模板，实在说不过去，所以突然有了这样的好言状语，不过也还得看时间，一直在“茫”

你可以说他们丑陋，但是多年之后人民记住的只有最终的胜者，这就是现实

有人说，戏如人生，人生如戏；我说球如人生，人生如球。—–太精辟了！！！老是说出这么精辟的话语

JAVASCRIPT下的用法：

<script type=”text/javascript”>

var text = “how are you doing today?”

document.write(text.split(” “) + “<br/>”)

document.write(text.split(” “) + “<br/>”)

document.write(text.split(” “,3))

</script>

输出为：

how,are,you,doing,today?

h,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?

how,are,you