熟练使用快捷键可以显著提高用户在浏览网页时的效率。以下是一些常见的浏览器快捷键及其功能：

一、标签页管理

Ctrl + T：打开新标签页。

Ctrl + N：打开新窗口。

Ctrl + W：关闭当前标签页。

Ctrl + Shift + T：恢复最近关闭的标签页。

Ctrl + Tab 或 Ctrl + PgDn：切换到下一个标签页。

Ctrl + Shift + Tab 或 Ctrl + PgUp：切换到上一个标签页。

Ctrl + 1~9：切换到指定序号的标签页（如果有的话）。

Ctrl + 9：切换到最后一个标签页（在某些浏览器中可能不适用）。

二、页面操作

F5 或 Ctrl + R：刷新当前页面。

Ctrl + F 或 F3：在当前页面进行查找。

Ctrl + G 或 F3：查找下一个匹配项。

Ctrl + Shift + G 或 Shift + F3：查找上一个匹配项。

Home 键：跳转到页面顶部。

End 键：跳转到页面底部。

Ctrl + +：放大页面。

Ctrl + -：缩小页面。

Ctrl + 0：恢复默认页面大小。

F11：切换全屏模式。

三、地址栏与搜索

Ctrl + L 或 F6：将焦点设置到地址栏。

Ctrl + Enter：在新标签页中打开地址栏中输入的网址。

Ctrl + E 或 Ctrl + K：将焦点设置到搜索框（如果浏览器内置了搜索框）。

Alt + Enter：在搜索框中输入关键词后，在当前标签页中进行搜索（或使用新标签页打开搜索结果，具体行为可能因浏览器而异）。

四、书签与历史记录

Ctrl + D：将当前页面添加到收藏夹（书签）。

Ctrl + H：打开历史记录页面。

Ctrl + Shift + B：显示或隐藏书签栏（如果书签栏被隐藏了）。

五、其他常用快捷键

Ctrl + J：打开下载列表，查看和管理下载内容。

Ctrl + P：打开打印窗口，进行页面打印设置。

Ctrl + S：保存当前页面为HTML文件或其他格式（具体取决于浏览器的实现）。

Ctrl + U：查看当前页面的源代码（在支持此功能的浏览器中）。

Alt + 左箭头/Backspace：返回上一页。

Alt + 右箭头：前进到下一页（在某些浏览器中可能需要使用Shift + Backspace）。

Esc：停止当前页面的加载（在某些浏览器中可能还有其他作用，如关闭对话框）。

请注意，不同浏览器之间的快捷键可能会有所不同，且部分快捷键可能因浏览器版本、设置或扩展插件的影响而有所变化。因此，在使用时，建议参考您所使用的浏览器的官方文档或帮助中心。

　UI设计创新技能层出不穷，UI设计满足着形形色色各种垂直化的需求,在设计方面大家也是想方设法去做一些创新,希望自己能够在各种应用中脱颖而出,今天我就针对UI设计中Tab设计指南进行简单的说明。

　　1、Tab的作用

　　tab的作用是为了做好内容分类，节省屏幕空间，等需要的时候更容易被人找到!

　　试想一下，如果没有tab 给内容分类，所有的功能全部平铺展开，找起来多麻烦呀，就像衣柜的衣服没有分类，一堆乱糟糟的，是不是很影响出门速度呢!

　　2、Tab的分类

　　根据tab在界面中所处的位置我们可以把tab分为顶部栏tab、侧边栏tab和底部栏tab。

　　底部栏tab在前面文章中已经讲过了，感兴趣的小伙伴可以去UI底部Tab 栏设计总结 这篇文章看看。

　　侧边栏tab：侧边栏tab放在界面左边还是右边取决于tab标签与内容的关联性。

　　常见的是放在界面左边，如叮咚买菜， 你想找西红柿那么你得先找到蔬菜栏目，再去找西红柿。从上往下，从左到右，符合用户浏览习惯。

　　但也有放在右边的，如QQ空间的日期tab，因为放在左边的话会挡住发布时间和部分信息，影响阅读。而这个功能的使用场景就是用户想要看朋友某个月的动态内容，所以放在右侧更合适。

　　3、Tab的两种状态

　　以下内容都是针对顶部栏Tab来说的。

　　Tab可以分为选中状态和非选中状态，一般来说为了凸显选中状态，我们主要处理方法有改变字色、放大色号、添加线条、增加背景色等。如下图所示：携程是用改变字色+添加色块的方式使选中状态更突出。美团外卖是通过改变字色+短线的方式来突出。

