February 2nd, 2009 Espresso Live Preview (1.0b2)與其設計瑕疵

我已經注意 Espresso 很久了。但一直沒有真的在實戰中用過它,很大的原因是沒有 live preview 可以用。

後來發現自從公開測試後,live preview 的功能已經加進去了,但要使用這個功能有點麻煩,而且這個設計決定非常差勁,應該是個未完成品。

要使用 live preview,要按下

    New > Live Web Preview

Untitled.jpg

(理想的作法應該像 CSSEdit 一樣放個 Live Preview 的按鈕在工具列上才對。)

好,打開了 Live Preview 後你會發現他是空白的,又是一個未完成功能,你要把想要預覽的檔案拖到 Live Preview 視窗上手動開啟才行。

(理想的作法是選了 index.html,按下 Preivew 按鈕,就會自動產生 index.html 的 preview,這樣才叫直覺啊!)

好、你可以 preview 了。但是 Espresso 官方網站上的 Preview 和 Coding 是兩個不同視窗啊!怎麼你開出來是同一個視窗?

還是有解決方式,就是把那個 Live Preview 從 sidebar「拖出來」,它就會變成獨立視窗。

(理想的作法是另開新視窗。)

另外一個 UI 設計上的瑕疵是 Tab 切換的方式。

在 Espresso 左方的 Sidebar 裡有一個欄位叫做 Workspace,其實他在功能上都和 CSSEdit 和 Coda 的 Tab 分頁功能一模一樣,Espresso 可能是為了畫面簡潔才把它做成直式的,我覺得這樣會和下方的 Project File 混淆,因為同樣在 Sidebar 裡,Workspace 的檔案裡可以「關掉」,Project 裡的不行;Project 裡的檔案可以移動、重新命名、Workspace 裡的不行。

如果你不是非常有經驗的使用者,你怎麼會知道在 Sidebar 裡看來一樣的東西有完全不同的操作邏輯?

這裡可以用兩個方式改良:

第一、改成傳統的 Tab,一切都 OK。

第二、維持現有狀態,但在 Workspace 下方加一條分隔線,並變換背景色,讓使用者在視覺上有所區別,並且將切換 Tab 的快速鍵改成 Command + Shift + Up / Command + Shift + Down

預設的快速鍵 Command + Shift + [ / Command + Shift + ] 是給橫式 Tab 用的,你要改成直的,那就連快速鍵也要改成直的才對。

總覺得我該發封 Email 給作者?但還要打英文、好麻煩的。