質問: 何かがスケーリングされていないことをどのように示すのですか? 背景油井に生産設備(ポンプ、チュービングストリング、fcdなど)を表示するためのuiを開発しています。ほとんどの油井には、機器の間隔が非常に不均一です。たとえば、何もない状態で数千メートル、次にアイテム数が10程度、さらにスペースが増えて、アイテムがさらに数個増える場合があります。回路図では、ウェルが完全に垂直でない限り、 measured depth(md) を使用しています。これは true vertical depth(tvd) とは異なります。インターフェースの他の場所でtvdを示しています。現在のソリューションこれに対する私の解決策は、「押しつぶされた」回路図を表示することです。この場合、回路図では、それぞれの深さが独自の行になります。機密保持のため、実際の回路図は削除しましたが、スケールの右側にあり、すべての機器のアイコンが表示されています。 問題残念ながら、これはユーザビリティテストで数人を混乱させました。また、qaはこれをバグとして記録しました(軸スケーリングの不一致)。画面の領域を非常に効果的に使用し、別の縮尺でのビューの開発も計画しているため、縮尺ではなくこの縮尺の表現を維持したいと思います。考えられるアイデア軸が「壊れている」場所を示すためにジグザグタイプのインジケーターを配置できますが、技術的には軸がどこでも壊れているため、見栄えがよくありません。私はまた、上にそれをスペルアウトすることもできます(スケールではありません)が、それはハックに思えます。 または、別のスケールビューを実装するまで、これについてあまり気にする必要はありません。 別の例以前は家族と一緒に 西カナダをドライブ 毎年夏にドライブしていました。本質的に何もない長いストレッチがあります。時間を過ごすのを助けるために、私の母は私たちが通過する面白い町名(ピアポット、レジーナ、ムーソミンなど)のリストを作成しました。それらの町を図で表そうとすると、こんな感じになります。 私の質問これをより明確にする他の方法はありますか?
回答: やりたいことを理解することから始めますあなたはこれをレイアウトするための合理的でハックのない方法を(正しく)探しているので、最初の原則から始めることができます。1.レイアウトパターンを理解する あなたが使おうとしているレイアウトは一般的なものです...私はそれをmini-mapまたはnavigatorパターンと呼んでいますが、おそらくもっと正しいux用語があります。 基本的なパネルレイアウトは賢明なものであり、雑誌、ウェブサイト、パンフレット、その他多くのコンテンツレイアウトで使用されています。左側の列にはコンテンツの「概観」ビューがあり、右側の列には詳細ビューがあります。これはいくつかの理由で良い一般的なレイアウトです: レイアウトは、複雑なコンテンツの階層ビューを提供します。 左側のミニマップ列と右側の詳細を配置すると、ユーザー(ltr言語のユーザー)がコンテンツの処理に慣れているため、視覚的な整理とフローが適切になります 上から下、左から右 。 列の垂直方向は、ユーザーが探している詳細レベルに応じて、どちらかの列を下にscannabilityをユーザーに提供します。 webページの場合、vertical layoutを使用すると、ページを下にスクロールできるため、コンテンツを任意に長くすることができます。 2.コンテンツを整理する パターンの理解を武器に、コンテンツを整理できるようになりました。 ミニマップの目的は、コンテンツ(あなたの場合は奥行きと設備)がorganizedであることをユーザーに示すことです。あなたの場合、機器は深さ順に並べられているので、この方向を効果的に伝えるために正しい縮尺を使用のミニマップを作成してみましょう。 正当な理由で非線形軸に負のフィードバックがありました...既存のレイアウトがユーザーがナビゲーター/ミニマップビューに期待するものに違反しているためです。 右側の詳細パネルの場合、機器はdepth by depthであるため、フォントとレイアウトを選択すると、その順序がユーザーに明確になるはずです。 あとは、左パネルを右パネルに視覚的に接続して、ユーザーが関係を明確に確認できるようにするだけです。 3.次に、デザインを作成します上記の原則を組み込んだ例を次に示します。 ノート: ミニマップは縮尺に合わせて描画深度レベル間の空間関係の明確な方向と通信を提供します。 偶数の垂直間隔を使用してレイアウトされた詳細列は、読みやすさとスキャン可能性を向上させます。 詳細ヘッダーに大きなオレンジ色のフォントを使用して、1を提供します。視覚的関係(オレンジ)ミニマップ。および2.列のインデックス付けの明確な伝達。 微妙な吹き出し矢印を使用して、ミニマップを詳細パネルに関連付けます。これらはおそらく視覚障害者のためのより高いコントラストになるはずですが、レイアウトをよく考えれば、関連付けるために多くのことをする必要がないことを示すために微妙な線を使用しました左のパネルから右のパネルへ。 デザインが適切に伝達的である場合、追加のラベル付けはほとんど必要ないことに注意してください。コンテンツの意味の構成はユーザーには明らかです。 お役に立てば幸いです。