使用 Sketch 設計一個 App 登入畫面的完整步驟和設計建議

以下是使用 Sketch 設計一個 App 登入畫面的完整步驟和設計建議，適合 iOS 或 Android 應用程式的介面：

🎨 登入畫面設計要素

1. App Logo / 名稱
2. 標題或歡迎文字
3. Email / 使用者名稱欄位
4. 密碼欄位
5. 登入按鈕
6. 忘記密碼連結
7. 註冊帳號按鈕 / 文字
8. （可選）第三方登入按鈕（Google、Apple、Facebook）

🛠 使用 Sketch 建立登入畫面步驟

🧱 1. 新增 Artboard

• 開啟 Sketch
• 點選左上角的「Insert」>「Artboard」
• 選擇尺寸：
  • iPhone 14: 390x844
  • Android Pixel: 360x800

🖼️ 2. 插入 App Logo

• Insert > Image 或 Text，放置在畫面頂部中央
• 建議間距距頂部 80~100px

💬 3. 歡迎文字

• 使用 Text 工具，輸入如「歡迎回來！」、「請登入帳號」
• 字體建議：
  • Font: SF Pro / Roboto
  • Size: 24-32pt
  • Weight: Medium / Bold
  • 對齊方式：置中

📝 4. 輸入欄位（Email / 密碼）

• 使用 Rectangle 工具繪製兩個輸入框
• 大小建議：
  • Width: 300~340px
  • Height: 44~56px
  • Radius: 8px
• 加入文字提示（Placeholder）：
  • Email Address / Password
  • 可用灰色文字 #B0B0B0

🔒 5. 密碼欄位附帶「顯示/隱藏」圖示（可選）

• 插入 eye / eye-off icon 在欄位右側
• 使用 Icon 插件如 Feather Icons 或 Heroicons

🔘 6. 登入按鈕

• 使用 Rectangle 畫一個主按鈕
  • Width: 300~340px、Height: 48~56px
  • Radius: 8px
  • 顏色：主色（如 #007AFF、#4A90E2）
• 中央加上文字：「登入」
  • 白色字 #FFFFFF、字重 Bold、字體大小 16-18pt

🔗 7. 忘記密碼 / 註冊連結

• 使用 Text 工具輸入「忘記密碼？」和「還沒有帳號？註冊」
• 建議使用深灰 #666666 和主色高亮「註冊」連結

🔄 8. 第三方登入（可選）

• 加入按鈕例如：
  • 用 Google 登入
  • 用 Apple 登入
• 可使用圓角按鈕、加上 Icon（Google G、Apple logo）
• 可以使用 plugin 例如 Craft 插件或直接插入 SVG

✅ 小技巧與建議

• 使用 Symbol 為輸入欄與按鈕建立可重複使用的元件
• 為每個元素設定 Layer Naming，便於開發人員交接
• 使用 Auto Layout Plugin 或者 Constraints 來自動調整元件位置
• 搭配 Style Guide / Design System 使用一致的色彩與字體