apeescape2.com
  • メイン
  • プロジェクト管理
  • 人とチーム
  • モバイルデザイン
  • 設計プロセス
ツールとチュートリアル

UXスケッチについて知っておくべきことすべて

真面目なクリエイティブな仕事をしたことがあるなら、あなたはクリエイティブブロックに精通しすぎています。レンガの壁にぶつかったような気がします。 視覚化できるアイデアはどれも十分に優れていないか、実際には機能しません。

デザイナーにとって、その感覚はあまりにも馴染み深いものです。ただし、明確な解決策がない複雑な問題と同様に、スマートプロセスはすべての違いを生む可能性があります。これがUXスケッチの出番です。

UXスケッチは、ユーザーエクスペリエンスデザインの重要な側面ですが、見過ごされがちです。スケッチは、設計者が多数のアイデアを試して、1つに落ち着く前にそれらを繰り返すことを可能にしながら、設計を伝達する非常に効率的な方法です。



この投稿では、次の点を含め、UXスケッチについて知っておく必要のあるすべてをカバーするつもりです。

  • UXスケッチとワイヤーフレームの紹介
  • UXスケッチの基本、ツール、テクニック
  • メモ、注釈、数字でスケッチを明確にする
  • UXスケッチのヒントとコツ
  • 品質と生産性を高めるために設計されたミニメソッド
  • ワイヤーフローについて知っておくべきことすべて
  • UXフロースケッチのクイックガイド

UXスケッチは2段階のプロセスです

設計では多くのオプションを考慮する必要があり、その結果、 最高のもの。 設計者はオプションを検討してから詳細を検討し、UX設計を2段階のプロセスにします。

Uxスケッチ

営利目的の退職者コミュニティ向けではありません
  • アイデア創造

最初のステップでは、複数のアイデアが生成されますが、完全に形作ることができないため、一部の要素が不完全または欠落していることは珍しくありません。主なことは、さまざまなアプローチを検討し、タスクとプロジェクトのさまざまな制約のコンテキストで最も効率的なアプローチを決定することです。

  • 詳細と改良の追加

ステップバイステップで、あなたはいくつかの有望な変種に落ち着き、詳細を考え出すことに進みます。

UXスケッチとワイヤーフレーム:はじめにと分類

ワイヤーフレームは、必要な詳細レベル、色、スタイル、誰かに見せるかどうかなどの要因によって異なる場合があります。

UXスケッチとワイヤーフレーム

優れたスケッチは、より明確に考え、より良い解決策を見つけ、時間を節約するのに役立ちます。

次のスケッチタイプを選び出しました。

  • スケッチ:アイデアの生成

これらは最初のスケッチです。下位レベルの詳細は簡単に記載されています。限られた数の色が採用されています。

さまざまな角度から問題を検討し、さまざまな解決策を検討するために、多くの基本的なスケッチを描きます。そのようなスケッチを描きながら、私はできるだけ多くのソリューションバリアントを生成するようにも努めています。

この特定のステップでは、不完全さが私の心を解放します。そのため、この段階で細目で行き詰まらないようにすることが非常に重要です。私の目標は、できるだけ多くのアイデアを生み出し、最も有望なアイデアを選択することです。

  • ワイヤーフレーム:仕様、詳細フェーズ

私は通常、有望なスケッチを選び、詳細を調べてから、最適なバリアントを選択して、より詳細に作成します。

しかし、これは すべての詳細を意味するわけではありません 。明らかなことに注意する必要があります。さらに、いくつかの側面は紙で説明するのが難しいでしょう。

このステップで、私はすべてを描きます 重要な詳細 、しかし私はまだワイヤーフレームを描いていません Balsamiq 。紙にすべてが終わったら、Sketchで描き始めます。

デジタルツールは紙よりもはるかに創造的な自由を提供し、あなたは簡単に小さなことに注意を向けることができます。たとえば、デザインではなく「ピクセル研磨」に集中できます。

  • ビジュアルデザインドラフト

これはめったに使用されないアプローチですが、役立つ場合もあります。プロジェクトの初期段階ではさまざまなビジュアルソリューションが検討されていますが、それらすべてのデジタルスケッチを作成するには長い時間がかかる場合があります。そのため、私は最初に紙にデザインスケッチを描き、さまざまなオプションを検討し、視覚的なデザインの方向性を選択します。

  • コンポーネント/要素の内訳

