本文為 2020.12–2022.06 參與專案的心得，業餘的時間有限，並沒有參與整個專案的所有細節，就針對我知道的寫。

2020 12 月與家人一同出遊來到台東都蘭，住的是晚上能夠清楚聽到海浪聲的木造小屋，在大廳閒聊時搭訕一個獨自旅行的可愛女生，一聊才發現我們根本有共同好友？！她拿出手機給我看她正在參與的專案，原本度假鬆鬆的腦袋運轉了起來，「我們現在剛好缺設計喔！」小班說。

於是休假結束回到台北後，參加 disfactory 每週三晚上在地球公民基金會（以下簡稱地公）的小聚，聽了議題介紹後覺得很值得投入，就一直跟到現在。

disfactory 是做什麼的？

簡單說，disfactory 是個回報系統，給家旁邊有違章工廠、但不想惹事的人，用手機定位、拍照上傳的方式，有了照片，就可以讓地公的成員去向政府出公文檢舉，進而讓工廠被稽核、甚至斷水斷電。

在沒有這樣的流程之前，因為利益關係（背後還有很多原因在此不贅述），地方政府不想管違章工廠，而在地公這幾年的努力下，現況改善很多，地方政府甚至開始在這塊編列人力預算。disfactory 回報系統在給政府、違章工廠施壓這塊，確實有用。

disfactory 除了回報系統網頁，還有後台管理系統、批次產出公文的功能等等，是個龐大的軟體服務，參與貢獻的人來來去去，靠強大的 PM 小班（可以讀她的分享文）還有地公的人們定時定量的把大家聚合起來，這點是我覺得這個專案最了不起的地方。

disfactory 官網設計

官網：https://about.disfactory.tw/

進到地公後才知道，議題的深度與廣度都很重要，所以靠媒體報導、民眾間的傳播、教育等等，都是議題推廣重要的一環。網站的上線時程與政府政策的時間點有很大的關聯（為了記者會能有東西看）。

行銷的切入點：食安

在製作官網的內容之前，花最多的時間是討論行銷的切入點，也就是首頁 banner 要擺什麼？過程雖然我不是主要發想者，但是在跟著大家來回提出想法、辯駁的過程中，學到蠻多的。

本次定調議題需要與民眾溝通，期望的是要能勾起人民的不滿（與人民的生活產生連結），進而要求政府改善，因此將「農地違章工廠」與「食安」做連結，又因為當時正好要過農曆年，發想出的「我肚子裡的年菜有被工廠加料嗎？」的構想，並且能讓來的人填寫自己的家鄉，來查看該區域有多少違章工廠。

設計發想與製作

有了構想之後，花一週的時間把其他地公想要呈現的資訊圖表，畫出 wireframe，接著討論修改，再花一週的時間畫 UI、研究圖表呈現套件，因為時程非常趕，速速開會討論的過程中，另一位設計 SL 就把一桌年菜的插圖生出來了。在 disfactory 做事，常常會有種感覺是 —— 正忙的時候就會有人出手把剩下的事完成。

接著就是一邊修改 UI、文案潤飾、補上手機版本，一邊前端開發、調整 SEO、製作行銷圖片，混亂的就在農曆年前生出官網了。

農曆年過後成果檢討，雖然沒有如預期的製造出一波年前分享大熱潮，但是官網整體的資訊與圖是穩穩的有新的使用者成長，大部分來自於記者會、新聞報導、自然搜尋流量。

參與的學習

團隊合作的過程就是每週三晚上定時的聚會，可以選線上參與，或是到實體辦公室一起討論。對我自己來說，參與 side project 的好處就是脫離工作的舒適圈，跟不同的團隊人員合作、激盪不同的火花。特別是行銷討論的腦力激盪，雖然燒腦，但是很有趣。

因為是使用 Figma 製作頁面，與大家的協作都方便許多，PM、地公的人可以在上面留言，其他設計可以協作修改，前端可以自行出圖。

在與其他的設計師協作的方面，個人也是獲益良多，因為本身一直都是公司的一人設計團隊，關於如何交接、如何帶新人、如何分配工作⋯⋯都是很好的練習。

最後我在前端製作前有大概出了一份 style guide，版切出來後跟圖長得一模一樣🥰 身為設計覺得非常感動。

What’s Next?

利用衛星空拍圖來判斷是否為違章？

遊戲連結

