DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 網頁超級鏈接該以什麼方式打開?
網頁超級鏈接該以什麼方式打開?
編輯:CSS詳解     

一直以來都有這樣一個困惑,那就是打開頁面間的鏈接時是在原窗口轉換還在新窗口打開呢?如果是在原窗口裡轉換頁面的話,那我還想使用原頁面的信息呢?但是在新窗口打開的話,到時候可能是一屏幕的窗口(現在的浏覽器都提供標簽式浏覽——我認為這是浏覽器至今為止最好的改進,但也會造成成堆的標簽排在那而不知道到底哪個才是自己想要的),很容易就讓人迷失在窗口裡。也許該說按特定的環境使用特定的方式,可是這個特定的環境又是哪些呢?

其實這個特定的環境也是個不特定的環境,比如說從新聞列表打開新聞內容頁,按常理鏈接內容頁的時候應該是打開新窗口,看完這個新聞後直接關閉這個新開的窗口,這也符合人們在網絡上閱讀的習慣。可是我看新聞等列表型的內容時有一個這樣的習慣,那就是在列表頁的時候點擊打開所有想看的新聞內容頁,然後再一個一個的查看,因為我不想看一個新聞然後關一個窗口又返回列表頁去打開另一個新聞窗口,但是這個不可避免的就會滿屏幕的出現新窗口或者是標簽欄裡排滿了標簽。

那有沒有更好的辦法呢?有什麼辦法即可以讓我看到所有想看的新聞,而又不用面對滿屏幕的窗口或是堆疊的標簽呢?

有一種方法是當我從新聞總列表頁打開某一類新聞其中的一條的時候,使用新窗口或是新標簽打開,然後這一類新聞的列表會出現在這個內容頁裡,看過的新聞自動消失在這個列表裡,再然後看這一類新聞的時候可以直接在這個窗口裡轉換,如果還想看另一類別的新聞,那就到新聞總列表頁去打開另一類的新聞內容頁。

這樣的確是可以很大程度的減少新窗口量或是標簽量。可是我們不得不考慮到這樣一點,當用戶在使用這種模式的網站時就會多出一項認知的過程,無疑在易用性上又過不了關。而且這種模式的網站如果導航系統沒設計好的話,很有可能就會讓用戶產生迷路的感覺。

所以並不推薦以上所說的方式,還是老老實實的在新聞總列表點一條看一個吧。

可是即使是這樣子的操作方式,也涉及到一個問題,就是打開頁面鏈接的方式的統一性。

如果你在一個新聞列表頁頁,打開第一條新聞的時候是新開的窗口(標簽),可是當你點擊第二條新聞的時候卻是在原窗口裡轉換的,那麼你會想到什麼?莫名其妙外加一頭霧水。

當然這種情況並不常出現,在同一個新聞列表頁面裡更是不太可能會出現。可是如果這個新聞列表頁是不同類型的呢?比如說一個是數碼新聞列表頁,另一個是軟件新聞列表頁,在數碼新聞列表頁裡打開新聞用的是打開新窗口的方式,可是在軟件新聞列表頁打開新聞卻用的是在原窗口轉換的方式。這個時候用戶該破口大罵了,為什麼同樣的類型卻用的是不同的方式?!

一致性並不只是表現在頁面排版等視覺上,還包括操作方式等交互行為上。

最近在使用yupoo網的相冊服務時就發現了一個這樣一個同類型卻用不同方式的問題。yupoo提供了好多種查看別人照片的方式,比如說通過搜索、隨便逛逛、最近上傳、最近七天的靓照、最近一月的靓照、一年前的今天等,可是這些方式提供出的照片預覽頁在打開鏈接時卻出現了不一致的方式。

以上幾種方式提供出的照片預覽頁都可以算是新聞列表頁,點擊其中的照片就像點擊一條新聞一樣,可是問題卻在這裡出現,通過搜索、隨便逛逛、最近上傳、最近七天方式打開的照片預覽頁點擊打開其中一張照片的方式是新開窗口(標簽),可是當通過最近一月的靓照、一年前的今天方式來打開其提供的預覽中的照片時卻是直接在原窗口裡轉換的。

如果說從通過搜索等方式提供的預覽頁打開照片使用新窗口是為了用戶返回來重新尋找照片,那為什麼從本月推薦等方式就不能返回來重新查看照片呢?如果說通過搜索等方式提供的照片預覽頁是一類照片的合集,那本月推薦的照片就不算合集?用戶從本月推薦裡並不只是想看其中的某一張照片,而應該是跟通過搜索一樣的想查看更多的照片。

當我第一次使用這個最近一月的靓照功能時,我以為他跟最近七天的靓照的方式應該是一樣的,點擊照片後在新窗口(標簽)打開鏈接,本來我是准備多點幾張然後再一張一張看的,可是當我點下第一張的時候發現窗口轉換掉了,要想看其他最近一月的靓照還得重新來過。這頓時讓我產生一種被人欺騙的感覺。

如果通過搜索、最近上傳等方式提供的預覽頁在點擊照片時采用的也是在原窗口轉換的話,那麼用戶最多只是會感覺到不方便而已,並不會有被欺騙的感覺。在這一點上flickr做得很統一,不管是通過什麼方式去查看照片時都是采用在原窗口裡轉換的方式,雖然有些不方便可是至少不會有被欺騙的感覺。

如何保持交互的統一性?如何不讓用戶產生被欺騙的感覺?多多從用戶的角度去考慮吧。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved