熟練使用快捷鍵可以顯著提高用戶在瀏覽網頁時的效率。以下是一些常見的瀏覽器快捷鍵及其功能：

一、標簽頁管理

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協議