Shape Type

關於 Shape Type

Shape Type 是 Method of Action 的字母外形練習遊戲，頁面以拖曳作為開始操作的方式，讓使用者直接改變字形。遊戲將操作集中在字母形狀的判斷與調整，完成後用百分制顯示結果，也提供再次嘗試的入口，讓同一種視覺任務可以反覆進行。

畫面同時提示兩個輔助操作：按住修飾鍵可沿軸線對齊，另一個修飾鍵可快速預覽。使用者能在拖曳與預覽之間比較字母外形，再依結果繼續嘗試；它適合作為字形觀察和操作練習，透過有限且明確的控制，將注意力放在輪廓調整與完成後的回饋。

功能特色

主要功能

• 拖曳字形練習：透過拖曳控制字母輪廓，練習辨識原始字形的曲線關係。
• 軸線對齊：按住 Shift 可沿軸線對齊，協助控制拖曳方向。
• 快速預覽：按住 Alt 可預覽字形，操作時比較目前結果與目標。
• 字形比較：完成後可切換同看兩個字母、原始字母或自己的字母，觀察差異。
• 字體背景：題目列出字體、設計師與發表年份，將輪廓練習連回實際字體。
• 相似度與重玩：以相似度及百分制分數呈現結果，可前往下一題或再次挑戰。

使用情境

• 練習字母輪廓觀察時，透過拖曳與快速預覽比較字形變化。
• 進行向量字形操作前，以對齊提示與重試功能安排短時間暖身練習。

相似工具

• Adobe Color — 學習網站
• Adobe Learn — After Effects — 學習網站
• Apple Human Interface Guidelines — 學習網站
• Baymard Institute UX Knowledge Hub — 學習網站
• BP&O — 學習網站
• Brand New — 學習網站
• Butterick’s Practical Typography — 學習網站
• Color（Method of Action） — 學習網站
• DesignSystems.com — 學習網站
• Figma Learn — 學習網站
• Fonts In Use — 學習網站
• GoodUI — 學習網站

加入創作邦會員

收藏實用內容、下載免費模板，訂閱電子報。

精選工具

• Comet — Comet 是 Perplexity 的 AI 瀏覽器，整合搜尋與助理功能，可協助閱讀、比較網頁內容、準備郵件草稿與整理學習計畫。
• Lovable — Lovable 可透過對話介面建立軟體產品，協助把想法製作為網頁應用程式。
• Pexels — Pexels 是照片與影片素材資源平臺。
• DOTOWN — DOTOWN 提供像素插畫下載，官方標示可商用，可用於圖示、文件與其他創作。

新工具

• justfont blog — 分享中文字體基礎、字型排版應用與字體設計入門的繁中文章及教案。
• LottieFiles Tips and Tutorials — LottieFiles 官方教學文章，分享設計系統、狀態機、介面動畫與 Lottie 流程。
• Adobe Learn — After Effects — Adobe 官方 After Effects 教學，涵蓋文字動畫、視覺效果與動態模糊。
• Pentagram Work — Pentagram 官方作品集，分享品牌識別、策略、包裝與動態等專案案例。