先ほどは Web ページを作成するスキルを学びました。ここからは、Axure を使用してプロトタイプを作成するために必要なフロントエンド スキルを学びます。一方で、必要なページを事前に描画できるため、コストを節約できます。一方、開発には多額の費用がかかりますが、時間は、ユーザーにエクスペリエンスを提供することで製品の問題を発見し、製品がオンラインになる前に問題を解決できるため、製品の継続的な改善や最適化に多大なエネルギーを費やす必要はありません。オンラインになります。
この記事の後に、学習メモ付きの JavaScript チュートリアルを公開し、無料で皆さんと共有する予定です。
Axure チュートリアル (1)
プロトタイプの種類
ワイヤーフレーム
- 高速かつ低コストの記述ソリューションを生成し、設計のためのスペースを増やす
忠実度の高いプロトタイプ
-
時間のかかる制作、高度な復元、保証されたデザイン効果
-
生産要素
- 形状とサイズ: スクリーンショットの比率と基準線に厳密に従います。
- カラー: 吸収カラーを使用し、グラデーションカラーに注意してください。
- テクスチャ: 参照オブジェクトの検索、画像のコピー、インターセプト、カバーなど。
- インタラクティブなアクション: ページ切り替え、応答範囲、クリックアニメーションなど。
- デモンストレーション効果: 携帯電話デモンストレーション、プロトタイプホスティング、画面適応
- 制作スキル
- スクリーンショットを撮ることができ、カットに適切な参照オブジェクトを選択でき、車輪の再発明は不要です。
- 検索エンジンを使用します: iconfont、Baidu
要件文書
- 研究開発をガイドするためのロジックとビジネスの詳細な説明
制作例
ワイヤーフレームの例
WeChat 検出インターフェースのレンダリング
制作スキル
-
元の画像をアップロードする必要があります。アップロードしないと、画像が歪んでしまいます。画像が大きすぎる場合は、画像を小さくするだけで、多くの場所の隙間がなくなります。
-
効果がより明確になるように、背景色をグレー (#dddddd) に設定することをお勧めします。
-
構築に使用する適切なグラフィックスの選択を学習する
-
均等に配置する必要がある場合は、Ctrlキーを押しながらマウスをクリックして、水平方向に均等に配置することを選択します。
高忠実度プロトタイプの例
WeChatにリッスン機能を追加するレンダリング
制作スキル
- 分割グラフィックを使用して画像を 2 つの部分に分割する方法を学びます
- 画像をドラッグして適切なスペースを作り、ボックスに挿入して調整します
- iconfont で適切なアイコンを見つけます
複数の画像にインタラクティブな機能を追加する
インタラクティブなステップ
-
クリック領域にホットスポットを追加
-
クリック イベントを追加するには、ジャンプ先のページを選択するだけです。戻りページを追加する場合は、右下隅にある [戻る...] を選択するだけです。
-
レコードを回転させましょう
-
レコードをカットする
-
レコード部分を長方形で覆う
-
小さな黄色の三角形を押したまま、右に直接引くと、元の画像記録領域が結果の画像で覆われます。
-
ホット ゾーンのクリック回転イベント (回転) を設定し、パラメータを次のように設定します (なしを線形に設定します。これは線形回転を意味します。1080 は 3 つの円です)。
-
ホームページを選択し、右上隅のプレビューをクリックしてプレビューを開始します
-
製品デモ
