《网页设计综合指南》(2):网页设计中页面设计的主题是页面设计。上一期是网站建设的总体框架设计。本期主要讲的是整体框架设计成功后，网站的横断面结构设计。网站目录结构可以看成是一个大框架(不可见)，页面是大框架中的一个小框架(有形的，用户的视觉)，页面设计是从页面内容、结构、图片等方面进行的

　　二、网页设计中的页面设计

　　2.1内容政策

　　2.2页面结构

　　2.3视觉水平

　　2.4滚动操作

　　2.5内容加载

　　2.6按钮

　　2.7可视化

　　2.8视频

　　2.9行为响应按钮

　　2.10 web表单

　　2.11交互式动画

　　画

　　画

　　二、网页设计中的页面设计

　　2.1内容政策

　　内容策略最重要的一点，就是专注于页面目标。了解页面的目标，根据目标安排内容。

　　以下是一些实用技巧，可以提高用户对内容的理解：

　　防止信息过载。信息过载是一个严重的问题。用户觉得有太多的信息需要消化，所以无法做出决策或采取行动。有一些简单的方法可以最大限度地减少信息过载。一种常见的方法是通过块——将内容分成几个模块，以帮助用户更好地理解和处理它。付账就是最好的例子。一次最多显示五到七个输入字段，将结算表拆分为多页，必要时逐步公开字段。

　　避免行话和贸易术语。页面上出现的每一个未知术语或短语都会增加用户的认知负荷。一种安全的方法是为所有读者编辑内容，选择所有用户都清楚易懂的文字。

　　尽量减少长内容。根据信息过载的观点，如果网站不注重信息消费，尽量避免长文本块。例如，如果您需要提供关于服务或产品的详细信息，请尝试逐步扩展细节。使文本块更短，更容易理解。根据罗伯特葛宁的书《如何走出商务写作的迷雾》，为了舒适阅读，大多数句子应该在20个单词以内。

　　避免所有字母大写。全大写文字(即所有字母都是大写文字)对于字符较少的文字，如缩写、图标等是可以的；但是，请避免在字符较多的地方使用(如段落、表格标签、错误、注意事项)。正如Miles  Tinker在《印刷体的易读性》一书中提到的，所有大写都会降低阅读速度。此外，大多数读者会觉得所有大写的文本都不能快速清晰地理解，所有大写的文本都很难让用户理解。2.2页面结构

　　结构良好的页面清楚地显示了布局中每个用户界面元素的位置。虽然没有针对所有页面的规则，但有一些指导原则可以帮助您创建一个坚实的结构：

　　(1)使结构可预测。让你的设计符合用户的期望。你可以参考类似的网站，找出页面上需要哪些元素，以及它们的位置。使用目标用户熟悉的模式。

　　使用布局网格。布局网格将页面分成几个主要区域，并根据区域的大小和位置定义区域之间的关系。借助网格，更容易将不同的部分组合起来，形成一个内聚的页面。

　　网格和布局是设计的一部分，可以适应不同屏幕尺寸的设计场景。Adobe  XD的布局网格使设计师能够为不同的屏幕尺寸实现一致的设计，并管理网格中元素之间的比例。

　　(4)使用低安全线框模拟，避免杂乱和界面不清晰。混乱会让理解更加困难。每次添加按钮时，图像或文本都会使页面更加复杂。在用实元素构建页面之前，先创建一个线框，分析一下，然后去掉不是绝对必要的东西。

　　2.3视觉水平

　　大多数人浏览网页很快，而不是什么都读。因此，如果访问者想要找到内容或完成任务，他们会快速浏览网页并找到他们需要的地方。作为设计师，你应该通过设计一个好的视觉层次来帮助他们。视觉层面是指呈现具有重要性的元素(即先关注哪些，再关注哪些，以此类推)。适当的视觉层次结构可以使用户更快地浏览页面。

　　使用自然浏览模式。作为设计师，我们可以控制人们在浏览页面时关注的地方。为了给访问者的眼睛设置一个合适的浏览路径，我们可以使用两种模式：F模式和Z模式。对于重文本页面(如文章、搜索结果)，F模式更好，Z模式适合于非文本居中的页面。

　　重要元素优先。将页面标题、登录表单、导航选项等重要内容作为视觉焦点，让访问者可以立即看到。

　　创建一个模型来说明视觉层次结构。当你有了真实的数据，原型就能看到真实的页面。在原型中重新排列元素比技术人员开发网页时更方便，避免开发过程中的进一步修改。

　　2.4滚动操作

　　网页设计师中流传着一个谎言，——用户不能使用滚动。重申一下：今天大家都在用滚动！

　　用户滚动时改善用户体验的一些提示：

　　鼓励用户滚动。虽然人们通常在页面加载后开始滚动。但是页面顶部的内容还是很重要的。最上面的内容给观众带来了第一印象和期待。只有当内容有吸引力时，用户才会滚动。因此，将您最引人注目的内容放在页面的顶部：提供优秀的介绍。一篇优秀的介绍为内容奠定了背景，回答了用户的问题：“这个网页是关于什么的？”

　　使用吸引人的图片。用户密切关注包含相关信息的图像。

　　(1)坚持航海。当您创建冗长的页面时，请记住用户仍然需要方向感(当前位置)和导航(其他可能的路径)。长页面可能有导航问题；如果当用户向下滚动时顶部导航栏不可见，当他们在页面底部时，他们将不得不一直向上滚动。最简单的解决方案是浮动菜单——显示当前位置，一直在页面上浮动。

