黑哥 AI
切换 EN
手机端已适配;查看大图、筛选分类和复制长提示词时,用电脑浏览器访问显示效果更好。

结账支付步骤页面

UI 模拟界面 浅色模式 扁平 极简主义

中文完整提示词

一张无品牌现代手机竖屏结账流程支付步骤截图,浅色模式电商应用。顶部三步进度指示器:「购物车」(已完成✓)、「配送」(已完成✓)、「支付」(当前激活,蓝色)。下方支付方式选择区:激活卡片展示遮码信用卡「•••• •••• •••• 4242」、有效期「09/27」、安全码遮码,角落只使用通用银行卡图标,不出现任何真实卡组织标志;第二张卡为未选中的「使用钱包支付」(余额「¥42.50」)。可折叠订单摘要手风琴显示商品缩图、小计「¥189.00」、折扣「-¥40.00」、运费「免运费」、合计「¥149.00」加粗。底部固定栏为深蓝色「确认支付」大按钮带锁形图标。所有用户可见文字为自然简体中文和人民币价格,不出现真实支付品牌名称、真实卡组织标志、英文按钮、水印或乱码。

English full prompt

An iPhone mockup in portrait mode showing a multi-step checkout flow at the payment step, in a light-mode e-commerce app. At the top, a step-progress indicator shows three steps: "Cart" (check mark, completed), "Shipping" (check mark, completed), "Payment" (active, blue). Below, a section header "Payment Method" contains two selectable cards: the active one shows a credit card form with masked fields "•••• •••• •••• 4242", expiry "09/27", and a CVV dot-mask field; a small Visa logo sits in the card's corner. The second card is an unselected "Pay with Wallet" option showing a balance "$42.50". Below, a collapsible "Order Summary" accordion shows item thumbnails, names, and subtotal "$189.00", discount "-$40.00", shipping "Free", total "$149.00" in bold. A sticky bottom bar has a full-width deep blue button labeled "Place Order — $149.00" and a padlock icon for trust. Color palette: white background, deep blue #1A3DDB CTA, light gray borders, green checkmarks. Tight, trust-signaling layout.

相关案例