2つのエンティティを検索する検索の結果を表示する方法
歌詞サイト に取り組んでいます。サイトは非常に進行中の作業です。これはサイトの書き直しです。古いサイトでは、Google Analyticsから、ユーザーの90％がモバイルユーザーであることがわかりました。それが私が100％集中していることです。
これが私が現在考えているモバイル体験です。
次に取り組むのは検索です。私が現在考えているのはこれです：
その黄色の検索ボタンをクリックすると、全体が左にスライドし、検索を開始するための入力ボックスが表示されます。
この検索では、歌詞とアーティストの両方が検索されます。これらの結果をユーザーに表示する最良の方法についてサポートが必要です。
ユーザーは、どの結果がアーティストであり、どの結果が歌詞であるかを知る必要があります。現在、私が心に留めているのは次のようなものです。
しかし、それがうまく機能するかどうかはわかりません。歌詞の結果とアーティストの結果の区別が十分ではないような気がします。
これは良い方法ですか？そうでない場合、より良い方法は何ですか？
このようなものはどうですか。検索結果を含む2つのタブがあります。アーティストと曲はタブのラベルです。
エントリのタイプを分離するには、検索結果でタイトルを十分に明確にする必要があります...この画像は、「UXプラネット」サイトで実行される方法の例です
他の人が示唆しているように、セグメント化された検索結果を提示する必要があります。 SpotifyやApple音楽などの最も人気のある音楽アプリはすでにこれをうまく行っています。これらのアプリを研究し、同様のデザインパターンを実装して、ユーザーが新しいものを学ぶ必要がないようにしてください。アプローチ。
一般に、@ Aprillionがコメントで述べたことに同意します。他のいくつかの提案はウェブサイトにより適しているようです。これは貴重な限られた画面の不動産を備えたモバイルアプリであるため、背景色やアイコンで区別することで、曲とアーティストの両方を統合して検索するのが最適ですが、アイコンはすっきりと見えるので個人的に好みます。
また、黄色の検索ボタンの配置が混乱しています。あなたの例では、検索が「Canaan Smith」のみであるとユーザーに誤解させる可能性があります。検索結果が多すぎる場合に備えて、ユーザーがアーティスト、歌詞、またはその両方のみをフィルタリングするための「フィルター」セレクターと「ソート基準」セレクターを用意するとよいでしょう。
これらの要素を組み込むには、黄色の検索ボタンを上部に配置することをお勧めします。以下はあなたの元のデザインに基づいて私が思いついたものです
ラベルとタグの組み合わせを使用します。ラベルを一緒に表示すると、各結果が識別され、フィルタータグを使用すると、ユーザーが希望どおりに結果をフィルターできます。
マテリアルデザインでは、フィルターチップと呼ばれるこの方法を使用します。 
これらのタグを使用すると、ユーザーはチェックボックスなどのオプションを選択でき、検索機能と組み合わせて使用できます。 
この方法はスケーラブルではないため、タブやアイコンを使用するよりも優れています。このアプローチでは、将来含めるエンティティがさらにある場合、簡単に実行できます。
