layer框架介绍(Layer-Cake模式的设计)
layer框架介绍(Layer-Cake模式的设计)
2024-09-29 06:01:39  作者:哎呦好讨厌  网址:https://m.xinb2b.cn/life/qph298860.html

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

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

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

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


如何创建有效的内容浏览

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

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

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


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

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

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


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

有效标题的内容准则

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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



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

结论

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

  • 常熟有没有一日游的地方(坐上常熟游字号)
  • 2024-09-29坐上常熟游字号江南无所有,聊赠一枝春近日,南湖湿地公园的梅花层层叠叠、缀满枝头、缤纷绚烂、美出了圈为了方便市民踏春赏花,3月1日起游3路公交班线恢复运营啦~游3路——出发!去南湖湿地公园工作日途经路段尚湖风景区(始。
  • 心火旺吃什么食物(心火旺可以多吃这些食物)
  • 2024-09-29心火旺可以多吃这些食物苦瓜可清心火,含各种矿物质和维生素,能明目解毒,消除暑热莲心具有清心去热、止血、止渴等功效,可清心火、清热解毒,还可治疗便秘绿豆属寒性,能清热解毒,制成绿豆汤,是夏季清心火的佳品西瓜含有大量水分,多吃。
  • 冬季美容护理(冬季美容护理的小常识有哪些)
  • 2024-09-29冬季美容护理的小常识有哪些应避免热水浴在冬天洗热水澡是很舒服的,但这样会洗掉皮肤的天然油脂,让皮肤干燥因此,温水更好添加一点沐浴润肤剂洗澡,像是凡士林洗澡前半小时使用精油按摩,有助于洗澡后流失皮肤水分要使用润肤霜选择一个良好的。
  • 高考填志愿能问一下老师吗(又到一年高考时)
  • 2024-09-29又到一年高考时微绛县·投稿/爆料加微信:66350359又到一年高考时文/吉青云夏意正浓微风轻拂树梢发出沙沙声,美妙的天籁之音让我的思绪回到了很久以前那时候仿佛已经梦境般遥远,那时候是我的青春少年,那时候根本没有传。
  • 千里姻缘一线牵珠联璧合(千里姻缘一线牵)
  • 2024-09-29千里姻缘一线牵“民主”世界的大好事,“国际社会”的大喜事!佩洛西千里迢迢来到乌克兰,见到了心怡已久的泽连斯基导演和演员终于走到了一起,牵手成功,他们面露微笑晒晒刚领的证件给观众们看,让我们衷心的祝福他们吧​​!两人。
  • 上海辣酱的做法(八宝辣酱家常制作方法分享)
  • 2024-09-29八宝辣酱家常制作方法分享主料:虾仁100克、豆干100克、鸡胸肉200克、熟花生米50克、土豆200克辅料:油30毫升、生抽2汤匙、盐3克、老抽1茶匙、料酒1汤匙、生粉1汤匙、蒜蓉辣椒酱1汤匙、白糖1茶匙、葱花少许少许做法:。
  • 牡丹亭故事梗概和主题思想(牡丹亭故事梗概和主题思想是什么)
  • 2024-09-29牡丹亭故事梗概和主题思想是什么《牡丹亭》故事梗概:南安太守杜宝的女儿杜丽娘,私出游园,触景生情,困乏后梦中与岭南书生柳梦梅幽会从此一病不起,怀春而死柳生进京赴试,借宿观中他在园内拾得杜丽娘殉葬的自画像,情有所钟,终于和画中人的阴灵。
  • 古代大臣求见皇上怎么说(皇帝去大臣家讨水)
  • 2024-09-29皇帝去大臣家讨水常言道“伴君如伴虎”在皇权至上的古代封建社会当中,皇帝掌握着一个国家最高的权力,往往皇帝的一句话,就可以把他人置之死地,但是同样皇帝的一句话也可以让人飞黄腾达在清朝雍正年间就发生过这样一个故事雍正微服。
  • 关于汉字的短笑话10字(十个汉字小笑话)
  • 2024-09-29十个汉字小笑话1、何处有慈悲小沙弥问正在打坐的老僧:“师父,何处有慈悲?”老僧抬起右手,指了指门外,闭目不发一言小沙弥顿悟了:原来世间众生万物,无论是达官贵人,贩夫走卒,还是花鸟虫鱼,一草一木,处处皆有慈悲啊!老僧。
  • 滴滴加入的条件是什么?怎么注册下载滴滴车主app?
  • 2024-09-29滴滴加入的条件是什么?怎么注册下载滴滴车主app?最近很多私家车车主都在发愁,滴滴加入的条件是什么?今天小编专门给大家介绍怎么注册下载滴滴车主app,让你清楚滴滴车主招募条件目前,最方便的注册滴滴司机端下载的方法就是,用手机微信扫一扫文章中的海报二维。
  • 木耳的泡发方法(木耳怎么泡)
  • 2024-09-29木耳怎么泡把木耳放入保鲜盒内,加入温水,不要用热水,水温以不烫手为宜,水量到保鲜盒的2/3处,干木耳的量要控制在保鲜盒的三分之一,以便于木耳涨发往木耳中加入1勺盐把木耳浸入到水中,搅匀,盖上盖子,放置20分钟泡。