首页

导航 为什么外部链接应该在新标签页中打开

杰睿 设计思维

大多数设计师在设计网站时,并不太关注链接。只要链接有效,能将用户引导至正确的页面,就万事大吉了。但良好的用户体验远不止于此。有些链接应该在新的浏览器标签页中打开,而有些链接则应该在原浏览器标签页中打开。设计师务必了解两者的区别。

浏览器标签改变了一切

过去,许多人都不喜欢在新窗口中打开链接。新窗口对用户来说很难管理。但浏览器标签页的推出改变了这一现状。现在,您无需打开新窗口,而是可以在新标签页中打开链接。最大的区别在于,浏览器标签页比浏览器窗口更易于用户管理。

当新窗口打开时,它会覆盖用户之前的窗口。用户会感到困惑,不知道如何返回。但是,当新标签页打开时,用户仍然可以在顶部看到之前的标签页。用户很容易理解如何在标签页之间切换。 事实上,大多数用户在浏览时都会打开多个标签页。浏览器已经发生了变化,因此设计师定位链接的方式也应该随之改变。

内部链接与外部链接

将用户引导至同一网站其他页面的链接为内部链接。内部链接不应在新的浏览器标签页中打开,而应在用户当前所在的标签页中打开。

在同一个网站打开新标签页既多余又令人困惑。如果是同一个网站,但页面不同,用户会使用导航菜单返回或根据需要导航到其他地方。让用户停留在同一个标​​签页中,有助于他们更好地理解网站的导航流程。

然而,外部链接应该在新标签页中打开。这些链接会将用户引导至不同的网站。许多设计师会犯在同一个标​​签页中打开外部链接的错误。这会带来许多问题,设计师需要了解。

后退按钮疲劳

在同一个标​​签页中打开外部链接,会给用户带来“返回键疲劳”。每次用户访问外部网站时,他们都必须点击“返回键”才能返回到你的网站。如果他们决定点击其他网站上的链接,他们就必须点击更多次“返回键”才能返回到你的网站。这对用户来说,是很多不必要的操作。

在新标签页中打开外部链接,用户可以尽情浏览其他网站,无需反复点击“返回”按钮返回到您的网站。他们只需点击您网站所在的标签页即可。无需反复点击“返回”按钮,也无需长时间等待。

减缓用户流量

在同一标签页中打开的外部链接也会降低用户浏览速度。许多浏览搜索引擎或链接分享网站的用户都在寻找信息。他们通常会点击页面上的多个链接,从不同的来源获取信息。

在新标签页中打开外部链接,用户可以一次性浏览页面,点击所有相关链接,然后开始消化和筛选信息。用户无需反复返回源页面继续浏览更多链接,从而减少浏览流程的中断。

当用户确实想要返回源页面时,这很容易做到,因为标签页会一直打开,直到用户手动关闭它。用户无需多次点击返回按钮并等待源页面重新加载。他们只需点击标签页即可轻松返回。

网站过度运作

在同一个标​​签页中打开外部链接不仅会让用户负担过重,也会让您的网站负担过重。每次用户返回您的网站时,它都会占用您的网站资源来加载页面。

在新标签页中打开外部链接可以节省大量资源。如果用户想返回您的网站,他们无需再次加载页面。他们只需点击您的网站标签即可。这既快捷又简单,而且不占用任何带宽。他们无需点击返回键或打开上下文菜单即可返回。

不准确的分析

很多时候,用户会点击文章段落中的外部链接,以便更好地理解文章内容。这并不意味着他们想在未读完文章的情况下离开您的网站。然而,您的网站分析结果却并非如此。如果您的外部链接在同一个标​​签页中打开,则表明用户离开您网站的速度比实际速度要快。

这是因为,当外部链接在同一个标​​签页中打开时,用户会完全离开您的网站。然而,在新标签页中打开的外部链接在用户访问外部网站时,仍会保持您的网站标签页打开。用户在您网站上的停留时间会在他们手动退出网站标签页时结束,而不是在他们访问外部链接时结束。

用户点击外部链接并不意味着他们想要离开您的网站。您不应将外部链接点击视为网站退出。唯一明确的退出方式是用户点击标签页上的关闭按钮。

外部链接影响您的网站和用户

将用户引导至不同网站的链接应在新标签页中打开。将用户引导至同一网站不同页面的链接应在同一个标​​签页中打开。如果您在与您的网站相同的标签页中打开外部链接,这会对您和您的用户造成影响。您不仅会遇到不准确的分析结果,导致网站运行更费力,还会使用户的工作负担加重、速度变慢。在当今链接主导网络的世界里,确保链接以正确的方式打开几乎与链接到正确的页面同样重要。

 

 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