一次小聚 PM 提出：利用比對衛星空拍圖的方式，是否能更快找到違章工廠？由此開啟了這個將近一年的專案。

✨ 成果：在 2022.05.01 上線後，我們資料庫需要被辨識的點位瞬間就被廣大的群眾辨識完了⋯⋯ 目前收到了 42,501 筆來自民眾辨識的回答，成功送出回答的使用者數量： 6,040（持續累加中）

算是有達到我們當初設定的目標：用不同的方式接觸人群、讓人參與。

產品雛型

一開始討論產品定位，決定這個遊戲是擴大議題推廣的手段，辨識點位是其次（因為也可以請工讀生來辨識就好），以不同的形式讓「違章工廠」這個議題接觸到更多的人，所以用「鍵盤參與」跟「實際回報違章工廠」的系統作區別。

決定好產品定位後，產品開發那邊就開始找地圖的來源、可疑點位的來源、辨識圖資的顧問（神奇的有很多這方面有經驗的人的幫助）、擬定辨識規則、找前端後端人員。

行銷、設計開始想要怎麼把無聊的點位辨識包裝成遊戲。

產品設計

設計上花最多時間的有兩點：

1. 教學流程：讓使用者理解辨識的規則（是沒有正確答案的、並不是遊戲），並順利完成辨識。
2. 模擬簡易的 8-bit 風格，讓辨識有趣吸引人。

這過程中 wireframe、文案大概改了八百個版本，雖然都有做 prototype，但一直到前端把畫面刻出來，實際找人做使用者測試後，才將文案與流程調整成大致上好懂的模樣。

而會選擇 8-bit 風格是因為「遊戲」直覺的聯想，以及看到地公之前也有用 8-bit 做網站頁面，效果很不錯，這種風格明顯的設計就是一種「站在前人肩膀上」的設計，可以比從頭發想視覺，要快速的讓使用者進入「遊戲感」的狀態。所以就花了一些時間學習怎麼畫 8-bit 風格的圖。

我這邊最後花了一些時間把圖片做成可以動的 gif，將首頁、ending 的動畫調順（盲看我還看得懂 vue.js 😭）並且在上線前埋了流程的 GA event，終於在開啟專案的一年後完成上線。

另外官網的入口設計、不同管道的分享的行銷圖片，也在大家的速速討論 idea、協力下完成了。這個專案最大的苦主應該就是前端了，遊戲感的 style 原本就不好切，原本是切版生手的他做完就變切版王了 👏

檢視成果時，設計 SL 建立了 datastudio 查看 GA 數據，真的比 GA 原本的爆表要好懂很多：

小結

回到文章一開始的叩問：軟體服務真的能改善社會嗎？在這個專案一年多，確實有看到地方政府動起來，議題也有不同的媒體報導、接觸到不同的人，另外聽到地公也因為與我們（善用科技的人）協作，間接讓基金會朝數位轉型方向邁進——例如：以前他們是都不寫文件的（竟然？）、溝通是用 Line 以及各種四散各處的管道⋯⋯這些改變也是大家一開始沒想過的。

而能夠認識議題、不同興趣的人，更是參與專案、學習技術等等以外，最珍貴的事了。

心動了想加入嗎？

• Disfactory 跳坑指南：https://g0v.hackmd.io/@yukaii/Disfactor
• GitHub Repo：https://github.com/Disfactory

三串（一串 20 顆）的份量

• 豬肉 ⋯⋯ 5 斤
• 綠竹筍 ⋯⋯ 3.5 斤
• 圓糯米 ⋯⋯ 3 斤
• 長糯米 ⋯⋯ 3 斤
• 粽葉
• 醬油 ⋯⋯ 420ml
• 紅蔥頭 ⋯⋯ 一堆
• 蝦米 ⋯⋯ 一包
• 菜脯 ⋯⋯ 一包
• 乾香菇 ⋯⋯ 0.33 斤
• 栗子 ⋯⋯ 1 斤
• 鹹蛋 ⋯⋯ 32個

泡米

前一晚浸泡（至少 8 小時）

我們家是使用長糯米、圓糯米各半，母親說，長糯米是中和的阿嬤、圓糯米是新竹的阿嬤的用法，在她這邊喜歡兩種各半，「長糯米 Q 圓糯米軟，綜合起來剛好！」

備料

浸泡：蝦米、乾香菇、栗子

炸紅蔥頭

要先炸豬油，後用豬油醃過切絲的紅蔥頭，半煎半炸，至金黃。