この手法は、すでに一般的なアイデアがあり、特定のページ機能やインターフェイスコンポーネントの不可欠な部分について考えている場合に役立ちます。さまざまなページ要素を描画して詳細を確認してから、ページ要素のさまざまな可能な位置を描画します。

要素は、最も単純なものであっても、状態を持っている必要があります。ボタンを押すことができ、空の場合と空でない場合があるホバーテキストブロックがあります。複雑になるほど、状態が多くなります。

UIのスケッチ

基本入門

  • ツールを準備します。 可能な限り最も便利な場所、十分なスペースのある大きなテーブルを見つけてください。たくさんの紙を取り、いくつかのペンとマーカーを準備します。
  • 準備し始める。 準備のために、線、円、基本的なテンプレート、アイコンを描くことをお勧めします。
  • 目標を定義します。 何を描きたいかを決めます。あなたの目的を設定し、あなたが話さなければならない物語を決定します。必要な詳細レベルを決定します。たくさん描く準備ができているかどうかを判断します。
  • ターゲットオーディエンスを定義します。 自分でこれを行う場合は、スケッチの外観について心配する必要はありません。ただし、図面をクライアントに表示する場合は、スケッチに詳細を追加するために少し時間を取ってください。
  • 時間枠を設定します。 スケッチに割り当てる準備ができている時間(たとえば30分)を決定すると、作業に集中するのに役立ちます。

これで、すべての設定が完了し、開始できます。

  • エッジを描画します。 フレーム、ブラウザまたは電話ウィンドウ、インターフェイスの一部などを描画します。

  • 最大または基本的な要素を追加します。 メニュー、フッター、メインコンテンツ。

  • 詳細を追加します。 関連する詳細を追加しますが、この段階では単純にしてください。

米国を拠点とするフルタイムのフリーランスUXデザイナーが望んでいた

  • 注釈とメモを追加します。 これらは、スケッチを共有することを計画している場合にのみ必要です。ただし、目だけのために行っている場合でも、役立つ場合があります。

  • 代替案をスケッチします。 ソリューションの簡単な代替案をいくつかスケッチします。

  • 最適なソリューションを選択してください。 最適なオプションを選択してください。

  • シャドウとベベルを追加します。 これは、共有の目的で特に重要です。スケッチを視覚的に魅力的なものにするために影を追加します。これは、チームメンバーやクライアントと共有する場合に重要です。

  • スケッチを保存します。 写真を撮るか、フォルダに入れます。スケッチ用の紙トレイがテーブルにいくつかあります。

  • シェア。 私は通常、次の共有方法のいずれかを使用します。
    • スケッチをスキャンする Evernote 他のチームメンバーや利害関係者にパーマリンクを提供します。
    • 写真を撮ってにアップロード InVision 。
    • 画像をアップロードしてマッピングする リアルタイムボード 。
    • あるいは単に Eメール 写真。
  • スケッチを確認し、メモを追加します。 休憩して、しばらくしてからスケッチに戻ってください。それらをもう一度見てください。スケッチはまだあなたにとって意味がありますか?良いスケッチは簡単に理解できるものでなければなりません。

UIのUXスケッチ

デザイナーとしてのあなたがスケッチにあるものを理解できない場合、ソリューションは成功しません。スケッチではアイデアをうまく​​視覚化できないか、アイデアが複雑すぎます。

追加の要素でスケッチを明確にする

