layer加载的页面偶尔出现空白_Layer-Cake 模式的设计

人们通常不会阅读网页,应用程序甚至文章或文本段落中的每个单词。相反,他们经常进行浏览 -因为他们在许多网站上的经验告诉他们,浏览可以用更少的时间和精力来提供几乎相同的价值(即信息量)。

页面的可视化布局结构方式在人们浏览内容方面起着重要作用。如果页面布局允许用户快速识别与他们的需求相关的基本信息,则用户将节省大量精力,并且能够快速实现其目标。但是,另一方面,如果布局不强调重要信息,则人们可能会错过它。

内容浏览Layer-Cake模式:Layer-Cake浏览模式主要由页面标题和副标题上固定的内容组成,中间的(正文)文本上偶尔会有刻意的固定内容。在眼动图或凝视图中,此图案看起来像一组水平条纹和它们之间的空白,类似于层蛋糕(先将蛋糕放在水平面上,然后是糖霜,然后是蛋糕,依此类推)

Layer-Cake模式可以确保用户会发现他们的要寻找的信息。如下图所示,显示了一个Layer-Cake浏览模式的示例:大多数注视都在文章的子标题上。凝视图显示了从研究参与者在Techcrunch.com上阅读文章时收集到的眼球运动。他们在当前页面上浏览,以标题在视觉上不同于正文的方式完成了工作,然后阅读了下面的文字。然后,他浏览了更多的子标题- 公交系统具有创新所需要的成功-内置的大规模用户群,并且存在期望差距。描述性副标题使用户可以轻松跳过相关正文中不那么有趣的内容。

f5a2d5280dce1f0f6105c509facdc6f6.png

如何创建有效的内容浏览

有效的内容浏览是为了帮助用户能快速的获取目标信息,在内容展示时:

  1. 设置标题或者对于重点信息进行标记,能让用户轻松的识别。
  2. 标题能正确的总结与之相关的文本部分。
  3. 有效的查看标题所对应的文本内容(标题是对哪部分文本的总结)。
  4. 段落和段落之间增加间距,每个标题和所对应的内容之间增加间距。
  5. 同类型标题的颜色统一,在视觉呈现上一致,方便用户能快速识别标题。

如下图展示的正文页内容,左侧是当前web网页文本信息,右侧是对当前文本信息进行重点标记,左右两图对比后不难发现,右边的信息用户更容易发现重点。

fb035e8b59053263eb5f9eaffa44ed10.png

在设计标题和重要信息提示时,通过视觉文字效果可以使得标题突出:

  • 标题的颜色和文本区分。
  • 使用较大的字体。
  • 使用不同的字体。
  • 使用加粗、阴影、下划线(当使用下划线时强调标题也是一个超链接)。
  • 增加图标,以上所有效果混合。

在使用的时候,也需要注意,不要使内容标题比正文大的离谱,或者颜色的差异过大,导致用户错把标题当成促销或者广告,从而忽略该部分。同时也需要注意正文文本,副标题,页面标题和链接应如何设计区分。

5cb77b1c1fd546273ba86de7c166f8a7.png

www.edwardjones.com上的页面以较细微的方式区分了标题和正文,但仍使副标题易于浏览和查看。正文和标题使用相同的字体(ProximaNova),但标题为粗体且比正文大。这些视觉处理足以使小标题看起来与正文不同。

有效标题的内容准则

由正文和标题组成的内容展示也反映了页面的信息结构。标题使浏览文本页面变得容易,而全局导航使浏览站点变得容易。好的标题可以帮助用户确定某个部分是否值得阅读,好的分类名称可以帮助人们理解应该导航到哪里以完成任务。

内容作者和编辑者需要通过以下方式为用户提供清晰的内容层次结构:

  • 确定页面内容的优先级和顺序:组织文本,使读者觉得有意义。
  • 简明扼要:删除多余的内容。
  • 分块:将内容分成大块,如段落或列表。将相关内容放在一起。

完成这些操作后,请细化标题中使用的词,以便在浏览时提供最多的信息。制作副标题:

  • 描述本节中的所有主题,并且仅描述本节中的主题:使用包含与标题相关的所有正文,以便用户了解本节中可用的所有内容。
  • 描述的只是部分的主题:要简洁,只描述了出现在与标题相关的正文概念和词语。不要使标题太宽泛以至于它似乎包含的内容超过了正文中的内容
  • 以一些最重要的词语开头:带有信息的词会立即给人们提供标题的重点。
  • 可以理解:使用清晰的语言,以便用户在浏览标题时可以快速理解其含义。

对所有页面进行分块和标记,而不仅仅是文本

