技術共有

[PM]プロトタイピングとインタラクション デザイン

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

アーキタイプの分類

1. プロトタイプのスケッチ

計画の初期段階でアイデアを整理するために使用される手書きの図面

2. 忠実度の低いプロトタイプ

シンプルなインタラクション、カラーマッチングの必要がなく、主に黒、白、グレーで製品の企画やレビューの段階で使用されます。

標準化された低忠実度プロトタイプは、高忠実度プロトタイプの基礎となります

3. 忠実度の高いプロトタイプ

複雑なインタラクションは一般に公開デモンストレーションに使用されます。

製品はまず忠実度の低いプロトタイプを作成し、デザイナーはそのプロトタイプに基づいてデザインドラフトを作成します。

低忠実度プロトタイプ + 設計ドラフト = 高忠実度プロトタイプ

アクスア

1. 操作インターフェース

①メニューエリア ②レイヤーエリア ③コンポーネントエリア ④描画エリア ⑤スタイルエリア

2. 共通操作
  1. 新しいファイルを作成します: [ファイル] -> [新規]
  2. ファイルを開く: 「ファイル」->「開く」
  3. ファイルを保存: [ファイル] -> [保存]
  4. 主なファイルの種類
  • .rp: プロトタイプファイル
  • .rplib: コンポーネントライブラリファイル
  • .rpteam チーム プロジェクト ファイル
  • .html Web ページ ファイル
  1. 自動保存: [設定] -> [バックアップを有効にする]
  2. 組み合わせ: Ctrl+G
  3. 公開: プロトタイプを HTML ファイルに生成します -> 最初に新しいフォルダーを作成することをお勧めします
  4. ヘルプ: Axure について -> バージョンの表示
  5. ヘルプ: 認証の管理 -> ソフトウェアのクラック
  6. 元のライブラリを追加: コンポーネント ライブラリ + 番号
  7. コンポーネント ライブラリの削除: コンポーネント ライブラリを開く -> 詳細 -> コンポーネント ライブラリの削除
3.スタイルデザイン

コンポーネントをキャンバスにドラッグし、スタイルを変更します

4.インタラクションデザイン

インタラクションは人間とコンピューターの対話のプロセスであり、インタラクション デザインは対話のルールとパフォーマンスの設計です。

Axure では、インタラクションはインタラクション スタイルとインタラクション ロジックに分けられます。

1. インタラクティブ スタイルには共通のスタイル変更が組み込まれており、使いやすいですが、ロジックを設定することはできません。

2. インタラクションロジックの設定がより柔軟になり、要素にイベントやアクションを追加することで、パーソナライズされたスタイルと論理的なインタラクションを完成させることができます。

3. 設定したインタラクティブ効果はプレビューで確認する必要があります

5.リピーター

リピーターの役割は、常にコピーして貼り付ける必要がなく、構造を再利用することです。

  1. リピーターを作成し、リピーターをダブルクリックして編集モードに入ります
  2. 後続のデータ バインディングを容易にするために、すべてのコンポーネントに名前を付けます。
  3. 編集を終了し、テーブル データを入力します (列名は英語のみをサポートします)
  4. 表示 -> マスク -> リピーターマスクをオフにする

6. ダイナミックパネル

動的パネルを使用してコンテンツ切り替え効果を実現する

  1. 左側のナビゲーション バーを追加する
  2. 右側に動的パネルを追加します
  3. 動的パネルをダブルクリックして編集モードに入ります
  4. 異なる要素を異なる状態に設定する

  1. ナビゲーションにクリック イベントを追加し、動的なパネル ステータスを設定します

  1. プレビュー効果

試作仕様書

携帯電話アプリとコンピューターアプリの違い:

  1. 画面適応(画面サイズ、解像度)
  2. インタラクション方法 (マウスによる操作は指による操作よりも正確です)
PC版

1.バージョンハート

現在の主流の解像度は 1920 * 1080 であるため、バージョン センターは通常 960 ~ 1200 の間であり、一般的な推奨値は 1200 です。

2012 年以前は、主流の解像度は 1024 * 768 だったので、バージョン センターは 760 でした。

2.ナビゲーション

3. フォーム

4. リスト

繕う

モバイル端末のサイズ規格は決まっておりません。例えば、iPhone 6 のサイズは 375 * 667 です。

1. 要素サイズの固定

2. 共用エリア

3. 共通の表示形式