ライフスタイル

開発者向けの設計ワークフロー：より優れたUX / UIを時間と形式で提供

編集者注： Lubos Volkovは経験豊富なデザイナーであり、彼のキャリアを通じて多くの開発者とリモートで協力してきました。 _productデザイナーとして ApeeScapeでは、Lubosは、開発、コミュニティ、コンテンツなど、さまざまな部門のチームメンバーと日常的にやり取りしています。彼は才能のあるデザイナーであり、そのコミュニケーションスキルが彼の成功に貢献しています。このチュートリアルでは、Lubosが彼の経験と、デザイナーから開発者へのUIおよびUXワークフローを最適化する方法を共有します。これにより、締め切り前でも最高品質の製品が提供されます。_

で作業する素晴らしいデザイナー o設計チームは、どのチームにとっても貴重なリソースになる可能性があります。明確なコミュニケーションチャネルと自由に流れる協力により、設計者は、建設プロセスをスピードアップし、質問や混乱を可能な限り制限するために必要なすべてを提供する必要があります。

あなたは何ができますか、 UX開発者、インターフェースの品質とユーザーエクスペリエンスを犠牲にすることなく、構築した製品がタイムリーに配信されるようにするには？

デザイナーに電話してください。 UIデザインワークフローを再構築する時が来ました。

私の答え：あなたのデザイナーを巻き込んでください 初日から 、UI / UX開発プロセス全体を通してそれらを関与させ続けます。明確なコミュニケーションラインを確立し、開発者と設計者の間で一貫したメッセージングプロセスがあることを確認してください。

必要なものはすべて揃っていますか？

UIの実装中に発生する可能性のある最悪の事態は デザイナーと開発者の間のコミュニケーションの欠如 （同じ人でない限り）。一部の設計者は、PSDを送信すると作業が完了したと思うでしょうが、実際にはそれは間違っています。 PSDの送信中ずっと続くコミュニケーションプロセスが常に必要です。

デザイナーがいるプロジェクト シングル 設計ファイルを提出し、開発者 シングル それらを実装し、それらは単に不合格。

多くの場合、デザイナーが最終的なUX / UIの実装を確認するまでには時間がかかります。彼の驚いたことに、 ビルド 多くの場合、最初のプレゼンテーションとは完全に異なります。（これは何度も起こりました。完全な説明とインタラクションのプロトタイプを含む元のファイルを提出しましたが、数か月後にようやくプロジェクトを見たとき、構造、色が異なり、インタラクションがありませんでした。）

一部の設計者はこれを嫌うかもしれませんが、この設計作業プロセスでは、多くの「余分な」作業が必要になります。ただし、組織化された方法で情報とリソースを作成および配信することは、大規模なプロジェクトとチームに最適です。

開発者が必要なものをすべて目の前に持っている場合、プロセスはスピードアップします。クリーンで整理されたPSDだけでは不十分です。

仕事を効果的かつ効率的に行うために何が必要ですか？

これらは、開発者が設計者に実装することを期待すべき優れたリソースです。 UX / UIデザイン：

元のファイル -設計者は、アプリのすべての要素を1つのファイルに入れる必要があります。このファイルにはボタンが含まれている必要があります。 チェックボックス 、のスタイル ヘッダ 、フォント、色など。基本的に、このファイルの情報に基づいて、開発者は任意のインターフェイスを最初から再作成できるはずです。開発者は、複数のファイルを検索するよりも、PSDだけから要素をエクスポートする方がはるかに簡単です。
リソース -元のファイルに再度触れないように、開発者が必要なリソースをすべて持っていることを確認してください。
相互作用のプロトタイプ -「静的画面」の時代はもうありません。スマートアニメーションとインタラクションを使用してUXプロセスをスムーズにし、実装することは、今日の非常に一般的な方法です。しかし、開発者に「これは左からスライドします」とだけ言うことはできません。設計者は、その相互作用のプロトタイプを作成し、速度、速度などの情報を含める必要があります。設計者は、これらの各値を指定する必要があります。
命名規則 -さまざまなファイルに名前を付けて整理するための構造が必要です。それはファイルをナビゲートすることになるとあなたの両方のために物事を簡単にします。（誰も目に見えないフォルダに物を隠すのが好きではありません）。
HDPIリソース -私たちは「困難な時代」に生きており、画面の密度が非常に高くなっています。アプリケーションがどこでも見栄えがするように、デザイナーが必要なすべての解像度で画像を配信するようにしてください。注：できるだけ多くのベクトルを使用すると、非常に役立ちます（svg）。
拡張現実と複合現実の違い

