24 4月 2013

[刺眼] 桌面工具列的位置與美學

…我先承認題目裡「美學」的部份是瞎掰的。

除此之外,每次看到桌面工具列的位置和螢幕比例「不契合」的時候,那刺眼的心情,只有這幅圖能訴之一二了…


故事是這麼開始的…

我開始有自己的電腦的時候,市面上的螢幕的尺寸大概都在 15" ~ 19" 之間。當時不論是 Mac OS 9、OSX、Microsoft Windows 95/98/2k/Me/XP都是預設把工具列放在下面 (除了 OS 9 是上下都有。不過是比較扁細一點的工具列)。

這樣的設計,在 4:3 的螢幕比例下 (例如 800:600 的解析度) 是絕對沒有問題的。就像下圖所示:

為什麼說「沒有問題」呢?因為就算我們放了一個超大的工具列,佔去了 100px 的畫素空間,剩下藍色的桌面主要視覺/操作空間裡仍然能維持 800:500 的比例,也就是說 800÷500 = 1.6 這個超級接近黃金比例數 (1.618...) 的數字。

但這個工具列的位置,在現在主流都是 16:9 寬螢幕的環境下,卻很刺眼!因為,在寬螢幕的環境下,如果還把工具列放在下面,就會變成:

在一樣假設工具列為 100px 的條件下,只看藍色的區域,就能得到 1600÷800 = 2 的比例,這個肥大的 "2" 離黃金比例數太遠啦!相較之下,沒有工具列時的 1600÷900 = 1.77這個值還比較接近 1.6 的黃金比例數呢!

所以,在現在的寬螢幕條件下,應該把工具列擺哪裡呢?應該擺在側邊 (個人偏好左側,解釋後附),如下圖:

如此一來,在藍色的主要視覺/操作區域裡,我們就一樣能得到 1500÷900 = 1.66 這個相當接近黃金比例數 (1.618) 的數字了。

讀到這裡,你可能會覺得我有神經病,沒事裝什麼文青,果然是社會組背景的傢伙,幹嘛這麼著迷於黃金比例數字,工具列這種東西不是「有就好」了嗎?(更別說 Enlightenment 系列還有許多超輕量化的桌面環境甚至連工具列都沒有呢!)

沒有工具列就算了,那不在我的討論之列。

但我最深痛惡絕的東西就是「有就好」的心態。不管是設計師還是工程師,如果凡事只是「有就好」或是「先求有,再求好」的話,我們彼此都心知肚明,一開始不求好,將來永遠也都不會變好。

既然決定要放個工具列,為什麼不好好地、仔細地思考它的位置、操作時與使用者之間的互動方式以及觸動事件的反應範圍呢?

而且,與其說我個人有在寬螢幕上把主要的視覺/操作區域 (上圖的藍色部份) 限制成接近黃金比例數的傾向,不如說這是人類的生理限制給我們偏好。君不見,當寬螢幕在市場上出現的時候,也正是我們開始把一些「大而無當」的背景監控程式開始放在桌面的右側的時候嗎?(如下圖)

如果你有尺的話,你可以自行量看看,藍色的主要視覺/操作區域,是不是仍然維持著一個接近 1.618 的比例!

很神奇吧!如果我真的需要在電腦上「不間斷地」知道現在的時間、天氣還有 GIS 位置的話,為什麼以前在 4:3 的螢幕上不需要,反而當 16:9 的寬螢幕一出現,我就覺得這種東西擺在這裡比較好看了咧?

原因無它 (好啦,也許真的有其它原因,但我現在想不到),就是因為人類會自然而然地想去維持一個接近黃金比例數的矩形視覺/操作區域。

但即便如上圖,已經有了那些「大而無當」的 App 把視覺/操作區域切割成接近黃金比例數了,我還是覺得很刺眼,而建議還是把工具列放在左邊去呢?

原因有二:
1). 我買了這麼大一個螢幕,結果卻有一塊「大而無當」的區域佔著我的螢幕…那我花錢是買心酸的嗎?

2). 電腦螢幕上的文字閱讀方向是由左而右,由上而下。而當我在讀 paper 或是讀比較有內容的網頁文字時,已經專心投入的注意力,一定會在每一頁的「最下面」中斷,然後需要按個下一頁再回到螢幕的上端繼續閱讀。但如果剛好每次這個「最下面」的區域是一堆會提醒我「你有個未讀信件」、「有人傳訊息給你」、「這個檔案需要你的注意」、「那個程式需要你的回應」這種東西的話,那我怎麼專心讀完這篇文章呢?電腦是多工的,人不是啊!

好吧,就算基於以上兩個原因,所以工具列不放下面。那為什麼不放右邊,要放左邊呢?這個問題就簡單多了,因為大多數的軟體右邊都是換頁用的「滾動條」,如果我把工具列放在右邊,那麼就很可能會在用滑鼠移動滾動條的時候,又不小心啟動了什麼程式啊!

即便如此,一定也還是有人想說:「你剛剛說由閱讀時由左而右,那麼工具列放左邊,不就每一行都會受到影響了嗎?」

