网站交互界面_网站交互界面是什么

网站交互界面_网站交互界面是什么

接下来，我将为大家解答有关网站交互界面的问题，希望我的回答对大家有所帮助。现在，我们就开始探讨一下网站交互界面的话题吧。

文章目录列表:

1.UI设计师怎样才能做出更受用户欢迎的交互界面
2.怎么自学ui交互界面设计
3.什么是UI界面交互设计,交互设计具体指什么?
4.怎么做好网站页面交互性
5.UI界面和UX交互设计之间是什么区别？
6.关于页面打开的交互方式，这篇堪称_全面的总结！

UI设计师怎样才能做出更受用户欢迎的交互界面

一、尊重用户习惯

客户实际操作有关网页页面的全过程时会培养一定的习惯性，因而绝大多数客户常有干固逻辑思维。那麼针对室内设计师来讲，还是必须保证重视信息，重视客户的本人挑选，尽量让客户的实际操作更为便捷、方便快捷。

二、减少干扰

大家在看一个页面时候都会发觉，常常有无关痛痒的内容弹出来，这样的事情是会在挺大水平上危害客户体验的。因而室内设计师必须留意降低页面原素的不确定性要素，便捷客户迅速寻找自身要想的。

三、快速响应

目前客户的时间和细心全是较为短的，因而当你的网页页面没有响应较慢，那客户应当就非常容易挑选别的的网页页面。因而室内设计师应当加速客户载入的响应时间，可以防止从远程控制取信息的，就尽量减少。

四、界面友好

界面的友好程度越高，用户操作的体验也就会有所提升。因此设计师需要注意除了根据需求提供视觉解决方案以外，在设计的过程中适当地加入一些小细节使交互界面更加友好是设计师的职责所在。

综上所述，什么样的交互界面用户更喜欢呢?那就是符合用户审美和用户习惯的界面，只有你站在用户的层面上去来接他们的需求，才能做出来绝大多数大喜欢的作品。

怎么自学ui交互界面设计

ui设计需要的基础就是一些简单的美术基础和平面设计基础，要求也不算高，你这个情况应该没问题，编程不太需要。一般流程是这样的，大致5个阶段，PS，Illustrator，DW，InDesign都会用到。

_阶段UI用户设计基础（UI行业发展及UI设计师职业规划，美术基础，平面设计基础，图形与创意设计，网页设计基础，交互式网站），软件：Photoshop、Illustrator

第二阶段移动界面设计（图标创意思路与方法，图标的创作设计，主题图标设计，Ios系统Android系统Windowsphone系统，UI设计实训课程）

第三阶段交互类（UCD，交互设计_技术）

第四阶段流程设计（界面开发对接，流程管理，移动媒体综合开发实训）

第五阶段综合项目实训及就业阶段（根据所学内容，选择一种移动_（IOS/Android/Winphone），软件界面，WUI类型设计，完成初稿设计。依据项目初期确定的需求进行验收，并签署验收报告）下面是该公司的简介，希望对你有帮助！

什么是UI界面交互设计,交互设计具体指什么?

交互设计如今已是一个十分常见的问题，但许多设计者和开发者仍不知道它的具体意义。今天，北大青鸟ui培训老师将从不同于以往的方面：深入讲解能使你的网站拥有良好交互性的用户界面和设计原则。

首先，何为交互设计IxD

交互设计(即IxD)是一块发展迅速的新领域，源于一些体现设计问题的研究，后来被专业设计者鉴别和接受。

交互设计促进人与环境的交流，这里我们指的是人和网站的交流，交互设计师只要考虑用户和电脑的交互，毋须像UX设计者那样思考软件或系统所有涉及用户的方面。你也许在不同大学里听说过人机交互度——这些度基本是在IxD领域中培养的。

这样的设计师要做什么?

一个交互设计师会思考谁是产品的目标用户以及谁会使用它。用户研究者或是信息架构师会提供这些信息。在这些研究的基础上，一个交互设计师为了用户与软件交流，要耗费很长时间但要尽快地创作出这种令人称奇的交互方式。

设计师必须识别出关键交互并且画出线框图,