適切なスケッチを見つけるか描画してから、次の詳細を追加します。

  1. 題名。 場合によっては、タイトルを追加することをお勧めします。必要に応じて、スケッチの上部に説明と日付を記入します。タイトルは、あなたが見ているものと、スケッチが関連しているかどうかを理解するのに役立ちます。これは、スケッチがたくさんある場合や他の人に見せようとしている場合に特に便利です。

  2. 注釈。 注釈は、要素の内容やその他の属性を説明するために、要素の近くに配置される名前とメモです。それらは他の要素を明確にする詳細を追加し、通常は描くのが困難です。たとえば、ブロックの名前、インタラクションの詳細、画像の説明、将来のデザインバリエーションのアイデアなどが考えられます。あなたはできる 私の例の1つをチェックしてください 注釈スケッチがどのように見えるかを確認します。

  3. 数字。 スケッチの要素、またはスケッチ自体に番号を付けます。それらの順序を決定できます(たとえば、インタラクションフロー、作成した順序など)。同僚やクライアントがフィードバックでスケッチ番号を指摘するだけで、コメントがどれを参照しているかがわかるため、ディスカッション(特にリモートディスカッション)の際にも役立ちます。

  4. 矢印。 矢印を使用して、画面の遷移を示すことができます。また、スケッチのさまざまな部分を接続したり、一連のアクションを示したりするためにも使用できます。矢印の意味はさまざまであるため、矢印のすぐ上に、矢印の意味の説明または説明を追加できます。これが 例 遷移といくつかの異なる状態を示す基本的なスケッチの。

    私はscorpまたはccorpですか
  5. ノート。 注釈と同じように、メモは概念を説明するために使用されます。ただし、メモは注釈とは配置が異なります。それらは要素に接続されていないか、記述された要素の近くに配置されていません。 この例に似ています 。メモはページの上部または下部に配置できます。デザインに含まれていない要素、質問、一般的な説明、スケッチされていないアイデアなどを説明することもできます。

  6. ジェスチャー。 ジェスチャは、タッチデバイスの設計の場合に関連します。手のジェスチャーを描くには練習が必要な場合があります。さまざまな種類のアクションを示すために使用されるジェスチャにはいくつかのバリエーションがあるため、特定のアクションをどのように指定するかを事前に決定し(もちろん、明確でない場合)、それを描画する練習をすることをお勧めします。

  7. フィードバック。 スケッチを他の人に見せた後、または自分でもう一度見た後に、スケッチを修正または改善するための提案を受け取る場合があります。フィードバックを元のスケッチと区別しやすくするために、このようなフィードバックを別の色でマークすると便利なことがよくあります。

要素の種類ごとに異なる色を使用できます。時々、私は図面に黒、リンクに青、メモに濃い緑、タイトルとフィードバックに赤を使用します。スケッチで異なる色を使用するようにしてください。ただし、色の選択が一貫していることを確認してください。

UX

より具体的なヒントとコツ

  1. 品質について心配する必要はありません。 Dribbbleのスケッチを見ないでください。彼らは何かについてです 全然違う 。スケッチの主な目的は、より明確に考え、より良い解決策を見つけ、時間を節約することです。

  2. 練習。 まず、いくつかのアプリを描いてみることができます。 Webまたはモバイルアプリを開き、メモの要素を説明して画面をコピーしてみます。暇なときはいつでも、デザインの基本的な構成要素を描く練習をしてください。一般的に、練習は完璧になります。しばらくすると、それはあなたのデザイナー自身の一部になるでしょう。

  3. フォルダを購入します。 私はよくオフィスではなく、カフェや自宅で仕事をしています。紙のスケッチは非常に損傷しやすいので、安全で健全な状態に保つためにシンプルなフォルダーを購入してください。

  4. どこへ行っても道具を持っていきましょう。 これにより、いつでもアイデアを紙に書き留めることができます。そうしないと、考えを失ったり、十分に詳細に思い出せなくなったりする可能性があります。私はいつもメモ帳、数枚のA4シート、そしてペンを持っています。

  5. 他の人と共有します。 他の人と関わり、チームとコミュニケーションを取ることは非常に重要です。特に早い段階で他の人を巻き込み、フィードバックを得ることが、長期的には時間とリソースを節約するのに役立ちます。また、他の人にデザインを思い描いた方​​法で描くように勧めることもできます。

  6. 用紙トレイ。 作業台に用紙トレイを置くことを考えてください。たとえば、私はそれらのうちの3つを持っています:入ってくるタスクのために、スケッチのために、そしてきれいな紙のシートのために。

  7. 実験してカスタマイズします。 私の推奨事項は私の経験に基づいています。やがて、自分に最も適したものが見つかります。どの方法、どの一連のステップ、何があなたの創造的な可能性を正確に満たすか。常に新しいことを試してみて初めてそこにたどり着きます。そのため、さまざまな形式やスタイルを試し、新しいテンプレートを試すことが重要です。

  8. テンプレートを使用します。 テンプレートは時間を節約し、フォーマットの制限を暗黙的に考慮して、重要なことに集中するためにより多くの時間を解放します。

