Wireframe 線框圖設計入門：網站原型規劃技巧

其實不少人都遇過這種狀況？網站做完了，視覺漂亮、動效精緻，結果上線之後才發現：最重要的報名按鈕被擠到第一屏下面、手機版選單要點三層才找得到聯絡資訊、一整排圖片把文字推到沒人看得見的角落。要改，等於重做一半；不改，轉換率就每天在淌血。這種痛，幾乎都不是設計師功力不夠，而是少了一個關鍵動作：在動手做畫面之前，先用線框圖把版面與內容的決策談清楚。

線框圖（Wireframe）換句話說，就一件事：在最便宜的階段，做完最昂貴的決定。它是一張去掉所有視覺裝飾、只剩結構與資訊層次的藍圖，讓你在還沒挑顏色、還沒選字體、還沒寫一行程式之前，就能把「這個區塊放哪、內容誰先誰後、使用者下一步要去哪」這幾個會回不來的決策敲定。這篇會帶你從觀念、構件、流程、工具到交接，把線框圖一次講透。如果你想要的是更廣角的設計入門，可以先看網頁設計從零到一的完整指南，這裡我們專注在「線框圖」這一個環節。

線框圖到底在解決什麼問題：把不可逆的決定提前

很多人把線框圖理解成「還沒做完的設計稿」，這誤會大了。線框圖不是半成品，它是一個獨立的產物，目的跟視覺稿完全不同。把它想成裝潢房子時的水電配管圖與平面配置圖：在水電還沒埋進牆壁之前，你要決定馬桶在哪、流理台在哪、插座夠不夠，這些一旦灌漿就回不來。至於牆壁要刷什麼顏色、磁磚選什麼花色，那是後面的事，那叫視覺設計。

網站也一樣。頁面的資訊架構、內容優先順序、主要行動呼籲（CTA）的位置、行動裝置上的摺疊順序，這些都是「埋進牆裡」之後改動成本很高的決定。線框圖存在的理由，就是讓你在配管階段就能坐下來跟團隊、跟客戶、跟自己把這些事吵清楚，提早把版面定下來，免得等到視覺稿都出了、工程都切了，才在「欸這個按鈕是不是應該往上挪」。

換個方式想：一張視覺稿改一個區塊的位置，可能要連動改動配色、陰影、間距、甚至要重畫一張圖；但一張線框圖改一個區塊的位置，常常只是拖曳一個方框。線框圖讓「反覆修正」的成本壓到最低，這才是它真正的價值，跟美不美毫無關係。如果你連 UI 與 UX 的分際都還有點模糊，建議先讀過UI/UX 設計差異全解析再回來，會更知道線框圖坐落在整個設計流程的哪一層。

先把三個名詞分清楚：Wireframe、Mockup、Prototype

這三個詞在中文圈常常被混著用，但它們對應的是設計流程裡三個不同的階段，回答的問題也完全不同。把它們攤開來比一次，你就不會再傻傻分不清。

項目	線框圖 Wireframe	視覺稿 Mockup	原型 Prototype
核心問題	內容放哪、誰先誰後	看起來是什麼樣子	用起來是什麼感覺
視覺細節	幾乎沒有，灰階方框	完整配色、字體、圖片	不一定完整，但能互動
互動	無	無或極少	有，可點擊可跳轉
主要對話對象	團隊內部、你自己	客戶、決策者	使用者測試對象
修改成本	極低	中等	偏高

從這張表看得出來，三者是「由結構往體驗」一路疊上去的。線框圖在最底層，管的是骨架；視覺稿在中間，管的是皮相；原型在最上面，管的是動起來的感覺。很多人會把線框圖跟原型搞混，覺得反正都是畫面草稿。差別在於：線框圖是靜態的、用來「溝通結構」的；原型是動態的、用來「驗證流程」的。這兩者的設計重點與產出完全不同，想深入差異與原型的角色，可以看UI Prototype 原型設計全解析，那篇把原型這一層講得很細。

保真度不是「精緻度」，而是「你在跟誰對話」

線框圖常被分成低保真（low-fidelity）、中保真（mid-fidelity）、高保真（high-fidelity）三種。教科書會告訴你這是「細節多寡」的差別，但實務上的體感不是這樣。把保真度理解成「你這張圖是要拿給誰看的」，受眾決定了你該停在哪個細節程度。

