從平面設計師到視覺設計師：職能差異、數位作品集與轉型路線

本文談的是從平面工作轉向偏數位介面與 UI 的視覺設計職位，不是把所有 Visual Designer 定義成介面設計師，也不是職位高低之分。這類工作除了排版與品牌判斷，還需要處理桌機與手機、按鈕狀態、頁面切換，以及和產品、前端、內容團隊的交付。

平面設計累積的排版、色彩、字體、影像與品牌判斷並沒有失效，反而是很好的起點。接下來要補的，是把這些能力整理成可縮放、可操作、可測試的數位系統。這篇文章會把兩種職能的重疊與差異說清楚，也提供一條能拿現有作品開始練習的路線。

一、從固定版面轉向數位介面，要增加哪些能力？

若目前主要製作固定尺寸的平面物料，轉向數位介面時需要增加的是「變動條件」：同一套內容會隨寬度、資料與操作狀態改變。下表比較這兩類工作情境，不是劃定所有平面與視覺設計師的職稱邊界；跨媒介、系統思考與協作能力也存在於成熟的平面工作中。

這條界線並不是法規定義，也不會在每家公司長得一樣。勞動部勞動力發展署 iCAP 的 多媒體設計人員職能基準 ，把相關職業列為「平面及多媒體設計師」，工作內容同時涵蓋圖像、影音、設計元素與視覺效果，也包含確認輸出平台、研究測試、團隊協作與交付。實務本來就有大片重疊，因此判斷職涯方向時，工作內容會比職稱可靠。

二、看工作內容，不要只看職稱

同樣叫 Visual Designer，有的職缺負責品牌活動與社群，有的主要設計網站介面，也有的位在產品團隊，會參與元件庫和動態規格。Graphic Designer 也不等於只做印刷，許多平面設計師早已在處理數位廣告、網站圖片與社群內容。若想先確認傳統與數位平面工作的範圍，可以把 平面設計的常見項目當作對照，而不是拿職稱替工作設限。

UI、UX 與視覺設計也不宜混為一談。UI Designer 著重介面外觀、操作元件與狀態；UX Designer 常處理研究、資訊架構、流程與測試；Visual Designer 則可能把品牌語言、資訊層級、圖像、字體與動態落到介面中。小團隊可能由一人兼任，大型團隊則會分工。作品集應誠實寫出自己負責了什麼，不要只因畫過幾個頁面，就把未做過的訪談或研究包裝成完整 UX 專案。

三、哪些平面設計能力可以直接沿用？

最值得保留的是資訊層級。懂得在有限版面中決定誰先被看見、哪段文字應該安靜、留白如何形成節奏，到了網站與 App 仍然成立。字體配對、影像裁切、色彩控制與品牌一致性，也不是介面工具自動產生的能力。印刷工作養成的尺寸、版本、授權與交付習慣，同樣能減少跨團隊返工。

需要轉換的不是美感，而是思考單位。印刷物可以把一頁視為完整畫面；數位介面要把畫面拆成可重複的元件，並替正常、滑入、按下、停用、錯誤、載入等狀態預留規則。當內容變長、翻譯變寬、螢幕變窄時，設計仍要維持閱讀順序。這也是 設計規範與 UI 元件值得提早練習的原因。

四、跨媒材設計，不是把同一張圖等比例縮小

一張橫式主視覺到了手機，問題不只是裁切。主標可能要提早換行，人物與商品不能被介面遮住，行動按鈕需要足夠空間，次要訊息則可能改到下一個區塊。Google Material Design 的 Canonical layout examples ，示範 feed、list-detail 與 supporting pane 如何依不同斷點重新分配區域。重點不是套用某一套外觀，而是理解版面必須隨可用空間重組。

練習時，可以拿同一份內容做三種寬度，檢查標題層級、圖片焦點、按鈕位置與閱讀順序，再加入內容過長或載入中的情境。若專案以活動傳播為主，可搭配 主視覺的跨尺寸延伸方法；若重點是企業內容與服務路徑，則可再看 品牌網站的內容與視覺規劃。

五、三階段轉型路線：從現有作品開始，不必全部重做

第一階段：把固定版面翻譯成數位規則

從自己最熟悉的一個案子開始，例如品牌活動、型錄或海報。先寫下受眾、訊息優先順序與原本限制，再把內容延伸為桌機和手機頁面。整理色彩角色、字級、間距、網格與圖片比例，並說明哪些元素可以重複、哪些只能在特定情境使用。這一步的目標不是做一個假網站，而是找出原作品背後可被系統化的規則。

第二階段：加入元件、狀態與互動

選擇一段真實任務，例如找活動資訊、篩選作品、預約服務或送出詢問。先畫簡單流程，再設計導覽、按鈕、卡片、欄位和回饋訊息。至少處理桌機與手機，以及成功、錯誤、空白、停用等狀態。原型不必塞滿動畫，只要能說明使用者按下之後發生什麼、如何返回、系統如何回應，就比一串無法操作的精緻畫面更有價值。

第三階段：練習交付、檢查與修正

把設計交給另一個人閱讀，確認他能否找到元件狀態、斷點、圖像輸出和字型資訊。有前端夥伴時，可請對方實作一個區塊再比對；沒有工程資源，也能用瀏覽器記錄真實網站在不同寬度的變化。目標是讓設計意圖從檔案走到可用成果。

六、數位作品集要呈現決策，不只呈現最後畫面

