そして、開発者は、大きなアプリケーションのインターフェースを携帯電話の小さな画面にどのように配置するかという問題に直面しています。
カットの下には、音楽アプリケーションの複雑なインターフェイスの問題を解決するためのストーリーがあります。このアプリケーションはVKMini Appsプラットフォーム用に作成されましたが、おそらく、一般的な原則は他のプラットフォームにも適しています。
音楽エディターインターフェースの歴史
音楽エディターは、グラフィックを多用する複雑なプログラムです。最も単純な「クリスマスツリーは森で生まれた」でさえ、ドラム、ベース、ピアノのいくつかのトラックで構成されており、各トラックには数百のノートが含まれています。
これらすべてを何らかの方法で画面に配置し、すべての要素を編集可能にする必要があります。
UIは通常、次のようになります。
音楽プログラムのUX / UIの原則そのものは何年も変わっていません。これは彼らが30年前にどのように見えたかです：
-実際、より多くの色とボタンが追加されました。
モバイルインターフェースはどのように進化しましたか？
標準の広範なパス上。
デスクトップアプリケーションのインターフェイスが採用され、サイズが縮小され、機能が容赦なく切断されました。
FL Studioのモバイルバージョン（これは最高のDAWの1つ）の例を次に示します。
-ボタンが小さすぎて指で押すことができず、要素が画面に収まらず、ドロップダウンメニューで部分的に非表示になっています。また、トラックの写真が小さすぎて何も表示されません。
インターフェースを小さな画面に移植する際
の問題問題の深さを明確にするために、従来の10バンドイコライザーを検討してください。
ほとんどの人はそれが何であるかさえ知らずにそれを使用します。たとえば、YandexMusicサービスに組み込まれているイコライザーは次のとおりです。
指で快適に押すには、ボタンとスクロールバーのサイズが1cm以上である必要があります。イコライザーには10個のスクロールバーがあります。全幅は10cmです。
しかし、それは携帯電話の幅以上のものです！そして、これは多くのコントロールの1つにすぎません。
小さくて押すのに不便なことをすべて行うか、コントロールのごく一部だけを表示して、残りを破棄するか、ドロップダウンメニューなどで非表示にする必要があることがわかりました。
解決策を見つける
小さな画面用の複雑でありながらユーザーフレンドリーなインターフェースを作成するのに役立つアプローチはありますか？
承知しました。
これらはカードです。そして、携帯電話だけでなく、デスクトップでも。
マップは、要素にスケールレイヤーと可視性レイヤーを使用します。小さな画面に何百万ものインタラクティブオブジェクトを表示します。
ほとんどの場合、直感的に使用できます。これにより、このUX / UIアプローチの有用性が確認されます。
ソリューションの例
トラックを互いに重ねて配置し、コントロールとともにピアノロール全体にスケーリングを追加することが決定されました。
統計では、音楽分野の他のアプリケーションのように見えます。
しかし、ダイナミクスでは、その動作が非常に異なることは明らかです 。アプリケーションでの作業のビデオを
開くビデオ
のプロジェクトをVKontakteで開いて、次のことをテストできます。
- アプリで開く
- 電話とVKontakteフィードメッセージ内の両方で機能します
UIスケーリングアプローチを完全に適用することで、小さな画面に多数の要素を収めることができました。
- すべての要素は「手元にあり」、すばやくアクセスできます
- ユーザーは、小さな画面に収まる部分ではなく、プロジェクト全体を見る機会があります。