低保真：給你自己跟設計夥伴看

紙筆草圖、白板上的方框、或軟體裡隨手拉的灰階方塊，都算低保真。這個階段的重點是「快」與「敢丟」。你在跟自己或跟旁邊的設計師對話，沒有人會計較對齊有沒有差兩像素。它的價值在於讓你大量產出、大量推翻，因為畫一張只要兩分鐘，丟掉也不心疼。構思階段幾乎都建議從紙筆開始，就是貪它「夠醜夠快」，能把注意力鎖在結構上，不讓視覺干擾判斷。

中保真：給專案內的跨職能夥伴看

當你要把圖拿給工程師看版面架構、拿給文案看內容配比、拿給 PM 看流程動線的時候，就需要中保真。這個層級會開始標註欄位、標示相對比例、寫上區塊名稱與簡短的內容提示，但仍然維持灰階、不帶品牌色彩。它要能讓一個沒參與發想的人，看著圖就知道每一塊在做什麼，這是團隊內部對齊用的共通語言。

高保真：給客戶與決策者看

面對付錢的客戶或是不懂設計語彙的高階決策者，中保真常常不夠用。他們看到一堆灰方塊會焦慮，會問「所以成品長怎樣」。這時候高保真線框圖就派上用場：它可能帶一點品牌主色、帶真實的圖片佔位、字級接近成品，讓對方在「看得懂」的前提下，把焦點留在結構決策上，避開配色的干擾。要注意，高保真線框圖離視覺稿只有一線之隔，千萬不要在這個階段被牽著去調配色跟字體，否則你就提前進入視覺設計的戰場，失去線框圖「鎖定結構」的紀律了。

一張合格的線框圖，七個構件不能少

不管保真度高低，一張能拿來跟人溝通的線框圖，基本構件是固定的。底下整理成這張清單，你可以拿來當作自我檢查表。版面設計的底層邏輯，在網頁版面設計完全攻略有更系統的整理，這裡只聚焦在線框圖層級。

構件	線框圖裡要表達什麼	常見失誤
頁首與導覽	Logo 位置、主選單項目、是否固定置頂	漏掉行動版的漢堡選單展開邏輯
內容區塊與層次	哪一塊是主、哪一塊是次，用大小區分	所有方框一樣大，看不出優先序
標題與文案佔位	寫出區塊名稱或關鍵文案提示	只寫「文字」，看完不知道是什麼
圖片佔位區	用打叉方框標示圖片位置與比例	沒標比例，導致後續裁切規格失控
行動呼籲（CTA）	主按鈕、次按鈕的位置與數量	一頁塞五個主按鈕，分散注意力
互動元素	表單欄位、下拉選單、頁籤、摺疊區塊	忘了標示展開後的內容去向
標註與規格	備註行為、狀態、連往哪一頁	完全沒標註，交接到開發全靠猜

這七項齊備，一張線框圖才具備交接基礎；內容層次與圖片比例尤其容易遺漏。進入 Figma 作稿時，可用Figma 免費圖片外掛先填入尺寸合適的佔位圖，定稿前再換成正式素材。使用格線或Bento Grid時，也應在線框階段先定位主要區塊。

標註是線框圖的靈魂：把該交接的資訊寫在圖上

很多人畫線框圖畫得很認真，方框排得整整齊齊，比例也標了，結果一交出去就被開發跟設計問爆：這個按鈕點了去哪、這個表單送出失敗會怎樣、這個區塊在平板上要不要顯示。問題出在他們把線框圖當成「只要畫結構就好」，卻忘了線框圖的第二個身份是溝通文件。結構是給眼睛看的，標註是給接手的人看的，兩者缺一不可。一張沒有標註的線框圖，跟一張有結構卻沒說明的建築圖一樣，看得到長相，卻不知道每一根管線通到哪。

標註可分成五類，每一張要交付的線框圖都會盡量補齊。第一類是連結去向：每個可點擊的元素都要標清楚點了之後連到哪一頁、或觸發什麼動作。第二類是互動狀態：按鈕的預設、滑過、點擊、停用、載入中各長怎樣；表單欄位的空值、聚焦、填寫中、錯誤、成功。第三類是內容來源與長度：這段文字是寫死的還是從後台撈的、最長會到幾個字、圖片是固定還是輪播。第四類是回應式規則：這個區塊在手機上是堆疊還是隱藏、在寬螢幕上要不要並排。第五類是優先層級：哪一塊是這一頁的主角、哪一塊可以延後載入。

