タッチスクリーン付きの携帯電話用の画像エディターアプリを作成しています。ブラシ、鉛筆、ゴム、マスク、汚れ、トリミング、テキストなどの関連するデスクトップアプリケーションと同様のツールが含まれます。
流動的なワークフローでは、これらは重要だと思います。
特に小さな画面では、画面上のほとんどのスペースを画像編集エリアやツールバーなどに割り当てる必要があります。
ユーザーは、最小限の手間で特定のツールをすばやく切り替えることができる必要があります。たとえば、何かを描くときは、ブラシツールと消しゴムツールをすばやく切り替えたり、元に戻す/やり直しをすばやく押したりできることが重要だと思います。
GIMPとInkscapeのツールバーベースのインターフェイスは、この種のアプリケーションに適していると思いますが、小さな画面に巨大なツールバーを配置する余地はありません。
画面上部にツールバーがあります。ツールバーには、元に戻すややり直しなどの基本的な操作を含む7〜8個のショートカットアイコン用のスペースがあり、クリック1つで操作にアクセスできる簡単な方法のようです。ツールバーを大きくしないと、他のアイコンをいくつか入れるだけの十分なスペースがあります。
このスペースを最大限に活用する方法についてのアイデアを探しています。
私が持っていたいくつかのアイデア:
ツールバーの半分を水平方向にスクロール可能にして、左右にスワイプして他のツールボタンを表示できるようにします。左端に表示されるツールと右端に表示されるツールを定期的に使用する場合、これは手ごわくて発見するのが難しく、あまりよくありません。
いくつかを組み合わせてツールの数を減らします。たとえば、鉛筆とスマッジはブラシツールの設定可能なモードになります。これは直感的でない場合があり、鉛筆モードとブラシモードを切り替えるための追加の手順が導入されます(ただし、これがまれである場合、これは大した問題ではありません)。
ユーザーがツールバーに表示するツールを変更できるようにして、ユーザーがすばやく切り替えることができるツールを決定できるようにします。たとえば、アイコンをダブルタップすると、ツールバーボタンを別のツールに交換できるメニューが表示されます。これは前のポイントとの類似点があります。
私が見逃している明らかなものはありますか?
モバイル画面で画像を扱う際に最も重要なことは、画面の面積です。より多くの画像とより少ないUIを使用して、操作している細部を確認できます。ですから、できるだけたくさん詰めることをお勧めします。
以下は、1つのソリューションの簡単なモックアップです。
ボタンは左下にあり、画面はきれいです。ピンチしてズームイン、ズームアウトできます。
ツールアイコンをタップすると、すべてのツールのナビゲーションが表示されます。 #3の暗い三角形に注意してください。これは、そこにさらに多くのツールが隠されていることを示しています。アイコンをタップして押し続けると、さらに多くのツールを表示する3番目のssが表示されます。
画像編集には多くの精密作業が必要であり、それらの変更を確認することが最も重要です。
さらに2つのアイデア:
1.)すべてのツールでレイヤーを開くボタンを1つ作成します。そのようなもの(もちろん、ボタンの代わりにツールを使用):
2.)引き出す「引き出し」を作る。 Android通知バーのようなもの:
またはGoogle iPhoneアプリ:
個人的に私は1.)はおそらくよりうまく機能すると思います。もちろん、すべてのツールを常に利用できるようにすることをお勧めしますが、限られたスペースで優先順位を設定する必要があります。
編集:iPhone向けPhotoshopをご覧になりましたか?最も使用頻度の高い3〜4のツールと残りのツール用の1つのボタンを備えた1つのツールバーに削減することもできます。これがスクリーンショットです(古いバージョンだと思いますが、原則は変わりませんでした)。
Philがお役に立てば幸い
30ドルでアプリストアから数十のアプリを入手して試してみてください。私の頭の上の個人的な好み:
私が好きな画像編集UI:
その他の考慮事項:
その他多数...