寫在文前的補充說明事項：已經有好幾段活動當天的錄影上線囉！錯過這次聚會的朋友可以到 http://vimeo.com/groups/6555 看看自己錯過了些什麼；我自己講的「你所不知道的網頁親和力十件事」則可以在 http://vimeo.com/groups/6555/videos/2359137 看到，中間有些地方因為攝影機沒電了，所以用投影片畫面串場——誰叫你不來現場，錯過了別怪義務幫忙攝影的人！
這一篇是我給自由軟體鑄造場電子報的稿件，刊登於第一百一十六期 (2008/11/23)。
快樂設計師第四次聚會紀實
國內的網頁設計社群「快樂設計師」於 11 月 15 日舉辦了第四次的聚會，長達四小時的聚會當中，照樣涵蓋了各種不同面向的「設計」議題，從非常技客導向的題目到十足人因的議程都有，因此 60 人的名額在短短三天內就已經額滿。
活動由網頁設計師兼歌手（或者是歌手兼網頁設計師？）小海 tzangms 帶來的個人無插電演唱會開場，小海戲稱這是「音樂設計」的實務展示，呼應快樂設計師的主題。事實上，小海的歌聲的確感動了不少與會的朋友，也讓場面熱絡起來。
在小海之後上台的是林長逸 Leo Lin，他是國內知名相片書印製網站 hypo 背後的網頁設計師，分享的內容即是他如何打造 2008 年的新版 hypo 網站。Leo Lin 認為一個網頁製作專案，通常會包含 Idea、Design、Coding 三個階段，Idea 指的是確認需求、規劃流程，Design 指的是繪製圖示、確定風格、版面配置，Coding 指的是將所有的部分製作成 HTML/CSS 圖樣，而他往往三個部分都要全包；因此，他根據過往製作網頁的經驗，整理出六項網頁製作案的心得：
- 先用紙張。討論網站企劃案的時候不要急著開電腦，尤其不要打開 Photoshop 或任何雛形製作工具，否則很容易花了時間做白工；先用紙張與客戶溝通，纔能事半功倍。
- 問需求不問方式。確認客戶的需求即可，不用詢問實作的方式，因為那祇會給設計帶來不必要的限制。
- 不要問美感相關問題。十個人有十一種美感，尤其在溝通初期，不要給自己添麻煩。
- 掌握進度。
- 簡化。好的設計不是給使用者五彩繽紛的選擇，而是要說一個好的故事；因此不論是介面或結構，都應該要盡量簡化。
- 嘗試新東西。
Leo Lin 並提出了三項訣竅：
- 1 pixel matters。一個像素的差異，常常左右著設計質感。
- Use glyphs。Glyphs 是單色的小圖，在按鈕上適當添加這些單色小圖，可以讓設計更清楚。
- 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、行動設備自動判斷及支援、國際化、繪製引擎等不同方向，有志之士可以前往 http://blog.gaeo.org/ 一同參與。
除了介紹 GAEO 之外，Python 界的知名程式設計師 gasolin 也隨著上台，介紹了如何運用 GAEO 來製作 Facebook 及 funp 麻吉應用程式。
上半場的最後一個議程，是 deduce 介紹以 Rails 實作「成分分析機」的經驗，包括了各種資源的使用、贊助商的選擇等。deduce 認為驚人的流量來自於：
- 資料視覺化。用圓餅圖，尤其是搭配可愛手繪風字型的圓餅圖，讓成分分析機更能吸引使用者目光。
- 嵌入語法，讓分析結果能夠張貼到其他部落格等處，吸引大量讀者前來。
- 簡單，讓使用者樂於嘗試使用。
- 讓網友有發揮創意的空間，鼓勵網友交流彼此製作的分析機。
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 頻道吧！
留言