　　加载新内容时提供视觉反馈。这对于动态加载内容(如新闻)的网页尤其重要。由于滚动过程中的内容加载很快(基本上在2到10秒内)，您可以使用循环动画来指示系统正在工作。

　　不要劫持滚动(也就是不要把滚动操作限制死)。劫持滚动是最烦人的事情之一，因为它夺走了用户的控制权，使滚动行为完全不可预测。当你设计一个网站时，你应该让用户控制他们的浏览行为。

　　不倒翁登录页面劫持滚动操作。滚动页面是固定的，不是免费的。

　　2.5内容加载

　　内容加载值得进一步强调。即时响应是最好的，但有时你的网站需要更多的时间向访问者传递内容。网络连接不良可能导致响应缓慢，或者操作可能需要更长时间才能完成。但是不管什么原因，你的网站都要快速加载。

　　确保常规加载不需要很长时间。网友的关注度和耐心都很低。根据尼尔森诺曼集团的研究，用户保持注意力的极限是10秒。当访问者必须等待一个网站加载时，如果网站加载速度不够快，他们会感到沮丧，可能会离开。如果加载时间过长，即使设计了最漂亮的加载说明，用户也会离开。

　　装载过程中使用骨架筛。许多网站使用进度指示器来显示数据正在加载。虽然进度指标背后的意图是好的(提供视觉反馈)，但结果可能是负面的。正如卢克乌鲁布莱夫斯基所说，“根据定义，进度指标是对等待的人的回应。这就像看着时钟滴答作响——当你这样做的时候，时间似乎变慢了。”有一个很好的替代进度指标：框架屏幕。这些容器本质上是一个临时的空白页版本，信息被逐渐加载到容器中。设计师可以使用骨架屏幕将用户的注意力集中在实际的进度上，并预测即将发生的事情。这意味着事情正在立即发生，因为信息逐渐显示在屏幕上，人们在等待的同时看到网站正在采取行动。2.6按钮

　　按钮对于创建流畅的交互过程至关重要。有一些地方值得注意：

　　确保可点击的元素看起来是可点击的。使用按钮和其他交互元素来考虑如何传达可用性信息。用户如何将一个元素理解为一个按钮？表单应该遵循以下功能：元素的表达式应该传递使用模式。看起来像链接或按钮但无法点击的视觉元素(例如，带下划线的单词不是链接或矩形背景的元素，但不是按钮)会让用户感到不知所措。

　　(1)标签按钮满足用户的期望。可操作界面元素上的文本标签应与实际效果相关联。如果用户了解按钮的功能，使用起来会更舒服。以下示例中类似“submit”的文本标签(太棒了！)，这样的模糊标签并不能让用户快速理解按钮的功能。

　　遵循一致的按钮规格。不管有没有意识，用户都会记住网站的细节。浏览网站时，他们会将特定形状与按钮功能相关联。因此，一致性不仅有利于设计的美观，也增强了用户的熟悉度。下图完美的说明了这一点。在应用程序的一部分(如系统工具栏)中使用三种不同的形状不仅令人困惑，而且很糟糕。

　　2.7可视化

　　一图胜千言。人类是视觉生物，几乎可以立即处理视觉信息。我们感知并传递给大脑的信息有90%是可视化的。形象是捕捉用户注意力、区分产品的有效方式。与设计良好的文本相比，图像更容易被观众接受。此外，图像可以跨越语言障碍。

　　以下原则可以帮助您将图像应用于网页：

　　确保图像相关。设计中最大的危险之一是图像传达了错误的信息。选择最符合您的产品目标的图像，并确保它们是上下文相关的。

　　(2)避免一般人的照片。在设计中使用人脸是吸引用户的有效方法。看到别人的脸，能让观众觉得和他们有联系，而不仅仅是卖产品。但是很多企业网站都是用常见的照片来建立信任，这是很不好的。可用性测试表明，这样的照片不会增加设计的价值，但往往会损害用户体验。

　　利用优质资源，不失重点。网站使用的资源质量会对用户的印象和服务期望产生很大的影响。此外，确保图像大小适合在每个平台上显示。图像不应该像素化，所以要测试各种尺度和分辨率。以原始纵横比显示图像。

　　2.8视频

　　随着互联网速度的提高，视频越来越受欢迎，尤其是当它们延长用户在网站上花费的时间时。今天，视频无处不在。我们在台式机、平板电脑和手机上观看视频。当有效使用视频时，它可以非常有效地吸引用户——它传达了更多的情感，真正给人一种产品或服务的感觉。将音频设置为默认关闭。当用户到达一个页面时，他不想让它发出任何声音。大多数用户不使用耳机。在这种情况下，他们需要快速关闭声音，并且会受到压力。大多数情况下，用户会离开网站。

　　Facebook视频会在用户进入时自动播放，但默认情况下，不会播放声音。

　　宣传视频尽量简短。根据D-Mak  Productions的研究，短片对大多数用户更有吸引力。所以，商业视频要保持在两到三分钟的范围内。

　　(3)提供另一种显示内容的方式。如果说视频是消费内容的唯一方式，那么看不懂、看不懂的人就无法获取内容。为用户提供字幕和完整的视频，以便更方便地获取内容。

　　2.9行动号召按钮

　　行动号召(CTA)是指引导用户实现预期目标的按钮。CTA的重点是引导用户做我们期待的事情。一些常见的注册税务师示例如下：

　　1、“开始试验”

　　2、“下载书籍”

　　3、“注册更新”