所以要不停地画草图。有的设计师会直接画出来，有的设计师会用软件来辅助，还有其他一些设计师会或单独或合作地创作界面。

交互设计(IxD)不断地展现出新的交互方式，因为用户总是期望网站出现新的事物。但交互设计师需要意识到这些特性会如何影响用户，然后在许多想法中选择真正要实现的和可以放一段时间的。

下面我们将会看到一些驱动交互设计的概念。

目标驱动设计

尽管IxD不需要做，但为了获得_好的设计反馈，用户研究查至关重要。用户使用软件时，一般在心里有一些目标，你的应用程序应当很好地满足这些目标。为了成功地结合设计和功能，用户研究恰恰是_重要的元素。

这是如此的重要，以至于许多用户研究员也能找到做交互设计师的工作，就是因为他们在分析用于软件的人类行为模式方面的技能。

简单化

人们不知道用户界面是什么。事实上他们也不关心。他们不知道有人在网站的背后策划着他们所见到的一切。他们只知道他们需要一个简单的网站。他们要一个易用的系统，加载/响应速度快，不要让用户思考并且不给用户伤痛的理由。

情景和模式

我们使用的一些产品通常功能设计的很明确，因此每一个人都知道怎么使用它们。拿剪刀做例子吧。一个三岁的小孩都知道怎么使用它，两个手指伸到两个环中，只有一个活动方式能使用它。没有比这更简单的了。你的网站应该向一把剪刀一样简单易用。

为什此处使用“情景”这个单词呢?因为这个词表达了一个网站或者系统背后一些列的功能。

关于模式，用户界面应当由一系列用户熟知的组件组成，如果用户想提交一个表单，他们首先会找到提交按钮。这个按钮就是个常见元素，设计者没必要在接受一个新项目时每次都重复早轮子。

有些人会说了仿照现有的模式，不重新造轮子会让人感觉没有创新性。在易用性没得到保障时讨论创新简直就是白痴。记住，易用性和创新性是两码事。

如果你想创新，你仍然需要了解已知的模式。但是，如果你追求高易用性，没有人鼓励你去重复造轮子，因为用户需要时间去适应你的轮子。

创建一个高易用的系统需要交互设计师对约定，情景和web易用性有较深的理解。

现在你了解了一些交互设计的原则，接下来让我们看看一个伟大的交互设计是如何影响用户的。

访客定位

交互设计师需要了解他们的设计面向哪些用户，因此他们能通过用户给产品做好定位。

页面上显示出用户停留的地方，这样的体验不会让用户在浏览时感到困惑。用户也能知道如何从一个页面跳转到另一个想去的页面。让用户知道当前所在的位置这是非常重要的，不要让他们陷入死胡同中。当搜索没有查询出结果，没有告诉用户下一步操作的选择，这样的交互体验是很糟糕的。

持续对话

交互设计把大量精力专注于给予用户持续的反馈。告诉用户他们做的是对还是错，即使在无意识的层面上，这也是一个受用户欢迎的元素。

你只须在用户完成动作的时候，告诉他们已经成功了。

当你在亚马逊上买一件东西时，你会在浏览器上和你的邮箱里获得一份确认书。当你通过联系表单提交邮件时，你会在页面中获得一份确认书。

这使得交互不仅仅停留于网站的浏览和特性使用，更是把交互带到了一个新的层面：它帮助用户更好地理解他们当前的状态，并把疑惑和问题减到_少，同时也去除了用户的挫败感。

思考工作流

IxD还要考虑工作流。如果你有一张注册表单，用户用它提交信息是会有什么事发生?页面会刷新吗，会跳转到首页吗，会显示确认信息吗，会跳转到登陆页面，或者同时跳转到上两个页面吗?

It’sabouthavingmanychoicesandchoosingtheonethatwillfityourusers

expectanciesbest.提及的所有元素都是网站工作流的一部分。每次交互后应该紧跟下一个符合逻辑的步骤，并且与你网站之前所创造的体验相符。

视觉层次

为了让用户照你的意思操作，你可以使用视觉层次来帮助他们。你可以使用布局、元素大小和颜色组合达到视觉_的效果，以此来引导用户的双眼。

