资讯频道 → Web前端
阅读更多

8顶
0踩

Web前端

原创新闻 打造网站最佳浏览体验：四大UX设计原则

2013-11-22 10:06 by 见习编辑 tuhaihe 评论(4) 有8638人浏览
UX web 网站设计 用户体验

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Web设计者正在借助大量工具，以使自己设计的网站给用户带来最可能好的用户体验。最好的办法之一是在设计中充分利用现有的科研成果，以最大化用户的满意度。

眼动追踪研究为设计者提供了各种设计蓝图，以引导他们优先设计网站用户感兴趣的内容部分。该研究同样展示了访问者阅读网站的方式，可帮助Web设计者“裁剪”出适合普通大众的网站。当用户在你的网站中获得了良好的用户体验，他们会再回来，并有机会转变为网站的“常客”。

那该研究可以告诉我们关于普通访问者的哪些内容？设计者如何利用该研究来指导网站设计？ Webdesigner Depot网站发表了一篇文章《 4 essential UX rules taught by eye-tracking research》，以眼动追踪研究为基础，深入探讨了网站设计中应遵循的四大UX设计原则。

用引人注意的标题文字来吸引用户，而非图片

根据研究，标题文字比炫丽的图片更容易引起网站用户的注意。该发现可用于首页布局，尤其适用于新闻网站。这也恰好解释了为什么很多新闻网站尽最大可能频繁使用煽情类标题来吸引用户注意力的原因。

几年前，有一个称为“Eyetrack III”的著名研究，发现网站的访问者特别喜欢盯着标题看。更进一步，这些标题在页面中的位置也将对用户访问网站的速度产生影响。将这些标题放在页面的左上部分，你将获得更多关注网站内容的用户。

如果你正在设计一个新闻类网站，请记住这一点：电脑屏幕上的文字比图片能更迅速地吸引用户的眼球。 Fox News，作为全世界排名173，美国排名36的知名网站，很好地利用了这一发现。你可以仔细观察一下它首页中的头条标题。





采用F形状模式来设计网站

几年以前，Nielsen Norman Group公布了一个非常重要的Web用户研究报告，其中指出每个用户通常按F形状模式来阅读网站内容。

网站访问者最开始会水平浏览网站的上部内容，这也就是F的顶部横杠。然后，访问者会从左侧向下浏览一些网站内容后，再开始水平浏览，这次浏览的长度要小于最开始水平浏览的长度，这算是F的第二个短横杠。最后，他们垂直浏览网站左侧内容，这就形成了F左侧的竖栏。

一些网站已经将该研究中很好地应用到实践中。如 Ghost Games，它的网站主页很完美地采用了F形状模型。这不仅提高了用户体验，而且使导航变得易于使用，尤其是F形状中的竖栏很好地展示了这个网站的信息。





不用把时间浪费在广告上

很多人发现网站上所展示的广告很烦人，这也说明了为什么很多网站访问者会忽略这些广告，而只去专注那些有用的网站内容。来自Nielsen Norman Group的另一研究显示，如果网站用户正专注于网站内容时，他们是不会注视任何广告的。

要明白，设计一个主要靠广告来盈利的网站，其实就是在浪费时间。根据该研究报告，你应该重新考虑网站的盈利方式。比如，去掉广告，转为基于订阅的模式，向网站的访问者收取一定的会员费。一些网站在意识到广告这一弊端后，已经开始转向该模式。

Club Penguin就是一个很好的例子。它是迪斯尼的一款大型多人在线游戏。该网站上的所有广告均免费，但访问者需要购买会员身份才能玩游戏。




 
避免花哨文字与样式

简约是未来趋势。如果你希望网站用户可以迅速发现所需内容，简约很重要。美国卫生与公众服务部的一篇关于“可用性”的 博文指出，网站中的文字与样式越花哨，网站给用户带来的困扰就越多，导航失败的概率就会越高。该博文引用了 Nielsen 数年前的一个研究，研究中请访问者寻找美国人口普查局网站中的基本信息，而很多人在该测试中都失败了。

参与者被要求在该网站中寻找美国当前的人口数。令人吃惊的是，即便该信息以大字号、红色字体标注在页面的右侧顶部，也仅有14%的参与者找到它。有人怀疑，导致如此低成功率的原因是信息被放在了页面的右边，违背了F形状模型。

而进一步的实验发现大部分参与者根本就没有在意这个被放大、标红的信息。原因在于，该消息花哨的样式使它看起来更像一个促销广告。很多用户根本不会注意广告，所以获得这样的测试结果也就不足为怪了。

