这篇文章主要分享了科学的 UI 设计流程以及如何提升 UI 视觉效果，结合学生作业案例，解答了设计中常见的问题，内容通俗易懂

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

浏览器标签改变了一切

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

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

内部链接与外部链接

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

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

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

• 内部链接
• 外部链接

后退按钮疲劳

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

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

减缓用户流量

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

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

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

网站过度运作

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

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

不准确的分析

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

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

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

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

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

 

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

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

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

平台一致性不够好

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

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

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

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

按钮位置很重要

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

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

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

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

减少视觉注视

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

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

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

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

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

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

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

映射到预期的按钮功能

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

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

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

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

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

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

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

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

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

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

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

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

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

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

结论

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

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

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

UI 设计思路应先放飞概念探索多种可能，如将泡泡圈视为独立 APP 进行设计，尝试简约风格、气泡形通知栏、胶囊形头像、实心图标等创新设计，再结合实际落实到产品，比如因开发资源和屏幕显示限制去掉渐变和弥散投影、回归分割线和返回按钮，同时要明确设计与艺术的区别，设计需围绕客观问题解决，概念稿后要提取可用点推动落地，注重用户习惯和跨平台适配，像用爱奇艺 Logo 代替文字返回按钮。

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

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

UI 设计需从产品经理、交互设计师、用户和自我这 4 个角度思考：像产品经理一样关注用户群体、相关竞品、主要商业模式；像交互设计师一样考虑用户体验、使用场景、信息优先级、转场、使用习惯；像用户一样思考产品能否解决问题、设计是否美观、使用是否顺畅；像自己一样保持设计观，不盲目接受错误设计。如此才能做出符合用户需求且有自己韵味的设计。