Unblock：再設計直接示範！作品集準備、1人設計師必看
後設資料
- URL：https://www.youtube.com/watch?v=FmwksjIq-pM
- 作者：Unblock
- 發表日：2022-11-07
- 語言：繁體中文
- 影片長度：13:17
- 來源形式：YouTube 影片；使用者提供中文 ASR 逐字稿，並以
yt-dlpmetadata 校正標題、頻道與章節。
一句話濃縮
這支影片把 Unblock 自身課程官網與主視覺再設計拆成「計畫 → 探索 → 定義 → 開發 → 交付」流程，示範資源有限時如何裁剪 雙鑽石模型：高不確定的主視覺做較完整探索與小樣本測試，低成本可快速上線的網站則把測試部分移到發布後數據與市場反應。
提取要點
- 兩個 redesign 對象：
- 課程官網：舊頁面來自年初預售期，未放入課程更新、學員活動、成功案例與反饋。
- Unblock 主視覺：觀眾覺得原本視覺專業但嚴肅、有距離，與團隊想傳達的親切、有趣學習感不一致。
- 計畫階段先定義可檢查目標：
- 官網目標：每月顧客人數增加、觀眾對課程內容理解增加。
- 主視覺目標：讓觀眾對 Unblock 的觀感從嚴肅專業，轉向親切、有趣、聰明的學習氛圍。
- 流程不固定套模板，而是依風險裁剪：
- 主視覺方向不明確、牽涉長期品牌感受，因此採較完整的 雙鑽石模型。
- 官網可快速迭代、需要真實市場反應，因此採簡化雙鑽石，將「交付」與「測試」合併到上線後觀察。
- 探索階段採低成本研究：
- 沒有重啟全新訪談或 survey，而是整理過去 IG 留言與私訊、YouTube 留言、電子書回饋、學員反饋。
- 研究結果指出：觀眾不清楚課程內容與價值，也感受不到課程關鍵吸引點；主視覺則需要拉近導師與觀眾距離。
- 競品 / 靈感研究是策略收斂，不是收集漂亮圖：
- 用 Eagle 收集圖像、網頁 layout、影片、GIF，並用資料夾、標籤、顏色與篩選整理。
- 官網分析後得到大致資訊結構；主視覺分析後發現線上課程多偏高彩度、淺色，多用幾何圖形、框線、卡通圖形、無襯線粗體字。
- 定義階段把目標轉成設計方向：
- 官網：清楚陳述課程內容、凸顯課程特點與價值點。
- 主視覺：三個方向是 human（以人為本、拉近觀眾與導師）、fun（有趣）、smart（有策略地學習）。
- 開發階段先共編資訊，再畫圖：
- 先開共同文件讓行銷與文案成員共同規劃網站需要放什麼資訊，建立 資訊架構 的基本輪廓。
- 再做黑白低保真 wireframe，避免被色彩與圖像干擾；做多個版本後挑出較佳部分，進入高保真 wireframe。
- 主視覺則挑關鍵接觸點測試：IG post、story、網頁 banner、活動宣傳圖、YouTube 關鍵畫面。
- 交付階段是收斂與驗證，不是結束：
- 主視覺找 8 位互動較高的學員做即時通訊訪談，比較新舊視覺並蒐集感受詞。
- 舊設計得到專業、穩重、商業感等詞；新設計得到鮮明、活潑、有趣、聰明、年輕，接近原本 human / fun / smart 目標，因此才進一步發展 brand guideline。
- 官網最終版依新主視覺調整，上線後仍要看後台數據與市場反應繼續迭代。
- 核心結論：資源有限時不必做滿每個設計活動；只要能根據問題不確定性、回饋成本與交付風險裁剪流程，並持續驗證是否真的解決問題，就是健康的設計流程。
提取概念
連結到此來源衍生 / 更新的 wiki 頁：
Ingest 筆記
2026-05-07
建頁判斷：不新增概念頁。這支來源雖然標題提到作品集與 1 人設計師，但內容不是作品集製作教學，也不是一人設計師職涯訪談；它最有價值的是一個「資源有限 redesign 流程案例」。因此本期選擇補強既有頁，而不是新建「再設計」/「資源受限設計」等薄頁。
跨頁影響鏈：
- 雙鑽石模型：補入「資源受限時如何裁剪雙鑽石」；本來源讓雙鑽石從固定流程變成可依不確定性與回饋成本調整的節奏模型。
- 設計策略：補入 redesign 目標如何先定義為可檢查的感受與商業指標，再決定研究、IA、視覺與測試活動。
- 使用者研究：補入「既有回饋也是低成本研究入口」；IG / YouTube 留言、電子書回饋、學員反饋可作為沒有新研究預算時的探索材料。
- 競品分析：補入視覺 / IA / 靈感素材的競品研究，強調收斂成市場視覺規律與定位判斷，而非複製圖像。
- 資訊架構：補入 landing page 先用共編文件整理資訊，再進入 lofi / hi-fi 的工作流。
- 品牌識別：補入主視覺改版的感受詞測試與 brand guideline 前置驗證。
- 迭代設計：補入「上線不是終點」，以及可快速改版的網站可把部分測試移到發布後數據。
- 一人設計團隊：補入資源有限時的設計活動取捨：高風險高不確定做完整探索與小測試，低風險可回滾則用上線後市場訊號迭代。
邊界釐清：
- 不建 Eagle entity：影片中 Eagle 佔不少篇幅，但主要是 sponsored tool demo；目前只是「靈感 / 素材管理工具」案例，不是本來源的知識主軸。若後續有設計工具管理、素材庫、DAM 或 inspiration workflow 主題來源，再評估建頁。
- 不更新 作品集：標題提作品集準備，但內容沒有直接教作品集架構；「可放進作品集的 redesign case」只作來源語境保留。
- 不更新 MOC-職涯 / MOC-UX：本期沒有新建頁，且 MOC 目前已有多筆未提交背景變更；先以概念頁與 Unblock entity 建立可檢索連結，避免擴大 commit scope。
原文（可選）
使用者提供中文 ASR。以下保留來源主要語意並校正高確定專名（Unblock / Eagle / Double Diamond / low-fi / hi-fi / Agile / Scrum）。
2026-05-09 補充：使用者提供原始 ASR
此段為使用者於 2026-05-09 再次
add同一 URL 時貼入的原始 ASR，保留辨識錯字與口語斷句；上方既有摘要與 wiki 連結已於 2026-05-07 完成，本次不重複建頁。
到底在設計要怎麼做，才可以做得好，可以放到作品級呢? 還有，如果你是一個人在一間公司裡面做唯一的設計師， 你要怎麼樣在自願有限、實現有限的狀況之下做好的在設計呢? 今天呢，我要接覓UnBlock，我們自己是怎麼做在設計的? Let’s go! 哈囉大家好，我是喬先生，歡迎回到UnBlock! 在這位頻道，我們會分享跟設計還有其他相關的大小事， 所以如果你不想錯過之後精彩的影片，記得一定要訂閱喔! 今天呢，我們要好好揭露UnBlock這個頻道，我們自己是怎麼做在設計的? 這個影片我想要講的是兩個project，一個是我們課程官網的在設計， 另外一個是我們整體UnBlock的主視覺的在設計， 記得一定要把這個影片看到最後站，才會知道我們是怎麼處理製作在設計時候的流程囉! 好，那我先快速講一下這兩個企劃的背景好了，主要原因是因為兩個， 第一個是因為我們課程的網頁內容並不是最新的， 而是在剛開始預售的時候，年初的時候就做了， 在這一年的時間裡呢，我們有做一些課程的新的更新， 學員的活動有新的設計， 同時我們也得到很多好的學員的成功案例，還有反饋， 這些是我們沒有在之前的網站裡面放的， 另外一個原因呢，就是在主視覺的部分呢，我們其實有收到蠻多觀眾的反饋， 覺得現在視覺雖然看起來蠻專業的， 但是好像有點嚴肅，然後跟UnBlock這些導師們感覺有點距離感， 在學習上面沒有那麼親切，這個其實並不是我們想要觀眾有的感覺， 好，現在你們瞭解了時空背景之後呢，我們就來談一下我們是怎麼進行在設計的活動吧， 首先第一個階段就是計畫，我們有設定一些在設計的目標， 在課程部分呢，我們希望每個月的顧客人數增加，我們有簡單設計一些數字， 另外呢，我們希望觀眾對於課程內容的瞭解程度可以增加， 主視覺的部分就是希望觀眾能夠對UnBlock的觀感有轉變， 可以往比較親切還有有趣學習的這個方向發展， 好，那知道目標之後呢，我們就要來指定設計策略了， 這次的設計策略其實也是很標準的，我們想要來取用設計思考，就是雙鑽石的這個模型， 不過在這邊稍微有點不一樣的是，主視覺我們希望做比較完整的雙鑽石， 因為主視覺它的方向比較不明確，我們需要更多的資訊來確保我們的方向是正確的， 網頁的部分呢，因為我們可以快速的疊帶，而且成果需要真實市場的反應， 所以我們就決定做比較簡易的雙鑽石，最後一個步驟交付呢， 我們就直接把測試跟發布時結合在一起，直接看上線之後市場的反應來做調整， 那接下來我就用我們的這個設計流程，一步一步的跟大家講我們是怎麼製作的， 首先第一個階段探索，因為我們的時間資源有限， 所以我們並沒有開啟全新的研究計劃去訪問新的人，或是做新的survey來調查等等， 我們主要就是看我們之前過往的數據或是實話的一些反饋跟資訊， 所以我們看了很多IG觀眾的留言還有私訊啊， 如果你在IG上面有給我們一些私訊謝謝你， 另外我們也會看YouTube的觀眾的留言， 還有呢我們之前曾經收集過的電子書的一些反饋， 最後就是我們UnBlock的學院，我們學生給我們的一些反饋， 看過這些資訊我們發現幾個重點， 第一個就是觀眾沒有辦法清楚的理解課程的內容跟價值， 他們看之前的網站的時候沒有得到這些重要的資訊， 另外就是觀眾沒有辦法感受到課程關鍵的吸引點， 主視覺得部分觀眾很希望能夠拉近跟導師的距離， 希望能夠更輕鬆更有趣的學習，探索這個階段還沒有完成喔， 接下來就是要做進品的分析， 我們要了解一下在市場上跟我們類似的產品或是服務， 那在這邊呢我想推薦一個非常好用的工具給大家，叫做IGO， IGO主要是一個用來收集靈感的工具， 不管在做什麼樣設計企劃的時候呢， 其實我們常常需要收集資料嘛， 可能是視覺的參考啊，可能是資訊架構的參考， 如果你是更有經驗的設計師的話， 你可能會準備一些自己的資料庫來收集過往你看過好的設計， 這個是IGO的工作畫面， 那裡面就是我已經存下來的所有靈感還有範例， 通常我們在找靈感的時候呢， 第一步就是要把喜歡的圖像從我們看到的網站上面存下來， 所以呢如果你已經把IGO下載到你的瀏覽器以後呢， 接下來就是可以快速的存你喜歡的影像， 那它有幾個很簡單很簡單的方式， 這個是我特別喜歡的， 首先呢你可以直接拖曳這個圖像它就會跑出來， 存到這個地方呢它就會自動存到你的IGO的Library裡面， 除了網站上的圖像， 有的時候你可能是想要存這整個網頁的layout當作你的參考， 所以呢它也有一個非常簡單的方式， 那就是你按住Option還有數字鍵2， 它就會出現這個可以拖曳的畫面， 然後呢你只要把它框選起來按主存， 它就會自然存到你的IGO裡面了， 所以呢等到我回去我的Library就會看到我剛才存下來這個layout， 還有一個我特別喜歡的功能， 就是如果你今天整個頁面上面你想要一次把所有的影像都一網打進存下來的話呢， 你可以去瀏覽器上的IGO的Plugin選擇BatchSafe， 它就會把這個網頁上面所有的影像都給你看， 然後你可以選擇全部或者是呢你只選擇部分把它存下來， IGO也不只是存圖片而已它還可以存影片， 所以如果像我這邊我想要學這個調酒的話， 那我可以把這個宣傳的影片直接存到IGO裡面， 我就可以看到這個影片了， 你也可以存GIF的動圖喔， 那我就一樣Drag就可以直接把它存到IGO我的Library裡面了， 當你把所有的靈感存下來下一步你可能想要好好地整理它， 首先你可以做資料加上你看到我這邊我把它分成design， Creative， Career and Growth它有一個很方便的功能叫標籤， 比方說我現在點Simon這張圖， 在Tag地方的點下去它就會給我一些推薦的這個標籤， 我知道因為它是好好的課，只要說我把它選好好， 領館收集完呢接下來最重要的就是我們能夠很快速地在這些範圍中找到跟專案有關的， 所以Eagle在這方面也很好用， 這邊上面你有沒有看到這些loader， 那我剛才有存的一些像好好的圖像呢我就可以快速地找到， 我也可以用顏色跟白色有關的我也可以把loader出來， 當然它還有很多其他方式可以幫助你選擇像是資料夾什麼時候創造的， 所以你有不用擔心說你找到了很多靈感之後會不會找不到， Eagle還有很多很棒的其他功能， 在這支影片裡面我們沒有辦法全部講到， 大家只要去Eagle的官網就可以看到這些功能的介紹囉， 謝謝Eagle這次跟我們一起合作， 我們也非常努力的幫Unblock的觀眾爭取一些福利， 所以如果你想像我們一樣有效率的收集靈感來源， 到這個影片的描述欄我們會放上Eagle的連結， 如果你使用Unblock這個連結的話呢， 你就可以直接用八折的價格來購買Eagle這個軟體， 另外呢我們也真的很努力的幫大家爭取了， 其他時候Eagle不提供的福利， 前20名購買Eagle的觀眾呢， 你們同時也可以獲得多一個裝置的席位， 你想要跟你的設計師朋友分享同事分享都可以， 這個通常是你要為Eagle做其他事情才會多獲得的福利， 現在前20名購買的人可以直接獲得， 所以趕快使用下面的連結不要錯過了， 在結束鏡片研究之後我們就發現了， 課程網站的部分有大致這樣的一個結構， 在主視覺方面呢，我們發現大部分的線上課程呢， 它的視覺風格是比較多彩高彩度， 以及整體可能是比較偏淺色的這個邏輯， 如果是比較數位產品的話， 現在的這個流行呢是使用很多的幾何圖形， 框線還有卡通圖形， 好像有點受到Fig嘛這種比較pop art的這個風格， 在字體方面呢是比較無稱顯還有粗體的字體的， 接下來我們就到了第二個階段，定義， 網站的部分呢其實還蠻直觀的， 就是首先我們要把所有這個課程有的內容好好清楚的陳述給大家， 另外就是要把這個課程的特點還有價值點呢強調出來， 主視覺的部分則是有三個重要的方向， 第一個是human就是以人為本， 我們希望能夠把觀眾以及導師當作是我們的第一個優先， 拉近彼此的距離， 第二個就是fun我們希望它是很有趣的， 最後就是smart， 我們希望能夠讓觀眾感覺到你在學習這個課程的時候呢你是非常有策略， 定義明確之後呢我們就會進到第三個階段， 也就是開發， 開發也就是設計的階段， 我們先來看一下網站我們是怎麼進行設計的， 第一步呢會跟團隊開一個共同編輯的文件檔案， 這個文件檔就是要用來讓團隊一起來規劃這個網站裡面需要放的資訊是什麼， 這個步驟呢我覺得在設計一些網頁就是行銷型的landing pages的時候呢我覺得非常的好用， 第一它會先給你一些IA就是information architecture的概念， 在你進到真正去畫圖之前呢你就會大概知道說這些資訊是你一定要放在網站上面的， 另外我覺得這樣子的文件非常適合無視設計師的人一起共同編輯， 比方說我們團隊裡面負責行銷的人還有負責文案的人， 他們就可以進到這個檔案裡面共同去編輯， 到差不多你們有一個共識之後呢你就可以進到下一個階段， lofi，lofidelity的這個wireframe， 那現況圖每個人製作方式不太一樣， 我喜歡的方式是做很黑白的就是不太會有色彩跟圖像的， 這樣子可以讓你比較不會被那些事情給影響， 通常會做好幾個版本， 像這邊你看到我們有做三個版本， 然後把剛剛的notion這些資料呢就一一的放上去， 用不同的設計的layout啊還有交互方式去呈現這樣子， 好那做完lofi之後呢我們就會進到hi-fi比較高尼珍的wireframe， 把剛剛我們覺得wireframe裡面呢， 我們比較喜歡的部分把它挑出來， 根據這些部分在做優化變成這個新的版本， 所以你可以看到在顏色啊還有圖像的實用上我們也都比剛剛的這個wireframe來的更成熟了， 好那主持人部分我們來看一下， 我們會挑一些關鍵的觸點然後做一些比較， 所以我們會做一些ig post的嘗試還有story的一些嘗試， 然後另外呢像是網頁也是一個關鍵的觸點， 所以我們會做一個網頁的banner活動型的宣傳品， 像是我們作品級直播的這些圖， youtube本身我們找幾個關鍵的畫面啊我們可以放在裡面， 等到我們收集到我們覺得還不錯的幾個設計選項之後呢， 我們就會進到下一個階段就是交付， 交付這個階段呢它是一個收斂的過程， 所以在這個階段你應該要開始收集市場或者是觀眾使用者的一些反饋啊經過測試這個工具， 那剛前面有提到因為資源時間的有限， 所以測試這個部分呢我們只做在主視覺上面， 我們找了八位鋪東西比較高的學員跟他們用即時通訊的軟體來做訪談， 訪談的方式呢是找出這些關鍵的觸點， 同時給他們舊的主視覺還有新的主視覺， 讓他們來告訴我們他們的感受是什麼， 做完這個簡單測試之後呢團隊裡面的研究員就做了快速的結果的整理， 在這邊你們可以看到啊左邊是新的設計右邊是舊的設計， 然後呢我們有根據他們給我們的一些反饋的關鍵詞作這個wordcloud文字語， 那我們就發現舊的設計呢大部分的人是覺得它是專業穩重而且有商業感的， 那新的設計則是鮮明活潑有趣而且感覺很聰明很年輕的， 跟我們當初設定的這個目標非常非常的接近， 也就是說這個設計可以幫助我們達到我們的目標是一個很不做的設計選項， 因此呢我們就根據這個設計方向繼續一系列的把設計的guideline就是brandguideline把它開發出來。 好那主視覺確定完成之後呢我們來看一下課程網站的教父， 網站最終版本呢就是根據我們剛剛看到這個新的主視覺來做調整的。 那說到這邊呢我們設計就做到一個段落了但是其實這個階段交付並沒有完成， 如果你瞭解Adrian and Scrum你就知道其實每一次交付出一個設計它並不是一個終點， 你還要看市場的反應任性疊帶， 這兩個project那麼我們都會在我們的有限時間資源之內盡可能去收集一些使用者的反饋， 像是網站呢我們會看後臺的數據主視覺的話我們會找時間做一個簡單的市場調查， 如果下午都不做的話我們才可以說這樣子算是這個在設計第一個階段的一個落幕， 當你在做在設計的時候呢根據你的環境的時間的資源你要做一些簡單的調整， 可能不是每個工具或是每個設計活動你都有機會使用的到， 那也沒關係，只要你能夠確定你能夠把這個問題好好的解決，其實就是好的設計流程了。 如果你想像Unblock一樣變成一個承受的設計師，好好的收集你的靈感的來源的話， 記得參考一下Eagle這個工具，使用我們描述欄裡面的連結得到8折的折扣， 還有前20名有的多一個裝置的權限哦，
2026-05-07 語意校正版
影片開場先提出兩個問題：到底在設計要怎麼做才可以做得好、做得像作品級？如果一個人在公司裡是唯一設計師，在資源有限、時間有限的狀況下又要怎麼做好設計？接著 Unblock 以自身兩個專案作為示範：一個是課程官網再設計，另一個是整體 Unblock 主視覺再設計。
專案背景有兩個原因。第一，課程網頁內容不是最新版本，而是年初預售時做的；後續課程有新更新、學員活動有新設計，也累積了學員成功案例與反饋，這些都沒有放在舊網站中。第二，主視覺收到不少觀眾反饋：雖然看起來專業，但偏嚴肅，與導師們有距離，學習上不夠親切，這不是 Unblock 想讓觀眾感受到的狀態。
流程第一階段是計畫。課程部分希望每月顧客人數增加，也希望觀眾更理解課程內容；主視覺部分希望觀眾對 Unblock 的觀感轉變，往更親切、有趣學習的方向發展。設計策略採用雙鑽石模型，但兩個專案裁剪不同：主視覺方向不明確，因此做較完整的雙鑽石；網頁能快速迭代，且成果需要真實市場反應，因此做較簡易的雙鑽石，最後把測試與發布結合，上線後看市場反應再調整。
探索階段因為時間與資源有限，沒有開啟全新研究計畫，也沒有做新的訪談或 survey，而是看過去既有資料：IG 觀眾留言與私訊、YouTube 觀眾留言、電子書反饋、Unblock 學員反饋。整理後發現兩個重點：觀眾無法清楚理解課程內容與價值；觀眾無法感受到課程關鍵吸引點。主視覺方面，觀眾希望拉近與導師的距離，並能更輕鬆、有趣地學習。
探索階段也包含競品分析。影片中以 Eagle 示範靈感收集流程：可以把網站圖片拖曳存入 library，也可以截取整個網頁 layout；可以 batch save 整頁影像，也可以存影片與 GIF；之後透過資料夾、標籤、顏色與其他篩選條件快速找回與專案相關素材。競品研究後，課程網站得到大致資訊結構；主視覺方面發現多數線上課程偏多彩、高彩度、淺色，數位產品流行幾何圖形、框線、卡通圖形，並常用無襯線與粗體字。
定義階段，網站任務是把課程內容說清楚，並強調課程特點與價值點。主視覺則收斂出三個方向：human，以人為本，把觀眾與導師放在第一優先，拉近彼此距離；fun，希望視覺有趣；smart，希望讓觀眾感覺這門課是很有策略地學習。
開發階段先做網站。第一步不是直接畫圖，而是與團隊開共同編輯文件，讓行銷、文案等非設計師成員一起規劃網站需要放的資訊。這個步驟對 landing page 很有用，因為在畫圖前就能先知道哪些資訊必須放上網站。接著進入 low-fi wireframe，先用黑白、少圖像與少色彩的版本，避免被視覺細節干擾，並做多個 layout 與互動呈現版本。之後再挑出喜歡的部分，優化成 hi-fi wireframe，加入較成熟的顏色與圖像。
主視覺開發則挑關鍵觸點做嘗試：IG post、story、網頁、banner、活動型宣傳品、作品級直播圖、YouTube 關鍵畫面等。等累積幾個不錯的設計選項後，進入交付階段。
交付是收斂過程，要開始收集市場或使用者回饋。因資源有限，測試只做在主視覺上。團隊找 8 位互動較高的學員，用即時通訊軟體訪談，同時給他們舊主視覺與新主視覺，請他們描述感受。研究員快速整理結果並做 word cloud：舊設計大多被認為專業、穩重、有商業感；新設計則鮮明、活潑、有趣、聰明、年輕，與一開始設定的目標接近。因此團隊判斷這個方向能幫助達到目標，並繼續發展 brand guideline。
主視覺完成後，課程網站最終版也依照新的主視覺調整。但交付仍不代表結束；如果理解 Agile / Scrum，就知道每次交付設計都不是終點，還要看市場反應並持續迭代。網站會看後台數據，主視覺之後會找時間做簡單市場調查。做 redesign 時，要根據環境、時間與資源調整流程；不是每個工具或設計活動都有機會使用，重點是能否把問題好好解決。