web-dev-qa-db-ja.com

カルーセルの代わりにSlideDeck(水平アコーディオン)を使用するのはなぜですか?

私はクライアントのサイトを見直しています。彼らのデザイナーは珍しい要素を使用して、いくつかの重要なポイントを提示しています。この要素は SlideDeck と呼ばれ、基本的には反時計回りに回してファンシーカルーセルとして使用されるアコーディオンメニューです。

sidedeck screenshot

クライアントがスライダーに入力したコンテンツは、別の簡単なストーリーなので、そのような要素の適切性に関心があります。垂直アコーディオンメニューは、垂直スペースを節約し、ナビゲーションの2番目のレベルにすばやくアクセスできるようにするために使用されます。ただし、水平に移動すると、通常のカルーセルはうまく機能し、セレクターを下にしてスライドを切り替えるために必要な距離が短くなります。

SlideDeckのサンプルギャラリー には、標準スタイルとカスタムスタイルの両方があります。標準レイアウトの中で、 Basecampの製品ツアー は、私がそれを販売していませんが、最も際立っています。カスタムレイアウトでは、 CrazyEggのマーケティングデッキ が最適で、左側に「タブ」が縦に積み重ねられ、メインコンテンツが右側に表示されて、非常に論理的にレイアウトされています。

それでは、SlideDeck(または類似のもの)はカルーセルの良い代替手段ですか、それとも特定の場合にのみ機能し、広範囲にわたるカスタマイズがある場合にのみ機能しますか?

8
dnbrv

水平アコーディオンは、利用可能なコンテンツの完全な概要を提供するという点でカルーセルよりも1つの利点がありますが、カルーセルは設計により追加のコンテンツを示唆するだけです。アコーディオンは包括的な構造を提供し、カルーセルはアイテムレベルの詳細に焦点を当てています。

コンテンツがメタ構造を持ち、単なるアイテムのコレクションではない場合は、水平アコーディオンを使用します。

あなたの例では、アイテムは、導入、詳細、および行動を促すフレーズのシーケンスを含むメタ構造に形成されます。

1スライドデッキとは何ですか?
2つのユニークな機能
3つのプロサポート
4はじめに

ただし、lolcatのコレクションがあり、順不同である場合は、カルーセルの方が適しています。

7
Erics

私はSlideDeckチームと一緒に作業しているので、私はうまくいきそうだと思いました。SlideDeckでは、より伝統的なカルーセルの外観を実現したい場合は、垂直スパインをオフにすることができます。これを行うには。

カスタマイズに関しては、HTML/CSS/jQueryのスキルと快適さだけに限定されます。

2
Jason Amunwa

まず、SlideDeck isカルーセル(ナビゲーションとサブスライドのオプションを含む)。 SlideDeckは、その追加機能を使用して、PowerPointプレゼンテーションと同じように、ストーリーを伝える方法を作成します。これには、始まり、中間、終わりがあります。そのため、各スライドが他のスライドに接続されているが、それ自体が独立している特定のストーリーを取得したい場合はいつでも、SlideDeckが適しています。

標準のカルーセルは、各スライドが何であるかについてユーザーに多くの洞察を与えないので、ナビゲーションは本質的にブラインドプロセスです。写真やコンテンツのランダム、各種、またはその他のスライドがある場合は、標準のカルーセルで十分です。

会社のウェブサイトから:

自分のメッセージとプロセスを単純化しようとすると、[SlideDeck]コンセプトに出くわしました。 SlideDeckを使用して、アイデア、プロセス、製品を明確でシンプルな方法で共有しています。

そして

SlideDeckは、Webの現在のテキストの多いサービスページのモデル、不明確な製品ツアー、わかりにくいプロセス図を、Webサイトとやり取りする楽しくてすばやく美しい方法に置き換えるように設計されています。

1
Taj Moore

水平アコーディオンは一般的なパターンではありませんが、コンテンツが発見可能であり、(邪魔にならない)トランジションまたはアニメーションが何が起こっているのかを明らかにしている限り、ユーザーはおそらくを理解します。必ずタブコントローラーでホバー状態を使用し、実装がテキストブラウザーや検索エンジンなどの非JavaScriptクライアントにコンテンツを提供できることを確認してください。

ただし、通常、水平アコーディオンは垂直方向のスペースを制限することに注意してください。タブが奇妙に見えるだけでなく、タイトル/リンクテキストがスクロールせずに見える範囲より上または下になるとすぐに問題が発生することは想像できると思います。一部のコンテンツは垂直方向に制約されたくない(上から下への関係を使用して階層を伝達するアイテムの順序付きリストなど)ため、これは問題になる可能性があります-クライアントが使用しているコンテンツがわかりません。

水平アコーディオンが多数のアイテムでどのように機能するかについても気になります。ユーザーは、左マージンをスキャンしながらF字型のパターンでコンテンツを読みたいと思っています。本能は、ユーザーが複数項目の行の解析をうまく実行できないことです。つまり、多くのアイテムを含むアコーディオンは、ユーザーテストで問題が発生する可能性があります。このデザインでサブタブをどのように示すことができるかもわかりません-垂直タブではインデントに頼ることができますが、ここでは実際には機能しません(特にタブタイトルが上揃えになる傾向があるため)。

ただし、一般的に言えば、通常のカルーセルがうまく機能すると感じた場合(アイテムの数が少ないため、すべてすぐに見つけられる)、ナビゲーションがより物理的に便利なため(マウスの正確さをあまり必要としないため)、これを使用します。 )そしてパターンはかなり一般的です。

0

カルーセルの上に水平アコーディオンウィジェットが提供するものについて考えてください。

  • 連続しない方法でパネル間をスキップする機能。
  • パネルにラベルを付ける機能。これにより、選択前にコンテンツが示されます。

これらの機能のいずれかが役立つ場合は、カルーセルの代わりに検討してください。

0
codeinthehole