スマートフォンおよびタブレットのガイド設計

最終更新日:

この機能によるガイドセグメント化への影響はありません。

Pendoは、ポートレートモードおよびランドスケープモードのどちらの場合でも、スマートフォンやタブレットで見やすいガイドを作成できます。

アプリがタブレットで実行

タブレットのガイドを作成する場合は、タブレットのフレームを使用してデザインできます。

  1. 上部トレイにある[表示オプション(Display Options)]ドロワーを開いて、タブレットフレーム(ポートレート/ランドスケープ)でガイドを表示できるデバイスフレームを選択します。
  2. デバイスのタイプ(スマートフォン/タブレット)と向き(縦/横)を選択します。

デフォルトの左右マージンはスマートフォン向けに最適化されていますので、タブレット向けに変更してください。

ezgif.com-video-to-gif__5_.gif

Pendoデザイナーで使用されているフレームは、最も一般的なiPhoneのサイズ(iPhone 8)と最も一般的なiPhoneタブレット(iPad 12)に最適化しています。これらのフレームは、特定の比率(スマートフォンは16:9、タブレットは4:3)の汎用性が高いフレームであり、実際のデバイスではガイドの表示が異なる場合があります

ガイドはデザイナープレビューにHTMLで表示されるのに対し、実際のモバイルデバイスではiOSやAndroidのネイティブコンポーネントで表示されます。そのため、デザイナープレビューではガイドのだいたいのサイズや比率が把握できますが、実際のデバイスでのガイドの見え方を正確に表すことはできません。実際のデバイスでガイドを確認することを強くお勧めします。

ツールチップについて

ツールチップには独自のプロパティがあります。ツールチップの幅はコンテンツによって決まります(幅のコントロールには改行を使用)。ツールチップのサイズは、デバイスに関係なく常に同じサイズのままで、タブレットでは特別な調整は不要です。

ezgif.com-video-to-gif__6_.gif 

ガイド幅を制限

編集コンテナの[ガイド幅を制限(Limit Guide Width)]オプションを使用して、スマートフォンとタブレット用の「ポップアップ」ガイドを最適化します。この設定は、[フルスクリーンガイド(Full Screen Guide)]の設定がオフになっている場合に使用できます。
Screen_Shot_2020-05-21_at_10.09.00.png

幅を制限することで、ガイドの幅(スクリーン幅から余白を引いたもの)が広くなりすぎず、画面の幅がより広いデバイスでガイドを表示するときでも「ポップアップ」の外観を保てます。

Screen_Shot_2020-09-09_at_15.20.00.png

アプリを縦向き、横向きの両方で使用する場合も同じです。この場合、ポップアップガイドで最大幅を設定すれば、横向きモードで表示したときのポップアップの外観を保てます。

 

この記事は役に立ちましたか?
2人中0人がこの記事が役に立ったと言っています