找我們做網站
↑
Resources · 網頁設計靈感與 UI

貝茲曲線練習網站 Shape Type:用 10 個字母測驗曲線掌握度

網頁設計靈感與 UI發布 2019.06.30更新 2026.10.02閱讀約 4 分鐘
貝茲曲線練習網站 Shape Type:用 10 個字母測驗曲線掌握度

重點整理
Shape Type(shape.method.ac)是貝茲曲線的線上練習:每題給一個字母,拖拉紅色錨點與把手調整輪廓,按 Compare 就會顯示分數,並可切換原字型、你的作品或兩者重疊比對。共 10 個字母,適合想練好曲線的設計新手。

你的貝茲曲線畫得漂亮嗎?是否每次在設計圓弧圖形時總覺得弧線看起來非常奇怪呢?身為設計師,作圖時一定都會使用貝茲曲線,貝茲曲線是作圖的基礎,不論是平面設計、 Logo 、插畫或是字體設計都會需要用到。若想要在網站中加入裝飾元素或是設計背景豐富網站的整體品牌視覺,常要仰賴設計師的美感與執行製作能力,一個完美的圖形設計,除了創意構想外,也需要設計師對於弧形有良好的掌握度。

Shap Type 這個網站整理了十種字母,每個字母都是不同的英文字型,藉由紅點的拖拉測驗你對貝茲曲線的敏銳度,同時也提供原始字母的圖像與你所拖拉的貝茲曲線比對圖,讓你了解的你貝茲曲線應該再做些什麼樣的調整。雖然這是個簡單的測試網站,但相信藉由這些小練習,有助於提升設計師對於貝茲曲線與圓弧的繪製能力,若是想要從事平面設計的朋友也可以增加練習機會。

貝茲曲線測驗網站使用方式

第一步:進入網站,藉由輕鬆簡單的使用教學開始,只要拖拉紅色的點到對應位置後就能進入測驗,所有貝茲曲線的測試就靠拖拉就能完成。

網頁視覺設計
網頁視覺設計

第二步:進入測驗後,移動紅色的點調整白色圖形的外圍輪廓,確認後可按下右邊按鈕Compare,會跳出分數及貝茲曲線正確的位置。

網頁視覺設計
網頁視覺設計
網頁視覺設計
網頁視覺設計

第三步:分數下方共有三種選擇模式可以比對你所繪製與原始的貝茲曲線。確認圖像後,可點選下方的 NEXT 按鈕進入下一個測驗。

    • Both letter – 可同時比對原始圖與你所拖拉的結果
    • Original letter – 原始字型的輪廓
    • Your letter – 你所拖拉的字型結果
網頁視覺設計
網頁視覺設計

畫好貝茲曲線有哪些基本原則?

  • 錨點放在極值點:把錨點放在曲線最上、最下、最左、最右的位置,曲線最容易控制。
  • 把手保持水平或垂直:極值點上的把手拉成水平或垂直,弧線會比較飽滿,不會歪斜。
  • 錨點越少越好:能用兩個錨點畫完的弧線就不要放三個,錨點多反而容易出現凹凸。
  • 把手長度適中:把手太短轉角會變尖,太長則會鼓起來,可以多試幾次找到順眼的比例。

在 Shape Type 練習時,先照這些原則擺錨點再微調,分數通常會提高不少。

還有哪些練習曲線與字型的小遊戲?

Shape Type 是 Method of Action 推出的設計練習之一,同一系列還有其他小遊戲,可以一起玩:

  • The Bézier Game:從零開始用鋼筆工具描出指定圖形,適合完全沒用過鋼筆工具的新手先玩。
  • Kern Type:調整字母之間的距離,練習字距的感覺,對做 Logo 文字與標題很有幫助。

這類遊戲適合當暖身,真正要進步還是要在 Illustrator 或 Figma 實際描繪 Logo、icon,熟悉後再挑戰複雜的字型輪廓。

常見問題

貝茲曲線是什麼?

貝茲曲線是向量繪圖用來描述曲線的方法,由錨點和控制把手組成,拖動把手就能改變曲線的彎曲方向與弧度。Illustrator、Figma 的鋼筆工具,以及字型、Logo 的輪廓,都是用貝茲曲線畫出來的。

Shape Type 要付費或註冊嗎?

不用。打開 shape.method.ac 就能直接開始,先完成簡單的操作教學,接著依序練習 10 個字母,每題按 Compare 就會顯示分數與正確曲線的比對,不需要登入帳號。

練習貝茲曲線對網站設計有什麼幫助?

網站上的 icon、Logo、裝飾線條與 SVG 圖形都要用貝茲曲線繪製。曲線掌握得好,錨點更少、線條更順,輸出的 SVG 檔案也更小,放到網頁上縮放都不會變形。

結語

雖然貝茲曲線對於剛踏入設計領域的朋友來說可能稍微困難,只要經過多次的練習,相信對於貝茲曲線的掌握度一定會大躍進。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。