Clever Geek Handbook

支払いを入力するためのインタラクティブなクレジットカード

この記事では、開発者でない場合、ブラウザでインタラクティブ要素をほとんどすぐに開発するそれほど複雑でない方法について説明します。







インターフェイスアニメーションは現在トレンドになっています。 いくつかの理由があります：使いやすさを向上させ、製品全体の魅力を高めます。 3番目は、グローバルIT市場でのアニメーションツールの開発です。 設計やプロトタイプを復活させるための非常に多くの異なるユーティリティが存在するため、そのような動きを渡すのはおかしいので、スキルを習得する必要があります。 多くのツールがありますが、すべてをリストするわけではありません。 しかし、私は特定の1つに言及します...



私はAxureで働いています。 私にとって最も重要なプラスは、ブラウザでほとんどすぐにインターフェイスを作成できることです。 すべての要素、フォント、インデントはすぐに「アラート」に表示され、レイアウトにする時間はほとんどありません。 彼らの開発者は同じものを見ると知っています。 私は、99％でデザインが「壊れない」ことを知っています。



今日は、支払いデータを入力するための簡単なインタラクティブ/アニメーション化されたフォームを作成する方法について話しています。 Axureでアニメーションを作成することは完全に標準ではありません。 After Effectsのように、レイヤーへの投影になじみのあるタイムラインはありません。 特定のアクションによってトリガーされるイベントのシーケンスのみがあります。 それらの間に「遅延」タイミングを挿入し、ミリ秒単位で一時停止を示すことができます。 Axureのアニメーションは少しマニアックに見えます。プロセス自体に深く染み込んでいる場合にのみ、それを理解できます。



仕組みをご覧ください。





ライブデモ ： www.cardinteractive.pro/demo



スキル習得の一環として、自分でこのタスクを思いつきました。 フリップ効果に感銘を受け、このアニメーションが最適な現実世界のオブジェクトを探していました。 裏面の内容を見るために私たちはしばしば何を手に入れますか？ クレジットカードは完全に収まります。 前面からデータを入力し、それを裏返してCVCコードを入力します。 私は長い間その立場を維持してきました。電子デバイスでのアニメーションは、実世界の物理学によって正当化されるべきです。 それから私たちは彼女が好きで迷惑ではありません。 私たちはほとんど彼女に気づきません、すべては自然に起こります。 そして、この製品を使って作業することで、温かい気持ちが残ります。 これが、使いやすさに優れたデザインのアニメーションの仕組みです。 それが重要であり、トレンドになっている理由です。



ケース ：オンラインクレジットカード入力フォーム

目的 ：必要なすべての入力、それらの間の遷移、使いやすさを向上させるためのわかりやすいアニメーションを備えた、便利なブラウザバージョンのクレジットカードを作成します。

ボーナス ：* .rpファイルとしてのAxureソースは最後にあります



アクションプラン：





一般的な概念







ソースは、3つの状態で構成される動的パネルです。 表側（State1）、裏側（2）、およびデータが受け入れられたことを確認する追加側（3）。 ネストされた各グループState1 ... 3には設計要素が含まれています。



設計



ウェブインターフェースでは、常に10pxグリッドを使用します。インデントと寸法をカウントする方が便利です。 だから私はそれらを10の倍数にすることを試みました。ロゴは一時的なものであり、既存の銀行の名前に頼りたくありませんでした。 このカードは、90度の角度で影を落とし、少し空間感を加えています。 シャドウパラメータ：x = 0、y = 25、ぼかし= 45、＃000000、アルファ= 0.35



フロントサイド（State1）







グラフィック、隠されたマスターカードのロゴ、CVCコードを入力するための隠されたカード反転ボタンが含まれています（8）。 これらの2つのオブジェクトは、特定の条件下で表示されます。 条件の検証は、イベントに関連付けられます。 たとえば、[カード所有者名]フィールドに入力されたデータの長さが7以上の場合、反転とCVC入力ボタンを裏面に表示します。 もちろん、実際には、開発者はすべてのフィールドの完全性をチェックしますが、私の場合、これは過度の完璧主義です。



