UIが乱雑にならないようにナビゲーションアイコンを表示する「素敵な」方法はありますか？
音楽フォルダをスキャンしてランダムに再生するアルバムを選択する小さなデスクトップアプリケーションがあります。最初のバージョンはWinFormsで、同じアーティストによるアルバムが他にある場合にアクティブになるアルバムアートの両側に「前へ」および「次へ」ボタンがあります。
ボタンが占めるスペースが多すぎるため、このUIに不満があります。
私はWPFを使用してアプリケーションを書き直しています。同じアーティストによる他のアルバムがあることを示すより良い方法を探しています。カバーアートの上にボタンを表示し、マウスがその位置に移動したときにのみボタンを表示する実験をしましたが、主にオプションがあることを示すものがないため、結果に満足していません。
私は Brian Stevens Photography のサイトにきちんとしたトリックを見つけました。カーソルが画像の各半分の上で「+」と「-」に変わり、ナビゲーションを示しますが、画像をクリックして再生することもできますそのアルバムなので、自分で使用したい場合は、このアプローチを採用する必要があります。
より良い方法はありますか、それともカルーセルまたはカバーフロー制御がこれに進む方法ですか？
もう少し背景については、これを読んでください ブログ投稿 私の。
基本的にここでは2つのアイデアがあります。最初のアイデアは小さな円を示し、中央で強調表示されているのは現在表示されているページ/アルバムです。矢印をクリックすると次/前のページが強調表示されます。これにより、特定のアーティストが利用できるアルバムの数がわかります。
（Matt Lutzeの優れた転用ASCII描画）
[Settings] [Random album] [Info]
{ }
{ }
{ Cover }
{ }
{ }
<< o o o * o o o >>
次の1つは、アーティストのアルバムが6つ以上ある場合に表示されます。これは、合計アルバムのアルバム1を表示しているだけです。
[Settings] [Random album] [Info]
{ }
{ }
{ Cover }
{ }
{ }
<< 1 of 10 >>
このようにして、要素はまだ存在しており、さらに表示/待機する必要がある視覚的（またはリテラル）キューを表示します。
ランダムなアイデア：もちろん、私はカバーアートをクリックして中身を見ることができるというアイデアが本当に好きです。この場合、そのアルバムで利用可能な曲のリストが表示されます。これは、特定の曲を再生するオプションになります。
[Settings] [Random album] [Info]
{ 1. Song Names here ^ }
{ 2. Song Names here }
{ 3. Song Names here }
{ 4. Song Names here }
{ 5. Song Names here v }
<< 1 of 10 >>
visual dissonanceが原因でナビゲーションボタンの外観が悪い
- それらは円形で、画像は正方形です。
- 彼らは強く光る3Dであり、画像はフラットです
そして
- 彼らが上下に浪費しているスペースは、ボタンに似た装飾を使用していない平らな灰色の未使用であり、ボタンとも調和していません。
細い長方形のフラットアルバムアートの高さ全体のボタン、中央にスタック ">"（または "<"）を使用すると、これらの3つの問題を解決できますが、カバーアートはナビゲーションコントロールを分離する。ナビゲーションコントロールを1つのビジュアルチャンクに配置すると、より効果的に機能します。
これが昔ながらのソリューション（左）とより現代的なソリューション（右）です。
ボタンのスタイル（ベベル/丸め/ドロップシャドウ/ what-have-you）カバースタイルと一致するスタイルカバーアートフレーム。
左側のボタンには、どのくらいの面積を割り当てたいか、どれくらい簡単にヒットさせたいかに応じて、左/右ボタンのサイズを簡単に大きくできるという利点があります。
右のものはその下に魚眼ミニカルーセルがあります。カバーアートの邪魔にならないように、アクティブ化されていないときはサムネイル画像を古い写真で撮る必要があり、サイズの選択はほとんどありません。
左はシンプルで効果的で、右はアイキャンデーの評価が高くなっています。私は左を好む。音楽の私の好みはどの時代から来ていると思いますか。
別の提案として、AppleのCoverFlowはカバーアートの下の水平スクロールバーを使用して、ユーザーがカバーをスクラブできるようにしています。
利点：
- アートをすばやくスクラブできます。アプリの要件ではない場合があります。
- スケールは、多数のアートで大丈夫です。
- 前後にスクラブすることにより、適切なランダム検索を可能にします。
短所：
- アイテムの数は明らかではありません。
UI要素がすぐに分からないからといって、それが悪い選択であるとは限りません。私は間違いなくカバーの右側をクリックすると1ステップ進み、左側をクリックすると戻るようなものを選びます。 （これが左から右の言語でのみ使用されると仮定すると？）
写真のウェブサイトの+および-記号の代わりに、<および>を提案するだけです。そして、私はそれらを変形させたり、カーソルに追従させたりせず、右中央と左中央に配置します。
アルバムを再生/一時停止する方法として、中央をクリックすることを試すことができます。
この種類のほとんど目に見えないユーザーインターフェイスは、見つかれば簡単に使用でき、その周りにぶら下がっている個別のボタンを（通常のように）ボタンのように見せるよりもはるかに見栄えがします。これの美的極限は、すべてのUI要素をカバープレビューの非表示要素に組み込むことです。マウスが上に置かれていないときに、カバー（およびおそらく曲のタイトル）が表示されるようにします。おそらくこれはあなたのアプリではうまくいくでしょうし、おそらくうまくいかないでしょう。
興味深い質問、および既存の両方の回答のいくつかの良い点。
遍在するコントロールと非表示のコントロールについて：常に表示されているが、視覚的に邪魔されないコントロールに寄りかかることをお勧めします。緑、青、模様入り。すべてが少なくとも少し気を散らす可能性があります。単純な矢印または「より大」記号の使用については、ここでは一般的にNirに同意します
<< {画像} >>
対アイコン/ボタン。
私はあなたのトップアイコンにも提案を拡張し、おそらくコンセプトにデスクトップアプリ/ウェブアプリの境界を視覚的に橋渡しさせることを提案します：
[Settings] [Random album] [Info]
Title
{ }
{ }
<< { Cover } >>
{ }
{ }
私は通常、カバーアートをインターフェースの主要なオブジェクトにする傾向があります。上部に薄いテキストリンクボタンの列、タイトル、次に表紙の大きな画像。どちらの側にも後ろ向きの細いバーがあります。またはそのようなもの。
どんなにスイングしても、変化するマウスポインターアイコンのような新しい動的インジケーターを使用しないことをお勧めします。ポインタが変わると、多くの人が怖がったり緊張したりします。私の経験から、ユーザーはポインタが予測可能なアクションの後に予測可能なことを行うことを期待し、それらを驚かせないことを期待しています。
きちんとしたプロジェクト、そして議論をありがとう。他の人の意見を聞きたいです。
サポートメールに答える人として、ユーザーインターフェイス要素がすぐに明らかでない場合、ユーザーベースのかなりの部分がそれを見つけられないことをお伝えします。
また、ドキュメントやポップアップメッセージを読むこともありません。
機能は明白であるか（多くの場合、ボタンがあるとしても十分に明確ではない）、ユーザーを煩わせることなく機能する必要があります（赤い波線の下線付きスペルチェッカーが良い例です。見つかる必要はありません。それだけです。 ）。
ボタンのスタイルを変更して、ボタンをそれほど大きくせず、背景に溶け込むようにすることができます。たとえば、ボタンを、重いボタンフレームがない2つの小さな矢印に置き換えると、ボタンがはみ出さなくなります。まだユーザーに信号を送っている間ずっと多くが利用できる何かがあります。
ガイダンスについてはWebを参照してください。ほとんどのユーザーが住んでいる場所であり、UIの期待を導きます。ターゲット人口統計の人気サイトを見て、ナビゲーションがどのように管理されているかを確認します。音楽のナビゲートは写真のナビゲートに似ているため、ガイダンスについては新聞や雑誌のサイトを参照してください。
この種のナビゲーションは、ほとんどの場合、グラフィックの上にある小さなボタン、またはマウスオーバー時に表示される透明なボタンによって行われます。ユーザーがアルバムカバーをクリックして聴くようにUIが設計されている場合、ユーザーは透明なボタンをすぐに発見できます。