Firefox 的新界面 Australis，分頁部分

已經開始有些媒體針對這個新的界面撰寫報導，事實上現在你也可以透過 UX Build 玩玩看。大家一眼就會看見的是分頁，我想順道就針對分頁的更動列出幾個自己覺得重要的事情：

弧線

Australis 的線條大概是目前瀏覽器裡最「弧」的一個（剛巧 Firefox 也是最「狐」的瀏覽器 -- 冷！）

上：Australis (in UX Build)   下：Google Chrome

 以我所知，有幾項設計理由：

• Firefox 在各版本間開始追求的、一致的設計語言：柔軟、友善，很多稜稜角角的東西都改成圓弧狀了。這樣的風格早已在 Firefox for Android 上呈現，現在桌機版只是（終於要）跟上而已。
• 速度感：不要問我這是硬扯的還是真的，反正有張投影片是在描述，這樣的弧線有跑車似的流線型感覺... 好啦是有流線啦，有沒有反映到感覺上，我就不知道了。

好看嗎？難看嗎？我覺得看久倒是意外的順眼，當初 Thunderbird 剛換上這個主題時個人讚譽有加，Firefox 換上多少有點不習慣（TB 跟 Fx 開的分頁數目有巨大差異），但使用 UX build 一陣子之後，我是還蠻喜歡的。

強調當前分頁

目前的設計加強「目前分頁」的存在感。一方面拜弧線所賜，相較於舊的設計確實更有「從網址工具列長出來、是一體的」的感覺；二方面，此設計削弱了背景分頁的存在感，除去框線使其融入標題列中。

有人覺得這會造成背景分頁較難辨識與瞄準，我是還好；但無論如何，帶來的好處倒是顯而易見，整個瀏覽器的分頁列確實變得更乾淨、更不打擾 -- 不打擾是 UI 設計上大家都想追求的東西，很高興 Firefox UX Team 不僅僅用砍掉元素的方式來整理標題列，在色彩、線條的設計上也投下心力。（例如，除了背景分頁框線不見之外，你有注意到兩個相鄰背景分頁之間變成直線嗎？）

其他

一定爆炸多人覺得這根本抄 Chrome，且不論每個瀏覽器都有上一頁下一頁、每個電話都有掛斷的鍵，我就舉幾個在分頁列部分跟 Chrome 一樣或不一樣的地方：

• 標題列不見了，有人討厭有人喜歡，我是喜歡的那一派（我之前一直比較喜歡 Chrome 在這部分的設計，精簡）
• 每個分頁的關閉鈕還在：雖然實際上用到的機會不大，相較於 Chrome 的背景分頁沒有關閉鈕，我比較喜歡讓它一直存在。
• Chrome 分頁太多時基本悲劇，還好 Australis 仍然保留這部分的堅持:

又，PTT 上莫名其妙有很多人覺得這樣的設計會浪費空間 -- 怎麼會？東西都要搭配各種環境一起看的，且讓這些截圖告訴你：

 

其實 Australis 的一大要點是凸顯「自訂」這件事情，此處的體現大抵藏在那個真的從 Chrome 來的 Menu 選單中。之後有機會再分享我的看法。

如果你有興趣要瞭解 Australis，可以參考 Wiki 上的設計文件及當時用來展示的草稿圖。

聲明

大概有人會覺得上面這些偏好單純因為我很少用 Chrome，事實上我不但每種瀏覽器都用（是啊，我想多瞭解），在過去半年也都用 Chrome 當主力瀏覽器。青菜蘿蔔各有所好，如果我剛巧就是喜歡某個多些，別覺得我太偏袒哪 :)

感謝 EvenWu

這篇是感謝文，原因如下：

其他的部份也要勞煩他照顧了，大夥如果有案子可以參考一下 ;)

LiveContent 佈景主題設定

這篇貼完應該會有人教我怎麼包 GNOME 的佈景主題檔... XD

如果想使用 CC:LiveContent 的佈景主題，自己做很容易：

1. 界面控制：Clearlooks
2. 顏色
1. 視窗：rgb(237,233,227)、rgb(0,0,0)
2. 輸入視窗：rgb(255,255,255)、rgb(0,0,0)
3. 已選項目：rgb(96,118,107)、rgb(255,255,255)
3. 視窗裝飾：Clearlooks
4. 圖示：Fedora （這不是那麼重要啦）
5. 桌布跟圖示：請看這裡

好啦，誰要教我？ XDD 晚點沒人教我的話我自己找資料好了 :P

台灣設計週筆記

週三中午溜到誠品很快的把台灣設計週各項展品逛過一遍，有些很有趣，簡單分享部分照片：

UKI HASHI （浮筷） by 小林幹也
筷子前端斜斜向上，我真的很喜歡這個，因為本人就是常常會找東西來架筷子的那種。有了這雙筷子就不需要筷架了！

吹泡泡 by 曾彥文。
我偏愛簡單的東西，月底回高雄做給家裡的小朋友玩 :)

凸點杯 by 楊宇民、周柏棟
這個要是有量產我可能會買。速食店杯蓋上面都有這種東西，能以「按」的方式標示內容物，這杯子則是讓大家自己按出自己的形狀，這樣就可以標明那個杯子是誰的。如果是我的話會搭配點字數字表一起賣。

這個導覽手冊上沒有介紹，所以我忘了名字跟作者... 我覺得這個「觸摸」的點子很適合讓觀光局在某個國外城市買一片牆來做，是能跟路人互動的廣告。

