web-dev-qa-db-ja.com

ディレクトリパスバーの最適化

私はここに言語を挿入で複雑なプロジェクトに取り組んでいます。これには、WindowsエクスプローラーやMac Finderに似ているが、はるかに単純なディレクトリビューアの作成が含まれます。

利用可能なすべてのテキストを表示するために、パスバー(上部)を「縮小」または「短縮」する場所と時期がわかりません。 これはソフトウェア設計の質問であり、「これをどのようにプログラムするか」の質問ではありません

image 1 上に示したのは1つのアレンジメントです。真ん中の黒いバーを左右にスライドさせて、2つの個別のディレクトリセレクターのサイズを変更できます。ユーザーはファイルアイテムを選択して開き、最上位のディレクトリをクリックして現在のディレクトリを変更できます。正しいディレクトリセレクターが切り取られていることに注意してくださいこれは修正するものですパーツを縮小、短縮、または切り取る必要がありますパスバーにfirstおよびlast folderを表示するテキスト常に。

image 2

これは別の例ですが、バーが左に移動しました。右側のディレクトリセレクターは問題ありませんが、左側は切り取られています。左側のパスバーを何らかの方法で変更して、最初と最後が常に完全に表示されるようにします。

ここに質問があります。パスバーをどのようにカット/縮小する必要がありますか?私はいくつかのアイデアを持っていますが、ユーザーにとって最も使いやすく、最も使いやすいものになるかどうかはわかりません。

  1. 中間のディレクトリからテキストを切り取り、Ellipsisで置き換えます(ただし、これをどのディレクトリに分割しますか、またはこれを多数に分割したり、名前が最も長いディレクトリなどに分割したりします)。
  2. 中間ディレクトリのテキストを縮小します(この場合も、どのディレクトリを選択しますか?最中?最上位?(最初を除く)すべて同時に?)

補足:プロジェクトの干渉色は無視してください。変更されます。

3
Zzzach...

特に効果的であることがわかった注目すべき例がいくつかあります。

  • Windows 7/8/10の方法
  • 送信/ Coda方法
    • モバイル対応ではない

Windows 7/8/10の方法

Windows 7/8/10は、私が遭遇した最高のモバイルフレンドリーの例を提供します。

Windows 7/8/10 Path Bar First StageWindows 7/8/10 Path Bar Second StageWindows 7/8/10 Path Bar Third Stage

どのように機能しますか?

パスバーのスペースが制限されると、次のようになります

  1. 現在のディレクトリから最も遠いディレクトリを削除します。
  2. 現在のディレクトリより上のレベルに達した場合...
    • ...削除するのではなく、名前を切り捨てます...
    • ...可能であれば、個々の文字ではなく単語全体を削除して切り捨てます。
  3. 以下のレベルの切り詰められた名前が4文字である場合...
    • ...現在のディレクトリの名前を最大4文字に切り捨てます。

これの利点は何ですか?

最も重要なフォルダとアクションを優先します。

また、ユーザーは常に次のことができるようになります。

  • 彼らの現在のディレクトリを参照してください
  • 前のディレクトリに移動します。
    • そして、拡張によって、以前のすべてのディレクトリ

以前のディレクトリを表示しています

Windowsには二重矢印があり、クリックすると、削除されたフォルダーが垂直のドロップダウンリストに表示されます。

Windows 10 double-arrows to show truncated folders

ユーザーはそれなしでも必要なアクションを実行できます

しかし、階層の大部分をトラバースするのははるかに簡単です


送信/ Codaウェイ

Transmit and Coda 2フォルダをまったく削除せず、名前のみを切り捨てます。

Transmit Path BarCoda 2 Path Bar

ユーザーが切り捨てられた名前にカーソルを合わせると、展開されて完全な名前が表示されます。

これはタッチスクリーンデバイスでは機能しませんが、Windowsメソッドの実行可能な代替手段を提供します。

4
Joel Tebbett