切鹹蛋黃

買紅土鹹蛋是最讚的喔。切半備用。

滷肉

肉（米酒、薑片、辣椒、八角、冰糖、醬油、水）滷 2 小時。

肉是前一晚打電話先跟豬販訂的，給我們的是胸口的肉，滷起來不乾柴（一斤 180 的貴），切小塊。另外再請他切一些肥的回來我們切小塊參入。

滷竹筍+栗子+香菇

竹筍切成 180 個小塊（我不知道我媽為何要算這個⋯⋯）。香菇切 1/2。

滷汁搖舀出一些，滷另一鍋：栗子 20分鐘、香菇 10分鐘（可加點醬油或鹽巴）竹筍 10 分鐘，都分開滷味道才不會混淆。

香菇可以用炒的或是滷的。

炒菜脯

油、一些蝦米、一些油蔥炒香切好的菜脯。

炒米

最重要的步驟來了 —— 豬油爆香蝦米，拌入炸好的油蔥，這是炒料。

糯米分批與料、滷汁拌炒。滷汁不能太多不然米飯會過鹹也會太軟，這邊就是要靠經驗了。

翻炒是為了讓醬汁的香氣與米融合，並加入很多的白胡椒，不停的翻炒是讓米不要黏鍋，要分批拌炒是因為鍋子不夠大。炒米這個步驟挺累人的，約莫分了三批。

包粽子

兩片粽葉折成漏斗，飯壓實、兩個竹筍、一顆栗子、一塊肉、兩片香菇、半顆蛋黃，蓋上飯壓實。壓實這個動作是讓形狀漂亮。

包好後，入鍋大火蒸至少 40 分鐘，中間水不夠要補水。

步驟一：挑選蔬菜

所有的蔬菜都可以做發酵，可以先從你想要什麼料理出發，例如想吃酸豆炒肉末、酸菜白肉鍋等等。

盡量挑選友善農法的蔬菜，好菌比較多，較不容易失敗。但今年我買不到大白菜，有用傳統市場的白菜製作，也是很成功。

步驟二：準備玻璃瓶、石頭

準備適量大小的玻璃瓶，要比你準備的蔬菜小，因為蔬菜會軟化。要讓蔬菜塞滿瓶子，最後用石頭壓下去，讓蔬菜完全浸在水裡（厭氧發酵）

石頭要小心有的材質會因為酸性腐蝕（我後來整罐丟掉 QQ）用無色的玻璃製品也可以（例如布丁小罐）。陶瓷的怕有上釉不建議。

步驟三：清洗

蔬菜用煮沸放涼的水清洗，刀子、砧板、容器也是。盡量晾乾。

玻璃瓶、石頭用煮沸的水淋過消毒（小的玻璃瓶可以直接入鍋煮，但是大的我都用沸水淋），晾乾。

步驟四：鹽漬軟化蔬菜

葉菜類、長豆不用切，或是稍微切就好，蘿蔔、番茄、茄子等等可以切成適口的大小。

用蔬菜重量的 2%-3% 的鹽巴（使用日曬海鹽），均勻的抹在蔬菜上，讓他出水軟化，放在鍋子裡靜置 1–2 小時，不要超過半天。切絲的比較好出水。

步驟五：裝瓶

一定要注意，瓶子塞滿滿的最好，因為需要排除氧氣發酵。蔬菜出水不夠的話，再添加 2%-3% 的鹽水把瓶子加滿。

發酵期間蔬菜可能會再出水，底下可以墊一個大盤子，一兩週後就趨近於穩定了。

最後：等待發酵時間 — 兩週-半年

發酵時間視溫度而定。陰涼處的話，葉菜類的（例如大白菜）可以放到三個月，根莖類的（紅蘿蔔、蒜頭等等）可以放更久，半年、一年都可以。

溫度 25度的話，最快約莫兩週就可以開瓶來吃了。酸白菜的冬季，我家室溫約 20 度，需要放一個半月再開瓶。放越久越酸，酸白菜的話不要放超過三個月。

#酸白菜 #發酵蔬菜 #發酵番茄 #發酵茄子 #發酵高麗菜 #發酵蒜頭 #發酵甜菜根 #酸豆 #發酵菜梗

參考書目

• 《發酵聖經》
• 《發酵女巫的魔法課》（北投社大）

參考影片

小高姐
酸豆：https://youtu.be/YBPZ4xM4rj8
酸白菜：https://youtu.be/5oxCz8CAQ5M