入力フィールド（1〜7）は2つのコンポーネントです。 少し奇妙ですが、Axureはhtml入力用のCSSで大したことはできません。 境界線を無効にして、よりモダンな外観にすることができるのは良いことです。 したがって、追加の白い長方形が入力の下を通過し、それら自体が優先され、「境界線を非表示」チェックボックスがオンになります。 この長方形は、入力のonFocusの瞬間にスタイルを変更するため、2つの関連オブジェクトの使用については誰も推測しません。



リバース（State2）







ここではすべてが簡単です。 同じ長方形の引き出しを使用して、よりリアルな「磁気」ストリップが描かれます。 重要なコントロールのうち、CVCフィールドのみがここにあります。 カードの本体の背後には、巧妙に隠された支払い確認ボタンがあります。 彼女は、「Symbols in the CVC field> = 3」という条件を確認した後にのみ、バウンス効果を残します（実際、単純な簡単さで十分です）。



確認パーティー（State3）







そして最も簡単なのは「サードサイド」です。 カードが裏返されたように見えますが、内容はすでに異なっています。 これは肯定的な経験の確認の側面です。 すべてがうまくいった。 最小要素。 関数とイベントはありません。 このような効果は、ユーザーエクスペリエンスにプラスの効果をもたらすことに加えて、全体的な構成に魅力を追加する必要があります。



ちなみに、Figmaを使用する場合は 、 既製の設計システムに注意することをお勧めします 。 フリーランサーが1か月あたりの注文を増やすのに役立ち、プログラマーは自分で美しいアプリケーションを作成できます。また、チーム作業用の既製の設計システムを使用して、チームが「スプリント」スプリントを迅速にリードします。



また、深刻なプロジェクトがある場合、当社のチームは、ベストプラクティスに基づいて組織内に設計システムを展開し、Figmaを使用して特定のタスクに合わせて調整する準備ができています。 Web /デスクトップ、および任意のモバイル。 また、React / React Nativeにも精通しています。 Tへの書き込み： @kamushken




カードタイプの定義



これは、最初の4桁を入力した後の支払いサービスの認識の模倣です。 これは単なるプロトタイプであるため、カード番号+コンテンツチェックの最初の入力にonLostFocus関数を使用します。 「content = true」でフォーカスが次の4桁に移動した場合、ロゴを表示します。



次の入力に再び焦点を合わせる



onTextChange関数が原因で発生します。 各数字を入力した後、数字を確認し、すでに4がある場合は、それらの間にスペースを入れます。 視覚的にはこのように見えますが、技術的にはすべてが非常に複雑でなければなりませんでした。 以下の既知のバグをご覧ください。 改善すべきことがあると思いますが、一般的な見方は変わりません。 潜在的に費やされた時間は価値がないと考えられます。 onTextChangeに基づいて、他のフィールド間の遷移も実行されます（たとえば、日付からフルネームへのジャンプ）。



リバースおよびCVC入力



名前の少なくとも一部の入力を確認した後にのみ、カードを裏返し、最後のフィールドに入力する機会を与えます。 onKeyUp関数を確認します。 つまり、キーボードのボタンを放すたびに、状態チェックが開始され、何かが入力されると、カードフリップボタンが表示されます。 もちろん、理想的には、カード所有者フィールドのクリアもチェックしてから、ボタンを非表示にします。 しかし、私たちは同意しました：完璧主義なし。



Ux







既知のバグ





Axure 8 @GumroadのRPソースをダウンロード • ライブデモ



ブラウザバージョンのHTML / CSS / JSをダウンロードする
このバージョンは無料で配布されます。 商用利用。 リクエストのみです。このインタラクティブフォームを製品に正常に統合した場合は、コメントにプロジェクトへのリンクを残してください。 ありがとう

@Gumroadをダウンロード



More articles:


All Articles