Google Reader、日曆、 Gmail、 Twitter 專用新極簡佈景主題替換

helvetireader-00我以前幾乎沒有想過要更改我的Google Reader、Google日曆、GmailTwitter等網站的介面,一直到看見「Helveti~」這個風格系列的佈景主題,它們提倡極度的簡約留白,在透明乾淨的空間感中把主體內容突顯出來,利用大範圍白背景黑體字中少量紅的點綴對比讓版面看起來特別舒適。對於需要長時間使用上述網站的我來說,似乎讓閱讀這些網頁變成了一種趣味、優雅的享受。

這個系列的佈景主題,分別是由三位不同作者設計提供的。首先是「Helvetireader」的作者Jon Hicks針對Google Reader設計出首款極簡風格的主題,他把一些原本介面中不必要的元素去除,必要的元素簡化,並重新配色出他覺得閱讀起來最舒服的版面。接著「Helvetical」的作者Ad Taylor非常喜愛Jon Hicks的作品,於是依照其概念,轉而針對Google Calendar服務製作出新佈景。最後,跟隨著Jon Hicks與Ad Taylor的腳步,第三位創作者josef richter依據同樣的風格概念,製作出了針對Twitter(Helvetwitter)和Gmail(Helvetimail)的新佈景主題。

很有趣的故事,不是嗎?一種優秀的概念在網路上被喜愛的人重新創作,繼而讓更多的好作品因此產生。而為什麼一開始的首創者Jon Hicks要把這樣的佈景主題取名叫做「Helvetireader」呢?這應該是來自於「Helvetica」這個詞彙,根據維基百科的說明,這是由瑞士設計師所研發的知名字型,該字體的設計理念為:「字體應該像一個透明的容器一樣,使讀者閱讀時專注於文字所表達的內容,而不會關注文字本身所使用的字體。」據稱這也是蘋果電腦的系統預設字體。

你說我們可以去替換網站的佈景主題嗎?當然,我們不是真的去改變那個網站的設計,只是透過在瀏覽器安裝相關的輔助工具,讓網站經由瀏覽器呈現後會看起來不一樣。而上述四個佈景主題,其官方網站說明可以透過不同的方法讓佈景主題使用在一些不同瀏覽器上(Firefox、Opera、Google Chrome、Safari、Fluid等)。

因為方法都各有不同,所以我這邊就只針對我熟悉的Firefox用法來做介紹。

為了響應極簡風(誤~),所以這次我就不特別解釋GreaseMonkey是什麼了,以後有機會再來專文介紹。總之,先在你的Firefox中安裝好這個「GreaseMonkey」就對了,這樣接下來才能安裝後面的佈景主題替換套件

安裝完成並重新啟動Firefox後,你可以在下方系統列看到GreaseMonkey的代表猴子臉圖標,這樣就完成第一步囉!

helvetireader-05

 

接著我們來到Helvetireader的網頁,你可以在網頁下方的中間欄位找到「How to use the theme」區塊,點選「Install as a userscript」即可

helvetireader-06

這時會彈出一個安裝視窗,直接點選〔安裝〕,這時候不需要重新啟動Firefox,打開你的Google Reader頁面,就可以看到新的極簡佈景主題。因為這系列的主題可能會去除某些功能或改變介面位置,如果你覺得不太習慣,或是想暫時換回原本介面,只要到瀏覽器下方用滑鼠右鍵點擊猴子圖示,把「Helvetireader」這個套件腳本取消勾選即可

後面幾個佈景主題也是一樣的安裝、取消方法。

helvetireader-07helvetireader-11

以下就是「Helvetireader」的佈景主題,這時候與其用文字描述的不如讓讀者自己來看圖片示範,是不是把Google Reader變得非常簡單、清楚又具有一種優雅的美感呢?

helvetireader-01

 

同樣的來到「Helvetical」的網頁,因為是不同作者做的不同主題,每個網站都長得不太一樣,下載點也不是那麼明顯,這次是在網頁的左下方「Usage」區塊,點選「user script」即可安裝。

helvetireader-08

接著進入你的Google日曆,就可以看到一個煥然一新的白色清爽介面,請大家看看圖片示範囉!