了解用户浏览网页的方式,我们知道具有系统布局的页面易于浏览;无序和不可预测的页面则不易浏览。当布局包含一个或多个文本列时,标题允许用户快速确定哪个文本与哪个标题一起使用。然而,当页面使用卡片或其他不规则格式时,重要的是使用格式塔接近原则来表示哪些标题或标签与哪些正文或一起使用。

混合内容的页面仍然可以按照与文本布局相同的原则进行浏览。明确地:

1、确定喜欢的内容并放在一起。

2、视觉上区分内容块。使用以下命令执行此操作:

  • 一种网格或其它图形系统,包括每个块周围的边框或彩色背景(如卡片、横幅)。
  • 确保每个模块块之间适当的间距。

3、适当时,用清晰的标题标记每个内容块。

当页面以这种方式设计时,用户通常会浏览一系列的小蛋糕图案,寻找指示内容部分内容内容的文本。

330402e61f2c4d31908c06fd1f0f4259.png

当图像上方和下方的文本片段看起来与该图像的距离相等时,用户很难判断哪些内容与图像相关。在《芝加哥论坛报》网站一页的凝视图中,用户先看一张图片(上图),然后看下面的文字,再看下面不相关的图片,然后回溯到中间的文字和上面的图片。回溯表明,用户需要修正几次,以决定与哪个图像的文本。

用户浏览web页面时的Layer-Cake模式与F模式

与F模式(通常在从文本中提取正确信息时不是很有效)不同,Layer-Cake模式可以引导用户找到页面上的正确位置(前提是标题有意义并且代表下面的内容)。一旦人们确定了感兴趣的部分,他们就可以仔细阅读。

d6a279d04d765dab518f647e3e2ab59a.png
6db73e116d52664ea6c6055d6607caf8.png

www.vogue.com时尚网没有任何副标题,这使得浏览很困难。以这种方式排列的文本通常以F模式浏览。

结论

分块内容和指定清晰的、描述性的标题,这些标题从页面上的其他文本和内容中脱颖而出,从而成倍地提高了内容的可用性,因为它们支持Layer-Cake浏览模式,而层饼Layer-Cake浏览模式不同于其相对的F模式,通过允许用户快速识别与其任务最相关的内容,提高用户的效率。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/498427.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

未来30年的科技发展趋势

来源:DeepTech深科技、全球创新论坛 概要:20项最值得关注的科技发展趋势,带你通向未来。 美国公布了一份长达35页的《2016-2045年新兴科技趋势报告》。该报告是在美国过去五年内由政府机构、咨询机构、智囊团、科研机构等发表的32份科技趋势相…

[机器人-3]:开源MIT Min cheetah机械狗设计(三):嵌入式硬件设计

目录 概述: 1、硬件组成 2、通信速率 3、通信协议 4、mbedOS 概述: 以1条腿进行设计,其它腿也一样: 腿部硬件组成 1、硬件组成 1)UP board计算机板卡(Linux OS): 腿部控制器…

AlphaGo Zero的伟大与局限——ResNet作者、旷视研究院院长孙剑深度评述

来源:Megvii旷视科技 概要:2017年10月19日,Deepmind 团队发布强化版的 AlphaGo Zero,该版本的 AlphaGo 实现了在 AI 发展中非常有意义的一步——“无师自通”,这也让去年败在未升级版本 AlphaGo Master 下的中国棋手柯…

《人类简史》作者:应对 AI 革命,要打造新的经济、社会和教育体系

来源:36氪 概要:正在进行的人工智能革命将改变几乎所有的工作,给社会和经济的发展带来机遇和挑战。一些人认为,人工智能将把人类赶出就业市场,创造一个新的“无用的阶层”;另一些人则认为,自动化…

全球厂商已向自动驾驶投入800亿美元 依然群龙无首 | 厚势

来源: 腾讯科技 概要:近日发表的一份权威研究报告指出,全球厂商已经在自动驾驶领域投资 800 亿美元,但是迄今为止,仍然没有一家明显处于领先优势的厂商。 自动驾驶和电动车成为当下科技行业两大热点之一,几…

promise的状态值_什么是Promise,Promise的三种状态

什么是Promise对象:Js中进行异步编程的新的解决方案,用于表示一个异步操作的最终完成 (或失败), 及其结果值.。语法上:promise是一个构造函数简单来说,promise对象用来封装一个异步操作并可以获取其结果语法:new Promi…

埃森哲报告:2017年数字化浪潮下的医疗行业五大趋势

来源:AI掘金志 概要:日前,埃森哲发布了《2017年数字化健康技术展望》报告,分析了数字化浪潮下的医疗护理行业的实际落地情况和发展前景,主要围绕着AI、生态系统建设、新型医疗人才挖掘、新的监督法规等五个方面进行解…

