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

浏览器标签改变了一切

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

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

内部链接与外部链接

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

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

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

• 内部链接
• 外部链接

后退按钮疲劳

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

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

减缓用户流量

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

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

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

网站过度运作

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

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

不准确的分析

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

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

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

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

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

 

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

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

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

平台一致性不够好

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

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

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

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

按钮位置很重要

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

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

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

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

减少视觉注视

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

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

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

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

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

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

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

映射到预期的按钮功能

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

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

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

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

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

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

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

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

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

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

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

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

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

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

结论

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

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

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

想象一下，一位用户准备注册你的网站。他们会进入你的表单并输入信息。你对齐字段标签的方式会影响用户填写表单的速度。

您想为用户提供轻松便捷的体验，还是想给他们带来麻烦？如果您想让他们的体验快速便捷，请 在表单字段上使用顶部对齐的标签。

顶部对齐的标签比左右对齐的标签填写起来更快更容易。这是因为顶部对齐的标签只需要一半的视觉注视点。 顶部对齐的标签还允许用户沿着一个视觉方向向下移动表单。而左右对齐的标签则需要两个视觉方向才能填写。

顶部对齐标签的唯一缺点是它们会使表单变长。不过，现在用户滚动页面的频率更高了，所以这不是问题。通过减少字段之间的空白，您可以缩短表单的长度。您还可以将表单拆分成多个页面，以缩短表单的长度。

顶部对齐和左右对齐标签之间的区别显而易见。顶部对齐的标签更容易被用户看到，也更容易填写表单。虽然顶部对齐的标签可能会使表单变长，但用户填写表单所需的时间和精力更少，这对用户更有利。

如果顶部对齐的标签能够为用户带来更好的表单体验，那么它值得采用。设计师应该更多地考虑字段标签的对齐方式。这可能会影响用户填写表单还是放弃表单。

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

网络无障碍访问不仅惠及色盲用户，也惠及诵读困难用户。诵读困难是一种学习障碍，会影响人们阅读、书写和拼写的流畅性或准确性[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 设计思路应先放飞概念探索多种可能，如将泡泡圈视为独立 APP 进行设计，尝试简约风格、气泡形通知栏、胶囊形头像、实心图标等创新设计，再结合实际落实到产品，比如因开发资源和屏幕显示限制去掉渐变和弥散投影、回归分割线和返回按钮，同时要明确设计与艺术的区别，设计需围绕客观问题解决，概念稿后要提取可用点推动落地，注重用户习惯和跨平台适配，像用爱奇艺 Logo 代替文字返回按钮。

UI 设计师若想让前端实现设计稿的像素级还原，需在出稿时注意：将可复用控件规范化并输出文档，避免相同控件样式或交互不一致；把控颜色（规范色值、将 Sketch 颜色配置改为 sRGB）和间距（设定文本行高规范、考虑控件间距的盒子模型）；遵守盒子模型，将界面布局盒子化，辅助前端准确定位元素，如此才能通过各部门协同合作实现优质项目落地。

UI 设计中的构图与排版需将文字、图片及色彩等要素有组织组合，构图通过黑林错觉等心理学原理和居中、九宫格等九大技巧构建和谐布局，排版依据格式塔原理的接近性、连续性等法则及亲密性、对齐等原则，合理运用对比、重复等手法，同时结合界面投影等设计形式，以提升页面用户体验及相关性。

UI 设计中的情感化设计是设计师基于满足产品功能性和易用性后，设计出满足用户更高层级需求的创意表达工具，其目的是赋予产品情感以增加用户粘性、树立品牌形象以增强用户认知、引导用户操作以达成设计目的，可从本能层次（视觉）、行为层次（交互）和反思层次（思维）融入情感化设计，如视觉层次用独特 IP 形象、风格明确的规范化设计和拟人化动作，交互层次遵循操作前可预知等原则，思维层次明确服务者定位等，如此才能设计出以人为本的产品。

仪表板 UI 设计需注重一致性，在颜色、字体、元素位置等方面保持各设备统一，优先传达重要信息，采用卡片布局、将关键内容放中心路线、用 18 像素内字体和独特颜色突出，设计要便于用户定制，如拖放交互、修改字段、换主题等，图表选择条形图等简单类型，避免 3D，图标选熟悉的，字体不超两种并建立视觉层次，色彩遵循心理学且不过度使用，利用对比度，同时要了解用户偏好，才能设计出实用美观的仪表板。