ちなみに、Figmaを使用する場合は 、 既製の設計システムに注意することをお勧めします 。 フリーランサーが1か月あたりの注文を増やすのに役立ち、プログラマーは自分で美しいアプリケーションを作成できます。また、チーム作業用の既製の設計システムを使用して、チームが「スプリント」スプリントをすばやくリードできます。
また、深刻なプロジェクトがある場合、当社のチームは、ベストプラクティスに基づいて組織内に設計システムを展開し、Figmaを使用して特定のタスクに合わせて調整する準備ができています。 Web /デスクトップ、および任意のモバイル。 また、React / React Nativeにも精通しています。 Tへの書き込み： @kamushken
2016年半ばのどこかで、私の記事はゆっくりと投資を回収し始めました（正確には、まもなく、Habréに滞在してから1周年を記念する予定のダイジェストポストで説明します）。 私は、さまざまな問題を抱えるさまざまな製品の所有者から連絡を受けました。 興味深い質問や提案が聞こえ始め、興味深いタスクが現れました。 多くの興味深いケースがありますが、それらの多くについて今話すことは不可能です。NDAが干渉するか、ケースについて読んでユーザーエクスペリエンスを得るために開発にNか月待つ必要があります。 私は、クライアントと手をたたくたびに、彼の仕事を解決する意欲を示したのはまさにこの方法に貢献したと確信しています。 まあ、または少なくとも彼は私に成功の可能性を高めた。
以下にこの方法についてお話したい...
最初に、UIとUXの違いについて簡単に説明します。
最初の（UI）は常に、状態の違いを反映しないインターフェイスデザインを持つ1つ以上の写真です。 たとえば、バスケット内の製品カードのレイアウト。 または、もう少し鈍い別のダッシュボード。 2番目（UX）は一連のフレームであり、スクロールして、スクリプトの最初から最後までのユーザーのパスが表示されます。 原則として、そのようなシリーズには単一の「基礎」がありますが、特定の状態、要素の配置、色、スタイルはフレームごとに変化します。
私は毎日の練習から1つのケースでこの投稿のトピックを開こうとします。 私は、ビジネスと顧客の相互作用を担当する製品の再設計を行いました。 すべては、効率を高める多数の機能を備えたクライアントとのビジネスチャットを中心に展開します。 すべての詳細を開示することはできませんが、アプローチに基づいて、タスクの1つがどのように実行されたかを説明します。 この方法は、最初のステップと製品画面の詳細な作成の両方の段階で適用できることがすでにわかっています。
タスクは次のとおりです。 現在のインターフェイスを改良して、チャットをフォルダーに配信できるようにする必要がありました。
最初は何がありますか？ 機能的対応（チャット）; チャットが散在するサブフォルダー。 洗練されたシンプルなロジックを考え出して、「行われた」すべてを最小限に作り直す必要があります。
ちなみに、これは古典的な状況であり、「ああ、すべてが既に開発されているように、何かを忘れたことを思い出した！」という精神で最も興味深いタイプのタスクの1つです。 または、製品の機能が大きくなりすぎて、何とか既製の画面に押し込む必要がある場合。 ただし、特定のルールに従ってインターフェイスデザインを構築する場合は問題ありません。 このような場合、いつでも何かを「プッシュ」することができ、新しい機能はユーザーの苦痛なしに調和して適合します。
だから...どのように、あなたの決定をクライアントに伝えるために、または他の人ではなくあなたに開発を委ねるべきかを示すために、できるだけ正確にリモートで対話しますか？ 開始するには、この特定のタスクの計画のようなものが必要です！ 彼を見つける方法は？ 想像力を含めると、既製のソリューションが近くにあるかもしれません。 どのアプリケーションでどのアプリケーションでコンテンツまたはエンティティを移動するかを思い出しましょう。 私はすぐにメールクライアントを求めました。 そこで、1つまたは複数の文字を強調表示します。 フォルダーを削除または移動できます。 収まるようです！
これで、ユーザースクリプトを推定できます。 模式的に、指で、ノートにペンで-任意のオプションが適しています。 ところで、筆跡には常に1つの重要な利点があることに注意してください。思考の体系化の質が向上します。
出発点の概要を説明します。チャット中です。連絡先へのバインドが表示されます。このチャットはフォルダ内にあります。 したがって、現在のタスクに対するおおよその手書き計画は次のとおりです。
- 不要な機能を生成したり画面を詰まらせたりしないために、「チャット移動モード」に入る必要があります。
- 移動する連絡先を選択する基準を検討する必要があります
- 目的のパスに沿ってユーザーを移動するためのスクリプトのシーケンスを設定する必要があります
- 移動するフォルダの選択を整理する必要があります。10と20、場合によってはそれ以上がある可能性があるためです。
- ユーザーに「息を吐き、すべてがうまく終わった！」と伝える必要があります。
すでに何かを模索しました！ 計画があります...それでは計算しましょう。 さまざまなインターフェイス状態のフレームが少なくとも5つあります。 おそらく中間状態が必要になるでしょう。 ゼロフレームは、スクリプトの開始時の画面の開始状態と見なされる必要があります。 すでに6が判明しています。フレームごとに最適なユーザーエクスペリエンスを構築するときです。 ぼかして申し訳ありませんが、これはNDAです。つまり、写真を塗りつぶす必要があります。 最後に私の設計に行きましょう：
フレーム0
「開始状態」
現在チャット中です。 上記で述べたすべての要素があります。 連絡先のあるブロックには、フォルダーアイコンと矢印があります。 これがチャットの移動モードへの切り替えになります。 クリックして…に入る
フレーム1
「旅行モード」
新しいコントロールの現象が見られます。 アバターは丸いチェックボックスになりました！ あなたが選ぶことができます。 これは、余分なチェックボックスを作成せず、ブロックで不可能なものを突き出す方法を考えないための、エレガントなソリューションであるように思えます。 上部の選択が点灯し、残りのコントロールは非アクティブです。 したがって、それらをアクティブにする方法についてのクエストがあります。 をクリックして呼び出し...
フレーム2
「機会のポップアップ」
クライアントはこれについて尋ねませんでしたが、私自身は機能の「マージン」を作ります。 複雑なサンプルが何を必要とするのか決してわかりません。 たとえば、フォルダ内に多くの未読があり、それらで選択をソートする必要があります。 または、すべてのチェックボックスをクリックしないように、大量選択を選択します。 ところで、LinkedIn、この投稿を見ていただけますか？ PMへの連絡先の追加に関する通知がそのPMで複製され始めた後、それがすべてであり、PMがもう存在しないことを考慮してください。 このゴミでは、必要な対応が失われます。 LinkedInは、「未読のみを選択」の実装を急いでいます。 気が散ってすみません。 そのため、注意してユーザーにさまざまな選択肢を提供しました。 このシナリオでは、クリックして実行させます...
フレーム3
「一括選択」
したがって、ユーザーは少数の連絡先をすべて選択します。 上部コントロールがどのようにアクティブ化されたかに注目してください。 上記の小さなクエストは正常に完了しました！ 次に、彼は下部の連絡先をクリックして...
フレーム4
「デレク」
チェックボックスをアバターに戻す「魔法」を表示することで、選択を解除します。 アバタースタブで言うのではなく、 ユーザーはまだ写真を追加していません。 次のクリックは「移動」要素で行われ、...
フレーム5
「フォルダの選択」
フォルダのリストを含むポップアップが表示されます。 すべてのダイアログを移動する場所を選択する必要があります。 ユーザーに次のことを伝えるフレームを表示します...
フレーム6
「成功、老人！」
すべてがうまくいきました！ 要素の数が減り、「Done！」と書くことでユーザーエクスペリエンスが成功したことが確認されました。 それに注意して、元に戻す機会を残します。 ミスクリックが発生し、会話が間違ったフォルダに「飛んだ」場合はどうなりますか？ 安全であることは害になりません。 数秒後にポップアップがスムーズに消えます。
フレーム7
「状態を戻す」
これは完全を期すためのものです。 チャットが移動され、ポップアップが消え、移動モードがオフになったときに状態を返します。
スクリプトが完成しました。 次は？
クライアントにソリューションをデモンストレーションする方法の問題を解決することは今でも残っています。 今日では、ストーリーボードからインターフェイスの模倣を構築するのに十分なソフトウェアがすでに繁殖しています。 これにより、Axure、Invisionapp、Pixateなどを作成できます。ただし、まず、これらのプログラムをマスターして時間を費やす必要があります。 第二に、私たちの仕事はそれほどグローバルではないので、それが価値があるという事実ではありません。 ここには2つの簡単なオプションがあります。
最初のもの 。 すべてのフレームを単純なGIFアニメーションで収集し、円形に回転させます。 これには多くのツールがあり、Photoshopはうまく機能しています。 唯一の欠点は、アニメーションの「冷静さ」です。 プラスは、作成とプレゼンテーションの速度です。 起こったことは次のとおりです。
二番目 。 もう少し洗練されており、実装にもう少し時間がかかります。 ただし、実際のインターフェイスをほぼ100％シミュレートします。 一番下の行は、上記のすべてのフレームが交互に切り替えられる画面からビデオが記録され、マウスがアクティビティによってシミュレートされることです。 欠点は、同期フレームスイッチングのためにいくらかの器用さとリハーサルが必要なことです。 さらに、動作中の製品と区別することはほとんど不可能です。
以上です。 説明としての手紙へのテキストの段落。 ファイル、リンク、ビデオなどを添付してください...クライアントが最初にアニメーションを見た場合は。 その後、必要に応じて、フレームを調べて詳細を確認できます。 多くの場合、これは不要ではありません。
私は通常、成功したタスクの可能性を高めるように思えるいくつかの点にも固執しています。
拡張ユーザースクリプト
別のタスクでユーザースクリプトの展開を最大化しようとしています。 ここでの計画は大いに役立ちます。 この例では、一括選択から開始し、下部の連絡先から選択を削除しました。 そして、彼は上から下にそれらを1つずつ愚かに呼び出すことができました...
幅広い思考は使用機能に等しい
広く考える能力により、クライアントが疑わなかった「チップ」を見つけて開発することができます。 ユーザーの立場に身を置くようにしています-これは、使用機能を見つけ、機能を改善するのに役立ちます。 「ユーザーはここで他に何が必要ですか？」と自問することがあります。
インターフェイスルールの遵守
私はすべての新しい「チップ」を、それぞれの新しい開発が始まるインターフェースのルールとガイドラインに引き続き従います。 インターフェイスルール-これは、プロジェクトの最終段階でドキュメントで説明するものです（スタイル、フォント、インデント、色、動作、要素の応答など）。 したがって、新しい使用機能は、製品とより統合されたように見えます。 ほとんどの場合、クライアントは彼女を承認します！
おそらく今ではすべてが確実です。 あなたがあなたの顧客と同じ波長にいることを望みます。 特定のタスクであなたに必要なことよりも少し多くすれば、成功に近づくことができます...