web-dev-qa-db-ja.com

カードが拡張可能であることをどのように示すのですか？

現在、Google Nowのように、縦に並んだカードの「リスト」を使用するアプリに取り組んでいます。これらのカードには、静的テキスト、（小さい）画像、一部の制御要素（ボタンなど）、またはこれらの組み合わせを含めることができます。

現在、一部のカードには追加情報またはボタンが含まれている場合があります。これらは、ユーザーがカードの下部をプルダウンしてカードを展開したときに表示されます。エキスパンドAndroid通知に似ています。ただし、一部のカードがエキスパンド可能であるのに対し、他のカードはエキスパンドできないことを適切に示すにはどうすればよいですか？

レイアウトの簡単なモックアップ： enter image description here

interaction-designandroidappcards
13
Jelle

「もっと見る」リンク（下部近く）

これを行う最も簡単で明確な方法は、明確にラベル付けされたリンクを使用することです...

show more

リンクがある場合は、表示されていないものがあることを知っています。

「カードを展開/カードを折りたたむ」リンク（右上隅）

ユーザーが追加コンテンツの表示と非表示の両方を希望する場合は、これを行うためのリンクが上部近くに固定されていることを確認してください。リンクのテキストは変化するはずですが移動しても移動しないため、ユーザーはカードを展開した後の状態に戻すためにカードを縮小する方法を探す必要がありません。

ほとんどのカードが適切なスペースに収まる場合は、すべてのカードにこのリンクを設定しないでください。

16
DaveAlger

このようなことでシェブロンが人気になるのを見てきました。楕円形のサイドフッターに沿った、押しやすい大きな脂肪領域。読む必要がない拡張可能なコンテンツを暗示する、かなりおなじみの記号。

enter image description here

26
Andrew Hoffman

DaveAlgerの投稿に投票したのは、それが最も簡単で明確であるためです。

これを検討している間に私が持っていたアイデアに言及したいと思いました。それはあなたのモックアップの比率から、それが電話/タッチアプリケーションであるように見えます。ファスナーをドラッグしてZipを開き、カードの内容を表示できる Zip を各カードに水平方向に想像しました。 Zipの2つの部分がアタッチされていないため、Zipを開いて追加のコンテンツを表示すると、実際には機能しません。しかし、適切なコンテンツ（衣料品/縫製店）があれば、それは楽しいことだと思いました。

3
Bernhard Hofmann

以下が機能します（プラス記号をコンテンツの右または左に移動できます）。さらに、リストを「カード」と述べたので、カード全体に触れることで展開/折りたたみをトリガーしたい場合は、これで十分に目立ちます。

enter image description here

下のコードペン

http://codepen.io/pdjarratt/full/miswr/

3
Balaji Natarajan

3番目の方法は、画像の一部またはテキストの上半分をカードの下部に配置して、ユーザーにカードの詳細情報が表示されるようにすることです。

1
Voxwoman

  1. 「もっと見る」または別の回答で示されている他のテキストでスペルアウトします。多くのアイテムを含むページの場合、すべてのアイテムで非常にエレガントではないと言うために乱雑に見えます。それでも仕事は終わります。

  2. 「+」、下矢印、「...」などのインジケーターを最後の行の終わりに追加します。

  3. 追加コンテンツの最初の行を表示し、残りの部分をグラデーションで覆い隠すか、はっきりと切り取ってください。

  4. アイテムをクリック可能に見せます。対話型アフォーダンスは外観に大きく関係するため、ビジュアルデザイナーに相談する価値は間違いありません。

  5. ホバー効果を追加します（デスクトップでのみ役立ちます）。特に、これらのアイテムで覆われたページがある場合、それらをトリガーする可能性が高くなります。

私は通常、2、3、および5の組み合わせで移動しようとします

1
skwokz