標註的格式不用搞得像規格書一樣正式，重點是讓看圖的人不用回頭問你。實務上習慣用兩種寫法：簡單的行為直接寫在元素旁邊的小字備註；複雜的互動則用編號標記，把詳細說明集中在頁面側邊或底部的註解區。後者特別適合狀態很多的表單或流程頁，才不會把畫面塞爆，又能讓開發一看就知道每一個編號對應什麼行為。把這五類標註補齊，你的線框圖就從「自己看得懂的草圖」升級成「團隊能直接動工的藍圖」，這中間的差距，往往就是專案會不會來回吵架的關鍵。

用擬真內容取代假字：線框圖階段的內容策略

這一點特別值得提出來，因為太多人在線框圖裡塞滿 Lorem Ipsum 假字，以為「反正之後會換上真實文案」。這個習慣會害你不淺。假字會對你說謊。Lorem Ipsum 每一段長度都差不多、每個字寬度都均勻，它讓你的線框圖看起來很平衡，可是真實的標題可能長達二十個字、真實的產品名稱可能佔滿兩行、真實的文案可能短到讓某個區塊顯得空蕩蕩。等你換上真內容，整個版面的平衡就崩了，這時候往往已經是視覺稿階段，改起來又貴又痛。

比較健康的做法，是在線框圖階段就盡量放「擬真內容」：用接近真實長度的標題、合理的產品名稱、模擬真實段數的文案。你不需要寫出最終定稿，但長度與結構要貼近真實狀況。這有兩個好處。一是你能在結構階段就驗證內容是否放得下，如果一個標題在線框圖裡就擠爆了容器，你會立刻知道要嘛縮標題、要嘛放大容器，這個判斷在假字階段根本看不出來。二是它逼你提早思考資訊層次，因為當你開始想「這個區塊到底要放什麼字」的時候，你就是在做內容決策，而不只是排方框。

如果專案有文案夥伴，線框圖階段就適合開始合作。設計端提供結構與長度限制，文案端提供標題與段落重點，兩邊一起確認「這一頁要說什麼、怎麼說」，避免到後段才硬塞內容。線框圖不只是設計師的產物，也可作為內容、設計與技術共同對齊的紀錄，提早暴露缺口通常能降低後續返工。

動手畫之前：把資訊架構與使用者旅程先想透

最常見的線框圖失敗，不是畫得不好看，而是畫之前根本沒想清楚「這一頁要服務誰、他要完成什麼事」。直接打開軟體開始拉方框，很容易陷入「把畫面填滿」的陷阱，做出一個什麼都有、但誰都不滿意的頁面。在動筆之前，有三件事必須先有答案。

第一件，你的使用者是誰、他帶著什麼目的來。一個帶著明確比較意圖的人，跟一個只是逛逛的人，需要的頁面結構完全不同。把目標對象想清楚，線框圖才有判斷依據，這部分的完整做法可以參考Persona 人物誌建立指南。第二件，他在這個頁面之前從哪來、之後要去哪。單一頁面很難獨立成立，它一定是某一條旅程裡的一站。把前後頁的來龍去脈畫出來，你才知道這一頁要放什麼入口、什麼出口，顧客旅程地圖能幫你把這條動線看清楚。

第三件，整個網站的資訊架構長什麼樣。這一頁在整個網站結構裡的層級、它跟其他頁面的從屬關係，會決定它的導覽與麵包屑。一個架構混亂的網站，再漂亮的線框圖也救不回導覽體驗。把網站當成一棵樹來規劃主題與分類，是 SEO 與使用者體驗的共同基本功，網站架構圖規劃全攻略從搜尋引擎友善的角度把這件事講得很扎實。這三件事想清楚，你才真的具備「動手畫線框圖」的資格；這整套「先同理、再定義、再動手」的紀律，正是設計思考五步驟的核心精神。

畫線框圖的六步流程

從空白頁到可交接的線框圖，可依六個步驟整理需求、內容、層級、互動、例外狀態與驗證；實際順序可依專案風險與既有設計系統調整。結構已由成熟模板確定的簡單頁面可以縮短流程，涉及新產品或複雜任務時則應保留研究與測試。