　　具体使用什么方式还要根据自己产品的特点来设计，没有统一的标准。那么可能有小伙伴就会问了，既然没有统一标准那就可以根据自己喜好来设计了?NO NO NO!!

　　下面总结了几种tab设计套路供大家参考，我们一一来看：

　　加短线的tab样式

　　你们做设计时会不会纠结tab选中状态时小短线做多长合适呢?

　　短线有固定长度跟可变长度，我们先说固定长度的吧，这里总结了3种方式：

　　(1).小短线非常短，占一个字左右宽的尺寸，如下图所示：

　　(2).小短线稍长一些，一般会比两个字宽几个像素，如下图所示：

　　(3).根据屏幕等分，这种样式可用于内容比较简洁的页面。

　　接下来是小短线长度可变的情况：

　　下图是豆瓣的书影音页面，UI设计中Tab设计指南https://www.aaa-cg.com.cn/ui/2591.html?gpf短线的长度会随文字的多少而变化，一般小短线的长度会比文字稍微宽几像素，具体看情况而定。

　　为什么同样都是tab，而短线有长有短，该怎么选择使用呢?这里提供一个思路供大家参考。

　　当页面内容比较多，可能会伴有其他图标等，小短线太长会使整个导航看着太满太挤。所以会选短一点的长度。

　　页面内容比较简洁，没有多余的信息和图标，小短线用长一点也没关系，可以让页面更饱满，层级更清晰。

　　不过有时候简单的页面也会选择让小短线很短，使整个页面更加简洁清爽 ，所以很多时候并没有那么绝对，有合理的说法就行了。

　　说完了短线的长度我们来说说短线的粗细，小短线如果很短，一般就会稍微粗一点，因为本来就短，如果还那么细，是不是没有什么存在感。

　　小短线如果很长，一般就会稍微细一点，因为本来就长，如果还那么粗，是不是会让页面很臃肿。

　　两级tab样式

　　两级tab样式指有一个主导航，一个副导航。主导航一般会用线条样式，副导航会用色块样式。

　　因为线具有贯通整体的作用，比较适合用于展示层级较高的导航。而导航都是由上而下的，所以会优先考虑使用线条。然后层级较低的导航为了区分会使用背景色。因为色块的视觉权重比线条大一些，容易分散用户的注意力。而tab的作用是为了让用户更方便的找到自己想要使用的功能，所以没有必要做的太显眼。如下图所示：

　　酷狗音乐的一级导航用了小短线的样式，二级导航用了色块标签，层次对比明显。马蜂窝一级导航小短线结合自身产品品牌特色进行了设计，二级导航选中状态使用图标加文字颜色变化，同时下面线条样式也有变化，比较有新意。

　　特殊样式Tab

　　还有一种tab类似网页的样式，用于功能性比较强的页面。

　　4、tab的使用举例

　　1、tab 可以分为固定和滑动2种样式，一般会根据内容多少决定使用什么样式。

　　tab项过多情况下用户可以滑动，但是有的情况下tab选项实在是太多了，这时候可以做成弹框切换的样式进行选择。如腾讯视频的处理方式：

　　2、tab的用色处理，一般会根据使用目的做不同区分。

　　如拉勾首页顶部tab并不是想引导用户去点击，而是让用户根据自己的需要去切换选择，在页面优先级和重要程度上没有那么高，因此使用无彩色系的浅灰色和黑色来展现。

　　如下面右图我把颜色改为品牌色后，视觉上明显了很多，这样反倒对页面其他元素产生了很多干扰，所以tab用色还是要根据使用场景来确定。

　　5、总结

　　最开始做tab时， 我觉得样式随便设计一个就好了，哪需要考虑这么多呢，但当别人问为什么这样设计的时候，我就懵逼了!

　　我们分析任何一个设计元素的最终目的都是为了更好的使用它。遇到问题，如果你没有十足的把握，就先分析竞品，把所有能找的方案罗列出来进行归类总结，最后找到适合我们产品的方案，这样在说设计思路的时候也有理有据了，不会被问的一脸懵。

　　好了，今天的分享就到这里了，欢迎大家留言讨论。因此，您现在已经了解了与UI设计师的工作相关的主要技能。如果您想了解更多信息，请给我点个关注，我会继续发包含有关在该领域工作的更多相关文章。

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

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

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

