的网页设计已足够设计师和开发人员在构建代购源码网站时需要考虑很多事情，从视觉外观到功能设计。为简化此过程，我们准备了本指南。由于篇幅限制，本指南分为三个部分，这是第二部分。

本文的主要内容是：

二，设计页面

2.1内容策略

2.2页面结构

2.3视觉水平

2.4滚动操作

2.5内容加载

2.6按钮

2.7图像

2.8视频

2.9行为响应按钮

2.10网络表格

2.11交互式动画

二，设计页面

2.1内容策略

内容策略最重要的方面是关注页面目标。了解页面的目标并根据目标安排内容。

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

防止信息过载。信息过载是一个严重的问题。用户认为有太多信息无法消化，因此他们无法做出决策或采取行动。有一些简单的方法可以减少信息过载。一种常见的方法是阻止——将内容分成几个模块，以帮助用户更好地理解和处理。结账是最好的例子。一次最多显示五到七个输入字段，将结算语句拆分为多个页面，并根据需要逐步显示字段。

（图片来源: Witteia）

避免使用行话和行业术语。页面上显示的每个未知术语或短语都会增加用户的认知负担。一种安全的方法是为所有读者编辑内容，并选择对所有用户都清楚的单词。

最小化长内容。根据信息过载，如果代购源码网站不是基于信息消费，尽量避免长文本块。例如，如果您需要提供有关服务或产品的更多信息，请尝试逐步完成详细信息。将文本块写得更短更容易理解。根据罗伯特·罗伯特·冈宁的“如何从商业写作中解脱出来”一书，为了阅读舒适，大多数句子应该在20个字以内。

（图片来源: The Daily Rind）

避免大写所有字母。所有大写文本（即所有字母都大写）都可以用于包含少量字符的文本，例如首字母缩略词和图标;但是，避免在具有大字符的地方使用它（例如段落，表格）标签，错误，通知）。正如Miles Tinker在“打印的可读性”一书中所提到的，所有大写都会减慢阅读速度。此外，大多数读者会发现所有大写文本都无法快速清晰地理解。

所有都是大写的，用户更难理解。

2.2页面结构

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

使结构可预测。使您的设计满足用户期望。您可以参考类似的代购源码网站，找出页面上需要哪些元素和位置。使用目标用户熟悉的模式。

使用布局网格。布局网格将页面划分为几个主要区域，并根据大小和位置定义区域之间的关系。在网格的帮助下，将不同的部分组合在一起以形成一个有凝聚力的页面更容易。

网格和布局是设计的一部分，可以适应不同的屏幕尺寸。 Adobe XD的布局网格使设计人员能够始终如一地设计和管理不同屏幕尺寸的网格中元素之间的比例。

使用低保真线框模拟以避免不清楚的界面。混乱会增加理解的难度——每次添加按钮时，图像或文本都会使页面更复杂。在使用真实元素构建页面之前，创建一个线框，分析它，然后删除不是绝对​​必要的内容。

在Adobe XD中创建的低保真线框（Adobe credit: Tim Hykes）

2.3视觉水平

大多数人通过快速浏览网页而不是阅读所有内容来实现。因此，如果访问者想要查找内容或完成任务，他们将快速浏览网页并找到他们需要的位置。作为设计师，您应该通过设计良好的视觉水平来帮助他们。视觉水平是指元素在重要性方面的呈现（应该首先关注，重点关注等等）。适当的可视化层次结构允许用户更快地浏览页面。

使用自然浏览模式。作为设计师，我们可以控制人们在浏览页面时注意的位置。为了为访客的眼睛设置合适的浏览路径，我们可以使用两种模式：F形模式和Z形模式。对于重度发短信的页面（例如文章和搜索结果），F模式更好，而Z模式适用于非文本中心的页面。

CNN采用的F模式

Basecamp采用的Z形模式

优先考虑重要因素。使页面标题，登录表单，导航选项和其他重要内容成为视觉焦点，以便访问者可以立即看到它们。