现在来看一下改进后的 美国人口普查局网站。现在它已经发生了巨大的变化，人口数字不再像一个有花哨样式的广告，它被移动到页面左边的底部，以便吸引用户向下滚动页面去查看它。但这仍算不上好的替代方案。





理解眼动追踪，理解高效的网站设计

眼动追踪研究实际上基于用户的行为沟画了一幅用户浏览网站时的喜好蓝图。无视该研究的Web设计者将会令自己身陷困境。巧妙利用该研究，可给用户带来愉悦、简单的网站冲浪体验，从而吸引更多用户，获得更好的知名度。

请记住，在任何一个网站上，吸引用户注意力是的标题文字，不是图片。记住F形状模型，这对你设计出好的网站（至少是首页）布局有很大帮助。

最后，抛弃广告。它们不仅影响美观，很多网站用户也不会注意它们。探索网站其它盈利方式，可以通过收取会员费或其他方法。无论你怎样做，千万不要让有用的内容看起来像广告，这样用户会直接忽略掉它们。记住这些，你将设计出符合用户行为的网站。（编译：陈秋歌）
  • 大小: 86.7 KB
  • 大小: 38.1 KB
  • 大小: 63.5 KB
  • 大小: 47.1 KB
来自: CSDN
8
顶
0
踩
评论 共 4 条 请登录后发表评论
4 楼 加瓦人生 2013-11-26 19:04
这里是中国。
3 楼 baukh789 2013-11-25 12:47
还是很有道理的。F模型，的确是这样
2 楼 Thomas.Chen 2013-11-25 10:38
对，这里是中国..........
1 楼 cjb7625 2013-11-23 20:15
这里是中国。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • [博文共赏] 打造网站最佳浏览体验：四大UX设计原则

    http://www.iteye.com/news/28483-4-essential-ux-rules-taught-by-eye-tracking-research

  • 四大UX设计原则，打造网站最佳浏览体验

    Web设计者正在借助大量工具，以使自己设计的网站给用户带来最可能好的用户体验。最好的办法之一是在设计中充分利用现有的科研成果，以最大化用户的满意度。 眼动追踪研究为设计者提供了各种设计蓝图，以引导他们...

  • 程序员必读书单 1.0

    为了打造用户满意的软件产品，程序员应当掌握一定的界面设计知识和交互设计知识（是的，这些工作应该交给UI和UX，但如果你想独自打造一个产品呢？）； 专业程序员应当对自己进行职业规划，并熟悉程序员求职面试的...

  • 成为编程大牛很简单，把这些书看个八成就OK

    知识（是的，这些工作应该交给UI和UX，但如果你想独自打造一个产品呢？）； 专业程序员应当对自己进行 职业规划 ，并熟悉程序员 求职面试 的流程，以便在职业道路上越走越远； 软件开发是一项需要不断学习的技能...

  • 程序员必读书单

    这本书——它面向编程初学者，既包含C++教程，也包含大量程序设计原则。它不但是我读过最好的C++入门书，也是我读过最好的编程入门书。 比较有趣的是， C++程序设计原理与实践 直到全书过半都没有出现指针，我想这...

  • 七：程序员必读书单

    这本书——它面向编程初学者，既包含C++教程，也包含大量程序设计原则。它不但是我读过最好的C++入门书，也是我读过最好的编程入门书。 比较有趣的是， C++程序设计原理与实践 直到全书过半都没有出现指针，我想这...

  • 推荐：程序员必读书单

    这本书——它面向编程初学者，既包含C++教程，也包含大量程序设计原则。它不但是我读过最好的C++入门书，也是我读过最好的编程入门书。 比较有趣的是， C++程序设计原理与实践 直到全书过半都没有出现指针，我想...

  • 转：程序员必读书单 1.0

     知识（是的，这些工作应该交给UI和UX，但如果你想独自打造一个产品呢？）； 专业程序员应当对自己进行  职业规划  ，并熟悉程序员  求职面试  的流程，以便在职业道路上越走越远； 软件开发是一项需要不断学习...

  • 研发周报：成为一名PHP专家其实并不难

    四大UX设计原则，打造网站最佳浏览体验 Web设计者正在借助大量工具，以使自己设计的网站给用户带来最可能好的用户体验。最好的办法之一是在设计中充分利用现有的科研成果，以最大化用户的满意度。 眼动...

  • 这些书你读过一多半，你就是编程大牛！

    知识（是的，这些工作应该交给UI和UX，但如果你想独自打造一个产品呢？）； 专业程序员应当对自己进行 职业规划 ，并熟悉程序员 求职面试 的流程，以便在职业道路上越走越远； 软件开发是一项需要不断学习的技能...

  • 《Web全栈工程师的自我修养》读书笔记

    设计四大原则 ： 对齐、对比、距离和重复 。虽然我基本没有设计经验，只会一些基本的Photoshop操作，但我理解了这几个原则，每次看到好的设计和差的设计时，都能有所感悟。如果不理解，可能我只能用“上流”“高端”...

  • 算法学习之路和程序员(技术)学习必读书籍

    这个神奇的网站，里面有很多质量不错的书评，于是我就把评价很高而且看上去不那么吓人的计算机书籍都买了下来——事实证明豆瓣要比这些”学长”或是”大神”靠谱的多得多。 数据结构与算法分析——C语言描述 ...

  • 书籍选择和推荐

     知识（是的，这些工作应该交给UI和UX，但如果你想独自打造一个产品呢？）； 专业程序员应当对自己进行  职业规划  ，并熟悉程序员  求职面试  的流程，以便在职业道路上越走越远； 软件开发是一项需要不断学习...

  • 【转】程序员必读书单

    为了打造用户满意的软件产品，程序员应当掌握一定的界面设计知识和交互设计知识（是的，这些工作应该交给UI和UX，但如果你想独自打造一个产品呢？）； 专业程序员应当对自己进行职业规划，并熟悉程序员求职面试的...

  • 外加热强制循环蒸发器装配图（CAD).rar

    外加热强制循环蒸发器装配图（CAD).rar

  • 数控车床纵向进给系统设计.zip

    数控车床纵向进给系统设计.zip

  • vault_side_off_ominous.png

    j

  • 爬虫 bangumi名称和评论数

    爬虫 bangumi名称和评论数

  • 基于SpringBoot的垃圾分类回收系统(源码+数据库+万字文档)526

    基于SpringBoot的垃圾分类回收系统，系统包含两种角色：管理员、用户主要功能如下。 【用户功能】 首页：浏览垃圾分类回收系统信息。 个人中心：管理个人信息，查看历史记录和订单状态。 运输管理：查看运输信息，垃圾回收的时间和地点。 公告管理：阅读系统发布的相关通知和公告。 垃圾回收管理：查看垃圾回收的信息，回收类型和进度。 垃圾出库申请管理：提交和查看垃圾出库申请的状态。 【管理员功能】 首页：查看垃圾分类回收系统。 个人中心：管理个人信息。 管理员管理：审核和管理注册管理员用户的信息。 用户管理：审核和管理注册用户的信息。 运输管理：监管和管理系统中的运输信息。 公告管理：发布、编辑和删除系统的通知和公告。 垃圾回收管理：监管和管理垃圾回收的信息。 垃圾出库申请管理：审批和管理用户提交的垃圾出库申请。 基础数据管理：管理系统的基础数据，运输类型、公告类型和垃圾回收类型。 二、项目技术 编程语言：Java 数据库：MySQL 项目管理工具：Maven 前端技术：Vue 后端技术：SpringBoot 三、运行环境 操作系统：Windows、macOS都可以 JDK版本：JDK1.8以上都可以 开发工具：IDEA、Ecplise、Myecplise都可以 数据库: MySQL5.7以上都可以 Maven：任意版本都可以

  • 这篇文章是台湾大学（NTU）计算机科学与信息工程系（CSIE）2021年秋季学期算法设计与分析课程的第一份作业（Homework#1）的具体要求和题目描述 以下是主要内容的总结：

    内容概要：本文档是台湾大学计算机科学与信息工程系2021年秋季学期《算法设计与分析》课程的第一次作业（Homework#1）。作业包含四道编程题和三道手写题，旨在考察学生对算法设计和分析的理解与应用能力。编程题涉及汉诺塔、数组计算、矩形点对、糖果分配等问题；手写题涵盖渐近符号证明、递归方程求解、幽灵腿游戏优化、不公平的卢卡斯问题等。文档详细描述了每个问题的具体要求、输入输出格式、测试用例以及评分标准。此外，还提供了编程技巧和注意事项，如避免延迟提交、正确引用资料、处理大输入文件等。 适合人群：具备一定编程基础的本科生或研究生，特别是修读过或正在修读算法设计与分析相关课程的学生。 使用场景及目标：①帮助学生巩固课堂所学的算法理论知识；②通过实际编程练习提高解决复杂问题的能力；③为后续更深入的学习和研究打下坚实的基础。 其他说明：此作业强调团队合作和个人独立思考相结合的重要性，鼓励学生在讨论后用自己的语言表达解决方案，并注明参考资料。对于编程题，特别提醒学生注意输入文件可能较大，建议采取适当的优化措施以确保程序运行效率。

Global site tag (gtag.js) - Google Analytics