実装中に見つからないものがある場合でも、恐れることはありません。デザイナーに相談して、それを求めてください。何もスキップしたり、軽蔑したりしないでください！彼らは同じチームのメンバーであり、彼らの仕事は可能な限り最高の製品を提供することです。デザイナーが失敗した場合、あなたも失敗します。

進行中の作業

UI / UXの実装プロセス中にデザイナーを使用します。彼らがただ「ピクセルを押す」ことを期待して彼らを脇に置いてはいけません。設計者は、実装が始まる前でさえ、可能な革新を目にします。これを利用して、彼らに情報を提供し続けてください。進行中の作業を表示およびテストするためのアクセス権を提供します。未完成のものを共有するのが好きな人はいないと思いますが、途中で変更を加える方がはるかに簡単です。 ビルド それが終わったらそれをするために。そうすることで、時間を節約し、不要な作業を防ぐことができます。設計者にプロジェクトをテストする機会を与えたら、問題と解決策のリストを編集し、改善を提案するように設計者に依頼します。

開発者がアプリケーションの外観を変えるアイデアを持っている場合はどうすればよいですか？彼と話し合ってくださいデザイナー、および開発者が設計者に相談せずに設計を変更することを決して許可しないでください。この設計作業のプロセスは、正しい軌道に乗るのに役立ちます。優れたデザイナーには、画面上のすべてのアイテムに理由があり、その理由を理解せずに1つのアイテムを削除すると、製品のユーザーエクスペリエンスが損なわれる可能性があります。

UI / UXプロジェクト管理デザイン

設計者は、開発者が1日、あるいは1時間で設計を実現できると考えるでしょう。しかし、優れた設計と同様に、優れた開発には時間と労力がかかります。気になるデザイナーを少し遠ざけて、少なくともそのプロセスを見てもらいましょう。 ビルド 。外部ソフトウェアを使用してプロジェクトを管理し、すべてのレビューが表示されていることを確認することは、Skypeや電子メールの会話で議論された重要な情報や情報を忘れないようにするための優れた方法です。そして正直に言うと、変更やアクティビティは、発生するまで伝達されない場合があります。

どのソリューションを使用する場合でも、必ず チーム全体が採用し、一貫して使用できるワークプロセスを選択します。 私たちのチームでは、Basecampを提案しようとしましたが、それは私が使用していたものでしたが、フロントエンドの開発者は、Basecampの機能が限られていると考えていました。彼らはすでに他のプロジェクト管理ソフトウェアを使用して追跡していましたバグ、進捗状況など、JIRA、GitHub、さらにはEvernoteなど。情報とコミュニケーションを管理および追跡するプロセスはできるだけ単純である必要があることを理解したため、UI設計の作業プロセスをJIRAに移行する必要がありました。私の仕事のプロセスと進捗状況を彼らに理解してもらいたかったのですが、デザインが管理以外のものであると彼らに感じてほしくありませんでした。

プロジェクト管理ツールに関するいくつかの提案を次に示します。

ベースキャンプ -進行中の設計および開発タスクを追跡し、それらを簡単にエクスポートできるようにします。また、非常にシンプルなモバイルクライアントもあります。
JIRA -ダッシュボードを簡単に作成して、バックエンド、フロントエンド、デザインなどのアクティビティを追跡できる、完全にカスタマイズ可能なプラットフォーム。モバイルクライアントは少し弱いですが、以下を含む大規模なチームにとっては素晴らしいソリューションだと思います。 バグ追跡 。
メール-会話を始めたり、画像を送信したりするのに最適です。でもお願いです、 注意してください 電子メールを使用して批判やコメントを送信する場合。物事は簡単に失われる可能性があります。

