web-dev-qa-db-ja.com

デバイスよりも長いモックアップを描画する方法

デバイス自体よりも長い/広い画面を表現するための最良の方法は何かを尋ねたかっただけです。たとえば、リストの一番下にある種の重要なアイテムがあり、通常は画面外にあります。それを2つの別々の画面に分割します。1つは2つの異なる「スクロール状態」を示しますか?それとも、1つの長い画面にしますか?そのようなことをする最善の方法は何でしょうか?

4
CrazyQwert

モックアップの主な目的は、フレームではなくコンセプトを表示することです。そのため、長い画面は、分割された部分ではなく、全体的に見えます。

「スクロールせずに見える範囲」の線を描いて、ユーザーが画面に入ったときに何が見えるかを明確に示すことができます。

enter image description here
画像ソース

5

各エッジのスロットをスライドする紙のプロトタイプが付いた段ボールまたは木製のデバイスの例を見てきました。

ロンドンへの交通手段( ComputerWeekly 経由): enter image description here

そして、カスタムメイドのスケッチプレビューツールであるironPhone( dribbble 経由) enter image description here

また、必要に応じてユーザーが一番下までスクロールできるインタラクティブなデジタルモックアップで画像を使用して、多くの成功を収めてきました。

5
Roger Attrill

長いコンテンツが何であるかによると思います。

スクロール可能なリストの場合、モックアップにスクロールバーを表示します。

小さなチャンクに分割できる場合は、ページ分割を検討してください。

Alexeyの answer は、PCやタブレットでは素晴らしいと思いますが、携帯電話では使いにくいと思っていました。

基本的にオプションは次のとおりです。

  • 製品リストとフィルタリング
  • 無限スクロール(Facebookタイムラインのような)
  • 無限スクロール+遅延読み込み
  • 固定フッター付きの無限スクロール
  • さらに読み込むボタン
  • ページネーション(モバイルデバイスには推奨されません)

(ソース: 無限スクロール、ページ区切り、または「さらに読み込む」ボタン?eコマースでのユーザビリティの結果 、Christian Holstによる)

0
Yvonne Aburrow