簡約,但是不簡單──談The Big Pictures與feedly的感動,兼聊iPad

UI設計在台灣的網路界似乎不是很熱門的話題,許多新創網站,強調的都是自己在商業模式或是技術上的創新,鮮少強調自己是在UI方面作了什麼創新。坦白說,我自己寫網站,介面部分也常是弄得零零落落,好像沒什麼資格談這個〈汗〉。但…許多人也沒發明Mac,卻也在談操作Mac時他們的感動,那我想,僅以一個使用者的角度,談好UI給我的感動,應該不為過吧?

我想要與大家分享兩個網站。這兩個網站的特點是:它們在「功能」上都沒有特出之處。它們的功能,其他網站早就做過了,甚至連內容也不是自己原生的,它們所作的,僅只是改進原本的UI,如此而已。然而僅只是修改UI,我第一次使用時卻真的有感受到感動──同樣的功能,竟然可以做到這樣!這兩個網站,就是標題所寫的:The Big Picturefeedly

Members of the public enjoy a late afternoon walk on the frozen Lake of Menteith, on January 4, 2010 in Scotland. (Jeff J Mitchell/Getty Images)

↑摘自The Big Pictures──《Fire and Ice》原圖是1024×768,此為縮圖

第一個網站,The Big Pictures,相信很多人都有看過。這是波士頓環球報〈Boston Globe/boston.com〉底下的一個照片部落格。說穿了,這個部落格就是一堆新聞照片集。The Big Pictures在八八水災的時候作的莫拉克颱風專題,保持當時轉噗排行第一名好幾天,所以我想很多人都看過。此外,這次海地震災的照片集,在網路上也有高人氣。但關於這個部落格,網路上的介紹不多,僅能從網站介紹上看到,作者叫Alan Taylor,定期一、三、五發文,參加過SXSW但是鎩羽而歸。

The Big Pictures乍看之下真的沒什麼了不起:「那不過就是一堆大照片放在一起嗎?」很多人心理應該會這麼想。的確,照片集去無名、Flickr上隨便找都有一堆,新聞照片的話各大新聞網也都有啊,The Big Pictures不過就是圖大了點啊,有什麼好介紹的?

不仔細觀察的話,真的難以發現The Big Pictures的用心。首先,這個網站的照片,是以1024×768作為設計,如果你螢幕的解析度剛好是這個數字,請你點進去任何一個照片集,按下F11鍵,把瀏覽器視窗最大化〈同時也隱藏瀏覽器的網址列〉,這張大照片連同底下的敘述,將可以剛剛好嵌在螢幕內。待圖片全部讀取完畢,請你按下鍵盤的j與k,照片就會自動定位切換到下一張/前一張……你會發現,它變成投影片slide show。這就是The Big Pictures的最佳瀏覽法。〈螢幕下方的開始工具列,我會建議你用自動隱藏,把螢幕上的障礙通通掃光〉。

2010.1 070

↑The Big Pictures全螢幕顯示

The Big Pictures真正觸動我的,在於他在設計圖片大小的時候,幾乎是儘可能的把所有可用的螢幕空間都放進去,同時把照片的精細度放到最大,最下面再原汁不動的把新聞照片拍攝者在照片上原來的描述放進去〈是的底下的敘述不是亂寫的,那是拍攝者寫的〉。更讓我讚嘆的是,在柏林圍牆倒塌20週年紀念照片集裡,第12到第15張的照片竟然是可以切換的!照片乍看是20年前的,輕輕用滑鼠點一下,照片就會開始變化成現在原地點的新照片!我看到的時候忍不住罵了一聲髒話,這真的只有『滄海變桑田』可以形容啊!大家可以自己去點第12張試試,看會發生什麼事。

透過這些細節的修改,The Big Pictures盡量把照片的能見空間放到最大,給人的感動,同時也放到最大。看完我不禁在想:怪了,為什麼我以前看到的新聞照片slide show,都堅持要這麼小,都不能全螢幕播放?〈舉例,華爾街日報的slide show:蘋果電腦發展史

