沧州网页设计：伟大的图标如何影响用户体验

2019.08.17 mf_web

187

接口都是关于沟通和完成任务的。网站的UI是达到目的的手段，设计师的工作是创建一个界面，帮助用户快速达到目的。

图标非常适合界面，因为它们无法传达意义。用户可以通过研究视觉效果和与元素交互来了解界面的工作原理。沧州网页设计

在这篇文章中，我将介绍几种使用图标来提高网站用户体验质量的方法。没有完美的用途，但伟大的图标和改善的用户体验之间存在共性。

增强导航

图标自然可以帮助用户仅基于视觉效果浏览网站。最好的图标是大多数人认可的图标，所以你总是希望先坚持这些。

但您可以为带有标签文本的链接设计图标，以获得更清晰的可用性。

使用垂直导航菜单查看Tim Roussilhe的投资组合网站。

设计中的图标和用户体验

Tim在每个链接标签上方包含图标，以区分目的和行为。它是图标使用最清晰的方法之一，因为它易于查看和易于理解。

永远记住也要包含链接的文本标签。用于导航的纯图标很少有效，或者至少它不是可用性的最佳情况。

但即使有像My Own Bike这样的网站，你至少可以猜到链接的去向。该网站完全采用德语，但图标仍然提供线索。

我的自行车

另一个非常重要的图标是三栏菜单图标。这也被称为汉堡菜单，虽然许多设计师讨厌它，但更多的人正在慢慢意识到这个符号的含义。

Inc上的菜单是另一个很好的例子，展示了图标如何与导航相结合。

INC

菜单链接使用汉堡包图标，但下面还有标签文字“菜单”。这澄清了图标的意图，使移动用户更容易找到导航。

此外，当导航可见时，用户将在导航链接旁边获得小号加号。这些图标表示子链接的滑动抽屉，类似下拉链接，但设计用于移动。

另一个流行趋势是大型导航下拉菜单。这可以在像Mashable这样的网站上找到，每个链接都有一个向下的小箭头，表示下拉菜单。

这些图标不是必需的，但它们确实改善了体验。大多数用户识别箭头符号，他们知道它的含义。

当然这个导航可以在没有箭头的情况下工作。但无可否认，这些图标有助于澄清意图，并使浏览网站变得更加简单。

鼓励行为的视觉效果

导航可以远远超出顶部导航菜单栏。它还可以包含页面正文或侧边栏中的链接，以帮助用户浏览网站。

如果它们脱颖而出，图标也非常适合体内链接。例如，在Media Temple主页上，您会找到一些表格，其中包含不同颜色的“阅读更多”链接。

媒体寺

这些链接都使用指向右侧的横向箭头图标。这是一个公认的网络符号，意思是转到下一页。

大多数Web浏览器都有后退按钮和前进按钮。后退按钮指向左侧和前方指向右侧，这些按钮允许用户在其浏览器历史记录中导航。因此，任何向右箭头通常意味着向前移动到下一页。

Media Temple以一种微妙但引人注目的方式利用它。

一个突出的页内导航项是Call to Action按钮，缩写为CTA。图标可以很好地用于服务于特定目的的CTA。

例如，jQuery在主页的右上角有一个突出的下载按钮。此CTA按钮在文本旁边包含一个下载图标。

这可以让您知道该按钮在某种程度上与下载文件有关。

但是您的按钮并不总是需要在浏览器中生成操作。CTA可能会导致另一个与您的产品或服务相关的页面。

图标可用于帮助销售按钮并吸引访问者点击。ResumeBaking是一个很好的例子，他们的CTA被带有弯曲箭头的图标包围。

这些自定义图标通过要求用户单击来帮助销售按钮和产品。但他们的销售基于创建免费简历，在线分享和获得工作机会等功能。

是的，这些有点模糊，但它们有效。许多用户只看到图标+箭头，然后根据注意点击按钮。

表格说明

每个网站都有某种形式的表单，无论是电子邮件注册表单，帐户登录表单，还是只是一个基本的联系表单。

图标可以与表单配对以建立信任并鼓励用户行为。

看一下Life Be Be Better的网站，它在页面底部有一个固定的电子邮件注册。此表单在表单旁边包含一个小信封图标，以显示其用途并引起注意。

对于公司的电话联系信息和社交媒体链接也是如此。

图标用于描述周围的内容。而且，由于视觉效果比单词更易于理解，因此使图标清晰且易于一目了然是有意义的。

我喜欢的另一种技术是设计师在他们的注册领域添加图标。如果表单具有超过3-4个输入并且用户需要填写所有字段，则此方法非常有效。

我在WebDAM试用页面上找到了一个很好的例子，它为每个字段使用自定义图标。

Webdam

这些图标看起来很棒，它们与界面完美融合。

此外，它们还可以帮助用户快速识别每个表单字段所要求的内容。由于字段标签嵌套在表单内，因此一旦输入某些信息，标签就会消失。输入一些数据并忘记所有字段的用途后，这可能会造成混淆。

如果您的网站在表单中有超过3-4个不同的字段，我建议您只添加这些图标。否则它看起来有点冗长。

功能和指针

每个新创业公司，小型企业或网络应用程序都有一系列功能和理由让人们访问该网站。你可以列出这些功能，但这通常只会吸引观众。

而是尝试添加图标以帮助解释功能和常见行为。视觉效果必须更容易理解，因此它们会让人们在页面下方进一步阅读。

Lightcms

以LightCMS上的图标为例。它们超薄而明亮，因此可以轻松融入页面。

但他们也澄清了功能，并帮助读者快速浏览主页。仅凭这些图标可能不会在LightCMS上出售任何人。但是他们可以帮助澄清平台的作用以及它有用的原因。

在Disqus功能页面上有一个非常相似的设计，其中列出了自定义图标以及不同的功能。

Disqus

我非常喜欢这个设计，因为这些图标很好地融入了Disqus品牌。

即使Disqus从头开始制作这些图标，你当然也不需要。有很多免费的图标集可以下载并用于您需要的任何内容。

包起来

图标是从桌面软件到网站和移动应用程序的所有界面的自然组成部分。但设计和款式不断变化，因此了解最新趋势非常重要。

我希望本指南可以帮助您在任何场合使用图标制作出色的体验。

沧州网页设计

相关推荐

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

最新案例

联系电话 400-6065-301

在线咨询

留言