網站幕後花絮:設計「iCook 愛料理」

fOx 發表於 2011/11/10
作者 : Polydice Inc. 首席設計師  Leo Lin  (按:因為只有一位,所以是首席 XD)

我在十月初加入 Polydice Inc.,本來加入的目的是要專心設計 iOS app 的,沒想到第一個月的工作竟然是做網站,本來不打算再做任何網站,但聽到網站內容還是很愉快的動工了,因為做食譜網站似乎會給人幸福的感覺,對我或是對使用者都是。

一開始的要求是整個設計在一個月內完成,包含 logo、網站外觀、HTML 與 CSS,而且最後一個禮拜是要套版,實際可以用的時間只有三個禮拜,所以時間非常緊迫,要是沒有 ChiaChia 先行完成網站架構,以及貓西協助套版,根本不可能這麼快上線:儘管時間緊迫,最後呈現的結果還算令人滿意,不論在外觀或程式方面。

有心的鍋子

我們有個很好的開始,因為名字好:「iCook 愛料理」,不但簡潔而且中英文互相呼應,只要把本來名字的特色表現出來就好。

Logo 一開始想用傳說中的廚具 — 大同電鍋呈現:

但因為愛料理的發想者是做西式料理為主,所以廚具用大同電鍋又好像不太對,後來輾轉得知西方與大同電鍋有同等地位的廚具是 Le Creuset 的鑄鐵鍋

這時雖然還不知道 logo 長什麼樣子,但肯定看起來是個鍋子。

然後我就開始畫鍋子…。

一直畫一直畫,直到這個鍋子既像大同電鍋,又像鑄鐵鍋為止。

為了給這個鍋子一點個性,我想給他表情,這邊卡了很久,因為怎麼畫都是「: |」或是「:3」這種大眾臉。

在這期間我也不停的寫「愛料理」三個字,還跑去日星鑄字行挑了兩組鉛字,把它們印在紙上當做字型的基礎,萬一畫不出鍋子,至少還可以用中文字型直接當 logo。

在寫字的過程中,嘗試了不同的字型風格,也試了繁體字和簡體字,在寫簡體字的時候,我發現簡體字的「爱」裡面是沒有「心」的。

我想:「沒有心怎麼愛呢?這個字真悲哀。」

這樣一想,靈感就來了,心當然要放到鍋子裡去!接下來又是不斷的畫有顆心的鍋子,直到它看起來像「心」,又像個笑臉為止。

最後把鑄字行的鉛字放在旁邊,logo 就完成了。

愛料理的 logo,其實是鑄鐵鍋和鉛字融合而成的。(感謝 Fox 和 Amber 幫我借來超重的鑄鐵鍋。)

網站介面

比起 logo 來,這個網站的介面一開始需求就非常明確,整體說來有三個重點:

  1. 讀食譜
  2. 寫食譜
  3. 發掘食譜

讀食譜

我必須讓食譜盡可能的方便閱讀,並且要能在 iPad 與 iPhone 上順利使用,因為大家不太可能把電腦帶到廚房,但帶 iPhone 或 iPad 就沒問題,這是非常重要的使用方式,所以我們一開始就提供 iPad 與 iPhone 最佳化的版本。

你應該有注意到食譜頁面的特色:步驟間用線分開,並給予足夠的留白,用顯眼的紅色的數字開頭;至於步驟用的字體,我們大概是全世界食譜網站裡最大的吧。這一切都是為了確保使用者在廚房裡中距離閱讀時能一目了然。

寫食譜

寫食譜的介面是另一個重點,設計的目標是簡潔、簡潔、簡潔。非必要的東西,全部砍掉。不論是誰反對、不論後端難度增加多少,就是要砍。

經過不斷的爭論與妥協後,產生的結果就是現在看到的樣子,所有的按鈕都有它的必要的用處,但也僅止而已;我們的食材與步驟甚至不能調整順序,不是做不出來,而是仔細考慮後決定刪掉的功能。

另一個設計重點是食材的分組功能,這部份的靈感是來自日本的 Cookpad 使用者。由於 Cookpad 食材欄位不提供分組功能,所以他們的使用者發展出自己一套分組的小技巧,也就是在食材前面加上特殊符號。

例如食材欄位打上:

★ 醬油

★ 鹽

然後在步驟裡打:

把 ★ 和肉放在一起…

就是代表把標記 ★ 的食材和肉放在一起。

這個小技巧其實非常聰明,所以我們借用並延伸這個方式,只要你在食材前面加上中括號,再打進分類名稱,食材就會自動分組並上色。

例如食材欄位裡打:

[醃料]醬油

[醃料]鹽

在步驟裡則打上:

把[醃料]和肉放在一起…

這是一個沒有介面的設計,一開始我們並不認為一般使用者會去用被定位為「進階」的功能,沒想到上線後,幾乎所有的使用者都用了,感動。

此外,還有人把食材打在同一行:

這招實在很聰明啊!介面設計好玩的地方就在於使用者總會用意想不到方式去使用介面。

(不過我們還是希望每個食材能打在獨立欄位裡,這樣後端才能方便統計與搜尋。)

其他的設計考量大概就明顯多了:我們把「儲存」按鈕砍掉,所以所有變更都會自動儲存;我們不想有複雜的草稿系統,所以一次只能編輯一篇。這部份也讓寫前端 javascript 的 Lawrence 連續熬夜好久,辛苦了,簡單的界面是最難做的。

發掘食譜

第三個重點是發掘食譜,我們要讓使用者能發現各式各樣的驚喜,所以搜尋功能或是 Facebook 分享等基本功能當然是必備。但這部份介面設計能幫的上忙的有限,與其說是設計問題,不如說是人的問題。

我們的粉絲團由真心熱愛料理的 Amber 來管理並推動,也配備了功能超強的客服機器人,請盡量使用,另外,沒有做好餓肚子的心理準備之前 ♥,不要點讚 ♪♪ 。

我們做這個網站做得很開心,希望你們也用的開心。