1. 寫下這一頁的唯一目的。用一句話講清楚：這個頁面要讓使用者完成什麼一件事。如果一句話講不出來，代表你還沒想清楚，先別畫。
2. 列出內容清單並排序。把這一頁需要的所有內容素材全部列出來，然後強制排序：最重要的放最上面。這一步比畫圖本身關鍵，排序一旦定下來，版面幾乎就定型了。
3. 用紙筆畫三個版面草圖。刻意畫三個不一樣的排列方式，逼自己跳出第一個念頭。低保真的目的就是敢推翻，所以畫醜沒關係。
4. 挑一個最順的，進軟體畫中保真。把紙上的草圖搬進設計軟體，補上欄位名稱、相對比例、圖片佔位，開始標註。這一步才開始講究對齊與欄位結構。
5. 跑一次行動裝置版本。把同一個頁面的手機版疊上來看，確認區塊摺疊順序、CTA 在小螢幕上的位置。這一步從來不建議省，原因下一節會講。
6. 加上標註，做交接前檢查。把每一個互動元素的行為、狀態、連向都寫清楚，然後對著前面那張七構件清單逐項打勾。

以室內設計工作室官網這類專案為例，這套流程最能幫忙避開一個常見的大坑。團隊最初的想法往往是在首頁放一個全螢幕的精美作品輪播，把視覺衝擊拉到最滿。可是在第二步排內容清單的時候，只要回頭問「使用者來這一頁，最想要的一件事是什麼」，答案通常很清楚：他們想看的是「這間工作室做過哪些風格的案子、能不能對上我家的口味」。於是線框圖把作品集格狀分類往上提到第一屏，輪播縮成輔助元素，創辦人故事則往下降。這個決定在紙上花不到半小時，但如果是在視覺稿階段才改，等於把整個首頁重畫。線框圖的價值，就是在那半小時裡顯現出來的。

這套流程還有一個沒寫進編號裡的隱性步驟：每一輪線框圖完成後，要找人做一次快速走查。實務上習慣把圖丟給一個沒參與發想的同事，給他三十秒，然後問他「你覺得這一頁最想讓你做什麼」。如果他的回答跟你在第一步寫下的那句「唯一目的」對得上，代表結構講得夠清楚；如果答得牛頭不對馬嘴，問題通常出在你的版面層次沒把重點推出來，跟他有沒有認真看關係不大。這種三十秒走查成本低得可笑，卻能擋下無數個「做完才發現重點放錯」的悲劇。線框圖最大的好處就是改得快，所以盡量在這個階段多收集幾次回饋，把方向校正到對，再往下推進到視覺與開發。

為什麼你的線框圖要從手機畫起

若網站的主要訪客來自行動裝置，線框圖可先從手機版著手。Statista 的長期追蹤（2026 年 4 月）顯示，全球行動裝置流量長期占有很高比例，但單一網站仍應以自己的分析資料、任務情境與裝置需求決定先後順序，企業內部系統或桌面工作流未必適合手機優先。

從手機畫起，還會逼你做一件好事：它強迫你面對空間稀缺。手機螢幕只有那麼窄，你沒辦法把十個區塊全部攤開，一定要排序、一定要取捨。這個取捨的壓力，恰恰是線框圖最該解決的問題。等你把手機版的優先順序想清楚了，桌面版只是「多了空間，可以怎麼擴充」的問題，方向已經不會歪。響應式設計的完整觀念與實作，響應式網頁設計 RWD有系統性的整理；如果你是用 Figma 工作，Figma 響應式設計教學把行動版排版的實務步驟示範得很清楚。

還有兩個手機版細節，建議在線框圖就標進去。一個是觸控目標的大小：點擊範圍太小，容易造成誤觸或點不到。另一個是單手操作的可及性：主要行動是否放在容易觸及的位置，要依頁面捲動、固定導覽與使用情境測試，不能只用「螢幕下半部一定比較好點」當作通則。這些都屬於結構層級的決定，越早標示，設計與開發越有共同依據。

線框圖階段就該埋下的轉換與效能伏筆

這是最容易被低估的一環。很多人以為轉換率優化（CRO）跟網站效能是「網站做好之後再來調」的事，大錯特錯。有幾個關鍵決定，只有在線框圖階段埋對了，後面才調得動；一旦結構定型，再要改往往是傷筋動骨。這些伏筆可分成兩條線來看。