スケッチを改善するための追加のミニメソッド

これらは必ずしもヒントやコツではありませんが、生産性を高めたりスケッチの品質を向上させたりするための方法、ツール、提案のコレクションです。

UXのためのスケッチ

ページオブジェクトモデルとは
  1. スケッチボードを作成します。 デジタルスケッチツールの代わりにペンと紙を使用する最大の利点の1つは、実際に壁に貼り付けることができることです。チームの全員がそれを見て参加できます(ただし、レビューセッションを設定することをお勧めします)。
    • 自分でスケッチを見ることができます。これにより、思考が刺激され、孤立した部分ではなく、システム全体の全体像を見ることができます。パーツ間の相互作用と、パーツの相互作用がわかります。
    • スケッチボードを作成します-ホワイトボードのスケッチを添付します。オフィスにホワイトボードがない場合は、2倍のサイズの粘着テープまたは付箋紙を使用してスケッチを壁に貼り付けることができます。壁にくっつきたくない場合は、代わりに大きな段ボール紙を見つけることができます。スケッチボードは最高のデザインツールの1つであるため、使用することを強くお勧めします。
  2. ホワイトボードを使用してください。 ホワイトボードは優れた描画ツールです。これにはいくつかの利点があります。
    • 共同作業であり、他のチームメンバーをディスカッションや図面に参加させるのも簡単です。彼らの考えがうまく合わなくても、あなたは彼らの考え方を理解するでしょう、そしてそれはあなたが同じページにいるのを助けるでしょう。
    • マーカーを使用すると、詳細に集中できなくなります。一般的なことを考える必要があります。スケッチは自由に解釈できます。
    • ホワイトボードは簡単に掃除して修正できます。
    • スペースが広く、システム全体の流れを簡単に考えることができます。
    • 磁石を使ってスケッチ、プリントアウト、参考資料を添付することができます。
  3. プロトタイプ。 クリック可能なプロトタイプを作成して、デザインを評価します。いくつかの要素についてフィードバックを得るようにしてください。これは、テンプレートを使用している場合に特に効果的です。スケッチは同じサイズです。明らかに、テンプレートを使用している場合は、同じサイズのスケッチを描く方がはるかに簡単です。ダウンロードして使用できるいくつかのテンプレートを提供することで、さらに簡単にしようと思います。 モバイル 、 ブラウザマルチウィンドウ 、 ブラウザスクロール 、 人 。

  4. プリンターとスキャナーを使用してください。 フレームワークを手で描画し(定規を使用してより正確に描画できます)、スキャナーまたはモバイルアプリを使用してフレームワークをスキャンし、印刷します。印刷する前に、画像編集ツールでテンプレートを編集できます。不要な詳細を削除したり、一部の要素を複製したりできます。既製のサイトページ、写真、その他の説明要素を印刷することもできます。切り抜きをスケッチに貼り付けることができます。

  5. スキャンにはEvernoteを使用してください。 Evernoteは素晴らしいデザインツールです。スケッチを保存して共有したり、テーマを作成したり、タグを使用してスケッチを整理したりできます。 「スキャナー」モードの能力は特に印象的です。スケッチをその前に置くと、スケッチが「スキャン」されるので、スケッチのコピーを取得できます。次に、同僚をEvernoteに招待して、メモのリンクを提供します。タブレットや携帯電話用のモバイルアプリがあるので、いつでもスケッチを手元に置いておくことができます。

  6. ハイブリッドスケッチ。 スケッチに生命感とリアリズムを加えるために、それらを写真と組み合わせることができます。つまり、写真を撮ってから、インターフェイス要素を使用してストーリーを描く必要があります。これは、相互作用の問題や詳細に気付くのにも役立ちます。

  7. 実世界をたどる。 ストーリーボードを作成し、特定のコンテキストでの体験を説明する必要がある場合(たとえば、バス停でスマートフォンを使用している人)、人、場所、およびさまざまな現実のオブジェクトの描写を含める必要があります。これらは、特に描画スキルを習得していない場合は描画が難しい場合がありますが、簡単なヒントを次に示します。 オブジェクトまたは状況の写真を撮り、画像エディタを使用して主要なオブジェクトの輪郭を取得します。結果の輪郭は、後でスケッチで使用できます。 もちろん、あなたが持っているなら タブレットとスタイラス 、それはさらに簡単になります。