人类如何从不同角度识别物体?你需要对「小样本学习」有所了解

来源:转载自公众号「雷克世界」微信号:ROBO_AI 编译:嗯~阿童木呀、多啦A亮 概要:在视觉层次结构的较低层次,不变性使你可以识别矩形或线条,即使它是倾斜、旋转或缩放的;而在更高的层次上&#x…

摩尔定律已死?GPU会取代CPU的位置吗?

来源:全球人工智能 概要:CPU和GPU之所以大不相同,是由于其设计目标的不同,它们分别针对了两种不同的应用场景。 京举办的NVIDIA GTC China会议中,无论是AI智能运算,还是服务器数据中心、智能城市&#xff…

mysql 终端模拟_mysql客户端模拟脏读、幻读和可重复读

如果操作一下时报出错误:在数据库中执行 SET GLOBAL BINLOG_FORMAT mixed;执行后可通过SELECT * FROM information_schema.GLOBAL_VARIABLES WHERE VARIABLE_NAME ‘BINLOG_FORMAT’ ;进行查看。通过客户端选择可用数据库:use db_test(模拟数据库)以下…

Nature Human Behavior:大脑对不公平的反应有助预测抑郁症

来源:生物帮、神经科技 概要:过去的研究已经表明,财富分配不均,即经济不平等,可能会促进抑郁症等精神疾病的增加。但是,这背后的机制却不为人知。 2017年10月2日,国际学术权威刊物自然出版集团旗…

这几家公司有个梦想:开发AI操作系统,让外行也成为人工智能大师

来源:科技行者 概要:未来几年人工智能会如何发展?除了阿尔法狗令人叹为观止的表现,人工智能确实也正在改变整个行业。但有一点我们是需要注意的,有必要让AI从总体上变得更加易于使用。 严格的说,Scot Barto…

mysql耦合_内聚与耦合

简单理解一下内聚和耦合。什么是模块模块就是从逻辑上将系统分解为更细微的部分,分而治之。复杂问题因为复杂性的问题,比较难解决,但是可以将复杂问题拆解为若干简单问题,逐个击破地解决这些简单问题,最后实现解决复杂…

Google CEO Sundar Pichai :“谷歌最大的威胁就是自身的成功”

作者:Dude 概要:10月9日,低调的皮柴哥接受了英国卫报的访问,在访谈期间,他分享了谷歌在人工智能上发展,也表达了对谷歌近年来发展的隐忧。 10月9日,低调的皮柴哥接受了英国卫报的访问&#xff0…

国防科技大学教授:殷建平——计算机科学理论的过去、现在与未来

来源:图灵人工智能殷建平 教授,博士生导师,国防科学技术大学计算机系主任。研究方向有:模式识别与人工智能、网络算法与信息安全。享受国务院政府特殊津贴。2015年被评为“万人计划”国家级教学名师。2009年被评为“全国优秀教师”…

《自然》杂志:关于人类未来的工作,有三个最紧迫的问题

来源:36氪 概要:机器学习会淘汰工人吗?零工经济(Gig Economy)会增加对工人的剥削吗?技能的差距能够弥补吗? 机器学习会淘汰工人吗?零工经济(Gig Economy)会增…

有史以来影响世界的颠覆性技术 | 未来的高附加值颠覆性技术产业

来源:DeepTech深科技(ID:mit-tr) 概要:没有工具,人类就是一个脆弱的物种,没有任何人种可以手无寸铁面对自然。技术伴随人类成长,从野蛮走向文明。人类历史就是一部技术史。 人类发展…

一文详解脑科学研究与产业发展方向

来源:神经科技、脑计划 概要:大脑是人体最复杂的器官,破译大脑运转密码、揭开生命之谜,是令无数科学家殚精竭虑的艰难课题。脑科学已成为21世纪最前沿的研究领域,尤其与信息科学进行交叉研究已成为脑科学发展的一个重要…

ef生成mysql字段注释_EFcore+MySql 数据迁移的时候,怎么给表结构加注释?

前言:CodeFirst运用的场景比较少,不代表CodeFirst不好,也不能和DbFirst去作比较,本来就是两个东西。吐槽:MySql.Data.EntityFrameworkCore 作为Oracle官方维护的组件,居然对EF很多API不支持或者无效&#x…

10秒一部电影,全球首个5G数据连接完成

作者:李赓 概要:2017年10月17日、也就是上周二,高通在香港高调宣布——其面向移动终端的5G调制解调器芯片组,骁龙X50 5G调制解调器芯片组完成了全球首个5G连接,同时实现了千兆级速率并在28GHz毫米波频段上的数据连接。…