康普茶對我來說，就是一種自家製的氣泡飲，自從開始做康普茶之後，我就很少晚上喝啤酒了⋯⋯還是酸酸甜甜的飲料好喝。

步驟 0：將玻璃罐洗乾淨，曬乾，裝菌膜

罐子裝了菌膜、一點點醃過菌膜的康普茶

步驟 1：煮茶湯 + 糖

我通常是用單柄鍋煮，因為他有刻度，可以準確知道煮多少 ml，比例參考如下：
🔸 1000ml 水：5g 茶葉：80–100g 糖
🔸 糖我用二砂
🔸 茶葉一開始用紅茶（選擇有完整原葉、友善農法的佳），之後想試別的可以試

用濾網過濾茶葉，後加糖攪拌、放涼。煮茶的鍋子、湯勺要洗乾淨不留油污。

步驟 2：茶湯放涼，裝瓶

剪家裡不要的碎布封瓶，防止蚊蟲沙塵，堆放在家裡陰暗角落，康普茶為好氧發酵。

步驟 3.1：收成，開喝

🔸 收成觀察：
覺得喝起來有酸稍微甜，沒什麼茶味，氣泡旺盛，有新長一層白膜就可以收成了。味道憑個人喜好斟酌。

🔸 收成（約莫的）時間：
冬天約莫要等 10–16 天才會變酸，夏天大概 3–5 天，我通常是走路經過他的時候，聞到明顯的酸香味，就知道要收成了，有事來不及收也沒關係，就是會變得比較酸一點，越來越像醋。
時常晚上到家已經 10 點多了，還是打起精神來煮茶湯，就是不想喝過酸的康普茶。

🔸 收成方式：
用漏斗裝，可以用家裡的任何有蓋的罐子，放冰箱的話塑膠瓶的也無仿，我用以前留下來的啤酒瓶（撕標籤撕到厭世）。

放冰箱延緩他的發酵，停在收成的狀態。

步驟 3.2：收成，做成康普茶二次發酵

簡單產生更多氣泡的方式，在收成的時候用密封良好的瓶子，加 0.3 茶匙的砂糖，搖晃混均勻、開蓋排氣，放常溫 1–5 天，視氣溫而定， 室溫 20–25 度、放 2 天是二酵發得最順利的。每日記得打開排氣，

想調味可以加蘋果或各種切碎的水果、洛神、桑椹果醬、金桔果醬、各式果醬，總之就是要給他一點糖讓他繼續生長，多做幾次就會抓到那個節奏。

果醬比較方便是因為不用切，又含糖。

每日打開排氣時會有白色香檳煙從瓶口冒出來，記得要在流理臺開。夏天比較熱，需要早晚各開瓶一次，不然會爆瓶，試過隔一天再開瓶就半瓶流光光。

步驟 4：製作下一批

收成留下一點康普茶跟菌膜，我通常每次都會把最上面新生成的白白、薄薄的菌膜留下（用手撕開），上一批的菌膜丟棄（或吃掉），保持每次都是白白淨淨的薄膜。膜太厚的話味道會過重不清爽。

然後就煮茶湯接續製作。

覺得瓶子底部開始有點混濁時，可以把菌膜撈起，清洗晾乾瓶子，通常我 1–2 個月洗一次。

不接續製作的話，將菌膜泡在康普茶裡，也是可以存放個一兩週（吧）。

備註

製作康普茶的器具與手我不會特別消毒，用乾淨的布或紙巾擦乾即可。

參考書目：《愛上康普茶》ISBN：9789869906128、《發酵聖經》ISBN：9789866179730

仿間常見的梅酒食譜會使用高於 40 度的酒當基酒，往年我也是做那種泡酒，但今年開始研究發酵食品後，才知道釀酒的原理，要讓水果本身的酵母發揮作用才行。

步驟 0：將玻璃罐洗乾淨，曬乾

步驟 1：將梅子洗淨、順手去蒂頭，確實風乾

把家中各式容器都拿出來（例如電鍋蓋⋯⋯），讓梅子只有一層，並翻動一兩次，在天氣好的日子，一下子就乾了。

步驟 2：將梅子分批用乾淨的容器量重量，方便估算糖的量

心中有個底知道大概多少就好。

步驟 3：梅子用小刀劃十字，一顆顆丟進玻璃罐中，過程中可以一邊加糖