櫺格椅 by黃薰立
沈穩又大方的感覺。

翻身板 by 魏玄武、黃福康
利用童玩的特性，這個量尺可以伴著小朋友一路「翻」到長大，在尺上也可以夾照片、簽日期等等。好想要這個。

讓我們一起天天都剪紙吧 by 饒治葦
所以日曆可以變成「三百六十五個遊戲」囉？對喔，既然都可以變成 365 資訊或 365 折價了。

熊寶寶 or 熊飽飽 by 廖軍豪
驗孕紙，從小熊的肚子看出有沒有懷孕。很可愛，但不希望懷孕的應該不會買這個 ^^;

杯中花 by 22designstudio
杯子跟杯墊的搭配，頗有趣。

其他照片可以看我的 Flickr。

心得：我真的很佩服華碩設計，他們有很多可以用、很好用的設計品。另外，身為高雄/南投/彰化人，對於這類活動只在台北出現，心裡其實不是很樂意；不過這樣抱怨也沒什麼用，自己努力吧。

我 lag 了之 Web 2.0 視覺設計

這篇 Web 2.0 how-to design style guide 擺在 ScrapBook 裡很久沒看，現在不能上網就拿出來翻翻，以下是一堆簡譯組成的摘要：

1. 簡潔：「對於必須滿足的條件，以最簡要的功能滿足之。」
   • 簡潔比較好，因為：
     • 每個網頁都確實有目的
     • 讀者的注意力很珍貴
     • 設計師本來就該協助使用者找到所需內容（或讓他們看到該注意的東西）
     • 越多元素就越擾亂視線
   • When? Always!
   • How? a) 刪掉不必要元素 b) 試著換種簡單方式解決問題
   • 「『完備』該是減一分太少，而不見得是增一分太多」
   • 「只要在促進與讀者間的必須溝通上（有任何）需要，該放多少元素就放。」所以不是說別設計得很漂亮什麼的。與讀者溝通的資訊有軟硬之分，通常我們是要來軟的：
   • • 硬：不容模糊的純然事實，像是新聞、股價、時間、金額… etc.
     • 軟：較抽象的東西，第一印象、感覺、概念… etc.
2. 版面置中
   • 置中比較好，因為：
     • 直接擺中間比較直接，簡單。
     • 因為要簡潔，所以也不用擺得整個版面都是。
   • When? 除非有理由，不然就置中。例如 Web 程式可能會想在一頁中擺上許多資訊，那就不見得要置中。
3. 減少欄位
   • 欄位少比較好，因為：
     • 欄位少比較簡單
     • 要傳達的資訊會比較清楚
   • 建議不要超過 3 個欄位。
   • 有的特殊情形的確可以把 4 個以上欄位的版面玩得很好：Derek Powazek 的 blog，下方有四欄，那是要強調「要什麼就拿什麼」的感覺。
4. 區隔刊頭部份
   • 區隔刊頭比較好，因為：
     • 很容易明白這裡就是頁首
     • 在最開始就給使用者直接且強烈的印象。
   • 建議將 logo 放在最上方，隨後是主導覽列
   • 視覺上刊頭區應該與內文有所區隔
5. 以實色區隔頁面上的重要元素
   • 重要元素如導覽列、背景、內文、其他雜七雜八
   • 「實色」也可以是白色
6. 簡化導覽工作
   • 原則是又大又清楚，文字簡要達意（例如 MozTW 的「wiki」可能就不太好，我一直想改）
   • 「導覽列（在視覺上）跟其他部份要明顯區隔」
   • 內文連結應與純文字明顯區分
   • 簡化導覽比較好，因為：
     • 讀者容易辨識現處所在
     • 也容易辨識還可以去哪
7. 大 logo
   • 明確表現「我們就是這玩意」
   • 原則：
   • 能以各類方式呈現（內文、週邊）
   • 能清楚辨識、與其他商標區別
   • 表現品牌的內涵
8. 字體放大
   • 簡化頁面就有更多空間可以把重要元素放大
   • 字體放大比較好，因為更容易閱讀
   • 如果某些字體應該比一般的更大，應有理由，只為了「要像 2.0 網站」而放大字體沒什麼意義。
   • 如果頁面元素必定就是得那麼多（personal dashboard, web ap），那麼讓字小點反而可能較好。
9. 引言字體粗又大
   • 引言就用關鍵字句（Basecamp 的「Work well」是很好的例子）
   • 只用一次。
10. 用明顯的色彩
    • 區隔各部份、標示重要部份
    • 色彩是企業視覺辨識系統的重要部分
    • 用在非關鍵處時請慎加考慮，會吸走目光（看原文的例子）
11. 有質感的佈景
    • 2.0 網站大多（很小心地）使用 3D 效果來加強整體佈景的質感。
    • 重點是小心、適量。
    • 「如果頁面元素本來就設計得爛，再多努力也幫不上忙，先把基礎搞定再說。」
    • 不用 3D 效果的理由：
      • 要多費工夫
      • 會讓網頁變肥
      • 本來就不是「必須」要做的事
12. 漸層
    • 漸層可以營造氣氛
    • 要跟實色搭配才最棒
13. 光影效果
    • 例如 Apple 的 Aquar Style
    • 或者 2.0 Logos 最常見的倒影效果
14. 可愛的圖示
    • 用少量圖示引出廣泛意涵
    • 簡潔、可愛、富有意涵
15. 星形效果
    • 有類似大賣場「特價」的吸引目光效果
    • 一頁最多最多就用一次