网页设计的可用性引导
发布时间：2022-07-31 点击：299
网页设计的可用性引导
如何更快地进入人工智能时代，以获得高薪。 前阿里巴巴产品专家带您开始人工智能产品经理15天。 理解>。
译者：俗话说，一幅画赢了一千个字。 无论是真的还是假的，图片都是网页的重要组成部分。 由于嵌入图片的步骤变得简单，我们可以看到，许多网站都嵌入了许多图片，其中一些网站从不同的角度显示了正确使用图片的好处。 大多数网站都不是这样的。 虽然这对设计影响不大，但这些图片可能会减少你出售产品的机会。 除非你有一个引导用户的网页，或者创建一个良好的阅读条件。 图片比原则更详细。图片的处理应该是设计者更理解和掌握的能力。
网页可用专家杰科布·尼森和他的公司nn/g进行了眼动研究。 总结了一篇题为“凤凰城”的文章。 他们的结论震惊了设计行业，并回答了许多以前的研究无法回答的问题。
事实上，用户希望看到与他们正在寻找的图片有关的图片，因此他们更喜欢一个没有图片的页面，而不是充满相关图片的臃肿页面。 在网页上使用图片的关键是基于以下基本思想。
简单的装饰图片潜意识地被我们的大脑忽略了。 就像雷达一样，如果图片看起来像雷达上的过滤器，大脑就会忽略它们。 研究表明，使用现实生活或真实产品的图片可以自动被大脑标记为重要的，并且可以进一步注意。 如果你有一个个人博客，你想看到的是你的真实形象，而不是一幅画。 人们希望看到与他们沟通的人，因为这对建立信任特别重要。
如果你有一家公司来描述一家公司的员工，那就太好了。 它为公司的员工和生活提供了一种非常亲切的方式。 如果你能负担得起花点钱买一个好摄影师，它会给你的网站增添很多颜色。 记住不要采取艺术风格，特别是那种与你想要表达内容无关的艺术照片。
一些眼动研究表明，如果产品图片中有更多的细节，效果会越好。 是的，例如，平板电视的广告图可以在一定程度上工作，但真的很好吗？ 用户想要看到更多的细节，所以请向他们展示。
我会给你一些不同的研究结果。 您将看到一些网站标志着用户对热区域的关注，蓝区域被用户忽略。
除了看到这是一个令人难以置信的过时设计，你可以清楚地看到，所有的图片都没有热分布。 这是因为这些图片完全充满了功能。 如果这些图片与页面信息有关，热区域可能会发生一些变化。 这个例子足以显示他们浪费了多少图片空间。
另一个例子来自纽约杂志的餐厅页面。 我们可以看到，虽然图片人物是世界著名的厨师画，但画面的质量也是非常重要的。 虽然图片和网页之间的内容在一定程度上相关，但低对比度和小映射很容易被忽视。 因此，平衡图像质量和相关性是两项重要的指导原则。
上图摘自jakobnielsen和karapernice，几年前写了一篇题为imagesasobstas的文章。 谢谢你的伟大工作。
并不是所有的设计师都有心理学硕士学位，所以很少有人知道人脑是如何工作的。 同样的眼动研究表明，我们的重点也很容易受到图片的影响和变化。 当然，我们提到高质量和相关的图片. 在一项名为youlookwheretheylook的研究中。 詹姆斯·布雷泽展示了这幅画是如何成为阅读流的一部分的。
他们以婴儿尿布零售商网站为例，对106名受试者进行了盲目的研究。 接下来，你可以看到两张照片。 当婴儿的脸在游客面前时，大多数人都会把注意力集中在他的脸上，比如可爱和甜蜜。
然而，相同的广告文案中同一个婴儿，但在不同的方向上有显著的改善。 您不仅关注文案，而且还可以看到品牌和较小的单词（一些退款协议）。 退款协议在交易中非常重要，可能是卖点之一。
jcdecaux和think多年来在一项研究中得出的结论证实了这一结果：在广告中。 用户的眼球实际上可以引导到广告的关键信息。
由于许多广告都有漂亮的模特，一般的模特比广告产品更能赢得用户的关注。 以下研究表明，该问题可以得到解决。
这项研究的结果非常清楚。原始广告(左)只专注于产品品牌和产品，实际上只有6%。 然后，在广告被修改和重新测试后，尽管商品标志在底部，超过84%的人更关心产品和产品的品牌。 这是我认为的14倍晋升非常不同。
图片不仅能引导用户的注意，而且还能在短短几秒钟内描述产品的许多信息。 一个非常著名的例子是一个智能手机外围设备，支持手机或平板。
通过上面的图片，用户可以在几秒钟内了解该产品的许多特性。 他们已经知道设备之间的连接方法，产品的大小，产品的大小，以及哪些设备与兼容，以及如何进行互动界面。 最初的长而无聊的产品介绍使图片清晰。 这是一个经典的好例子。
苹果的macbookair广告是另一个很好的例子。 众所周知，macair非常小，做工精湛。 但是如果你不知道这些功能，你可以在瞬间从下面的图片中得到它们。
如果你经营一个在线购物中心，记住信任是非常重要的。 没有人会在他们不信任的企业购物，这就是为什么amazon和ebay如此受欢迎的原因。 因为它们是世界知名的品牌，并提供不同的退款保障，他们也有不同的安全性。 买家信任他们，因为他们知道如果卖方不遵守规则，他们会受到惩罚。 如果您有一个在线购物中心，以确保您可以赢得买方的信任。
在网上购物中心出售巴西和加勒比是不可思议的。 该网站的小变化将转化率从8.8%提高到17.2%。 这是怎么做的？ 事实证明，企业并没有使用这幅画的缩略图，并利用相应的画家作为商业图片。 他们认为这家商店是因为他们认为画家的作品质量不值得怀疑。 通过简单的画家化身，顾客意识到他们正在从真实的人那里购买(画)。
chopra还提到了另一个具有在线案例收集网站的用户。 将他的网站上的联系图标从3.7提高到5.5，提高了45%。 他总结说，游客首先可以检测到哪些图片是普通图片，降低网站的可信度。可以看出，互联网上真正的肖像为人们建立了一个情感枢纽。
根据今年2月的数据，图片比例占网页平均值1.29兆字节的61.9%。 下载页面需要很长时间。 根据jakobnielsen的研究，第二个响应时间是用户认为他们想接受的时间极限。
在我们上传图片之前，我们总是通过photoshop将它们保存在网页上。 通过这种方式，可以减少图片的文件尺寸并保持图片的一定质量。 您还可以使用smush.it。 这是一种免费的在线工具。他还提供了一个wordpess插件。 在您上传图片之前执行前面的任何操作将减少您的网站的总体尺寸，这意味着网页可以更快地加载，以减少用户对加载网页的抑郁。
我想说的最后一件事是，在图片标签中指定宽度和高度的原因是非常简单的。 一页总是加载文本并加载图片。 因此，在完全加载之前，没有指定的宽度和高度的图片将被一个小的缩略图标记。 当图片被加载时，缩略图将扩展到他原来的大小，以打断用户可能正在阅读的文本。 同时，图片在延伸过程中也会导致用户聚焦的位置，这将使许多游客感到不耐烦。
通过指定图片标签的宽度和高度，您可以确保缩略图可以扩展到他的完整大小，并出现在他应该拥有的位置之前，再加载图片。 这是一个很小的细节，但这是一次很好的经历。
然而，有些人认为这是一种旧技术，在当今移动浏览器的快速发展中并不有效。 我同意这一点，所以你只能在响应页面上不指定宽度和高度，但别忘了在不同的分辨率下改变画面的大小。 你不想在640像素宽的设备上画700像素广场。
如果您想要一个成功的网站，特别是您的网站，那么正确使用图片是非常重要的。 在上面的例子中，您可以看到，坏图片将被用户忽略，但如果您可以找到正确的图片并将它们放置在正确的位置。 然后他们会给你带来惊人的结果。
网站推广主要做什么?
HTML5的开发与UI设计是否不同
怎样做网站优化才能避免网站被K掉呢？
百度网站推广与百度网站优化的区别在哪?又有哪些联系?
网站SEO优化中长尾关键词的四种形式
网站SEO优化中外链的作用有哪些被哪些因素影响
应注意平面UI设计的要素
做seo的道路还是前途光明吗
如何更快地进入人工智能时代，以获得高薪。 前阿里巴巴产品专家带您开始人工智能产品经理15天。 理解>。
译者：俗话说，一幅画赢了一千个字。 无论是真的还是假的，图片都是网页的重要组成部分。 由于嵌入图片的步骤变得简单，我们可以看到，许多网站都嵌入了许多图片，其中一些网站从不同的角度显示了正确使用图片的好处。 大多数网站都不是这样的。 虽然这对设计影响不大，但这些图片可能会减少你出售产品的机会。 除非你有一个引导用户的网页，或者创建一个良好的阅读条件。 图片比原则更详细。图片的处理应该是设计者更理解和掌握的能力。
网页可用专家杰科布·尼森和他的公司nn/g进行了眼动研究。 总结了一篇题为“凤凰城”的文章。 他们的结论震惊了设计行业，并回答了许多以前的研究无法回答的问题。
事实上，用户希望看到与他们正在寻找的图片有关的图片，因此他们更喜欢一个没有图片的页面，而不是充满相关图片的臃肿页面。 在网页上使用图片的关键是基于以下基本思想。
简单的装饰图片潜意识地被我们的大脑忽略了。 就像雷达一样，如果图片看起来像雷达上的过滤器，大脑就会忽略它们。 研究表明，使用现实生活或真实产品的图片可以自动被大脑标记为重要的，并且可以进一步注意。 如果你有一个个人博客，你想看到的是你的真实形象，而不是一幅画。 人们希望看到与他们沟通的人，因为这对建立信任特别重要。
如果你有一家公司来描述一家公司的员工，那就太好了。 它为公司的员工和生活提供了一种非常亲切的方式。 如果你能负担得起花点钱买一个好摄影师，它会给你的网站增添很多颜色。 记住不要采取艺术风格，特别是那种与你想要表达内容无关的艺术照片。
一些眼动研究表明，如果产品图片中有更多的细节，效果会越好。 是的，例如，平板电视的广告图可以在一定程度上工作，但真的很好吗？ 用户想要看到更多的细节，所以请向他们展示。
我会给你一些不同的研究结果。 您将看到一些网站标志着用户对热区域的关注，蓝区域被用户忽略。
除了看到这是一个令人难以置信的过时设计，你可以清楚地看到，所有的图片都没有热分布。 这是因为这些图片完全充满了功能。 如果这些图片与页面信息有关，热区域可能会发生一些变化。 这个例子足以显示他们浪费了多少图片空间。
另一个例子来自纽约杂志的餐厅页面。 我们可以看到，虽然图片人物是世界著名的厨师画，但画面的质量也是非常重要的。 虽然图片和网页之间的内容在一定程度上相关，但低对比度和小映射很容易被忽视。 因此，平衡图像质量和相关性是两项重要的指导原则。
上图摘自jakobnielsen和karapernice，几年前写了一篇题为imagesasobstas的文章。 谢谢你的伟大工作。
并不是所有的设计师都有心理学硕士学位，所以很少有人知道人脑是如何工作的。 同样的眼动研究表明，我们的重点也很容易受到图片的影响和变化。 当然，我们提到高质量和相关的图片. 在一项名为youlookwheretheylook的研究中。 詹姆斯·布雷泽展示了这幅画是如何成为阅读流的一部分的。
他们以婴儿尿布零售商网站为例，对106名受试者进行了盲目的研究。 接下来，你可以看到两张照片。 当婴儿的脸在游客面前时，大多数人都会把注意力集中在他的脸上，比如可爱和甜蜜。
然而，相同的广告文案中同一个婴儿，但在不同的方向上有显著的改善。 您不仅关注文案，而且还可以看到品牌和较小的单词（一些退款协议）。 退款协议在交易中非常重要，可能是卖点之一。
jcdecaux和think多年来在一项研究中得出的结论证实了这一结果：在广告中。 用户的眼球实际上可以引导到广告的关键信息。
由于许多广告都有漂亮的模特，一般的模特比广告产品更能赢得用户的关注。 以下研究表明，该问题可以得到解决。
这项研究的结果非常清楚。原始广告(左)只专注于产品品牌和产品，实际上只有6%。 然后，在广告被修改和重新测试后，尽管商品标志在底部，超过84%的人更关心产品和产品的品牌。 这是我认为的14倍晋升非常不同。
图片不仅能引导用户的注意，而且还能在短短几秒钟内描述产品的许多信息。 一个非常著名的例子是一个智能手机外围设备，支持手机或平板。
通过上面的图片，用户可以在几秒钟内了解该产品的许多特性。 他们已经知道设备之间的连接方法，产品的大小，产品的大小，以及哪些设备与兼容，以及如何进行互动界面。 最初的长而无聊的产品介绍使图片清晰。 这是一个经典的好例子。
苹果的macbookair广告是另一个很好的例子。 众所周知，macair非常小，做工精湛。 但是如果你不知道这些功能，你可以在瞬间从下面的图片中得到它们。
如果你经营一个在线购物中心，记住信任是非常重要的。 没有人会在他们不信任的企业购物，这就是为什么amazon和ebay如此受欢迎的原因。 因为它们是世界知名的品牌，并提供不同的退款保障，他们也有不同的安全性。 买家信任他们，因为他们知道如果卖方不遵守规则，他们会受到惩罚。 如果您有一个在线购物中心，以确保您可以赢得买方的信任。
在网上购物中心出售巴西和加勒比是不可思议的。 该网站的小变化将转化率从8.8%提高到17.2%。 这是怎么做的？ 事实证明，企业并没有使用这幅画的缩略图，并利用相应的画家作为商业图片。 他们认为这家商店是因为他们认为画家的作品质量不值得怀疑。 通过简单的画家化身，顾客意识到他们正在从真实的人那里购买(画)。
chopra还提到了另一个具有在线案例收集网站的用户。 将他的网站上的联系图标从3.7提高到5.5，提高了45%。 他总结说，游客首先可以检测到哪些图片是普通图片，降低网站的可信度。可以看出，互联网上真正的肖像为人们建立了一个情感枢纽。
根据今年2月的数据，图片比例占网页平均值1.29兆字节的61.9%。 下载页面需要很长时间。 根据jakobnielsen的研究，第二个响应时间是用户认为他们想接受的时间极限。
在我们上传图片之前，我们总是通过photoshop将它们保存在网页上。 通过这种方式，可以减少图片的文件尺寸并保持图片的一定质量。 您还可以使用smush.it。 这是一种免费的在线工具。他还提供了一个wordpess插件。 在您上传图片之前执行前面的任何操作将减少您的网站的总体尺寸，这意味着网页可以更快地加载，以减少用户对加载网页的抑郁。
我想说的最后一件事是，在图片标签中指定宽度和高度的原因是非常简单的。 一页总是加载文本并加载图片。 因此，在完全加载之前，没有指定的宽度和高度的图片将被一个小的缩略图标记。 当图片被加载时，缩略图将扩展到他原来的大小，以打断用户可能正在阅读的文本。 同时，图片在延伸过程中也会导致用户聚焦的位置，这将使许多游客感到不耐烦。
通过指定图片标签的宽度和高度，您可以确保缩略图可以扩展到他的完整大小，并出现在他应该拥有的位置之前，再加载图片。 这是一个很小的细节，但这是一次很好的经历。
然而，有些人认为这是一种旧技术，在当今移动浏览器的快速发展中并不有效。 我同意这一点，所以你只能在响应页面上不指定宽度和高度，但别忘了在不同的分辨率下改变画面的大小。 你不想在640像素宽的设备上画700像素广场。
如果您想要一个成功的网站，特别是您的网站，那么正确使用图片是非常重要的。 在上面的例子中，您可以看到，坏图片将被用户忽略，但如果您可以找到正确的图片并将它们放置在正确的位置。 然后他们会给你带来惊人的结果。
网站推广主要做什么?
HTML5的开发与UI设计是否不同
怎样做网站优化才能避免网站被K掉呢？
百度网站推广与百度网站优化的区别在哪?又有哪些联系?
网站SEO优化中长尾关键词的四种形式
网站SEO优化中外链的作用有哪些被哪些因素影响
应注意平面UI设计的要素
做seo的道路还是前途光明吗
上一篇：如何提高SEO的内容重量
下一篇：如何优化英语网站