這個步驟是整個過程中，最需要耐心的。一層梅子一層糖。

🔸 糖可以是梅子重量的 30%-50%，我用 40% 冰糖 + 砂糖。
冰糖的融化效果比砂糖好，混用只是因為現場剛好不夠。

步驟 4：封瓶，待 3 日後糖水融化，每日早晚搖晃，使上層梅子均勻沾上糖水

搖晃很重要，不然上層會發霉。
我觀察梅子的每日變化，同一時間裝瓶的，起泡時間不太一樣呢。在第 16 天才全部的瓶子都起泡。原本擔心大顆的冰糖不好融化，沒想到它是融化得最快最均勻的。

步驟 5：待氣泡消失、梅子下沈即可不照顧

約莫塵封半年～一年可以開喝，也可以再放更久。

過程中注意

避免雜菌污染，罐子、梅子、雙手、各種容器、刀子，都要確實風乾。不用酒精消毒其實沒關係，可以相信酵母會戰勝雜菌的。

旁軸相機(Rangefinder Camera，簡稱RF)安靜、景窗大、輕巧，機體的設計讓他不需要反光鏡，一般的傻瓜相機皆是旁軸，專業等級的最有名的大概就是萊卡的 M 系列。

Contax G1 強項：鏡頭

而 Contax G1 擁有難得的優秀自動對焦與測光系統，不過他最大的優點還是他的蔡司鏡頭。

詳細參考：Carl Zeiss 卡爾蔡司 常見鏡頭類型特色

G28：Contax G Zeiss 28mm f/2.8 Biogon

• 鏡組：5群7枚
• 光圈葉片：6片
• 光圈值：f2.8-f22
• 口徑：46 mm
• 最近對焦距離：0.44 公尺
• 重量：約 150 公克

Biogon 具有對稱式鏡頭設計的典型特點：幾乎沒有變形、色彩修正效果出眾，且成像平面異常平坦，為蔡司廣角鏡頭的指標性產品。

歷史上 Biogon 鏡頭只有不到 10 支，價錢上比 G28 高上兩倍，而 G28 在重量、畫質、外型質感上算是 cp 值很高的鏡頭。我自己用起來覺得與常用的 RICOH GR 街拍的感覺很像，但是成像完全不一樣。

G45: Contax G Zeiss 45mm f/2 Planar

• 鏡組：4群6枚
• 光圈葉片：6片
• 光圈值：f2-f16
• 口徑：46 mm
• 最近對焦距離：0.5 公尺
• 重量：約 190 公克

Planar 是能夠在大光圈下無像散，且能對球面像差做大幅度矯正的鏡頭，所以能夠光圈全開依然呈現銳利成像。一般說 35mm 是最接近人眼的焦段，而 45mm 則是在 35 與 50 之間，比人眼再更靠近一點點，街拍也是好用。

G90: Contax G Zeiss 90mm f/2.8 Sonnar and GG-3 Hood

• 鏡組：4群5枚
• 光圈葉片：6片
• 光圈值：f2-f22
• 口徑：46 mm
• 最近對焦距離：1 公尺
• 重量：約 190 公克

基本上 90mm 的焦段很少用到，但是因為是遠距焦段，價格又不貴，還是會想收，拍景別有一番風味。

相紙種類

1. 光面
2. 珍珠面
3. 超亮麗：偏洋紅，塑膠
4. 絲絨：偏黃綠，防指紋

介紹攝影師

A Double Life (1994)

by Nan Goldin, David Armstrong

這本攝影集拍攝他們的藝術圈、嬉皮朋友們，很多是同性戀、跨性別等等，這本攝影集有趣的是他凸顯了攝影師的眼光與氣質（包含使用的相機也會影響），還有被攝者與攝影者的反應跟投射。Nan Goldin 拍彩色、David 黑白，Nan Goldin 常常在室內用閃光，David 都是用自然光、中片幅相機。Nan Goldin 拍出來的照片非常自然與生活化，David 拍出來的都像是正式的肖像、比較傳統的構圖與表情。

我平常在拍攝朋友或是家人時，習慣趁聊天聊到一半的時候趕快按下快門，不想相片太過制式不生活化。

Nan Goldin 介紹

Nan Goldin 介紹2

伊島薰 Izima kaoru

《屍體之風景》（日文名：死體のある20の風景）

大概只有日本人能夠做到把屍體跟知名品牌連結得這麼好吧！超鬧也超強的。