为什么对话框中的“确定”按钮放在右侧效果最佳

杰睿 设计思维

设计师经常会思考对话框中“确定”和“取消”按钮应该放在哪里。“确定”按钮是完成任务的主要操作。

“取消”按钮是辅助操作,可以让用户返回到原始屏幕而不完成任务。根据它们的功能,最佳的放置顺序是什么?“确定”按钮应该放在“取消”按钮之前还是之后?

平台一致性不够好

许多人认为遵循平台惯例是解决问题的答案。虽然这看起来像是解决问题的办法,但实际上并非如此。它没有回答哪种布局对用户更有利以及原因。仅仅为了保持一致性而遵循平台惯例的建议根本不够好,只会让设计师徒劳无功。

“一致性”是设计师们常用的词。它也是人们不深入思考用户面临的设计问题的常见借口。如果连设计惯例存在的意义都不知道,遵循它又有什么意义呢?

如果某种设计惯例对用户有害怎么办?设计师是否应该为了保持一致性而盲目遵循它?是否应该因为设计师想要将平台设计一致性作为解决所有问题的答案而将糟糕的设计实践延续下去?

如今,某些平台设计惯例被广泛使用,因为它们对用户有用。但这里的重点是,平台设计的一致性永远不应成为设计师做某事的唯一理由。理解为什么应该以某种方式设计用户界面而不是另一种方式是关键。

按钮位置很重要

有人可能会认为,通过增加操作按钮的视觉重量清晰的标签使其更加突出,比其位置更重要。虽然操作按钮的视觉重量和标签是需要考虑的重要设计方面,但并非唯一的方面。

只关注一个设计方面而忽略其他方面,是粗心大意的设计师的表现。一个一丝不苟的设计师会思考每个设计方面如何影响用户。而主要操作和次要操作的布局,正是设计师最难搞清楚的。这就是为什么“确定”/“取消”按钮的争论在设计师中如此普遍。

为什么“确定”按钮放在右侧效果最佳

当你克服了平台惯例的争论后,你会质疑哪种布局效果最好。你可以通过分析设计如何影响用户来解决这个问题。

减少视觉注视

有必要验证设计师们常见的假设是否正确。一些设计师认为,将主要操作放在左侧次要操作之前对用户更有利,因为左侧操作更靠近用户,因此点击时间更短。

这很有道理,但你不能忽视一个事实:用户在选择操作之前会查看所有选项。这意味着大多数用户不会盲目点击主要操作按钮,而不查看旁边的次要操作按钮。

他们会先看到左侧的主要操作,然后再看右侧的次要操作。之后,他们会将目光移回主要操作并点击它。这会在多个方向上形成总共三个视觉注视点。

左侧有“确定”按钮,视觉注视点更多,并流向多个方向

使用右侧的“确定”按钮,视觉注视点减少,并流向一个方向

将其与位于对话框右侧、次要操作位于左侧的按钮进行比较。用户的视线首先停留在次要操作上,然后移至主要操作并点击按钮。这在一个方向上产生了总共两次视觉注视,从而为用户提供了更快的视觉流。

用户只会在每个按钮上注视一次,最终停留在主要操作按钮上。将主要操作按钮放在左侧或许能让用户更容易触及,但从用户的思维过程和视觉注视角度来看,将主要操作按钮放在对话框右侧实际上会更快。

映射到预期的按钮功能

当用户点击辅助操作按钮时,他们希望应用程序不执行任何操作,并返回到原始屏幕。因此,“取消”按钮的功能类似于“返回”按钮。

当用户点击主要操作按钮时,他们期望应用程序执行按钮指示的操作,并将他们带到下一个屏幕。因此,“确定”按钮的功能类似于“下一步”按钮。将次要操作按钮放在左侧,将主要操作按钮放在右侧,可以映射用户期望的“上一步”和“下一步”按钮的功能。

这与分页按钮的放置方式类似。将用户带到下一页的按钮位于右侧,将用户带回上一页的按钮位于左侧。这种按钮放置方式之所以有效,是因为它与用户从左到右的阅读和导航方向相呼应,其中右侧是前进方向,左侧是后退方向。

“确定”可让用户前进到下一个屏幕,“取消”可让用户返回到原始屏幕

对话框中的“确定”和“取消”按钮应遵循类似的交互模式,因为它们的功能类似于分页按钮。不仅如此,左右方向的模式也符合西方用户习惯。将主要操作放在右侧,将次要操作放在左侧,将使对话框按钮更容易、更直观地被用户理解。

