Axure RP プロトタイピング演習 03 を使用して、ログイン インターフェイスのプロトタイプを作成する_html/css_WEB-ITnose

この記事はログインインターフェースのプロトタイプの作成についてです。

まず、ページスタイルでページの背景色を設定します。

ページに画像を追加する場合は、画像コンポーネントをページにドラッグし、x 軸と y 軸を設定します。ページ上の画像コンポーネントをダブルクリックして画像をインポートします。画像コンポーネントに対応するウィジェットのプロパティとスタイル パネルには、トリミング後にダブルクリックして画像を保存する機能もあります。写真をカットする機能も備えています。画像コンポーネントのコーナー保持プロパティは、画像のサイズを縮小するときに一定の明瞭さを維持するために使用されます。

Rectangle コンポーネントをページにドラッグし、ツールバーの [Line Color] で境界線の色を変更します。

インターフェイス上のテキストは、Label コンポーネントを使用します。ツールバーの「テキストの色」でテキストの色を設定します。

テキスト フィールドをテキスト ボックスとしてインターフェイスにドラッグし、コンポーネントの幅、高さ、位置を調整し、テキスト ボックス内のフォントの高さを変更します。

Ctrl キーを押しながらパーツをドラッグしてパーツをコピーします。

チェックボックス ウィジェットをページにドラッグします。

次に、ログイン ボタンを作成する必要があります。HTML ボタンのスタイルは変更できないため、Round Rectangle コンポーネントをドラッグしてサイズを調整し、ダブルクリックしてテキストを入力し、テキスト サイズを調整し、テキストの色を変更します。 Rectangle コンポーネントの背景色を設定し、境界線の色を設定します。

今、ボタンの上にマウスを置くと、ボタンの色が暗くなります。どうすればよいですか?

Rectangle コンポーネントに対応する [Widget Properties and Style] パネルの下の [Interation Styles] に [MouseOver] 項目があります。[MouseOver] をクリックし、ポップアップの [Set Interation Style] ウィンドウで [Fill Color] をオンにして、背景色を設定します。マウスがホバリングしています。

複数のコンポーネントにホバー効果を設定したい場合は、複数のコンポーネントを同時に選択し、ホバー効果をまとめて設定する必要があります。

特定のコンポーネントにツールチップを追加する場合、それを移動するとテキスト プロンプトが表示されます。コンポーネントに対応する「ウィジェットのプロパティとスタイル」パネルのツールチップで設定するだけです。

最終的な効果は以下の通りです。

参考: http://www.iaxure.com/