色溫對於成像的影響

• 表現時間
  例如拍電影，透過顏色控制色溫，照射在主角臉上、生活環境，就可以看出這是清晨（黃）、這是黃昏（橘）、這是傍晚（藍）
• 表現季節
  冬天藍色、秋天黃橘。例如神力女超人整部片都用 T 型底片拍攝，整部片就是藍綠的。透過顏色色溫來表達溫度。
• 心裡因素
  這很有趣的是，電影透過色調的表現來呈現心裡的感受，這一本書《攝影・電影・電影・攝影——狂戀光影大師對話錄》介紹了很多經典的電影，如何運用光源來表現演員的內心狀態，在觀影時沒有自喜看不察覺，看截圖比對就非常明顯。
  恐怖片就都是詭異的綠綠。

利用色溫表現照片的感覺

海的放相練習

練習放了藍色、黃色的夕陽，掃描檔案是黃昏的橘色，但是我很喜歡後來放出的喜歡藍色的海，不過如果要重現當時的景，中間那中偏紫色的是條或許更接近（但沒心情沒時間再調整啦）

練習彩色暗房最有趣的是，之後拍數位在電腦修圖後製，對色彩的敏銳度大幅提升，會先想一下這個景當時的氛圍、我想傳達的是什麼，再調整顏色。

上下加個 5s 保留船的細節，加光要帶手套，因為手會有紅色血管。
加光會導致顏色更濃。

12s

• 75m, 75y
• 3m
• -30y, -10m
• +10y

底片的寬容值

彩色負片就算是 over 3–5 格，暗房放相出來影像還是很正常，而 under 2 格也都還 ok，不過正片就不行，你亮的地方在底片上就是一片透明，不會有成像。例如：印樣整個很白，顏色偏綠，放出來還是可以校正成底下這張。

備註：一般正沖負店家都會用不要用的藥水沖洗，所以效果都會超級差的。專業的攝影師會用正沖負再放相來製造他要的效果，但是如果你不是自己沖洗，因為藥水不佳，很難再透過後續放相校正顏色。

介紹攝影師

William Eggleston (1939-now)

以前彩色底片並不是主流，只要是新聞、紀實攝影一定都是黑白的，William Eggleston 是彩色攝影的先驅，他的作品是第一個彩色攝影被紐約 MOMA 展覽的攝影師。

William Eggleston’s Guide was the first one-man show of color photographs ever presented at The and the Museum’s first publication of color photography.

川內倫子 (1972-now)

川內倫子刻意用老、不那麼銳利的鏡頭拍攝，嘗試拍攝出人類眼睛當下看到的與成像差異很大的照片，「相機從來不是人眼的延伸」，因為人眼從來沒有辦法像這樣去處理定格的畫面。

• 淡淡中的影像暴力 — 川內倫子 Rinko Kawauchi
• 冷暴力的日本女攝影家：川內倫子
• 常又微小的幸福光照──《ILLUMINANCE》川內倫子
• 平凡的感動 — — 川內倫子

其他範例

利用暗房技巧、拍攝手法，營造出一種氛圍。在暗房做照片不一定要有

Keiko Kurita (1975-now)

他用針孔攝影機拍攝，超級可愛，超喜歡！！

see more photos

中野正貴 Masataka Nakano (1955-now)

《東京窗景》、《TOKYO NOBODY》

對比色校正

彩色放相能夠調整的光源有二：M, Y，如果放出來的相

• 偏洋紅：+M
• 偏紅：+M + Y
• 偏黃：+Y
• 偏綠：+M
• 偏靛：-M -Y
• 偏藍：-Y

每個色為相鄰的顏色相加，而因為相紙為負相，負負得正，放出來偏洋紅，就加洋紅。

底片的沖洗

彩色沖洗不管什麼牌子都是用差不多的藥水與時間，是非常機械式的操作，增感也是就都多一分鐘。去不同的沖洗店會有不同的效果，是因為他藥水汰換頻率，一般可能是 30 卷換一點，他有可能是 50 卷才換，就會影響品質。店家汰換藥水的頻率與沖洗的流動率也有關係，以前台灣沖洗店最多有 3500 多家，比 7–11 還多！台東都還沒有統一超商時就有沖洗店了。

一般說什麼牌子的底片偏藍、偏紅，都是要放相過才準，（拍攝色卡以白色的區塊為基準去放相）因為掃瞄器都會自動幫你校正，你得到的照片就是店家喜好的顏色。