你也可以使用视觉层次使用户找到他们想要的东西。你想租车吗?保证你能使用视觉层次来引导用户来到“租赁”页面。

良好的线框化工具

绘制草稿和线框图是如此重要，因此我愿意向你展示一些好用的工具，这样你就能马上开始交互设计工作了。

Mockingbird

Mockingbird是一个基于web的应用，在这个网站上用户可以创建、连接、预览和分享站点或应用的框图。它的界面简洁友好，用户可以拖放元素，调整大小，甚至可以通过一个链接与同事方便共享。

因为Mockingbird是一个基于Web的应用程序，这意味着你从任何一台计算机无处不在地创建和修改你的构思。

LovelyCharts

LovelyCharts是一个_的图表应用，它允许用户创建流程图、组织架构图、站点地图和流程框图。

该应用程序的主要特色功能是依据你所绘制的内容进行推测建议_这有助于绘图过程的简化，返回老版本和撤消更改也很容易。

Mockflow

MockFlow也是一个很好的Web应用程序，它有干净简单的组织界面和一系列广泛的功能特性。

使用起来也使用拖放，有从图表到菜单，广告和下拉菜单等内置组件。你可以上传自己的或选择网站提供的通用素材，所以构建框图的过程是很快的。

SimpleDiagrams

_后，北大青鸟ui培训老师提醒大家别忘了用户测试的重要性，记住创新和可用性通常会走向不通的方向。当创造神奇的交互界面的时候不断创新，专注于如何让使用它的人更加方便。

将这些牢记在心里，你会成为一个伟大的网站或应用程序交互设计师。

怎么做好网站页面交互性

1、注意网站的链接、按钮和LOGO?

一个网站的链接和按钮都应该符合用户的使用习惯。目前链接文字通用的表现方式是字色蓝色并带下划线的文字。而按钮应当是有一定的立体感，看上去就是一个_的按钮，一看就知道是可以点击的。而LOGO是与其它网站链接以及让其它网站链接的标志和门户。在通常情况下，通过点击LOGO可以返回到网站的首页。所以，LOGO即是一个网站的名片，LOGO更是网站的灵魂所在，除此之外它还具有一个重要的导航功能。网站的LOGO作为一个重要的网页元素，当鼠标移上去或者划过等事件，应该有相关的信息响应。?

2、网站页面加载进度?

网站的每个链接，包括网站的首页打开都需要时间加载的，只是某些网站功能较为简单，加载起来很快是而无需担心页面延迟。但某些网站的加载往往不能一次性完成，例如淘宝这种大型购物_，页面有很多的商品，加载需要一定时间，这个时候是需要一定的响应式的，所以页面更应该给出提示，否则让用户等待太久是很不友好的做法。?

事实上，有很多的因素会影响到网页初次加载的响应时间：HTML文件的文档的大小；页面中的各种元素例如代码、、flash、音_、视_等元素文档的大小；HTML页面的复杂程度（浏览器可以很快的展现简单的页面）；用户反应的快慢也会影响浏览速度；被网页页面调用的其他内容所在的服务器的访问速度；网站的域名和外部域名的DNS的解析速度也会影响网页的加载速度；用户所使用的计算机的各种性能（如果计算机的资源消耗过多，或者配置过低，浏览器也会变得响应缓慢）；服务器的配置的高低。?

除了上述因素会导致网站响应的快慢以外，一些人为的因素及一些硬件也会影响网页加载的速度。例如：服务器端、客户端和网速。服务器端主要包括：服务器的地域，是否双线，处理能力等。?

3、网页中应隐藏不常用的操作?

网站中不经常使用的操作可以不用突显出来，将其弱化或隐藏。例如，网站中有某个弹出层是几乎不用到的，为了不对用户造成干扰，我可以在当鼠标经过的时候才出现这个弹出层。这个是基于上文提到的不干扰用户注意力角度出发的。比如，在新浪微博中，微博的屏幕功能只有在鼠标移到对应某条微博的右上角并单击鼠标的时候才会弹出操作提示框，否则是看不到屏蔽操作的，这个就是一个隐藏操作的具体体现。?

