快樂設計師第四次聚會紀實

國內的網頁設計社群「快樂設計師」於本月 15 日舉辦了第四次的聚會，長達四小時的聚會當中，照樣涵蓋了各種不同面向的「設計」議題，從非常技客導向的題目到十足人因的議程都有，因此 60 人的名額在短短三天內就已經額滿。

活動由網頁設計師兼歌手（或者是歌手兼網頁設計師？）小海 tzangms 帶來的個人無插電演唱會開場，小海戲稱這是「音樂設計」的實務展示，呼應快樂設計師的主題。事實上，小海的歌聲的確感動了不少與會的朋友，也讓場面熱絡起來。

在小海之後上台的是林長逸 Leo Lin，他是國內知名相片書印製網站 hypo 背後的網頁設計師，分享的內容即是他如何打造 2008 年的新版 hypo 網站。Leo Lin 認為一個網頁製作專案，通常會包含 Idea、Design、Coding 三個階段，Idea 指的是確認需求、規劃流程，Design 指的是繪製圖示、確定風格、版面配置，Coding 指的是將所有的部分製作成 HTML/CSS 圖樣，而他往往三個部分都要全包；因此，他根據過往製作網頁的經驗，整理出六項網頁製作案的心得：

1. 先用紙張。討論網站企劃案的時候不要急著開電腦，尤其不要打開 Photoshop 或任何雛形製作工具，否則很容易花了時間做白工；先用紙張與客戶溝通，才能事半功倍。
2. 問需求不問方式。確認客戶的需求即可，不用詢問實作的方式，因為那只會給設計帶來不必要的限制。
3. 不要問美感相關問題。十個人有十一種美感，尤其在溝通初期，不要給自己添麻煩。
4. 掌握進度。
5. 簡化。好的設計不是給使用者五彩繽紛的選擇，而是要說一個好的故事；因此不論是介面或結構，都應該要盡量簡化。
6. 嘗試新東西。

Leo Lin 並提出了三項訣竅：

1. 1 pixel matters。一個像素的差異，常常左右著設計質感。
2. Use glyphs。Glyghs 是單色的小圖，在按鈕上適當添加這些單色小圖，可以讓設計更清楚。
3. Grid-based design。善用格線來設計，網頁會更整齊舒適。

接下來是由本次活動主辦人上官林傑 ericsk 介紹「機油」：Google App Engine Oil 設計框架。這個專案的發起動機，一方面是為了要更了解各項 Google App Engine 的設計與功能，另一方面則是要讓不熟悉 Google App Engine、BigTable 等技術的程式設計師，也能夠很快地從 Zend Framework 或 Rails 轉移。

目前的 GAEO 0.2 版將各種額外功能拆成外掛模組，並且支援將核心以 zip 壓縮等，讓核心盡可能縮小；另外還有一些 method 及 AJAX 補強等等。未來的 0.3 版開發方向，則是朝向 RESTful、行動設備自動判斷及支援、國際化、繪製引擎等不同方向，有志之士可以前往 https://blog.gaeo.org/ 一同參與。

除了介紹 GAEO 之外，Python 界的知名程式設計師 gasolin 也隨著上台，介紹了如何運用 GAEO 來製作 Facebook 及 funp 麻吉應用程式。

上半場的最後一個議程，是 deduce 介紹以 Rails 實作「成分分析機」的經驗，包括了各種資源的使用、贊助商的選擇等。deduce 認為驚人的流量來自於：

1. 資料視覺化。用圓餅圖，尤其是搭配可愛手繪風字型的圓餅圖，讓成分分析機更能吸引使用者目光。
2. 嵌入語法，讓分析結果能夠張貼到其他部落格等處，吸引大量讀者前來。
3. 簡單，讓使用者樂於嘗試使用。
4. 讓網友有發揮創意的空間，鼓勵網友交流彼此製作的分析機

deduce 並且表示，他自己也很意外，為什麼這樣的服務，可以吸引到這麼多流量；在他的開發過程當中，他只不過是先採用了日本網站提供的 API 來繪製圓餅圖，並且在 PTT 張貼了兩篇文章，就有這樣的結果，實在是始料未及。因此，deduce 做出了他的結論：如果你不試試看，就永遠不會知道結果如何。

下半場的第一個議程，則是由數位有聲書推展協會技術發展組副組長吳志超先生，實際示範 JAWS 螢幕朗讀軟體的使用情況。吳志超本人也是盲人，進行的是當天所有議程當中、最仰賴實際展示的一個，因此也發生了最多的狀況。

這個議程的第一個狀況是他花了較多時間說明，很晚才進入實際展示的階段，結果 Windows 啟動了螢幕保護程式，還原後瀏覽器就當掉了，只好重新開機。由於進入螢幕保護程式時，Windows 與 JAWS 都不會有任何提示，而 IE 當掉時 JAWS 也跟著沒反應，所以這一連串的過程，如果沒有旁人協助，盲人是難以處理的。

最後實際展示的時間大約只有三分鐘，但是在這三分鐘內，許多朋友實際聆聽到資料表格唸起來是什麼樣子，並看到網頁內的標題、鏈結等，會如何被取用，算是相當難得的經驗。

下午的第二個議程，則是由筆者介紹了「你所不知道的親和力十件事」，按照「不知道」的程度倒序介紹：

10. alt 及 longdesc 屬性的使用
9. Flash 的親和力功能，及 Flash Video 的字幕支援：以 YouTube 為例
8. DRM 對親和力的危害
7. Opera Mini 模擬器
6. 投影機的親和力
5. 以電話客服代替網頁親和力設計的不可行
4. 創用 CC 的親和力設計與微格
3. 運用圖片以增進親和力
2. 料理東西軍帶來的親和力啟發
1. 《網頁親和力：網頁多媒體實務》贊助方案

最後兩個議程，首先由快樂設計師社群創辦人布丁 hlb 介紹網頁設計及規劃時，所會用到的文件。hlb 介紹的是其中三種文件：用來表達功能及佈局的示意圖 wireframe、用來表達視覺呈現的模型 mockup、網頁雛形 prototype。通常這三種文件的使用次序是先 wireframe 再 mockup 最後 prototype，不過 hlb 指出台灣多半只有 mockup，國外某些網站如 37signals 的開發則是只用 prototype，也有某些公司是從 wireframe 直接跳到 prototype。

hlb 並簡介了 Axure RP、Photoshop、balsamiq mockup、Paper Prototype、polypage 等多種不同的相關軟體／製作方式，對於許多平常只接觸網頁程式開發的朋友，是個很難得的經驗。

最後一個議程則是由 othree 介紹 HTML 5 的最新發展。雖然這項規格預計要到 2022 年才會成為推薦標準，但是已經陸續有一些瀏覽器開始實作了。othree 用來介紹 HTML 5 的投影片本身，即是以目前已實作的 HTML 5 來製作，「我到目前為止就是在 live demo」，相當具有震撼力。

全部議程結束後，本次聚會也隨著閃電演說畫上句點。如果你錯過了這次的活動，下次可別向隅囉。請隨時關注 irc.freenode.org 的 #HappyDesigner 頻道吧！