一樣的光源設定，Kodak 偏黃 Fuji 偏綠（左上、右上），但是透過 -Y20 -M20，Fuji 可以呈現與 Kodak 差不多的色調（左下）。

有趣的小知識：不管什麼牌子的底片，打光與測光方式都是為白人設定，拍攝黑種人必須加個兩格臉才不會太黑根本看無五官。黃種人加個 0.5–1。

放大機基本設定

負相相紙為棕色

• 放大機最高 170M，起始值 50Y 50M
• 放大機最高 200M，起始值 80Y 80M

正片負沖、負片正沖？

（圖一）上方為正片正沖，左下為負片正沖，右下為正片負沖。

（圖二）負片正沖

（圖三）正片負沖也是可以調整顏色到很準確，就看你的暗房技巧。

彩色暗房

正片的沖洗是 “digital print”，用大型掃瞄機掃描正片後，再用光照一點一點的照出來，需要很多時間，此課程練習的都是負片的放相。

練習彩色暗房其實最主要還是訓練你對色彩的敏銳度，並且調整你拍照的習慣，因為拍攝黑白底片與拍攝彩色底片一定是不一樣的思考邏輯。老師說他以前在練習色彩時，還會在街上背經過路人的衣服包包褲子顏色，一次可以記得 7–8 個呢。

數位產品官網、app、部落格設計過程與執行

tl;dr

此文紀錄我設計數位品牌官網、後台、部落格的過程，並藉由這一連串的設計慢慢建立公司的產品形象：

• 規劃與策略
• UI/UX 設計，品牌插圖、icon 繪製
• 部落格設計（Wordpress）
• 使用 GTM 追蹤網站 UX
• 設計師該做的到底是什麼？

官網設計

去年在 電子豹 https://newsleopard.com 擔任產品設計師，接手到的是已經有品牌 logo 與色碼規範。進入公司觀察（打混）後發現：設計要做的有兩件：銷售產品官方網站（Landing Page / Official Website），以及整體企業品牌視覺規劃 (Branding and Identity)。

開始著手設計時感到非常的挫折，我往年的設計經驗著重於介面 UI/UX 、單頁式活動網站、資訊設計（懶人包），沒想到從 0 到 1 的整體視覺執行這麼困難，隔行如隔山，不過公司給我很大的自由（放任？），沒有經驗的我就從蒐集 landing page 參考資料開始 [1]。

1. 規劃內容

網站架構從 PM 與行銷那邊了解需求後，先將預計的內容區塊排上 sketch（因為頁面不多就跳過 wireframe 階段直接畫 UI），再來發想視覺。網站的主要目的是賣產品，希望來的人能夠點擊那個註冊按鈕，所以 SEO、介紹產品特色、價錢、客戶推薦為重點，在規劃單元、排版時需要仔細考量進去。

2. 定調產品、繪製插圖

在蒐集參考資料 [1] 時就發現，因為產品為抽象的軟體，很難使用照片來表現，所以近幾年 landing page 才這麼流行插畫的表現形式，也比較貼近人性。(當然你也可以解讀為現今流行的就是這樣，自己還沒想到更好的就先 follow)。

依照公司品牌決定視覺方向為：簡單、貼心、專業、科技、快速等等調性，開始用 mind map 發想插圖元素、練習符合形象的插圖表現手法，並想辦法在接續的圖片延續一致的風格，參考資料[2]。這蠻需要一段時間練習才能抓到訣竅，畫完一陣子再回頭整理有助於統整。主要 tips 就是：

• 瞭解品牌，知道插圖會被運用的範圍（形象官網、後台、facebook、雜誌等等）。
• 定調的風格要具彈性與一致性。
• 立定插圖規則：規範色盤、背景表現手法、著色方法、陰影表現等等。
• 強調：用色很重要。

官方網站設計完後，有再回頭調整產品裡面的 icon、插圖、系統通知信等等，以求統一的形象呈現。

3. 前端製作

官網前端使用 GatsbyJS 開發，算是一個很容易上手、蠻方便的靜態頁面框架 (static website generator)，推推 ⭐⭐⭐️

部落格設計

1. 購買適合的 Wordpress theme 再做調整

由於之前的部落格已經累積了不少流量，所以在設計新的部落格時就不考慮其他的平台（無法承擔搬移資料遺失的風險），挑選一個看起來乾淨不錯、文件完整的 Wordpress theme 購買，把資料倒進去之後，再針對現有的需求調整該 theme 的 child-theme 原始碼。