“了解更多关于大脑的知识”按钮是视觉焦点。

创建模型以阐明可视层次结构。当您拥有真实数据时，设计原型可以看到真实页面。重新排列原型中的元素比技术人员开发网页时更方便，以避免在开发期间进行修改。

使用Adobe XD创建的原型。 （图片来源: Coursetro）

2.4滚动操作

网页设计师有一个谎言——用户不使用滚动。重申：今天，每个人都在使用滚动！

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

鼓励用户滚动。人们通常在页面加载后开始滚动。但页面顶部的内容仍然非常重要。顶部的内容为观众提供了第一印象和期望。用户仅在内容具有吸引力时滚动。因此，请将最引人注目的内容放在页面顶部：

提供优秀的介绍。精彩的介绍为内容提供了背景，并回答了用户的问题：“这个页面的内容是什么？”

使用迷人的图像。用户将密切关注包含相关信息的图像。

坚持导航。当您创建冗长的页面时，请记住用户仍然需要方向感（当前位置）和导航（其他可能的路径）。长页面可能存在导航问题;如果在用户向下滚动时顶部导航栏不可见，则当它们位于页面底部时，它们必须一直向上滚动。最简单的解决方案是悬停菜单——显示当前位置，并始终在页面上悬停。

滚动后导航（图片: Zenman）

加载新内容时提供视觉反馈。这对于动态加载内容（例如新闻）的网页尤为重要。由于滚动期间的内容加载速度很快（基本上在2到10秒内），因此您可以使用循环动画​​来指示系统正在运行。

加载动画（例如Tumblr的加载指示符）会告诉用户正在加载更多内容。

不要劫持滚动（即不要限制滚动到死亡）。劫持滚动是最烦人的事情之一，因为它控制远离用户并使滚动行为完全不可预测。在设计代购源码网站时，您应该让用户控制他们的浏览行为。

Tumbler登录页面劫持了滚动操作。滚动页面是固定的，而不是免费的。

2.5内容加载

内容加载值得进一步强调。即时回复是最好的，但有时您的代购源码网站需要更多时间向访问者提供内容。错误的网络连接可能导致响应缓慢，或者操作可能需要更长时间才能完成。但无论原因是什么，您的代购源码网站应该快速加载。

确保定期加载不需要很长时间。网民的关注和耐心非常低。根据尼尔森诺曼集团的研究，用户保留的限制是10秒。当访问者必须等待代购源码网站加载时，如果代购源码网站加载速度足够快，他们会感到沮丧并可能离开。如果加载时间太长，即使设计了最漂亮的加载说明，用户也会离开。

在装载过程中使用骨架屏幕。许多代购源码网站使用进度指示器来显示数据正在加载。虽然进度指示器背后的意图很好（提供视觉反馈），但结果可能是负面的。正如Luke Wroblewski所说，“根据定义，进度指标是对需要等待的人的回应。这就像看着时钟滴答作响–当你这样做时，时间似乎更慢。 ”进度指标有一个很好的替代方案：Skeleton Screens。这些容器本质上是临时空白页版本，并且信息逐渐加载到容器中。设计师可以使用骷髅屏幕将注意力集中在实际进度上并预测即将发生的事情。这意味着事情正在发生，因为信息逐渐显示在屏幕上，人们看到代购源码网站在等待时采取行动。

加载内容后，Facebook使用Skeleton Screens填充UI。

2.6按钮

按钮对于创建平滑的交互过程至关重要。有一些地方需要注意：

确保可点击元素看起来可点击。考虑如何使用按钮和其他交互元素传递可用性信息。用户如何将元素理解为按钮？表单应遵循以下功能：元素表示的传递方式。看起来像链接或按钮但不可点击的视觉元素（例如不是链接的带下划线的单词或具有矩形背景但不是按钮的元素）可能是压倒性的。

左上角的橙色框是按钮吗？不，但形状和标签文字使它看起来像一个按钮。

