jiwostudio.com

★ February 25th, 2009 Safari 4 UI 觀察

Safari 4 在介面上和 Google Chrome 有些神似，只是非常的酷，酷很多。

新的 Tab

相似之處是 Tab 的位置由下方移動到上方。

這樣設計的好處是把整個瀏覽器最常變動，看起來也最亂的地方移到最上方，所以使用起來感覺更清爽。而且本來一個網站的名字用 Safari 3 開會出現在兩個地方 — 標題列和 Tab 列，現在只會出現在一個地方（這招是 Chrome 先用的，真他媽天才）。

Tab 拖拉的方式也因應介面的改變而進行了調整。

原來的 Tab 拖拉方式有點怪異，要左右變換位置，只要將 Tab 左右拖動就好；若要將 Tab 從視窗中分離出來，就要按 Tab 久一點，才能把它拉出來，感覺要扯 Tab 要比較「用力」。¹

既然 Tab 移動到原本的標題列位置，那麼介面必須要讓使用者區分「拖動整個視窗」和「拖動 Tab」這兩個行為，因此每個 Tab 的右上角多出了可以拉動的三條線圖示。

這次的行為模式也統一了，只要按住那個圖示，不管是左右或是上下拖動都一樣容易。三條線圖示外的上其他地方跟以前一樣，單純用來移動視窗。

Tabs, Lots of tabs

這樣的設計方式也有缺點，當你開了很多很多 Tab 的時候，標題列就會變得擁擠，你想拉動視窗的時候就要比較小心，免得拉動到 Tab，

其實以前的 Safari 也有被人批評說 Tab 太多時會變得不堪使用，這是每個使用 Tab 分頁的軟體都會遇到的問題，但其實介面設計是互相影響的，當使用者知道開很多 Tab 會很難用，他們就會盡量避免這個狀況。

當 Tab 爆炸的時候，右邊會出現點點點的圖示，點下去可以看到所有的 Tab 選單，在現有視窗中可以看到的 Tab 底色是白色，看不到的是灰色。

不需圖示或文字，單純改變背景底色就能傳達這樣的訊息。

Top Sites / Speed Dial?

Top Sites 也就等同於 Opera / Chrome 的 Speed Dial(?) 頁面，比起單一首頁更加符合現在的使用習慣，只是 Safari 的很酷！仔細看還會發現這些 Top Sites 是有弧度的。

右上角會出現藍色星星是很酷，但我還不明白他代表什麼，是表示該網站已經在書籤內了嗎？

Top Sites 的讀取頁面方式很特別：在使用者點下網頁縮圖後、頁面完全讀取之前，使用者會看到比較暗的網頁，然後讀取完畢後畫面才會亮起來。

這個比較暗的網頁其實是截圖。

在用 iPhone Safari 的時候，切換 tab 時可以看到完整的網頁縮圖，當你點進去後會發現 Safari 必須重新讀取整個頁面，因為受限於 iPhone 的硬體能力，無法留這麼多網頁開著，所以他必須把頁面的樣子存起來，讓你知道那個 tab 是什麼，Safari 4 用的也是同樣的方式，但只是單純用來顯示內容而已。

視窗與工具列

新的視窗和以前看起來差不多，但事實上，這是一個全新的視窗風格，在 Leopard 上沒有一個軟體是這樣；上面的視窗漸層比以前亮，而且工具列和書籤列也沒有一條黑線分離。

加入書籤的按鈕跟隨 Firefox / Chrome，和網址列黏在一起了，Safari 招牌的「網址列 = 讀取進度」也改成風火輪；這倒是有點可惜，畢竟風火輪沒辦法告訴你「要看這個網頁還要等多久」。

另外不知你有沒有注意到，Safari 4 把「停止/重新讀取」的按鈕拿掉了。

啥米！我的天啊～這個決定真的太大膽了，好想在 Apple 工作！

好啦，其實他還在，只是被丟到網址列最右邊和風火輪合在一起了。「停止」功能也被放在那邊，只不過沒有圖示而已，Safari 4 的這個決定應該是受到 iPhone 版本的影響，我認為他們應該要把「停止/重新讀取」放回原來的位置，測試網頁時有這個按鈕會比較方便。

全螢幕縮放

這倒跟介面沒關係，而是功能上的改進，Safari 4 將縮放功能由「字體縮放」改為「全螢幕縮放」。當所有新瀏覽器都使用全螢幕縮放時，設計網站又可以少一份擔心。

如果你不習慣新的縮放方式（誰啊），可以在選單裡將 Zoom Text Only 打勾勾。

速度

快。

更加先進的…技術？

支援更多別人都還沒有做到的 CSS 效果和 HTML5 規範，這部份我不怎麼懂。但是這種 <nav> 標籤用法，應該是 HTML5 的吧。

這就是我的觀察，要花上一小時把自己的文章寫完，真是很痛苦，因為我必須一直忍耐先不去點下面這篇文章。

Cocoia Blog: Safari 4 UI breakdown

現在終於可以去讀了！