4、尽量减少弹出信息?

为什么要尽量减少弹出信息呢，这里举一个例子来说明一下？当你正在看一部精彩的**或看一本精彩的书，这时接到一个无实质内容的电话，你肯定会非常恼火。网页设计也是一样，如果能在当前页面显示完成就尽量在当前页面加载完成。对于那些弹出信息，例如弹出层、跳转页面、模态窗口等都影响用户体验。?

5、网站对用户需要引导-网站导航?

一个好的网站是能够让用户全面浏览，所以网站导航十分重要。每个用户在浏览页面时往往都是不确定性的、无规律的，同时用户更不喜欢选择。所以，网站需要时刻让用户看清当前的位置。如果浏览者不能快速、便捷地找到它，他们就很有可能去别的网站。例如，很多博客网站除了首页导航之外，还将分类作为第二导航放在页面的边栏。此外，网站的页脚也很重要，因为有部分用户浏览时接触到的是网站的底部，这个时候网站的页脚可以方便的让用户找到当前的站点位置。?

一直以来，网页界面设计的研究主要针对于视觉方面，而设计的内容、流程和原则虚拟了实物产品的设计，基本上没有太大的改变。随着信息科技的发展和人机交互技术的成熟，交互界面的设计已经成长为一个独立的行业。本文阐述了基于增强现实的交互界面概念，分析了其_特点，总结归纳交互界面设计的流程与原则。交互界面设计是一个全新而又复杂的研究领域，本文的研究仅仅是交互界面设计的冰山一角，如何将交互界面设计的理论特性分析清楚、理解透彻，还得依靠同行们的不懈努力和大量实践，使用户和网络的信息交流更加简便、_和人性化。?

UI界面和UX交互设计之间是什么区别？

现在越来越多公司都在提倡UX体验设计，那么到底什么是UX体验设计？和UI有哪些区别？

感觉这个词语熟悉又陌生，那么今天我和大家分享下我的理解，仅代表我个人的观点和大家互相交流探讨，如有不对的地方欢迎多交流。

一、什么是UI？什么是UX？

1. 什么是UI？

简单理解就是界面+交互。

什么属于UI呢？

这个我想大家都已经很熟悉，就是我们每天使用的产品的界面外观设计，无论是视觉效果，还是品牌个性，还是页面的交互设计，都属于UI范围内。

很多同学会问，交互设计不是属于交互么？怎么划分在UI了？

其实，UI是用户界面设计的统称。随着时代的发展，纯UI的时代已经过去了，今天的UI设计师，除了掌握视觉设计还需要具备一定交互设计能力。

从百科中对于UI的定义也是如此：负责产品的人机交互、操作逻辑、界面视觉的整体设计。从字面大家也可以看出-用户界面，除了界面还包含用户和界面之间的交互。

如果你觉得不好理解，一个简单粗暴的理解方式就是UI=交互+视觉。

2. 什么是UX？

UX我们可以把它理解为用户任务流程设计，今天我们用户注册我们一个新的产品，需要那几个步骤？

——用户通过朋友圈看见我们的商品广告，通过那几步到达购买页，_后转化付费，这些我理解为UX，

引用百度百科的资料UX核心是用户，体验指用户在使用产品以及与产品发生交互时出现的主观感受和需求满足。

UX设计师研究和评估一个系统的用户体验，关注该系统的易用性、价值体现、实用性、_性等。

举个例子：我们去银行的ATM提款机上取钱，看到的界面和每一步操作数据UI设计。但是如何存钱？如何更改密码？如何转账汇款？

——这些流程的设计属于UX设计，他关注这个产品是否好用和易用。

UX我更多理解为用户的行为表达，UX设计是在用户直接或者使用服务时候感受到的体验，比如反馈，和任务指引的整体设计。

比如之前我们去星巴克买咖啡时候，如果遇见人很多，我们就必须排着很长的队。但是今天，我们去店里人很多，直接可以手机上操作，手机上排号，大大提升了效率。