目的用內容行銷品牌，致力打造中文界最優質的 Email Marketing 內容平台，希望藉由優質的內容進而提升品牌形象，所以部落格的 header, footer, style guide 皆需要與網站一致，讓讀者不費力的感受是同一家出品。

2. 頁面 UI/UX 設計

UX 設計著重於 CTA 區塊、訂閱表單區塊、文章分類。單篇文章注重閱讀體驗，捨棄一般常見的 sidebar、大 banner 格式，採用小圖片、內容為主的形式，並出一份文章撰寫規範給協作的作者群。

各篇文章首圖的設計，跟設計同事研究覺得，文章首圖最主要的目的是要吸引讀者點擊，讓純文字的文章有一點生命力，設計上著重：色彩鮮豔、圖案有趣、畫出內容的關鍵字。

3. 使用 GTM 追蹤網站 UX、轉換

設計部落格的同時也考慮到 GA 追蹤，以便將來檢視成效。例如簡單的追蹤 UX 的部分包含：top header 按鈕點擊次數、CTA 點擊次數、不同位置的訂閱表單點擊次數、分類 navigation 點擊次數，如果後續追蹤發現點擊狀況不佳，再想辦法做優化（例如：同事 A 覺得分類 navigation 長成那樣使用者不會點，我們就來埋 event 看看到底點擊狀況怎麼樣，如果真的不佳，再來檢討設計怎麼優化）。

關於 GTM 如何使用可以參考很多網路上的文章，或是我這兩篇筆記（是個超級麻煩但有時間不得不用東西）：

• Events Trigger, Google Ads, Facebook Pixel with GTM
• Events Trigger, Google Ads, Facebook Pixel with GTM

設計師該做的到底是什麼？UI/UX Developer? Visual Designer? illustrator?

在規劃設計官網時，一直困擾我的是，身為一個網頁設計師，主攻的設計項目到底是什麼？UI/UX 設計、插畫設計、前端、GA⋯⋯常常覺得事情很雜每件事都碰一點又做不精。但後來因為接觸到 UX ，轉一個念想：回到設計的初衷就是「解決問題」，想想身為一個設計師在現階段能夠幫助到公司產品的什麼、能夠優化的地方有哪些，並以現有的資源做最好的運用。

對我來說，在電子豹做設計學到最多的就是，如何在一間公司找到自己可以正常發揮的位置。因為是做自己產品的公司，不會像接案公司一樣，手頭上一次卡三個以上不同的案子（還每一個都結不了案），可以想辦法從各角度幫助公司產品成長，不停的優化並且追蹤數據用以驗證設計是否有效。

\ 本文感謝 電子豹同仁們的參與協助 /

註[1] 官網設計參考資料

科技業官網 / landing page：

• https://www.zendesk.com/
• https://www.intercom.com/
• https://baremetrics.com/features/segmentation
• https://slack.com/pricing
• https://www.atlassian.com/
• https://www.shopify.com/
• https://acquire.io/mobile-sdk/
• https://usepastel.com/
• https://eco.com/
• https://www.paymoapp.com/
• https://hellopingpong.com/
• https://teambit.io/
• https://www.hellobonsai.com/
• https://canny.io/
• https://gusto.com/
• https://asana.com/
• https://www.instagram.com/fearlessagency/
• https://www.googlesciencefair.com/student-resources
• https://supergoop.com/pages/sun-101

Design Agency ：

• https://www.stinkstudios.com/
• https://ueno.co/
• https://locomotive.ca/e
• https://wonderlandams.com/studio/

Design System:

• https://atlassian.design/
• https://www.uber.design/
• https://dropbox.design/
• https://polaris.shopify.com/design/colors

註[2] 圖片延續一致的風格

• Designing Adobe’s Brand Illustration Style
• Brand Illustration 101: Visualizing the Narrative
• Everything you need to know about Design Systems

註[3] 部落格參考

1. https://resources.sigstr.com/blog
2. https://blog.benchmarkemail.com/
3. https://www.mailerlite.com/blog/category/tips-resources
4. https://sproutsocial.com/insights/product-updates/
5. https://www.helpscout.com/blog/
6. https://explore.reallygoodemails.com/
7. https://www.intercom.com/blog/
8. https://www.intercom.com/blog/email-marketing/#email-service
9. https://wistia.com/learn/marketing