案例開頭先交代背景、受眾、限制和自己的角色；中段呈現方向取捨、元件或版型如何形成；最後再放不同尺寸、互動狀態、上線畫面或設計 QA。團隊作品則要標示策略、研究、文案、視覺與開發的實際分工。

一個完整案例可以依下列順序整理：

1. 問題：使用者或團隊原本卡在哪裡，而不是只寫「重新設計」。
2. 限制：時間、內容、技術、品牌規範與既有素材有哪些邊界。
3. 角色：自己負責哪些決策，又和哪些人共同完成。
4. 過程：展示被淘汰的方向、修改原因與關鍵取捨，不必把每張草稿都放上去。
5. 系統：說明字級、間距、元件、狀態、斷點與圖像規則如何互相配合。
6. 結果：有真實數據就交代量測方式；沒有數據，就寫可驗證的交付、測試發現與後續調整。

不要為了讓案例看起來厲害而捏造點擊率或成交表現。若專案真的有投放資料，可以用 廣告素材 A/B 測試與成效判讀 的方法區分單一變因；若沒有，就誠實展示設計如何通過不同裝置、內容壓力和交付檢查。可被追問的過程，比一個沒有來源的漂亮百分比更有說服力。

七、法西納案例：國民法官網站 Banner 如何呈現跨媒材能力

法西納的國民法官網站圖片設計專案包含 14 張不同風格的網站 Banner。題目與色彩可以改變，但每一張都必須回到網站上的閱讀情境，讓主題在有限高度中被辨認。這類案例適合放進數位作品集，不是因為它等同完整 UI／UX 專案，而是它清楚呈現平面能力如何進入螢幕媒介：文字層級、圖像焦點、系列變化和網頁版位需要一起判斷。

整理相似作品時，可以把成品和實際頁面並列，說明文案如何收斂、哪些元素為版位調整，但不要把未參與的網站流程寫成自己的成果。也可瀏覽法西納的 作品集，比較視覺進入不同內容架構後的變化。

接下來可用自己的既有主視覺做數位練習，明確標為自主練習並註明素材權利。下面是另行編寫的虛構活動 UI 教學，不使用客戶素材，也不是法西納完成的介面專案。

這個練習固定主題與場次，只改版面和狀態：桌機將說明與選擇區並排，手機依閱讀順序上下排列；未選場次時保留原畫面，在選項旁顯示「請先選擇場次」。交付還須說明鍵盤焦點、錯誤關聯與成功回饋，不能只交三張無法解釋操作的圖片。

八、和前端、PM、行銷協作時，交付的不只是一張稿

可執行的視覺交付，要讓團隊知道元件如何使用、畫面在哪些寬度改變、圖片如何裁切，以及互動發生時提供什麼回饋。檔名、圖像格式、字型授權與版本也要整理；上線後再用真實內容檢查換行、溢出、對比和點擊區域。

動態同樣要有目的。它可以說明狀態改變、建立空間關係或提供操作回饋，卻不該為了展示技巧拖慢每一次操作。W3C 的 prefers-reduced-motion 技術說明 建議依使用者的系統偏好抑制非必要動態。作品集若展示動效，除了正常版本，也應交代哪些動作可以取消、縮短或改為淡入淡出，證明設計同時考慮表現與使用感受。

九、轉型時最容易走錯的五條路

• 把工具當成職能：會操作介面軟體不代表懂得資訊層級、狀態與交付。
• 作品集只有 mockup：情境圖可以增加理解，但不能取代真實尺寸、流程和決策。
• 把 UI、UX 全寫成自己做：沒有研究、測試或資訊架構紀錄，就應精準描述實際角色。
• 每個畫面都加動態：動態若沒有傳達狀態或關係，只會增加等待與不適。
• 否定原本的平面經驗：轉型不是清空履歷，而是證明既有能力能跨尺寸、跨狀態並和團隊銜接。

十、常見問題

視覺設計師一定要會 UI／UX 嗎？

不一定。品牌活動、社群與動態等視覺職位各有重點；本文所談的數位介面職位，才需要特別理解操作流程、狀態與可用性。是否負責使用者研究、資訊架構或測試，應看職缺與團隊分工，不能由職稱推定。

平面設計師轉型需要會寫程式嗎？

不必先成為工程師，但理解 HTML、CSS、響應式版面與瀏覽器限制，會讓交付和溝通更準確。學習重點不是背語法，而是知道設計如何被實作，以及什麼狀況需要和前端共同取捨。

舊的海報、包裝或型錄作品還能放嗎？

可以，而且成熟的排版與品牌案例往往比臨摹介面更能代表個人能力。挑一至兩案補上受眾、限制、視覺規則，再示範如何延伸到數位頁面或跨尺寸素材，就能讓讀者看見能力如何轉換，而不是假裝過去不存在。

視覺設計師作品集要放幾個案例？

沒有固定答案。先完成少數能被完整說明的案例，比堆滿相似成品有效。理想組合可以包含一個品牌或活動延伸、一個響應式網站，以及一個具元件、狀態或動態的數位案例，讓不同能力各有證據。

十一、把既有美感，延伸成能被操作與交付的系統

想轉向數位介面工作，可以先選一件熟悉作品，完成同一任務的桌機、手機、錯誤與成功狀態，再寫出一項取捨及測試發現。下一次整理作品集時，讓讀者能從需求一路追到設計規則與交付；不必等到作品數很多才開始。

若你是從企業端閱讀，希望把既有品牌素材整理成網站與跨媒材系統，可以先了解法西納的設計服務 ；已有專案範圍與時程，也可以透過聯絡頁提供需求，讓討論從實際使用情境開始。