一條是轉換動線。你的主 CTA 放在什麼位置、一個頁面上同時存在幾個競爭注意力的按鈕、使用者從進站到完成目標要經過幾個決策點，這些都是線框圖層級的決定。CTA 的設計心理學與擺放策略，CTA 行動呼籲按鈕設計終極指南講得很深入；而把整個頁面的轉換邏輯串起來的系統性做法，Landing Page 轉換率優化全攻略是很好的延伸。在線框圖階段把這些動線畫對，後面的視覺與文案才有施力的地方。

另一條是效能與體驗。Core Web Vitals 衡量載入速度、互動回應度與視覺穩定性，也是 Google 排名系統採用的頁面體驗訊號之一；它不是保證排名提升的單一門檻，內容相關性仍更重要（見 Google Search Central Blog 於 2020 年 11 月的 頁面體驗排名訊號時程公告）。其中 CLS 跟線框圖決定直接相關：圖片、廣告或嵌入區塊是否預留尺寸，都會影響版面跳動。線框圖若只畫方框卻不標比例，開發端就少了一項重要規格。速度與使用者體驗的關係，可參考 Google 官方 web.dev 的說明（2026 年）。

所以在線框圖階段建議多做兩件事：一是給每個圖片佔位區標上長寬比，讓開發知道該保留多少空間；二是把「上面段落、字型、圖片」的層次標清楚，這跟排版設計實戰技巧裡談的視覺層次是同一件事，只是提前到結構階段就決定。這些伏筆不花你多少時間，卻能讓後續的效能優化與轉換優化事半功倍。上線之後，記得用Google Search Console持續追蹤這些頁面的實際表現，回頭修正下一輪線框圖的判斷。

首屏的內容決策也會影響載入感受。LCP 衡量視窗內最大合格內容元素完成繪製的時間；大型首圖或輪播可能成為 LCP 元素，但瀏覽器會依實際渲染結果判定，不是線框圖直接指定。線框圖可以先標示首屏媒體的尺寸、必要性與載入優先級，再由開發端用真實內容和工具驗證，避免把關鍵資訊綁在過大的資源上。

工具挑選：能配合你團隊節奏的，就是好工具

線框圖工具的選擇，常常被搞得像選信仰一樣，其實沒那麼嚴重。判斷標準只有一個：這個工具能不能配合你團隊的協作節奏與修改頻率。依「修改頻率從高到低、協作從個人到團隊」的順序，把常見的選擇整理成這張表。

工具類型	適合場景	優點	代價
紙筆與白板	發想期、低保真草圖	零成本、最快、敢推翻	不易保存與共享
線上白板類	跨地團隊腦力激盪	即時協作、隨手拉方框	結構精確度有限
專業介面設計軟體	中高保真、正式交接	元件可重用、能進原型	學習曲線、付費
專用線框圖工具	追求手繪草稿感	刻意限制視覺、專注結構	功能較封閉
頁面編輯器	一人身兼設計與上架	所見即所得、直接出頁	容易提早陷入視覺細節

挑工具的時候，除了類型，還要考慮一個更實際的維度：協作與版本管理。線框圖很少畫一輪就定案，它會被改、被評論、被好幾個人同時動手。如果你的工具沒辦法留下修改紀錄、沒辦法讓人在圖上直接留言、沒辦法產出一個能分享給客戶看進度的連結，那來回溝通的成本就會吃掉你省下來的時間。這也是為什麼大多數專業團隊多會收斂到支援即時協作的雲端工具上，哪怕它的學習曲線一開始稍微陡一點。對一個人接案的人來說，協作需求低，工具可以挑輕量順手的；對一個要同時對接客戶、設計、開發三方的團隊來說，能不能讓所有人都在同一張圖上看到最新版本、直接標註討論，就是挑工具時的硬指標，比任何花俏功能都重要。

如果你是設計新手或在帶小團隊，可以從紙筆起步，中保真以後再進專業軟體。Figma 是常見的協作選擇，Figma 中文完整教學可以帶你從零開始上手；想加速結構排版，也可參考Figma 外掛整理。若要用頁面編輯器同時完成線框圖與實際頁面，要留意團隊是否過早把時間花在顏色與字體，而忽略結構仍待驗證。如果才剛起步，免費 UIUX 自學資源是可用的起點。