ワイヤーフロー:システムフローと分岐の概要

ワイヤーフローは、基本的にシステムフローのシーケンスであり、画面ごとに分岐と決定ポイントがあります。ユーザーがタスクにどのように対処するか、画面間を移動する方法、および時間の経過に伴う製品の全体的なエクスペリエンスを考慮する必要があります。

UXスケッチ

ワイヤーフロー、または描画しているものとその接続方法は、次のアプローチに従って編成できます。

  • シーケンス。 シーケンスは、画面ごとにまっすぐな旅です。それはまた、決定点のある物語である可能性があります。旅程だけでなく、ユーザーが選択できる決定ポイントやさまざまなパスも表示します。画面の相互作用の構造を表示できます。
  • 状態変化。 一部の要素のさまざまな画面状態と、これらの状態間の遷移を引き起こす条件またはアクションを示します。
  • 画面と画面要素。 画面全体を描画することも、マイクロインタラクションとインタラクションを検討することもできます。
  • プラットフォーム。 1つのプラットフォームエクスペリエンスまたは複数のプラットフォームを検討できます。
  • 範囲。 ユーザージャーニーの一部またはジャーニー全体を描写しますか?システムとの1人のユーザーの相互作用、または複数のユーザーの相互作用?

私は通常、組織と実際の使用法に応じて、次のワイヤーフロータイプを定義しようとします。

スケッチの状態

  1. 全体的なフローと高レベルのフローのマッピング。 画面の変化をすばやくスケッチし、製品の使用法の一般的な旅を描きます。ここでは、いくつかのコンテキストを含めることができ、オプションでいくつかのユーザーインタラクションを表示できます。たとえば、eコマースショッピングサービスは非常に長い道のりであり、ユーザーがショップを見つけた方法、商品を注文するために行った手順、支払い方法など、多くの手順が含まれる場合があります。

  2. 画面の流れ。 これは、システムを介した特定の機能フローに焦点を当てています。それは、画面の小さな連続したシーケンスまたは分岐のある旅である可能性があります。たとえば、ユーザーが写真やビデオをアップロードしているとします。

  3. ナビゲーションスキーム。 画面とそれに含まれるオプションを描画します。これは、旅をマッピングすることを想定していません。このステップには、ユーザーが選択できるオプション、ユーザーの方向性、さまざまなアプリパーツを示す情報が含まれています。私は通常、プロジェクトの開始時にナビゲーションスキームを作成します。ナビゲーションをどのように構成するか(どのポイントを含めるか、いくつのレベルが必要か)を理解するのに役立ちます。

  4. 画面の状態。 画面または要素の状態を描画します(例として、ファイルのアップロードダイアログがあります)。この場合、たとえば、画面の状態は次のようになります。

    • ブランク
    • ユーザーがアクティブエリアでファイルをプルします
    • ファイルをアップロードしています
    • ファイルがアップロードされます
    • エラーがあります

UXフローのスケッチ:クイックハウツーガイド

ワイヤーフローの設計プロセスは、ワイヤーフレームの設計プロセスと似ています。多くの手順は類似または同一ですが、いくつかの重要な違いがあります。

描画する必要があるものを定義します。 描きたいものを正確に決定します(たとえば、一般的な歴史やデザインの断片)。さまざまなオプションを生成しますか、それとも1つの旅の詳細を検討しますか?スケッチを他の人に見せるかどうかを決めます。

図面に含める必要のあるキーフレームとトランジションを定義します。 すべての画面とシフトを追加すると、ワイヤーフローは非常に長く複雑になります。タスクの達成に役立つインタラクションの本質を伝えるために、どのキー画面を表示する必要があるかを検討してください。画面シフトについても同じことが言えます。自分の考えを表現するのにどのシフトがより役立つかを選択する必要があります。チェックアウト この例 参考のために。

c ++どこから始めるか