那么这个体验的的优化就是UX工作，它可以改变我们生活的体验，类似这样的UX改变生活的案例还有很多。比如越来越多餐厅也可以通过微信排号，无须店门口等待，只需要关注他们公众号，到时候会有排号提醒。

3. 解决问题的视角不同

UI和UX大家本质都是在解决用户问题，只不过站位不同视角不同，UI更多是解决用户_印象，这个设计好不好看，交互逻辑合理不合理，结构清晰不清晰，页面功能层次表达是否合理。

而UX更多是定义了产品目标流程，UX更多解决产品的深度，而UI是产品的宽度，两者都很重要。

互联网行业发展了这么多年，用户体验已经融入到了我们生活中点点滴滴，UI和UX尽管本质不同，UI更加具有视觉性，UX更多是逻辑系统性。

但是他们一般都属于一个团队，只不过大家运用不同的技能，不用的工具，不同的问题处理方式——但是_终都是把我们产品体验做好。

二、UI与UX的区别有哪些？

1. UX让界面更好用，UI让界面更好看

这句话很好理解，UI设计师的价值是让我们的界面好看符合用户审美趋势，同时交互上符合用户逻辑，符合产品想传递的功能优先级，没有大的交互原则问题。

UX是让整个流程更好用，更好引导用户完成任务，达成我们的商业目标。这中间两者使用的技能也不相同。

2. UX让用户实现目标，UI让界面提升品牌感

UX帮产品实现产品目标，很好理解，今天任何的产品都需要有商业目标，无论是刚上线的新产品，还是老产品都有用户目标。

拿618，双11这些大型活动来说：很多电商都各种营销，那他们的商业目标是什么？

——是GMV成交额，所以UX的目标是怎么让GMV_化，那么这中间就涉及到：用户入口、用户路径和链路的完整设计，每一个环节的漏损都应该考虑在里面。

那么UI就是用户在使用产品过程中，心情是否感觉愉悦，没有任何的使用负担，体验时候特别友好。

同时界面和交互时候不会感觉冗余，同时用户界面的表达有温度，如上图google的情感化表达一样，UI就是建立用户和商业这件的情感品牌桥梁。

3. UX核心目标引导用户完成任务，UI不是

另外一个不一样的点是，UX核心是引导用户完成用户目标和任务。

比如火车票软件，虽然它的交互视觉很糟糕，但是相对比这个更重要是如何帮助用户完成目标，UX的优先级高于UI,如果产品无法满足用户价值，对用户没有意义，那么UI做的再好其实意义也不大。

历史上有很多昙花一现的产品都是如此，比如早期的Path、Paper等产品就是UI视觉交互很都很好，但是在商业层面以及UX上没有那么_，没有很好的用户价值，_终页难躲过消失的命运。

4. 交付的成果不一样

UI和UX的交付产出也有很大的不一样，UX的输出包括UX体验报告、功能定义、功能规划、项目进度、概念设计、需求评估、市场研究、数据研究、可用性测试、用户体验地图、流程图、交互原型图等等。

这是大概一些产物，当然还包括一些通用的比如汇报、提案等。

UI的交付大家都比较清楚，包括视觉和交互、视觉设计、品牌设计、动效设计、组件设计和设计语言等等，当然方案汇报提案也是一样的。

5. 职责不同

UX设计师还一个重要角色就是策略制定和内容设定，任何产品内容是核心。

拿电商来说：人、货、场，货就是内容非常的主要，这个内容如何和用户互动，同时被用户接受，和用户互动，这个中间UX设计师扮演着非常重要的角色。

一般来说，UI和UX都会用到这些工具

1.?Mason

现如今，视觉稿（Mockup）和原型（Prototype）是网页和 _ 设计过程中_常用的方法。两种方式都很有效，不过也都可能会在时间和花销上对整个项目产生压力，影响团队和项目的整体推进，尤其是在时间和精力都非常有限而项目又非常复杂的情况下。

Mason 提供了一个更好的解决方案，它让你无需设计线框图、原型和视觉稿，而直接拿现成的组件来编辑和设计，并且确保_终输出的产品既具备功能，也是像素_的，_后通过 Mason 的_进行部署，甚至你都不需要有代码编写的经验。

