目次
(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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTML、CSS、およびJavaScriptの理解:初心者向けガイド HTML、CSS、およびJavaScriptの理解:初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

WebアノテーションにY軸位置の適応レイアウトを実装する方法は? WebアノテーションにY軸位置の適応レイアウトを実装する方法は? Apr 04, 2025 pm 11:30 PM

Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...

HTML、CSS、およびJavaScript:Web開発者に不可欠なツール HTML、CSS、およびJavaScript:Web開発者に不可欠なツール Apr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は? CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は? Apr 05, 2025 am 06:15 AM

画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...

See all articles