使用 target="_blank"的時機

kmokidd發表於2014-09-02

a標籤有一個target屬性用於控制當a標籤被點選後的動作,”_blank”是target屬性的擦後果常用值之一,它會使a標籤被點選後開啟一個新的視窗(如果使用者有做設定的話,開啟的可能是新標籤頁)。這樣的設定在HTML中是錯誤的(也許這個屬性只能用在XHTML中?),但是這個值可以達到人們要的效果,所以它仍然被使用。現在”_blank”在HTML5中式完全有效的,但我們要探討一下什麼時候才應該使用它。

糟糕的理由之一:你習慣使用”_blank”

不管人們是怎麼想的,瀏覽器的預設行為應該是在當前頁面開啟連結(就像a標籤中有target="_self"的屬性設定一樣 ),所以target="_blank"是在對這一預設行為做改變。或許你的習慣是點選任何連結都會開啟一個新的視窗或者標籤頁,但很可能大部分人更習慣於使用瀏覽器的預設行為,這樣當其他使用者在瀏覽你所寫的頁面的時候他們會覺得很不舒服。

如果你所做的產品目標使用者只是你,那當然隨你高興。但一旦其他人會使用你的站點,那還是使用預設行為吧。使用者可以使用鍵盤元件[e.g. Ctrl]+點選目標連結的方式開啟一個視窗/新標籤頁。這樣對使用者來說點選連結顯示網頁的方式既可以是當前頁面開啟也可以是開啟新視窗的,這對於你而言也是一樣的。而且這樣一來,你也不用把連結的行為加諸到每個使用者上。

當一定要使用target="_blank"的時候再去使用它。

糟糕的理由之二:使用者,請一直瀏覽我的頁面吧

其他的站點都太普通了,只有我們的站點如此特別。我們的站點是多麼的重要,使用者絕對不應該離開它。

糟糕的理由之三:“內部”連結和“外部”連結表現應該不同

“內部”連結(連結到自己的站點)使用的瀏覽器預設行為,但是“外部”連結(連結到其他站點)將會在新視窗/新標籤頁中開啟。這一點和上文所說的另外兩點是有關聯的,也許這一行為更加糟糕。你明知道正常的連結樣式會有更好的體驗,但這麼做了意味這使用者會在點選連結時離開你的站點,所以你寧可放棄更好的體驗也想留住使用者。

我曾聽很多人說過“內外部”連結樣式不統一是“傳統”,但我不認為這是件好事。

糟糕的理由之四:連結指向是一份PDF檔案

除了PDF檔案外還有很多其他型別的非Web資源都因為檔案型別的原因而作為新視窗/新標籤頁開啟,它們和普通的網頁沒有區別,為什麼要被“區別對待”呢?假如你希望讓使用者不在瀏覽器中開啟檔案而是直接下載的話,可以使用download屬性。

糟糕的理由之五:我的客戶希望這樣

我感受到了“客戶怎麼說就怎麼做,不需要為此與客戶起衝突”的意思了。但其實這個問題大可不必變成一個衝突。如果他們連這一點都不信任你,那麼你的客戶要信任你些什麼呢?換做我的話會這麼和客戶說的:

按照常理開啟一個連結的樣式應該是遵照瀏覽器的預設行為。如果我們想要改變這一行為的話一定有我們的原因,但對於大部分連結依然遵循這一預設行為。我們不希望將我們的習慣強加到使用者身上,也不想在這麼小的問題上對使用者造成一些潛在的影響。我們希望我們的使用者能對我們的產品感到滿意。
希望你冷靜耐心的勸說能讓你的客戶對你滿意。

糟糕的理由之六:在一個無限下拉的頁面上應用

無限下拉是一個很耍人的玩意兒。從它可以不中斷地傳遞資訊的角度來說,無限下拉是個很好的使用者體驗點。但是一旦無限下拉沒有被合理使用了,它就會成為一個詬病。退回到一個無限下拉頁面的時候,使用者看到的應該是上一次它們離開這個頁面的地方,而不是又從頁面頂部開始。要如何保證這樣的效果就是你的工作了。假如你用開啟新視窗/新標籤頁的方式來逃避這個問題,那你的工作能力也是得不到提升的。

適合使用的場景之一:由使用者啟用的媒體播放

音樂,視訊,廣播…都算是使用者啟用的媒體。

在使用者播放這些媒體的時候,對網頁做一些操作可能會使媒體停止播放。這時,可以在新視窗/新標籤頁中開啟網頁,可以詢問使用者是否要離開當前頁面。在這種情況下使用開啟新視窗/新標籤頁是正確的做法,這是為了使用者能夠停留在他們當前的網頁位置上。關於媒體播放的問題,我們曾經也有討論過,如果多媒體是正在播放的,那麼對連結就要做特殊的處理。如果多媒體並不是正在播放的,那麼連結就還是按照瀏覽器預設的樣式。

雖然我是這麼認為的,但其實你的YouTube上切換視訊[2]的時候它也不會做任何提示的(比如誤點到另一個視訊後,當你使用後退回到上一個視訊時,沒有出現類似於“這個視訊你已經看過了”的提示)。

適合使用的場景之二:當使用者在當前頁面做一些可能會丟失的操作時

如果一個使用者正在記錄些什麼或者調整安排些什麼,點選連結使當前頁面的內容丟失了,使用者會非常的鬧心–剛剛做的全白搞了?即使事實上使用者的記錄並不會丟失(你會做儲存的操作),將使用者的心情置於那樣一個恐懼的狀態也是不應該的。

就拿使用者們常常用來寫程式的CodePen來舉例好了:

開啟新視窗/新標籤頁的連結的樣式是’learn more’這樣的樣式。

有正常連結樣式的連結使用的就是瀏覽器預設行為,但是CodePen會檢視使用者是否儲存了當前程式碼,如果使用者沒有儲存的話會做出提醒。

假如你的瀏覽器崩潰了或者直接開啟了別的站點,CodePen也會將編輯器的狀態儲存在本地儲存中,以便使用者不會丟失他們的程式碼。

再舉個例子,當使用者在處理訂單的時候,你自然不希望他們離開你的網站。像類似於“配送資訊”這樣的連結使用者應該是可以在依然能繼續處理訂單的前提下開啟的。

“閱讀一篇文章”這樣的連結在這裡就沒什麼好討論的。從大部分情況來看,使用者能毫不費力地點選後退回到上一個頁面(大部分瀏覽器還能回到你離開那個頁面時的位置),所以使用者也不會在這裡流失掉,而且許多瀏覽者只是走馬觀花罷了。

適合使用的場景之三:技術問題

在有些情況下,如果不使用target="_blank"瀏覽器的行為就會變得非常奇怪的時候,那隻能使用它了。比如在使用Outlook Kangaroo 2009企業版的時候如果不加上target='_blank'的話,連結會在側欄上被開啟。這樣的情況下就不得不使用target="_blank"了。

擴充套件閱讀

如果你還想知道更多,可以訪問下面的連結:

你也可以新增下面的程式碼,讓使用者自行選擇:

<form>標籤也可以加上target=”_blank”,但是我覺得這種用法就更少見了。不過這篇文章中對target=”_blank”的討論對form一樣適用。

如果一個視訊你正看到一半,但不小心點到了別的視訊又馬上點選後退,剛剛正在看的視訊又要從頭播放了。所以如果從一個視訊到另一個視訊的播放中間能有一些過渡就好了,或者在一個視訊的時間軸上加一個箭頭告訴使用者他已經看到這個位置了也挺好的。

相關文章