为用户提供更高效的任务流程

对话框右下角的按钮更容易被用户点击,因为它遵循了古腾堡图表。在古腾堡图表中,右下角是终端区域。这是用户完成浏览后视线最终停留的区域。

将按钮放置在终端区域,可以让用户最后看到需要执行的主要操作。这不仅改善了视觉流程,也优化了任务流程。用户在浏览时不会跳过主要操作按钮。他们的目光会在浏览过程中直接落在按钮上,因此可以立即点击。

扫描对话框并采取行动既快速又简单,因为用户的眼睛停留在主要操作按钮上。

按钮放在角落里还是将它们放在一起?

设计师经常思考的另一个问题是,他们应该把按钮放在角落里还是把它们放在一起。当你把主要操作和次要操作放在对话框的角落里时,它们可以很好地映射到左右导航方向。然而,由于“确定”和“取消”按钮不是导航按钮,因此没有必要遵循方向映射。有时,这样做弊大于利。

按钮之间较大的视觉分离使得操作比较困难,并将一个操作与另一个操作隔离开来

如果应用程序即将执行用户无法撤消的关键操作,那么让用户能够同时看到“取消”按钮和“确定”按钮就显得尤为重要。在这种情况下,“取消”按钮的功能可能类似于“上一步”按钮,但它更重要的是,它充当了安全按钮,可以防止任何更改。

将“取消”按钮放在最左上角的危险在于,由于两个按钮之间的视觉距离过大,用户可能会忽略它。将“取消”按钮与“确定”按钮放在一起,可以让用户更容易地在一次注视中看到并比较这两个操作,从而选择最佳操作。

结论

当用户需要阅读重要信息或执行重要操作时,设计师通常会使用对话框。按钮的放置顺序会影响用户选择的操作。如果按钮的放置顺序清晰高效,可以防止用户选择错误的操作并犯错。

按钮的位置很重要,但也要记住注意按钮的视觉重量和标签。所有这些设计方面都会在用户浏览对话框时发挥作用。既然您理解了为什么“确定”按钮放在右侧效果最佳,那么您就有比平台一致性更好的参考依据了。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

 

6 个令人惊讶的、伤害诵读困难患者的不良习惯

杰睿 设计思维

网络无障碍访问不仅惠及色盲用户,也惠及诵读困难用户。诵读困难是一种学习障碍,会影响人们阅读、书写和拼写的流畅性或准确性[10]。

作为设计师,我们可以通过避免那些会损害阅读障碍用户的不良设计实践,帮助他们更好地阅读文本。从他们的视角看待事物,可以让我们更好地理解无障碍设计的重要性。

患有阅读障碍的人在阅读文本时,有时会出现视觉扭曲的效果 [5]。这些效果的程度因人而异,但它们会使阅读文本变得更加困难。

以下六种不良习惯可能会给阅读障碍者带来视觉扭曲效果。这些不良习惯也会给非阅读障碍者带来阅读困难。但它们对阅读障碍者的影响更为严重。

河流效应

诵读困难者有时可能会在阅读的文本中看到“河流效应”[1]。这是指连续的文本行中出现较大的空白。它看起来就像一条空白的河流顺着页面上的文字流淌而下。有一些不良习惯会导致“河流效应”的发生。

1. 对齐文本

对齐文本不仅对有阅读障碍的用户来说难以阅读,对没有阅读障碍的用户来说也同样如此。这是因为它会在字母和单词之间产生较大且不均匀的空白 [8]。当这些空白彼此重叠时,就会出现一条令人分心的空白河 [4]。

这可能会导致患有诵读困难症的读者在阅读时反复忘记读到哪里 [6]。你可以使用左对齐文本,而不是两端对齐的段落 [2],来避免产生“河流效应”。

2. 句号后双倍行距

我们大多数人都有在句末句号后加双倍行距的习惯。这种做法起源于打字时代。那时的打字机使用的是等宽字体。因此,人们认为在句号后加双倍行距会使句子的结尾更加清晰 [9]。

但句号后单倍行距就足够了,因为大多数网站都使用等距字体。句号后双倍行距会在文本中形成“河流”,使用户难以找到句子的结尾[9]。在网络上,单倍行距更胜一筹。

模糊效果

诵读困难者可能出现的另一种视觉扭曲效应是模糊效应 [1]。诵读困难者阅读时,会看到文本模糊、旋转或混杂在一起 [5]。这会严重影响诵读困难者的阅读能力,使他们感到疲劳 [7]。可以通过避免一些不良习惯来减轻这种影响。

