真面目なクリエイティブな仕事をしたことがあるなら、あなたはクリエイティブブロックに精通しすぎています。レンガの壁にぶつかったような気がします。 視覚化できるアイデアはどれも十分に優れていないか、実際には機能しません。
デザイナーにとって、その感覚はあまりにも馴染み深いものです。ただし、明確な解決策がない複雑な問題と同様に、スマートプロセスはすべての違いを生む可能性があります。これがUXスケッチの出番です。
UXスケッチは、ユーザーエクスペリエンスデザインの重要な側面ですが、見過ごされがちです。スケッチは、設計者が多数のアイデアを試して、1つに落ち着く前にそれらを繰り返すことを可能にしながら、設計を伝達する非常に効率的な方法です。
この投稿では、次の点を含め、UXスケッチについて知っておく必要のあるすべてをカバーするつもりです。
設計では多くのオプションを考慮する必要があり、その結果、 最高のもの。 設計者はオプションを検討してから詳細を検討し、UX設計を2段階のプロセスにします。
営利目的の退職者コミュニティ向けではありません
最初のステップでは、複数のアイデアが生成されますが、完全に形作ることができないため、一部の要素が不完全または欠落していることは珍しくありません。主なことは、さまざまなアプローチを検討し、タスクとプロジェクトのさまざまな制約のコンテキストで最も効率的なアプローチを決定することです。
ステップバイステップで、あなたはいくつかの有望な変種に落ち着き、詳細を考え出すことに進みます。
ワイヤーフレームは、必要な詳細レベル、色、スタイル、誰かに見せるかどうかなどの要因によって異なる場合があります。
次のスケッチタイプを選び出しました。
これらは最初のスケッチです。下位レベルの詳細は簡単に記載されています。限られた数の色が採用されています。
さまざまな角度から問題を検討し、さまざまな解決策を検討するために、多くの基本的なスケッチを描きます。そのようなスケッチを描きながら、私はできるだけ多くのソリューションバリアントを生成するようにも努めています。
この特定のステップでは、不完全さが私の心を解放します。そのため、この段階で細目で行き詰まらないようにすることが非常に重要です。私の目標は、できるだけ多くのアイデアを生み出し、最も有望なアイデアを選択することです。
私は通常、有望なスケッチを選び、詳細を調べてから、最適なバリアントを選択して、より詳細に作成します。
しかし、これは すべての詳細を意味するわけではありません 。明らかなことに注意する必要があります。さらに、いくつかの側面は紙で説明するのが難しいでしょう。
このステップで、私はすべてを描きます 重要な詳細 、しかし私はまだワイヤーフレームを描いていません Balsamiq 。紙にすべてが終わったら、Sketchで描き始めます。
デジタルツールは紙よりもはるかに創造的な自由を提供し、あなたは簡単に小さなことに注意を向けることができます。たとえば、デザインではなく「ピクセル研磨」に集中できます。
これはめったに使用されないアプローチですが、役立つ場合もあります。プロジェクトの初期段階ではさまざまなビジュアルソリューションが検討されていますが、それらすべてのデジタルスケッチを作成するには長い時間がかかる場合があります。そのため、私は最初に紙にデザインスケッチを描き、さまざまなオプションを検討し、視覚的なデザインの方向性を選択します。
この手法は、すでに一般的なアイデアがあり、特定のページ機能やインターフェイスコンポーネントの不可欠な部分について考えている場合に役立ちます。さまざまなページ要素を描画して詳細を確認してから、ページ要素のさまざまな可能な位置を描画します。
要素は、最も単純なものであっても、状態を持っている必要があります。ボタンを押すことができ、空の場合と空でない場合があるホバーテキストブロックがあります。複雑になるほど、状態が多くなります。
これで、すべての設定が完了し、開始できます。
エッジを描画します。 フレーム、ブラウザまたは電話ウィンドウ、インターフェイスの一部などを描画します。
最大または基本的な要素を追加します。 メニュー、フッター、メインコンテンツ。
詳細を追加します。 関連する詳細を追加しますが、この段階では単純にしてください。
注釈とメモを追加します。 これらは、スケッチを共有することを計画している場合にのみ必要です。ただし、目だけのために行っている場合でも、役立つ場合があります。
代替案をスケッチします。 ソリューションの簡単な代替案をいくつかスケッチします。
最適なソリューションを選択してください。 最適なオプションを選択してください。
シャドウとベベルを追加します。 これは、共有の目的で特に重要です。スケッチを視覚的に魅力的なものにするために影を追加します。これは、チームメンバーやクライアントと共有する場合に重要です。
スケッチを保存します。 写真を撮るか、フォルダに入れます。スケッチ用の紙トレイがテーブルにいくつかあります。
適切なスケッチを見つけるか描画してから、次の詳細を追加します。
題名。 場合によっては、タイトルを追加することをお勧めします。必要に応じて、スケッチの上部に説明と日付を記入します。タイトルは、あなたが見ているものと、スケッチが関連しているかどうかを理解するのに役立ちます。これは、スケッチがたくさんある場合や他の人に見せようとしている場合に特に便利です。
注釈。 注釈は、要素の内容やその他の属性を説明するために、要素の近くに配置される名前とメモです。それらは他の要素を明確にする詳細を追加し、通常は描くのが困難です。たとえば、ブロックの名前、インタラクションの詳細、画像の説明、将来のデザインバリエーションのアイデアなどが考えられます。あなたはできる 私の例の1つをチェックしてください 注釈スケッチがどのように見えるかを確認します。
数字。 スケッチの要素、またはスケッチ自体に番号を付けます。それらの順序を決定できます(たとえば、インタラクションフロー、作成した順序など)。同僚やクライアントがフィードバックでスケッチ番号を指摘するだけで、コメントがどれを参照しているかがわかるため、ディスカッション(特にリモートディスカッション)の際にも役立ちます。
矢印。 矢印を使用して、画面の遷移を示すことができます。また、スケッチのさまざまな部分を接続したり、一連のアクションを示したりするためにも使用できます。矢印の意味はさまざまであるため、矢印のすぐ上に、矢印の意味の説明または説明を追加できます。これが 例 遷移といくつかの異なる状態を示す基本的なスケッチの。
私はscorpまたはccorpですか
ノート。 注釈と同じように、メモは概念を説明するために使用されます。ただし、メモは注釈とは配置が異なります。それらは要素に接続されていないか、記述された要素の近くに配置されていません。 この例に似ています 。メモはページの上部または下部に配置できます。デザインに含まれていない要素、質問、一般的な説明、スケッチされていないアイデアなどを説明することもできます。
ジェスチャー。 ジェスチャは、タッチデバイスの設計の場合に関連します。手のジェスチャーを描くには練習が必要な場合があります。さまざまな種類のアクションを示すために使用されるジェスチャにはいくつかのバリエーションがあるため、特定のアクションをどのように指定するかを事前に決定し(もちろん、明確でない場合)、それを描画する練習をすることをお勧めします。
フィードバック。 スケッチを他の人に見せた後、または自分でもう一度見た後に、スケッチを修正または改善するための提案を受け取る場合があります。フィードバックを元のスケッチと区別しやすくするために、このようなフィードバックを別の色でマークすると便利なことがよくあります。
要素の種類ごとに異なる色を使用できます。時々、私は図面に黒、リンクに青、メモに濃い緑、タイトルとフィードバックに赤を使用します。スケッチで異なる色を使用するようにしてください。ただし、色の選択が一貫していることを確認してください。
品質について心配する必要はありません。 Dribbbleのスケッチを見ないでください。彼らは何かについてです 全然違う 。スケッチの主な目的は、より明確に考え、より良い解決策を見つけ、時間を節約することです。
練習。 まず、いくつかのアプリを描いてみることができます。 Webまたはモバイルアプリを開き、メモの要素を説明して画面をコピーしてみます。暇なときはいつでも、デザインの基本的な構成要素を描く練習をしてください。一般的に、練習は完璧になります。しばらくすると、それはあなたのデザイナー自身の一部になるでしょう。
フォルダを購入します。 私はよくオフィスではなく、カフェや自宅で仕事をしています。紙のスケッチは非常に損傷しやすいので、安全で健全な状態に保つためにシンプルなフォルダーを購入してください。
どこへ行っても道具を持っていきましょう。 これにより、いつでもアイデアを紙に書き留めることができます。そうしないと、考えを失ったり、十分に詳細に思い出せなくなったりする可能性があります。私はいつもメモ帳、数枚のA4シート、そしてペンを持っています。
他の人と共有します。 他の人と関わり、チームとコミュニケーションを取ることは非常に重要です。特に早い段階で他の人を巻き込み、フィードバックを得ることが、長期的には時間とリソースを節約するのに役立ちます。また、他の人にデザインを思い描いた方法で描くように勧めることもできます。
用紙トレイ。 作業台に用紙トレイを置くことを考えてください。たとえば、私はそれらのうちの3つを持っています:入ってくるタスクのために、スケッチのために、そしてきれいな紙のシートのために。
実験してカスタマイズします。 私の推奨事項は私の経験に基づいています。やがて、自分に最も適したものが見つかります。どの方法、どの一連のステップ、何があなたの創造的な可能性を正確に満たすか。常に新しいことを試してみて初めてそこにたどり着きます。そのため、さまざまな形式やスタイルを試し、新しいテンプレートを試すことが重要です。
テンプレートを使用します。 テンプレートは時間を節約し、フォーマットの制限を暗黙的に考慮して、重要なことに集中するためにより多くの時間を解放します。
これらは必ずしもヒントやコツではありませんが、生産性を高めたりスケッチの品質を向上させたりするための方法、ツール、提案のコレクションです。
ページオブジェクトモデルとは
プロトタイプ。 クリック可能なプロトタイプを作成して、デザインを評価します。いくつかの要素についてフィードバックを得るようにしてください。これは、テンプレートを使用している場合に特に効果的です。スケッチは同じサイズです。明らかに、テンプレートを使用している場合は、同じサイズのスケッチを描く方がはるかに簡単です。ダウンロードして使用できるいくつかのテンプレートを提供することで、さらに簡単にしようと思います。 モバイル 、 ブラウザマルチウィンドウ 、 ブラウザスクロール 、 人 。
プリンターとスキャナーを使用してください。 フレームワークを手で描画し(定規を使用してより正確に描画できます)、スキャナーまたはモバイルアプリを使用してフレームワークをスキャンし、印刷します。印刷する前に、画像編集ツールでテンプレートを編集できます。不要な詳細を削除したり、一部の要素を複製したりできます。既製のサイトページ、写真、その他の説明要素を印刷することもできます。切り抜きをスケッチに貼り付けることができます。
スキャンにはEvernoteを使用してください。 Evernoteは素晴らしいデザインツールです。スケッチを保存して共有したり、テーマを作成したり、タグを使用してスケッチを整理したりできます。 「スキャナー」モードの能力は特に印象的です。スケッチをその前に置くと、スケッチが「スキャン」されるので、スケッチのコピーを取得できます。次に、同僚をEvernoteに招待して、メモのリンクを提供します。タブレットや携帯電話用のモバイルアプリがあるので、いつでもスケッチを手元に置いておくことができます。
ハイブリッドスケッチ。 スケッチに生命感とリアリズムを加えるために、それらを写真と組み合わせることができます。つまり、写真を撮ってから、インターフェイス要素を使用してストーリーを描く必要があります。これは、相互作用の問題や詳細に気付くのにも役立ちます。
ワイヤーフローは、基本的にシステムフローのシーケンスであり、画面ごとに分岐と決定ポイントがあります。ユーザーがタスクにどのように対処するか、画面間を移動する方法、および時間の経過に伴う製品の全体的なエクスペリエンスを考慮する必要があります。
ワイヤーフロー、または描画しているものとその接続方法は、次のアプローチに従って編成できます。
私は通常、組織と実際の使用法に応じて、次のワイヤーフロータイプを定義しようとします。
全体的なフローと高レベルのフローのマッピング。 画面の変化をすばやくスケッチし、製品の使用法の一般的な旅を描きます。ここでは、いくつかのコンテキストを含めることができ、オプションでいくつかのユーザーインタラクションを表示できます。たとえば、eコマースショッピングサービスは非常に長い道のりであり、ユーザーがショップを見つけた方法、商品を注文するために行った手順、支払い方法など、多くの手順が含まれる場合があります。
画面の流れ。 これは、システムを介した特定の機能フローに焦点を当てています。それは、画面の小さな連続したシーケンスまたは分岐のある旅である可能性があります。たとえば、ユーザーが写真やビデオをアップロードしているとします。
ナビゲーションスキーム。 画面とそれに含まれるオプションを描画します。これは、旅をマッピングすることを想定していません。このステップには、ユーザーが選択できるオプション、ユーザーの方向性、さまざまなアプリパーツを示す情報が含まれています。私は通常、プロジェクトの開始時にナビゲーションスキームを作成します。ナビゲーションをどのように構成するか(どのポイントを含めるか、いくつのレベルが必要か)を理解するのに役立ちます。
画面の状態。 画面または要素の状態を描画します(例として、ファイルのアップロードダイアログがあります)。この場合、たとえば、画面の状態は次のようになります。
ワイヤーフローの設計プロセスは、ワイヤーフレームの設計プロセスと似ています。多くの手順は類似または同一ですが、いくつかの重要な違いがあります。
描画する必要があるものを定義します。 描きたいものを正確に決定します(たとえば、一般的な歴史やデザインの断片)。さまざまなオプションを生成しますか、それとも1つの旅の詳細を検討しますか?スケッチを他の人に見せるかどうかを決めます。
図面に含める必要のあるキーフレームとトランジションを定義します。 すべての画面とシフトを追加すると、ワイヤーフローは非常に長く複雑になります。タスクの達成に役立つインタラクションの本質を伝えるために、どのキー画面を表示する必要があるかを検討してください。画面シフトについても同じことが言えます。自分の考えを表現するのにどのシフトがより役立つかを選択する必要があります。チェックアウト この例 参考のために。
c ++どこから始めるか
開始点を定義します。 あなたの旅の出発点は何ですか?エントリポイント、つまり、ユーザーがアプリにログインしたときに表示されるものなど、旅の始まりから始めることができます。または、中間点から開始することも、最も興味深い/難しい/重要な画面またはプロセスステップから開始することもできます。または、ユーザーが最終結果を達成して最後から開始し、ユーザーがこのポイントに到達するために実行した手順を説明することもできます。
次に来るものを決定します。 開始手順を描いた後、次の質問に答えて、次に何をするかを決定します。
代替ルート、エントリをスケッチします。 ユーザーが各ステップに到達できる別の方法を考えてください。
代替フローについて考えてください。 履歴を分析し、代替フローを設計して、スケッチします。
注釈、メモ、詳細を追加します。 非自明な詳細を明確にする説明要素を追加します。
セーブ。 スケッチのデジタルコピーを作成します。
シェア。 スケッチを共有します(EvernoteやInVisionなどを介して)。
最初にワイヤーフローをドラフトします。 かなり長い道のりを考える場合は、必要なスペースの量を理解し、いくつかの重要な手順や詳細を見逃さないように、簡単なスケッチを作成することをお勧めします。後でそれらを紙のスケッチに追加するのは難しいでしょう。
詳細が多すぎる巨大な地図を作成しないでください。 紙のスケッチには 元に戻す ボタンなので、変更が難しくなります。詳細を正確に描くと、さまざまな高レベルのバリアントの生成から想像力がそらされる可能性があります。システム全体を説明する巨大なスキームを作成する代わりに、主要なスクリプトに焦点を当て、スクリプトごとに個別のページを割り当てるようにしてください。
不要な詳細を切り取り、さまざまな詳細レベルを組み合わせます。 すべてのインタラクションの説明を描く必要はないので、旅の重要な要素のみを使用するようにしてください。巨大なインタラクションマップを描画している間、すべての画面を詳細に処理する必要はありません。一部の画面はいくつかの正方形で表すことができ、その他の主要な画面は詳細に作成できます。
さまざまな用紙サイズを試してください。 A3またはA5のさまざまな用紙フォーマットを試してください。紙のシートサイズはあなたを制限し、さまざまな方法であなたのプロセスに影響を与えます。小さな紙のシートでは、多くの画面や詳細を追加することはできませんが、主要なアイデアに集中するのに役立ちます。大きな紙のシートを使用して、1つの大きな旅、多くの詳細、および追加のメモを描くことができます。または、そこにいくつかの小さな旅をすることができます。
付箋も役立ちます。 付箋を使用することもできます。個別の画面または脚注をそれらに描画することも、スケッチの要素の追加の状態を描画することもできます。それらの利点は、簡単に交換できることです。また、メモを別の場所に移動することもできます。たとえば、フローが変更された場合、ポストイットノートの順序を変更するだけです。
テンプレートを使用します。 テンプレートを使用してみてください。それらは時間を節約し、よりクリックしやすい高品質のプロトタイプを作成できるようにします。
ホワイトボードを使用してみてください。 ホワイトボードには多くの利点があります。たくさんの枝で巨大な旅を描くことができるので、ますます人気が高まっています。紙にたくさんのアプリケーションコンポーネントを描いてから、磁石を使ってホワイトボードに取り付けて、旅に追加することができます。
影をスケッチします。 影は重要な要素をマークするのに役立ち、スケッチに視覚的な魅力を追加します。私が使う 3種類の影 :
図面コンポーネント。 のような異議 「私はそれをうまく描くことができません」 あなたのイニシアチブを阻害する可能性があります。実際には思ったより簡単です。最も複雑なスケッチでさえ、一般に、次のようにいくつかの基本ブロックで構成されています。 この例 。点、線、三角形、正方形、円を描くことができれば、スケッチのために何かを描くために必要な基本的な構成要素があります。
すべてを一緒に入れて。 基本要素、ボタン、ラジオボタン、およびドロップダウンは、基本要素で構成されています。これらの要素を描くことを学んだ後、あなたはすることができます それらを組み合わせる 複雑なブロックやコンポーネントを描画します。
この投稿の目的は、UXスケッチ、または一般的なスケッチの究極の万能ガイドを作成することではありませんでした。デザイナーにはさまざまなニーズと個人的な好みがあるためです。
ご覧のとおり、これは たくさん カバーするために。デザイナーは無数のツール、テクニック、アプローチを使用してUXスケッチを作成しますが、それはかなり主観的なものです。特定の手法は、さまざまなプロジェクトに取り組んでいるさまざまな人々にとって機能する場合と機能しない場合があります。始めたばかりの場合は、ぜひ実験してみてください。絶え間ない練習と実験は、あなたがあなたのために働くものを見つけるのを助けるでしょう。
プロジェクトと設計へのアプローチに最適なヒントとテクニックを選択するのはあなた次第です。仲間のための追加のスケッチのヒントはありますか UXers ?コメント欄でお気軽に共有してください。
•••