開始点を定義します。 あなたの旅の出発点は何ですか?エントリポイント、つまり、ユーザーがアプリにログインしたときに表示されるものなど、旅の始まりから始めることができます。または、中間点から開始することも、最も興味深い/難しい/重要な画面またはプロセスステップから開始することもできます。または、ユーザーが最終結果を達成して最後から開始し、ユーザーがこのポイントに到達するために実行した手順を説明することもできます。

ユーザーフローのUXスケッチ

アプローチを定義し、一般的な紙のスケッチを作成します。

次に来るものを決定します。 開始手順を描いた後、次の質問に答えて、次に何をするかを決定します。

  • このステップはどのようにユーザーを導きますか?
  • どちらに行きたいですか?
  • 彼らはそこに着くために何をしなければなりませんか?

代替ルート、エントリをスケッチします。 ユーザーが各ステップに到達できる別の方法を考えてください。

  • ユーザーのインターネット接続に障害が発生した場合はどうなりますか?
  • 他にどのようなオプションがありますか?
  • ユーザーまたはアプリのエラーが発生した場合、何がうまくいかない可能性がありますか?
  • このステップでユーザーがアプリを閉じるとどうなりますか?
  • ユーザーが次にアプリを起動したとき、ユーザーはどこから開始しますか?

代替フローについて考えてください。 履歴を分析し、代替フローを設計して、スケッチします。

注釈、メモ、詳細を追加します。 非自明な詳細を明確にする説明要素を追加します。

セーブ。 スケッチのデジタルコピーを作成します。

シェア。 スケッチを共有します(EvernoteやInVisionなどを介して)。

重要なUXフロースケッチのヒントとコツ

最初にワイヤーフローをドラフトします。 かなり長い道のりを考える場合は、必要なスペースの量を理解し、いくつかの重要な手順や詳細を見逃さないように、簡単なスケッチを作成することをお勧めします。後でそれらを紙のスケッチに追加するのは難しいでしょう。

詳細が多すぎる巨大な地図を作成しないでください。 紙のスケッチには 元に戻す ボタンなので、変更が難しくなります。詳細を正確に描くと、さまざまな高レベルのバリアントの生成から想像力がそらされる可能性があります。システム全体を説明する巨大なスキームを作成する代わりに、主要なスクリプトに焦点を当て、スクリプトごとに個別のページを割り当てるようにしてください。

不要な詳細を切り取り、さまざまな詳細レベルを組み合わせます。 すべてのインタラクションの説明を描く必要はないので、旅の重要な要素のみを使用するようにしてください。巨大なインタラクションマップを描画している間、すべての画面を詳細に処理する必要はありません。一部の画面はいくつかの正方形で表すことができ、その他の主要な画面は詳細に作成できます。

さまざまな用紙サイズを試してください。 A3またはA5のさまざまな用紙フォーマットを試してください。紙のシートサイズはあなたを制限し、さまざまな方法であなたのプロセスに影響を与えます。小さな紙のシートでは、多くの画面や詳細を追加することはできませんが、主要なアイデアに集中するのに役立ちます。大きな紙のシートを使用して、1つの大きな旅、多くの詳細、および追加のメモを描くことができます。または、そこにいくつかの小さな旅をすることができます。

付箋も役立ちます。 付箋を使用することもできます。個別の画面または脚注をそれらに描画することも、スケッチの要素の追加の状態を描画することもできます。それらの利点は、簡単に交換できることです。また、メモを別の場所に移動することもできます。たとえば、フローが変更された場合、ポストイットノートの順序を変更するだけです。

テンプレートを使用します。 テンプレートを使用してみてください。それらは時間を節約し、よりクリックしやすい高品質のプロトタイプを作成できるようにします。

ホワイトボードを使用してみてください。 ホワイトボードには多くの利点があります。たくさんの枝で巨大な旅を描くことができるので、ますます人気が高まっています。紙にたくさんのアプリケーションコンポーネントを描いてから、磁石を使ってホワイトボードに取り付けて、旅に追加することができます。

影をスケッチします。 影は重要な要素をマークするのに役立ち、スケッチに視覚的な魅力を追加します。私が使う 3種類の影 :

  • 光の方向に沿った線-これは必ずしも美しく見えるとは限りませんが、目盛りを使用して、さまざまな「高さ」までオブジェクトを拾うことができます。
  • 一部の部分を暗い色で輪郭を描きます(下部または下部と右側のみ)
  • プロマーカー(または描画に使用するアプリでの同等のマーカー)の使用