3.纯白背景上纯黑文字

你现在阅读的文字不是纯黑色 (#000000),背景也不是纯白色 (#FFFFFF),这是有原因的。这是因为许多阅读障碍者对高对比度颜色产生的亮度很敏感。这会导致文字旋转或模糊不清 [3]。

为了避免这种情况,请使用灰白色作为背景,例如浅灰色或棕褐色。您也可以使用深灰色代替纯黑色作为文本,以进一步减少眩光。

4. 长段连续的段落

长段不间断的段落文本不仅对阅读障碍者来说难以阅读,对非阅读障碍者来说也同样如此。阅读障碍者很容易在阅读长段落时迷失方向 [1]。

这就是为什么最好使用表达单一观点的短段落 [2]。这是因为阅读障碍者比非阅读障碍者需要在观点之间有更多停顿 [6]。将文本分解为每段一个观点,无论阅读障碍者还是非阅读障碍者,都能更轻松地阅读。

冲刷效应

有时,诵读困难者会经历“洗出效应”。当这种情况发生时,文字会显得模糊不清 [5]。这会使阅读速度变慢,并导致诵读困难者因为看不清单词而猜测单词是什么。为了减轻这种影响,在处理文本时应避免两种不良做法。

5.衬线字体

衬线字体在字母笔画的末端有钩。它们看起来很有装饰性,但可能会给患有阅读障碍的用户带来阅读障碍。衬线字体往往会遮挡字母的形状,使字母显得杂乱无章[1]。

但无衬线字体可以让诵读困难者更清晰地看清字母的形状。这是因为没有了钩状结构,字母之间的间距就更大了,更容易辨认。[6]

6.斜体文本

斜体有时用于突出显示文本。但不应使用斜体文本,因为它们会使字母难以阅读。与非斜体字体相比,斜体字母的线条呈锯齿状。这些字母还会倾斜,使患有阅读障碍的用户难以辨认单词 [6]。

当文字较小时,斜体文本更加难以辨认[3]。更好的突出显示方法是使用粗体文本,因为字母更清晰,对比度也更好。

人人可及

许多用户患有阅读障碍,难以阅读文本。您应该通过纠正这些不良做法,让您的网站对所有人都易于访问。您已经了解了阅读障碍用户的网络体验。在视觉扭曲的情况下阅读时,获取信息并不容易。每个人都有获取信息的权利,无论他们是否患有阅读障碍。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

UI 设计中按钮用圆角还是直角?

涛涛 设计思维

UI 设计中按钮用圆角还是直角需综合考量,圆角在网格布局中更易辨识,如 TurboTax 仪表板中圆角卡片比尖角更引人注目,全圆形按钮在 Spotify 中因突出交互引导成功,但全圆形按钮可能被误认标签、嵌套选项触摸区域小、不适合堆叠,而直角按钮在表格等堆叠布局中更合适,此外圆角传达现代、简约等感觉,像 Chrome 浏览器更新为全圆形地址栏,总之设计需以鼓励用户交互、减少干扰为目标,而非单纯选择圆角或直角。

一次糟糕的导航设计,怎样毁掉了整个用户体验

杰睿 设计思维

“导航系统是用户在信息环境中的方向感,没有它,一切设计都是迷宫。” ——《信息架构:超越Web设计》
 
糟糕导航,真能毁掉体验! 我最近帮一个客户诊断他们的网站:视觉很好看,动效很花哨,但用户却频繁抱怨“找不到内容”。结果一查,核心问题就在导航设计
同级栏目命名不统一,用户分不清差别;
二级菜单隐藏太深,点击才能发现;
不同页面导航结构不一致,导致迷路;
移动端和PC端导航布局完全不同,切换设备时用户无所适从。
 
书中有一句话特别扎心:“导航应该是信息环境中一致的标识系统,而不是隐藏信息的迷雾。”
这正好点出了他们的问题本质:导航不是装饰,而是用户认知路径的支撑。
 
 一次糟糕的导航,怎么毁掉体验?
用户需要多次点击才能找到目标内容 → 增加流失率
不一致的导航让用户记忆成本倍增 → 挫败感提升
重要页面被埋没,关键转化流程被中断 → 直接影响业务数据
比如这个网站有“产品中心”和“解决方案”,实际内容高度重叠,用户分不清该点哪一个;搜索结果页没有回到主导航的按钮,用户只能强制返回首页重来。
书里也强调:“不合逻辑的导航结构会导致用户迷失方向,并迅速放弃探索。”
 
如何快速自检你的导航?
打开你的网站,让一个没用过的人用导航找5个特定内容;
观察他们是否能在三次点击内到达;
如果他们频繁回到首页或说“不知道在哪里”,说明你的导航需要优化。

47ae6436-363d-40c4-9af1-b8abb353d43f (1).png

47ae6436-363d-40c4-9af1-b8abb353d43f.png

1280X1280 (1).PNG

1280X1280.PNG

39671bbb-2cbf-44fe-88b0-bf8626da4a1c.png

20250630-211953.png

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
 

交互设计是什么?有什么用?

涛涛 交互设计及用户体验

交互设计( interaction design, IXD ),从字面上来说,交互即为相互作用相互影响,设计即为理解与传达。在互联网产品中,交互设计对用户体验产生很大的影响。本文将围绕交互设计进行分析,与你分享。

每个公司都需要自己的产品体验报告

涛涛 交互设计及用户体验

当产品体验报告不再是 PPT 里的静态文档,而成为实时迭代的决策引擎,传统五要素模型正经历三维进化:

Tesla Model 3 用户体验设计测评总结

涛涛 交互设计及用户体验

Tesla Model 3 在智能化与极简设计上表现突出,但导航与语音功能的短板、安全隐患(无 HUD)仍需优化,物理按键的取舍是未来迭代的关键争议点。

为什么圆角看起来更舒服

杰睿 设计思维

如今,设计师们对圆角的运用如此广泛,以至于它更像是一种行业标准,而非一种设计潮流。圆角不仅出现在软件用户界面中,也出现在硬件产品设计中。那么,圆角究竟为何如此受欢迎呢?它确实看起来很吸引人,但其背后的意义远不止于此。
圆角看起来不太明亮
任何人都能欣赏圆角的美感,但并非每个人都能解释这种美感究竟从何而来。答案就在你的眼睛里。
一些专家表示,圆角矩形比锐角矩形更容易被眼睛识别,因为它们在视觉处理过程中所需的认知努力更少。中央凹处理圆形物体的速度最快。处理边缘需要大脑中更多的“神经图像工具”[1]。因此,圆角矩形更容易被识别,因为它们看起来比普通矩形更接近圆形。
DM_20250703172854_003.PNG
巴罗神经学研究所对角线进行的科学研究发现,“角线的感知显著性与角线的角度呈线性变化。锐角比平角产生更强的虚幻显著性”[2]。换句话说,角线越锐利,看起来就越亮。而角线越亮,看起来就越难被看到。

DM_20250703172854_001.PNG

DM_20250703172854_002.GIF

 

哪个物体更容易观察?
我们习惯于圆角
我们之所以对圆角情有独钟,另一个解释是,圆角更符合我们在现实世界中使用日常物品的方式 [3]。圆角随处可见。作为孩子,我们很快就知道尖角容易伤人,圆角更安全。这就是为什么当孩子玩球时,大多数父母并不感到惊慌。
但如果孩子玩叉子,父母就会把叉子拿走,因为担心孩子会弄伤自己。这会引发神经科学中所谓的“回避反应”,即对锋利边缘的“回避反应”。因此,我们倾向于“避开锋利的边缘,因为它们在自然界中可能构成威胁”[4]。
 
您会把哪个物品托付给您的孩子?
圆角使信息更容易处理
圆角对于地图和图表来说更有效,因为它们能让我们的视线轻松地跟随线条,“因为它更符合头部和眼睛的自然运动”[5]。尖角会使你的视线偏离线条的路径,所以当线条改变方向时,你会感到突然的停顿。但有了圆角,线条会引导你的视线绕过每个拐角,继续沿着路径流畅地移动。
 
哪一个图表更容易让你的眼睛看清?
圆角也能成为有效的内容容器。这是因为圆角指向矩形的中心。这使得焦点集中在矩形内部的内容上。当两个矩形相邻时,圆角还能轻松区分哪条边属于哪个矩形。
尖角指向外侧,会降低矩形内部内容的视觉焦点。当两个矩形相邻时,尖角也使得难以区分矩形的两边。这是因为矩形的每条边都是直线。圆角矩形的边是独一无二的,因为这些线条会向其所属的矩形弯曲。
 
圆角的意义远不止于视觉所能感知的。圆角不仅更容易被眼睛识别,还能让信息更容易被理解。圆角本身就很吸引人,这一点毋庸置疑。但这些额外的因素让圆角更具吸引力。当你和客户谈论圆角时,你就能表达出更多内容,而不仅仅是“好看”。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档