③影响用户不浏览首屏以下内容的界面布局
影响用户不浏览首屏以下内容的因素比较多，有一种情况就像pupai.cn一样，虽然页面很长，内容很多，但用户很少进行滚动页面的操作，甚至不知道页面有很多信息。经过分析发现，该网站首页的大幅面的视觉图片占据了整个首屏，页面几乎没有指示性的设计，这是妨碍用户进行滚动的原因。
类似情况比较普遍，完整的画面以及突显的水平分割线都不利于吸引用户滚动。如果稍加改动，效果会大不一样。
经过上述的优化后虽有一些改观，但还有很大的完善空间。作为购物网站，pupai.cn网站在首屏所展示的仅仅是活动信息，产品展示几乎没有，无法激起用户的购买行为。针对pupai.cn购物网站的页面规划，建议学习Apple.com，在有限的展示空间中，将网站主推的重要产品、型号、价格以及更为重要的订购电话信息等内容重新布局，从用户角度出发科学布局。在Apple.com网站上，在1024*768分辨率显示下，不但屏位分界线之上的分割图片暗示下面还有更多信息，而且重要信息都在显眼位置得到了呈现。
通过上面多个设计案例的分析可以发现，在进行界面规划时需要遵守下面几项基本原则：
·少即是多。虽然首屏非常珍贵，但不要试图将所有的内容放到上面，科学地利用空白和图片能促使用户浏览更多的内容。
·生硬的水平线分割不利于滚动页面。这并不意味着完全不要通栏的水平线元素，相反，要让一小部分内容在分界线上可见，这有助于刺激用户滚动页面。
·避免使用内嵌的滚动条。浏览器的滚动条是一个页面信息量的提示器，而内嵌的iFrame和其他包含滚动条的元素会打破这种提示，这也会导致内容不可见。
总之，不管用户从何种途径到达页面，他所看到的一定是网站最想表达的，同时也是用户最需要的信息。因此，合理地进行功能、内容布局能带来更多关注。
（2）导航设置
明确而有效的导航对于网站来说至关重要，它就像网站的门牌号码，随意更改将会使用户迷路，如果不能快速、便捷地找到它，将带来用户的流失。
网站内容的入口很大一部分都是依赖于导航系统，而导航系统的作用是告诉用户当前在哪里，可以去哪里，这里有什么，附近有什么，指引用户下一步的行为。
导航系统是网站中不可缺少的组件之一，主要包括全站、区域、情境式、辅助性、面包屑导航几大类。
全站、区域和情境式导航的元素多数情况下同时存在于网页上，如何在网站中整合好，这涉及到诸多因素，如网站栏目的多少、页面结构复杂程度、实现效果的JS程序、交互过程等等。
·全站导航系统
通常在全站所有页面展示的导航系统，可直接链到重要的区域和功能，无论用户在哪个层级页面中，使用的都是同一个导航。全站导航需要保持一致性，这类导航以密集且重复来访的用户为中心。以Apple.com.cn为例，具有情境式的全局导航系统，不仅告诉用户当前页面有什么内容，还告诉用户正在哪部分内容页面上。
·区域导航系统
进入二级栏目后，该栏目有很多子栏目，把这些子栏目列出来，方便用户即刻浏览那些内容。有些网站会把全站导航和区域导航整合成一致且统一的系统，如下拉菜单。和全站导航一样，在同一个站点中区域导航的表现形式最好是一致且统一的。
·情境式导航
进入目的页面后，会有一些内容指向特定的网页、文件、对象，比如网站上的“相关文章”、“喜欢这个商品的用户也会喜欢……”、“同类TOP10”等。需要注意的是[情境式全局导航系统]主要是说明所处的位置，[情境式导航]是说明在这张页面内容的情境下，有什么相关内容可以告诉并提供链接给用户。
·辅助性导航系统
包括网站地图、索引、指南，是确保大型网站可用性和可寻性的关键。
·面包屑(Breadcrumb)导航
面包屑（或称为面包屑路径）是一种显示用户在所访问网站此页与彼页层次结构及位置的二级导航方案。它为用户提供一种追踪返回最初访问页面的方式。
当用户访问页面的时候，面包屑不应该是页面中最醒目的元素。通常它出现在页面的上半部分，而且在主要导航的下面（如果使用了水平导航布局）。下图使用了面包屑导航，浏览该页面的用户会方便地了解知道自己目前所处的位置是：新闻中心>；国内新闻>；国内要闻>；时事。
面包屑路径有一个线性结构，因此如果页面不能分类到整洁的目录，使用面包屑是件比较困难的事情。决定是否使用面包屑很大程度上取决于如何规划网站分级。当低一级的页面放置于上级目录下时，面包屑路径将会是无效、不正确和让用户困惑的。
面包屑导航有三大作用：良好的用户体验、节约屏幕空间、降低跳出率。
·良好的用户体验
可以让用户清晰了解到自己所处的位置，方便用户通过面包屑导航栏返回上级目录浏览其他的页面。
·节约屏幕空间
面包屑导航通常是水平排列以简单的样式来呈现，路径不会占用页面太多的空间。从内容下载等方面来说，几乎没有任何负面影响。
·降低跳出率
面包屑路径是一个诱使首次访问者在进入相关页面后继续浏览这个网站的好方法。比如说，当用户搜索到感兴趣的内容页面时，看到一个面包屑路径，这将会诱使用户点击上一级页面去浏览感兴趣的相关主题，从而有效降低网站的总体跳出率。
基于位置的面包屑导航向用户显示他们在网站的哪一个级别页面。典型的应用是有多个级别（一般是多于两级）的导航方案。在下面的例子中，每一个页面的文本链接表示它比右边的文本链接高一级。
(上述内容参考的文献为：1.Breadcrumbs In Web Design：Examples And Best Practices，作者为Sven Lennartz，详见：http：//www.qianduan.net/2.《Web信息架构》，Peter Morville&；Louis Rosenfeld著，陈建勋译)
（3）登录框的设置
寻找登录口时，用户通常会用眼睛先扫描页面并伴随着鼠标的移动寻找两个等大的文字输入框，在第一个框内输入用户名，第二个框内输入密码，这种根深蒂固的登录模式需要在界面规划时充分考虑到。
我们注意到很多网站将登录框设置在页面顶端、左侧或右侧，通过观察发现无论是登录框的位置还是样式（表单或链接)对用户来讲都没有明显的区别。这些位置和样式都能很好地承担其功能——想登录的用户可以比较容易地完成登录。登录框如何设置并没有一贯的原则，通常根据网站性质来决定。
例如，门户类网站多将登录功能设置在页面的顶端。
SNS类网站登录框的设置基本在最显眼的左侧，页面功能设置较为简单，这与它提供帮助人们建立社会性网络的互联网应用服务有关。
人人网在新用户注册方面花了很多心思，界面中明显突出两个功能：一是用户登录；二是新用户注册。将新用户注册信息框直接设置在首页，最大程度避免新用户注册时的二次点击，提高注册率。
购物类网站除了遵循门户网站的特点在页面最顶端设置登录框外，在页面的右侧也设置了同样的功能。用户按习惯在页面中没有找到两个输入框，那么他们会扫描寻找一个叫做“登录”的链接，虽然右侧也有登录口，但按钮不够突出，这种设置可能造成认知上的不一致。
（4）表单的设计布局
表单是网站的重要组成部分。从商业网站的联系到反馈、从注册到交流、从在线银行到搜索都能见到表单所发挥的巨大作用。
在布局方面，要考虑到用户在填写表单时，不喜欢被过多地干扰，而是希望尽快完成任务，因此，非常有必要将表单设计得清晰整洁。用户乐意完成一个容易理解、简洁利索的表单，即使长一点也能够接受。相反，他们不欢迎被视觉分割且复杂的表单。设计表单时还应经常提醒用户他们想要什么，然后问他们是谁，以便建立信任。例如在索取用户资料（“请填写以下部分”）时如果使用cookie来记录用户的信息（不是密码），就会帮助用户减少一些重复性的工作。
下面是表单布局的基本原则：
①要垂直而不是水平
用户通常是从上往下填写表单，简单的垂直布局一般效果好于多栏的布局，因此，在表单所有的地方都使用简单的垂直布局和顶部标签对齐。
如下图所示，所有的被测表单虽然标签的对齐方式不同，但都是垂直的布局。通过和左右标签对齐对比，可以发现垂直顶部对齐效果更好。参与者发现相对于左右扫视，这种形式更容易在一列中向下进行扫视。
②标签左对齐更清晰
有时候由于一些限制（如能垂直使用的空间有限），不可能使用垂直布局的标签，水平对齐布局也是可选的方案之一。
Hotmail和Yahoo都采用标签右对齐的方式，而Google Mail则采用左对齐的方式。参与者的眼动跟踪测试表明，并没有明显的结论能证明标签左对齐和右对齐哪个更好。然而，标签左对齐通常被认为传达信息更清晰。
虽然标签左对齐被认为将造成表单填写最慢，那是因为需要更多的眼部注视和更长距离的视线移动，但这对于表单设计的目的而言并不总是一件坏事。标签左对齐的表单通常有更整齐、更清晰的布局，它们能使用户快速扫视每个标签，这增加了标签的可读性。
如果垂直对齐标签不可行，那就应该使用粗体标签并左对齐。在测试中发现：粗体更能让标签在前景中突显出来，参与测试者也觉得使用粗体标签将使填写变得更容易：“Google mail更容易阅读，因为它是粗体的。”
③标题分组设计成有颜色或有阴影更突显其重要性
Cxpartners公司通过对4个注册表Yahoo！Mail、Gmail、Hotmail、ebay的分析，标签垂直左对齐；控件间没有分组；粗体字标题找到一些优化表单设计布局的方法，来确保用户理解哪些表单是他们真正需要填写的，同时也希望他们在填写时能够专注于表单。
4个注册表单都有很好的组合设计。举例来说，每一种都代表了不同的布局风格、不同的控件分组和不同的字体变形的方式。
标签垂直顶部对齐；有分组，以阴影标题为区分我们设计表单时可将它分割成可管理的几个部分，并将相关的控件放在一起，这样当用户在填写表单时就会感觉表单更短。
在测试中，Google mail与Hotmail是没有将表单内容进行逻辑分组的，而其他两个都将相关的控件进行了分组，并给每个分组一个标题。
从眼动跟踪的结果来看，有颜色或带阴影字体分组的标题更可能吸引用户的注意力。
用户反馈集中为：“阴影字体的标题清晰很多”，“Yahoo的输入框分组很好，紫色的分组标题很好用，输入框被很清楚的划分，一眼就能理解。”
将相关的输入框进行合适的分组是相当有效的。问题是：是否用户总是不得不去看分组的标题？这可能取决于标题的目的和它们在表单中的重要程度。我们的建议是如果你想让用户去看标题，那就使用带阴影或有颜色字体的标题。如果标题不重要，那就不用刻意去那么做。我们需要避免用户在填写时感到迷惑。
④对数字和邮编使用单一输入框
我们经常可以看到用户对于如何填写数字（邮编和电话号码）很迷惑。
ebay对于电话号码的输入用了四个输入框，虽然有一个输入框的下方有输入的示例，但对于需要如何输入一个移动电话号码仍不是很清晰。就像ebay注意力热图所示，深色的点（热点）表示用户在电话号码输入框上耗费了最多的注意力。
有一些方式可以避免这个问题，其一就是将问题简单化。单个输入框通常相比多个输入框更有效率。同样重要的一点是需要有一个良好的校验系统，它能判断用户的输入是否有效。用户经常不确定是否应该在邮编中包含一个空格。
好的设计应该能有一定的容错性（有没有空格都可以接受）。如果不是这样，一个简单、清晰的错误提示是必须显示的。
电话号码是一个有技巧的设计。国际代号可以“00”或“+”开头。什么样的格式能被系统接受应该被清楚地标明。此外，个人可能会以不同的方式记忆他们的电话号码。如，一个手机号码是15812345678，某人可能以3-4-4的格式记忆（158/1234/5678）或5-3-3的格式记忆（15812/345/678）。如果能接受所有类型的输入，那将是最完美的。
总之，对于数字和邮编应该使用单一输入框，允许多种格式的输入。如果不容易实现的话，就应该使用一个良好的校验系统并提供清晰的错误提示。
（上述内容参考英文资料Web Form Design Guidelines：An Eyetracking Study，作者为Chui Chui Tan，详见网站：http：//www.cxpartners.co.uk/）
