启示性（affordance）指的是某物体或者对象具有某种操作或功能上的暗示性。举例来说，一张高于你膝盖高度的椅子，它可以暗示你坐。牙刷的手柄略长于人类的手掌，它暗示可以用来握紧。
所有我们周围的客体都具有启示性：有些是外显的（如门手柄上写着的“推”字信息），有些是内隐的（如椅子可以用来打破玻璃或者用来当做武器）。这个概念最初由心理学家詹姆斯·吉布森提出，随后被唐纳德·诺曼在《设计心理学》一书中引进到人机交互领域。
交互设计师经常运用启示性。他们必须这么做。物理客体基于他们的形状、大小、重量等属性而提供启示性。不像物理客体，网页或者手机交互必须通过设计来获得所有的启示。对于大部分设计师而言，这是出于我们每天能看见的成千上万的设计模式而得到的直觉。但是你是否有考虑到了一个对象能够被点击、滑动、推动、拉伸时的质感？
通过深度理解启示的工作方式，你就能更好得掌握交互和产品设计。你能够把启示性作为一个工具使你的设计更容易被使用，鼓励用户执行你想要他们进行的操作，比如注册一个产品，生成内容或者和其他用户联系。更好的启示性对转化率、注册率以及那些对你设计的网站、应用、产品重要的用户操作具有显著的影响。这也就是为什么说启示性在网页设计中最被低估了。
你能数出一个用户能在 Tumblr主页能上执行多少操作吗？
尽管看起来是一个很简单的界面，你会惊奇地发现在Tumblr主页可能执行11个操作。
1 输入邮箱地址2 输入密码3 点击问号图标（指向密码恢复界面）4 点击登陆按钮5 点击注册链接6 点击条款链接7 点击隐私链接8 点击“Posted by blvcktrip”链接9 点击blvcktrip的头像图片10 点击“搜索Tumblr”输入搜素词条11 按下回车键来搜索输入的词条如果你能猜到所有以上的操作，那么你就已经认识到了启示性。它就是交互提供给用户特定功能的方式。所有你要做得都在一个Tumblr页面的扁平化截屏上。通过再认模式和外显启示，就能考查交互功能。
不是所有的启示都是同等的，其中一些启示会强于另一些启示。 理解在交互设计中能用到的启示类型是很重要的。启示一般被分为以下几个类型：外显的，模式化的，隐喻的，内隐的，假的，以及否定的。下面我们详细介绍每种类型的启示。
外显的启示
外显启示通过文字或者客体的物理表征等信号来表现。写着“点击此处”的文字明显得提示你去点击。从周围表面中凸出的按钮看起来可触摸，它提示你可以向下压。上面写着“推”的门柄提示你推门。写着“请输入评论”的输入框明显提示你去执行评论这种操作。这些启示是外显的，因为任何人都能猜测如何和这些元素进行交互，尽管他们之前从未接触过这类交互。这些启示不依赖认知模式。
外显启示在以下情况中特别重要：
- 1 . 当交互使用者过去不太可能接触到很多启示模式。
这种情况经常发生在那些没有技术悟性或者平时不经常使用网页或手机交互的用户身上。这些用户很少能通过设计模式认识到启示。这同样适用于那些独特的、创新的交互。第一款手机应用在诸如敲击、滑动等操作上大量使用了外显启示。
- 2 . 还未明确树立特定的模式来传达特定操作的启示
比如手机上的一个交互对象：向内挤压关闭，向外挤压展开。当我们还不清楚如何形象的传达这种交互启示时，设计师就会采用外显启示的方式。
是否采用外显启示要根据设计背景而定。太明显的启示会带来设计冗余。如果每个链接都写着“点击此处”，页面就会变得很单调。如何让受众在没有明确的指示下理解一个对象的启示性是需要考虑的问题。例如，一款app的用户是科技创业者，他们之前就已经了解输入框，当app交互界面还用文字指示“点击输入邮箱地址”就会显得很二。
模式化的启示
这是现代交互设计中最常用的启示类型。例如，我们隐约知道一个不被包含在一个句子之内或者位于页面主要内容之外的词条一般可供点击。我们知道位于屏幕上方，包含脱节词条的长条通常是导航栏，上面的词条提供了导航。我们知道在看起来像按钮背景上的单个字或者词语通常是可用来执行某个操作的按钮。我们会猜测下方带有下拉箭头的某个字或词可以展开下拉菜单。
模式化隐喻是可以传达某些特定启示的一种既定的隐喻。举例来说，电子邮箱通常以信封图标来表现（尽管发送电子邮箱从未涉及到物理信箱。）这种隐喻很有效，因为它已经是一个既定的模式。我们将在隐喻启示中再进行详细的讨论。
模式隐喻是优雅的，因为它可以在一个复杂的界面向用户快速传达很多启示。当我们和大量的网站和应用进行交互时，我们会变得更擅长快速分析在屏幕上的这些五花八门的启示。
以下是我在Envato Studio’s主页上的模式化启示清单：
元素启示类型提供的功能导航栏模式浏览网页链接模式点击Logo模式返回主页右上角的链接模式管理账户“分类”下拉模式访问更多选项放大镜模式隐喻搜索内容模块模式点击模块
为了理解设计师对模式启示的依赖，你可以问问你自己，如果你从未和网站或者智能手机产生过交互行为，但是你知道怎么执行一些基本的操作，比如点击和敲击，你能理解界面启示你去做的一些操作吗？
模式提供了很多美妙的快捷方式去方便地传达一些操作启示。需要牢记它的前提是：用户已经花费了大量时间和网站、应用以及其他界面进行交互。当你是为一些技术娴熟的用户设计产品时，模式启示可以构成你大部分的设计。当用户没有丰富的界面交互的经验时（比如，小孩子，老人以及一些很少能接触到网络的人），你就不能太依赖于模式启示。
内隐启示
内隐启示是一种微妙的形式，它只在某种特定的条件下显现出来。例如，提示点击的链接文字只有在鼠标停在上面的时候显示出来（并且颜色也发生改变）。在IOS设备上，只有你在主屏幕上敲击或者拖动时，应用图标才能发生滑动。在Pinterest上，只有当你的鼠标悬停在上面的时候，别针按钮（提供“喜欢”功能）才会出现。默认情况下，直到用户执行某个操作来激活提示，元素的启示性不会显示出来。
Pinterest上的图像启示在默认情况下是隐藏的，当鼠标悬停是显示出来。
一旦你将鼠标悬停在某个条目上，条目中就会显示出三个新的动作按钮。
内隐启示通常在以下情况下被使用：在一个复杂的交互界面，立马呈现每个交互启示会使交互界面显得很混杂，或者使交互动作的层级显得混乱。内隐启示能聪明得弱化（不强调）那些不太重要的操作功能。当某个功能不是核心或者必须的（如报告某个不合适的图像）时候，运用隐藏启示是好的。
内隐启示的风险在于用户可能不能直观地发现启示性。
最后，不要在重要的操作上使用内隐启示。相反的，你可以通过把一些不太重要的操作溶入背景的方式来减少重要核心操作周围的混杂感。
当你考虑要不要使用内隐启示时，你问问自己，若用户不知道这个操作时是否还能愉快地使用产品？如果答案是“是”，那么对这个操作来说内隐启示是合适的。
Clear，一个待办事项应用，在设计上很大程度得依赖于内隐启示。然而它的设计受到了很多赞美。
它漂亮吗？是的。然而，它的设计主要依赖于内隐启示。当你把一个条目清单拉下来时，屏幕顶端会向下折，提示你拉动以建立新的条目。明白这些指令需要经验。向左滑动删除条目，向右滑动标记为已完成，挤压把两个条目分开会在中间新建一个新条目，向内挤压会关闭列表。
这些内隐启示并不代表Clear的用户体验很差。一旦你第一次打开这个应用，你就能看见该应用的一些功能的滚动教程。如果你忘记了教程中的功能说明，这些待办事项看起来就像物理上可尝试修改的面板，你就会明白待办事项app可以允许增加事项、删除事项或者标记为完成。这个面板看起来就像能被操作。通过坚持完成最初的学习曲线，作为回报，用户就能够舒服得使用该应用，并且交互界面显得简洁而最少化。
但是，内嵌于Clear的设计哲学并不适用于所有的界面。学习曲线越陡峭（用户越需要学习），用户放弃的比率就会越高。Clear需要花钱购买，以至于用户有理由花费时间去学习交互界面。想象一下另一种状况: 当用户登录到你的产品界面，用户又没有理由花费时间去寻找内隐启示。事实上，当可用的操作没有立马显示出来时，用户很可能会离开界面去其他地方。
内隐启示只适用于用户认同学习的情况下。为了快速引导用户执行你想要他们去执行的操作，用户认同学习的程度越小，产品的启示就要越明显。
隐喻启示
有时候传达启示最简单的方式就是把现实物体作为隐喻。例如，大部分的界面图标就是依靠这种隐喻去传达启示信息的。信封图标启示着发送电子邮件，房子图标启示着回“家”，电话听筒图标启示着打电话，打印机图标启示着打印文件，链条图标启示着建立链接。
一些隐喻是要基于背景的。在文档查看应用中，放大镜最可能启示着放大。然而在网站的输入框旁边的放大镜则最可能启示着搜索。
在复杂任务中，相较于通过使用外显的启示方式，通过使用从现实世界物体中提取出来的隐喻，我们能更快得传达启示信息。举例来说，如果你必须在界面中加入一个能让用户打电话的按钮，但是你不能使用电话图标也不能使用文本—“打电话”，你该怎样传达这种功能启示呢？
因为使用现实事物隐喻的启示方式很有强有力，选择一个最好的隐喻就很重要。思考下面这个iPhone应用Ness:
手机应用Ness的界面图标
你是否认为以上的图标需要文字标签？如果它们被拿走，你是否能理解汽车图标启示着分享路线？如果你不是开车去目的地或者和某些在公共交通上的人分享路线，你就要对这个图标思考一番。在这个案例中一个更通用的模式隐喻可能是地图标记。
模式隐喻
模式隐喻指的是能够传达某些特定启示的一些既定的隐喻。例如，大部分设计师现在都使用老式电话听筒图标来传达打电话这种启示，使用信封图标来传达发送电子邮件的启示，用心脏图标来传达喜欢某物的启示。如果设计师相信有更好的隐喻存在，他们就可以打破既有的模式。但是要牢记：用户已经学习了这种既有的模式。细想心脏图标所能传达的丰富启示，如下：
点击图标“喜欢”某条目允许保存我喜欢的条目我可能能在我的账户中访问所有我喜欢条目的集合在用户增加某个条目时可能被通知已经“喜欢”过该条目对该条目来说，这是个积极的手势心脏经常被理解为爱或者喜欢的象征。通过被持续用来传达某些特定的和喜欢相关的启示，它开始在交互设计上被用来传达这些隐喻。
还有，在改变某些既定的模式隐喻之前需要仔细地考量。看下面Tumblr中所见即所得的编辑器。你能鉴别出创建链接和删除链接的图标吗？
链接的既定模式隐喻是两个或者三个连接在一起的环形链条，在这个界面上，你找不到这个图标。最接近的图标是左数第四个图标，看起来像一个倾斜的无限符号。它的旁边是加了删除线的倾斜无限符。这些图标比环形链条图标更美观吗？或许是。理解这些图标传达的启示是否需要少量更多的心理努力？我认为是的。这种改变是否值得？我不确定。这个新图标看起来非常像无限符。或许也有人会争辩道：正是网络链接将人们的联结扩展到无限大，一个环形链的链接是更不抽象的隐喻。
假的启示
假的启示看起来像启示了某种特定的功能，而实际上它启示着另一种功能或者根本不能执行功能。举例来说：
某个元素从周围背景中凸出来，这使得它看起来可以按动或者点击。但是实际上它不能。一个Logo图像不能使用户返回到根领域。某个显示出具有模式启示的词条（着色或者下划线）实际上并不是链接。一个绿色按钮（一个表示创建东西的模式启示）实际上用来删除数据。一个变灰的词条，似乎启示着没有交互操作，实际上却是一个链接。一个信封图标，似乎启示着发送电子邮件，实际上却是用来发送短信。
在 Icon Finder上一个绿色的“删除”或者“关闭”按钮。
在交互设计模式中，绿色按钮启示着保存或者创建数据。将绿色按钮用来诱发破坏性操作，用户很可能在他们想要保存数据的时候而意外地删除数据。
在 Dribbble的这个界面元素中你能发现什么启示？
在上面这个Dribbble界面元素中，你会惊讶地发现，除了浏览数量，每个元素都可以点击执行某个交互动作。它们是灰色的，背景也为灰色，没有下划线，没有加粗。它们虚假得表现出启示性的缺失，而实际上它们蕴含着丰富的功能（观看哪些人喜欢了这个条目，这个条目被放置在什么名称的标注下，下载配色方案）
尽管这些界面元素设计的微妙性使设计中的其他部分获得更多注意力，设计师必须考虑这种平衡是否值得。例如，如果分享链接被加粗，更清楚地启示着点击，是否Dribbble上的条目就能更常被分享？
一个简单的原则：如果你真的想人们执行某个功能，那么增加跟多启示性的标志。
否定的启示
有时候表明此刻某个界面元素不提供任何操作功能是必须的。最常见的方式就是将这个元素变灰。拿 Rdio应用中的输入框来说：
密码输入框变灰是因为目前它不提供点击或者输入数据，为了显现这些启示性，你必须点击旁边的“改变”按钮。
在这个界面元素中，“保存改变”按钮变灰是因为你还未做出任何改变，因此你不能保存。这种风格表明了目前按钮不能提供任何操作功能。
下面设计中变灰的按钮通过“浏览我们的设计产品列表”的文字指示明显地启示了点击。但是这个按钮的设计风格遵从了否定启示的模式（扁平，灰色，融入背景）。因为灰色按钮通常表明了启示性的缺失以至于用户可能不能意识到他能被点击。
灰色也常用来表明一个非链接的字或者词语。在以下Google主页的界面中却不然。看起来我的电子邮箱地址不能被点击，然而点击它你会惊讶得展开具有我的账户信息的下拉菜单。
明智地使用否定启示能使用户更快得定位到界面中具有有用功能的部分。
启示性的综述：IOS 7的天气应用
IOS 7中的默认天气应用具有大量的启示性。下面六种启示性中，它具有哪些？不具有哪些？
让我们来逐一检查。
外显启示性
应用主界面没有外显的启示性。没有看起来可以点击的元素。没有言语指示你去如何和界面进行交互。除了屏幕底部的导航元素（依赖于模式启示性），应用的界面看起来就像是一个数据的扁平化陈列。
模式启示性
在这个天气应用界面中我能鉴别出两个模式启示，它们均位于屏幕底部。
屏幕底部的一行白点在IOS系统设计模式中表示可以滑动的屏幕的数量。加亮的白点代表你目前所在的位置。当IOS主屏中具有好几屏幕的app图标时，才采用这种设计模式。
雅虎图标是另一个模式启示性的例子。经常和网页交互的用户会知道点击图标通常会将他们带到公司或者组织的主页。此处，它会指向雅虎搜索结果。
隐喻启示性
尽管应用中运用了一些隐喻，但是只有一个隐喻具有启示性。所有的天气标志都是隐喻。从一朵云后面偷窥的太阳图标不是指云后面有太阳，它意味着天气是晴而多云的。太阳图标不代表太阳，它意味着天气晴朗。然而，敲击这些图标不提供任何操作功能，它们纯粹只是传达天气信息。
界面中唯一具有隐喻启示性的元素位于右下角。这个图标看起来像是条目列表或者菜单。敲击图标将会展开一列天气地理位置的菜单，使你能增加或删除条目。这个图标运用了视觉隐喻来传达它的功能启示性。
内隐启示性
屏幕界面中具有两个内隐启示。温度是每小时报告一次的，但是窗口中显示了六个小时。小块数据暗示着你能获得能多的数据。如果我们在显示每小时温度处向左滑动，更多时间的温度将会从屏幕右边进入视野。这样就使得我们能在小屏幕空间上获得所有时间段（每小时）的温度数据。
虽然没有任何线索，若点击屏幕顶部，温度数据将会被诸如湿度、风速、下雨概率以及体感温度等细节数据所取代。我之前就频繁使用这款应用，为了写这篇文章我尽量去发现应用中的内隐启示性，我敲击了屏幕的所有地方，这才发现了这个功能。
我怀疑这个应用的大部分用户都没有发现这个功能。 假若这样，这个内隐启示性是否是一个好的设计呢？这是个问题。有许多更好的设计来增加这个功能启示性，比如是温度数字从周围凸出是它看起来可以点击，在温度数字下面加下划线，增加一个图标，或者在温度和地点的左右两侧陈列那些细节数据。
假的启示性
在假的启示性方面，这款应用没有问题。用户可能会敲击这周中的其他日期来看看他们是否能看到具体的天气信息，但是应用只提供了当天的具体天气信息。用户也可能想敲击当天最低温，认为可以看到一个最低温（而不是最高温）的视图。但是应用界面中并没有呈现表明具有这种功能的误导线索。
否定的启示性
这个应用并没有很强有力地运用否定的启示性。界面中“Monday”加粗了，而旁边的“Today”的字体更细小模糊，这表明了“Monday”具有更高的层级，而“Today”仅仅是传达信息的。然而你点击两个单词中的任何一个，在屏幕顶部都会出现详细的数据（和敲击屏幕顶部出现得一样。）
启示性的总结
类型优点缺点使用情况外显清楚，明白，用户不会遗漏启示性界面杂乱，对某些用户来说是对他们能力的低估面向低科技用户；需要说明一些非直觉的启示模式快速而清晰地传达启示依赖于相似界面的先前经验已经形成了一种稳固的既定模式；用户是技术娴熟的内隐干净的界面可能不能发现功能不太重要的功能；用户对学习（尝试）应用具有足够的认同隐喻传达复杂启示性最简单的方式对不同人来说同一隐喻代表不同事情没有隐喻时解释启示性变得太复杂假的无表明没有启示性浪费用户时间避免假的启示性否定的通过表明元素没有启示性避免用户交互过程中的挫折如果一个元素没有启示性，哪些它可能是不必要的当辅助信息或元素是必须的，但是不提供功能结论
尽管你并没有意识到，你可能已经在设计中运用了很多类型的启示性。无论是用户还是交互设计师，识别启示性似乎是凭直觉的。
通过慎重地使用启示性，我们能帮助用户快速地理解交互界面，巧妙地鼓励他们从一个动作转到另一个动作。 理解了启示性，我们就能评价下面这个交互界面。我们很快就能明白在Dunked.com中创建账户是必不可少的，用户会毫不犹豫地点击“开始”按钮。你可以运用这种启示性在你自己的设计中增加一个相同层级的动作按钮。
网站界面设计分哪些步骤进行
第一步：创建一个画布
首先，打开photoshop创建一个新的项目。你可以点击文件>新建改桥仿或按下CTRL N快捷键来创建。我们选择一个普通的画布大小1000×900，当然这些设置可以在后期增加。
第二步：应用渐变
既然我们的画布已经创建了，是时候开始背景的设计了。创建一个新层（快捷键CTRL SHIFT N）。接着给这个图层从左往右添加渐变前景色设置为edd8af背景色为ede4c9.这个颜色用来表示盒子的颜色。
第三步：添加纹理
我们想要BoxedArt背景设计看起来像厚纸板的效果。创建另一个新层，颜色填充为bcb6a9。下一步应用胶片颗粒艺术效果设置参数如下。接着为了使它看起来粗糙一点，我们给它应用一点高斯模糊效果。
以下就是我们应用这些效果后背景图层看核纤起来的效果。
第四步：导航条设计
顶部的导航区域部分我们放置了一条条状的带子。我们可以看到这种带状风格在很多网站都有应用，不过我们这里用到的有一点不同。由于BoxedArt想要将这个设计看起来像用来发送邮件的消族盒子。为了创建这个导航条我们需要从bigstockphotos.com上下载一个带状的图片，使用自由变换工具（在编辑菜单下选择自由变换或者快捷键CTRL T）沿着顶部的区域伸展开来。接下来创建透明效果我们要把图层样式设置为线性加深。
第五步：老邮票导航按钮
停留在盒子主题，我们要让这个导航按钮看起来有点破旧磨损邮票。为了达到这种效果列，我们需要一张老邮票（还是在bigstockphotos.com上下载）。下载后第一步是描出邮票的路径，从背景中提出来，邮票上依然有图像。为了覆盖邮票上的图像，我们用一张黄色的纸张粘贴在上面也就是添加一个纹理效果。
下一步，我们要给导航按钮添加一些颜色来区别各种不同类的导航，我们在邮票上添加一些装饰花纹效果，在你完成创建好颜色盒子后，我们把这个层的样式修改为线性加深以便颜色能与老照片混合在一起。然后我们增加另一个新层自上而下颜色为黑白我们给这个图层添加胶片颗粒艺术效果设置如下，最后我们把图层设置为正片叠底，把这个不透明度设置为60%。
第六步应用导航按钮到导航条上
现在我们已经创建好了几个不同颜色的邮票按钮，是时候来完成最后header部分的准备工作了，把导航按钮应用到导航条上，我们通过给每个导航按钮应用由mathilde设计的Sketchyicons图标来添加一些手写效果。这些icon图标是放置在每个颜色盒子，并调整了中心图标的位置。同样的步骤把icon应用到每个邮票上去。
下一步，对每个邮票使用自由变换工具（CTRL T），将他们调整不同的朝向给他们一种拍打的效果。这一步后，我们切换到文字工具，每个分类使用一种手写字体。这里我用到的是“LovedbytheKing”.最后我们的导航条就完成了。
第七步开始顶部介绍区域
首先创建一个新层（CTRL SHIFT N）在工具栏中选择矩形选框工具。现在在页面上创建一个矩形使用白色来填充。这块区域将被用来当做一张白纸。
好了我们已经完成白色纸张部分了，在白纸图层下面创建另一个新层然后填充黑色，这个将用来创建阴影。完成之后我们转到滤镜>模糊>高斯模糊半径设置为6.5.之后把这个层的不透明度设置为20%，向右移动5pixels。然后添加主要的文字，这样的话短语”SimplifyandSave”会被用到，位于顶部纸张部分。
现在你看在白纸下面有阴影，但是纸张并不是粘在哪里的。所以我们在纸张的一边来添加一些胶带，如先前的教程一样，我们在另一边添加了一个邮戳来保持画面的平衡。在你的纸张完成后，我们选择一些手写字体来添加一些文字。看起来的话想事包裹上的信息。最后加亮这些图层按下CTRL T自由变换工具，角度设为-1.5degrees使它看起来更加具有真实效果。
第八步贴上一个便签
我们使用了一个便签设计来分开空间来介绍我们网站的优惠注册信息。这个在整个盒子主题上运用的非常好，设计这样一个便签效果需要创建另一个新的图层，选择钢笔工具使用钢笔工具来绘制一个方形区域。
在你完成之后转到路径面板，按住CTRL键点击路径图层，接着你会看到方形区域已经载入选区了，之后使用前景色fffb78背景色fffcd1从左上角到右下角绘制渐变。你将会看到这样一个熟悉的黄色便签纸形状。
第九步
现在我们需要再一次添加阴影效果，给这个便签纸添加深度，所以创建另一个新层(CTRL SHIFT N)。过程如之前给白纸创建阴影差不多，但是是将不透明度设置为40%。你需要变换一下阴影来创建一种倾斜效果，轻微的拖动一下。
第十步给便签纸添加内容
下一步，给便签纸添加一些文字，在我们的便签纸中我们要添加一些加入等按钮，为了创建相似的按钮首先我们绘制一个盒子使用绿色填充，然后添加一个蒙板选择一种grudge笔刷。下一步遮住按钮的一些部分看起来就像破损一样，这就是我们创建邮戳的效果。
第十一步卷曲胶带纸标题
我们转到body的内容部分。在这个设计中，我们要创建2栏和一些图标。我们使用的是已经有的图标因为我们喜欢这种手写效果包括HandyIconsandSketchyicons.。在body开始的区域我们要一个标题栏用来罗列我们网站的内容。我们把这个header部分做成卷曲效果。至于说到透明胶带我们使用的来自bigstockphoto的图片。为了增加胶带的深度，我使用矩形选框工具来选择胶带的一些区域。在选中选区后我们复制这个图层按下ALT SHIFT向左边移动，然后在向右移动一下使它看起来显得长一些。为了避免缝隙的产生我们使用图章工具里拼合这些缝隙。
第十二步预览下的小图标
BoxedArt网站的内容区域包含很多网页模板的预览。创建这种效果我们需要选中矩形选框工具创建一个小的矩形，然后使用颜色123057填充。这些按钮我们只要复制第一个图层，移动它到第一个图层下面，设置这个图层的透明度这里我们设置的为40%。重复同样的步骤处理余下的按钮。
第十三步使用针脚线来分开这些区域
为了分开这些主要的分类，为了创建这些虚线我们可以文字工具角度为90，把这些图层的样式设置为叠加，为了使这些显眼点我们只需复制这个图层2-3次至于颜色多深取决于你自己。
第十四步填充额外的内容
添加剩下的内容就非常简单了，我们只需使用直线工具来分开每个部分，在添加些图标和文字，这里我们用到的是一种干净的字体HelveticaCondensed,。
第十五步—底部广告部分
我们已经到了底部放置广告部分了，这里的带状条将会再一次应用起来，使用先前有的图片作为起点，下一步，我们要使用圆角矩形工具，前景色设置为白色半径为5px。接着我们需要在设置一些小的圆角矩形，颜色设置为f8f7f3边框用深灰。你可以在下图的图层样式中设置边框（就是一种描边效果）。
第十六步公告部分
公告部分我们采取的是和header部分相似蒙板的方法，当然还有订阅新闻通讯等区域也是这样的方法，就像纸张粘上去的一样。首先我们给header部分添加一种厚纸张效果，这个和body部分的方法基本一样。至于内容部分，选中矩形选框工具在右下角绘制小盒子颜色填充为f9e5a6。完成按下CTRL-D取消选区，在选择加深工具，笔刷大小设置为35pixels加深棕色盒子的边角区域。
最后我们把图层的不透明度设置为60%再双击图层在图层样式中添加一些阴影效果，参数设置，然后在添加一些内容。
第十七步网页底部
到了我们创建底部的部分了，首先我们使用矩形选框工具，在页面上选择下图这样一个区域，使用颜色462d0f填充，选择直线工具绘制一条直线颜色设置为a05d18。
到了底部的分类部分了，我们要又一次绘制一个大的选框，颜色填充为472a0b，图层的不透明度度设置为78%，接着创建另一个图层颜色填充为fffcd1。下一步添加胶片颗粒效果最后把图层的不透明度设置为30%图层样式为正片叠底。
最后我们只需重复我们在footer部分的操作或者复制图层把它移到底部，这样你就可以添加内容了。看下下面的预览图，是否有些启示列，希望你喜欢。
面试题目“网页设计人员最重要的能力是什么”怎么回答
希望这篇论文能给你些启示。略论网页设计者应具备的素质
网页设计是一门边缘学科。它是一门技术，也是创造美的过程；它是文字传播的工具，也是表现多媒体技术的一部分。网页设计体现着设计者的综合素质：对文本内容的把握；对图毕旅闷形、色彩、声音对象内含的领悟；对访问人群的正确判断；设计者文化底蕴的潜在动力以及网页技术的巧妙运用。
一、审美能力是设计者的重要素质
美是包含或体现社会生活的本质、规律，引起人们的特定情感反映的具体形象（包括社会形象、自然形象和艺术形象）。 审美能力是个人所具有的进行审美活动相关的主观条件和心理能力。 网页设计中所蕴含的美，也是通过视听来实现的。网页设计中恰当引导访问者的视（文字、图形、动画）、听（声音）这两种感官，使其获得“美感”，是设计中的关键，我们可以利用有效而精炼的图形、动画、声效以及色彩来冲击、激发（这里谈的是“有效”，并非在任何情况下都要用到这些），达到创造美的目的。基于在过去网页设计中枯燥、缺乏应有的刺激和生气，才有了FLASH风靡全世界的情境；也给网页设计者带来了丰富的想象力和自由发挥的天地：你可以用它来编辑MTV、小故事、贺卡、游戏、特效、制作演示、交互教程等。其Action的丰富多彩是它一直神秘的原因。
1．文字是表现网页的载体
中国汉字通行的国际标准为我国于1980年制订的“信息交换用汉字编码字符集·基本集”，其标准号为GB2312—80，简称国际码，是我国应用最广泛的汉字编码字符集。 标准决定了在文字表现网页方面的通则，以通用的宋体作为标准设计，用文字颜色、字号的变化来区分网页的标题级、目录级等等，也能给用户带来直观有效的访问。因此区分字体的字号、颜色也是设计中的注意事项，标题、超链接、导航、目录、正文等都需要我们精心构思，花俏的字体或者非系统字体会给访问者带来很多麻烦和不便，设计者不能以自己的机器配置来想当然地推断用户的机器配置。目前还有大批量的低档次的机器或许是正想知道你的信息的访问者。当然这只对文本编辑而言，而图形却不受字体限制，但重要的一点，就是在完成制作时，对有特殊文字的通道或图层要进行栅格化，或者说文字图形化，就能达到特殊的表现要求。
网页设计实质是一种文化传播，中国的字体从甲骨文、金文、小篆、隶书、楷书、草书到行书，它们的变化折射着不同时代的文化精髓，反映了不同时代人们的社会活动、精神世界、审美能力，以现代人的经验去审视推断古人的行为方式，会发现我们正是从他们那里走来。铿锵有力的字词鼓舞着我们去战斗，指引着我们的方向；悠曲婉转的字词激发我们的情感、净化我们的心灵，它是一种无声的行动。我们会感慨因为文字引发过世界上许多悲惨的故事；因为文字带给世界无穷无尽的智慧和力量，每一个字都是一本博大精深的书。中国文字在这方面更能体现厚重的文化内涵：其字体的变迁，代表着人们认识的变化和飞跃；其数量的变化体现着人们的社会生活的日益丰富。所以我们要善待文字，尽量避免错误用法和别字。
2．图形、动画是深入表达意境的工具
接收信息冲击我们最大的是图形，图形的渐变、对称、对比、比例、平衡、大小、明暗等等，给人以直观，易接受，而留下印象，并不是所有图形都对于你的网页有用。图形只是起到点缀，深入表达文字的意境和网站的意图的。茫茫网络中，各种图形、图像、动画林林总总，但真正能为你所用的并不是镇灶很多，适合你的网页特点的东西就更少了。许多设计者喜欢采用网上已有的东西，这个习惯不好。这给浏览者留下不专业的印象，甚至对你的公司、单位的形象大打折扣，结果是得不偿失，况且我们还得尊重制作者的版权。解决的办法，就是做适合自己网页主题的图形、图像、动画、网站LOGO、标题按钮，不要手弯盲目地剽窃别人的东西。更何况在某些FLASH动画中还有在某个特定时间或让你不注意点出与你的网站完全不和谐，甚至可笑的页面、消息、警告或者其它表现形式，这样的“彩蛋”你在浏览网页时总会碰到，你的感受就是用户的感受。这是不容许犯的错误，是对设计不负责任的态度，是亵渎访问者。
3．色彩是网页设计中的重要环节
“色彩是光刺激眼睛再传到大脑的视觉中枢而产生的一种感觉”。 色彩构成是一门很深奥的学问。我们无意要网页设计者都要成为色彩构成的理论专家，但要对色彩对人的刺激所形成的感觉有一个基本的认识，要明确色彩对人的心理是起着很重要的作用的。
颜色的基本构成为色相（颜色的种类）、纯度（颜色的深浅）、明度（颜色的明暗），不同的色相、纯度、明度给人的心理感觉是不同的。
色相：红、橙、黄等暖色，是最令人兴奋的积极的色彩，而蓝、蓝紫、蓝绿给人以沉静而消极。
纯度：不论暖色与冷色，高纯度的色彩比低纯度的色彩刺激性强而给的感觉积极。
明度：同纯度的不同明度，一般为明度高的色彩比明度低的色彩刺激性大，低纯度低明度的色彩是属于沉静，而无彩色中低明度一带最为消极。
显而易见，颜色是站点视觉设计的关键因素之一。视觉设计的先期工作，就包括确定页面的色彩组合方案。颜色能对浏览者的情绪、思维产生强烈影响，所以选择暖色还是冷色组合、黑色还是白色背景，对浏览者必然有很大的导引作用。具体设计时你尽可发挥你的艺术想象力，不过应该遵循以下的几条基本技巧：
(1)为照顾大多数网友，最好限定使用 16K 色。
(2)使用背景色块，避免使用背景图像。用图像做背景，会降低页面的访问速度，使文本难于阅读，还容易模糊整个站点的主旨。
(3)颜色组合要有个性，同时可使文本易读、图像易于区别开来。
(4)审慎选择颜色组合的情绪意义。举例来说，黑色背景下的红色文本，显得很刺眼，对于一般站点就不合适；白色背景下的蓝色文本，看上去很放松、很宁静，对于像摇滚乐队、游戏这样的站点就显得不够分量。
色调及黑、白、灰的三色空间关系不论在设计还是在绘画方面都起着重要的作用。在页面上一定得明确调性，而其它有色或无色的内容均属黑、白、灰的三色空间关系，从而构成它们的空间层次。
色彩是艺术表现的要素之一，它是光刺激眼睛再传导到大脑中枢而产生的一种感觉。在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。
利用色彩对人们心理的影响的成果，合理地加以运用。按照色彩的记忆性原则，一般暖色较冷色的记忆性强。色彩还具有联想与象征的特质，如：红色象征火、血、太阳；蓝色象征大海、天空和水面等。所以设计出售冷食的虚拟店面，应使用消极而沉静的颜色，使人心理上感觉凉爽一些。
在色彩的运用过程中，还应注意的一个问题是：由于国家和种族的不同，宗教和信仰的不同，生活的地理位置、文化修养的差异，不同的人群对色彩的喜恶程度有着很大差异。如：儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在沙漠中的人喜欢绿色。在设计中要考虑主要读者群的背景和构成。
4.声音的正确运用能起到点睛的作用
随着网络技术的不断发展，声音也逐渐成为了网页制作过程中考虑的一个重要因素。如果能在五彩缤纷的网页中再加上美妙的声音，则有锦上添花的效果。由于声音是在空间上进行传播的，又具有延续性，因此音乐和声音可以为你的网站增添不少的精彩。由于一般人对于听觉的要求远低于对于视觉的需求，再加上为了在网络中能够快速地传播，所以在网页中的音乐最好采用midi，rm，mp3，flash等格式，大小一般不要超过100K。还有，你永远都不要太过分，每点击一次就发出声音会让你的网站令人讨厌，并且对你的网站留下不够专业化的印象。如果你准备要往你的网站中增加一些背景音乐，那么最好使用一些流格式的音频软件，如Real Audio来播放文件。或者，你也可以插入一个Flash文件，循环播放一段音乐。你可以通过在 Flash文件中导入WAV文件的方法完成，或者你也可以到因特网上下载一些免费的相关软件。如果你要在你的Flash电影中使用声音，通常加一个“禁音”按钮，会更好些；如果你用行为脚本控制浏览者计算机上的声音的话，那么，再加上一个音量控制条。当然，最好不要改变声音大小是最好的。浏览者如果需要，可以自己调整他的计算机的音量。
二、技术能力是网页设计者表现的重要保障
网页设计者如何表现主题，除了前面谈到的审美素质是起码的要求外，更重要的是如何用好软件，不犯拙劣的错误和不留下任何做作的痕迹，这是以高超和恰当的技术来实现的，我们除了考虑下载速度、延迟时间外，还要考虑技术运用的巧妙性和实用性。
1．计算机语言的掌握
要编辑一个好的网页，除了会使用优秀的制作平台外，还要学底层的东西，那就是支持网页实现功能的几种语言。你首先得会用HTML语言，知道每段程序给用户传达的信息是什么，再优秀的平台（例如：FrontPage、Dreamwave）,也只能给用户展示其基本的功能，要想更深层的达到你的愿望，还得依靠你的使用软件的经验和亲自修改代码能力；其次是JScript、VBscript，它们可调用系统中的某些特殊功能，让用户有更多的选择性，可以在不同的展示平台显示不同的效果，它们能完成HTML语言所不能实现的某些动作。再次就是样式表CSS，它可以对你的标题、文字、表格、底色等做到统一，不至于出现放大字体时，网页版面变得零乱不堪、文字七零八落等等。这四种不同展示网页的工具，我们不仅要熟悉，还要能灵活运用，它们能给你网页增添许多生气和人性化，减少许多之后更新的工作量。要学会这些语言，首先你要懂得编程的基本原理，数据类型、常量和变量、运算符与表达式、流程控制语句的几种基本类型、数组、函数等等。要知道真正网页的产生就是由这些基本元素组成的，无论其内容多么丰富、功能多么强大、外观多么华丽都是这些元素按步骤组织起来的，所以最好学会一门常用的语言，会给你做网页带来许多方便。优秀的设计师会挑选最精炼、最少的代码表现他的思想，他的算法永远是最巧妙的，这是编程人员所共同努力的事情。
2．熟练掌握辅助制作工具会让你的网页脱颖而出
在编写网页的同时，为了更能吸引人、更能与众不同、更能表现主题，除了学会某些语言外，还得精通某些图形软件，如：Photoshop、imageReady、Flash、CorelDraw以及文字编辑工具Word、WPS等，这些工具可以让你的灵感得以全部实现，可以完成单纯语言所不能达到的效果。作为网页设计者，基本素材的制作，还得依靠这类软件和自己的双手。主题背景图片、导航按钮、网站LOGO、网页GIF，甚至整个页面的制作都可以直接用这些工具实现。在这些工具中拖动图片或者是文字等都是很随意的，可以放到任何地方， 而在Frontpage里采用的是文本编辑的形式，控制表格时由于受到相邻的图片、文字或者表格的影响，有时候始终不能达到自己的目的，如此再在表格里加表格，这样处在外面的表格就更加不好控制。很多时候不但不能排好，甚至会把屏幕搞的乱七八糟。在这些软件中实现图片切割和拼装就像用画笔一样简单，而且能为你自动生成各种切片，自动取名也很直观，我们要做的工作就是修改或者添加部分代码就可以了。
3．恰当应用动态网页与数据库
随着网络的飞速发展，以及电子商务、虚拟社区等新概念的提出，对网页设计者提出了这样一个要求：建立一个动态的、易于更新的、可查询的、信息丰富的页面。网页设计者越来越倾向于建立一个引人注目的站点，以吸引众多网民经常访问。
所有这一切都需要一个强大的工具，ASP就是其中之一，可以说，ASP是最出色的工具之一，它功能强大、性能优良，为商业网站、企业网站提供了一个完美的解决方案。
使用简单，是ASP无与伦比的优势。在短短一周内，使用ASP可以完成传统CGI程序3个月的工作。ASP可以轻松地实现电子商务（如商品选购、股票交易）和系统管理（如登录、查询）。使用ASP可以完成任何网站上的常见服务。ASP使用VBScript或JScript编程,这两者有一个共同特点：易于理解，易于扩展。ASP作为WINDOWS2000网站的核心，已经成为Web网页设计人员的必修课。从诞生到现在，ASP迅速席卷所有的Web应用程序，这也预示着：传统CGI程序必将为Script语言所取代。后台数据库可以使用ACCESS 2000或SQL SERVER等。以上是在技术方面最基础的东西，如果你以此工作为职业的话，不仅要达到以上要求，还得把握时代的脉搏，掌握先进的语言和软件的变化，一些流行的制作手段还能给用户以亲切感，使用户明白你还在不断更新，让用户对你有更大的信任，不会失去访问量，使你的公司或单位获得更高的经济效益和社会效益。
因特网是IT界发展最快的领域，其中新的网页制作技术几乎每天都会出现，如果不是介绍网络技术的专业站点，一定要合理地运用网页制作的新技术，切忌将网站变为一个制作网页的技术展台，永远记住用户方便快捷地得到所需要的信息是最重要的。 但对于网站设计者来说，必须学习跟踪掌握网页设计的新技术，如Java、DHTML、XML等，根据网站的内容和形式的需要合理地应用到设计中。
技术问题是一个永远而新鲜的话题，也是网页设计的核心，更是编程人员的困惑。网页设计者不仅要考虑你的设计给用户的感觉、用户访问你的站点的目的，同时还要考虑自己如何运用技术把你的思想表达出来，自己需要哪些工具、哪些素材，如何寻找最好用且适合自己表现的方法。这些就靠自己的日积月累，要使自己时常升级，牢牢地把握住行业的动态，或许这就是网页设计者永远要走的路吧。
三、文化素质是网页设计者的根本素质
网络飞速发展、信息迅速传播、知识不断更新。无可否认，作为传播媒体的网格其给人们带来极大便利的同时，也给人们的思想意识、行为方式、通信联络、人际交往等带来了变化，先进的正在被另一个更先进的悄悄地改写着，而且正以其强大的力量冲击着人们的观念。昨天没有的答案或许过一个晚上就已经早被刷新过数次了。你的想法前卫吗？不。你的技术先进吗？不。你的方法最捷了吗？不。就连比尔·盖茨也被教训了一通，宣称自己的WINDOWS XP系统是最安全的系统，不出一月，盗版风行，破解的方法从世界各地渐次推出，到目前还有很多没有出钱的WINDOWS XP系统，正在逍遥地和比尔盖茨在聊天，他下来的工作就只能做最原始的事情了：放置他窥探你的后门；注册每一个机器的软硬件；把你的机器设置成他的机器，他想在你那里干什么就干什么！将来会变得更糟糕，或许合法用户也将抱着机器去找比尔·盖茨的麻烦，我想比尔·盖茨会有更多的事情要去完成的。我们期待着最优秀的平台！
在茫茫的网络中，真正用心去作，守住自己贞操的制作者不多，许多网页制作者的思想道德和文化素质，还是需要浏览者来评论的。上过网的人都有被戏弄过的经历：要么是鼠标停不住；要么是没有任何工具栏的全屏幕；要么是一丝不挂的黄色画面；要么被网页修改了主页；要么被恶作剧的吓得个半死；要么就是声音响个不停，而我们又没办法立刻让它不响；要么被人悄悄地格式化了硬盘(格式化了硬盘，你能格式化用户的心吗？)；要么让用户填一大堆隐私，结果还是错误的页面；要么看一篇文章还得不停地点一连串的确认消息框，什么“你想转到×××页吗？”“欢迎进入×××网站，从这里你会×××”“请选择你要去的标题”，最后还提醒你“请将我加入你的最爱喔”……直到把他想问的所有问题问完，结果还是文章内容与搜索的不一致（记住：进入选择主题，不要让用户点击超过三次）！等等。这些都不是真正要为网络服务的设计者。这样做实际上是这个网站关门的前兆，那你作网站的目的又是为了什么呢？作为制作者首先要净化自己的思想，定位自己的坐标，上好人生哲学，还网络一片净土！存在的并不一定都是合理的。在这些现象中，有设计者的思想道德水平，也有文化素质问题，有些是网页设计者没有想到的问题，有些则纯属于技术不够，拿一些东西吓人，自称为高手或黑客（伪黑客），真正的高手或者黑客是不会去做这种无聊的事情的。
每个制作网页的人都希望获得用户的最多点击率，然而点击率的大小与你网页的主题、内容、信息量又有极大的关系。上网的用户大多是来了解信息的，他们的特殊而苛刻的要求，决定了你的网页必须有鲜明的主题内容，宣传什么，要给用户传达什么，在网站规划书中，必须明确而且以一贯终。公司的网站除了宣扬其企业文化外，更多的应当是新产品介绍、推广；处理用户的反馈信息等，而与此无关的页面尽量减少，分清主次和重点，正确定位自己的形象，是成功的关键。行政管理部门、教育部门、IT行业、技术部门都应有不同的风格，都应以自己的行业道德来认真细致地对待加入这些网站的任何网页或者链接。要突出本行业的主题，并且旗帜鲜明地去突现它，才能更好地树立形象，要知道在地球上的每一个人都有机会看到你的页面，不能想到只是局部的影响和效应，同时也维护了健康向上的网络空间。
在制作网页时，我们还有必要考虑的问题就是浏览你的页面的人群，你要初步确立浏览人群的文化素质、操作能力、欣赏水平、目的要求等等，从而在制作中，有的放矢地选择特殊功能。
网页的载体主体是文字，图形和声音只是表现你无法用语言来表达的文字的延伸，如果你驾驭不了图形和声音，只能说对文字延伸得不够或者不得体、或者文不对题。作为设计者的素质不能期望在一两天能有一个什么天翻地覆的变化，它是靠时间、靠留心、靠辛勤劳动。所以我们要善待文字，写好用好它，这是中国人的职责，更是小小网页要注意的问题。如今的网页内容良莠不齐、水平各异，文章内容与标题不符、语句不通、满篇错字断句，有些是真正到了无法读下去的地步了。这些纯属垃圾，影响自己又影响别人，当然好的精品也多。作为网页设计者不仅要有一颗真诚为浏览者服务的心，要广泛涉猎各个领域的先进成果，特别要提高自己的艺术修养、文学水平以及鉴别能力，只要你用心了，你就会成为真正的高水平的设计者。