好,我們再來看第二個網站。這個網站叫做feedly,從名字大概就猜得出來是看RSS的閱讀器。RSS閱讀器?不是幾乎都被Google Reader吃掉市場了嗎?feedly有什麼特別的?

如果純論功能,很難有其他軟體及得上Google Reader,所以feedly也沒打算硬來,你只要用Google帳號即可登入,feedly會直接吃你的Google Reader設定,但是以「雜誌化」的封面呈現。同樣的功能,只差UI,feedly做出來的效果簡直好到「失明」,跟Google Reader真的是雲泥之別:

feedly_cover

↑Cover封面

feedly_ptt

↑用Feedly,感覺連看PTT都變得高級了起來

feedly_twitter

↑Feedly的Twitter閱讀畫面〈這功能不推薦,因為能往回追的推很少〉

feedly早在2008就已經出現,但是使用的人似乎一直不多,有興趣學習的人,可以參考這幾個網站的教學:資訊角落Browny Walking重灌狂人

看起來很有設計感對不對?沒錯,我認為它最重要的是把設計的風格帶進了我們現在的科技生活。有朋友笑說Google做出來的服務,功能強歸強,好像都沒有UI設計的感覺。比對完Google Reader與feedly,我真的一瞬間懷疑我怎麼能忍受醜醜的Google Reader達三年之久…

對於feedly,我的觀察有以下幾點:

  • feedly在設計上會自動隱藏多餘的資訊。feedly要裝外掛才能使用,如果你用firefox,它就提示你要裝firefox外掛;用chrome開,就顯示chrome的外掛連結;絕對不是那種列出一整排瀏覽器列表,要使用者自己選的類型。〈至於用IE開?哈他不會理你〉
  • 但也由於上一點,feedly認定只要是你閱讀過的,除非打星,否則一律歸類到history類別。這點導致尋找舊資訊相當麻煩,還不如回頭開Google Reader。
  • feedly UI操作非常順,幾乎不用什麼使用說明。當你想要做某些動作的時候,那個按鈕就會出現在你覺得他應該要在的地方上,非常不容易。
  • feedly最好搭配Google Reader的「資料夾分類」功能一起使用,否則出現的內容會雜亂無章;我的作法是,把所有RSS根據語言與更新頻率,通通放到資料夾內。我總共有台灣部落格、大陸部落格、新聞、PTT看板、UGC類熱門資訊集中器〈如玩聚與plurktop的熱門文章RSS〉等五種分類。先在Google Reader分類完以後,feedly看起來就清爽許多。
  • 跟The Big Picture一樣,feedly是少數你把瀏覽器用全螢幕瀏覽時,看起來不會『怪怪的』網站。

試用了feedly幾天,feedly在功能上還是有幾處讓我無法100%滿意,也許我暫時還是割捨不掉Google Reader。但只要feedly把舊文的問題解決,我相信很多人就無後顧之憂的直奔feedly的懷抱了。而,上面列的最後一點,是我在這篇文章,特別想跟各位聊的。

各位現在眼前的螢幕,有多大?我想大多數讀者還是用桌上型或筆記型電腦,螢幕大概也有個12吋吧。大小呢?可能大概就比一張A4小一點點吧。離開電腦,我們拿一張A4的紙回來,想像你要寫一篇文章,或是畫一張圖,或是…whatever。請盡量寫得漂亮些…

好,拿回來,再跟電腦螢幕比。請打開你的網站比較一下。剛剛在紙上若是寫文章的,請跟你的Word、部落格比;畫圖的,請跟相簿比。看到版面的差異了嗎?