标签按钮应符合用户的期望。操作界面元素上的文本标签应与实际效果相关联。如果用户理解按钮的角色，则用户将更舒适地使用。与下面示例中“提交”的文本标签（Awesome！）一样，这样的模糊标签不允许用户快速理解按钮的作用。

不要让用户对按钮感到困惑。 （图片来源: UX事项）

遵循一致的按钮规范。无论您是否有意识，用户都会记住该代购源码网站的详细信息。浏览代购源码网站时，它们会将特定形状与按钮功能相关联。因此，一致性不仅有利于设计的美观，而且还增强了用户的熟悉度。下图完美地说明了这一点。在应用程序的一个部分（例如系统工具栏）中使用三种不同的形状不仅令人困惑，而且丑陋。

始终如一。

2.7图像

一张图片胜过千言万语。人类是几乎立即处理视觉信息的视觉生物;我们感知并与大脑沟通的信息的90％是视觉的。图像是捕捉用户注意力和区分产品的有效方式。与精心设计的文本相比，图像更容易被观众接受。此外，图像可能是跨语言障碍。

以下指南可帮助您将图像应用于网页：

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

与主题无关的图像可能会使用户感到困惑。

避免普遍肖像。在设计中使用面孔是吸引用户的有效方式。看到别人的脸可以让观众感受到与他们的联系，而不仅仅是销售产品。但是，许多企业代购源码网站使用通用照片来建立信任是非常糟糕的。可用性测试表明，这些照片不会增加设计的价值，但往往会损害用户体验。

虚幻的图像给用户带来虚伪感。

使用高质量，非专注的资源。代购源码网站使用的资源质量会对用户对服务的印象和期望产生巨大影响。此外，请确保图像大小适合在每个平台上显示。图像不应该像素化，因此请测试各种比例和分辨率大小。图像将以其原始宽高比显示。

相同尺寸和不同质量的照片（图片来源: Adob​​e）

2.8视频

随着互联网速度的提高，视频越来越受欢迎，特别是当它们延长用户在代购源码网站上花费的时间时。今天，视频无处不在。我们在台式机，平板电脑和手机上观看视频。有效使用视频时，它可以非常有效地吸引用户–它提供更多的情感，真正给人一种产品或服务的感觉。

默认情况下将音频设置为关闭。当用户到达页面时，他们不希望它发出任何声音。大多数用户不使用耳机，在这种情况下，他们需要快速关闭声音并感到压力。在大多数情况下，用户将离开该代购源码网站。

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

宣传视频尽可能短。根据D-Mak Productions的研究，短片对大多数用户更具吸引力。因此，商业视频保持在两到三分钟的范围内。

（图片来源: Dmakproductions）

提供另一种显示内容的方式。如果视频是消费内容的唯一方式，那些不理解或无法理解的人就无法获取内容。为了让用户更轻松地获取内容，请提供字幕和完整视频。

字幕和视频将使内容更容易获得。 （图片来源: TED）

2.9号召性用语（CTA）按钮

号召性用语（CTA）是一个指导用户完成所需目标的按钮。 CTA的重点是引导用户完成我们期望的行动。 CTA的一些常见例子是：

“开始试用”

“下载书”

“注册更新”

“获得咨询”

在设计CTA按钮时需要考虑以下几点：

CTA应该足够大，以便在远处看到，但不能太大。要确认CTA是页面上最突出的元素，请尝试五秒钟测试：浏览网页五秒钟，然后记录您记住的内容。如果CTA在列表中，那么它的大小合适！

视觉上非常出色。 CTA的颜色是引起用户注意的重要因素。通过颜色，一些按钮可以比其他按钮更突出，更具视觉冲击力。对比色是CTA的理想选择，使其更加引人注目。

Firefox代购源码网站上的绿色CTA非常引人注目，可以立即引起用户的注意。

负空间。 CTA周围的空间也很重要。白色（或负片）空间为按钮创建一个空白区域，将按钮与界面中的其他元素分开。

