Axure は登録 module_html/css_WEB-ITnose に対していくつかの小さな操作を実行します

当時、私は本とウェブサイトの設計図を読んで、それからいじり始めました。以下のとおり

---

一般的な登録プロセスには次の手順が含まれます。

1. ユーザーはプロンプトに従ってフォームに入力します。

2. ユーザーがフォームに入力すると、入力内容が正しいかどうかを確認するメッセージが表示されます。

3. ユーザーがフォームを送信するときに、すべての項目が正しいかどうかを確認します。誤りがある場合は、どの項目が間違っているかを確認するメッセージが表示されます。

4. ユーザーがフォームを正常に送信するか、フォームをキャンセルします。

フォームに記入する際の一般的な確認方法は次のとおりです。

1. ユーザーが登録されたユーザー名または ID に不正な文字を使用していないかどうか。

2. ユーザーがコンテンツを入力したかどうか。

3. 2 回入力したパスワードは一致していますか?

4. 適切な電子メール アドレスですか?

5. 長さは 6 ～ 12 文字ですか?

以下では、Axure7.0 を使用してユニバーサル登録の設計を完了します。以下には、最も基本的な入力ボックスの変更とプロンプト テキストの変更が含まれています。

1. フォームのレイアウト

7 つのテキスト ラベルをドラッグ アンド ドロップし、図のように名前を付けます。

それらをすべて選択し、「右揃え」をクリックしてそれらを整列させ、「垂直方向に配置」をクリックして上下の間隔を同じにします。

次の項目に対応する 5 つのテキスト ボックスをドラッグし、すべて選択して左揃えを選択します。

各行のテキストとテキスト ボックスを選択して上下を中央揃えにし、各行のテキストを揃えます。

2 つのラジオ ボタンを並べて、性別に対応する入力ウィジェットを追加します。名前は男性と女性です。

それらを選択し、右クリックして [ラジオ ボタン グループの指定] を選択し、ポップアップ ボックスにグループ名と性別を入力すると、ラジオの選択が実現します。

場所のドロップダウン リスト ウィジェットを追加します。次に、リスト項目を編集し、リスト バーにオプションを追加します。

次の名前のボタン ウィジェットを追加します: 今すぐ登録

2. 入力ボックスの境界線を変更します

テキスト ボックスの入力ボックスに入力すると、入力ボックスは次のようになります。ハイライト表示され、右側でユーザーに入力を求めます。入力が要件を満たしていない場合は、右側にプロンプ​​トが表示されます。

テキスト入力ボックスを 5 つ選択し、右クリックして [境界線を非表示] を選択します。 (非表示になる理由は最後に説明します)

動的パネルをドラッグし、「Mailbox」という名前を付けます。別の状態を追加し、それぞれ input と not input という名前を付けます。

入力状態で四角形を2つ追加します。枠線の色と塗りつぶしの色は図の通りです。 2 番目の四角形はプロンプト テキストです。

状態を切り替えるときに元のテキスト ボックスを完全に覆うために、長方形のサイズはテキスト ボックスより 2 ピクセル大きくなります。

最初のテキスト入力ボックスを一番上に配置します。

非入力状態に切り替え、ここで入力状態の最初の四角形をコピーし、境界線の色をデフォルトの灰色に変更します。

パネルの順序を変更し、未入力ステータスを前に置きます。

パネルの順序

クリックしてプレビューします。インターフェイスは次のようになります。

3. 境界線を移動します

マウスが移動するように、メール入力ボックスに次のステータスを追加します。 to そこには状態は入りません、そこにない場合は状態に入りません。

1

生成後、次のインターフェースが表示されます:

4. 他の入力ボックスとプロンプトを追加します

これには、メールボックス部分で作成された動的パネルを他の入力項目にコピーする必要があります。 。

他のオプションにコピーし、座標の調整に注意してください。

他の動的パネル名を変更します。

他の動的パネルの入力状態のプロンプトテキストを変更する必要があります。

1

すべての動的パネルを下部に配置し、入力ボックスを上部に配置します。

メールにステータスを追加するのと同じように、ステータスを個別に追加します。

5. 完全な効果

ここでは、最初のテキスト入力ボックスを非表示にし、境界線が黒になり、マウスが移動すると入力されていない状態に置き換えます。入力状態に変わり、青色のプロンプト テキストで表示されます。これで、登録デザインの境界線効果とプロンプト テキストが完成しました。認証入力やパスワード認証、認証コードの処理などもありますが、後ほどまとめます。

---

次の章が予定されていますが、時間がかかりすぎます。

結局のところ、プロトタイピングはアイデアを実現するプロセスにすぎません。強力なインタラクションと高い忠実度を追求しすぎないでください。