希望有人可以理解我在說什麼。如果你有一張差不多大小的紙,你做出來的東西完全跟你在電腦上看到的東西差很多。事實上電腦螢幕越作越大,但在視窗裡面卻有很大的比例是留白的:留給工具列,留給網址列,留給廣告,還有留給留白本身。而真正值得關注的資訊,只佔螢幕小小一塊。Why?為什麼資訊本身,佔螢幕的比例總是這麼小呢?為什麼瀏覽器上方的網址列、旁邊的工具列,佔的面積會這麼大呢?

我並不是在批評現在的設計不好,我只是在想,現在我們看到的許多資訊產品〈包括網頁〉UI設計,也許是因為過去的種種包袱、也許是因為大家已經習慣,所以才這樣設計,但是這一定是最好的配置嗎?舉例來說,部落格其實可被視為是個人數位出版的一種格式。講到出版大家都會想到紙本書與雜誌美美的編排,那為什麼現行部落格的版面編排會跟紙本差這麼多呢?BSP後台的文章編輯版面甚至更糟。現行的部落格排版方式,到底只是把文字丟上網頁,還是有真的考慮過整個螢幕的大小、配色、工具列配置,把用戶體驗後最佳化的結果?

更進一步來說,Google Reader仍然是個很好的閱讀工具,它在功能面上幾乎做到十足十,所以對於強調實用性的使用者來說,Google Reader的UI就已經是最好的了。但是,這世界上有各式各樣的使用者。Google Reader的介面不見得能在每個人的心中都拿到滿分。而feedly,也許面向的是偏重設計感的使用者。然後呢?應該可以有更多種選擇的吧?

↑用feedly閱讀未來內容站長Tai的文章,剛好標題很適合這篇文章所以拿來用

昨天晚上Apple的傳聞許久的平板電腦揭開面紗,iPad終於面世。過去這幾年來,我總覺得有種奇怪的迷思,好像來自Apple的UI設計就是神來一筆。我只是在想,為什麼大家都在讚嘆Apple,為什麼就只有Apple的人想得到,其他人想不到?Apple的人到底是怎麼想的,才能想在別人前面?當Steve Jobs在發表會上說iPad看網頁的經驗much way better than PC & iPhone的時候,背後代表多少Apple花在UI上的努力?當然,Apple更厲害的是,他不止推出硬體,當他推出產品時,與硬體相對應的軟體服務通通到位,這點非常不容易,但超出本文範圍暫不討論。

↑iPad,推薦閱讀石墨工房的發表筆記

讓我們暫且把iPad是電腦還是手機還是中間產品這些放一邊。想想看,如果你手上有一張A4大小的紙,它上面的內容可以是看書、聽音樂、看報紙,都行。那你會希望這東西的版面配置長得什麼樣?操作是什麼樣?

我想,絕對不會是有一個開始功能表在最底下、網址列粗粗大大在螢幕正上方這種模式。昨晚發表的Apple iPad,完全就是根據使用者的需求,長它該有的樣子。

我們的思考,總是很容易侷限在一個框框裡,被框住了而不自知。然而總是會有一些人,會察覺這些框框的存在,並思考:「嘿,為什麼要有這些框框?如果拿掉會怎樣?」

嘿,為什麼新聞網站的照片slide show總是那麼小張?如果放大到全螢幕會怎樣?

嘿,為什麼RSS Reader的版面設計就是長這樣?如果作成跟雜誌封面一樣會怎樣?

嘿,為什麼寫程式不能直接抓截圖來寫?很多人寫教學文件都是抓截圖寫步驟的,為什麼寫程式不能這樣做?

↑最近vgod很紅喔!sikuli整個把我嚇到了

以上感想,就是The Big Pictures跟feedly給我這個UI外行人的感動。內容、功能都可以是別人的沒關係,只有好的UI,也可以是一個好網站/服務/whatever。

推薦閱讀:

Donald Norman 《設計&日常生活:如何選擇安全好用的日常生活用品》(The Design of Everyday Things)〈MMDays閱讀心得

喜歡這篇文章嗎? 分享出去給作者一點鼓勵吧!