web-dev-qa-db-ja.com

スワイプ機能のペーパープロトタイピング

タッチスクリーンインターフェイス用の最初の紙のプロトタイプを作成しています。リストビューでは、リストの1つのバーに3つの可能な操作、左スワイプ、右スワイプ、またはタップがあります。左にスワイプすると緑のバーが表示され、新しいページに移行します。同様に、右にスワイプすると赤いバーが表示され、タップするとバーが拡大して下のバーが押し下げられます。一種の-- this アプリ。では、これらの3つすべての相互作用を1つの紙のプロトタイプでどのように表現できますか?

4
EasilyBaffled

バーが最初にスワイプ可能であることを示すインジケーター、たとえば、下のインジケータードット、または左/右から赤/緑のピークがある場合は、何らかのソートが必要になります。次のディスカッションを参照してください: 左右にスワイプすることを示すのに最適な画像 。そのインジケーターを配置したら、私は個人的に、より多くの紙のプロトタイプを使用して、さまざまな状態を表示します

しかし、あなたの質問に答えるために:私はナイフまたははさみを使用してバーの左右に垂直に切り込みを入れ、次に異なるバーの状態を含む紙のストリップを挿入し、次にストリップを物理的に左右にスライドさせて表示しますさまざまな状態。遷移先の新しいページも表示したい場合、singleの紙のプロトタイプでそれを行う良い方法は実際にはわかりません

2
magnus.westrom

紙のスライディングビットを使用して、スワイプ動作をモデル化できます。ユーザーがスワイプを開始したら、プロトタイプを一時停止(つまり、「ちょっと待って」と言います)し、スライドする紙の下に「何でも」を置きます。

ユーザーがスワイプを開始したときに気付くのに十分なだけ、スワイプペーパーの背景の右側に少し緑色、左側に少し赤色があることを確認します。ブリードスルーを隠すために、カバー紙を厚くする必要があるかもしれません。

明らかに、ユーザーが紙片を押した場合、それはタップであり、拡張バージョンを示す別のプロトタイプに交換できます。

(モックアップの残りの部分がどれほど複雑であるかに応じて)紙の余分な部分が目立つ可能性があるため、「本物」よりもわずかに見つけやすくなります。しかし、スワイプ操作を安価に探索し、何もコーディングしたり、ユーザーに不慣れなアプリケーションに切り替えたりすることなく、必要な予備的な詳細を取得することができます。

1
Alex Feinman