図面コンポーネント。 のような異議 「私はそれをうまく描くことができません」 あなたのイニシアチブを阻害する可能性があります。実際には思ったより簡単です。最も複雑なスケッチでさえ、一般に、次のようにいくつかの基本ブロックで構成されています。 この例 。点、線、三角形、正方形、円を描くことができれば、スケッチのために何かを描くために必要な基本的な構成要素があります。

すべてを一緒に入れて。 基本要素、ボタン、ラジオボタン、およびドロップダウンは、基本要素で構成されています。これらの要素を描くことを学んだ後、あなたはすることができます それらを組み合わせる 複雑なブロックやコンポーネントを描画します。

要約

この投稿の目的は、UXスケッチ、または一般的なスケッチの究極の万能ガイドを作成することではありませんでした。デザイナーにはさまざまなニーズと個人的な好みがあるためです。

ご覧のとおり、これは たくさん カバーするために。デザイナーは無数のツール、テクニック、アプローチを使用してUXスケッチを作成しますが、それはかなり主観的なものです。特定の手法は、さまざまなプロジェクトに取り組んでいるさまざまな人々にとって機能する場合と機能しない場合があります。始めたばかりの場合は、ぜひ実験してみてください。絶え間ない練習と実験は、あなたがあなたのために働くものを見つけるのを助けるでしょう。

プロジェクトと設計へのアプローチに最適なヒントとテクニックを選択するのはあなた次第です。仲間のための追加のスケッチのヒントはありますか UXers ?コメント欄でお気軽に共有してください。

•••

ApeeScapeデザインブログの詳細:

  • eコマースUX–ベストプラクティスの概要(インフォグラフィック付き)
  • 製品設計における人間中心の設計の重要性
  • 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
  • モバイルインターフェースのヒューリスティック原則
  • 予測的デザイン:魔法のユーザーエクスペリエンスを作成する方法

Azureチュートリアル:Azure Machine LearningStudioを使用したガソリン価格の予測

データサイエンスとデータベース

Azureチュートリアル:Azure Machine LearningStudioを使用したガソリン価格の予測
プロジェクト管理の進化:スタートアップとエンタープライズ

プロジェクト管理の進化:スタートアップとエンタープライズ

人とチーム

人気の投稿
Linuxカーネル開発の25年を祝う
Linuxカーネル開発の25年を祝う
空の状態–UXの最も見過ごされている側面
空の状態–UXの最も見過ごされている側面
ARKitデモ:拡張現実映画制作
ARKitデモ:拡張現実映画制作
Xamarinを使用したクロスプラットフォームアプリの構築:Android開発者の視点
Xamarinを使用したクロスプラットフォームアプリの構築:Android開発者の視点
チャットボットUX–デザインのヒントと考慮事項
チャットボットUX–デザインのヒントと考慮事項
 
Docker入門:DevOpsの簡素化
Docker入門:DevOpsの簡素化
AWSでのTerraformによるダウンタイムゼロのJenkins継続的デプロイ
AWSでのTerraformによるダウンタイムゼロのJenkins継続的デプロイ
サバイバルメトリクス:起動時のバーンレートを把握する
サバイバルメトリクス:起動時のバーンレートを把握する
RESTアシュアードvs。 JMeter:RESTテストツールの比較
RESTアシュアードvs。 JMeter:RESTテストツールの比較
ApeeScapeは、人材経済をさらに推進するために一流のリーダーシップを活用します
ApeeScapeは、人材経済をさらに推進するために一流のリーダーシップを活用します
人気の投稿
  • ipoの価格設定方法
  • 会社におけるCFOの役割は何ですか
  • AfterEffectsでビデオを作成する方法
  • 企業がサプライヤーの力を減らすことができる最も一般的な方法の1つは何ですか?
  • 実際に機能する外国為替取引システム
カテゴリー
革新 Uiデザイン その他 収益性と効率性 Kpiと分析 ヒントとツール 財務プロセス アジャイル モバイル バックエンド

© 2021 | 全著作権所有

apeescape2.com