helvetireader-03

 

來到「Helvetwitter」網頁,這次的下載點在網頁右方側邊欄偏下方的位置,找到「Firefox」這個項目,點選「helvetwitter.user.js」這個連結進行安裝

helvetireader-09

安裝後,來到你的Twitter頁面,這時候整個Twitter只剩下白色、黑色與紅色,版面上也只剩下訊息流的部份,那些側邊欄全部被取消,中間的訊息流還增加了「自動更新」的功能,讓你專注於資訊流的閱讀、回覆、發佈之上。

helvetireader-04

 

最後來到「Helvetimail」網頁,這次下載點在頁面下方,找到「Firefox」項目,點選「userscript here」,就可以完成安裝。

但是接下來要特別注意!這個Helvetimail還多了一個設定步驟,就是你必須到Gmail後台設定的「背景主題 Themes」頁面中,把自己的Gmail佈景先切換到「極簡 Minmalist」這個主題,這樣才能和Helvetimail搭配在一起而呈現出最好的效果。

helvetireader-10

Gmail網頁同樣被替換成非常簡樸素雅的白色、黑色與紅色搭配。我尤其喜歡這個風格裡善用一點點的紅色來凸顯出一些重點功能,而大部分內容則留給黑色,這樣產生的對比反而更強烈。

helvetireader-02

 

  • 小結:

設計真的是一件很有趣也會讓人感動的事,我其實也覺得原本Google Reader、Google日曆、Twitter、Gmail的介面設計都很優秀,不過有時候換個佈景主題,其實就是換個氣氛、換個心情,甚至換個態度,而今天介紹的這個極簡主題,似乎正教著我們應該要學習專注、練習簡單,很有意思,感興趣的朋友也可以安裝來玩玩看喔!

留言

  1. 喔喔~~可以這樣用喔!!!nice喔~~感謝提供新知!!!
    (嘿~坐到沙發了)

    網站設計

    回覆刪除
  2. Helvetimail雖然不錯,但是在編輯新信的時候,填入收件人欄位時,auto-complete帶出來的東西,「反白」的效果不見了 =_= (應該說css可能也是設定成反白色,但底色已經是白的了,整個反白的效果就沒了)

    回覆刪除
  3. 嗯嗯 版面設計上會和原本不同,就看是否能接受了

    回覆刪除
  4. 好像用了Helvetireader之後之前的 gReaction 就因為被 "極簡化" 之後就看不到了
    不知道大家有沒有這樣的問題
    要該如何克服?

    回覆刪除
  5. 我自己用的時候好像有時候會被遮住
    但大多時候還是有顯示出來耶

    回覆刪除
  6. 安裝後 當按下關閉火狐時 會出現"是否要關閉多個分頁"的提示
    請問可以去哪裡修改這個問題呢?
    網路上找到一些是更改about:config的方式 但不確定究竟要怎麼操作
    希望自動回覆上次瀏覽記錄
    順帶一提我是3.5版本的

    回覆刪除
  7. 如果是要解決回復上次關閉分頁的問題

    可以使用這個擴充套件:
    http://playpcesor.blogspot.com/2007/04/firefox-save-session-1304.html

    回覆刪除
  8. google reader妝了好像就不能"全部標示為已閱讀耶"XD

    回覆刪除
  9. 可以喔 只是按鈕被移動最下方
    在版面最下方找找看
    就能看到:mark all as read了

    回覆刪除
  10. 可惜...不支援Google Chrome

    回覆刪除
  11. 太棒了,非常感謝 ^^ 越来越喜欢google~

    回覆刪除
  12. 安裝了Helvetical後,原先頂部的捷徑沒有了,跳到gmail,reader也沒有原版設計那麼方便

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Google Maps 我的地圖完全教學!規劃自助旅行攻略

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

Google 表單自動關閉回覆教學:時間人數到達就過期

為什麼大家愛用 Trello ?最佳整理教學讓事情井然有序

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學

最簡單養成習慣方法是「解決問題」,不靠時間表、獎懲與意志力

Excalidraw 免費 AI 生成流程圖,一鍵畫出知識圖表、專案流程、寫作大綱