登錄頁是產品給用戶的第一印象。極簡風通過克制的灰度配色、微妙的陰影層次、像素級的 1px 細線，傳遞專業、可信、呼吸感。本教程從零構建一個 320×210 px 登錄卡片，全程僅用圖層樣式、形狀工具、文字工具，零圖片素材，極易移植至代碼實現。

最終效果

PSD 源文件下載：新浪微盤

步驟 1：卡片基礎形狀與投影

1. 新建 800×600 px 文檔（或適配設計稿尺寸）。
2. 圓角矩形工具（U），半徑 4-6 px，繪製 320×210 px 卡片，填充淺灰 #f5f5f5。
3. 圖層樣式 → 投影：混合模式「正片疊底」，顏色 #dbdada，不透明度 50%，角度 90°，距離 1 px，展開 0，大小 1 px —— 極薄接地陰影。
   
4. 描邊：大小 1 px，位置「內部」，顏色 #dbdada，收攏邊緣。
   
5. 漸變疊加：模式「正常」，不透明度 60-65%，漸變：白 #ffffff → 極淺灰 #f1f1f1，線性 90°，賦予極微立體感。
   

步驟 2：1px 雙線細節豐富層次

• 新建圖層「Inner_Lines」，鉛筆工具（1 px）或矩形選框填充：
  • 頂部內邊距 1 px 處：橫線 #dbdada（深灰）。
  • 緊貼其下：橫線 #ffffff（白）。
• 此「深淺雙線」技法模擬物理邊緣的高光/陰影過渡，視覺上卡片更「實」。
  

步驟 3：標題區排版

• 左上角文字「Login Form」，字體 Droid Sans / 系統 UI 字體，大小 14-16 pt，顏色深灰 #333333，字重 500/600。
• 字距 0.5-1 px，行高 1.4，基線對齊 8px 網格。
  

步驟 4：輸入框設計系統

1. 圓角矩形（半徑 4 px），白色填充，尺寸 280×44 px，間距 16 px 垂直排列。
2. 描邊：1 px，#dbdada，內部。
3. 佔位文字：郵箱 `email@example.com`，密碼 `••••••••`，顏色 #999999，字重 400。
4. 左側圖標區：44×44 px 觸控熱區，置入 SVG 圖標（郵件/鎖鏈），顏色 #999999，hov 狀態 #333333。
   

步驟 5：記住我/忘記密碼 復選框設計

• 圓角矩形 10×10 px（半徑 2 px），描邊 1 px #dbdada。
• 自定義形狀工具選「打勾」圖案，置中，顏色品牌色（如 #007aff）。
• 文字「記住我」/「忘記密碼」，12 pt，#666666。
  

步驟 6：CTA 登錄按鈕——微交互狀態預留

1. 圓角矩形 110×35 px（半徑 4 px），填充 #6d6d6d 深灰。
2. 投影：白色 #ffffff，模式「正常」（非正片疊底），不透明度 30%，距離 0，大小 2 px —— 內部頂部高光線。
   
3. 內陰影：黑色，模式「疊加」，不透明度 30%，角度 90°，距離 3 px，阻塞 0，大小 0 —— 按下凹陷感預演。
   
4. 描邊：1 px，#595656，內部。
   
5. 文字「登錄」，白色，14 pt，中粗，字距 0.5 px。
6. 狀態擴展（建議在組內建立）：
   • Hover：填充 #5a5a5a，投影不透明度 50%。
   • Active：填充 #4a4a4a，內陰影距離 5 px，移除頂部高光投影。
   • Disabled：填充 #e0e0e0，文字 #999999，移除所有陰影/描邊。

步驟 7：整體微調與交付規範

• 卡片組命名 `Card_Login`，內部圖層命名規範：`bg_card`、`line_inner`、`txt_title`、`input_email`、`input_pwd`、`icon_email`、`icon_pwd`、`chk_remember`、`lnk_forgot`、`btn_submit`。
• 所有間距、圓角、色值、字號整理為 Markdown 設計規範文檔，同步至 Zeplin/Figma/语雀。
• 導出資產：圖標 SVG、背景圖 2x/3x PNG、按鈕九宮格切圖（如需原生開發）。