五個新手最容易踩的線框圖地雷

這一節是從常見案例歸納出來的，每一條都會讓你的線框圖從「溝通工具」退化成「浪費時間」。底下把它們列成對照表，左邊是地雷，右邊是正確的做法。

地雷	為什麼會出事	正確做法
太早加入視覺細節	討論焦點被配色字體帶偏	全程維持灰階，鎖定結構
偷懶不標註	交接到開發全靠口耳相傳	每個互動元素都寫行為備註
一個頁面塞太多 CTA	注意力被分散，轉換反而下降	每屏只有一個主要行動
只畫桌面版	多數手機使用者體驗無人把關	從行動裝置版本畫起
把線框圖當成品	停下來反覆打磨細節，忘了往前推進	它只是過渡產物，決策定了就往下走

這五個裡，最危險的是首尾兩項的組合：太早做美、又把線框圖當成最終成果在雕。一旦你開始在線框圖上糾結陰影深淺，就等於宣告「結構我已經不打算再改了」，但通常這時候結構根本還沒談攏。記住線框圖的身份：它是個過渡產物，目的是把結構決策推進到下一個階段，不是拿來展覽的。該往前走的時候就往前走，把美感的力氣留給視覺稿。

想抵抗這些地雷，有一個簡單的心法：每當你忍不住想在線框圖上多加一點視覺細節的時候，就問自己一句「這個決定跟結構或內容有關嗎」。如果答案是無關，不論它看起來多無害，都先收手。線框圖的紀律，本質上是一種「延後滿足感」的練習，忍住不在這個階段把畫面弄漂亮，換來的是後面更少的重工、更精準的溝通、更短的工期。這個反射動作通常是踩過幾次坑才練得起來的，一開始會覺得線框圖醜醜的不踏實，但等你體會過「結構先談攏、後面一路順暢」的爽快，就回不去了。

從線框圖走到下一步：交接與行動清單

線框圖畫完，不等於工作結束，而是另一段協作的起點。一張好的線框圖要能順利交接到視覺設計與前端開發，關鍵在於它有沒有把「後面的人需要知道的資訊」都標清楚。在交出任何一張線框圖之前，建議對著這份檢查表走一次：每個區塊有沒有寫名稱、每個圖片有沒有標比例、每個 CTA 有沒有標連向哪裡、每個互動元素有沒有寫狀態與行為、手機版與桌面版的差異有沒有交代。這份清單走完，接手的人才看得懂，你也才不用每天被「這裡到底是什麼意思」的訊息轟炸。一份標註完整的線框圖，等於把設計師腦子裡的判斷依據全部寫下來，讓工程師不必猜測、讓文案夥伴知道每個區塊的分量、讓專案經理能照著結構排時程，三邊拿到同一份事實，協作才不會各說各話。

如果你一路讀到這裡，這裡給你一個立刻能做的行動方案，不要等到下次專案才開始：

1. 挑你手上流量最高或最在意的一個頁面，用紙筆畫三個不同的低保真草圖，限時十分鐘。
2. 把這一頁所有內容素材列出來，強制排出一個優先順序，把前三名圈起來。
3. 對著前面那張七構件清單，檢查你現在的頁面漏了哪幾項，記下來。
4. 畫一份手機版線框圖，確認主 CTA 在第一屏就看得見、點得到。
5. 把草圖拿給一個沒參與發想的同事看三十秒，問他「這一頁要你做什麼」。他答得出來，才算過關。

線框圖真正能教會你的，不是怎麼畫方框，而是一種紀律：在衝動去做之前，先停下來把「為誰做、做什麼、怎麼排」這幾件事想透。這個習慣一旦養成，受益的不只是設計，連你規劃內容、規劃產品、甚至規劃一個專案的思路都會跟著變清楚。想把這套思路延伸到完整的網頁設計能力上，可以順著網頁設計自學路線圖往下走；如果你正在為自己或公司打造對外的門面，作品集網站設計指南裡的結構觀念，也能套用同一套線框圖方法。工具會換、流行會過，但「先把骨架想清楚再填血肉」這個原則，放諸任何專案都成立。現在就挑一個頁面，拿起筆，畫下你的第一張草圖吧。