首頁 > Firefox, Internet, Personal > 重新設計瀏覽器與彈跳視窗

重新設計瀏覽器與彈跳視窗

星期三, 二月 4, 2009 發表迴響 Go to comments

一切都是源自於我的這句碎念

如果彈跳視窗開在原來的分頁「裡面」,而不另開新分頁。這樣一來,我可以很清楚的知道網頁間的關係。而且同在一分頁中,可以一起關掉,或隨主分頁關閉而關閉。

根據我胡思亂想之後,我把我的想法畫 (Mockups) 了下來。接下來,讓我一步一步地解釋。

無分頁,多視窗

在還沒有分頁的概念前,所有的網頁都是這樣子自由的顯示出來,無法可管。造成瀏覽上的不便,也使得廣告可以任意出現,人稱彈出式廣告 (Pop-up ads)。當然彈跳視窗並非全部都是不好的,只不過在分頁概念出現之前。你想開個新網頁,就會多一個新視窗,混亂情形可想而知。

popup 1

分頁,單一視窗

後來漸漸有了改變,不但出現了主動擋廣告的機制;瀏覽器也開始出現了所謂的分頁概念。但是情況似乎只是從桌面上的多視窗,轉變為瀏覽器裡面的多分頁。甚至還有更高明的彈跳網頁,就是不開在分頁裡,非要開在新視窗。就麼一來就變成「多視窗+多分頁」,情況好像沒有好到哪裡去…。
popup 2

我的概念

從以往的例子,可以發現到網頁與 popups*(註1) 的關係,幾乎是沒有的。但是在瀏覽的過程中,必定是先有網頁,才有 popups*(註2)。也許有人會說『分頁就夠啦,網頁跟 popups 都開在同一視窗裡,這樣就顯示出關係了』。但是現實是,我們將每個網頁當作一個分頁;而 popups 也是一個分頁。大家的地位都平等,分辨上是有困難的。所以要怎麼製造關聯性呢?以及更基本的問題,關聯性到底有沒有必要?

我們就從基本的問題談起吧。一般來說,人的思考的是連續性的*(註3)。無論在何時都是如此,當然上網也是。不可能你平常看書都很正常,上網的時候就突然變成 著看。而網頁與網頁間的連結,就是最好的例子。搜尋引擎的網路爬蟲 (Web Crawler),也是以這個方式在發現新網頁;Google PageRank 的評分方式,也是根據網頁間的連結作為基礎。就算你無意識的亂點連結,在網路上亂逛,他們也是以某種關係互連的。所以不可否認,關聯性普遍存在於所有地方。而更好的關聯性將創造更友善的人機介面,因為我們就是這樣思考著。

註1:在此解釋為彈跳視窗、彈跳網頁,不一定是廣告。
註2:如果沒有網頁,卻有彈跳視窗跑出來,那通常是其他程式所為,而且大部分是病毒。因此不屬於瀏覽過程。
註3:還是有特例,如跳躍思考。

所以說,到這裡才進入正題,前面都是為了我的突發奇想在做鋪程。

if 彈跳視窗開在原來的分頁「裡面」,而不另開新分頁?

由上述假設,我覺得在現有的視窗與分頁上,加上第三層是有必要的!也就是讓 popup 開在分頁。所有非人為,網頁自動開啟的新分頁,皆以小標籤形式出現在原網頁角落 (本例為左下角,類似 EdgiesDownload Statusbar)。
popup 3
好處是:

  • 主網頁與 popup 的關係顯而易見,可以避免出現無意義的分頁。
  • 若關閉主網頁,所有內部的 popup 皆隨之關閉。(連坐法?)
  • 將彈跳網頁限制在單一分頁中,避免廣告網頁佔據分頁列。

其他的延伸概念:

  1. 當游標移至標籤上方時,顯示預覽圖 (Preview)。此時點一下可開在新分頁;游標移開預覽消失。(參考:Download Statusbar)
    popup 4
  2. 顯示所有的 popup 預覽畫面 (Wall Preview)。可拖曳至分頁列上開啟,或直接關閉 popup。(參考:Ctrl-Tab)popup 5

最後,關於本文的概念圖,我是用 Mockups 試用版繪製,然後再很心酸的用 screenshot 抓下來…。所以說沒有備份,就只有這些圖啦!希望寫這篇文章後,也可以去要一個序號來用XD。如果你對 Mockups 有興趣的話,可以先去看看 O3 的文章 Mockups : O3noBLOG

最後的最後,在完成這篇文章之前看到 Mozilla Design Challenge。似乎有點那個感覺,不過我不是為了他寫的 (雖然說真的很巧XD )。如果各位對敝人的點子有點興趣的話,歡迎與我聯絡。附帶一提,另外一則碎念,我也畫了一些概念圖,有機會再講吧~。

About these ads
  1. Tobby
    星期三, 二月 4, 2009 at 11:47 上午

    恩,很棒的概念
    很像下一版的firefox(http://mozlinks-zh.blogspot.com/2009/01/firefox.html)+tab catalog

  2. 星期三, 二月 4, 2009 at 11:47 上午

    我們的Chrome已有此功能。

  3. 星期三, 二月 4, 2009 at 1:10 下午

    我的重點還是這個圖

    popup 3

    延伸概念的介面已經有人做出來了,我只是拿來輔助用。

  4. 星期三, 二月 4, 2009 at 3:14 下午

    try using iplotz.com for wireframing and mockups.

  5. 星期三, 二月 4, 2009 at 3:27 下午

    to mark:

    Thanks. I’ll try it.

  6. fauzty
    星期三, 二月 4, 2009 at 8:49 下午

    不錯的設計。

  7. 星期六, 二月 7, 2009 at 6:13 下午

    這個酷!!尤其是延伸彈出的視窗放在左下角這部份~

    我目前在Safari也是利用類似的概念開視窗和分頁
    相關的網頁就用分頁
    不同的就用視窗
    只是我要用人腦判斷XD

  8. jscorpio
    星期一, 二月 23, 2009 at 6:42 下午

    雖然現在每個人的螢幕都有愈來愈大的趨勢,
    但我不認為把那些東西放到下面會是個好主意,
    瀏覽器裡的資訊已經夠雜亂了。

    我的問題不是在於如何設計您概念的外觀,
    而是應該更仔細去想想到底我們想怎麼對待popups,
    視而不見或者是完全掌握,
    如此一來答案會更準確一點。

  9. 星期二, 二月 24, 2009 at 4:24 下午

    外觀的確不是這個概念需要的。怎麼處理 popups 的確也是我想處理的重點。

    而我的結論並非完全掌握或視而不見,而是讓他在需要的時候方便獲得,不需要的時候不會造成阻礙。謝謝你點出我真正的重點,或許我應該再多畫幾張圖來解釋。

  10. corausir
    星期日, 三月 22, 2009 at 7:44 下午

    GOOGLE 瀏覽器如果彈跳的話也會有個警示

    不過說實在的我覺得差不多耶~~
    有分業已經很好用了

    不然我想我的 BAR 應該爆炸了

    corAusir 程式逗設計 – 提供設計資料與程式設計 –

    blog.corausir.org

    或 點我的名字參觀喔

  1. No trackbacks yet.

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

關注

Get every new post delivered to your Inbox.

%d bloggers like this: