PowerApps x Daily UI #002 – Credit card checkout

この記事は「PowerAppsDaily UIチャレンジ!UI100本ノックに挑戦します」の#002です。

今回のpromptは「Credit card checkout」です。クレジットカードでの決済画面ですね。実際にはセキュリティの要件からペイメントサービスに飛ばすケースが多いみたいですが、UIの練習ですのであまり難しく考えず、画面を作ってみました。

Sun’s Na-na Online Shopのクレジット決済画面

こんなイメージになりました。ショップ名もカード情報ももちろんニセモノです。

構成要素

カード情報にはこんなものがありますね。

  • カードの種別
  • 保有者の氏名
  • カード番号
  • カードの有効期限
  • セキュリティコード

また、決済画面にはこんな情報がありそうです。

  • カート(購入商品の一覧)に戻るコントロール
  • 決済するコントロール
  • 商品の合計金額
  • 消費税
  • 配送料
  • 支払い合計額

デザインのエッセンス

今回はカード種別ごとに背景画像を作って、データのラベルと組み合わせています。カードのカラーはブランドのテーマに合わせてみました。

  • PowerAppsのギャラリーは、スクロールバーを出さずに左右(または上下)に切り替えのナビゲーションを出すこともできます。カードの選択部分はこの方法を使っています。
    • ナビゲーションがちょっと小さいですね…(変えられないようです)
    • スクロール操作自体は殺せないみたいです。
  • レディースファッションを扱うオンラインショップの感じを出してみようと思いましたが、通販はほぼAmazonしか使わないので、果たして雰囲気がでているのか…?

おまけ:動いているようす

PowerApps x Daily UI #002 – Credit card checkout