あなたも試すことができます Trello およびその他のプロジェクト管理ソフトウェアですが、業界で最も使用されているのはBasecampとJIRAです。繰り返しますが、最も重要なことは、誰もが一貫して使用できるプロジェクト管理システムを見つけることです。そうでなければ、それは無意味です。

UXの設計と開発が一体になる

デザイナーと開発者は強力な組み合わせです。 UIとUXのアイデアをできるだけ頻繁に共有するようにしてください。開発者は、設計者がアイデアを思いつくのを喜んで支援する必要がありますが、設計者は、少なくとも使用されているテクノロジの基本的な理解を持っている必要があります。

設計作業プロセスについて合意します。デザイナーが作成したものを盲目的に実装しないでください。積極的に行動し、2つの異なる視点を活用して、美しく見えながら優れたユーザーエクスペリエンスを提供するものを作成します。デザイナーは箱の外で考え、クレイジーなアニメーション、アイデア、ピクセル、ボタンを見るでしょう。一方、開発者はテクノロジー、制限、衝撃速度を見るでしょう。

UIデザインに関するこのチュートリアルに従うことで、デザイン作業プロセスを明確にすることができます。

私の経験では、すべてのデザイナーはピクセルとクールなコンセプトに夢中ですが、デザイナーがアイデアを思いついたときもありますが、開発者はそれらを止めて、「これが完了するとうまくいきません。実装されました。消費にはパフォーマンスの問題があります」。最近、背景の焦点が合っていないモーダルウィンドウを実装することを考えていましたが、焦点が合っていないため、画像の読み込み時間が非常に長くなりました。これを解決するために、開発者は単純なカラーレイヤーを使用することを提案しました。これにより、読み込みが速くなり、画質が維持されます。 デザイナーは注意を払う：デザインのユーザーエクスペリエンスを妥協しないでください 。

観察の輪

設計者の観察は非常に重要であり、可能な限り頻繁に行う必要があります。それはおそらくあなたにとって最も時間（そしてエネルギー）を要求しますが、完璧な結果を出すためにはそれを受け入れる必要があります。観察を完璧にするためのUXおよびUIデザインワークフローのヒントをいくつか紹介します。

視覚的に -コメントや批判はできるだけ具体的にする必要があります。これを正確に行うための最良の方法は、スクリーンショットを撮り、修正したい問題を強調表示することです。写真があれば見栄えが良くなります 現在の実装とその外観 。ビジュアルコミュニケーションは質問の50％を排除します。
説明的であること -観察は正確でなければなりません。「このボタンを上に移動する」とだけ言うことはできません。設計者は、ボタンに移動するピクセル数、使用する間隔などを常に指定する必要があります。問題の説明と適切な解決策を常に含めてください。長い時間がかかりますが、それだけの価値はあります。
我慢して -設計者と開発者は同じアプローチを共有しないことに注意してください。開発者が設計者のアイデアを完全に理解していない場合、これは不適切な決定につながる可能性があります。いずれの場合も、双方は忍耐強く、他のチームメンバーを喜んで支援する必要があります。それは時々本当に難しいです、しかしそれはすべてのデザイナーと開発者が学ばなければならないスキルです。

これらを組み合わせて、設計作業プロセスにより適したものにする必要があることは明らかです。しかし、批判やコメントを提出するのに役立つツールは何ですか？

Eメール -これがコメントを送信するための最も一般的なプラットフォームであると言うことを恐れません。いくつかの簡単なルールに従えば、それを使用しても問題ありません。
- まず、観察に単一のスレッドを使用します。それぞれの変更を異なるタイトルの新しい電子メールに入れないでください。
- 次に、修正のリストを作成します。座って、発見したすべての変更や修正について考えてみてください。
- そして最後に、一度に一括リストを送信しないでください。それを小さな個々のリストに分けて、部分的に行ってみてください。
Skype（ハングアウト） -声は建設的な批判を提供するための本当に強力なツールです。すぐに質問したり、質問に答えたりできます。ただし、必ずメモを取り、電話後の次のメールで送信してください。
コラボレーションツール -正直なところ、私はコラボレーションツールの大ファンではありません。しかし、それらには1つの大きな利点があります。それは、フィードバックを適切に取得するのに役立ちます。質問をしたり答えたりするのは迅速で、永遠にそこにとどまります。