我的答案是:「不會影響!」因為絕大多數的文字呈現軟體 (不論是 PDF 閱讀器、文書編輯軟體或是網頁的版面設計) 都在左側留有視覺空白的區塊,但在下面卻沒有這樣的區塊。如下圖:
 

所以,在寬螢幕上把工具列放在左邊,才是在美學上 (我掰的) 最能讓視覺/操作空間的比例最接近黃金比例數,而且在實際作業時最能保持專注力的安排方式。

最後,還是老話一句…拜託各位「設計師」或是「工程師」(在台灣,這兩種身份要嘛就是同一人,要嘛就是彼此瞧不起的兩個人),請在設計的時候,多用一點心,好唄?您做出來的東西是要給「人」用的,當然要把「人」的因素考慮進去啊!

後記: 如果你已經有一個大螢幕了 (19" 以上),那麼請儘量不要每次都要把視窗「最大化」才能做事吧。最大化以後,要嘛就是編輯時的字太大,看不到上下文,很難維持思緒的一貫性;要嘛就是左右會出現一大塊留白,又變成浪費大螢幕的情況。 

Gnome 2/Classic 或是 OS 9, OSX 以及 Ubuntu Unity…等會有上下兩個工具列或是除了左側外,又多了一個上方工具列的桌面環境是「第二好」的選擇。原因有二: 


1.) 這個「第二工具列」都很細扁,通常也都在 28px 以下,視覺上佔掉的空間有限。 


2). 在上方的工具列很接近視窗的「放大」、「縮小」及「關閉」這三個按鈕以及每個視窗自己的操作工具列 (就是那些 [檔案] [編輯] [檢視] ... 什麼的),所以當我不是在「閱讀內容」而是在「操作軟體」的時候,滑鼠的移動距離比較短,注意力也可以比較集中。


至於究竟 Win8 的桌面設計出了什麼問題,為什麼大家都不喜歡?為什麼我喜歡 Ubuntu Unity 甚於 Gnome 3 (即便 Unity 運作起來真是天殺地慢)?向來注重「設計」和「使用者經驗」的 Apple 在寬螢幕上的 OSX 為什麼沒有把它的 Dock 移到左邊去?這些問題,我就先壓下不表,等改天受不了的時候再出來炮一下好了。

5 則留言:

  1. 想知道最後的那些問題XDD

    回覆刪除
  2. (此處提的是原始版,而非後來更新加上 [開始] 鍵的版本)
    Win8 的問題有兩點。一是搞錯了「手持裝置」和「鍵盤操作」的操作設備;二是搞錯了人類視覺尋物的本能。

    手持裝置的運算能力有限,畫面尺寸也有限,因此使用者一次「做一件事」是完全可以預期的使用情境。但不論是桌機或是筆電上的 Win8 就不能學手機顯示裝置的設計,一下就把整個畫面「只」給一個應用程式。從 Windows 95 開始,工具列上的多項任務的切換,就是一個成功的功能。但在 Win8 裡被拋棄了。

    另一個是,人類在透過視覺尋找物體的時候,會有兩個慣性:依顏色尋找,依位置尋找。也就是說,你會記得你隨手放在桌上的某個東西的位置,這麼一來你即便不用轉頭去看,也能把手伸向物品的位置,找到物品。但如果該物品的顏色和它被放置的位置的背景色是相近或是一致的時候 (e.g., 紅色的手機放在紅色的滑鼠墊上) 時,你就會特別需要瞄一眼以便確認手機的邊緣在哪裡,以便決定你的手指要移到哪裡。

    Win8 的應用程式在畫面的牆上「色彩過於繽紛,且位置任意變動」這麼一來,會讓人在使用 Win8 時,每次都要花不少心力在尋找程式捷徑在哪裡。這樣的介面用不了多久,就會疲勞了。

    綜合以上,都是 Win8 的設計問題。希望以上有解答您的疑惑。

    回覆刪除
  3. 請問 macOS 呢(向來注重「設計」和「使用者經驗」的 Apple 在寬螢幕上的 OSX 為什麼沒有把它的 Dock 移到左邊去?)? 相當好奇XDD

    回覆刪除
    回覆
    1. 改變使用者經驗這件事情,如果遇到「向下相容」的話,絕對是要閃邊成為次要考量的。

      macOS 從 OS9 開始,就把工具列放在畫面的最上面,和視窗分離。這件事情即便是遇到「需要吸引更多從 Windows 過來的使用者」的需求時,仍然選擇忽視使用者要求地「不變」。

      其實國內許多人搞錯了「注意使用者經驗/體驗」和「要讓使用者覺得爽」這兩件事了。使用者經驗/體驗之所以是用 "experience" 這個字,目的就是在表示「要和以前的經歷」有關。

      既然 OS9 的使用者的 experience 是把工具列分離後擺在畫面上面的,那麼就不會為了「讓 windows 過來的使用者覺得爽」而把工具列放到視窗上。同樣的道理,既然一直以來 OSX 的 dock 就是擺在畫面下方,而且每個圖示還自帶動畫效果的,那麼就不會再忽略這些 "experience" 而把 dock 移到左邊去。

      經驗,有時候挺不科學的!

      刪除