Mason 的设计方法看起来很激进，但是实际上非常的易用。无论是调整还是维护，Mason 都能确保控件和元素都很容易处理。在 Mason 中修改、发布，然后就能正常使用。无需亲手编写代码，诸如注册、登录等各种常见的功能都能够正常输出使用。

这款工具并不会限制你将网站投放到特定的_或者托管环境下，你可以在你_熟悉的服务器或者服务商那边部署。这可以大幅度节省管理费和时间，并且你会发现团队协作更加_了。

2.?Overflow

设计师讲述故事_有效的办法之一，是将故事中的节点连在一起，将用户历程线性地呈现出来。这样的方式会让访客更好的理解他们所看到的内容，同时能够更加专注于细节的呈现，并且构建有效的反馈机制。

作为_上_个为设计师量身定制的用户流程图工具，Overflow 可以帮助设计师更好地讲述故事。它为设计师提供了一种全新的方式来更好的呈现作品，讲述故事，以交互式的流程同用户进行沟通，吸引用户的注意力。

Overflow 是一款跨_的工具，可以与目前_的设计工具无缝地集成起来，允许设计师在同一个_上完成设计、展示、共享和打印他们的用户流程。

3.?UXPin

UXPin 可能是目前对于设计团队来说_理想的快速原型工具，尤其是当产品的 UX 设计和研发高度依赖快速反馈循环机制的时候。UXPin 可以让设计团队在向开发交付原型之前，充分地进行设计、共享和测试。

开发人员所需要的数据，实际上在每个项目设计完成之时，就会自动生成。所以，在将设计交付给开发人员之前，甚至可以使用检测工具，验证一下产品的部署是否和设计元素相互匹配。

UXPin 还提供一个完整的设计系统解决方案，帮助你保持整个产品的 UI 元素的一致性。而每个产品的 UI 组件都可以使用一段代码记录下来，因此可以更加轻松快速的扩展产品的功能。

4.?Creately

UI/UX 设计当然不仅仅是线框图和视觉稿，它是动态的，系统化的，而这也是 Creately 这款工具的价值所在。这款图标工具适合生成工作流程，支持不同的图表类型，包括流程图、思维导图、UML 图标、线框图等。它所提供的图表功能和协同工作的功能，可以帮助设计师完成一半以上的工作。

使用 Creately 来创建图表，可以轻松创建出足够漂亮的图表，其中配备的1000多个专业的设计图表模板，可以快速地完成各式各样的 UX 设计项目。

5.?PowerMockup

有许多 UX 设计师会使用 PowerPoint 来构建交互式原型，有了 PowerMockup 之后，你再也不需要寻找其他的工具来辅助你的工作了，它就可以帮你创建_可共享的交互式原型。

在构建原型的时候，只需要从 PowerMockup 不断增长的资源库找到对应的形状或者设计元素，拖拽到 PowerPoint 当中，然后进行设计即可。为了实现互动，你所需要调用的也无非是 PowerPoint 当中的幻灯片和动画功能，很简单。

6.?Visual Inspector

Visual Inspector 让设计师、开发者和负责维护的人员能够实时地在网站中检查和解决各种 UI 问题，并且同其他的工作人员随时共享信息。

这款工具不需要你懂得代码，只需要几秒钟就可以启用 UI 工具，并且几乎可以任何类型的网站（使用 HTML 代码，或者 WordPress 系统的）进行协同工作。这款工具不是免费的，终身授权的版本只需要付费49美元即可。

7.?Fluid UI

Fluid UI 是一款可以用来设计线框图、原型图和视觉稿的综合性工具，它还为项目经理和分布式设计团队提供了非常完善的协作功能。它拥有非常全面的组件库，横跨桌面端、iOS 和 Android 等主流的、必须的_。

8.摹客

这款国产的工具快速易用，Sketch / PS / XD / Figma / Axure / Mockplus设计稿一键上传 ， 设计评审讨论 ， 自动标注一键生成，手动标注自由发挥 。?

关于页面打开的交互方式，这篇堪称_全面的总结！

本篇文章分别从页面打开方式的类型、当前页打开&新开页面、弹出框三方面对页面链接打开方式进行了探讨，给大家提出一些意见以供参考。