一、页面打开方式的类型

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

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

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

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

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

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

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

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

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

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

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

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

1. 早期的W3C标准不支持target=”_blank”（HTML语言中，在新窗口中打开链接）的属性，国外互联网普及也比国内早，于是用户慢慢养成了习惯。
2. 默认当前页面打开让国外用户觉得更有“礼貌”。如果用户想新开页面，可以鼠标中键、按住ctrl点击链接或者右键新窗口打开，此时用户更有选择权，可以自己决定打开方式；如果默认新开页面，则让用户失去了选择权。
3. 早期国内互联网发展较为浮躁，网站想通过新标签页打开方式，提高PV。
4. 国内网络普及晚，部分用户尤其很多老年人不习惯甚至或许不知道，页中有个后退前进按钮、面包屑可用，新开页面便于他们的操作。【1】

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

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

1. 用户的目的较为明确，查找对象确定（用户想要查看的对象是确定的，如购物车中的产品，用户有明确的目标，找到链接打开页面即可，不像搜索查找商品，需要一步步缩小范围甚至比对查看）
2. 链接入口常驻在网站的信息栏，用户可以随时切换，操作方便，且不存在重新输入的成本。

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

新页面打开适用的场景：

1. 页面内容没有关联性，且从逻辑上没有从属关系，相对独立。 | 如：产品中的外链
2. 存在多页面“比较”的操作，需要经常切换。 |如：淘宝商品详情
3. 需要保留住前一页的操作不丢失。 |如：知乎上过滤出来的结果列表
4. 功能分支存在穿插，当路径发生交叉时，最好新开页面。 |如：产品内部的跳转链接，导致信息关联的层级发生改变
5. 具有辅助功能的操作。|如：使用文档（PDF、图片等）需要来回参照

当前页打开适用的场景：

1. 流程性的功能页面，前后操作存在关联和影响。 |如：下单支付、按步骤新增
2. 同一层级内容间的操作。| 如：tab栏的切换
3. 同一路径中的操作，用户当前的操作会对主页的内容产生影响。 |如：编辑一个配置，用户操作完，会回到当前页查看最新结果
4. 用户具有明确目的性的操作，当前页有利于锁定用户注意力。| 如：淘宝中“我的收藏”

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

1. 尊重用户的决定。当前页打开，将更多选择机会留给用户（鼠标中键、按住ctrl点击链接或者可以右键新窗口打开），一个具有良好用户体验的产品，在用户做操作的时候，总是能让他们按自己的意志做出决定【2】。网站对每个链接强制打开新页面则剥夺了用户的选择权，因为不同的人有不同的浏览习惯和使用需求。
2. 体验一致。保持一致体验的设计才能让用户产生信任感与安全感。当用户在操作界面元素的时候，可以顺畅的知道、理解、并且能预料到什么将会发生，不会被分神，也不会被打断。任何违反这个原则的设计都将会演变成一种“以设计方意志为导向”的设计，而不是“以用户为中心”的设计。

小结

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

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

三、弹出框

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

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

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

https://www.zhihu.com/

现在很多产品中的新增、创建，也都会采用弹出框的交互方式，当然前提是在弹出框中编辑的内容不是很多，此时弹出框不仅承载了信息编辑的功能，还可以作为上下文的跳转，帮助用户衔接路径。

如 iconfont中的新建项目，用户新增后，页面会直接跳转到新的项目空间。

http://www.iconfont.cn

弹出框适用的场景：

1. 内容简单，没有复杂的操作，且具有临时性。 | 如：新增一个收货地址，进行简要的输入编辑
2. 更为详细的辅助说明，是对当前内容的快速扩展。 | 如：缩略图，点击放大查看

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

总结

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

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

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

参考文献

【1】链接打开方式间的博弈：新标签页vs当前标签页http://www.woshipm.com/pd/438404.html

【2】《链接应该在新窗口打开吗？》http://subbloggoodboy5264m98.lofter.com/post/1fd3407b_12a690458

【3】知乎讨论https://www.zhihu.com/question/22431678

【4】3种常见的页面打开方式http://www.woshipm.com/pd/126021.html

【5】新窗口打开 VS 当前窗口打开 — 浅谈页面链接打开方式https://www.douban.com/note/163436628/

【6】知乎讨论 https://www.zhihu.com/question/19563426/answer/12234132

作者：阿里TXD，TXD技术体验设计（ID：TXD-UED）

本文由 @阿里TXD 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议