目次
(1) ホットスポット ジャンプ
(2) インタラクションが発生する領域のみを開発します
(3) フルページ切り替え
(4) ページ内のデータまたはリンクを「コード化」する
(1) ビジュアル ツールを使用して開発している場合
(2) コードで開発する場合
ホームページ ウェブフロントエンド htmlチュートリアル 数分で忠実度の高いインタラクティブなプロトタイプを開発する方法_html/css_WEB-ITnose

数分で忠実度の高いインタラクティブなプロトタイプを開発する方法_html/css_WEB-ITnose

Jun 21, 2016 am 08:47 AM

製品開発、体験第一。ソフトウェア製品の開発コストは比較的高いため、製品アイデアの価値は開発前に対象ユーザーによって検証されることが多く、最も効率的な方法は、忠実度の高いインタラクティブなプロトタイプを通じてテストすることです。

世界で負けない唯一の格闘技はスピードです。急速に変化するインターネット市場では、プロダクト マネージャーはアイデアを迅速に評価し、可能性のあるものを選択する必要があります。従来のアプローチでは、各ページの静的レンダリングがレビューされて渡された後、すぐに開発者に引き渡され、高忠実度のインタラクティブ プロトタイプの開発ワークロードが評価されます。評価結果には 2 ~ 3 日、場合によっては 2 日かかることもあります。開発期間は3週間。

この記事では、各ページの静的レンダリングが準備されていることを前提として、高忠実度のインタラクティブ プロトタイプを開発するのに 2 ~ 3 時間もかかりません。 2~3分で簡単に完成します!

4 つのヒント

フロントエンド コード (HTML、CSS、JS など) を理解していなくても問題ありません。ビジュアル ツール (Axure など) を使用できます。開発するには、これら 4 つのヒントが普遍的です。

(1) ホットスポット ジャンプ

「Web ページ」に高忠実度のレンダリング全体を貼り付け、クリック可能な領域 (おそらく画像、リンクなど) を透明な領域でカバーします。 「ホット エリア」の場合、テスト ユーザーは「ホット エリア」をクリックするだけで、新しい「Web ページ」に直接ジャンプできます。

開発に Axure (Axure RP Pro 7.0 を例にします) を使用している場合は、「ホット スポット」ホット スポット コントロール (以下を参照) を使用して、画像のインタラクティブなホット エリアを直接オーバーレイします。 。もちろん、ホットスポット コントロールに加えて、「Rectangle」長方形コントロールも使用できます (境界線と塗りつぶしの色を透明に設定するだけです)。

図 1 Axure のホットスポット コントロール

フロントエンド コードを使用して開発している場合、透明な div を直接配置することも非常に簡単です (position:absolute)。 )をクリック可能な領域に移動します。

このようにして、非常にシンプルかつ高速に、忠実度の高いインタラクティブなプロトタイプが開発されます。

(2) インタラクションが発生する領域のみを開発します

一方で、インタラクティブな効果を必要としないページもあります。最も一般的なのは、「タスク フロー」の最後のページです。たとえば、ユーザーのタスクはコレクション リスト ページを開くだけで完了します。インタラクティブな効果は必要なく、ページ全体の画像を直接投稿できます。

一方、ユーザビリティテストのタスクフローに関係のない領域には、インタラクティブな効果を持たせる必要はありません。以下の図 (図 2) に示すように、ユーザーのテスト タスクが 3D メガネの購入であると仮定すると、Web ページの下部にあるフッターや 3D メガネに関係のない他の製品はホット リンクである必要はありません。

図 2 インタラクションが発生する領域のみを開発する

フロントエンド コードを使用して開発している場合は、レンダリング全体をバックグラウンドでポストすることをお勧めします。次に、開発した div を絶対位置でオーバーレイし、背景のレンダリングとまったく同じになるように調整します。最後に、大きな背景を覆うように div に背景を追加します。これで完璧です。

(3) フルページ切り替え

プロトタイプの開発プロセスでは、作成が非常に面倒で、多数の動的パネル (または JS) の使用が必要なローカル エフェクトに遭遇することがよくあります。 ) このとき、考え方を変えて部分的なインタラクションをページ全体の切り替えに変えると、問題は簡単に解決されることがよくあります。

例えば、商品一覧の操作エリアで「取引高順に並べ替え」ボタンをクリックして「部分更新」を行うと大変面倒になります。新しいページに直接移動します (ページ全体が取引量ごとに並べ替えられています)。

もちろん、「ページ全体の更新」の効果は「部分更新」の効果ほど現実的ではありませんが、結局のところ、「大まかな」を許可することで大幅に節約できます。開発時間のこと。

(4) ページ内のデータまたはリンクを「コード化」する

プロトタイプの開発プロセス中に、「実際の」データを使用したい場合は、非常に面倒なので、データベースの運用と開発は難しくて時間がかかります。したがって、通常はプロトタイプのページ内のデータまたはリンクを「ハードコーディング」します。

たとえば、どのリスト項目をクリックしても、同じ固有の詳細ページにジャンプします。別の例として、どのアカウントとパスワードを入力してもログインできます (ジャンプ)。

コアタスクに影響しない場合は、複雑なデータベースやバックグラウンドを使用せず、ページにジャンプするだけにしてください。

注意すべき点

(1) ビジュアル ツールを使用して開発している場合

ビジュアル ツールは WYSIWYG アプローチを使用します。これは非常に便利ですが、理解する必要もありますこれらのソフトウェアの制限事項。その欠点を受け入れられない場合は、時間を無駄にしないために、最初から開発に選択しないことが最善です。

Axure を例に挙げてみましょう。結局のところ、Axure は忠実度の低いプロトタイプ (ワイヤーフレーム) を開発するために使用されるツールです。これを使用して忠実度の高いプロトタイプを開発する場合の主な欠点は、出力される Web ページです。効果が十分に洗練されていません。たとえば、一部のコントロール (テキスト ボックスなど) のデフォルト スタイルを変更することは困難であり、「高さの調整」を実現することも不可能です (つまり、上のコンテンツの高さが変更されても、下のコンテンツは自動的に変更されません)。下に移動します); さらに、要素の位置が少しずれる可能性があります (特に境界線のある要素の場合)。

さらに、フロントエンド コードについて少し知っていれば、Axure によって生成された HTML ファイルと CSS スタイル ファイルを微調整して、完璧なプレゼンテーションを保証することもできます。

(2) コードで開発する場合

コードで開発すると、理論上はレンダリングと全く同じにできますが、可視化ツールに比べて時間がかかり、エネルギー。

実際の開発では、上記の 4 つのヒントに従って開発速度を大幅に加速できますが、一方で、ページ全体のフレームワーク (コア タスク フロー) を完全に完成させることをお勧めします。最初に開発してから、時間 (エネルギー、予算など) に応じて可能な限り細部をゆっくりと調整します。

最後に、デザイナーやプロダクト マネージャーはフロントエンド開発者と明確にコミュニケーションを取る必要があることを言及する価値があります。私たちが開発している高忠実度のインタラクティブ プロトタイプは、ユーザー テストが完了すると破棄されます。小さなことでも完璧を追求する必要がある。

つまり、一般的なインタラクティブなプロトタイプ開発は、ある程度のスキルを習得すれば、開発工数を大幅に削減でき、数分で完了することができます。

著者: Very Good Luck

WeChat 公式アカウント: ユーザー エクスペリエンス ストーリー

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

See all articles