页面打开方式作为链接产品路径的基础，在设计的过程中，或多或少都会遇到选择的困扰，尤其是产品功能复杂，层级较多时，如何让用户按照自己的意愿清晰的浏览信息，保持操作连贯性，是值得体验设计仔细思考与分析的。

近期在所负责的设计项目中，团队对链接操作的打开方式产生了分歧，借此机会整理了一些案例与资料，就这个问题进行分析探讨，也给遇到同样问题的同行一些参考意见。

一、页面打开方式的类型

网页中可操作的链接，主要有按钮、icon 以及文字链接，设计中常用的打开方式则主要有以下三种：

1. 当前页打开

点击操作链接后，在当前的浏览器页面中进行内容显示与操作。

极创课堂 页面打开 交互方式 _全面的总结！交互设计

2. 新开页面

点击操作链接后，在浏览器中新开一个独立的标签页面，进行内容显示与操作。

3. 弹出框

点击操作链接后，在当前的浏览器页面中，弹出一个小尺寸的对话框，进行内容显示与操作。

二、当前页打开 & 新开页面

首先来说说_争议的新开页面&当前页打开。在 HTML语言中，target目标有「target=_blank」和「target=_self」两种属性，分别代表「新窗口打开」和「当前窗口打开」，下图是这两个参数的属性描述。

从这两个参数的属性上来看，「当前窗口打开」是系统默认的处理方式。这个打开方式在国外的网站中实现方式比较_，用户也形成了一致的习惯，但国内的形式则不尽相同，以至于一直颇具争议，不同类型网站之间、同一网站不同场景之间也没有一个明确的规则标准可供大家学习和参照。

针对这个问题的讨论，可以听到两种不同的用户声音，并且都站在各自的角度阐述其道理。]

举个例子，我们以同类型网站（淘宝和亚马逊）的打开处理方式进行对比，来看一下用户习惯、功能场景对链接打开方式选择的影响。

首先，我们确定一致的功能场景：用户从首页中根据各种筛选条件，查找到心仪的商品。来看一下两个网站的处理方式：

可以看出基本是两个极端，差异非常明显，再来看个有意思的现象，亚马逊中国的商品搜索方式竟然又和淘宝一致了，难道链接打开方式的差异竟是中外用户习惯的差异？

这确实占了很大一部分原因，那么造成这种差异的原因主要有：

早期的 W3C标准不支持 target=”_blank”（HTML语言中，在新窗口中打开链接）的属性，国外互联网普及也比国内早，于是用户慢慢养成了习惯。

默认当前页面打开让国外用户觉得更有「礼貌」。如果用户想新开页面，可以鼠标中键、按住ctrl点击链接或者右键新窗口打开，此时用户更有选择权，可以自己决定打开方式；如果默认新开页面，则让用户失去了选择权。

早期国内互联网发展较为浮躁，网站想通过新标签页打开方式，提高PV。

国内网络普及晚，部分用户尤其很多老年人不习惯甚至或许不知道，页中有个后退前进按钮、面包屑可用，新开页面便于他们的操作。

那么，淘宝中所有的页面打开方式都是新开吗？不是。像「我的收藏」、「已买到的商品」、「购物车」等功能页面就是当前页打开。

同一个产品内部，如此区别设计的原因我认为有：

用户的目的较为明确，查找对象确定。（用户想要查看的对象是确定的，如购物车中的产品，用户有明确的目标，找到链接打开页面即可，不像搜索查找商品，需要一步步缩小范围甚至比对查看）

链接入口常驻在网站的信息栏，用户可以随时切换，操作方便，且不存在重新输入的成本。

关于这两种打开方式，到底哪种操作更顺畅，确实难分高下，就跟「确定和取消哪个在左，哪个在右」是一种性质的问题，没有好坏之分，关键是要看在哪种场景下使用更合适。

新页面打开适用的场景：

页面内容没有关联性，且从逻辑上没有从属关系，相对独立。如：产品中的外链。

存在多页面「比较」的操作，需要经常切换。如：淘宝商品详情。