之前的Dropbox主页有一个使用负空间来创建主CTA的好例子。蓝色的“免费注册”和CTA以及浅蓝色的背景。

面向行动的文本。为按钮写文本以驱动用户采取行动。从以&ldquo开头的动词开始，开始”&ndquo;获取”或“加入&rdquo ;.

Evernote为CTA提供最常见，最有效的文本。

提示：您可以使用模糊效果快速测试CTA。模糊测试是确定用户眼睛是否会到达所需位置的便捷方式。将屏幕截图应用于Adobe XD中的模糊效果（请参阅下面的示例）。看看页面的模糊版本，哪些元素会突出？如果您没有预测内容，请修改它。

模糊测试是一种检查设计焦点和视觉层次结构的技术。

2.10网络表格

填写表单仍然是页面上最重要的交互类型之一。事实上，表格通常被认为是实现目标的最后一步。填写表格时，用户应避免混淆并尽快填写表格。表单就像一个对话，双方（用户和代购源码网站）之间应该有逻辑通信。

只需留下来。只要问你真正需要什么。添加到表单中的每个附加字段都会影响转换率。简而言之，想一想为什么需要这些信息以及如何使用这些信息。

按逻辑顺序排列表单。问题应该基于用户逻辑而不是应用程序或数据库的逻辑。例如，在名称不正确之前询问地址。

将相关信息汇总在一起。逻辑地分组相关信息。从一组问题到下一组问题的过程更像是一个对话。将相关字段分组在一起还可以帮助用户理解信息。

将相关信息汇总在一起。 （图片:尼尔森诺曼集团）

2.11动画

越来越多的设计师使用动画作为功能元素来增强用户体验。动画不仅仅是为了好玩，它是提高交互效率的重要方法之一。但是，动画只能在合适的时间和地点改善用户体验。一个好的交互式动画有一个目标：它是有意义和有用的。

以下是动画增强用户体验的一些场景：

用户行为的视觉反馈。良好的交互设计应该改善视觉反馈。当您需要通知用户操作结果时，视觉反馈非常有用。如果操作未成功执行，则用户可以通过动画快速学习相关信息。例如，输入错误密码时可以使用平移效果。这很容易理解，并且在日常通信中摇动意味着“不”，因此摇动效果也可以传达相同的信息。

一旦用户看到动画，他们就可以立即理解问题。 （图片来源: Kinetic UI）

系统状态的可见性。 10雅各布尼尔森的可用性启发式，性是系统状态的原则之一，可视用户界面设计是最重要的。用户希望随时了解当前的上下文，不应让他们猜测——应通过适当的视觉反馈告诉用户发生了什么。数据上传和下载操作是功能动画的常见场景。例如，动画加载栏显示任务的进度并显示任务速度的估计值。

（图片来源: xjw）

导航切换。导航切换是指在代购源码网站上的模块之间切换——例如，从概览视图到详细视图。模块切换通常涉及大面积切换，这使用户难以跟上。动画使用户能够在这些时刻感到舒适，在切换上下文之间平滑过渡，并通过在模块之间创建可视连接来解释页面更改。

（图片来源: Ramotion）

牌。假设您有许多具有相同功能的站点，以帮助用户完成相同的任务。它们都提供了良好的用户体验，但人们真正喜欢的不仅仅是良好的用户体验。该代购源码网站应与用户建立情感联系。品牌动画在吸引用户方面起着关键作用。它将形成公司的品牌价值，突出产品的优势，使用户真正的快乐和难忘。

（图片来源Heco）

第二部分结束，请转到第三部分。

原始链接：https://www.smashingmagazine.com/2017/11/comprehensive-guide-web-design/

在这篇文章中，每个人都是产品经理翻译团队@吉诺是比利翻译发布，未经本代购源码网站许可，禁止转载。

该地图来自unsplash，基于CC0协议

« 可以留住顾客的外贸代购源码网站设计应该是这样的！ 6年高级人才分析 | 小说代购源码网站从建立到利润全分辨率（带案例） »