需要保留住前一页的操作不丢失。如：知乎上过滤出来的结果列表。

功能分支存在穿插，当路径发生交叉时，_好新开页面。如：产品内部的跳转链接，导致信息关联的层级发生改变。

具有辅助功能的操作。如：使用文档（PDF、等）需要来回参照。

当前页打开适用的场景：

流程性的功能页面，前后操作存在关联和影响。如：下单支付、按步骤新增。

同一层级内容间的操作。如：tab栏的切换。

同一路径中的操作，用户当前的操作会对主页的内容产生影响。如：编辑一个配置，用户操作完，会回到当前页查看_新结果。

用户具有明确目的性的操作，当前页有利于锁定用户注意力。如：淘宝中「我的收藏」。

以上是结合功能场景进行的选择侧重，如果就「用户体验」一定要分出个高下，我个人还是比较支持默认「当前页打开」，从体验角度分析，「当前页打开」略胜一筹的主要原因有以下两个：

尊重用户的决定。当前页打开，将更多选择机会留给用户（鼠标中键、按住ctrl点击链接或者可以右键新窗口打开），一个具有良好用户体验的产品，在用户做操作的时候，总是能让他们按自己的意志做出决定。网站对每个链接强制打开新页面则剥夺了用户的选择权，因为不同的人有不同的浏览习惯和使用需求。

体验一致。保持一致体验的设计才能让用户产生信任感与安全感。当用户在操作界面元素的时候，可以顺畅的知道、理解，并且能预料到将会发生什么，不会被分神，也不会被打断。任何违反这个原则的设计都将会演变成一种「以设计方意志为导向」的设计，而不是「以用户为中心」的设计。

小结

当我们不知道两种方式如何选择时，或许「不强制用户」才是_好的体验。因为我们面临的用户多样，电脑操作熟悉程度多样，因此不同用户对于打开方式的习惯也具有多样性，这个是设计者无法揣测和调查清楚的。

在「两害取其轻」的情况下，在当前窗口打开链接，不失为一个选择，尊重用户自己的决定，让用户对交互界面自主可控。

三、弹出框

弹出框（弹层）又叫模态对话框，是指在用户想要对当前对话框以外的应用程序或内容进行操作时的提示方式。它一般覆盖在整体页面之上，避免了页面跳转。

弹出框通常是为了显示一个单独的内容，在不离开整体页面的情况下有一些互动，提供信息和交互。

如下图知乎中的「写想法」，用户可以快速的在弹出框中记录个人想法，记录发布后，很顺畅的回到之前的路径上继续操作，便捷_，操作思路清晰。

△

弹出框适用的场景：

内容简单，没有复杂的操作，且具有临时性。如：新增一个收货地址，进行简要的输入编辑。

更为详细的辅助说明，是对当前内容的快速扩展。如：缩略图，点击放大查看。

因此，弹出框可以较好的实现上下内容层叠的感知，不打扰用户的主路径，同时作为页面承载元素和用户操作的补充，起到承前启后的作用。

总结

本文结合这三种链接打开方式的页面交互关系，进行适用场景举例，并总结每种方式的优缺点，方便在设计中更好的根据不同的场景选择合适的页面打开方式。

当然，以上总结也是基于我个人的理解与经验，没有_的用法和标准，在具体设计实践中，仍要靠设计者的直觉和经验来进行综合考量与判断。

作为体验设计师，如何规划用户浏览路径，是个需要严肃对待的命题。没有_的好与坏，但一定要结合产品类型、场景、目标用户等进行具体问题具体分析。

参考文献

《链接打开方式间的博弈：新标签页vs当前标签页》

《链接应该在新窗口打开吗？》

知乎讨论→ /question/22431678

《3种常见的页面打开方式》

《新窗口打开_S 当前窗口打开 — 浅谈页面链接打开方式》

知乎讨论→ /question/19563426/answer/12234132

---来自阿里巴巴体验技术团队（TXD）

今天关于“网站交互界面”的讲解就到这里了。希望大家能够更深入地了解这个主题，并从我的回答中找到需要的信息。如果您有任何问题或需要进一步的信息，请随时告诉我。